diff --git a/.github/workflows/keep-supabase-alive.yml b/.github/workflows/keep-supabase-alive.yml
new file mode 100644
index 0000000..defe8ec
--- /dev/null
+++ b/.github/workflows/keep-supabase-alive.yml
@@ -0,0 +1,73 @@
+name: Keep Supabase Alive
+
+on:
+  schedule:
+    # Runs every 3 days at 00:00 UTC to prevent 7-day inactivity pause
+    - cron: '0 0 */3 * *'
+  workflow_dispatch: # Allows manual trigger anytime from GitHub UI
+
+jobs:
+  ping-supabase:
+    name: Ping Supabase Database
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Send Keep-Alive Ping to Supabase
+        env:
+          SUPABASE_URL: ${{ secrets.SUPABASE_URL }}
+          SUPABASE_ANON_KEY: ${{ secrets.SUPABASE_ANON_KEY }}
+          APP_URL: ${{ secrets.APP_URL }}
+        run: |
+          echo "=========================================="
+          echo "   Supabase Keep-Alive Health Ping        "
+          echo "=========================================="
+          
+          SUCCESS=0
+
+          # 1. Ping Supabase REST API directly if secrets exist
+          if [ -n "$SUPABASE_URL" ] && [ -n "$SUPABASE_ANON_KEY" ]; then
+            echo "Pinging Supabase REST API: $SUPABASE_URL/rest/v1/users?select=id&limit=1"
+            
+            RESPONSE=$(curl -s -w "\nHTTP_CODE:%{http_code}" \
+              -H "apikey: $SUPABASE_ANON_KEY" \
+              -H "Authorization: Bearer $SUPABASE_ANON_KEY" \
+              "$SUPABASE_URL/rest/v1/users?select=id&limit=1")
+
+            HTTP_CODE=$(echo "$RESPONSE" | grep "HTTP_CODE:" | cut -d':' -f2)
+            BODY=$(echo "$RESPONSE" | grep -v "HTTP_CODE:")
+
+            echo "Response Status: $HTTP_CODE"
+            echo "Response Body: $BODY"
+
+            if [ "$HTTP_CODE" -ge 200 ] && [ "$HTTP_CODE" -lt 400 ]; then
+              echo "✅ Supabase REST API successfully pinged!"
+              SUCCESS=1
+            else
+              echo "❌ Direct Supabase REST ping failed with HTTP $HTTP_CODE"
+            fi
+          else
+            echo "⚠️ SUPABASE_URL or SUPABASE_ANON_KEY secret is not set in GitHub repository secrets."
+          fi
+
+          # 2. Ping deployed Next.js Keep-Alive endpoint if APP_URL is provided
+          if [ -n "$APP_URL" ]; then
+            echo "------------------------------------------"
+            echo "Pinging Next.js endpoint: $APP_URL/api/keep-alive"
+            
+            APP_RESPONSE=$(curl -s -w "\nHTTP_CODE:%{http_code}" "$APP_URL/api/keep-alive")
+            APP_HTTP_CODE=$(echo "$APP_RESPONSE" | grep "HTTP_CODE:" | cut -d':' -f2)
+            APP_BODY=$(echo "$APP_RESPONSE" | grep -v "HTTP_CODE:")
+
+            echo "App Response Status: $APP_HTTP_CODE"
+            echo "App Response Body: $APP_BODY"
+
+            if [ "$APP_HTTP_CODE" -ge 200 ] && [ "$APP_HTTP_CODE" -lt 400 ]; then
+              echo "✅ Next.js keep-alive endpoint successfully pinged!"
+              SUCCESS=1
+            fi
+          fi
+
+          if [ $SUCCESS -eq 0 ] && [ -z "$SUPABASE_URL" ] && [ -z "$APP_URL" ]; then
+            echo "❌ ERROR: No secrets configured! Please add SUPABASE_URL & SUPABASE_ANON_KEY or APP_URL to GitHub Repository Secrets."
+            exit 1
+          fi
diff --git a/app/admin/analytics/page.tsx b/app/admin/analytics/page.tsx
index 15e8106..6eba48c 100644
--- a/app/admin/analytics/page.tsx
+++ b/app/admin/analytics/page.tsx
@@ -24,7 +24,7 @@ const COLORS = ['#3B82F6', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6', '#EC4899'
 
 // Reusable animated orb for ambient background
 function Orb({ className }: { className: string }) {
-    return <div className={`absolute rounded-full blur-3xl opacity-20 animate-pulse pointer-events-none ${className}`} />;
+    return <div className={`absolute rounded-none blur-3xl opacity-20 animate-pulse pointer-events-none ${className}`} />;
 }
 
 export default function AnalyticsDashboard() {
@@ -225,10 +225,10 @@ export default function AnalyticsDashboard() {
             <div className="flex items-center justify-center min-h-screen bg-background">
                 <div className="flex flex-col items-center gap-6">
                     <div className="relative flex justify-center items-center">
-                        <div className="absolute animate-ping w-16 h-16 rounded-full bg-blue-500/20" />
-                        <div className="animate-spin rounded-full h-12 w-12 border-[3px] border-slate-200 dark:border-border border-t-blue-500 relative z-10" />
+                        <div className="absolute animate-ping w-16 h-16 rounded-none bg-blue-500/20" />
+                        <div className="animate-spin rounded-none h-12 w-12 border-[3px] border-[#E2E8F0] dark:border-border border-t-[#0EA5E9] relative z-10" />
                     </div>
-                    <p className="text-blue-500 dark:text-blue-400 font-black tracking-widest text-[10px] uppercase animate-pulse">Initializing Analytics</p>
+                    <p className="text-[#0EA5E9] dark:text-sky-400 font-black tracking-widest text-[10px] uppercase animate-pulse">Initializing Analytics</p>
                 </div>
             </div>
         );
@@ -305,7 +305,7 @@ export default function AnalyticsDashboard() {
         <ProtectedRoute allowedRoles={['admin']}>
             <div className="min-h-screen bg-background text-foreground overflow-hidden relative pb-24">
                 {/* Ambient Background */}
-                <div className="absolute inset-0 bg-gradient-to-br from-blue-900/5 via-background to-background -z-20" />
+                <div className="absolute inset-0 bg-card    -z-20" />
                 <div className="absolute inset-0 opacity-[0.03] -z-10" style={{ backgroundImage: "linear-gradient(rgba(128,128,128,0.3) 1px, transparent 1px), linear-gradient(90deg, rgba(128,128,128,0.3) 1px, transparent 1px)", backgroundSize: "40px 40px" }} />
                 <Orb className="w-[500px] h-[500px] bg-blue-600/10 -top-40 -left-40" />
                 <Orb className="w-[400px] h-[400px] bg-indigo-600/5 top-1/2 right-[-100px]" />
@@ -316,13 +316,13 @@ export default function AnalyticsDashboard() {
                     {/* Header */}
                     <motion.div initial={{ opacity: 0, y: -20 }} animate={{ opacity: 1, y: 0 }} className="flex flex-col xl:flex-row items-start xl:items-center justify-between gap-6 mb-10">
                         <div className="flex items-center gap-5">
-                            <Link href="/dashboard" className="p-2.5 bg-card border border-slate-200 dark:border-border rounded-2xl hover:bg-slate-100 dark:bg-foreground/5 transition-colors shadow-sm">
+                            <Link href="/dashboard" className="p-2.5 bg-card border border-slate-200 dark:border-border rounded-none hover:bg-slate-100 dark:bg-foreground/5 transition-colors shadow-sm">
                                 <ArrowLeft className="w-5 h-5 text-slate-700 dark:text-foreground/70" />
                             </Link>
                             <div>
-                                <div className="inline-flex items-center gap-2 bg-blue-500/10 border border-blue-500/20 rounded-full px-3 py-1 mb-2">
-                                    <Sparkles className="w-3.5 h-3.5 text-blue-600 dark:text-blue-400" />
-                                    <span className="text-blue-600 dark:text-blue-400 text-[10px] font-black uppercase tracking-wider">Command Center</span>
+                                <div className="inline-flex items-center gap-2 bg-[#F0F9FF] border border-[#0EA5E9]/20 rounded-none px-3 py-1 mb-2">
+                                    <Sparkles className="w-3.5 h-3.5 text-[#0EA5E9]" />
+                                    <span className="text-[#0EA5E9] text-[10px] font-black uppercase tracking-wider">Command Center</span>
                                 </div>
                                 <h1 className="text-4xl font-black text-foreground tracking-tight">
                                     Analytics 
@@ -333,7 +333,7 @@ export default function AnalyticsDashboard() {
                         
                         <div className="flex flex-col sm:flex-row items-center gap-3 w-full xl:w-auto">
                             {/* Tabs */}
-                            <div className="flex items-center gap-1 bg-card p-1 rounded-2xl border border-slate-200 dark:border-border shadow-sm">
+                            <div className="flex items-center gap-1 bg-card p-1 rounded-none border border-slate-200 dark:border-border shadow-sm">
                                 {[
                                     { id: 'overview', label: 'Overview' },
                                     { id: 'bookings', label: 'Bookings' },
@@ -342,7 +342,7 @@ export default function AnalyticsDashboard() {
                                     <button 
                                         key={tab.id}
                                         onClick={() => setActiveTab(tab.id as any)}
-                                        className={`px-5 py-2.5 rounded-xl text-[10px] font-black uppercase tracking-widest transition-all ${activeTab === tab.id ? 'bg-blue-600 text-white shadow-lg shadow-blue-500/25' : 'text-slate-500 dark:text-foreground/40 hover:bg-slate-100 dark:bg-foreground/5 hover:text-foreground'}`}
+                                        className={`px-5 py-2.5 rounded-none text-[10px] font-black uppercase tracking-widest transition-all ${activeTab === tab.id ? 'bg-[#0EA5E9] text-white shadow-sm shadow-sky-500/20' : 'text-slate-500 dark:text-foreground/40 hover:bg-slate-100 dark:bg-foreground/5 hover:text-foreground'}`}
                                     >
                                         {tab.label}
                                     </button>
@@ -351,13 +351,13 @@ export default function AnalyticsDashboard() {
 
                             {/* Filters + Export Bar */}
                             <div className="flex flex-col gap-2 w-full xl:w-auto">
-                                <div className="flex items-center gap-3 bg-card p-1.5 pr-3 rounded-2xl border border-slate-200 dark:border-border shadow-sm flex-wrap">
+                                <div className="flex items-center gap-3 bg-card p-1.5 pr-3 rounded-none border border-slate-200 dark:border-border shadow-sm flex-wrap">
                                     {/* Department Selector */}
                                     <div className="relative group">
                                         <select
                                             value={department}
                                             onChange={(e) => setDepartment(e.target.value)}
-                                            className="appearance-none pl-4 pr-10 py-2 bg-transparent text-slate-800 dark:text-foreground/90 font-black text-[10px] uppercase tracking-widest rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500/40 transition-all cursor-pointer"
+                                            className="appearance-none pl-4 pr-10 py-2 bg-transparent text-slate-800 dark:text-foreground/90 font-black text-[10px] uppercase tracking-widest rounded-none focus:outline-none focus:ring-2 focus:ring-blue-500/40 transition-all cursor-pointer"
                                         >
                                             <option value="" className="bg-card">All Departments</option>
                                             {departments.map((dept) => (
@@ -375,7 +375,7 @@ export default function AnalyticsDashboard() {
                                             onClick={() => handleExport('pdf', activeTab)}
                                             disabled={!!exporting}
                                             title="Export PDF"
-                                            className="p-2 rounded-xl hover:bg-slate-100 dark:hover:bg-foreground/10 transition-colors disabled:opacity-40"
+                                            className="p-2 rounded-none hover:bg-slate-100 dark:hover:bg-foreground/10 transition-colors disabled:opacity-40"
                                         >
                                             {exporting === `${activeTab}-pdf`
                                                 ? <RefreshCcw className="w-4 h-4 text-red-500 animate-spin" />
@@ -385,7 +385,7 @@ export default function AnalyticsDashboard() {
                                             onClick={() => handleExport('excel', activeTab)}
                                             disabled={!!exporting}
                                             title="Export Excel"
-                                            className="p-2 rounded-xl hover:bg-slate-100 dark:hover:bg-foreground/10 transition-colors disabled:opacity-40"
+                                            className="p-2 rounded-none hover:bg-slate-100 dark:hover:bg-foreground/10 transition-colors disabled:opacity-40"
                                         >
                                             {exporting === `${activeTab}-excel`
                                                 ? <RefreshCcw className="w-4 h-4 text-emerald-500 animate-spin" />
@@ -395,7 +395,7 @@ export default function AnalyticsDashboard() {
                                             onClick={() => handleExport('sheets', activeTab)}
                                             disabled={!!exporting}
                                             title="Export to Google Sheets"
-                                            className="p-2 rounded-xl hover:bg-slate-100 dark:hover:bg-foreground/10 transition-colors disabled:opacity-40"
+                                            className="p-2 rounded-none hover:bg-slate-100 dark:hover:bg-foreground/10 transition-colors disabled:opacity-40"
                                         >
                                             {exporting === `${activeTab}-sheets`
                                                 ? <RefreshCcw className="w-4 h-4 text-blue-500 animate-spin" />
@@ -407,7 +407,7 @@ export default function AnalyticsDashboard() {
 
                                     <Link
                                         href="/admin/analytics/reports"
-                                        className="flex items-center gap-2 px-3 py-2 bg-slate-100 dark:bg-foreground/5 hover:bg-slate-200 dark:hover:bg-foreground/10 text-foreground font-black text-[10px] uppercase tracking-widest rounded-xl transition-all"
+                                        className="flex items-center gap-2 px-3 py-2 bg-slate-100 dark:bg-foreground/5 hover:bg-slate-200 dark:hover:bg-foreground/10 text-foreground font-black text-[10px] uppercase tracking-widest rounded-none transition-all"
                                     >
                                         <BellRing className="w-3.5 h-3.5" />
                                         Schedule
@@ -416,7 +416,7 @@ export default function AnalyticsDashboard() {
 
                                 {/* Custom date range inputs — only shown when 'custom' is selected */}
                                 {timeRange === 'custom' && (
-                                    <div className="flex items-center gap-2 bg-card px-4 py-2.5 rounded-2xl border border-blue-500/30 shadow-sm">
+                                    <div className="flex items-center gap-2 bg-card px-4 py-2.5 rounded-none border border-blue-500/30 shadow-sm">
                                         <span className="text-[10px] font-black text-slate-500 dark:text-foreground/40 uppercase tracking-widest">From</span>
                                         <input
                                             type="date"
@@ -439,7 +439,7 @@ export default function AnalyticsDashboard() {
 
                     {googleSheetUrl && (
                         <motion.div initial={{ opacity: 0, height: 0 }} animate={{ opacity: 1, height: 'auto' }} className="mb-8">
-                            <div className="p-4 bg-emerald-500/10 border border-emerald-500/20 text-emerald-600 dark:text-emerald-300 rounded-2xl flex items-center justify-between gap-3 backdrop-blur-md">
+                            <div className="p-4 bg-emerald-500/10 border border-emerald-500/20 text-emerald-600 dark:text-emerald-300 rounded-none flex items-center justify-between gap-3 ">
                                 <div className="flex items-center gap-3">
                                     <CheckCircle2 className="w-5 h-5 text-emerald-500" />
                                     <div>
@@ -451,7 +451,7 @@ export default function AnalyticsDashboard() {
                                     href={googleSheetUrl} 
                                     target="_blank" 
                                     rel="noreferrer"
-                                    className="bg-emerald-500 text-white px-4 py-2 rounded-xl text-[10px] font-black uppercase tracking-widest hover:bg-emerald-600 transition-all shadow-lg shadow-emerald-500/20"
+                                    className="bg-emerald-500 text-white px-4 py-2 rounded-none text-[10px] font-black uppercase tracking-widest hover:bg-emerald-600 transition-all border-2 border-foreground shadow-[4px_4px_0_0_rgba(0,0,0,1)] dark:shadow-[4px_4px_0_0_rgba(255,255,255,0.2)] shadow-emerald-500/20"
                                 >
                                     Open Sheet
                                 </a>
@@ -460,7 +460,7 @@ export default function AnalyticsDashboard() {
                     )}
 
                     {error && (
-                        <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="mb-8 p-4 bg-red-500/10 border border-red-500/20 text-red-600 dark:text-red-300 rounded-2xl flex items-center justify-between gap-3 backdrop-blur-md">
+                        <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="mb-8 p-4 bg-red-500/10 border border-red-500/20 text-red-600 dark:text-red-300 rounded-none flex items-center justify-between gap-3 ">
                             <div className="flex items-center gap-3">
                                 <AlertCircle className="w-5 h-5 flex-shrink-0" />
                                 <p className="font-bold text-xs">{error}</p>
@@ -496,7 +496,7 @@ export default function AnalyticsDashboard() {
 
                                     <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
                                         {/* Booking Trends */}
-                                        <motion.div variants={itemVariants} className="lg:col-span-2 bg-card p-8 rounded-3xl border border-slate-200 dark:border-border shadow-xl">
+                                        <motion.div variants={itemVariants} className="lg:col-span-2 bg-card p-8 rounded-none border border-slate-200 dark:border-border border-2 border-foreground shadow-[4px_4px_0_0_rgba(0,0,0,1)] dark:shadow-[4px_4px_0_0_rgba(255,255,255,0.2)]">
                                             <div className="flex items-center justify-between mb-8">
                                                 <h3 className="text-lg font-black text-foreground flex items-center gap-2">
                                                     <TrendingUp className="w-5 h-5 text-blue-500" /> Recent Activity
@@ -526,8 +526,8 @@ export default function AnalyticsDashboard() {
                                         </motion.div>
 
                                         {/* Booking Status */}
-                                        <motion.div variants={itemVariants} className="bg-card p-8 rounded-3xl border border-slate-200 dark:border-border shadow-xl relative overflow-hidden">
-                                            <div className="absolute top-0 right-0 w-32 h-32 bg-emerald-500/10 blur-3xl rounded-full pointer-events-none" />
+                                        <motion.div variants={itemVariants} className="bg-card p-8 rounded-none border border-slate-200 dark:border-border border-2 border-foreground shadow-[4px_4px_0_0_rgba(0,0,0,1)] dark:shadow-[4px_4px_0_0_rgba(255,255,255,0.2)] relative overflow-hidden">
+                                            <div className="absolute top-0 right-0 w-32 h-32 bg-emerald-500/10 blur-3xl rounded-none pointer-events-none" />
                                             <h3 className="text-lg font-black text-foreground mb-8 flex items-center gap-2 relative z-10">
                                                 <PieIcon className="w-5 h-5 text-emerald-500" /> Status Mix
                                             </h3>
@@ -556,7 +556,7 @@ export default function AnalyticsDashboard() {
                                             <div className="grid grid-cols-2 gap-3 mt-6 relative z-10">
                                                 {bookingStatusData.slice(0, 4).map((item, i) => (
                                                     <div key={item.name} className="flex items-center gap-2 bg-slate-100 dark:bg-foreground/5 rounded-lg px-2 py-1.5">
-                                                        <div className="w-2.5 h-2.5 rounded-full shadow-sm" style={{backgroundColor: COLORS[i % COLORS.length]}} />
+                                                        <div className="w-2.5 h-2.5 rounded-none shadow-sm" style={{backgroundColor: COLORS[i % COLORS.length]}} />
                                                         <span className="text-[10px] font-black text-slate-600 dark:text-foreground/60 truncate uppercase tracking-tight">{item.name}</span>
                                                     </div>
                                                 ))}
@@ -564,17 +564,17 @@ export default function AnalyticsDashboard() {
                                         </motion.div>
 
                                         {/* Maintenance Summary */}
-                                        <motion.div variants={itemVariants} className="bg-card p-8 rounded-3xl border border-slate-200 dark:border-border shadow-xl">
+                                        <motion.div variants={itemVariants} className="bg-card p-8 rounded-none border border-slate-200 dark:border-border border-2 border-foreground shadow-[4px_4px_0_0_rgba(0,0,0,1)] dark:shadow-[4px_4px_0_0_rgba(255,255,255,0.2)]">
                                             <h3 className="text-lg font-black text-foreground mb-6 flex items-center gap-2">
                                                 <AlertTriangle className="w-5 h-5 text-red-500" /> Maintenance
                                             </h3>
-                                            <div className="p-5 bg-red-500/10 border border-red-500/20 rounded-2xl mb-6 text-center">
+                                            <div className="p-5 bg-red-500/10 border border-red-500/20 rounded-none mb-6 text-center">
                                                 <p className="text-[10px] font-black text-red-600 dark:text-red-400 uppercase tracking-widest mb-2">Avg. Resolution</p>
                                                 <p className="text-4xl font-black text-foreground tracking-tighter">{rechartsMaintenance?.avgCompletionTimeHours}<span className="text-red-500 text-2xl">h</span></p>
                                             </div>
                                             <div className="space-y-3">
                                                 {rechartsMaintenance?.topMaintainedResources.slice(0, 3).map((res: any, i: number) => (
-                                                    <div key={i} className="flex items-center justify-between p-3.5 bg-slate-100 dark:bg-foreground/5 rounded-xl border border-slate-200 dark:border-border hover:bg-slate-200 dark:bg-foreground/10 transition-colors">
+                                                    <div key={i} className="flex items-center justify-between p-3.5 bg-slate-100 dark:bg-foreground/5 rounded-none border border-slate-200 dark:border-border hover:bg-slate-200 dark:bg-foreground/10 transition-colors">
                                                         <p className="text-[10px] font-black text-slate-700 dark:text-foreground/70 truncate mr-2 uppercase tracking-tight">{res.name}</p>
                                                         <span className="text-[9px] font-black bg-red-500/20 text-red-600 dark:text-red-400 px-2.5 py-1 rounded-md whitespace-nowrap uppercase tracking-widest">{res.count} Issues</span>
                                                     </div>
@@ -583,7 +583,7 @@ export default function AnalyticsDashboard() {
                                         </motion.div>
 
                                         {/* Categories */}
-                                        <motion.div variants={itemVariants} className="lg:col-span-2 bg-card p-8 rounded-3xl border border-slate-200 dark:border-border shadow-xl">
+                                        <motion.div variants={itemVariants} className="lg:col-span-2 bg-card p-8 rounded-none border border-slate-200 dark:border-border border-2 border-foreground shadow-[4px_4px_0_0_rgba(0,0,0,1)] dark:shadow-[4px_4px_0_0_rgba(255,255,255,0.2)]">
                                             <div className="flex items-center justify-between mb-8">
                                                 <h3 className="text-lg font-black text-foreground flex items-center gap-2">
                                                     <LayoutDashboard className="w-5 h-5 text-purple-500" /> Asset Distribution
@@ -612,7 +612,7 @@ export default function AnalyticsDashboard() {
 
                             {activeTab === 'bookings' && (
                                 <div className="space-y-6">
-                                    <div className="flex items-center justify-between bg-card p-6 rounded-3xl border border-slate-200 dark:border-border shadow-md">
+                                    <div className="flex items-center justify-between bg-card p-6 rounded-none border border-slate-200 dark:border-border shadow-md">
                                         <h3 className="text-lg font-black text-foreground flex items-center gap-2">
                                             <CalendarCheck className="w-5 h-5 text-indigo-500" /> Booking Statistics
                                         </h3>
@@ -640,7 +640,7 @@ export default function AnalyticsDashboard() {
 
                             {activeTab === 'utilization' && (
                                 <div className="space-y-6">
-                                    <div className="flex items-center justify-between bg-card p-6 rounded-3xl border border-slate-200 dark:border-border shadow-md">
+                                    <div className="flex items-center justify-between bg-card p-6 rounded-none border border-slate-200 dark:border-border shadow-md">
                                         <h3 className="text-lg font-black text-foreground flex items-center gap-2">
                                             <Clock className="w-5 h-5 text-amber-500" /> Peak Usage & Efficiency
                                         </h3>
@@ -652,13 +652,13 @@ export default function AnalyticsDashboard() {
                                         <motion.div variants={itemVariants}><ChartCard title="Busiest Days" icon={<CalendarCheck className="text-emerald-500" />} loading={reportsLoading}><BookingBarChart data={chartJsPeakDays} /></ChartCard></motion.div>
                                     </div>
 
-                                    <motion.div variants={itemVariants} className="bg-card p-8 rounded-3xl border border-slate-200 dark:border-border shadow-lg overflow-hidden">
+                                    <motion.div variants={itemVariants} className="bg-card p-8 rounded-none border border-slate-200 dark:border-border border-2 border-foreground shadow-[4px_4px_0_0_rgba(0,0,0,1)] dark:shadow-[4px_4px_0_0_rgba(255,255,255,0.2)] overflow-hidden">
                                         <h3 className="text-lg font-black text-foreground mb-8 flex items-center gap-2">
                                             <BarChart3 className="w-5 h-5 text-indigo-500" /> Detailed Resource Utilization
                                         </h3>
                                         
                                         {reportsLoading ? (
-                                            <div className="h-64 flex items-center justify-center"><div className="w-10 h-10 border-4 border-slate-200 dark:border-border border-t-blue-500 rounded-full animate-spin" /></div>
+                                            <div className="h-64 flex items-center justify-center"><div className="w-10 h-10 border-4 border-slate-200 dark:border-border border-t-blue-500 rounded-none animate-spin" /></div>
                                         ) : (
                                             <div className="overflow-x-auto">
                                                 <table className="w-full text-left border-collapse">
@@ -679,18 +679,18 @@ export default function AnalyticsDashboard() {
                                                             <tr key={res.id ?? res.name} className="group hover:bg-foreground/[0.02] transition-colors">
                                                                 <td className="py-4 font-black text-slate-800 dark:text-foreground/90 uppercase tracking-tight text-xs">{res.name}</td>
                                                                 <td className="py-4">
-                                                                    <span className="px-2.5 py-1 bg-slate-100 dark:bg-foreground/5 border border-slate-200 dark:border-border rounded-full text-[9px] font-black uppercase text-slate-600 dark:text-foreground/60 tracking-widest">{res.type}</span>
+                                                                    <span className="px-2.5 py-1 bg-slate-100 dark:bg-foreground/5 border border-slate-200 dark:border-border rounded-none text-[9px] font-black uppercase text-slate-600 dark:text-foreground/60 tracking-widest">{res.type}</span>
                                                                 </td>
                                                                 <td className="py-4 font-black text-blue-600 dark:text-blue-400 text-center text-sm">{res.totalBookings}</td>
                                                                 <td className="py-4 text-[10px] font-black text-slate-600 dark:text-foreground/60 text-center uppercase tracking-widest">{res.totalHours}h</td>
                                                                 <td className="py-4 text-right">
                                                                     <div className="flex items-center justify-end gap-3">
-                                                                        <div className="w-24 bg-slate-200 dark:bg-foreground/10 h-2 rounded-full overflow-hidden hidden sm:block">
+                                                                        <div className="w-24 bg-slate-200 dark:bg-foreground/10 h-2 rounded-none overflow-hidden hidden sm:block">
                                                                             <motion.div 
                                                                                 initial={{ width: 0 }}
                                                                                 animate={{ width: `${res.utilizationRate}%` }}
                                                                                 transition={{ duration: 1, ease: "easeOut" }}
-                                                                                className={`h-full rounded-full ${res.utilizationRate > 70 ? 'bg-red-500' : res.utilizationRate > 30 ? 'bg-amber-500' : 'bg-emerald-500'}`}
+                                                                                className={`h-full rounded-none ${res.utilizationRate > 70 ? 'bg-red-500' : res.utilizationRate > 30 ? 'bg-amber-500' : 'bg-emerald-500'}`}
                                                                             />
                                                                         </div>
                                                                         <span className="text-xs font-black text-foreground w-10">{res.utilizationRate}%</span>
@@ -722,7 +722,7 @@ function TimeRangePicker({ value, onChange, mini }: { value: string, onChange: (
     ];
 
     return (
-        <div className="flex items-center gap-1 bg-card p-1 rounded-xl border border-slate-200 dark:border-border shadow-sm">
+        <div className="flex items-center gap-1 bg-card p-1 rounded-none border border-slate-200 dark:border-border shadow-sm">
             {options.map((opt) => (
                 <button 
                     key={opt.value}
@@ -738,12 +738,12 @@ function TimeRangePicker({ value, onChange, mini }: { value: string, onChange: (
 
 function ChartCard({ title, icon, loading, children }: { title: string, icon: React.ReactNode, loading: boolean, children: React.ReactNode }) {
     return (
-        <div className="bg-card p-8 rounded-3xl border border-slate-200 dark:border-border shadow-xl min-h-[400px] flex flex-col relative overflow-hidden group">
+        <div className="bg-card p-8 rounded-none border border-slate-200 dark:border-border border-2 border-foreground shadow-[4px_4px_0_0_rgba(0,0,0,1)] dark:shadow-[4px_4px_0_0_rgba(255,255,255,0.2)] min-h-[400px] flex flex-col relative overflow-hidden group">
             <h3 className="text-lg font-black text-foreground mb-6 flex items-center gap-2">
                 {icon} {title}
             </h3>
             {loading ? (
-                <div className="flex-1 flex items-center justify-center"><div className="w-8 h-8 border-[3px] border-slate-200 dark:border-border border-t-blue-500 rounded-full animate-spin" /></div>
+                <div className="flex-1 flex items-center justify-center"><div className="w-8 h-8 border-[3px] border-slate-200 dark:border-border border-t-blue-500 rounded-none animate-spin" /></div>
             ) : (
                 <div className="flex-1 relative z-10">{children}</div>
             )}
@@ -753,10 +753,10 @@ function ChartCard({ title, icon, loading, children }: { title: string, icon: Re
 
 function StatCard({ title, value, icon, color }: { title: string, value: any, icon: React.ReactNode, color: string }) {
     return (
-        <div className="bg-card p-6 rounded-3xl border border-slate-200 dark:border-border shadow-xl relative overflow-hidden group hover:bg-foreground/[0.02] transition-colors duration-300">
-            <div className={`absolute -right-8 -top-8 w-32 h-32 ${color} opacity-[0.1] rounded-full blur-2xl group-hover:opacity-20 transition-opacity duration-500`} />
+        <div className="bg-card p-6 rounded-none border border-slate-200 dark:border-border border-2 border-foreground shadow-[4px_4px_0_0_rgba(0,0,0,1)] dark:shadow-[4px_4px_0_0_rgba(255,255,255,0.2)] relative overflow-hidden group hover:bg-foreground/[0.02] transition-colors duration-300">
+            <div className={`absolute -right-8 -top-8 w-32 h-32 ${color} opacity-[0.1] rounded-none blur-2xl group-hover:opacity-20 transition-opacity duration-500`} />
             <div className="flex items-center gap-5 relative z-10">
-                <div className={`${color} p-4 rounded-2xl text-white shadow-lg ring-1 ring-white/10`}>
+                <div className={`${color} p-4 rounded-none text-white border-2 border-foreground shadow-[4px_4px_0_0_rgba(0,0,0,1)] dark:shadow-[4px_4px_0_0_rgba(255,255,255,0.2)] ring-1 ring-white/10`}>
                     {icon}
                 </div>
                 <div>
diff --git a/app/admin/analytics/reports/page.tsx b/app/admin/analytics/reports/page.tsx
index 563bd3b..09a221a 100644
--- a/app/admin/analytics/reports/page.tsx
+++ b/app/admin/analytics/reports/page.tsx
@@ -104,22 +104,22 @@ export default function ReportSchedulingPage() {
         <ProtectedRoute allowedRoles={['admin']}>
             <div className="min-h-screen bg-[#0B0F19] text-white pb-20 relative overflow-hidden">
                 {/* Background effects */}
-                <div className="absolute top-0 left-1/4 w-[500px] h-[500px] bg-cyan-500/10 rounded-full blur-[120px] pointer-events-none" />
-                <div className="absolute bottom-0 right-1/4 w-[600px] h-[600px] bg-violet-500/10 rounded-full blur-[150px] pointer-events-none" />
+                <div className="absolute top-0 left-1/4 w-[500px] h-[500px] bg-cyan-500/10 rounded-none blur-[120px] pointer-events-none" />
+                <div className="absolute bottom-0 right-1/4 w-[600px] h-[600px] bg-violet-500/10 rounded-none blur-[150px] pointer-events-none" />
 
                 {/* Header */}
                 <motion.div 
                     initial={{ opacity: 0, y: -20 }}
                     animate={{ opacity: 1, y: 0 }}
-                    className="sticky top-0 z-30 bg-[#0B0F19]/80 backdrop-blur-xl border-b border-white/5"
+                    className="sticky top-0 z-30 bg-[#0B0F19]/80  border-b border-white/5"
                 >
                     <div className="max-w-7xl mx-auto px-6 py-5 flex items-center justify-between">
                         <div className="flex items-center gap-4">
-                            <Link href="/admin/analytics" className="p-2.5 bg-slate-50 dark:bg-white/5 hover:bg-slate-100 dark:bg-white/10 rounded-xl transition-all text-slate-300 hover:text-white border border-slate-200 dark:border-white/10">
+                            <Link href="/admin/analytics" className="p-2.5 bg-slate-50 dark:bg-white/5 hover:bg-slate-100 dark:bg-white/10 rounded-none transition-all text-slate-300 hover:text-white border border-slate-200 dark:border-white/10">
                                 <ChevronLeft className="w-5 h-5" />
                             </Link>
                             <div>
-                                <h1 className="text-2xl font-bold bg-gradient-to-r from-white to-slate-400 bg-clip-text text-transparent">Report Scheduling</h1>
+                                <h1 className="text-2xl font-bold bg-card   bg-clip-text text-transparent">Report Scheduling</h1>
                                 <p className="text-slate-400 text-sm">Automated weekly performance reports</p>
                             </div>
                         </div>
@@ -128,7 +128,7 @@ export default function ReportSchedulingPage() {
                                 setEditingSchedule(null);
                                 setShowModal(true);
                             }}
-                            className="flex items-center gap-2 bg-gradient-to-r from-cyan-500 to-blue-500 hover:from-cyan-400 hover:to-blue-400 text-white px-5 py-2.5 rounded-xl font-semibold text-sm transition-all shadow-[0_0_20px_rgba(6,182,212,0.3)] hover:shadow-[0_0_30px_rgba(6,182,212,0.5)] border border-slate-200 dark:border-white/10"
+                            className="flex items-center gap-2 bg-card   hover: hover: text-white px-5 py-2.5 rounded-none font-semibold text-sm transition-all shadow-[0_0_20px_rgba(6,182,212,0.3)] hover:shadow-[0_0_30px_rgba(6,182,212,0.5)] border border-slate-200 dark:border-white/10"
                         >
                             <Plus className="w-4 h-4" /> Create Schedule
                         </button>
@@ -138,23 +138,23 @@ export default function ReportSchedulingPage() {
                 <div className="max-w-7xl mx-auto px-6 mt-10 relative z-10">
                     {loading ? (
                         <div className="flex flex-col items-center justify-center py-20">
-                            <div className="w-12 h-12 border-4 border-slate-200 dark:border-white/10 border-t-cyan-500 rounded-full animate-spin mb-4"></div>
+                            <div className="w-12 h-12 border-4 border-slate-200 dark:border-white/10 border-t-cyan-500 rounded-none animate-spin mb-4"></div>
                             <p className="text-slate-400 font-medium">Syncing schedules...</p>
                         </div>
                     ) : schedules.length === 0 ? (
                         <motion.div 
                             initial={{ opacity: 0, scale: 0.95 }}
                             animate={{ opacity: 1, scale: 1 }}
-                            className="bg-slate-50 dark:bg-white/5 backdrop-blur-xl rounded-[2rem] p-16 text-center border border-slate-200 dark:border-white/10"
+                            className="bg-slate-50 dark:bg-white/5  rounded-[2rem] p-16 text-center border border-slate-200 dark:border-white/10"
                         >
-                            <div className="w-20 h-20 bg-gradient-to-br from-cyan-500/20 to-blue-500/20 border border-cyan-500/30 rounded-3xl flex items-center justify-center mx-auto mb-6 shadow-[0_0_30px_rgba(6,182,212,0.2)]">
+                            <div className="w-20 h-20 bg-card   border border-cyan-500/30 rounded-none flex items-center justify-center mx-auto mb-6 shadow-[0_0_30px_rgba(6,182,212,0.2)]">
                                 <BellRing className="w-10 h-10 text-cyan-400" />
                             </div>
                             <h2 className="text-2xl font-bold text-white mb-2">No Active Schedules</h2>
                             <p className="text-slate-400 max-w-sm mx-auto mb-10">Configure automated reports to be delivered to your inbox every week.</p>
                             <button 
                                 onClick={() => setShowModal(true)}
-                                className="bg-slate-100 dark:bg-white/10 hover:bg-slate-200 dark:bg-white/20 text-white px-8 py-3 rounded-2xl font-semibold transition-all border border-slate-200 dark:border-white/10"
+                                className="bg-slate-100 dark:bg-white/10 hover:bg-slate-200 dark:bg-white/20 text-white px-8 py-3 rounded-none font-semibold transition-all border border-slate-200 dark:border-white/10"
                             >
                                 Setup Your First Schedule
                             </button>
@@ -168,19 +168,19 @@ export default function ReportSchedulingPage() {
                                         animate={{ opacity: 1, y: 0 }}
                                         transition={{ delay: index * 0.1 }}
                                         key={s.id} 
-                                        className="bg-slate-50 dark:bg-white/5 backdrop-blur-xl rounded-3xl p-6 border border-slate-200 dark:border-white/10 hover:border-cyan-500/50 transition-all group relative overflow-hidden shadow-lg"
+                                        className="bg-slate-50 dark:bg-white/5  rounded-none p-6 border border-slate-200 dark:border-white/10 hover:border-cyan-500/50 transition-all group relative overflow-hidden border-2 border-foreground shadow-[4px_4px_0_0_rgba(0,0,0,1)] dark:shadow-[4px_4px_0_0_rgba(255,255,255,0.2)]"
                                     >
                                         {/* Decorative gradient */}
-                                        <div className={`absolute -top-16 -right-16 w-32 h-32 rounded-full opacity-20 blur-2xl transition-all ${s.is_enabled ? 'bg-cyan-500' : 'bg-slate-500'}`}></div>
+                                        <div className={`absolute -top-16 -right-16 w-32 h-32 rounded-none opacity-20 blur-2xl transition-all ${s.is_enabled ? 'bg-cyan-500' : 'bg-slate-500'}`}></div>
                                         
                                         <div className="flex items-start justify-between mb-6 relative z-10">
-                                            <div className={`p-3 rounded-2xl border ${s.is_enabled ? 'bg-cyan-500/10 border-cyan-500/30 text-cyan-400' : 'bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10 text-slate-400'}`}>
+                                            <div className={`p-3 rounded-none border ${s.is_enabled ? 'bg-cyan-500/10 border-cyan-500/30 text-cyan-400' : 'bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10 text-slate-400'}`}>
                                                 <BellRing className="w-6 h-6" />
                                             </div>
                                             <div className="flex items-center gap-2">
                                                 <button 
                                                     onClick={() => handleToggleEnabled(s)}
-                                                    className={`px-3 py-1.5 rounded-full text-[10px] font-bold uppercase tracking-wider transition-all border ${s.is_enabled ? 'bg-cyan-500/20 border-cyan-500/30 text-cyan-300' : 'bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10 text-slate-400 hover:bg-slate-100 dark:bg-white/10'}`}
+                                                    className={`px-3 py-1.5 rounded-none text-[10px] font-bold uppercase tracking-wider transition-all border ${s.is_enabled ? 'bg-cyan-500/20 border-cyan-500/30 text-cyan-300' : 'bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10 text-slate-400 hover:bg-slate-100 dark:bg-white/10'}`}
                                                 >
                                                     {s.is_enabled ? 'Active' : 'Disabled'}
                                                 </button>
@@ -200,13 +200,13 @@ export default function ReportSchedulingPage() {
                                             </div>
 
                                             <div className="grid grid-cols-2 gap-4">
-                                                <div className="bg-slate-50 dark:bg-white/5 rounded-xl p-3 border border-white/5">
+                                                <div className="bg-slate-50 dark:bg-white/5 rounded-none p-3 border border-white/5">
                                                     <p className="text-[10px] font-semibold text-slate-500 uppercase tracking-widest mb-1">Delivery Day</p>
                                                     <div className="flex items-center gap-1.5 text-slate-200 font-medium text-sm">
                                                         <Calendar className="w-3.5 h-3.5 text-blue-400" /> {DAYS[s.delivery_day]}
                                                     </div>
                                                 </div>
-                                                <div className="bg-slate-50 dark:bg-white/5 rounded-xl p-3 border border-white/5">
+                                                <div className="bg-slate-50 dark:bg-white/5 rounded-none p-3 border border-white/5">
                                                     <p className="text-[10px] font-semibold text-slate-500 uppercase tracking-widest mb-1">Timing</p>
                                                     <div className="flex items-center gap-1.5 text-slate-200 font-medium text-sm">
                                                         <Clock className="w-3.5 h-3.5 text-amber-400" /> {s.delivery_time.substring(0, 5)}
@@ -214,14 +214,14 @@ export default function ReportSchedulingPage() {
                                                 </div>
                                             </div>
 
-                                            <div className="bg-slate-50 dark:bg-white/5 rounded-xl p-3 border border-white/5">
+                                            <div className="bg-slate-50 dark:bg-white/5 rounded-none p-3 border border-white/5">
                                                 <p className="text-[10px] font-semibold text-slate-500 uppercase tracking-widest mb-1">Format & Recipients</p>
                                                 <div className="flex items-center justify-between">
                                                     <div className="flex items-center gap-1.5 text-slate-200 font-medium text-sm">
                                                         {s.format === 'pdf' ? <FileText className="w-3.5 h-3.5 text-rose-400" /> : <FileSpreadsheet className="w-3.5 h-3.5 text-emerald-400" />}
                                                         <span className="uppercase">{s.format}</span>
                                                     </div>
-                                                    <div className="flex items-center gap-1.5 text-slate-400 text-xs font-medium bg-slate-50 dark:bg-white/5 px-2 py-0.5 rounded-full border border-white/5">
+                                                    <div className="flex items-center gap-1.5 text-slate-400 text-xs font-medium bg-slate-50 dark:bg-white/5 px-2 py-0.5 rounded-none border border-white/5">
                                                         <Mail className="w-3 h-3" /> {s.recipients.length} Recipients
                                                     </div>
                                                 </div>
@@ -234,13 +234,13 @@ export default function ReportSchedulingPage() {
                                                     setEditingSchedule(s);
                                                     setShowModal(true);
                                                 }}
-                                                className="flex-1 bg-slate-50 dark:bg-white/5 hover:bg-slate-100 dark:bg-white/10 text-white font-medium text-xs py-2.5 rounded-xl transition-all border border-slate-200 dark:border-white/10"
+                                                className="flex-1 bg-slate-50 dark:bg-white/5 hover:bg-slate-100 dark:bg-white/10 text-white font-medium text-xs py-2.5 rounded-none transition-all border border-slate-200 dark:border-white/10"
                                             >
                                                 Edit Configuration
                                             </button>
                                             <button 
                                                 onClick={() => handleDelete(s.id)}
-                                                className="p-2.5 text-rose-400 hover:text-white hover:bg-rose-500/20 rounded-xl transition-all border border-rose-500/20 hover:border-rose-500/50"
+                                                className="p-2.5 text-rose-400 hover:text-white hover:bg-rose-500/20 rounded-none transition-all border border-rose-500/20 hover:border-rose-500/50"
                                             >
                                                 <Trash2 className="w-4 h-4" />
                                             </button>
@@ -343,7 +343,7 @@ function ScheduleModal({ schedule, onClose, onSuccess, reportTypes, days, userTo
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             exit={{ opacity: 0 }}
-            className="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6 bg-[#0B0F19]/80 backdrop-blur-md"
+            className="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6 bg-[#0B0F19]/80 "
         >
             <motion.div 
                 initial={{ scale: 0.95, y: 20 }}
@@ -357,7 +357,7 @@ function ScheduleModal({ schedule, onClose, onSuccess, reportTypes, days, userTo
                             <h2 className="text-2xl font-bold text-white">{schedule ? 'Edit Schedule' : 'New Report Schedule'}</h2>
                             <p className="text-slate-400 text-sm">Configure your automated reporting cycle</p>
                         </div>
-                        <button onClick={onClose} className="p-2.5 bg-slate-50 dark:bg-white/5 hover:bg-slate-100 dark:bg-white/10 border border-slate-200 dark:border-white/10 rounded-2xl transition-all text-slate-400 hover:text-white">
+                        <button onClick={onClose} className="p-2.5 bg-slate-50 dark:bg-white/5 hover:bg-slate-100 dark:bg-white/10 border border-slate-200 dark:border-white/10 rounded-none transition-all text-slate-400 hover:text-white">
                             <XCircle className="w-6 h-6" />
                         </button>
                     </div>
@@ -371,13 +371,13 @@ function ScheduleModal({ schedule, onClose, onSuccess, reportTypes, days, userTo
                                     <button 
                                         key={type.id}
                                         onClick={() => toggleReportType(type.id)}
-                                        className={`flex items-center gap-3 p-4 rounded-2xl border transition-all text-left ${
+                                        className={`flex items-center gap-3 p-4 rounded-none border transition-all text-left ${
                                             formData.report_types.includes(type.id)
                                             ? 'border-cyan-500/50 bg-cyan-500/10 text-white shadow-[0_0_15px_rgba(6,182,212,0.15)]'
                                             : 'border-slate-200 dark:border-white/10 bg-slate-50 dark:bg-white/5 text-slate-400 hover:border-slate-300 dark:border-white/20 hover:bg-slate-100 dark:bg-white/10'
                                         }`}
                                     >
-                                        <div className={`p-2 rounded-xl border ${formData.report_types.includes(type.id) ? 'bg-cyan-500/20 border-cyan-500/30 text-cyan-400' : 'bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10'}`}>
+                                        <div className={`p-2 rounded-none border ${formData.report_types.includes(type.id) ? 'bg-cyan-500/20 border-cyan-500/30 text-cyan-400' : 'bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10'}`}>
                                             {type.icon}
                                         </div>
                                         <span className="font-medium text-sm">{type.label}</span>
@@ -394,7 +394,7 @@ function ScheduleModal({ schedule, onClose, onSuccess, reportTypes, days, userTo
                                     <select 
                                         value={formData.delivery_day}
                                         onChange={(e) => setFormData({...formData, delivery_day: parseInt(e.target.value)})}
-                                        className="w-full bg-[#0B0F19] border border-slate-200 dark:border-white/10 rounded-2xl px-4 py-3.5 font-medium text-white appearance-none focus:outline-none focus:border-cyan-500/50 focus:ring-1 focus:ring-cyan-500/50 transition-all"
+                                        className="w-full bg-[#0B0F19] border border-slate-200 dark:border-white/10 rounded-none px-4 py-3.5 font-medium text-white appearance-none focus:outline-none focus:border-cyan-500/50 focus:ring-1 focus:ring-cyan-500/50 transition-all"
                                     >
                                         {days.map((day: string, idx: number) => (
                                             <option key={idx} value={idx}>{day}</option>
@@ -410,7 +410,7 @@ function ScheduleModal({ schedule, onClose, onSuccess, reportTypes, days, userTo
                                         type="time"
                                         value={formData.delivery_time}
                                         onChange={(e) => setFormData({...formData, delivery_time: e.target.value})}
-                                        className="w-full bg-[#0B0F19] border border-slate-200 dark:border-white/10 rounded-2xl px-4 py-3.5 font-medium text-white focus:outline-none focus:border-cyan-500/50 focus:ring-1 focus:ring-cyan-500/50 transition-all"
+                                        className="w-full bg-[#0B0F19] border border-slate-200 dark:border-white/10 rounded-none px-4 py-3.5 font-medium text-white focus:outline-none focus:border-cyan-500/50 focus:ring-1 focus:ring-cyan-500/50 transition-all"
                                         style={{ colorScheme: 'dark' }}
                                     />
                                     <Clock className="absolute right-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-500 pointer-events-none" />
@@ -426,7 +426,7 @@ function ScheduleModal({ schedule, onClose, onSuccess, reportTypes, days, userTo
                                     placeholder="admin@demo.lk, manager@demo.lk"
                                     value={formData.recipients}
                                     onChange={(e) => setFormData({...formData, recipients: e.target.value})}
-                                    className="w-full bg-[#0B0F19] border border-slate-200 dark:border-white/10 rounded-2xl px-12 py-3.5 font-medium text-white min-h-[80px] focus:outline-none focus:border-cyan-500/50 focus:ring-1 focus:ring-cyan-500/50 transition-all placeholder:text-slate-600"
+                                    className="w-full bg-[#0B0F19] border border-slate-200 dark:border-white/10 rounded-none px-12 py-3.5 font-medium text-white min-h-[80px] focus:outline-none focus:border-cyan-500/50 focus:ring-1 focus:ring-cyan-500/50 transition-all placeholder:text-slate-600"
                                 />
                                 <Mail className="absolute left-4 top-4 w-5 h-5 text-slate-500" />
                             </div>
@@ -439,7 +439,7 @@ function ScheduleModal({ schedule, onClose, onSuccess, reportTypes, days, userTo
                             <div className="flex gap-4">
                                 <button 
                                     onClick={() => setFormData({...formData, format: 'pdf'})}
-                                    className={`flex-1 flex items-center justify-center gap-2 p-4 rounded-2xl border transition-all font-medium ${
+                                    className={`flex-1 flex items-center justify-center gap-2 p-4 rounded-none border transition-all font-medium ${
                                         formData.format === 'pdf' ? 'border-rose-500/50 bg-rose-500/10 text-rose-400 shadow-[0_0_15px_rgba(244,63,94,0.15)]' : 'border-slate-200 dark:border-white/10 bg-slate-50 dark:bg-white/5 text-slate-400 hover:bg-slate-100 dark:bg-white/10'
                                     }`}
                                 >
@@ -447,7 +447,7 @@ function ScheduleModal({ schedule, onClose, onSuccess, reportTypes, days, userTo
                                 </button>
                                 <button 
                                     onClick={() => setFormData({...formData, format: 'excel'})}
-                                    className={`flex-1 flex items-center justify-center gap-2 p-4 rounded-2xl border transition-all font-medium ${
+                                    className={`flex-1 flex items-center justify-center gap-2 p-4 rounded-none border transition-all font-medium ${
                                         formData.format === 'excel' ? 'border-emerald-500/50 bg-emerald-500/10 text-emerald-400 shadow-[0_0_15px_rgba(16,185,129,0.15)]' : 'border-slate-200 dark:border-white/10 bg-slate-50 dark:bg-white/5 text-slate-400 hover:bg-slate-100 dark:bg-white/10'
                                     }`}
                                 >
@@ -460,16 +460,16 @@ function ScheduleModal({ schedule, onClose, onSuccess, reportTypes, days, userTo
                     <div className="mt-12 flex gap-4">
                         <button 
                             onClick={onClose}
-                            className="flex-1 px-8 py-4 bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 text-white font-medium rounded-2xl hover:bg-slate-100 dark:bg-white/10 transition-all"
+                            className="flex-1 px-8 py-4 bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 text-white font-medium rounded-none hover:bg-slate-100 dark:bg-white/10 transition-all"
                         >
                             Cancel
                         </button>
                         <button 
                             onClick={handleSave}
                             disabled={saving}
-                            className="flex-[2] px-8 py-4 bg-gradient-to-r from-cyan-500 to-blue-500 hover:from-cyan-400 hover:to-blue-400 text-white font-bold rounded-2xl transition-all shadow-[0_0_20px_rgba(6,182,212,0.3)] hover:shadow-[0_0_30px_rgba(6,182,212,0.5)] flex items-center justify-center gap-2 disabled:opacity-50"
+                            className="flex-[2] px-8 py-4 bg-card   hover: hover: text-white font-bold rounded-none transition-all shadow-[0_0_20px_rgba(6,182,212,0.3)] hover:shadow-[0_0_30px_rgba(6,182,212,0.5)] flex items-center justify-center gap-2 disabled:opacity-50"
                         >
-                            {saving ? <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin"></div> : <Save className="w-5 h-5" />}
+                            {saving ? <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-none animate-spin"></div> : <Save className="w-5 h-5" />}
                             {schedule ? 'Update Schedule' : 'Activate Schedule'}
                         </button>
                     </div>
diff --git a/app/admin/users/page.tsx b/app/admin/users/page.tsx
index b706e18..42d6004 100644
--- a/app/admin/users/page.tsx
+++ b/app/admin/users/page.tsx
@@ -40,6 +40,7 @@ interface DBUser {
     role: "admin" | "student" | "lecturer" | "maintenance";
     department: string;
     phone?: string;
+    approval_status?: "Pending" | "Approved" | "Rejected";
     created_at: string;
 }
 
@@ -50,6 +51,12 @@ const roleBadges: Record<string, string> = {
     maintenance: "bg-amber-500/10 border-amber-500/20 text-amber-500 dark:bg-amber-500/20 dark:text-amber-400",
 };
 
+const approvalStatusBadges: Record<string, string> = {
+    Approved: "bg-emerald-500/10 border-emerald-500/20 text-emerald-600 dark:bg-emerald-500/20 dark:text-emerald-400",
+    Pending: "bg-amber-500/10 border-amber-500/20 text-amber-600 dark:bg-amber-500/20 dark:text-amber-450",
+    Rejected: "bg-rose-500/10 border-rose-500/20 text-rose-600 dark:bg-rose-500/20 dark:text-rose-400",
+};
+
 const departments = [
     "Faculty of Computing",
     "Faculty of Applied Sciences",
@@ -77,6 +84,7 @@ function UserManagementPageContent() {
     const [searchTerm, setSearchTerm] = useState("");
     const [roleFilter, setRoleFilter] = useState("");
     const [deptFilter, setDeptFilter] = useState("");
+    const [approvalFilter, setApprovalFilter] = useState("");
 
     const [currentPage, setCurrentPage] = useState(urlPage);
     const [pageSize, setPageSize] = useState(urlPageSize);
@@ -110,7 +118,8 @@ function UserManagementPageContent() {
         role: "student",
         department: "",
         password: "",
-        phone: ""
+        phone: "",
+        approval_status: "Approved"
     });
     const [formLoading, setFormLoading] = useState(false);
     const [formError, setFormError] = useState<string | null>(null);
@@ -181,7 +190,7 @@ function UserManagementPageContent() {
 
             setSuccess("User created successfully!");
             setCreateModalOpen(false);
-            setFormData({ name: "", email: "", role: "student", department: "", password: "", phone: "" });
+            setFormData({ name: "", email: "", role: "student", department: "", password: "", phone: "", approval_status: "Approved" });
             fetchUsers();
             setTimeout(() => setSuccess(null), 3000);
         } catch (err: any) {
@@ -198,7 +207,7 @@ function UserManagementPageContent() {
         setFormError(null);
         setFormLoading(true);
 
-        const { name, role, department, password, phone } = formData;
+        const { name, role, department, password, phone, approval_status } = formData;
 
         try {
             const token = await getToken();
@@ -208,7 +217,7 @@ function UserManagementPageContent() {
                     "Content-Type": "application/json",
                     Authorization: `Bearer ${token}`
                 },
-                body: JSON.stringify({ name, role, department, phone, ...(password ? { password } : {}) })
+                body: JSON.stringify({ name, role, department, phone, approval_status, ...(password ? { password } : {}) })
             });
 
             const result = await res.json();
@@ -255,6 +264,39 @@ function UserManagementPageContent() {
         }
     };
 
+    const handleSetApprovalStatus = async (userToUpdate: DBUser, status: "Approved" | "Rejected") => {
+        setLoading(true);
+        setError(null);
+        try {
+            const token = await getToken();
+            const res = await fetch(`${BASE_URL}/users/${userToUpdate.id}`, {
+                method: "PUT",
+                headers: {
+                    "Content-Type": "application/json",
+                    Authorization: `Bearer ${token}`
+                },
+                body: JSON.stringify({
+                    name: userToUpdate.name,
+                    role: userToUpdate.role,
+                    department: userToUpdate.department,
+                    phone: userToUpdate.phone,
+                    approval_status: status
+                })
+            });
+
+            const result = await res.json();
+            if (!res.ok) throw new Error(result.message || `Failed to update status to ${status}.`);
+
+            setSuccess(`User registration ${status.toLowerCase()} successfully!`);
+            fetchUsers();
+            setTimeout(() => setSuccess(null), 3000);
+        } catch (err: any) {
+            setError(err.message || "Failed to update user status.");
+        } finally {
+            setLoading(false);
+        }
+    };
+
     // Open Edit Modal and fill values
     const openEditModal = (userToEdit: DBUser) => {
         setSelectedUser(userToEdit);
@@ -264,7 +306,8 @@ function UserManagementPageContent() {
             role: userToEdit.role,
             department: userToEdit.department || "",
             password: "", // Keep empty unless updating
-            phone: userToEdit.phone || ""
+            phone: userToEdit.phone || "",
+            approval_status: userToEdit.approval_status || "Approved"
         });
         setFormError(null);
         setShowFormPassword(false);
@@ -284,7 +327,8 @@ function UserManagementPageContent() {
             u.email.toLowerCase().includes(searchTerm.toLowerCase());
         const matchesRole = roleFilter ? u.role === roleFilter : true;
         const matchesDept = deptFilter ? u.department === deptFilter : true;
-        return matchesSearch && matchesRole && matchesDept;
+        const matchesApproval = approvalFilter ? (u.approval_status || "Approved") === approvalFilter : true;
+        return matchesSearch && matchesRole && matchesDept && matchesApproval;
     });
 
     const paginatedUsers = filteredUsers.slice(
@@ -300,7 +344,7 @@ function UserManagementPageContent() {
                 <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-10">
                     <div className="flex flex-col xl:flex-row items-start xl:items-center justify-between gap-6 mb-8">
                         <div className="flex items-center gap-5">
-                            <Link href="/dashboard" className="p-2.5 bg-card border border-slate-200 dark:border-border rounded-2xl hover:bg-slate-100 dark:bg-foreground/5 transition-colors shadow-sm">
+                            <Link href="/dashboard" className="p-2.5 bg-card border border-slate-200 dark:border-border rounded-none hover:bg-slate-100 dark:bg-foreground/5 transition-colors shadow-sm">
                                 <ArrowLeft className="w-5 h-5 text-slate-700 dark:text-foreground/70" />
                             </Link>
                             <div>
@@ -313,26 +357,26 @@ function UserManagementPageContent() {
 
                         <button
                             onClick={() => {
-                                setFormData({ name: "", email: "", role: "student", department: "", password: "", phone: "" });
+                                setFormData({ name: "", email: "", role: "student", department: "", password: "", phone: "", approval_status: "Approved" });
                                 setFormError(null);
                                 setShowFormPassword(false);
                                 setCreateModalOpen(true);
                             }}
-                            className="flex items-center gap-2 px-5 py-2.5 rounded-xl bg-brand-primary text-white font-bold text-sm hover:opacity-90 transition-all shadow-lg shadow-brand-primary/20"
+                            className="flex items-center gap-2 px-5 py-2.5 rounded-none bg-brand-primary text-white font-bold text-sm hover:opacity-90 transition-all border-2 border-foreground shadow-[4px_4px_0_0_rgba(0,0,0,1)] dark:shadow-[4px_4px_0_0_rgba(255,255,255,0.2)] shadow-brand-primary/20"
                         >
                             <UserPlus className="w-4 h-4" /> Create Member
                         </button>
                     </div>
 
                     {success && (
-                        <div className="mb-6 flex items-center gap-3 bg-emerald-50 dark:bg-emerald-500/10 border border-emerald-250 dark:border-emerald-500/20 p-4 rounded-2xl shadow-sm">
+                        <div className="mb-6 flex items-center gap-3 bg-emerald-50 dark:bg-emerald-500/10 border border-emerald-250 dark:border-emerald-500/20 p-4 rounded-none shadow-sm">
                             <CheckCircle2 className="w-5 h-5 text-emerald-500 shrink-0" />
                             <p className="text-sm font-bold text-emerald-700 dark:text-emerald-400">{success}</p>
                         </div>
                     )}
 
                     {error && (
-                        <div className="mb-6 flex items-center justify-between p-4 bg-red-500/10 border border-red-500/20 text-red-655 dark:text-red-300 rounded-2xl backdrop-blur-md">
+                        <div className="mb-6 flex items-center justify-between p-4 bg-red-500/10 border border-red-500/20 text-red-655 dark:text-red-300 rounded-none ">
                             <div className="flex items-center gap-3">
                                 <AlertCircle className="w-5 h-5 flex-shrink-0" />
                                 <p className="font-bold text-sm">{error}</p>
@@ -347,7 +391,7 @@ function UserManagementPageContent() {
                     )}
 
                     {/* Filter controls */}
-                    <div className="bg-card border border-slate-200 dark:border-border rounded-2xl p-4 shadow-sm mb-4 flex flex-col md:flex-row gap-4 items-center">
+                    <div className="bg-card border border-slate-200 dark:border-border rounded-none p-4 shadow-sm mb-4 flex flex-col md:flex-row gap-4 items-center">
                         <div className="relative w-full md:flex-1">
                             <div className="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none">
                                 <Search className="w-4 h-4 text-slate-400" />
@@ -360,7 +404,7 @@ function UserManagementPageContent() {
                                     setSearchTerm(e.target.value);
                                     updateUrlParams(1, pageSize);
                                 }}
-                                className="block w-full pl-10 pr-4 py-2.5 bg-slate-50 dark:bg-slate-950/20 border border-slate-200 dark:border-border rounded-xl text-xs font-bold text-foreground focus:outline-none focus:ring-2 focus:ring-brand-primary/20"
+                                className="block w-full pl-10 pr-4 py-2.5 bg-slate-50 dark:bg-slate-950/20 border border-slate-200 dark:border-border rounded-none text-xs font-bold text-foreground focus:outline-none focus:ring-2 focus:ring-brand-primary/20"
                             />
                         </div>
 
@@ -371,7 +415,7 @@ function UserManagementPageContent() {
                                     setRoleFilter(e.target.value);
                                     updateUrlParams(1, pageSize);
                                 }}
-                                className="px-4 py-2.5 bg-slate-50 dark:bg-slate-950/20 border border-slate-200 dark:border-border rounded-xl text-xs font-black uppercase tracking-widest text-slate-600 dark:text-foreground/70 focus:outline-none cursor-pointer"
+                                className="px-4 py-2.5 bg-slate-50 dark:bg-slate-950/20 border border-slate-200 dark:border-border rounded-none text-xs font-black uppercase tracking-widest text-slate-600 dark:text-foreground/70 focus:outline-none cursor-pointer"
                             >
                                 <option value="">All Roles</option>
                                 <option value="admin">Admin</option>
@@ -386,13 +430,27 @@ function UserManagementPageContent() {
                                     setDeptFilter(e.target.value);
                                     updateUrlParams(1, pageSize);
                                 }}
-                                className="px-4 py-2.5 bg-slate-50 dark:bg-slate-950/20 border border-slate-200 dark:border-border rounded-xl text-xs font-black uppercase tracking-widest text-slate-600 dark:text-foreground/70 focus:outline-none cursor-pointer max-w-[200px]"
+                                className="px-4 py-2.5 bg-slate-50 dark:bg-slate-950/20 border border-slate-200 dark:border-border rounded-none text-xs font-black uppercase tracking-widest text-slate-600 dark:text-foreground/70 focus:outline-none cursor-pointer max-w-[200px]"
                             >
                                 <option value="">All Departments</option>
                                 {departments.map((d) => (
                                     <option key={d} value={d}>{d}</option>
                                 ))}
                             </select>
+
+                            <select
+                                value={approvalFilter}
+                                onChange={(e) => {
+                                    setApprovalFilter(e.target.value);
+                                    updateUrlParams(1, pageSize);
+                                }}
+                                className="px-4 py-2.5 bg-slate-50 dark:bg-slate-950/20 border border-slate-200 dark:border-border rounded-none text-xs font-black uppercase tracking-widest text-slate-600 dark:text-foreground/70 focus:outline-none cursor-pointer"
+                            >
+                                <option value="">All Statuses</option>
+                                <option value="Approved">Approved</option>
+                                <option value="Pending">Pending</option>
+                                <option value="Rejected">Rejected</option>
+                            </select>
                         </div>
                     </div>
 
@@ -404,11 +462,13 @@ function UserManagementPageContent() {
                                 searchTerm,
                                 roleFilter,
                                 deptFilter,
+                                approvalFilter,
                             }}
                             onLoadFilters={(filters) => {
                                 if (filters.searchTerm !== undefined) setSearchTerm(filters.searchTerm);
                                 if (filters.roleFilter !== undefined) setRoleFilter(filters.roleFilter);
                                 if (filters.deptFilter !== undefined) setDeptFilter(filters.deptFilter);
+                                if (filters.approvalFilter !== undefined) setApprovalFilter(filters.approvalFilter);
                                 updateUrlParams(1, pageSize);
                             }}
                         />
@@ -421,7 +481,7 @@ function UserManagementPageContent() {
                                     "users"
                                 );
                             }}
-                            className="inline-flex items-center gap-2 bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 hover:bg-slate-50 dark:hover:bg-white/10 active:scale-95 text-slate-700 dark:text-foreground/80 font-semibold px-4 py-2.5 rounded-xl shadow-sm transition-all duration-200 text-sm"
+                            className="inline-flex items-center gap-2 bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 hover:bg-slate-50 dark:hover:bg-white/10 active:scale-95 text-slate-700 dark:text-foreground/80 font-semibold px-4 py-2.5 rounded-none shadow-sm transition-all duration-200 text-sm"
                         >
                             <DownloadCloud className="w-4 h-4 text-emerald-500" />
                             <span>Export CSV</span>
@@ -429,7 +489,7 @@ function UserManagementPageContent() {
                     </div>
 
                     {/* Users Directory List */}
-                    <div className="bg-card border border-slate-200 dark:border-border rounded-3xl overflow-hidden shadow-xl">
+                    <div className="bg-card border border-slate-200 dark:border-border rounded-none overflow-hidden border-2 border-foreground shadow-[4px_4px_0_0_rgba(0,0,0,1)] dark:shadow-[4px_4px_0_0_rgba(255,255,255,0.2)]">
                         {loading ? (
                             <div className="h-64 flex flex-col items-center justify-center gap-4">
                                 <Loader2 className="w-8 h-8 text-brand-primary animate-spin" />
@@ -451,6 +511,7 @@ function UserManagementPageContent() {
                                             <th className="py-4 px-6">Role</th>
                                             <th className="py-4 px-6">Faculty / Department</th>
                                             <th className="py-4 px-6">Phone</th>
+                                            <th className="py-4 px-6">Status</th>
                                             <th className="py-4 px-6">Joined Date</th>
                                             <th className="py-4 px-6 text-right">Actions</th>
                                         </tr>
@@ -460,7 +521,7 @@ function UserManagementPageContent() {
                                             <tr key={item.id} className="hover:bg-slate-50/50 dark:hover:bg-foreground/[0.01] transition-colors">
                                                 <td className="py-4.5 px-6">
                                                     <div className="flex items-center gap-3">
-                                                        <div className="w-9 h-9 rounded-xl bg-gradient-to-tr from-brand-primary/10 to-indigo-500/10 flex items-center justify-center text-sm font-black text-brand-primary">
+                                                        <div className="w-9 h-9 rounded-none bg-card   flex items-center justify-center text-sm font-black text-brand-primary">
                                                             {item.name.charAt(0).toUpperCase()}
                                                         </div>
                                                         <span className="text-sm font-bold text-foreground">{item.name}</span>
@@ -470,7 +531,7 @@ function UserManagementPageContent() {
                                                     {item.email}
                                                 </td>
                                                 <td className="py-4.5 px-6">
-                                                    <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-[9px] font-black uppercase tracking-wider border ${roleBadges[item.role] || "bg-slate-100 border-slate-200 text-slate-600"}`}>
+                                                    <span className={`inline-flex items-center px-2.5 py-0.5 rounded-none text-[9px] font-black uppercase tracking-wider border ${roleBadges[item.role] || "bg-slate-100 border-slate-200 text-slate-600"}`}>
                                                         {item.role}
                                                     </span>
                                                 </td>
@@ -480,11 +541,34 @@ function UserManagementPageContent() {
                                                 <td className="py-4.5 px-6 text-xs font-bold text-slate-500 dark:text-foreground/50">
                                                     {item.phone || "—"}
                                                 </td>
+                                                <td className="py-4.5 px-6">
+                                                    <span className={`inline-flex items-center px-2.5 py-0.5 rounded-none text-[9px] font-black uppercase tracking-wider border ${approvalStatusBadges[item.approval_status || "Approved"]}`}>
+                                                        {item.approval_status || "Approved"}
+                                                    </span>
+                                                </td>
                                                 <td className="py-4.5 px-6 text-xs font-bold text-slate-500 dark:text-foreground/50">
                                                     {new Date(item.created_at).toLocaleDateString(undefined, { year: "numeric", month: "short", day: "numeric" })}
                                                 </td>
                                                 <td className="py-4.5 px-6 text-right">
                                                     <div className="flex items-center justify-end gap-2">
+                                                        {item.approval_status !== "Approved" && (
+                                                            <button
+                                                                onClick={() => handleSetApprovalStatus(item, "Approved")}
+                                                                className="p-2 bg-emerald-100 dark:bg-emerald-500/10 rounded-lg text-emerald-600 hover:bg-emerald-200 dark:text-emerald-450 dark:hover:bg-emerald-550/20 transition-colors"
+                                                                title="Approve Member"
+                                                            >
+                                                                <CheckCircle2 className="w-3.5 h-3.5" />
+                                                            </button>
+                                                        )}
+                                                        {item.approval_status !== "Rejected" && (
+                                                            <button
+                                                                onClick={() => handleSetApprovalStatus(item, "Rejected")}
+                                                                className="p-2 bg-rose-100 dark:bg-rose-500/10 rounded-lg text-rose-600 hover:bg-rose-200 dark:text-rose-400 dark:hover:bg-rose-550/20 transition-colors"
+                                                                title="Reject Member"
+                                                            >
+                                                                <X className="w-3.5 h-3.5" />
+                                                            </button>
+                                                        )}
                                                         <button
                                                             onClick={() => openEditModal(item)}
                                                             className="p-2 bg-slate-100 dark:bg-foreground/5 rounded-lg text-slate-600 hover:text-brand-primary dark:text-slate-400 dark:hover:text-white transition-colors"
@@ -529,7 +613,7 @@ function UserManagementPageContent() {
                                 animate={{ opacity: 1 }}
                                 exit={{ opacity: 0 }}
                                 onClick={() => { setCreateModalOpen(false); setEditModalOpen(false); setShowFormPassword(false); }}
-                                className="absolute inset-0 bg-slate-900/50 backdrop-blur-sm"
+                                className="absolute inset-0 bg-slate-900/50 "
                             />
 
                             {/* Modal Box */}
@@ -537,7 +621,7 @@ function UserManagementPageContent() {
                                 initial={{ opacity: 0, scale: 0.95, y: 10 }}
                                 animate={{ opacity: 1, scale: 1, y: 0 }}
                                 exit={{ opacity: 0, scale: 0.95, y: 10 }}
-                                className="bg-card border border-slate-200 dark:border-border rounded-[2rem] w-full max-w-md p-8 shadow-2xl relative z-10 overflow-hidden"
+                                className="bg-card border border-slate-200 dark:border-border rounded-[2rem] w-full max-w-md p-8 border-2 border-foreground shadow-[4px_4px_0_0_rgba(0,0,0,1)] dark:shadow-[4px_4px_0_0_rgba(255,255,255,0.2)] relative z-10 overflow-hidden"
                             >
                                 <div className="flex justify-between items-center mb-6">
                                     <h3 className="text-xl font-black text-foreground flex items-center gap-2">
@@ -553,7 +637,7 @@ function UserManagementPageContent() {
                                 </div>
 
                                 {formError && (
-                                    <div className="mb-4 flex items-center gap-2 bg-red-500/10 border border-red-500/20 p-3.5 rounded-xl">
+                                    <div className="mb-4 flex items-center gap-2 bg-red-500/10 border border-red-500/20 p-3.5 rounded-none">
                                         <AlertCircle className="w-4 h-4 text-red-500 shrink-0" />
                                         <p className="text-xs font-bold text-red-500 leading-tight">{formError}</p>
                                     </div>
@@ -569,7 +653,7 @@ function UserManagementPageContent() {
                                             value={formData.name}
                                             onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                                             placeholder="Jane Doe"
-                                            className="block w-full px-4 py-2.5 bg-slate-50 dark:bg-slate-950/20 border border-slate-200 dark:border-border rounded-xl text-xs font-bold text-foreground focus:outline-none"
+                                            className="block w-full px-4 py-2.5 bg-slate-50 dark:bg-slate-950/20 border border-slate-200 dark:border-border rounded-none text-xs font-bold text-foreground focus:outline-none"
                                         />
                                     </div>
 
@@ -583,7 +667,7 @@ function UserManagementPageContent() {
                                             value={formData.email}
                                             onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                                             placeholder="jane@university.ac.lk"
-                                            className="block w-full px-4 py-2.5 bg-slate-50 dark:bg-slate-950/20 border border-slate-200 dark:border-border rounded-xl text-xs font-bold text-foreground focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed"
+                                            className="block w-full px-4 py-2.5 bg-slate-50 dark:bg-slate-950/20 border border-slate-200 dark:border-border rounded-none text-xs font-bold text-foreground focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed"
                                         />
                                     </div>
 
@@ -593,7 +677,7 @@ function UserManagementPageContent() {
                                         <select
                                             value={formData.role}
                                             onChange={(e) => setFormData({ ...formData, role: e.target.value })}
-                                            className="block w-full px-4 py-2.5 bg-slate-50 dark:bg-slate-950/20 border border-slate-200 dark:border-border rounded-xl text-xs font-bold text-foreground focus:outline-none cursor-pointer"
+                                            className="block w-full px-4 py-2.5 bg-slate-50 dark:bg-slate-950/20 border border-slate-200 dark:border-border rounded-none text-xs font-bold text-foreground focus:outline-none cursor-pointer"
                                         >
                                             <option value="student">Student</option>
                                             <option value="lecturer">Lecturer</option>
@@ -602,6 +686,22 @@ function UserManagementPageContent() {
                                         </select>
                                     </div>
 
+                                    {/* Approval Status (Edit mode only) */}
+                                    {editModalOpen && (
+                                        <div>
+                                            <label className="block text-[10px] font-black uppercase tracking-widest text-slate-400 mb-1 ml-1">Approval Status</label>
+                                            <select
+                                                value={formData.approval_status}
+                                                onChange={(e) => setFormData({ ...formData, approval_status: e.target.value as any })}
+                                                className="block w-full px-4 py-2.5 bg-slate-50 dark:bg-slate-950/20 border border-slate-200 dark:border-border rounded-none text-xs font-bold text-foreground focus:outline-none cursor-pointer"
+                                            >
+                                                <option value="Approved">Approved</option>
+                                                <option value="Pending">Pending</option>
+                                                <option value="Rejected">Rejected</option>
+                                            </select>
+                                        </div>
+                                    )}
+
                                     {/* Faculty / Dept */}
                                     <div>
                                         <label className="block text-[10px] font-black uppercase tracking-widest text-slate-400 mb-1 ml-1">Faculty / Department</label>
@@ -609,7 +709,7 @@ function UserManagementPageContent() {
                                             value={formData.department}
                                             onChange={(e) => setFormData({ ...formData, department: e.target.value })}
                                             required
-                                            className="block w-full px-4 py-2.5 bg-slate-50 dark:bg-slate-950/20 border border-slate-200 dark:border-border rounded-xl text-xs font-bold text-foreground focus:outline-none cursor-pointer"
+                                            className="block w-full px-4 py-2.5 bg-slate-50 dark:bg-slate-950/20 border border-slate-200 dark:border-border rounded-none text-xs font-bold text-foreground focus:outline-none cursor-pointer"
                                         >
                                             <option value="" disabled>Select Department</option>
                                             {departments.map((d) => (
@@ -626,7 +726,7 @@ function UserManagementPageContent() {
                                             value={formData.phone}
                                             onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
                                             placeholder="+1234567890"
-                                            className="block w-full px-4 py-2.5 bg-slate-50 dark:bg-slate-950/20 border border-slate-200 dark:border-border rounded-xl text-xs font-bold text-foreground focus:outline-none"
+                                            className="block w-full px-4 py-2.5 bg-slate-50 dark:bg-slate-950/20 border border-slate-200 dark:border-border rounded-none text-xs font-bold text-foreground focus:outline-none"
                                         />
                                     </div>
 
@@ -642,7 +742,7 @@ function UserManagementPageContent() {
                                                 value={formData.password}
                                                 onChange={(e) => setFormData({ ...formData, password: e.target.value })}
                                                 placeholder={createModalOpen ? "Min 8 characters" : "Leave blank to keep unchanged"}
-                                                className="block w-full pl-4 pr-11 py-2.5 bg-slate-50 dark:bg-slate-950/20 border border-slate-200 dark:border-border rounded-xl text-xs font-bold text-foreground focus:outline-none"
+                                                className="block w-full pl-4 pr-11 py-2.5 bg-slate-50 dark:bg-slate-950/20 border border-slate-200 dark:border-border rounded-none text-xs font-bold text-foreground focus:outline-none"
                                             />
                                             <button
                                                 type="button"
@@ -664,7 +764,7 @@ function UserManagementPageContent() {
                                         <button
                                             type="submit"
                                             disabled={formLoading}
-                                            className="flex-1 flex items-center justify-center gap-2 py-3 bg-brand-primary hover:opacity-90 text-white font-bold text-xs uppercase tracking-widest rounded-xl transition-all shadow-md"
+                                            className="flex-1 flex items-center justify-center gap-2 py-3 bg-brand-primary hover:opacity-90 text-white font-bold text-xs uppercase tracking-widest rounded-none transition-all shadow-md"
                                         >
                                             {formLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
                                             {createModalOpen ? "Create" : "Save Changes"}
@@ -672,7 +772,7 @@ function UserManagementPageContent() {
                                         <button
                                             type="button"
                                             onClick={() => { setCreateModalOpen(false); setEditModalOpen(false); setShowFormPassword(false); }}
-                                            className="px-5 py-3 border border-slate-200 dark:border-border hover:bg-slate-50 dark:hover:bg-foreground/5 text-slate-600 dark:text-slate-400 font-bold text-xs uppercase tracking-widest rounded-xl transition-all"
+                                            className="px-5 py-3 border border-slate-200 dark:border-border hover:bg-slate-50 dark:hover:bg-foreground/5 text-slate-600 dark:text-slate-400 font-bold text-xs uppercase tracking-widest rounded-none transition-all"
                                         >
                                             Cancel
                                         </button>
@@ -691,7 +791,7 @@ function UserManagementPageContent() {
                                 animate={{ opacity: 1 }}
                                 exit={{ opacity: 0 }}
                                 onClick={() => setDeleteModalOpen(false)}
-                                className="absolute inset-0 bg-slate-900/50 backdrop-blur-sm"
+                                className="absolute inset-0 bg-slate-900/50 "
                             />
 
                             {/* Modal Box */}
@@ -699,10 +799,10 @@ function UserManagementPageContent() {
                                 initial={{ opacity: 0, scale: 0.95, y: 10 }}
                                 animate={{ opacity: 1, scale: 1, y: 0 }}
                                 exit={{ opacity: 0, scale: 0.95, y: 10 }}
-                                className="bg-card border border-slate-200 dark:border-border rounded-[2rem] w-full max-w-sm p-8 shadow-2xl relative z-10"
+                                className="bg-card border border-slate-200 dark:border-border rounded-[2rem] w-full max-w-sm p-8 border-2 border-foreground shadow-[4px_4px_0_0_rgba(0,0,0,1)] dark:shadow-[4px_4px_0_0_rgba(255,255,255,0.2)] relative z-10"
                             >
                                 <div className="text-center space-y-4">
-                                    <div className="w-12 h-12 bg-red-100 dark:bg-red-500/10 border border-red-200 dark:border-red-500/20 text-red-500 flex items-center justify-center rounded-2xl mx-auto shadow-md">
+                                    <div className="w-12 h-12 bg-red-100 dark:bg-red-500/10 border border-red-200 dark:border-red-500/20 text-red-500 flex items-center justify-center rounded-none mx-auto shadow-md">
                                         <Trash2 className="w-5 h-5" />
                                     </div>
                                     <div>
@@ -711,7 +811,7 @@ function UserManagementPageContent() {
                                             Are you sure you want to delete <strong>{selectedUser.name}</strong> ({selectedUser.email})?
                                         </p>
                                     </div>
-                                    <div className="p-3 bg-red-500/5 rounded-xl border border-red-5500/10">
+                                    <div className="p-3 bg-red-500/5 rounded-none border border-red-5500/10">
                                         <p className="text-[10px] text-red-655 dark:text-red-400 font-bold leading-normal">
                                             Warning: This action will permanently remove this account from Firebase Auth and the database, and nullify/cascade references in bookings or tickets.
                                         </p>
@@ -720,13 +820,13 @@ function UserManagementPageContent() {
                                         <button
                                             onClick={handleDeleteSubmit}
                                             disabled={formLoading}
-                                            className="flex-1 py-3 bg-red-500 hover:bg-red-600 text-white font-bold text-xs uppercase tracking-widest rounded-xl transition-all shadow-md shadow-red-500/10"
+                                            className="flex-1 py-3 bg-red-500 hover:bg-red-600 text-white font-bold text-xs uppercase tracking-widest rounded-none transition-all shadow-md shadow-red-500/10"
                                         >
                                             {formLoading ? <Loader2 className="w-4 h-4 animate-spin mx-auto" /> : "Delete"}
                                         </button>
                                         <button
                                             onClick={() => setDeleteModalOpen(false)}
-                                            className="flex-1 py-3 border border-slate-200 dark:border-border hover:bg-slate-50 dark:hover:bg-foreground/5 text-slate-655 dark:text-slate-400 font-bold text-xs uppercase tracking-widest rounded-xl transition-all"
+                                            className="flex-1 py-3 border border-slate-200 dark:border-border hover:bg-slate-50 dark:hover:bg-foreground/5 text-slate-655 dark:text-slate-400 font-bold text-xs uppercase tracking-widest rounded-none transition-all"
                                         >
                                             Cancel
                                         </button>
diff --git a/app/api/keep-alive/route.ts b/app/api/keep-alive/route.ts
new file mode 100644
index 0000000..10994d2
--- /dev/null
+++ b/app/api/keep-alive/route.ts
@@ -0,0 +1,52 @@
+import { NextResponse } from "next/server";
+import { supabase } from "../../../lib/supabase";
+
+export const dynamic = "force-dynamic";
+
+export async function GET() {
+  try {
+    const startTime = Date.now();
+
+    // Lightweight query to keep Supabase database active and prevent 7-day inactivity pause
+    const { count, error } = await supabase
+      .from("users")
+      .select("id", { count: "exact", head: true })
+      .limit(1);
+
+    const durationMs = Date.now() - startTime;
+
+    if (error) {
+      console.error("Keep-alive Supabase query error:", error);
+      return NextResponse.json(
+        {
+          status: "error",
+          message: "Failed to ping Supabase database",
+          error: error.message,
+          timestamp: new Date().toISOString(),
+        },
+        { status: 500 }
+      );
+    }
+
+    return NextResponse.json(
+      {
+        status: "ok",
+        message: "Supabase database keep-alive ping successful",
+        responseTimeMs: durationMs,
+        timestamp: new Date().toISOString(),
+      },
+      { status: 200 }
+    );
+  } catch (err: any) {
+    console.error("Unexpected error in keep-alive endpoint:", err);
+    return NextResponse.json(
+      {
+        status: "error",
+        message: "Unexpected server error during keep-alive ping",
+        error: err?.message || String(err),
+        timestamp: new Date().toISOString(),
+      },
+      { status: 500 }
+    );
+  }
+}
diff --git a/app/bookings/page.tsx b/app/bookings/page.tsx
index fcb7302..145414e 100644
--- a/app/bookings/page.tsx
+++ b/app/bookings/page.tsx
@@ -516,29 +516,41 @@ function BookingsPageContent() {
 
     return (
         <ProtectedRoute>
-            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10 text-foreground">
-                <header className="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-10">
-                    <div>
-                        <h1 className="text-3xl font-black text-slate-900 dark:text-white tracking-tight mb-2">
-                            {view === "my" || view === "status" ? "My Bookings" : "Resource Bookings"}
-                        </h1>
-                        <p className="text-slate-500 dark:text-foreground/50 font-medium">
-                            {view === "my" || view === "status"
-                                ? "Manage, track, and edit your personal resource reservations."
-                                : "Manage and monitor facility schedules across all university faculties."}
-                        </p>
+            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 text-foreground">
+
+                {/* ── Sky Gradient Header ── */}
+                <div className="relative overflow-hidden rounded-2xl bg-gradient-to-br from-[#0EA5E9] to-[#0284C7] p-6 md:p-8 text-white mb-8 shadow-lg shadow-sky-500/20">
+                    <div className="absolute -top-10 -right-10 w-40 h-40 rounded-full bg-white/10 pointer-events-none" />
+                    <div className="absolute -bottom-8 left-16 w-28 h-28 rounded-full bg-[#0D9488]/20 pointer-events-none" />
+
+                    <div className="relative z-10 flex flex-col md:flex-row md:items-center justify-between gap-4">
+                        <div>
+                            <div className="flex items-center gap-2 mb-2">
+                                <span className="inline-flex items-center gap-1.5 bg-white/20 backdrop-blur-sm px-3 py-1 rounded-full text-[11px] font-semibold uppercase tracking-wider">
+                                    {view === "my" || view === "status" ? "My Reservations" : "All Bookings"}
+                                </span>
+                            </div>
+                            <h1 className="text-2xl md:text-3xl font-bold tracking-tight">
+                                {view === "my" || view === "status" ? "My Bookings" : "Resource Bookings"}
+                            </h1>
+                            <p className="mt-1.5 text-sky-100 text-sm font-medium">
+                                {view === "my" || view === "status"
+                                    ? "Manage, track, and edit your personal resource reservations."
+                                    : "Manage and monitor facility schedules across all university faculties."}
+                            </p>
+                        </div>
+                        <button
+                            onClick={() => setIsModalOpen(true)}
+                            className="inline-flex items-center gap-2 bg-white text-[#0EA5E9] font-semibold px-5 py-2.5 rounded-xl hover:bg-sky-50 active:scale-95 shadow-md transition-all whitespace-nowrap shrink-0"
+                        >
+                            <Plus className="w-4 h-4" />
+                            New Booking
+                        </button>
                     </div>
-                    <button
-                        onClick={() => setIsModalOpen(true)}
-                        className="inline-flex items-center justify-center gap-2 bg-brand-primary text-white font-bold px-6 py-3 rounded-2xl hover:bg-brand-secondary transition-all shadow-lg active:scale-95 whitespace-nowrap"
-                    >
-                        <Plus className="w-5 h-5" />
-                        New Booking
-                    </button>
-                </header>
+                </div>
 
                 {combinedError && (
-                    <div className="mb-6 p-4 bg-red-50 dark:bg-red-500/10 border border-red-100 dark:border-red-500/20 text-red-600 dark:text-red-400 rounded-2xl text-sm font-semibold">
+                    <div className="mb-6 p-4 bg-red-50 dark:bg-red-500/10 border border-red-100 dark:border-red-500/20 text-red-600 dark:text-red-400 rounded-none text-sm font-semibold">
                         {combinedError}
                     </div>
                 )}
@@ -546,14 +558,14 @@ function BookingsPageContent() {
                 {/* Availability Calendar (Hidden in personal bookings view) */}
                 {view !== "my" && view !== "status" && (
                     <section className="mb-8">
-                    <div className="bg-white dark:bg-slate-900/60 rounded-3xl border border-slate-100 dark:border-white/[0.06] shadow-sm p-6">
+                    <div className="bg-white dark:bg-slate-900/60 rounded-none border border-slate-100 dark:border-white/[0.06] shadow-sm p-6">
                         <div className="flex flex-col xl:flex-row xl:items-center xl:justify-between gap-4 mb-6">
                             <div>
                                 <h2 className="text-xl font-black text-slate-900 dark:text-white">Booking Availability</h2>
                                 <p className="text-sm font-medium text-slate-500 dark:text-foreground/40">{calendarSubLabel}</p>
                             </div>
                             <div className="flex flex-wrap items-center gap-2">
-                                <div className="flex items-center gap-2 px-2 py-1.5 border border-slate-200 dark:border-white/10 rounded-xl bg-slate-50 dark:bg-white/5">
+                                <div className="flex items-center gap-2 px-2 py-1.5 border border-slate-200 dark:border-white/10 rounded-none bg-slate-50 dark:bg-white/5">
                                     <button
                                         onClick={handlePrev}
                                         className="p-1.5 rounded-lg hover:bg-white dark:hover:bg-white/5 transition-colors text-slate-500 dark:text-foreground/60"
@@ -579,18 +591,18 @@ function BookingsPageContent() {
                                 <div className="flex gap-2">
                                     <button
                                         onClick={() => setCalendarView("week")}
-                                        className={`px-3 py-2 border rounded-xl text-xs font-bold transition-colors ${calendarView === "week"
-                                            ? "bg-brand-primary text-white border-brand-primary"
-                                            : "border-slate-200 dark:border-white/10 text-slate-600 dark:text-foreground/60 hover:bg-slate-50 dark:hover:bg-white/5"
+                                        className={`px-3 py-2 rounded-lg text-xs font-semibold transition-colors ${calendarView === "week"
+                                            ? "bg-[#0EA5E9] text-white shadow-sm"
+                                            : "border border-[#E2E8F0] dark:border-white/10 text-[#64748B] dark:text-foreground/60 hover:bg-[#F0F9FF] dark:hover:bg-white/5"
                                             }`}
                                     >
                                         Week
                                     </button>
                                     <button
                                         onClick={() => setCalendarView("month")}
-                                        className={`px-3 py-2 border rounded-xl text-xs font-bold transition-colors ${calendarView === "month"
-                                            ? "bg-brand-primary text-white border-brand-primary"
-                                            : "border-slate-200 dark:border-white/10 text-slate-600 dark:text-foreground/60 hover:bg-slate-50 dark:hover:bg-white/5"
+                                        className={`px-3 py-2 rounded-lg text-xs font-semibold transition-colors ${calendarView === "month"
+                                            ? "bg-[#0EA5E9] text-white shadow-sm"
+                                            : "border border-[#E2E8F0] dark:border-white/10 text-[#64748B] dark:text-foreground/60 hover:bg-[#F0F9FF] dark:hover:bg-white/5"
                                             }`}
                                     >
                                         Month
@@ -600,7 +612,7 @@ function BookingsPageContent() {
                                     value={selectedResourceId}
                                     onChange={(e) => setSelectedResourceId(e.target.value)}
                                     disabled={loadingResources}
-                                    className="px-3 py-2 border border-slate-200 dark:border-white/10 rounded-xl text-xs font-bold text-slate-600 dark:text-foreground/60 bg-slate-50 dark:bg-[#0c0a14] hover:bg-white dark:hover:bg-white/5 transition-colors min-w-[180px]"
+                                    className="px-3 py-2 border border-slate-200 dark:border-white/10 rounded-none text-xs font-bold text-slate-600 dark:text-foreground/60 bg-slate-50 dark:bg-[#0c0a14] hover:bg-white dark:hover:bg-white/5 transition-colors min-w-[180px]"
                                 >
                                     <option value="all">
                                         {loadingResources ? "Loading resources..." : "All resources"}
@@ -648,7 +660,7 @@ function BookingsPageContent() {
                                         return (
                                             <div
                                                 key={dayKey}
-                                                className={`rounded-2xl border p-3 min-h-[110px] flex flex-col justify-between ${isOutsideMonth
+                                                className={`rounded-none border p-3 min-h-[110px] flex flex-col justify-between ${isOutsideMonth
                                                     ? "bg-slate-50 dark:bg-white/[0.01] text-slate-400 dark:text-foreground/30 border-slate-100 dark:border-white/[0.04]"
                                                     : "bg-slate-50/60 dark:bg-white/[0.03] border-slate-100 dark:border-white/[0.06]"
                                                     } ${isToday
@@ -673,7 +685,7 @@ function BookingsPageContent() {
                                                 </div>
                                                 <div className="mt-2">
                                                     <span
-                                                        className={`inline-flex px-2 py-1 rounded-full text-[10px] font-black uppercase tracking-widest ${getAvailabilityClasses(status)
+                                                        className={`inline-flex px-2 py-1 rounded-none text-[10px] font-black uppercase tracking-widest ${getAvailabilityClasses(status)
                                                             }`}
                                                     >
                                                         {status}
@@ -691,15 +703,15 @@ function BookingsPageContent() {
 
                         <div className="mt-6 flex flex-wrap gap-3 text-xs font-bold text-slate-500 dark:text-foreground/50">
                             <span className="inline-flex items-center gap-2">
-                                <span className="w-2.5 h-2.5 rounded-full bg-emerald-500"></span>
+                                <span className="w-2.5 h-2.5 rounded-none bg-emerald-500"></span>
                                 Available
                             </span>
                             <span className="inline-flex items-center gap-2">
-                                <span className="w-2.5 h-2.5 rounded-full bg-amber-500"></span>
+                                <span className="w-2.5 h-2.5 rounded-none bg-amber-500"></span>
                                 Limited
                             </span>
                             <span className="inline-flex items-center gap-2">
-                                <span className="w-2.5 h-2.5 rounded-full bg-rose-500"></span>
+                                <span className="w-2.5 h-2.5 rounded-none bg-rose-500"></span>
                                 Booked
                             </span>
                         </div>
@@ -719,7 +731,7 @@ function BookingsPageContent() {
                 ) : (
                     <>
                         {/* Filters & Search */}
-                        <div className="bg-white dark:bg-slate-900/60 p-4 rounded-3xl border border-slate-100 dark:border-white/[0.06] shadow-sm mb-4 flex flex-col lg:flex-row gap-4">
+                        <div className="bg-white dark:bg-slate-900/60 p-4 rounded-none border border-slate-100 dark:border-white/[0.06] shadow-sm mb-4 flex flex-col lg:flex-row gap-4">
                             <div className="relative flex-1 group">
                                 <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-400 transition-colors group-focus-within:text-brand-primary" />
                                 <input
@@ -730,15 +742,15 @@ function BookingsPageContent() {
                                         updateUrlParams(1, pageSize);
                                     }}
                                     placeholder="Search by resource name, type, or location..."
-                                    className="w-full pl-12 pr-4 py-3 bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-2xl text-sm font-semibold text-slate-800 dark:text-white focus:outline-none focus:ring-4 focus:ring-brand-primary/10 transition-all"
+                                    className="w-full pl-12 pr-4 py-3 bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-none text-sm font-semibold text-slate-800 dark:text-white focus:outline-none focus:ring-4 focus:ring-brand-primary/10 transition-all"
                                 />
                             </div>
                             <div className="flex gap-4">
-                                <button className="flex items-center gap-2 px-5 py-3 border border-slate-200 dark:border-white/10 rounded-2xl text-sm font-bold text-slate-600 dark:text-foreground/60 hover:bg-slate-50 dark:hover:bg-white/5 transition-colors">
+                                <button className="flex items-center gap-2 px-5 py-3 border border-slate-200 dark:border-white/10 rounded-none text-sm font-bold text-slate-600 dark:text-foreground/60 hover:bg-slate-50 dark:hover:bg-white/5 transition-colors">
                                     <Filter className="w-4 h-4" />
                                     Filters
                                 </button>
-                                <button className="flex items-center gap-2 px-5 py-3 border border-slate-200 dark:border-white/10 rounded-2xl text-sm font-bold text-slate-600 dark:text-foreground/60 hover:bg-slate-50 dark:hover:bg-white/5 transition-colors">
+                                <button className="flex items-center gap-2 px-5 py-3 border border-slate-200 dark:border-white/10 rounded-none text-sm font-bold text-slate-600 dark:text-foreground/60 hover:bg-slate-50 dark:hover:bg-white/5 transition-colors">
                                     <Calendar className="w-4 h-4" />
                                     {calendarLabel || "Select range"}
                                 </button>
@@ -779,7 +791,7 @@ function BookingsPageContent() {
                                         "bookings"
                                     );
                                 }}
-                                className="inline-flex items-center gap-2 bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 hover:bg-slate-50 dark:hover:bg-white/10 active:scale-95 text-slate-700 dark:text-foreground/80 font-semibold px-4 py-2.5 rounded-xl shadow-sm transition-all duration-200 text-sm"
+                                className="inline-flex items-center gap-2 bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 hover:bg-slate-50 dark:hover:bg-white/10 active:scale-95 text-slate-700 dark:text-foreground/80 font-semibold px-4 py-2.5 rounded-none shadow-sm transition-all duration-200 text-sm"
                             >
                                 <DownloadCloud className="w-4 h-4 text-emerald-500" />
                                 <span>Export CSV</span>
@@ -787,7 +799,7 @@ function BookingsPageContent() {
                         </div>
 
                         {/* Bookings Table */}
-                        <div className="bg-white dark:bg-slate-900/60 rounded-3xl border border-slate-100 dark:border-white/[0.06] shadow-sm overflow-hidden">
+                        <div className="bg-white dark:bg-slate-900/60 rounded-none border border-slate-100 dark:border-white/[0.06] shadow-sm overflow-hidden">
                             <div className="overflow-x-auto">
                                 <table className="w-full text-left">
                                     <thead>
@@ -838,7 +850,7 @@ function BookingsPageContent() {
                                                     >
                                                         <td className="px-6 py-5">
                                                             <div className="flex items-center gap-4">
-                                                                <div className="w-10 h-10 rounded-2xl bg-brand-primary/5 flex items-center justify-center">
+                                                                <div className="w-10 h-10 rounded-none bg-brand-primary/5 flex items-center justify-center">
                                                                     <MapPin className="w-5 h-5 text-brand-primary" />
                                                                 </div>
                                                                 <div>
@@ -865,7 +877,7 @@ function BookingsPageContent() {
                                                         </td>
                                                         <td className="px-6 py-5">
                                                             <span
-                                                                className={`px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest shadow-sm ${getBookingStatusClasses(
+                                                                className={`px-3 py-1 rounded-none text-[10px] font-black uppercase tracking-widest shadow-sm ${getBookingStatusClasses(
                                                                     statusLabel
                                                                 )}`}
                                                             >
@@ -881,7 +893,7 @@ function BookingsPageContent() {
                                                             </button>
                                                             
                                                             {activeDropdown === booking.id && (
-                                                                <div className="absolute right-8 top-10 z-10 w-48 bg-white dark:bg-slate-950 rounded-xl shadow-xl border border-slate-100 dark:border-white/10 overflow-hidden text-left animate-in fade-in zoom-in-95">
+                                                                <div className="absolute right-8 top-10 z-10 w-48 bg-white dark:bg-slate-950 rounded-none border-2 border-foreground shadow-[4px_4px_0_0_rgba(0,0,0,1)] dark:shadow-[4px_4px_0_0_rgba(255,255,255,0.2)] border border-slate-100 dark:border-white/10 overflow-hidden text-left animate-in fade-in zoom-in-95">
                                                                     <div className="py-1">
                                                                         {booking.status === "Pending" && (
                                                                             <button 
diff --git a/app/explore/page.tsx b/app/explore/page.tsx
index ac1a570..007f287 100644
--- a/app/explore/page.tsx
+++ b/app/explore/page.tsx
@@ -88,7 +88,7 @@ export default function ExploreResourcesPage() {
             <button
               key={cat}
               onClick={() => setActiveCategory(cat)}
-              className={`px-4 py-2 rounded-full text-sm font-semibold whitespace-nowrap transition-all ${
+              className={`px-4 py-2 rounded-none text-sm font-semibold whitespace-nowrap transition-all ${
                 activeCategory === cat
                   ? "bg-blue-600 text-white shadow-md shadow-blue-600/30"
                   : "bg-white text-slate-600 border border-slate-200 hover:border-blue-300 hover:bg-blue-50"
@@ -118,7 +118,7 @@ export default function ExploreResourcesPage() {
       )}
 
       {!loading && filteredResources.length === 0 && (
-        <div className="max-w-3xl mx-auto text-center py-20 bg-white rounded-3xl border border-slate-200 mt-8">
+        <div className="max-w-3xl mx-auto text-center py-20 bg-white rounded-none border border-slate-200 mt-8">
           <p className="text-slate-500 text-lg font-medium">No resources found in this category.</p>
         </div>
       )}
diff --git a/app/forgot-password/page.tsx b/app/forgot-password/page.tsx
index 316af41..fc9043d 100644
--- a/app/forgot-password/page.tsx
+++ b/app/forgot-password/page.tsx
@@ -18,14 +18,14 @@ import { sendPasswordResetEmail } from "firebase/auth";
 import { auth } from "@/lib/firebase";
 
 function Orb({ className }: { className: string }) {
-    return <div className={`absolute rounded-full blur-3xl opacity-20 animate-pulse ${className}`} />;
+    return <div className={`absolute rounded-none blur-3xl opacity-20 animate-pulse ${className}`} />;
 }
 
 /* step indicator shown on left panel */
 function Step({ num, title, desc, active }: { num: string; title: string; desc: string; active?: boolean }) {
     return (
         <div className="flex items-start gap-4">
-            <div className={`w-9 h-9 rounded-full flex items-center justify-center shrink-0 border transition-all ${active ? "bg-blue-500/30 border-blue-400/60" : "bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10"}`}>
+            <div className={`w-9 h-9 rounded-none flex items-center justify-center shrink-0 border transition-all ${active ? "bg-blue-500/30 border-blue-400/60" : "bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10"}`}>
                 <span className={`text-xs font-black ${active ? "text-blue-300" : "text-slate-500"}`}>{num}</span>
             </div>
             <div className="pt-1">
@@ -85,7 +85,7 @@ export default function ForgotPasswordPage() {
 
             {/* ══════════════ LEFT PANEL ══════════════ */}
             <div className="hidden lg:flex lg:w-[48%] relative flex-col justify-between p-14 overflow-hidden">
-                <div className="absolute inset-0 bg-gradient-to-br from-[#0D1B3E] via-[#0a1530] to-[#080E1E]" />
+                <div className="absolute inset-0 bg-card from-[#0D1B3E] via-[#0a1530] to-[#080E1E]" />
                 <Orb className="w-80 h-80 bg-blue-600 -top-20 -right-10" />
                 <Orb className="w-64 h-64 bg-indigo-500 bottom-20 -left-10" />
                 <Orb className="w-40 h-40 bg-sky-400 top-1/2 left-1/2" />
@@ -109,7 +109,7 @@ export default function ForgotPasswordPage() {
 
                 {/* top badge */}
                 <div className="relative z-10">
-                    <div className="inline-flex items-center gap-2 bg-slate-100 dark:bg-white/10 backdrop-blur border border-slate-300 dark:border-white/20 rounded-full px-4 py-2">
+                    <div className="inline-flex items-center gap-2 bg-slate-100 dark:bg-white/10  border border-slate-300 dark:border-white/20 rounded-none px-4 py-2">
                         <ShieldCheck className="w-4 h-4 text-blue-300" />
                         <span className="text-white/80 text-xs font-semibold tracking-wide">Secure Account Recovery</span>
                     </div>
@@ -120,7 +120,7 @@ export default function ForgotPasswordPage() {
                     <div>
                         <h2 className="text-5xl font-black text-white leading-[1.1] tracking-tight mb-5">
                             Regain<br />
-                            <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-300 to-sky-200">
+                            <span className="text-transparent bg-clip-text bg-card  ">
                                 Your Access.
                             </span>
                         </h2>
@@ -140,7 +140,7 @@ export default function ForgotPasswordPage() {
 
             {/* ══════════════ RIGHT PANEL ══════════════ */}
             <div className="flex w-full lg:w-[52%] flex-col items-center justify-center p-8 sm:p-12 relative">
-                <div className="absolute inset-0 bg-gradient-to-b from-[#0D1428] to-[#080E1E]" />
+                <div className="absolute inset-0 bg-card from-[#0D1428] to-[#080E1E]" />
                 <Orb className="w-64 h-64 bg-blue-700 bottom-0 right-0 opacity-10" />
 
                 <div className="relative z-10 w-full max-w-sm">
@@ -156,18 +156,18 @@ export default function ForgotPasswordPage() {
 
                     {/* ── SUCCESS STATE ── */}
                     {success ? (
-                        <div className="animate-in fade-in slide-in-from-bottom-4 duration-500">
+                        <div className="animate-in fade-in slide-in- duration-500">
                             {/* icon */}
                             <div className="flex justify-center mb-8">
                                 <div className="relative">
-                                    <div className="w-20 h-20 rounded-full bg-emerald-500/20 border border-emerald-500/30 flex items-center justify-center">
+                                    <div className="w-20 h-20 rounded-none bg-emerald-500/20 border border-emerald-500/30 flex items-center justify-center">
                                         <Inbox className="w-9 h-9 text-emerald-400" />
                                     </div>
-                                    <div className="absolute -top-1 -right-1 w-7 h-7 rounded-full bg-emerald-500 flex items-center justify-center shadow-lg shadow-emerald-500/40">
+                                    <div className="absolute -top-1 -right-1 w-7 h-7 rounded-none bg-emerald-500 flex items-center justify-center border-2 border-foreground shadow-[4px_4px_0_0_rgba(0,0,0,1)] dark:shadow-[4px_4px_0_0_rgba(255,255,255,0.2)] shadow-emerald-500/40">
                                         <CheckCircle2 className="w-4 h-4 text-white" />
                                     </div>
                                     {/* pulse rings */}
-                                    <div className="absolute inset-0 rounded-full border border-emerald-500/30 animate-ping" />
+                                    <div className="absolute inset-0 rounded-none border border-emerald-500/30 animate-ping" />
                                 </div>
                             </div>
 
@@ -179,7 +179,7 @@ export default function ForgotPasswordPage() {
                             </div>
 
                             {/* info card */}
-                            <div className="bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-2xl p-5 space-y-3 mb-8">
+                            <div className="bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-none p-5 space-y-3 mb-8">
                                 {[
                                     { icon: <Mail className="w-4 h-4 text-blue-400" />, text: "Check your spam/junk folder if you don't see it" },
                                     { icon: <KeyRound className="w-4 h-4 text-blue-400" />, text: "The link expires in 1 hour for security" },
@@ -194,7 +194,7 @@ export default function ForgotPasswordPage() {
 
                             <button
                                 onClick={() => setSuccess(null)}
-                                className="w-full flex items-center justify-center gap-2 border border-slate-200 dark:border-white/10 bg-slate-50 dark:bg-white/5 hover:bg-slate-100 dark:bg-white/10 text-slate-300 font-bold py-3.5 rounded-2xl transition-all group"
+                                className="w-full flex items-center justify-center gap-2 border border-slate-200 dark:border-white/10 bg-slate-50 dark:bg-white/5 hover:bg-slate-100 dark:bg-white/10 text-slate-300 font-bold py-3.5 rounded-none transition-all group"
                             >
                                 <RotateCcw className="w-4 h-4 group-hover:rotate-180 transition-transform duration-500" />
                                 Resend Email
@@ -205,8 +205,8 @@ export default function ForgotPasswordPage() {
                         /* ── FORM STATE ── */
                         <div className="animate-in fade-in duration-300">
                             <div className="mb-10">
-                                <div className="inline-flex items-center gap-2 bg-blue-500/10 border border-blue-500/20 rounded-full px-3 py-1 mb-5">
-                                    <div className="w-2 h-2 bg-blue-400 rounded-full animate-pulse" />
+                                <div className="inline-flex items-center gap-2 bg-blue-500/10 border border-blue-500/20 rounded-none px-3 py-1 mb-5">
+                                    <div className="w-2 h-2 bg-blue-400 rounded-none animate-pulse" />
                                     <span className="text-blue-300 text-xs font-semibold">Account Recovery</span>
                                 </div>
                                 <h1 className="text-3xl font-black text-white tracking-tight mb-2">Reset Password</h1>
@@ -232,14 +232,14 @@ export default function ForgotPasswordPage() {
                                             onBlur={() => setFocusedField(false)}
                                             placeholder="name@university.ac.lk"
                                             disabled={loading}
-                                            className="block w-full pl-11 pr-4 py-3.5 bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-2xl text-sm font-semibold text-white placeholder-slate-600 focus:outline-none focus:ring-2 focus:ring-blue-500/40 focus:border-blue-500/60 focus:bg-white/8 transition-all disabled:opacity-40"
+                                            className="block w-full pl-11 pr-4 py-3.5 bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-none text-sm font-semibold text-white placeholder-slate-600 focus:outline-none focus:ring-2 focus:ring-blue-500/40 focus:border-blue-500/60 focus:bg-white/8 transition-all disabled:opacity-40"
                                         />
                                     </div>
                                 </div>
 
                                 {/* Error */}
                                 {error && (
-                                    <div className="flex items-center gap-3 bg-red-500/10 border border-red-500/20 p-4 rounded-2xl animate-in fade-in slide-in-from-top-2 duration-200">
+                                    <div className="flex items-center gap-3 bg-red-500/10 border border-red-500/20 p-4 rounded-none animate-in fade-in slide-in- duration-200">
                                         <AlertCircle className="w-4 h-4 text-red-400 shrink-0" />
                                         <p className="text-sm font-semibold text-red-400 leading-tight">{error}</p>
                                     </div>
@@ -254,11 +254,11 @@ export default function ForgotPasswordPage() {
                                 <button
                                     type="submit"
                                     disabled={loading}
-                                    className="w-full relative overflow-hidden bg-gradient-to-r from-blue-600 to-blue-500 hover:from-blue-500 hover:to-blue-400 text-white font-bold py-4 rounded-2xl transition-all duration-300 shadow-lg shadow-blue-500/20 hover:shadow-blue-500/40 hover:shadow-xl active:scale-[0.98] disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2 group"
+                                    className="w-full relative overflow-hidden bg-card   hover: hover: text-white font-bold py-4 rounded-none transition-all duration-300 border-2 border-foreground shadow-[4px_4px_0_0_rgba(0,0,0,1)] dark:shadow-[4px_4px_0_0_rgba(255,255,255,0.2)] shadow-blue-500/20 hover:shadow-blue-500/40 hover:border-2 border-foreground shadow-[4px_4px_0_0_rgba(0,0,0,1)] dark:shadow-[4px_4px_0_0_rgba(255,255,255,0.2)] active:scale-[0.98] disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2 group"
                                 >
-                                    <div className="absolute inset-0 bg-gradient-to-r from-white/0 via-white/10 to-white/0 translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-700 skew-x-12" />
+                                    <div className="absolute inset-0 bg-card    translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-700 skew-x-12" />
                                     {loading ? (
-                                        <div className="h-5 w-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
+                                        <div className="h-5 w-5 border-2 border-white/30 border-t-white rounded-none animate-spin" />
                                     ) : (
                                         <>
                                             Send Reset Link
diff --git a/app/globals.css b/app/globals.css
index 4f653e3..daaa1ed 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,9 +1,37 @@
 @import "tailwindcss";
+
 @variant dark (&:where(.dark, .dark *));
+
+/*
+ * URMS LIGHT BLUE DESIGN SYSTEM
+ * bg-base      : #F8FAFC  (Slate 50)
+ * surface      : #FFFFFF
+ * border       : #E2E8F0  (Slate 200)
+ * primary      : #0EA5E9  (Sky 500)
+ * primary-dark : #0284C7  (Sky 600)
+ * teal         : #0D9488  (Teal 600 - Main Accent)
+ * teal-light   : #CCFBF1  (Teal 100)
+ * ink-main     : #0F172A  (Slate 900)
+ * ink-muted    : #64748B  (Slate 500)
+ */
+
 @theme {
-  --color-brand-primary: #7C3AED;
-  --color-brand-secondary: #6D28D9;
-  --color-brand-accent: #8B5CF6;
+  /* ── URMS Light Blue Design Tokens ── */
+  --color-brand-primary: #0EA5E9;
+  --color-brand-secondary: #0284C7;
+  --color-brand-accent: #F0F9FF;
+  --color-brand-soft-blue: #E0F2FE;
+  --color-brand-very-light-blue: #F0F9FF;
+  --color-brand-dark-text: #0F172A;
+  --color-brand-primary-text: #0F172A;
+  --color-brand-secondary-text: #64748B;
+  --color-brand-muted-text: #94A3B8;
+  --color-brand-border: #E2E8F0;
+
+  /* Teal accent */
+  --color-brand-teal: #0D9488;
+  --color-brand-teal-light: #CCFBF1;
+
   --color-brand-success: #10B981;
   --color-brand-warning: #F59E0B;
   --color-brand-danger: #EF4444;
@@ -13,42 +41,218 @@
   --color-card: var(--card);
   --color-border: var(--border);
 
-  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
+  --font-sans: var(--font-sans), ui-sans-serif, system-ui, sans-serif;
+  --font-heading: var(--font-heading), ui-sans-serif, system-ui, sans-serif;
 }
 
 @layer base {
   :root {
-    --background: #fafafb; /* Clean premium gray-white */
-    --foreground: #09090b; /* High contrast dark text */
-    --card: #ffffff;
-    --border: #e2e8f0; /* slate-200 */
-    --ring: #7c3aed;
+    --background: #F8FAFC;
+    --foreground: #0F172A;
+    --card: #FFFFFF;
+    --border: #E2E8F0;
+    --ring: #0EA5E9;
   }
 
   .dark {
-    --background: #09070f; /* Deep purple-tinted dark */
-    --foreground: #f8fafc;
-    --card: rgba(18, 14, 28, 0.7); /* Frosted dark purple card */
-    --border: rgba(139, 92, 246, 0.15); /* Soft violet border */
-    --ring: #8b5cf6;
+    --background: #0B111E;
+    --foreground: #E2E8F0;
+    --card: #151E2E;
+    --border: #243145;
+    --ring: #0EA5E9;
   }
 
   * {
-    @apply border-border transition-colors duration-300;
+    @apply border-border;
+    transition: background-color 0.2s ease-out, border-color 0.2s ease-out, text-decoration-color 0.2s ease-out, fill 0.2s ease-out, stroke 0.2s ease-out;
   }
 
   body {
-    @apply antialiased bg-background text-foreground;
+    @apply antialiased bg-background text-foreground font-sans;
+    background-image: linear-gradient(135deg, #F8FAFC 0%, #F0F9FF 100%);
+    background-attachment: fixed;
+  }
+
+  .dark body, body:where(.dark *) {
+    background-image: linear-gradient(135deg, #0B111E 0%, #151E2E 100%) !important;
+    background-attachment: fixed;
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    @apply font-heading tracking-tight;
+    color: var(--foreground);
+  }
+
+  /* Smooth interactions for interactive elements */
+  button, a, [role="button"], input, select, textarea {
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   }
 }
 
 @layer utilities {
   .glass {
-    @apply bg-card backdrop-blur-xl border border-border shadow-xl;
+    @apply backdrop-blur-md bg-white/75 dark:bg-[#151E2E]/80 border border-white/20 dark:border-white/10 shadow-lg;
   }
   
-  /* High contrast text utilities for metadata */
   .text-meta {
-    @apply text-foreground/60 font-black uppercase tracking-widest text-[10px];
+    @apply text-foreground/80 font-bold uppercase tracking-widest text-[10px];
+  }
+
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+  .no-scrollbar {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+
+  /* --- Global Design System Overrides --- */
+
+  /* Force rounded containers and cards */
+  .rounded-none,
+  div[class*="rounded-none"] {
+    border-radius: 20px !important;
+  }
+
+  /* Large panels and modals */
+  div[class*="rounded-[2rem]"],
+  div[class*="rounded-2xl"],
+  div[class*="rounded-3xl"] {
+    border-radius: 24px !important;
+  }
+
+  /* Inputs rounding */
+  input[class*="rounded-none"],
+  select[class*="rounded-none"],
+  textarea[class*="rounded-none"],
+  input, select, textarea {
+    border-radius: 12px !important;
+  }
+
+  /* Buttons rounding */
+  button[class*="rounded-none"],
+  a[class*="rounded-none"],
+  button, a {
+    border-radius: 12px !important;
+  }
+
+  /* Small status badges / dots */
+  span[class*="rounded-none"],
+  span[class*="rounded-md"] {
+    border-radius: 8px !important;
+  }
+
+  /* Eliminate brutalist borders and hard shadows — use Sky-tinted shadows */
+  [class*="shadow-[4px_4px_"], 
+  [class*="shadow-[8px_8px_"],
+  [class*="shadow-sm"],
+  [class*="shadow-md"],
+  [class*="shadow-lg"] {
+    box-shadow: 0 8px 30px rgba(14, 165, 233, 0.06) !important;
+    border-width: 1px !important;
+    border-color: var(--border) !important;
+  }
+
+  .dark [class*="shadow-[4px_4px_"], 
+  .dark [class*="shadow-[8px_8px_"] {
+    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25) !important;
+    border-color: var(--border) !important;
+  }
+
+  /* Target thick borders and soften them */
+  .border-2.border-foreground, 
+  .border-2.border-current,
+  .border-foreground,
+  [class*="border-foreground"],
+  [class*="border-2"] {
+    border-width: 1px !important;
+    border-color: var(--border) !important;
+  }
+
+  /* Custom Card Styling overrides for elevation and consistency */
+  .bg-card, 
+  div[class*="bg-card"], 
+  div[class*="bg-white"][class*="shadow"],
+  div[class*="bg-slate-900"][class*="shadow"] {
+    background: var(--card) !important;
+    border: 1px solid var(--border) !important;
+    box-shadow: 0 8px 30px rgba(14, 165, 233, 0.05) !important;
+    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
+  }
+
+  .bg-card:hover, 
+  div[class*="bg-card"]:hover {
+    transform: translateY(-3px) !important;
+    box-shadow: 0 12px 35px rgba(30, 80, 120, 0.09) !important;
+  }
+
+  .dark .bg-card:hover, 
+  .dark div[class*="bg-card"]:hover {
+    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.35) !important;
+  }
+
+  /* Form controls focus styling overrides */
+  input, select, textarea {
+    background: var(--card) !important;
+    border: 1px solid var(--border) !important;
+    color: var(--foreground) !important;
+    font-weight: 500 !important;
+  }
+
+  input:focus, select:focus, textarea:focus {
+    border-color: var(--color-brand-primary) !important;
+    box-shadow: 0 0 0 3px rgba(22, 119, 232, 0.12) !important;
+    outline: none !important;
+  }
+
+  /* Flat button styles overrides to look modern SaaS style */
+  button[class*="bg-brand-primary"],
+  a[class*="bg-brand-primary"],
+  button[class*="bg-foreground"],
+  a[class*="bg-foreground"] {
+    background-color: var(--color-brand-primary) !important;
+    color: #FFFFFF !important;
+    border: none !important;
+    font-weight: 650 !important;
+    box-shadow: 0 4px 14px rgba(22, 119, 232, 0.15) !important;
+  }
+
+  button[class*="bg-brand-primary"]:hover,
+  a[class*="bg-brand-primary"]:hover,
+  button[class*="bg-foreground"]:hover,
+  a[class*="bg-foreground"]:hover {
+    background-color: var(--color-brand-secondary) !important;
+    transform: translateY(-1px) !important;
+    box-shadow: 0 6px 20px rgba(22, 119, 232, 0.25) !important;
+  }
+
+  /* Table styling overrides */
+  table {
+    border-radius: 12px !important;
+    overflow: hidden !important;
+    background: var(--card) !important;
+  }
+
+  thead tr {
+    background-color: var(--color-brand-very-light-blue) !important;
+    color: var(--color-brand-primary-text) !important;
+    border-bottom: 1px solid var(--border) !important;
+  }
+
+  .dark thead tr {
+    background-color: rgba(22, 119, 232, 0.08) !important;
+    color: var(--foreground) !important;
+  }
+
+  tbody tr {
+    border-bottom: 1px solid var(--border) !important;
+  }
+
+  tbody tr:hover {
+    background-color: rgba(22, 119, 232, 0.02) !important;
+  }
+
+  .dark tbody tr:hover {
+    background-color: rgba(255, 255, 255, 0.01) !important;
   }
 }
\ No newline at end of file
diff --git a/app/icon.png b/app/icon.png
index aa9666d..00458b4 100644
Binary files a/app/icon.png and b/app/icon.png differ
diff --git a/app/layout.tsx b/app/layout.tsx
index f1085c4..60601c9 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,12 +1,28 @@
 import type { Metadata } from "next";
+import { Plus_Jakarta_Sans, Inter } from "next/font/google";
 import "./globals.css";
 import { AuthProvider } from "@/lib/auth-context";
 import { ThemeProvider } from "@/components/ThemeProvider";
 import LayoutShell from "@/components/LayoutShell";
 
+const plusJakartaSans = Plus_Jakarta_Sans({
+  subsets: ["latin"],
+  variable: "--font-heading",
+});
+
+const inter = Inter({
+  subsets: ["latin"],
+  variable: "--font-sans",
+});
+
 export const metadata: Metadata = {
   title: "UniLink | Campus Resource Hub",
   description: "Centralized Resource Management System for University Faculties",
+  icons: {
+    icon: "/logo1.png",
+    shortcut: "/logo1.png",
+    apple: "/logo1.png",
+  },
 };
 
 export default function RootLayout({
@@ -15,12 +31,12 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="en" className="h-full" suppressHydrationWarning>
-      <body className="h-full flex flex-col scroll-smooth selection:bg-brand-primary/20">
+    <html lang="en" className={`h-full ${plusJakartaSans.variable} ${inter.variable}`} suppressHydrationWarning>
+      <body className="h-full flex flex-col scroll-smooth font-sans selection:bg-brand-primary/20">
         <ThemeProvider
           attribute="class"
-          defaultTheme="dark"
-          enableSystem
+          defaultTheme="light"
+          enableSystem={false}
           disableTransitionOnChange
         >
           <AuthProvider>
diff --git a/app/login/page.tsx b/app/login/page.tsx
index fc4d81c..42dfc11 100644
--- a/app/login/page.tsx
+++ b/app/login/page.tsx
@@ -1,493 +1,761 @@
 "use client";
 
-import { useState, useEffect, FormEvent } from "react";
-import { useRouter } from "next/navigation";
+import React, { useState, useEffect, FormEvent, Suspense } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
 import Link from "next/link";
-import { 
-  AtSign, 
-  Lock, 
-  Eye, 
-  EyeOff, 
-  ArrowRight, 
-  AlertCircle, 
-  Sparkles, 
-  Shield, 
-  Zap, 
-  Users, 
-  ChevronLeft,
-  LayoutDashboard,
-  Calendar,
-  Building2,
-  Wrench,
-  TrendingUp,
-  Settings,
-  Bell,
-  Search,
-  Activity,
-  ArrowUpRight,
-  ShieldCheck,
+import {
+  AtSign,
+  Lock,
+  Eye,
+  EyeOff,
+  ArrowRight,
+  AlertCircle,
+  User,
+  BadgeCheck,
+  ChevronDown,
+  Sparkles,
   CheckCircle2,
-  Clock
+  Building2,
+  ChevronLeft,
+  Shield,
+  Zap,
+  Users,
 } from "lucide-react";
 import { useAuth } from "@/lib/auth-context";
 import { auth } from "@/lib/firebase";
-import { signOut as firebaseSignOut } from "firebase/auth";
-import { motion } from "framer-motion";
+import {
+  signOut as firebaseSignOut,
+  createUserWithEmailAndPassword,
+  updateProfile,
+  signOut,
+} from "firebase/auth";
+import { motion, AnimatePresence } from "framer-motion";
 import { BASE_URL as API_BASE } from "@/lib/apiClient";
 
-export default function LoginPage() {
-  const { signIn, setMockUser } = useAuth();
+/*
+ * URMS LIGHT BLUE DESIGN SYSTEM
+ * bg-base      : #F8FAFC  surface: #FFFFFF  border: #E2E8F0
+ * primary      : #0EA5E9  primary-dark: #0284C7
+ * teal         : #0D9488  teal-light: #CCFBF1
+ * ink-main     : #0F172A  ink-muted: #64748B
+ */
+
+/* ── Password Strength ── */
+function PasswordStrength({ password }: { password: string }) {
+  const strength =
+    password.length === 0 ? 0
+    : password.length < 6 ? 1
+    : password.length < 8 ? 2
+    : /[A-Z]/.test(password) && /[0-9]/.test(password) ? 4
+    : 3;
+
+  const labels = ["", "Weak", "Fair", "Good", "Strong"];
+  const bars   = ["", "bg-rose-400", "bg-amber-400", "bg-sky-400", "bg-teal-500"];
+  const texts  = ["", "text-rose-500", "text-amber-500", "text-sky-500", "text-teal-600"];
+
+  if (!password) return null;
+  return (
+    <div className="mt-2 space-y-1">
+      <div className="flex gap-1">
+        {[1, 2, 3, 4].map((i) => (
+          <div
+            key={i}
+            className={`h-1 flex-1 rounded-full transition-all duration-500 ${
+              i <= strength ? bars[strength] : "bg-[#E2E8F0]"
+            }`}
+          />
+        ))}
+      </div>
+      <p className={`text-[10px] font-semibold ${texts[strength]}`}>
+        {labels[strength]} password
+      </p>
+    </div>
+  );
+}
+
+/* ── Floating stat card for the branding panel ── */
+function StatCard({
+  icon: Icon,
+  value,
+  label,
+  delay,
+}: {
+  icon: React.ElementType;
+  value: string;
+  label: string;
+  delay: number;
+}) {
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 16 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ delay, duration: 0.5, ease: "easeOut" }}
+      className="flex items-center gap-3 bg-white/10 backdrop-blur-sm border border-white/20 rounded-2xl px-4 py-3"
+    >
+      <span className="flex h-8 w-8 items-center justify-center rounded-xl bg-white/15">
+        <Icon className="h-4 w-4 text-white" />
+      </span>
+      <div>
+        <p className="text-[15px] font-bold text-white leading-none">{value}</p>
+        <p className="text-[10px] text-white/60 mt-0.5">{label}</p>
+      </div>
+    </motion.div>
+  );
+}
+
+/* ── Main Auth Content ── */
+function AuthContent() {
   const router = useRouter();
+  const searchParams = useSearchParams();
+  const initialMode = searchParams.get("mode") === "register" ? false : true;
 
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-  const [showPassword, setShowPassword] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [loading, setLoading] = useState(false);
-  const [focusedField, setFocusedField] = useState<string | null>(null);
-  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
-  const [currentTime, setCurrentTime] = useState("");
+  const [isLogin, setIsLogin] = useState(initialMode);
+  const { signIn, user, loading: authLoading } = useAuth();
+
+  const [email, setEmail]                 = useState("");
+  const [password, setPassword]           = useState("");
+  const [showPassword, setShowPassword]   = useState(false);
+  const [loading, setLoading]             = useState(false);
+  const [error, setError]                 = useState<string | null>(null);
+  const [success, setSuccess]             = useState<string | null>(null);
+  const [fullName, setFullName]           = useState("");
+  const [role, setRole]                   = useState("");
+  const [department, setDepartment]       = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
 
   useEffect(() => {
-    const handleMouseMove = (e: MouseEvent) => {
-      setMousePosition({ x: e.clientX, y: e.clientY });
-    };
-    window.addEventListener("mousemove", handleMouseMove);
-
-    const updateTime = () => {
-      const now = new Date();
-      setCurrentTime(now.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", second: "2-digit" }));
-    };
-    updateTime();
-    const clockInterval = setInterval(updateTime, 1000);
-
-    return () => {
-      window.removeEventListener("mousemove", handleMouseMove);
-      clearInterval(clockInterval);
-    };
-  }, []);
-
-  const handleSubmit = async (e: FormEvent) => {
+    if (!authLoading && user && isLogin) router.push("/dashboard");
+  }, [user, authLoading, router, isLogin]);
+
+  const toggleMode = (loginMode: boolean) => {
+    setError(null);
+    setSuccess(null);
+    setIsLogin(loginMode);
+    const url = new URL(window.location.href);
+    if (loginMode) url.searchParams.delete("mode");
+    else url.searchParams.set("mode", "register");
+    window.history.pushState({}, "", url.toString());
+  };
+
+  const handleLoginSubmit = async (e: FormEvent) => {
     e.preventDefault();
     setError(null);
     setLoading(true);
     try {
       await signIn(email, password);
-
-      // Secondary bcrypt verification against stored hash
       try {
         const token = await auth?.currentUser?.getIdToken();
         if (token) {
-          const verifyResponse = await fetch(
-            `${API_BASE}/users/verify-password`,
-            {
-              method: "POST",
-              headers: {
-                "Content-Type": "application/json",
-                Authorization: `Bearer ${token}`,
-              },
-              body: JSON.stringify({ email, password }),
-            }
-          );
+          const verifyResponse = await fetch(`${API_BASE}/users/verify-password`, {
+            method: "POST",
+            headers: { "Content-Type": "application/json", Authorization: `Bearer ${token}` },
+            body: JSON.stringify({ email, password }),
+          });
           if (verifyResponse.ok) {
-            const verifyData = await verifyResponse.json();
-            if (verifyData.valid === false) {
-              // Bcrypt hash mismatch — sign out and block login
+            const data = await verifyResponse.json();
+            if (data.valid === false) {
               if (auth) await firebaseSignOut(auth);
               setError("Password verification failed. Please reset your password.");
               setLoading(false);
               return;
             }
           }
-          // If verify endpoint is unreachable, we allow login (graceful degradation)
         }
-      } catch (verifyErr) {
-        // If bcrypt verification call fails, allow login but log a warning
-        console.warn("Bcrypt verification endpoint unreachable. Proceeding with Firebase auth only.", verifyErr);
+      } catch {
+        // bcrypt endpoint optional
       }
-
       router.push("/dashboard");
     } catch (err: unknown) {
       if (err instanceof Error) {
-        if (err.message.includes("wrong-password") || err.message.includes("invalid-credential")) {
+        if (err.message.includes("wrong-password") || err.message.includes("invalid-credential"))
           setError("Incorrect email or password.");
-        } else if (err.message.includes("user-not-found")) {
+        else if (err.message.includes("user-not-found"))
           setError("No account found with that email.");
-        } else if (err.message.includes("too-many-requests")) {
-          setError("Too many failed attempts. Try again later.");
-        } else {
-          setError("Sign-in failed. Please try again.");
-        }
-      } else {
-        setError("An unexpected error occurred.");
-      }
+        else if (err.message.includes("too-many-requests"))
+          setError("Too many attempts. Please try again later.");
+        else setError("Sign-in failed. Please try again.");
+      } else setError("An unexpected error occurred.");
     } finally {
       setLoading(false);
     }
   };
 
-  const handleDemoClick = async (role: "admin" | "maintenance" | "lecturer" | "student") => {
+  const handleRegisterSubmit = async (e: FormEvent) => {
+    e.preventDefault();
     setError(null);
+    setSuccess(null);
+    if (!fullName || !email || !role || !department || !password || !confirmPassword) {
+      setError("All fields are required.");
+      return;
+    }
+    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+      setError("Please enter a valid email address.");
+      return;
+    }
+    if (password.length < 8) {
+      setError("Password must be at least 8 characters.");
+      return;
+    }
+    if (password !== confirmPassword) {
+      setError("Passwords do not match.");
+      return;
+    }
     setLoading(true);
     try {
-      const email = `${role}@demo.lk`;
-      const password = "Password123";
-      
-      if (auth) {
-        await signIn(email, password);
-        try {
-          const token = await auth.currentUser?.getIdToken();
-          if (token) {
-            await fetch(
-              `${API_BASE}/users/verify-password`,
-              {
-                method: "POST",
-                headers: {
-                  "Content-Type": "application/json",
-                  Authorization: `Bearer ${token}`,
-                },
-                body: JSON.stringify({ email, password }),
-              }
-            );
-          }
-        } catch (verifyErr) {
-          console.warn("Bcrypt verification failed:", verifyErr);
-        }
-      } else {
-        // Fallback to mock user if Firebase is not initialized
-        setMockUser(role);
-      }
-      router.push("/dashboard");
-    } catch (err: any) {
-      if (role !== "admin" && (err.message.includes("user-not-found") || err.message.includes("invalid-credential"))) {
-        setError(`Demo ${role} user does not exist. Please log in as Admin (admin@demo.lk / Password123) and create this user via the User Management panel.`);
-      } else {
-        setError(`Demo login failed: ${err.message}`);
+      if (!auth) throw new Error("Auth service unavailable.");
+      const cred = await createUserWithEmailAndPassword(auth, email, password);
+      if (fullName.trim()) await updateProfile(cred.user, { displayName: fullName.trim() });
+      const token = await cred.user.getIdToken();
+      const res = await fetch(`${API_BASE}/users/register`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json", Authorization: `Bearer ${token}` },
+        body: JSON.stringify({
+          name: fullName.trim(),
+          email: email.toLowerCase(),
+          role: role.toLowerCase(),
+          department,
+          password,
+        }),
+      });
+      if (!res.ok) {
+        const errData = await res.json().catch(() => ({}));
+        throw new Error(errData.message || "Failed to save registration.");
       }
+      if (auth) await signOut(auth);
+      const isStudent = role.toLowerCase() === "student";
+      setSuccess(
+        isStudent
+          ? "Account created successfully! You can now sign in."
+          : "Account created! Pending admin approval."
+      );
+      setTimeout(() => toggleMode(true), 2500);
+    } catch (err: unknown) {
+      if (err instanceof Error) {
+        const code = (err as { code?: string }).code ?? "";
+        if (code.includes("email-already-in-use"))
+          setError("An account with this email already exists.");
+        else if (code.includes("weak-password"))
+          setError("Password is too weak. Use at least 8 characters.");
+        else setError(err.message || "Registration failed. Please try again.");
+      } else setError("An unexpected error occurred.");
     } finally {
       setLoading(false);
     }
   };
 
+  /* ── shared input class ── */
+  const inputCls =
+    "w-full bg-[#F8FAFC] border border-[#E2E8F0] rounded-xl pl-10 pr-4 py-3 text-[13px] text-[#0F172A] placeholder-[#94A3B8] focus:outline-none focus:border-[#0EA5E9] focus:ring-2 focus:ring-[#0EA5E9]/15 transition-all duration-200 disabled:opacity-50";
+
   return (
-    <div className="min-h-screen w-full bg-slate-50 dark:bg-slate-950 text-slate-900 dark:text-slate-100 overflow-hidden relative flex items-center justify-center">
-      
-      {/* Premium Cursor Highlight */}
+    <div className="min-h-screen bg-[#F8FAFC] flex overflow-hidden selection:bg-[#0EA5E9]/20">
+
+      {/* ════════════════ LEFT BRANDING PANEL ════════════════ */}
       <motion.div
-        className="pointer-events-none fixed inset-0 z-40 transition-opacity duration-300 hidden lg:block"
-        animate={{
-          background: `radial-gradient(800px circle at ${mousePosition.x}px ${mousePosition.y}px, rgba(124, 58, 237, 0.05), transparent 45%)`
+        initial={{ x: -60, opacity: 0 }}
+        animate={{ x: 0, opacity: 1 }}
+        transition={{ duration: 0.6, ease: "easeOut" }}
+        className="hidden lg:flex lg:w-[52%] relative flex-col items-center justify-center overflow-hidden"
+        style={{
+          background: "linear-gradient(135deg, #0F172A 0%, #0c2340 45%, #0D9488 100%)",
         }}
-      />
-
-      {/* BACKGROUND MOCKUP: Live simulated UniLink Dashboard (Visible only on Desktop for richness) */}
-      <div className="absolute inset-0 z-0 pointer-events-none select-none opacity-35 dark:opacity-20 hidden lg:flex">
-        
-        {/* Mock Sidebar */}
-        <div className="w-64 border-r border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900/60 p-6 flex flex-col justify-between">
-          <div className="space-y-8">
-            <div className="flex items-center gap-3">
-              <div className="h-9 w-9 rounded-xl bg-gradient-to-tr from-brand-primary to-indigo-600 flex items-center justify-center">
-                <Sparkles className="w-5 h-5 text-white" />
-              </div>
-              <span className="font-black text-lg tracking-tight text-slate-900 dark:text-white">UniLink</span>
-            </div>
-            
-            <div className="space-y-1">
-              {[
-                { name: "Dashboard", icon: <LayoutDashboard className="w-4 h-4" />, active: true },
-                { name: "Bookings", icon: <Calendar className="w-4 h-4" /> },
-                { name: "Resources", icon: <Building2 className="w-4 h-4" /> },
-                { name: "Maintenance", icon: <Wrench className="w-4 h-4" /> },
-                { name: "Analytics", icon: <TrendingUp className="w-4 h-4" /> },
-                { name: "Settings", icon: <Settings className="w-4 h-4" /> }
-              ].map((item, idx) => (
-                <div 
-                  key={idx} 
-                  className={`flex items-center gap-3 px-4 py-3 rounded-2xl text-xs font-bold transition-all ${
-                    item.active 
-                      ? "text-brand-primary bg-brand-primary/10" 
-                      : "text-slate-500 dark:text-slate-400"
-                  }`}
-                >
-                  {item.icon}
-                  <span>{item.name}</span>
-                </div>
-              ))}
-            </div>
-          </div>
-          
-          <div className="p-4 rounded-2xl bg-slate-50 dark:bg-slate-800/40 flex items-center gap-3">
-            <div className="h-8 w-8 rounded-full bg-slate-200 dark:bg-slate-700" />
-            <div>
-              <p className="text-[10px] font-black uppercase text-slate-400">Gateway Standby</p>
-              <p className="text-xs font-bold text-slate-600 dark:text-slate-350">Authorization Req.</p>
-            </div>
-          </div>
+      >
+        {/* Decorative blobs */}
+        <div className="pointer-events-none absolute inset-0 overflow-hidden">
+          <div className="absolute -top-32 -right-32 h-96 w-96 rounded-full bg-[#0EA5E9]/20 blur-3xl" />
+          <div className="absolute -bottom-32 -left-32 h-80 w-80 rounded-full bg-[#0D9488]/30 blur-3xl" />
+          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 h-64 w-64 rounded-full bg-white/[0.03] blur-2xl" />
         </div>
 
-        {/* Mock Main Dashboard View */}
-        <div className="flex-1 flex flex-col">
-          {/* Topbar */}
-          <div className="h-16 border-b border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900/60 px-8 flex items-center justify-between">
-            <div className="flex items-center gap-3 w-80 py-2 px-4 rounded-xl bg-slate-100 dark:bg-slate-800/40 border border-slate-200/50 dark:border-slate-700/50">
-              <Search className="w-4 h-4 text-slate-400" />
-              <span className="text-xs text-slate-450 dark:text-slate-400">Search spaces, lecturers, faculties...</span>
-            </div>
-            
-            <div className="flex items-center gap-6">
-              <div className="flex items-center gap-1.5 text-xs font-black uppercase tracking-wider text-brand-primary bg-brand-primary/10 px-3 py-1.5 rounded-lg border border-brand-primary/15">
-                <Clock className="w-3.5 h-3.5 animate-pulse" />
-                {currentTime || "19:20:00"}
-              </div>
-              <div className="relative p-2 rounded-xl bg-slate-100 dark:bg-slate-800/60 text-slate-655 dark:text-slate-400">
-                <Bell className="w-4 h-4" />
-                <span className="absolute top-1.5 right-1.5 w-2 h-2 rounded-full bg-brand-primary" />
-              </div>
-              <div className="h-8 w-8 rounded-full bg-slate-200 dark:bg-slate-700" />
-            </div>
-          </div>
+        {/* Subtle dot grid */}
+        <div
+          className="pointer-events-none absolute inset-0 opacity-[0.06]"
+          style={{
+            backgroundImage: "radial-gradient(#fff 1px, transparent 1px)",
+            backgroundSize: "28px 28px",
+          }}
+        />
 
-          {/* Dashboard Main Grid Area */}
-          <div className="p-8 space-y-6 flex-1 overflow-hidden">
-            
-            {/* Stats Row */}
-            <div className="grid grid-cols-3 gap-6">
-              {[
-                { label: "Active Room Occupancy", value: "89.2%", change: "+4.2% from peak", color: "text-brand-primary bg-brand-primary/5" },
-                { label: "Conflict Resolution Solver", value: "99.8%", change: "14 conflicts auto-resolved", color: "text-emerald-500 bg-emerald-500/5" },
-                { label: "Sensors Online Node status", value: "98.4%", change: "264 active devices online", color: "text-blue-500 bg-blue-500/5" }
-              ].map((stat, i) => (
-                <div key={i} className="p-5 rounded-3xl bg-white dark:bg-slate-900/60 border border-slate-200/80 dark:border-slate-800/80 flex flex-col justify-between h-28">
-                  <div className="flex justify-between items-start">
-                    <span className="text-[10px] font-black uppercase tracking-widest text-slate-400">{stat.label}</span>
-                    <span className={`text-[9px] font-bold px-2 py-0.5 rounded-full ${stat.color}`}>{stat.change}</span>
-                  </div>
-                  <span className="text-3xl font-black text-slate-900 dark:text-white">{stat.value}</span>
-                </div>
-              ))}
-            </div>
-
-            {/* Room Availability Matrix Grid */}
-            <div className="space-y-3">
-              <span className="text-[10px] font-black uppercase tracking-widest text-slate-400">Campus Facilities Status Monitor</span>
-              <div className="grid grid-cols-4 gap-6">
-                {[
-                  { name: "Computing Lab 01", cap: "36/40 seats", status: "Occupied", desc: "CS302 Database Lecture", border: "border-brand-primary/20", fill: "bg-brand-primary" },
-                  { name: "Lecture Theatre B", cap: "0/120 seats", status: "Vacant", desc: "Next: 2:00 PM Lecture", border: "border-emerald-500/20", fill: "bg-emerald-500" },
-                  { name: "Seminar Room 02", cap: "15/30 seats", status: "Occupied", desc: "AI Ethics Symposium", border: "border-brand-primary/20", fill: "bg-brand-primary" },
-                  { name: "IoT & Robotics Lab", cap: "0/20 seats", status: "Maintenance", desc: "AC Repair In Progress", border: "border-rose-500/20", fill: "bg-rose-500" }
-                ].map((room, i) => (
-                  <div key={i} className={`p-5 rounded-3xl bg-white dark:bg-slate-900/60 border border-slate-200/80 dark:border-slate-800/80 flex flex-col justify-between h-36 ${room.border}`}>
-                    <div className="flex justify-between items-start">
-                      <span className="font-black text-sm text-slate-900 dark:text-white truncate max-w-[130px]">{room.name}</span>
-                      <span className="text-[9px] font-bold text-slate-400">{room.cap}</span>
-                    </div>
-                    <div>
-                      <p className="text-[10px] font-semibold text-slate-500 dark:text-slate-400">{room.desc}</p>
-                      <div className="flex items-center gap-2 mt-3">
-                        <span className={`h-2 w-2 rounded-full ${room.fill}`} />
-                        <span className="text-[9px] font-black uppercase tracking-widest text-slate-600 dark:text-slate-350">{room.status}</span>
-                      </div>
-                    </div>
-                  </div>
-                ))}
-              </div>
-            </div>
-
-            {/* Simulated Live Analytics Grid */}
-            <div className="p-5 rounded-3xl bg-white dark:bg-slate-900/60 border border-slate-200/80 dark:border-slate-800/80 h-32 flex flex-col justify-between">
-              <div className="flex justify-between items-center">
-                <span className="text-[10px] font-black uppercase tracking-widest text-slate-400">Weekly Resource Allocations Telemetry</span>
-                <span className="text-[10px] font-bold text-brand-primary">Automated scheduler: Online</span>
-              </div>
-              <div className="flex items-end gap-2 h-14 pt-2">
-                {[60, 45, 80, 55, 90, 70, 85, 95, 60, 75, 85, 92, 78, 88].map((val, idx) => (
-                  <div key={idx} className="flex-1 bg-slate-100 dark:bg-slate-800 rounded-t-lg h-full relative overflow-hidden">
-                    <div className="absolute bottom-0 w-full rounded-t-lg bg-brand-primary/45" style={{ height: `${val}%` }} />
-                  </div>
-                ))}
-              </div>
-            </div>
+        {/* Content */}
+        <div className="relative z-10 flex flex-col items-center text-center px-14 max-w-lg">
+          {/* Logo */}
+          <motion.div
+            initial={{ scale: 0.8, opacity: 0 }}
+            animate={{ scale: 1, opacity: 1 }}
+            transition={{ delay: 0.2, duration: 0.5, type: "spring" }}
+            className="mb-8 flex items-center justify-center p-3 rounded-2xl bg-white/10 backdrop-blur-sm border border-white/20 shadow-xl"
+          >
+            <img src="/logo1.png" alt="UniLink Logo" className="h-12 w-auto object-contain" />
+          </motion.div>
+
+          <motion.h1
+            initial={{ y: 20, opacity: 0 }}
+            animate={{ y: 0, opacity: 1 }}
+            transition={{ delay: 0.3, duration: 0.5 }}
+            className="text-4xl font-bold text-white leading-tight tracking-tight"
+          >
+            Uni<span className="text-[#38BDF8]">Link</span>
+            <span className="block text-[13px] font-semibold text-white/40 uppercase tracking-[0.2em] mt-1">
+              URMS Platform
+            </span>
+          </motion.h1>
+
+          <motion.p
+            initial={{ y: 20, opacity: 0 }}
+            animate={{ y: 0, opacity: 1 }}
+            transition={{ delay: 0.4, duration: 0.5 }}
+            className="mt-5 text-[14px] leading-relaxed text-white/60 max-w-xs"
+          >
+            The unified campus resource management system — every lecture hall,
+            lab and seminar space, zero double-bookings.
+          </motion.p>
 
+          {/* Stat cards */}
+          <div className="mt-10 grid grid-cols-1 gap-3 w-full max-w-xs">
+            <StatCard icon={Building2} value="482" label="Campus rooms indexed" delay={0.5} />
+            <StatCard icon={Users}     value="3,200+" label="Active faculty & students" delay={0.6} />
+            <StatCard icon={Zap}       value="3.2s" label="Average booking time" delay={0.7} />
           </div>
         </div>
 
-      </div>
+        {/* Mode switch hint */}
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ delay: 0.9, duration: 0.5 }}
+          className="absolute bottom-8 left-0 right-0 text-center"
+        >
+          <p className="text-[11px] text-white/30 uppercase tracking-widest">
+            Sabaragamuwa University of Sri Lanka
+          </p>
+        </motion.div>
+      </motion.div>
 
-      {/* Semi-transparent Glassmorphic Security Overlay */}
-      <div className="absolute inset-0 z-10 bg-slate-50/50 dark:bg-slate-950/50 backdrop-blur-[6px]" />
+      {/* ════════════════ RIGHT FORM PANEL ════════════════ */}
+      <div className="flex-1 flex flex-col min-h-screen bg-white">
 
-      {/* Floating Centered Authentication portal */}
-      <motion.div 
-        initial={{ opacity: 0, scale: 0.95 }}
-        animate={{ opacity: 1, scale: 1 }}
-        transition={{ duration: 0.4 }}
-        className="w-full max-w-[460px] mx-4 bg-white/75 dark:bg-slate-900/70 border border-slate-200/80 dark:border-slate-800/80 backdrop-blur-2xl rounded-[2.5rem] shadow-2xl p-8 sm:p-10 relative z-20 space-y-6"
-      >
-        
-        {/* Back to Home Control */}
-        <div className="absolute top-6 left-6 z-30">
-          <Link 
-            href="/" 
-            className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-xl bg-slate-100/90 dark:bg-foreground/5 hover:bg-slate-200/90 dark:hover:bg-foreground/10 border border-slate-200 dark:border-border text-slate-700 dark:text-foreground/75 hover:text-foreground text-[9px] font-black uppercase tracking-wider transition-all group"
+        {/* Top bar */}
+        <div className="flex items-center justify-between px-6 py-4 border-b border-[#E2E8F0]">
+          <Link
+            href="/"
+            className="inline-flex items-center gap-1.5 text-[12px] font-medium text-[#64748B] hover:text-[#0EA5E9] transition-colors group"
           >
-            <ChevronLeft className="w-3.5 h-3.5 group-hover:-translate-x-0.5 transition-transform" />
-            Home
+            <ChevronLeft className="h-3.5 w-3.5 group-hover:-translate-x-0.5 transition-transform" />
+            Back to Home
           </Link>
-        </div>
 
-        {/* Card Header & Branding */}
-        <div className="text-center pt-4">
-          <div className="inline-flex items-center gap-2 bg-brand-primary/5 dark:bg-brand-primary/10 border border-brand-primary/15 rounded-full px-3 py-1 mb-5">
-            <span className="relative flex h-2 w-2">
-              <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-primary opacity-75"></span>
-              <span className="relative inline-flex rounded-full h-2 w-2 bg-brand-primary"></span>
-            </span>
-            <span className="text-brand-primary text-[9px] font-black uppercase tracking-widest">Secure Access Gateway</span>
+          {/* Tab switcher */}
+          <div className="flex items-center gap-1 bg-[#F8FAFC] rounded-full p-1 border border-[#E2E8F0]">
+            <button
+              onClick={() => toggleMode(true)}
+              className={`px-4 py-1.5 rounded-full text-[12px] font-semibold transition-all duration-200 ${
+                isLogin
+                  ? "bg-white text-[#0F172A] shadow-sm"
+                  : "text-[#64748B] hover:text-[#0F172A]"
+              }`}
+            >
+              Sign In
+            </button>
+            <button
+              onClick={() => toggleMode(false)}
+              className={`px-4 py-1.5 rounded-full text-[12px] font-semibold transition-all duration-200 ${
+                !isLogin
+                  ? "bg-white text-[#0F172A] shadow-sm"
+                  : "text-[#64748B] hover:text-[#0F172A]"
+              }`}
+            >
+              Register
+            </button>
           </div>
-          
-          <h1 className="text-3xl font-black text-slate-900 dark:text-white tracking-tight mb-2">
-            Welcome Back
-          </h1>
-          <p className="text-slate-500 dark:text-foreground/50 text-sm font-semibold">
-            Sign in to your institutional account
-          </p>
         </div>
 
-        {/* Credentials Form */}
-        <form onSubmit={handleSubmit} className="space-y-4" noValidate>
-          
-          {/* Email Address */}
-          <div>
-            <label htmlFor="email" className="block text-[10px] font-black uppercase tracking-widest text-slate-500 dark:text-foreground/45 mb-1.5 ml-1">
-              Institutional Email
-            </label>
-            <div className={`relative transition-all duration-255 ${focusedField === "email" ? "scale-[1.01]" : ""}`}>
-              <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
-                <AtSign className={`h-4 w-4 transition-colors ${focusedField === "email" ? "text-brand-primary" : "text-slate-400 dark:text-foreground/30"}`} />
-              </div>
-              <input
-                id="email"
-                type="email"
-                required
-                value={email}
-                onChange={(e) => setEmail(e.target.value)}
-                onFocus={() => setFocusedField("email")}
-                onBlur={() => setFocusedField(null)}
-                placeholder="name@university.ac.lk"
-                disabled={loading}
-                className="block w-full pl-11 pr-4 py-3 bg-white/50 dark:bg-slate-950/20 border border-slate-200 dark:border-border/85 rounded-2xl text-sm font-bold text-foreground placeholder-slate-400 dark:placeholder-foreground/30 focus:outline-none focus:ring-2 focus:ring-brand-primary/30 focus:border-brand-primary/50 transition-all disabled:opacity-40"
-              />
-            </div>
-          </div>
+        {/* Form area */}
+        <div className="flex-1 flex items-center justify-center px-6 py-10 overflow-y-auto">
+          <div className="w-full max-w-[420px]">
+            <AnimatePresence mode="wait">
+              {isLogin ? (
+                /* ── LOGIN FORM ── */
+                <motion.div
+                  key="login"
+                  initial={{ opacity: 0, y: 18 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  exit={{ opacity: 0, y: -18 }}
+                  transition={{ duration: 0.3, ease: "easeOut" }}
+                >
+                  {/* Heading */}
+                  <div className="mb-8">
+                    <div className="inline-flex items-center gap-2 px-3 py-1 bg-[#F0F9FF] text-[#0EA5E9] rounded-full text-[11px] font-semibold mb-4 border border-[#BAE6FD]">
+                      <Shield className="h-3 w-3" />
+                      Secure Campus Access
+                    </div>
+                    <h2 className="text-2xl font-bold text-[#0F172A] tracking-tight">
+                      Welcome back
+                    </h2>
+                    <p className="mt-1 text-[13px] text-[#64748B]">
+                      Sign in to your university account
+                    </p>
+                  </div>
 
-          {/* Password Input */}
-          <div>
-            <div className="flex items-center justify-between mb-1.5 ml-1">
-              <label htmlFor="password" className="text-[10px] font-black uppercase tracking-widest text-slate-500 dark:text-foreground/45">
-                Password
-              </label>
-              <Link 
-                href="/forgot-password" 
-                className="text-[10px] font-bold text-brand-primary hover:text-brand-secondary transition-colors"
-              >
-                Forgot Password?
-              </Link>
-            </div>
-            <div className={`relative transition-all duration-255 ${focusedField === "password" ? "scale-[1.01]" : ""}`}>
-              <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
-                <Lock className={`h-4 w-4 transition-colors ${focusedField === "password" ? "text-brand-primary" : "text-slate-400 dark:text-foreground/30"}`} />
-              </div>
-              <input
-                id="password"
-                type={showPassword ? "text" : "password"}
-                required
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                onFocus={() => setFocusedField("password")}
-                onBlur={() => setFocusedField(null)}
-                placeholder="••••••••"
-                disabled={loading}
-                className="block w-full pl-11 pr-12 py-3 bg-white/50 dark:bg-slate-950/20 border border-slate-200 dark:border-border/85 rounded-2xl text-sm font-bold text-foreground placeholder-slate-400 dark:placeholder-foreground/30 focus:outline-none focus:ring-2 focus:ring-brand-primary/30 focus:border-brand-primary/50 transition-all disabled:opacity-40"
-              />
-              <button
-                type="button"
-                onClick={() => setShowPassword(!showPassword)}
-                className="absolute inset-y-0 right-0 pr-4 flex items-center text-slate-400 dark:text-foreground/40 hover:text-brand-primary transition-colors"
-              >
-                {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
-              </button>
-            </div>
-          </div>
+                  <form onSubmit={handleLoginSubmit} className="space-y-4">
+                    {/* Email */}
+                    <div>
+                      <label className="block text-[12px] font-medium text-[#0F172A] mb-1.5">
+                        Institutional Email
+                      </label>
+                      <div className="relative">
+                        <AtSign className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[#94A3B8]" />
+                        <input
+                          type="email"
+                          required
+                          value={email}
+                          onChange={(e) => setEmail(e.target.value)}
+                          placeholder="name@university.ac.lk"
+                          disabled={loading}
+                          className={inputCls}
+                        />
+                      </div>
+                    </div>
 
-          {/* Form Error Alert */}
-          {error && (
-            <div className="flex items-center gap-3 bg-rose-500/10 border border-rose-500/20 p-4 rounded-2xl animate-in fade-in slide-in-from-top-2 duration-200">
-              <AlertCircle className="w-4.5 h-4.5 text-rose-500 shrink-0" />
-              <p className="text-xs font-bold text-rose-500 leading-tight">{error}</p>
-            </div>
-          )}
-
-          {/* Submit Button */}
-          <button
-            type="submit"
-            disabled={loading}
-            className="w-full relative overflow-hidden bg-gradient-to-r from-brand-primary to-indigo-600 hover:from-brand-secondary hover:to-indigo-500 text-white font-black py-3.5 rounded-2xl transition-all duration-300 shadow-xl shadow-brand-primary/20 hover:shadow-brand-primary/30 active:scale-[0.98] disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2 group mt-2"
-          >
-            <div className="absolute inset-0 bg-gradient-to-r from-white/0 via-white/10 to-white/0 translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-700 skew-x-12" />
-            {loading ? (
-              <div className="h-5 w-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
-            ) : (
-              <>
-                Sign In
-                <ArrowRight className="w-4 h-4 group-hover:translate-x-0.5 transition-transform" />
-              </>
-            )}
-          </button>
-        </form>
-
-        {/* Redirect to Register */}
-        <p className="text-center text-xs font-semibold text-slate-500 dark:text-foreground/50">
-          Don&apos;t have an account?{" "}
-          <Link href="/register" className="font-black text-brand-primary hover:text-brand-secondary transition-colors">
-            Create Account
-          </Link>
-        </p>
+                    {/* Password */}
+                    <div>
+                      <div className="flex items-center justify-between mb-1.5">
+                        <label className="text-[12px] font-medium text-[#0F172A]">
+                          Password
+                        </label>
+                        <Link
+                          href="/forgot-password"
+                          className="text-[11px] text-[#0EA5E9] hover:text-[#0284C7] font-medium transition-colors"
+                        >
+                          Forgot password?
+                        </Link>
+                      </div>
+                      <div className="relative">
+                        <Lock className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[#94A3B8]" />
+                        <input
+                          type={showPassword ? "text" : "password"}
+                          required
+                          value={password}
+                          onChange={(e) => setPassword(e.target.value)}
+                          placeholder="••••••••"
+                          disabled={loading}
+                          className={`${inputCls} pr-10`}
+                        />
+                        <button
+                          type="button"
+                          onClick={() => setShowPassword(!showPassword)}
+                          className="absolute right-3 top-1/2 -translate-y-1/2 text-[#94A3B8] hover:text-[#64748B] transition-colors"
+                        >
+                          {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+                        </button>
+                      </div>
+                    </div>
 
-        {/* Quick Demo Access Badges */}
-        <div className="pt-5 border-t border-slate-200/60 dark:border-border/40 space-y-4">
-          <p className="text-center text-[10px] font-black uppercase tracking-widest text-slate-500 dark:text-foreground/45">
-            Quick Operator Access
-          </p>
-          <div className="grid grid-cols-2 gap-2">
-            {(["admin", "maintenance", "lecturer", "student"] as const).map((role) => (
-              <button
-                key={role}
-                onClick={() => handleDemoClick(role)}
-                className={`flex items-center justify-between px-3.5 py-2.5 border rounded-xl transition-all hover:scale-[1.02] shadow-sm text-left group cursor-pointer ${
-                  role === "admin" ? "bg-gradient-to-r from-purple-500/10 to-indigo-500/5 border-purple-500/20 text-purple-650 dark:text-purple-300 hover:border-purple-500/40" :
-                  role === "maintenance" ? "bg-gradient-to-r from-amber-500/10 to-orange-500/5 border-amber-500/20 text-amber-650 dark:text-amber-300 hover:border-amber-500/40" :
-                  role === "lecturer" ? "bg-gradient-to-r from-emerald-500/10 to-teal-500/5 border-emerald-500/20 text-emerald-655 dark:text-emerald-300 hover:border-emerald-500/40" :
-                  "bg-gradient-to-r from-blue-500/10 to-sky-500/5 border-blue-500/20 text-blue-650 dark:text-blue-300 hover:border-blue-500/40"
-                }`}
-              >
-                <div className="flex items-center gap-2 truncate">
-                  <div className="shrink-0 text-slate-500 dark:text-foreground/45 group-hover:text-current transition-colors">
-                    {role === "admin" ? <Shield className="w-3.5 h-3.5" /> :
-                     role === "maintenance" ? <Wrench className="w-3.5 h-3.5" /> :
-                     role === "lecturer" ? <Activity className="w-3.5 h-3.5" /> :
-                     <Users className="w-3.5 h-3.5" />}
+                    {/* Error */}
+                    <AnimatePresence>
+                      {error && (
+                        <motion.div
+                          initial={{ opacity: 0, y: -6, height: 0 }}
+                          animate={{ opacity: 1, y: 0, height: "auto" }}
+                          exit={{ opacity: 0, y: -6, height: 0 }}
+                          className="flex items-start gap-2.5 bg-rose-50 border border-rose-200 rounded-xl p-3"
+                        >
+                          <AlertCircle className="h-4 w-4 text-rose-500 shrink-0 mt-0.5" />
+                          <p className="text-[12px] text-rose-600 font-medium">{error}</p>
+                        </motion.div>
+                      )}
+                    </AnimatePresence>
+
+                    {/* Submit */}
+                    <button
+                      type="submit"
+                      disabled={loading}
+                      className="w-full flex items-center justify-center gap-2 py-3 mt-2 rounded-xl text-[13px] font-semibold text-white bg-gradient-to-r from-[#0EA5E9] to-[#0D9488] shadow-md shadow-[#0EA5E9]/20 hover:shadow-lg hover:shadow-[#0EA5E9]/30 hover:-translate-y-0.5 active:translate-y-0 transition-all duration-200 disabled:opacity-60 disabled:pointer-events-none"
+                    >
+                      {loading ? (
+                        <>
+                          <div className="h-4 w-4 rounded-full border-2 border-white/30 border-t-white animate-spin" />
+                          Signing in…
+                        </>
+                      ) : (
+                        <>
+                          Sign In
+                          <ArrowRight className="h-4 w-4" />
+                        </>
+                      )}
+                    </button>
+                  </form>
+
+                  {/* Bottom hint */}
+                  <p className="mt-6 text-center text-[12px] text-[#64748B]">
+                    Don't have an account?{" "}
+                    <button
+                      onClick={() => toggleMode(false)}
+                      className="text-[#0EA5E9] font-semibold hover:text-[#0284C7] transition-colors"
+                    >
+                      Create one
+                    </button>
+                  </p>
+                </motion.div>
+              ) : (
+                /* ── REGISTER FORM ── */
+                <motion.div
+                  key="register"
+                  initial={{ opacity: 0, y: 18 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  exit={{ opacity: 0, y: -18 }}
+                  transition={{ duration: 0.3, ease: "easeOut" }}
+                >
+                  {/* Heading */}
+                  <div className="mb-6">
+                    <div className="inline-flex items-center gap-2 px-3 py-1 bg-[#F0FDFA] text-[#0D9488] rounded-full text-[11px] font-semibold mb-4 border border-[#99F6E4]">
+                      <Sparkles className="h-3 w-3" />
+                      New Account Registration
+                    </div>
+                    <h2 className="text-2xl font-bold text-[#0F172A] tracking-tight">
+                      Join UniLink
+                    </h2>
+                    <p className="mt-1 text-[13px] text-[#64748B]">
+                      Register for campus resource access
+                    </p>
                   </div>
-                  <span className="text-[10px] font-black uppercase tracking-wider capitalize truncate">{role}</span>
-                </div>
-                <ArrowUpRight className="w-3 h-3 opacity-0 group-hover:opacity-100 transition-opacity shrink-0 ml-1 text-slate-400 group-hover:text-current" />
-              </button>
-            ))}
+
+                  <form onSubmit={handleRegisterSubmit} className="space-y-4">
+                    {/* Full Name + Email */}
+                    <div className="grid grid-cols-2 gap-3">
+                      <div>
+                        <label className="block text-[12px] font-medium text-[#0F172A] mb-1.5">
+                          Full Name
+                        </label>
+                        <div className="relative">
+                          <User className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[#94A3B8]" />
+                          <input
+                            type="text"
+                            required
+                            value={fullName}
+                            onChange={(e) => setFullName(e.target.value)}
+                            placeholder="Jane Doe"
+                            disabled={loading}
+                            className={inputCls}
+                          />
+                        </div>
+                      </div>
+                      <div>
+                        <label className="block text-[12px] font-medium text-[#0F172A] mb-1.5">
+                          Email
+                        </label>
+                        <div className="relative">
+                          <AtSign className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[#94A3B8]" />
+                          <input
+                            type="email"
+                            required
+                            value={email}
+                            onChange={(e) => setEmail(e.target.value)}
+                            placeholder="@university"
+                            disabled={loading}
+                            className={inputCls}
+                          />
+                        </div>
+                      </div>
+                    </div>
+
+                    {/* Role + Faculty */}
+                    <div className="grid grid-cols-2 gap-3">
+                      <div>
+                        <label className="block text-[12px] font-medium text-[#0F172A] mb-1.5">
+                          Role
+                        </label>
+                        <div className="relative">
+                          <BadgeCheck className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[#94A3B8]" />
+                          <select
+                            required
+                            value={role}
+                            onChange={(e) => setRole(e.target.value)}
+                            disabled={loading}
+                            className={`${inputCls} pr-8 appearance-none`}
+                          >
+                            <option value="" disabled>Select role</option>
+                            <option value="Admin">Admin</option>
+                            <option value="Lecturer">Lecturer</option>
+                            <option value="Student">Student</option>
+                            <option value="Maintenance">Maintenance</option>
+                          </select>
+                          <ChevronDown className="absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[#94A3B8] pointer-events-none" />
+                        </div>
+                      </div>
+                      <div>
+                        <label className="block text-[12px] font-medium text-[#0F172A] mb-1.5">
+                          Faculty
+                        </label>
+                        <div className="relative">
+                          <Building2 className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[#94A3B8]" />
+                          <select
+                            required
+                            value={department}
+                            onChange={(e) => setDepartment(e.target.value)}
+                            disabled={loading}
+                            className={`${inputCls} pr-8 appearance-none`}
+                          >
+                            <option value="" disabled>Select faculty</option>
+                            <option value="Faculty of Computing">Computing</option>
+                            <option value="Faculty of Applied Sciences">Applied Sci.</option>
+                            <option value="Faculty of Management">Management</option>
+                          </select>
+                          <ChevronDown className="absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[#94A3B8] pointer-events-none" />
+                        </div>
+                      </div>
+                    </div>
+
+                    {/* Passwords */}
+                    <div className="grid grid-cols-2 gap-3">
+                      <div>
+                        <label className="block text-[12px] font-medium text-[#0F172A] mb-1.5">
+                          Password
+                        </label>
+                        <div className="relative">
+                          <Lock className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[#94A3B8]" />
+                          <input
+                            type={showPassword ? "text" : "password"}
+                            required
+                            value={password}
+                            onChange={(e) => setPassword(e.target.value)}
+                            placeholder="••••••••"
+                            disabled={loading}
+                            className={`${inputCls} pr-10`}
+                          />
+                          <button
+                            type="button"
+                            onClick={() => setShowPassword(!showPassword)}
+                            className="absolute right-3 top-1/2 -translate-y-1/2 text-[#94A3B8] hover:text-[#64748B] transition-colors"
+                          >
+                            {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+                          </button>
+                        </div>
+                        <PasswordStrength password={password} />
+                      </div>
+                      <div>
+                        <label className="block text-[12px] font-medium text-[#0F172A] mb-1.5">
+                          Confirm
+                        </label>
+                        <div className="relative">
+                          <Lock className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[#94A3B8]" />
+                          <input
+                            type={showPassword ? "text" : "password"}
+                            required
+                            value={confirmPassword}
+                            onChange={(e) => setConfirmPassword(e.target.value)}
+                            placeholder="••••••••"
+                            disabled={loading}
+                            className={`${inputCls} ${
+                              confirmPassword && password !== confirmPassword
+                                ? "border-rose-300 focus:border-rose-400 focus:ring-rose-100"
+                                : confirmPassword && password === confirmPassword
+                                ? "border-teal-400 focus:border-teal-500 focus:ring-teal-100"
+                                : ""
+                            }`}
+                          />
+                          {confirmPassword && (
+                            <span className="absolute right-3 top-1/2 -translate-y-1/2">
+                              {password === confirmPassword
+                                ? <CheckCircle2 className="h-4 w-4 text-teal-500" />
+                                : <AlertCircle className="h-4 w-4 text-rose-400" />
+                              }
+                            </span>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+
+                    {/* Error / Success */}
+                    <AnimatePresence>
+                      {error && (
+                        <motion.div
+                          initial={{ opacity: 0, y: -6, height: 0 }}
+                          animate={{ opacity: 1, y: 0, height: "auto" }}
+                          exit={{ opacity: 0, y: -6, height: 0 }}
+                          className="flex items-start gap-2.5 bg-rose-50 border border-rose-200 rounded-xl p-3"
+                        >
+                          <AlertCircle className="h-4 w-4 text-rose-500 shrink-0 mt-0.5" />
+                          <p className="text-[12px] text-rose-600 font-medium">{error}</p>
+                        </motion.div>
+                      )}
+                      {success && (
+                        <motion.div
+                          initial={{ opacity: 0, y: -6, height: 0 }}
+                          animate={{ opacity: 1, y: 0, height: "auto" }}
+                          exit={{ opacity: 0, y: -6, height: 0 }}
+                          className="flex items-start gap-2.5 bg-[#F0FDFA] border border-[#99F6E4] rounded-xl p-3"
+                        >
+                          <CheckCircle2 className="h-4 w-4 text-[#0D9488] shrink-0 mt-0.5" />
+                          <p className="text-[12px] text-[#0D9488] font-medium">{success}</p>
+                        </motion.div>
+                      )}
+                    </AnimatePresence>
+
+                    {/* Submit */}
+                    <button
+                      type="submit"
+                      disabled={loading}
+                      className="w-full flex items-center justify-center gap-2 py-3 mt-1 rounded-xl text-[13px] font-semibold text-white bg-gradient-to-r from-[#0EA5E9] to-[#0D9488] shadow-md shadow-[#0EA5E9]/20 hover:shadow-lg hover:shadow-[#0EA5E9]/30 hover:-translate-y-0.5 active:translate-y-0 transition-all duration-200 disabled:opacity-60 disabled:pointer-events-none"
+                    >
+                      {loading ? (
+                        <>
+                          <div className="h-4 w-4 rounded-full border-2 border-white/30 border-t-white animate-spin" />
+                          Creating account…
+                        </>
+                      ) : (
+                        <>
+                          Create Account
+                          <ArrowRight className="h-4 w-4" />
+                        </>
+                      )}
+                    </button>
+
+                    <p className="text-center text-[11px] text-[#64748B]">
+                      {role.toLowerCase() === "student"
+                        ? "Student accounts are automatically approved."
+                        : "Non-student accounts require admin approval before access is granted."}
+                    </p>
+                  </form>
+
+                  <p className="mt-5 text-center text-[12px] text-[#64748B]">
+                    Already have an account?{" "}
+                    <button
+                      onClick={() => toggleMode(true)}
+                      className="text-[#0EA5E9] font-semibold hover:text-[#0284C7] transition-colors"
+                    >
+                      Sign in
+                    </button>
+                  </p>
+                </motion.div>
+              )}
+            </AnimatePresence>
           </div>
         </div>
 
-      </motion.div>
+        {/* Bottom bar */}
+        <div className="px-6 py-4 border-t border-[#E2E8F0] text-center">
+          <p className="text-[11px] text-[#94A3B8]">
+            © {new Date().getFullYear()} UniLink URMS · Sabaragamuwa University of Sri Lanka
+          </p>
+        </div>
+      </div>
     </div>
   );
 }
+
+export default function LoginPage() {
+  return (
+    <Suspense
+      fallback={
+        <div className="min-h-screen bg-[#F8FAFC] flex items-center justify-center">
+          <div className="flex flex-col items-center gap-3">
+            <div className="h-10 w-10 rounded-full border-2 border-[#E2E8F0] border-t-[#0EA5E9] animate-spin" />
+            <p className="text-[12px] text-[#64748B] font-medium">Loading…</p>
+          </div>
+        </div>
+      }
+    >
+      <AuthContent />
+    </Suspense>
+  );
+}
diff --git a/app/maintenance/assign/page.tsx b/app/maintenance/assign/page.tsx
index 7e4f07a..8bafd44 100644
--- a/app/maintenance/assign/page.tsx
+++ b/app/maintenance/assign/page.tsx
@@ -199,7 +199,7 @@ export default function AssignMaintenancePage() {
 
   return (
     <div className="flex-grow flex items-center justify-center p-4 md:p-8 bg-slate-50 min-h-[calc(100vh-140px)]">
-      <div className="w-full max-w-2xl bg-white rounded-3xl shadow-xl border border-slate-100 overflow-hidden transform transition-all hover:shadow-2xl hover:shadow-slate-200/50">
+      <div className="w-full max-w-2xl bg-white rounded-none border-2 border-foreground shadow-[4px_4px_0_0_rgba(0,0,0,1)] dark:shadow-[4px_4px_0_0_rgba(255,255,255,0.2)] border border-slate-100 overflow-hidden transform transition-all hover:border-2 border-foreground shadow-[4px_4px_0_0_rgba(0,0,0,1)] dark:shadow-[4px_4px_0_0_rgba(255,255,255,0.2)] hover:shadow-slate-200/50">
         
         {/* Header - Using a darker professional theme for Admin functionality */}
         <div className="bg-slate-900 p-8 text-white relative">
@@ -218,10 +218,10 @@ export default function AssignMaintenancePage() {
 
         <div className="p-8">
           {isSuccess ? (
-            <div className="py-12 text-center space-y-6 animate-in fade-in zoom-in slide-in-from-bottom-4 duration-500">
+            <div className="py-12 text-center space-y-6 animate-in fade-in zoom-in slide-in- duration-500">
               <div className="relative w-24 h-24 mx-auto">
-                <div className="absolute inset-0 bg-brand-success/20 rounded-full animate-ping"></div>
-                <div className="relative bg-brand-success w-24 h-24 rounded-full flex items-center justify-center text-white shadow-lg">
+                <div className="absolute inset-0 bg-brand-success/20 rounded-none animate-ping"></div>
+                <div className="relative bg-brand-success w-24 h-24 rounded-none flex items-center justify-center text-white border-2 border-foreground shadow-[4px_4px_0_0_rgba(0,0,0,1)] dark:shadow-[4px_4px_0_0_rgba(255,255,255,0.2)]">
                   <svg xmlns="http://www.w3.org/2000/svg" className="h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
                   </svg>
@@ -243,8 +243,8 @@ export default function AssignMaintenancePage() {
           ) : (
             <form onSubmit={handleSubmit} className="space-y-7">
               {error && (
-                <div className="p-4 bg-red-500/10 border border-red-500/20 text-red-655 dark:text-red-400 text-sm font-semibold rounded-2xl flex items-center gap-2">
-                  <span className="w-2 h-2 rounded-full bg-red-500 animate-pulse shrink-0" />
+                <div className="p-4 bg-red-500/10 border border-red-500/20 text-red-655 dark:text-red-400 text-sm font-semibold rounded-none flex items-center gap-2">
+                  <span className="w-2 h-2 rounded-none bg-red-500 animate-pulse shrink-0" />
                   {error}
                 </div>
               )}
@@ -256,7 +256,7 @@ export default function AssignMaintenancePage() {
                 </label>
                 <div className="relative">
                   {loading ? (
-                    <div className="w-full px-4 py-3.5 bg-slate-50 border border-slate-200 rounded-xl flex items-center gap-2">
+                    <div className="w-full px-4 py-3.5 bg-slate-50 border border-slate-200 rounded-none flex items-center gap-2">
                       <Loader2 className="w-4 h-4 animate-spin text-brand-primary" />
                       <span className="text-sm font-bold text-slate-400">Loading pending requests...</span>
                     </div>
@@ -267,7 +267,7 @@ export default function AssignMaintenancePage() {
                       value={formData.requestId}
                       onChange={handleChange}
                       disabled={submitting}
-                      className={`w-full appearance-none px-4 py-3.5 bg-slate-50 border rounded-xl focus:ring-4 focus:ring-brand-primary/10 focus:border-brand-primary outline-none transition-all cursor-pointer ${
+                      className={`w-full appearance-none px-4 py-3.5 bg-slate-50 border rounded-none focus:ring-4 focus:ring-brand-primary/10 focus:border-brand-primary outline-none transition-all cursor-pointer ${
                         errors.requestId ? "border-brand-danger bg-red-50" : "border-slate-200"
                       }`}
                     >
@@ -297,9 +297,9 @@ export default function AssignMaintenancePage() {
 
               {/* Priority Display (Read-only Highlight) */}
               {currentPriority && (
-                <div className="animate-in fade-in slide-in-from-left-2 duration-300">
+                <div className="animate-in fade-in slide-in- duration-300">
                   <div className={`inline-flex items-center gap-2 px-4 py-1.5 rounded-lg border text-sm font-bold ${currentPriority.color}`}>
-                    <span className="w-2 h-2 rounded-full bg-current animate-pulse"></span>
+                    <span className="w-2 h-2 rounded-none bg-current animate-pulse"></span>
                     Priority Level: {currentPriority.label}
                   </div>
                 </div>
@@ -312,7 +312,7 @@ export default function AssignMaintenancePage() {
                 </label>
                 <div className="relative">
                   {loading ? (
-                    <div className="w-full px-4 py-3.5 bg-slate-50 border border-slate-200 rounded-xl flex items-center gap-2">
+                    <div className="w-full px-4 py-3.5 bg-slate-50 border border-slate-200 rounded-none flex items-center gap-2">
                       <Loader2 className="w-4 h-4 animate-spin text-brand-primary" />
                       <span className="text-sm font-bold text-slate-400">Loading technicians...</span>
                     </div>
@@ -323,7 +323,7 @@ export default function AssignMaintenancePage() {
                       value={formData.staffId}
                       onChange={handleChange}
                       disabled={submitting}
-                      className={`w-full appearance-none px-4 py-3.5 bg-slate-50 border rounded-xl focus:ring-4 focus:ring-brand-primary/10 focus:border-brand-primary outline-none transition-all cursor-pointer ${
+                      className={`w-full appearance-none px-4 py-3.5 bg-slate-50 border rounded-none focus:ring-4 focus:ring-brand-primary/10 focus:border-brand-primary outline-none transition-all cursor-pointer ${
                         errors.staffId ? "border-brand-danger bg-red-50" : "border-slate-200"
                       }`}
                     >
@@ -364,7 +364,7 @@ export default function AssignMaintenancePage() {
                   value={formData.notes}
                   onChange={handleChange}
                   disabled={submitting}
-                  className="w-full px-4 py-3.5 bg-slate-50 border border-slate-200 rounded-xl focus:ring-4 focus:ring-brand-primary/10 focus:border-brand-primary outline-none transition-all resize-none placeholder:text-slate-400"
+                  className="w-full px-4 py-3.5 bg-slate-50 border border-slate-200 rounded-none focus:ring-4 focus:ring-brand-primary/10 focus:border-brand-primary outline-none transition-all resize-none placeholder:text-slate-400"
                 ></textarea>
               </div>
 
@@ -373,7 +373,7 @@ export default function AssignMaintenancePage() {
                 <button
                   type="submit"
                   disabled={submitting || loading}
-                  className="w-full bg-brand-primary hover:bg-brand-secondary active:scale-[0.98] text-white font-bold py-4.5 px-6 rounded-xl shadow-lg shadow-brand-primary/20 transition-all duration-200 flex items-center justify-center gap-2 disabled:opacity-60"
+                  className="w-full bg-brand-primary hover:bg-brand-secondary active:scale-[0.98] text-white font-bold py-4.5 px-6 rounded-none border-2 border-foreground shadow-[4px_4px_0_0_rgba(0,0,0,1)] dark:shadow-[4px_4px_0_0_rgba(255,255,255,0.2)] shadow-brand-primary/20 transition-all duration-200 flex items-center justify-center gap-2 disabled:opacity-60"
                 >
                   {submitting ? (
                     <><Loader2 className="w-5 h-5 animate-spin" /> Assigning Task...</>
diff --git a/app/maintenance/page.tsx b/app/maintenance/page.tsx
index 16c10b4..b3aa35c 100644
--- a/app/maintenance/page.tsx
+++ b/app/maintenance/page.tsx
@@ -2,16 +2,29 @@
 
 import React, { useState, useMemo, useEffect, useCallback, Suspense } from "react";
 import { useRouter, useSearchParams, usePathname } from "next/navigation";
+import { motion } from "framer-motion";
 import {
   AlertTriangle, CheckCircle2, Clock, ListTodo,
   CalendarDays, Wrench, Activity, ShieldAlert,
-  Search, X, Plus, RefreshCcw, ChevronRight, DownloadCloud
+  Search, X, Plus, RefreshCcw, ChevronRight, DownloadCloud, Loader2
 } from "lucide-react";
 import { useAuth } from "@/lib/auth-context";
 import Pagination from "@/components/Pagination";
 import SavedSearches from "@/components/SavedSearches";
 import { exportToCSV } from "@/lib/exportCsv";
 
+/* ─── URMS Light Blue Design System ────────────────────────
+   primary     : #0EA5E9 (Sky 500)
+   primary-dark: #0284C7 (Sky 600)
+   teal        : #0D9488
+   teal-light  : #CCFBF1
+   ink-main    : #0F172A
+   ink-muted   : #64748B
+   surface     : #FFFFFF
+   bg-base     : #F8FAFC
+   border      : #E2E8F0
+──────────────────────────────────────────────────────────── */
+
 interface MaintenanceTicket {
   id: string;
   resourceId: string;
@@ -48,6 +61,45 @@ const NEXT_STATUS: Record<string, "IN_PROGRESS" | "COMPLETED"> = {
 };
 const API = process.env.NEXT_PUBLIC_API_URL || "http://localhost:5000";
 
+const fadeInUp = {
+  hidden: { opacity: 0, y: 20 },
+  visible: { opacity: 1, y: 0, transition: { duration: 0.45, ease: "easeOut" as const } },
+};
+const stagger = {
+  hidden: { opacity: 0 },
+  visible: { opacity: 1, transition: { staggerChildren: 0.07 } },
+};
+const cardVariant = {
+  hidden: { opacity: 0, y: 16 },
+  visible: { opacity: 1, y: 0, transition: { duration: 0.4 } },
+};
+
+function StatusBadge({ status }: { status: string }) {
+  const map: Record<string, string> = {
+    "Pending":     "bg-amber-50 text-amber-700 border-amber-200 dark:bg-amber-500/10 dark:text-amber-300 dark:border-amber-500/20",
+    "In Progress": "bg-sky-50 text-sky-700 border-sky-200 dark:bg-sky-500/10 dark:text-sky-300 dark:border-sky-500/20",
+    "Completed":   "bg-teal-50 text-teal-700 border-teal-200 dark:bg-teal-500/10 dark:text-teal-300 dark:border-teal-500/20",
+  };
+  const dot: Record<string, string> = {
+    "Pending": "bg-amber-400", "In Progress": "bg-sky-500 animate-pulse", "Completed": "bg-teal-500"
+  };
+  return (
+    <span className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[11px] font-semibold border ${map[status] || map["Pending"]}`}>
+      <span className={`w-1.5 h-1.5 rounded-full ${dot[status] || "bg-amber-400"}`} />
+      {status}
+    </span>
+  );
+}
+
+function PriorityBadge({ priority }: { priority: string }) {
+  const map: Record<string, string> = {
+    High:   "text-rose-700 bg-rose-50 border border-rose-200 dark:bg-rose-500/10 dark:text-rose-300 dark:border-rose-500/20",
+    Medium: "text-amber-700 bg-amber-50 border border-amber-200 dark:bg-amber-500/10 dark:text-amber-300 dark:border-amber-500/20",
+    Low:    "text-slate-600 bg-slate-50 border border-slate-200 dark:bg-slate-500/10 dark:text-slate-300 dark:border-slate-500/20",
+  };
+  return <span className={`inline-flex px-2.5 py-0.5 rounded-full text-[11px] font-semibold ${map[priority] || ""}`}>{priority}</span>;
+}
+
 function AdminMaintenanceDashboardContent() {
   const { user } = useAuth();
   const router = useRouter();
@@ -107,7 +159,7 @@ function AdminMaintenanceDashboardContent() {
         resourceName: t.resourceName || `Resource #${String(t.resourceId).slice(0, 8)}`,
         title: t.title,
         description: t.description || t.title,
-        requestedDate: t.created_at ? new Date(t.created_at).toLocaleDateString() : 'N/A',
+        requestedDate: t.created_at ? new Date(t.created_at).toLocaleDateString() : "N/A",
         status: (STATUS_DISPLAY[t.status] || "Pending") as MaintenanceTask["status"],
         rawStatus: t.status,
         priority: t.priority,
@@ -196,7 +248,6 @@ function AdminMaintenanceDashboardContent() {
     }
   };
 
-  const todayStr = new Date().toISOString().split("T")[0];
   const stats = useMemo(() => ({
     total: tasks.length,
     pending: tasks.filter(t => t.status !== "Completed").length,
@@ -228,100 +279,118 @@ function AdminMaintenanceDashboardContent() {
     );
   }, [filteredTasks, currentPage, pageSize]);
 
-  return (
-    <div className="min-h-screen bg-background p-4 md:p-8 font-sans">
-      <div className="max-w-7xl mx-auto space-y-8">
+  const statCards = [
+    { title: "Total Requests", value: stats.total, icon: ListTodo, bg: "#F0F9FF", fg: "#0EA5E9", f: "All" },
+    { title: "Active / Pending", value: stats.pending, icon: Activity, bg: "#FFFBEB", fg: "#D97706", f: "Pending" },
+    { title: "Tasks Completed", value: stats.completed, icon: CheckCircle2, bg: "#CCFBF1", fg: "#0D9488", f: "Completed" },
+    { title: "Overdue Tasks", value: stats.overdue, icon: AlertTriangle, bg: "#FFF1F2", fg: "#E11D48", f: "Overdue" },
+  ];
 
-        {/* Header */}
-        <div className="relative overflow-hidden rounded-3xl bg-card border border-slate-200 dark:border-border p-8 shadow-2xl">
-          <div className="absolute top-0 right-0 p-8 opacity-5 pointer-events-none"><Wrench className="w-64 h-64 rotate-12" /></div>
-          <div className="relative z-10 flex flex-col md:flex-row md:items-end justify-between gap-6">
+  return (
+    <motion.div variants={stagger} initial="hidden" animate="visible" className="min-h-screen bg-[#F8FAFC] dark:bg-[#0F172A] p-4 md:p-8">
+      <div className="max-w-7xl mx-auto space-y-6">
+
+        {/* ── Hero Banner ── */}
+        <motion.div variants={fadeInUp} className="relative overflow-hidden rounded-2xl bg-gradient-to-br from-[#0EA5E9] to-[#0284C7] p-6 md:p-8 text-white shadow-lg shadow-sky-500/20">
+          <div className="absolute -top-12 -right-12 w-48 h-48 rounded-full bg-white/10 pointer-events-none" />
+          <div className="absolute -bottom-8 -left-8 w-36 h-36 rounded-full bg-white/5 pointer-events-none" />
+          <div className="relative z-10 flex flex-col md:flex-row md:items-center justify-between gap-6">
             <div>
-              <div className="inline-flex items-center gap-2 px-3 py-1 bg-slate-100 dark:bg-foreground/5 rounded-full text-sm font-semibold text-brand-primary mb-4 border border-slate-200 dark:border-border">
-                <ShieldAlert className="w-4 h-4" /> Admin Console
+              <div className="flex items-center gap-2 mb-2">
+                <span className="inline-flex items-center gap-1.5 bg-white/20 backdrop-blur-sm px-3 py-1 rounded-full text-[11px] font-semibold uppercase tracking-wider">
+                  <ShieldAlert className="w-3 h-3" /> Admin Console
+                </span>
               </div>
-              <h1 className="text-4xl md:text-5xl font-black tracking-tight mb-2">
-                Maintenance <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-cyan-500">Overview</span>
-              </h1>
-              <p className="text-slate-600 dark:text-foreground/50 text-lg font-medium max-w-xl">
+              <h1 className="text-2xl md:text-3xl font-bold tracking-tight">Maintenance Ticket Queue</h1>
+              <p className="mt-1.5 text-sky-100 text-sm font-medium max-w-xl">
                 Monitor facility health, track repair requests, and manage maintenance workflows.
               </p>
             </div>
-            <div className="flex flex-col gap-3">
+            <div className="flex flex-col gap-3 shrink-0">
               <button
                 onClick={() => setShowCreate(true)}
-                className="bg-brand-primary hover:opacity-90 px-6 py-3 rounded-xl text-white font-bold transition-all shadow-lg flex items-center gap-2"
+                className="bg-white text-[#0284C7] hover:bg-sky-50 px-5 py-2.5 rounded-xl font-semibold text-sm transition-colors flex items-center gap-2 shadow-sm"
               >
-                <Plus className="w-5 h-5" /> Create Task
+                <Plus className="w-4 h-4" /> Create Task
               </button>
               <div className="flex gap-2">
-                <button onClick={() => handleExport("pdf")} className="flex-1 bg-card hover:bg-slate-100 dark:hover:bg-foreground/5 px-4 py-2.5 rounded-xl text-foreground text-xs font-bold border border-slate-200 dark:border-border flex items-center justify-center gap-2">
-                  <Activity className="w-4 h-4 text-blue-500" /> Export PDF
+                <button onClick={() => handleExport("pdf")} className="flex-1 bg-white/15 hover:bg-white/25 backdrop-blur-sm px-3 py-2 rounded-xl text-white text-xs font-semibold border border-white/20 flex items-center justify-center gap-1.5 transition-colors">
+                  <Activity className="w-3.5 h-3.5" /> PDF
                 </button>
-                <button onClick={() => handleExport("excel")} className="flex-1 bg-emerald-500/10 hover:bg-emerald-500/20 px-4 py-2.5 rounded-xl text-emerald-600 dark:text-emerald-400 text-xs font-bold border border-emerald-500/20 flex items-center justify-center gap-2">
-                  <CheckCircle2 className="w-4 h-4 text-emerald-500" /> Export Excel
+                <button onClick={() => handleExport("excel")} className="flex-1 bg-white/15 hover:bg-white/25 backdrop-blur-sm px-3 py-2 rounded-xl text-white text-xs font-semibold border border-white/20 flex items-center justify-center gap-1.5 transition-colors">
+                  <CheckCircle2 className="w-3.5 h-3.5" /> Excel
                 </button>
               </div>
             </div>
           </div>
-        </div>
-
-        {/* Stats */}
-        <div className="grid grid-cols-2 lg:grid-cols-4 gap-6">
-          {[
-            { title: "Total Requests", value: stats.total, icon: ListTodo, color: "blue", f: "All" },
-            { title: "Active / Pending", value: stats.pending, icon: Activity, color: "amber", f: "Pending" },
-            { title: "Tasks Completed", value: stats.completed, icon: CheckCircle2, color: "emerald", f: "Completed" },
-            { title: "Overdue Tasks", value: stats.overdue, icon: AlertTriangle, color: "red", f: "Overdue" },
-          ].map(({ title, value, icon: Icon, color, f }) => (
-            <StatCard key={f} title={title} value={value} icon={Icon} color={color} active={filter === f} onClick={() => setFilter(f as any)} />
+        </motion.div>
+
+        {/* ── Stat Cards ── */}
+        <motion.div variants={stagger} className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+          {statCards.map(({ title, value, icon: Icon, bg, fg, f }) => (
+            <motion.div
+              key={f}
+              variants={cardVariant}
+              onClick={() => setFilter(f as any)}
+              className={`cursor-pointer bg-white dark:bg-slate-800/60 rounded-xl p-5 border shadow-sm hover:shadow-md hover:-translate-y-0.5 transition-all duration-200 ${
+                filter === f
+                  ? "border-[#0EA5E9] ring-1 ring-[#0EA5E9]/30"
+                  : "border-[#E2E8F0] dark:border-slate-700"
+              }`}
+            >
+              <div className="w-10 h-10 rounded-xl flex items-center justify-center mb-3" style={{ backgroundColor: bg }}>
+                <Icon className="w-5 h-5" style={{ color: fg }} />
+              </div>
+              <p className="text-[11px] font-semibold text-[#64748B] dark:text-slate-400 uppercase tracking-wider">{title}</p>
+              <p className="text-3xl font-bold text-[#0F172A] dark:text-white mt-1">
+                {loading ? <Loader2 className="w-6 h-6 animate-spin opacity-30" /> : value}
+              </p>
+            </motion.div>
           ))}
-        </div>
-
-        {/* Table */}
-        <div className="bg-card rounded-3xl shadow-xl border border-slate-200 dark:border-border overflow-hidden">
-          <div className="p-6 md:p-8 border-b border-slate-200 dark:border-border flex flex-col md:flex-row md:items-center justify-between gap-4">
-            <h2 className="text-2xl font-black text-foreground">Task Directory</h2>
+        </motion.div>
+
+        {/* ── Table ── */}
+        <motion.div variants={fadeInUp} className="bg-white dark:bg-slate-800/60 rounded-xl border border-[#E2E8F0] dark:border-slate-700 shadow-sm overflow-hidden">
+          {/* Table Header */}
+          <div className="px-6 py-5 border-b border-[#E2E8F0] dark:border-slate-700 flex flex-col md:flex-row md:items-center justify-between gap-4">
+            <h2 className="text-base font-bold text-[#0F172A] dark:text-white flex items-center gap-2">
+              <ListTodo className="w-4 h-4 text-[#0EA5E9]" /> Task Directory
+            </h2>
             <div className="flex gap-3 flex-wrap">
               {/* Search */}
               <div className="relative">
-                <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
+                <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[#64748B]" />
                 <input
                   value={search}
-                  onChange={e => {
-                    setSearch(e.target.value);
-                    updateUrlParams(1, pageSize);
-                  }}
+                  onChange={e => { setSearch(e.target.value); updateUrlParams(1, pageSize); }}
                   placeholder="Search tasks..."
-                  className="pl-9 pr-4 py-2 bg-slate-100 dark:bg-foreground/5 border border-slate-200 dark:border-border rounded-xl text-sm font-bold text-foreground placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500/40 w-52"
+                  className="pl-9 pr-4 py-2 bg-[#F8FAFC] dark:bg-slate-800 border border-[#E2E8F0] dark:border-slate-700 rounded-lg text-sm text-[#0F172A] dark:text-white placeholder:text-[#64748B] focus:outline-none focus:ring-2 focus:ring-[#0EA5E9]/50 w-52 transition-all"
                 />
               </div>
               {/* Filter tabs */}
-              <div className="flex bg-slate-100 dark:bg-foreground/5 p-1 rounded-xl border border-slate-200 dark:border-border">
+              <div className="flex bg-[#F8FAFC] dark:bg-slate-800 p-1 rounded-lg border border-[#E2E8F0] dark:border-slate-700 gap-0.5">
                 {["All", "Pending", "Completed"].map(f => (
-                  <button key={f} onClick={() => {
-                    setFilter(f as any);
-                    updateUrlParams(1, pageSize);
-                  }}
-                    className={`px-3 py-1.5 text-xs font-black rounded-lg transition-all ${filter === f ? "bg-card text-foreground shadow-sm" : "text-slate-500 dark:text-foreground/40"}`}>
+                  <button key={f} onClick={() => { setFilter(f as any); updateUrlParams(1, pageSize); }}
+                    className={`px-3 py-1.5 text-xs font-semibold rounded-md transition-all ${
+                      filter === f
+                        ? "bg-white dark:bg-slate-700 text-[#0EA5E9] shadow-sm"
+                        : "text-[#64748B] dark:text-slate-400 hover:text-[#0F172A] dark:hover:text-white"
+                    }`}>
                     {f}
                   </button>
                 ))}
               </div>
-              <button onClick={fetchTasks} title="Refresh" className="p-2 rounded-xl hover:bg-slate-100 dark:hover:bg-foreground/5 border border-slate-200 dark:border-border transition-colors">
-                <RefreshCcw className="w-4 h-4 text-slate-500" />
+              <button onClick={fetchTasks} title="Refresh" className="p-2 rounded-lg hover:bg-[#F8FAFC] dark:hover:bg-slate-700 border border-[#E2E8F0] dark:border-slate-700 transition-colors">
+                <RefreshCcw className="w-4 h-4 text-[#64748B]" />
               </button>
             </div>
           </div>
 
-          {/* ── Saved Searches & Export ── */}
-          <div className="px-6 py-4 border-b border-slate-200 dark:border-border flex items-center justify-between gap-4 bg-slate-50/50 dark:bg-white/[0.01]">
+          {/* Saved Searches & CSV Export */}
+          <div className="px-6 py-3 border-b border-[#E2E8F0] dark:border-slate-700 flex items-center justify-between gap-4 bg-[#F8FAFC]/60 dark:bg-slate-800/30">
             <SavedSearches
               pageKey="maintenance"
-              currentFilters={{
-                search,
-                filter,
-              }}
+              currentFilters={{ search, filter }}
               onLoadFilters={(filters) => {
                 if (filters.search !== undefined) setSearch(filters.search);
                 if (filters.filter !== undefined) setFilter(filters.filter);
@@ -332,23 +401,18 @@ function AdminMaintenanceDashboardContent() {
               onClick={() => {
                 exportToCSV(
                   filteredTasks.map(t => ({
-                    id: t.id,
-                    resourceName: t.resourceName,
-                    title: t.title,
-                    description: t.description,
-                    requestedDate: t.requestedDate,
-                    status: t.status,
-                    priority: t.priority,
-                    assignedTo: t.assignedTo || ""
+                    id: t.id, resourceName: t.resourceName, title: t.title,
+                    description: t.description, requestedDate: t.requestedDate,
+                    status: t.status, priority: t.priority, assignedTo: t.assignedTo || ""
                   })),
                   ["Task ID", "Resource", "Title", "Description", "Requested Date", "Status", "Priority", "Assigned To"],
                   ["id", "resourceName", "title", "description", "requestedDate", "status", "priority", "assignedTo"],
                   "maintenance_tasks"
                 );
               }}
-              className="inline-flex items-center gap-2 bg-white dark:bg-white/5 border border-slate-200 dark:border-border hover:bg-slate-50 dark:hover:bg-white/10 active:scale-95 text-slate-700 dark:text-foreground/80 font-semibold px-4 py-2.5 rounded-xl shadow-sm transition-all duration-200 text-sm"
+              className="inline-flex items-center gap-2 bg-white dark:bg-slate-700 border border-[#E2E8F0] dark:border-slate-600 hover:bg-[#F8FAFC] dark:hover:bg-slate-600 text-[#0F172A] dark:text-white font-semibold px-4 py-2 rounded-lg shadow-sm transition-all text-sm"
             >
-              <DownloadCloud className="w-4 h-4 text-emerald-500" />
+              <DownloadCloud className="w-4 h-4 text-[#0D9488]" />
               <span>Export CSV</span>
             </button>
           </div>
@@ -356,18 +420,20 @@ function AdminMaintenanceDashboardContent() {
           <div className="overflow-x-auto">
             <table className="w-full text-left">
               <thead>
-                <tr className="bg-foreground/[0.02] border-b border-slate-200 dark:border-border">
+                <tr className="bg-[#F8FAFC] dark:bg-slate-800/50 border-b border-[#E2E8F0] dark:border-slate-700">
                   {["ID / Resource", "Issue", "Requested", "Status", "Priority", "Action"].map(h => (
-                    <th key={h} className="px-6 py-4 font-black text-slate-500 dark:text-foreground/40 text-[10px] uppercase tracking-widest">{h}</th>
+                    <th key={h} className="px-6 py-3.5 font-semibold text-[#64748B] dark:text-slate-400 text-[11px] uppercase tracking-wider">{h}</th>
                   ))}
                 </tr>
               </thead>
-              <tbody className="divide-y divide-border/50">
+              <tbody className="divide-y divide-[#E2E8F0] dark:divide-slate-700">
                 {loading ? (
                   Array.from({ length: 5 }).map((_, i) => (
                     <tr key={i}>
                       {Array.from({ length: 6 }).map((_, j) => (
-                        <td key={j} className="px-6 py-5"><div className="h-4 bg-slate-200 dark:bg-foreground/10 rounded animate-pulse w-24" /></td>
+                        <td key={j} className="px-6 py-4">
+                          <div className="h-4 bg-slate-100 dark:bg-slate-700 rounded-lg animate-pulse w-24" />
+                        </td>
                       ))}
                     </tr>
                   ))
@@ -375,41 +441,47 @@ function AdminMaintenanceDashboardContent() {
                   <tr>
                     <td colSpan={6} className="px-6 py-16 text-center">
                       <div className="inline-flex flex-col items-center gap-3">
-                        <div className="w-14 h-14 rounded-2xl bg-slate-100 dark:bg-foreground/5 flex items-center justify-center"><Wrench className="w-7 h-7 text-slate-400" /></div>
-                        <p className="font-black text-foreground">No tasks found</p>
-                        <p className="text-sm text-slate-500 dark:text-foreground/40 font-bold">No tasks match the current filter or search.</p>
-                        <button onClick={() => { setFilter("All"); setSearch(""); }} className="text-brand-primary font-black text-sm hover:underline">Clear filters</button>
+                        <div className="w-14 h-14 rounded-2xl bg-[#F0F9FF] flex items-center justify-center">
+                          <Wrench className="w-7 h-7 text-[#0EA5E9]" />
+                        </div>
+                        <p className="font-semibold text-[#0F172A] dark:text-white">No tasks found</p>
+                        <p className="text-sm text-[#64748B] dark:text-slate-400">No tasks match the current filter or search.</p>
+                        <button onClick={() => { setFilter("All"); setSearch(""); }} className="text-[#0EA5E9] font-semibold text-sm hover:underline">
+                          Clear filters
+                        </button>
                       </div>
                     </td>
                   </tr>
                 ) : paginatedTasks.map(task => (
-                  <tr key={task.rawId} className="hover:bg-foreground/[0.02] transition-colors group">
-                    <td className="px-6 py-5">
-                      <div className="font-black text-foreground text-sm">{task.id}</div>
-                      <div className="text-[10px] font-bold text-slate-500 dark:text-foreground/40 uppercase tracking-wider mt-0.5">{task.resourceName}</div>
+                  <tr key={task.rawId} className="hover:bg-[#F8FAFC] dark:hover:bg-slate-700/30 transition-colors">
+                    <td className="px-6 py-4">
+                      <div className="font-semibold text-[#0F172A] dark:text-white text-sm">{task.id}</div>
+                      <div className="text-[11px] text-[#64748B] dark:text-slate-400 mt-0.5">{task.resourceName}</div>
                     </td>
-                    <td className="px-6 py-5 max-w-xs">
-                      <p className="font-bold text-slate-700 dark:text-foreground/80 text-sm line-clamp-2">{task.description}</p>
-                      {task.assignedTo && <p className="text-[10px] text-slate-400 dark:text-foreground/30 font-bold mt-1 uppercase tracking-widest">→ {task.assignedTo}</p>}
+                    <td className="px-6 py-4 max-w-xs">
+                      <p className="font-semibold text-[#0F172A] dark:text-white text-sm line-clamp-1">{task.title}</p>
+                      <p className="text-[11px] text-[#64748B] dark:text-slate-400 mt-0.5 line-clamp-1">{task.description}</p>
+                      {task.assignedTo && <p className="text-[11px] text-[#0EA5E9] font-semibold mt-1">→ {task.assignedTo}</p>}
                     </td>
-                    <td className="px-6 py-5">
-                      <div className="flex items-center gap-2 text-xs text-slate-600 dark:text-foreground/60 font-bold">
-                        <CalendarDays className="w-3.5 h-3.5 text-slate-400" /> {task.requestedDate}
+                    <td className="px-6 py-4">
+                      <div className="flex items-center gap-1.5 text-[11px] text-[#64748B] dark:text-slate-400">
+                        <CalendarDays className="w-3.5 h-3.5" /> {task.requestedDate}
                       </div>
                     </td>
-                    <td className="px-6 py-5"><StatusBadge status={task.status} /></td>
-                    <td className="px-6 py-5"><PriorityBadge priority={task.priority} /></td>
-                    <td className="px-6 py-5">
+                    <td className="px-6 py-4"><StatusBadge status={task.status} /></td>
+                    <td className="px-6 py-4"><PriorityBadge priority={task.priority} /></td>
+                    <td className="px-6 py-4">
                       {task.rawStatus !== "COMPLETED" ? (
                         <button
                           onClick={() => handleAdvanceStatus(task)}
-                          title={`Advance to ${NEXT_STATUS[task.rawStatus]?.replace("_", " ")}`}
-                          className="flex items-center gap-1 text-[10px] font-black uppercase tracking-widest text-brand-primary hover:bg-blue-500/10 px-2.5 py-1.5 rounded-lg transition-all border border-transparent hover:border-blue-500/20"
+                          className="flex items-center gap-1 text-[11px] font-semibold text-white bg-[#0EA5E9] hover:bg-[#0284C7] px-3 py-1.5 rounded-lg transition-colors shadow-sm shadow-sky-500/20"
                         >
-                          {task.rawStatus === "OPEN" ? "Start" : "Complete"} <ChevronRight className="w-3 h-3" />
+                          {task.rawStatus === "OPEN" ? "Start" : "Complete"}
                         </button>
                       ) : (
-                        <span className="text-[10px] font-bold text-slate-400 dark:text-foreground/20 uppercase tracking-widest">Done</span>
+                        <span className="inline-flex items-center gap-1 text-[11px] font-semibold text-teal-600 dark:text-teal-400">
+                          <CheckCircle2 className="w-3.5 h-3.5" /> Done
+                        </span>
                       )}
                     </td>
                   </tr>
@@ -424,43 +496,50 @@ function AdminMaintenanceDashboardContent() {
             onPageChange={(p) => updateUrlParams(p, pageSize)}
             onPageSizeChange={(sz) => updateUrlParams(1, sz)}
           />
-        </div>
+        </motion.div>
       </div>
 
-      {/* Create Task Modal */}
+      {/* ── Create Task Modal ── */}
       {showCreate && (
-        <div className="fixed inset-0 bg-black/60 backdrop-blur-sm z-50 flex items-center justify-center p-4">
-          <div className="bg-card border border-slate-200 dark:border-border rounded-3xl shadow-2xl w-full max-w-md">
-            <div className="flex items-center justify-between p-6 border-b border-slate-200 dark:border-border">
-              <h3 className="text-xl font-black text-foreground">Create Maintenance Task</h3>
-              <button onClick={() => { setShowCreate(false); setCreateError(null); }} className="p-2 rounded-xl hover:bg-slate-100 dark:hover:bg-foreground/5"><X className="w-5 h-5 text-slate-500" /></button>
+        <div className="fixed inset-0 bg-[#0F172A]/40 backdrop-blur-sm z-50 flex items-center justify-center p-4">
+          <motion.div initial={{ opacity: 0, scale: 0.95 }} animate={{ opacity: 1, scale: 1 }}
+            className="bg-white dark:bg-slate-800 rounded-2xl border border-[#E2E8F0] dark:border-slate-700 shadow-xl w-full max-w-md">
+            <div className="flex items-center justify-between px-6 py-5 border-b border-[#E2E8F0] dark:border-slate-700">
+              <h3 className="text-base font-bold text-[#0F172A] dark:text-white flex items-center gap-2">
+                <Plus className="w-4 h-4 text-[#0EA5E9]" /> Create Maintenance Task
+              </h3>
+              <button onClick={() => { setShowCreate(false); setCreateError(null); }}
+                className="p-1.5 rounded-lg hover:bg-[#F8FAFC] dark:hover:bg-slate-700 transition-colors">
+                <X className="w-4 h-4 text-[#64748B]" />
+              </button>
             </div>
             <form onSubmit={handleCreate} className="p-6 space-y-4">
               {createError && (
-                <div className="p-3 bg-red-500/10 border border-red-500/20 rounded-xl text-red-600 dark:text-red-400 text-sm font-bold flex items-center gap-2">
+                <div className="p-3 bg-rose-50 dark:bg-rose-500/10 border border-rose-200 dark:border-rose-500/20 rounded-xl text-rose-700 dark:text-rose-300 text-sm font-semibold flex items-center gap-2">
                   <AlertTriangle className="w-4 h-4 flex-shrink-0" /> {createError}
                 </div>
               )}
+              {[
+                { label: "Resource ID *", field: "resourceId", placeholder: "e.g. a3f2...", type: "input" },
+                { label: "Title *", field: "title", placeholder: "Brief issue title", type: "input" },
+              ].map(({ label, field, placeholder }) => (
+                <div key={field}>
+                  <label className="block text-xs font-semibold text-[#64748B] dark:text-slate-400 uppercase tracking-wider mb-1.5">{label}</label>
+                  <input value={(form as any)[field]} onChange={e => setForm(p => ({ ...p, [field]: e.target.value }))}
+                    placeholder={placeholder}
+                    className="w-full px-4 py-2.5 bg-[#F8FAFC] dark:bg-slate-700 border border-[#E2E8F0] dark:border-slate-600 rounded-xl text-sm text-[#0F172A] dark:text-white placeholder:text-[#64748B] focus:outline-none focus:ring-2 focus:ring-[#0EA5E9]/50 transition-all" />
+                </div>
+              ))}
               <div>
-                <label className="block text-xs font-black text-slate-600 dark:text-foreground/60 uppercase tracking-widest mb-2">Resource ID *</label>
-                <input value={form.resourceId} onChange={e => setForm(p => ({ ...p, resourceId: e.target.value }))}
-                  placeholder="e.g. a3f2..." className="w-full px-4 py-3 bg-slate-50 dark:bg-foreground/5 border border-slate-200 dark:border-border rounded-xl text-sm font-bold focus:outline-none focus:ring-2 focus:ring-blue-500/40 text-foreground" />
-              </div>
-              <div>
-                <label className="block text-xs font-black text-slate-600 dark:text-foreground/60 uppercase tracking-widest mb-2">Title *</label>
-                <input value={form.title} onChange={e => setForm(p => ({ ...p, title: e.target.value }))}
-                  placeholder="Brief issue title" className="w-full px-4 py-3 bg-slate-50 dark:bg-foreground/5 border border-slate-200 dark:border-border rounded-xl text-sm font-bold focus:outline-none focus:ring-2 focus:ring-blue-500/40 text-foreground" />
-              </div>
-              <div>
-                <label className="block text-xs font-black text-slate-600 dark:text-foreground/60 uppercase tracking-widest mb-2">Description</label>
+                <label className="block text-xs font-semibold text-[#64748B] dark:text-slate-400 uppercase tracking-wider mb-1.5">Description</label>
                 <textarea value={form.description} onChange={e => setForm(p => ({ ...p, description: e.target.value }))}
                   rows={3} placeholder="Describe the issue in detail..."
-                  className="w-full px-4 py-3 bg-slate-50 dark:bg-foreground/5 border border-slate-200 dark:border-border rounded-xl text-sm font-bold focus:outline-none focus:ring-2 focus:ring-blue-500/40 resize-none text-foreground" />
+                  className="w-full px-4 py-2.5 bg-[#F8FAFC] dark:bg-slate-700 border border-[#E2E8F0] dark:border-slate-600 rounded-xl text-sm text-[#0F172A] dark:text-white placeholder:text-[#64748B] focus:outline-none focus:ring-2 focus:ring-[#0EA5E9]/50 resize-none transition-all" />
               </div>
               <div>
-                <label className="block text-xs font-black text-slate-600 dark:text-foreground/60 uppercase tracking-widest mb-2">Priority</label>
+                <label className="block text-xs font-semibold text-[#64748B] dark:text-slate-400 uppercase tracking-wider mb-1.5">Priority</label>
                 <select value={form.priority} onChange={e => setForm(p => ({ ...p, priority: e.target.value }))}
-                  className="w-full px-4 py-3 bg-slate-50 dark:bg-foreground/5 border border-slate-200 dark:border-border rounded-xl text-sm font-bold focus:outline-none focus:ring-2 focus:ring-blue-500/40 text-foreground">
+                  className="w-full px-4 py-2.5 bg-[#F8FAFC] dark:bg-slate-700 border border-[#E2E8F0] dark:border-slate-600 rounded-xl text-sm text-[#0F172A] dark:text-white focus:outline-none focus:ring-2 focus:ring-[#0EA5E9]/50 transition-all">
                   <option value="Low">Low</option>
                   <option value="Medium">Medium</option>
                   <option value="High">High</option>
@@ -468,26 +547,29 @@ function AdminMaintenanceDashboardContent() {
               </div>
               <div className="flex gap-3 pt-2">
                 <button type="button" onClick={() => { setShowCreate(false); setCreateError(null); }}
-                  className="flex-1 px-4 py-3 rounded-xl border border-slate-200 dark:border-border text-foreground font-black text-sm hover:bg-slate-50 dark:hover:bg-foreground/5 transition-all">
+                  className="flex-1 px-4 py-2.5 rounded-xl border border-[#E2E8F0] dark:border-slate-700 text-[#0F172A] dark:text-white font-semibold text-sm hover:bg-[#F8FAFC] dark:hover:bg-slate-700/50 transition-colors">
                   Cancel
                 </button>
                 <button type="submit" disabled={creating}
-                  className="flex-1 px-4 py-3 rounded-xl bg-brand-primary text-white font-black text-sm hover:opacity-90 transition-all disabled:opacity-50 flex items-center justify-center gap-2">
-                  {creating ? <><RefreshCcw className="w-4 h-4 animate-spin" /> Creating…</> : <><Plus className="w-4 h-4" /> Create Task</>}
+                  className="flex-1 px-4 py-2.5 rounded-xl bg-[#0EA5E9] hover:bg-[#0284C7] text-white font-semibold text-sm disabled:opacity-50 flex items-center justify-center gap-2 transition-colors shadow-sm shadow-sky-500/20">
+                  {creating ? <><Loader2 className="w-4 h-4 animate-spin" /> Creating…</> : <><Plus className="w-4 h-4" /> Create Task</>}
                 </button>
               </div>
             </form>
-          </div>
+          </motion.div>
         </div>
       )}
 
-      {/* Outcome Selection Modal */}
+      {/* ── Outcome Modal ── */}
       {completingTask && (
-        <div className="fixed inset-0 bg-black/60 backdrop-blur-sm z-50 flex items-center justify-center p-4">
-          <div className="bg-card border border-slate-200 dark:border-border rounded-3xl shadow-2xl w-full max-w-md overflow-hidden">
-            <div className="bg-slate-900 p-6 text-white relative">
-              <h3 className="text-xl font-black">Select Maintenance Outcome</h3>
-              <p className="text-slate-400 text-xs mt-1">Specify resolution to update resource status</p>
+        <div className="fixed inset-0 bg-[#0F172A]/40 backdrop-blur-sm z-50 flex items-center justify-center p-4">
+          <motion.div initial={{ opacity: 0, scale: 0.95 }} animate={{ opacity: 1, scale: 1 }}
+            className="bg-white dark:bg-slate-800 rounded-2xl border border-[#E2E8F0] dark:border-slate-700 shadow-xl w-full max-w-md overflow-hidden">
+            <div className="px-6 py-5 border-b border-[#E2E8F0] dark:border-slate-700">
+              <h3 className="text-base font-bold text-[#0F172A] dark:text-white flex items-center gap-2">
+                <CheckCircle2 className="w-4 h-4 text-[#0EA5E9]" /> Select Maintenance Outcome
+              </h3>
+              <p className="text-[#64748B] text-sm mt-1">Specify resolution to update resource status</p>
             </div>
             <div className="p-6 space-y-4">
               <div className="space-y-3">
@@ -496,101 +578,48 @@ function AdminMaintenanceDashboardContent() {
                   { value: "Faulty", label: "Faulty (Under Maintenance)", desc: "Keep resource status as 'Under Maintenance'" },
                   { value: "Decommissioned", label: "Decommissioned (Inactive)", desc: "Set resource status to 'Inactive' (retired)" }
                 ].map(opt => (
-                  <label key={opt.value} className={`flex items-start gap-3 p-3.5 rounded-2xl border-2 cursor-pointer transition-all ${
-                    outcome === opt.value 
-                      ? "border-brand-primary bg-blue-500/5 text-foreground animate-pulse-subtle" 
-                      : "border-slate-200 dark:border-border text-foreground hover:bg-slate-50 dark:hover:bg-white/[0.02]"
+                  <label key={opt.value} className={`flex items-start gap-3 p-4 rounded-xl border cursor-pointer transition-all ${
+                    outcome === opt.value
+                      ? "border-[#0EA5E9] bg-[#F0F9FF] dark:bg-sky-500/10 dark:border-sky-500/50"
+                      : "border-[#E2E8F0] dark:border-slate-700 hover:bg-[#F8FAFC] dark:hover:bg-slate-700/50"
                   }`}>
-                    <input 
-                      type="radio" 
-                      name="outcome" 
-                      value={opt.value} 
-                      checked={outcome === opt.value} 
-                      onChange={() => setOutcome(opt.value as any)}
-                      className="mt-1 accent-brand-primary"
-                    />
+                    <input type="radio" name="outcome" value={opt.value} checked={outcome === opt.value}
+                      onChange={() => setOutcome(opt.value as any)} className="mt-1 accent-[#0EA5E9]" />
                     <div>
-                      <div className="font-bold text-sm">{opt.label}</div>
-                      <div className="text-xs text-slate-400 dark:text-foreground/45 mt-0.5">{opt.desc}</div>
+                      <div className="font-semibold text-sm text-[#0F172A] dark:text-white">{opt.label}</div>
+                      <div className="text-[11px] text-[#64748B] dark:text-slate-400 mt-0.5">{opt.desc}</div>
                     </div>
                   </label>
                 ))}
               </div>
               <div className="flex gap-3 pt-2">
-                <button 
-                  type="button" 
-                  onClick={() => setCompletingTask(null)}
-                  className="flex-1 px-4 py-3 rounded-xl border border-slate-200 dark:border-border text-foreground font-black text-sm hover:bg-slate-50 dark:hover:bg-foreground/5 transition-all"
-                >
+                <button type="button" onClick={() => setCompletingTask(null)}
+                  className="flex-1 px-4 py-2.5 rounded-xl border border-[#E2E8F0] dark:border-slate-700 text-[#0F172A] dark:text-white font-semibold text-sm hover:bg-[#F8FAFC] dark:hover:bg-slate-700/50 transition-colors">
                   Cancel
                 </button>
-                <button 
-                  type="button" 
-                  onClick={async () => {
-                    await updateStatus(completingTask.rawId, "COMPLETED", outcome);
-                    setCompletingTask(null);
-                  }}
-                  className="flex-1 px-4 py-3 rounded-xl bg-brand-primary text-white font-black text-sm hover:opacity-90 transition-all flex items-center justify-center gap-2"
-                >
+                <button type="button" onClick={async () => {
+                  await updateStatus(completingTask.rawId, "COMPLETED", outcome);
+                  setCompletingTask(null);
+                }}
+                  className="flex-1 px-4 py-2.5 rounded-xl bg-[#0EA5E9] hover:bg-[#0284C7] text-white font-semibold text-sm flex items-center justify-center gap-2 transition-colors shadow-sm shadow-sky-500/20">
                   <CheckCircle2 className="w-4 h-4" /> Confirm & Complete
                 </button>
               </div>
             </div>
-          </div>
+          </motion.div>
         </div>
       )}
-    </div>
-  );
-}
-
-function StatCard({ title, value, icon: Icon, color, active, onClick }: any) {
-  const colors: Record<string, string> = {
-    blue: `bg-blue-500/10 text-blue-500 ${active ? "ring-2 ring-blue-500 border-blue-500" : "border-slate-200 dark:border-border"}`,
-    amber: `bg-amber-500/10 text-amber-500 ${active ? "ring-2 ring-amber-500 border-amber-500" : "border-slate-200 dark:border-border"}`,
-    emerald: `bg-emerald-500/10 text-emerald-500 ${active ? "ring-2 ring-emerald-500 border-emerald-500" : "border-slate-200 dark:border-border"}`,
-    red: `bg-red-500/10 text-red-500 ${active ? "ring-2 ring-red-500 border-red-500" : "border-slate-200 dark:border-border"}`,
-  };
-  const iconBg: Record<string, string> = {
-    blue: "bg-blue-500/10 text-blue-500", amber: "bg-amber-500/10 text-amber-500",
-    emerald: "bg-emerald-500/10 text-emerald-500", red: "bg-red-500/10 text-red-500",
-  };
-  return (
-    <div onClick={onClick} className={`cursor-pointer bg-card rounded-3xl p-6 shadow-xl border-2 transition-all hover:-translate-y-1 ${colors[color]}`}>
-      <div className={`p-3 rounded-2xl w-fit mb-4 ${iconBg[color]}`}><Icon className="w-6 h-6" /></div>
-      <p className="text-[10px] font-black text-slate-500 dark:text-foreground/40 uppercase tracking-widest mb-1">{title}</p>
-      <p className="text-4xl font-black text-foreground">{value}</p>
-    </div>
+    </motion.div>
   );
 }
 
-function StatusBadge({ status }: { status: string }) {
-  const map: Record<string, string> = {
-    "Pending": "bg-slate-100 text-slate-700 border-slate-200",
-    "In Progress": "bg-blue-50 text-blue-700 border-blue-200",
-    "Completed": "bg-emerald-50 text-emerald-700 border-emerald-200",
-  };
-  const dot: Record<string, string> = {
-    "Pending": "bg-slate-400", "In Progress": "bg-blue-500 animate-pulse", "Completed": "bg-emerald-500"
-  };
-  return (
-    <span className={`inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-bold border ${map[status] || "bg-slate-100 text-slate-700 border-slate-200"}`}>
-      <span className={`w-1.5 h-1.5 rounded-full ${dot[status] || "bg-slate-400"}`} />{status}
-    </span>
-  );
-}
-
-function PriorityBadge({ priority }: { priority: string }) {
-  const map: Record<string, string> = {
-    High: "text-red-700 bg-red-50 border border-red-200",
-    Medium: "text-amber-700 bg-amber-50 border border-amber-200",
-    Low: "text-slate-600 bg-slate-100 border border-slate-200",
-  };
-  return <span className={`inline-flex px-3 py-1 rounded-lg text-xs font-bold ${map[priority] || ""}`}>{priority}</span>;
-}
-
 export default function AdminMaintenanceDashboard() {
   return (
-    <Suspense fallback={<div className="max-w-7xl mx-auto px-4 py-10 text-center font-bold text-slate-500">Loading Maintenance...</div>}>
+    <Suspense fallback={
+      <div className="max-w-7xl mx-auto px-4 py-16 flex items-center justify-center">
+        <Loader2 className="w-8 h-8 animate-spin text-[#0EA5E9]" />
+      </div>
+    }>
       <AdminMaintenanceDashboardContent />
     </Suspense>
   );
diff --git a/app/maintenance/reports/page.tsx b/app/maintenance/reports/page.tsx
index 6132705..bea116d 100644
--- a/app/maintenance/reports/page.tsx
+++ b/app/maintenance/reports/page.tsx
@@ -3,6 +3,7 @@
 import React, { useState, useEffect, useMemo, useCallback } from "react";
 import { supabase } from "@/lib/supabase";
 import { useAuth } from "@/lib/auth-context";
+import { motion } from "framer-motion";
 import {
     FileText,
     Activity,
@@ -12,14 +13,19 @@ import {
     ShieldAlert,
     CalendarDays,
     Download,
-    Eye
+    Eye,
+    Loader2,
+    Filter
 } from "lucide-react";
 
-interface Resource {
-    id: string;
-    name: string;
-}
+/* ─── URMS Light Blue Design System ───────────────────────
+   primary     : #0EA5E9  teal : #0D9488
+   ink-main    : #0F172A  muted: #64748B
+   surface     : #FFFFFF  bg   : #F8FAFC
+   border      : #E2E8F0
+──────────────────────────────────────────────────────────── */
 
+interface Resource { id: string; name: string; }
 interface MaintenanceTicket {
     id: string;
     resourceId: string;
@@ -35,11 +41,23 @@ interface MaintenanceTicket {
 }
 
 const API = process.env.NEXT_PUBLIC_API_URL || "http://localhost:5000";
-
 const STATUS_DISPLAY: Record<string, string> = {
     OPEN: "Pending", IN_PROGRESS: "In Progress", COMPLETED: "Completed"
 };
 
+const fadeInUp = {
+    hidden: { opacity: 0, y: 20 },
+    visible: { opacity: 1, y: 0, transition: { duration: 0.45, ease: "easeOut" as const } },
+};
+const stagger = {
+    hidden: { opacity: 0 },
+    visible: { opacity: 1, transition: { staggerChildren: 0.07 } },
+};
+const cardVariant = {
+    hidden: { opacity: 0, y: 16 },
+    visible: { opacity: 1, y: 0, transition: { duration: 0.4 } },
+};
+
 export default function MaintenanceReportsPage() {
     const { user } = useAuth();
     const [resources, setResources] = useState<Resource[]>([]);
@@ -47,7 +65,6 @@ export default function MaintenanceReportsPage() {
     const [loading, setLoading] = useState(true);
     const [exporting, setExporting] = useState<string | null>(null);
 
-    // Filter states
     const [statusFilter, setStatusFilter] = useState("All");
     const [priorityFilter, setPriorityFilter] = useState("All");
     const [resourceFilter, setResourceFilter] = useState("All");
@@ -57,27 +74,18 @@ export default function MaintenanceReportsPage() {
         return "dev-token";
     }, [user]);
 
-    // Fetch resources for filter dropdown
     const fetchResources = async () => {
         try {
-            const { data, error } = await supabase
-                .from("resources")
-                .select("id, name")
-                .order("name");
+            const { data, error } = await supabase.from("resources").select("id, name").order("name");
             if (error) throw error;
             setResources((data || []).map(r => ({ id: r.id, name: r.name || `Resource #${r.id.slice(0, 8)}` })));
-        } catch (e) {
-            console.error("Failed to fetch resources:", e);
-        }
+        } catch (e) { console.error("Failed to fetch resources:", e); }
     };
 
-    // Fetch tickets matching filters
     const fetchTickets = useCallback(async () => {
         setLoading(true);
         try {
             const token = await getToken();
-            
-            // Build query params
             const params = new URLSearchParams();
             if (statusFilter !== "All") params.append("status", statusFilter);
             if (priorityFilter !== "All") params.append("priority", priorityFilter);
@@ -98,21 +106,14 @@ export default function MaintenanceReportsPage() {
         }
     }, [getToken, statusFilter, priorityFilter, resourceFilter]);
 
-    useEffect(() => {
-        fetchResources();
-    }, []);
-
-    useEffect(() => {
-        fetchTickets();
-    }, [fetchTickets]);
+    useEffect(() => { fetchResources(); }, []);
+    useEffect(() => { fetchTickets(); }, [fetchTickets]);
 
-    // Export PDF or Excel
     const handleExport = async (format: "pdf" | "excel") => {
         setExporting(format);
         try {
             const token = await getToken();
             const endpoint = format === "pdf" ? "report/pdf" : "report/excel";
-            
             const params = new URLSearchParams();
             if (statusFilter !== "All") params.append("status", statusFilter);
             if (priorityFilter !== "All") params.append("priority", priorityFilter);
@@ -122,11 +123,8 @@ export default function MaintenanceReportsPage() {
                 headers: { Authorization: `Bearer ${token}` }
             });
             if (!res.ok) {
-                if (res.status === 404) {
-                    alert("No data available for export with current filters.");
-                } else {
-                    throw new Error("Export failed");
-                }
+                if (res.status === 404) alert("No data available for export with current filters.");
+                else throw new Error("Export failed");
                 return;
             }
             const blob = await res.blob();
@@ -146,137 +144,130 @@ export default function MaintenanceReportsPage() {
         }
     };
 
-    // Calculate metrics of filtered dataset
-    const metrics = useMemo(() => {
-        const total = tickets.length;
-        const pending = tickets.filter(t => t.status === "OPEN").length;
-        const inProgress = tickets.filter(t => t.status === "IN_PROGRESS").length;
-        const completed = tickets.filter(t => t.status === "COMPLETED").length;
-        return { total, pending, inProgress, completed };
-    }, [tickets]);
+    const metrics = useMemo(() => ({
+        total: tickets.length,
+        pending: tickets.filter(t => t.status === "OPEN").length,
+        inProgress: tickets.filter(t => t.status === "IN_PROGRESS").length,
+        completed: tickets.filter(t => t.status === "COMPLETED").length,
+    }), [tickets]);
+
+    const statCards = [
+        { title: "Matched Records", value: metrics.total,     icon: ListTodo,    bg: "#F0F9FF", fg: "#0EA5E9" },
+        { title: "Pending",         value: metrics.pending,   icon: ShieldAlert, bg: "#FFFBEB", fg: "#D97706" },
+        { title: "In Progress",     value: metrics.inProgress,icon: Activity,    bg: "#EFF6FF", fg: "#3B82F6" },
+        { title: "Completed",       value: metrics.completed, icon: CheckCircle2,bg: "#CCFBF1", fg: "#0D9488" },
+    ];
 
     return (
-        <div className="min-h-screen bg-background p-4 md:p-8 font-sans">
-            <div className="max-w-7xl mx-auto space-y-8">
-                
-                {/* Header */}
-                <div className="relative overflow-hidden rounded-3xl bg-card border border-slate-200 dark:border-border p-8 shadow-2xl">
-                    <div className="absolute top-0 right-0 p-8 opacity-5 pointer-events-none">
-                        <FileText className="w-64 h-64 rotate-6 text-brand-primary" />
-                    </div>
-                    <div className="relative z-10 flex flex-col md:flex-row md:items-end justify-between gap-6">
+        <motion.div variants={stagger} initial="hidden" animate="visible" className="min-h-screen bg-[#F8FAFC] dark:bg-[#0F172A] p-4 md:p-8">
+            <div className="max-w-7xl mx-auto space-y-6">
+
+                {/* ── Hero Banner ── */}
+                <motion.div variants={fadeInUp} className="relative overflow-hidden rounded-2xl bg-gradient-to-br from-[#0EA5E9] to-[#0284C7] p-6 md:p-8 text-white shadow-lg shadow-sky-500/20">
+                    <div className="absolute -top-12 -right-12 w-48 h-48 rounded-full bg-white/10 pointer-events-none" />
+                    <div className="absolute -bottom-8 -left-8 w-36 h-36 rounded-full bg-white/5 pointer-events-none" />
+                    <div className="absolute top-4 right-32 w-20 h-20 rounded-full bg-[#0D9488]/20 pointer-events-none" />
+
+                    <div className="relative z-10 flex flex-col md:flex-row md:items-center justify-between gap-6">
                         <div>
-                            <div className="inline-flex items-center gap-2 px-3 py-1 bg-brand-primary/10 rounded-full text-sm font-semibold text-brand-primary mb-4 border border-brand-primary/20">
-                                <Activity className="w-4 h-4" /> Reporting Engine
+                            <div className="flex items-center gap-2 mb-2">
+                                <span className="inline-flex items-center gap-1.5 bg-white/20 backdrop-blur-sm px-3 py-1 rounded-full text-[11px] font-semibold uppercase tracking-wider">
+                                    <Activity className="w-3 h-3" /> Reporting Engine
+                                </span>
                             </div>
-                            <h1 className="text-4xl md:text-5xl font-black tracking-tight mb-2">
-                                Activity <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-indigo-500">Reports</span>
-                            </h1>
-                            <p className="text-slate-600 dark:text-foreground/50 text-lg font-medium max-w-xl">
+                            <h1 className="text-2xl md:text-3xl font-bold tracking-tight">Maintenance Activity Reports</h1>
+                            <p className="mt-1.5 text-sky-100 text-sm font-medium max-w-xl">
                                 Filter maintenance records, review status logs, and export high-fidelity PDF/Excel documents.
                             </p>
                         </div>
-                        <div className="flex gap-3">
+                        <div className="flex gap-3 shrink-0">
                             <button
                                 onClick={() => handleExport("pdf")}
                                 disabled={exporting !== null || tickets.length === 0}
-                                className="bg-brand-primary hover:opacity-90 disabled:opacity-50 px-6 py-3 rounded-xl text-white font-bold transition-all shadow-lg flex items-center gap-2"
+                                className="bg-white text-[#0284C7] hover:bg-sky-50 disabled:opacity-50 px-5 py-2.5 rounded-xl font-semibold text-sm transition-colors flex items-center gap-2 shadow-sm"
                             >
-                                <Download className="w-5 h-5" /> {exporting === "pdf" ? "Exporting PDF..." : "Export PDF"}
+                                <Download className="w-4 h-4" />
+                                {exporting === "pdf" ? "Exporting…" : "Export PDF"}
                             </button>
                             <button
                                 onClick={() => handleExport("excel")}
                                 disabled={exporting !== null || tickets.length === 0}
-                                className="bg-emerald-500 hover:opacity-90 disabled:opacity-50 px-6 py-3 rounded-xl text-white font-bold transition-all shadow-lg flex items-center gap-2"
+                                className="bg-white/15 hover:bg-white/25 backdrop-blur-sm disabled:opacity-50 px-5 py-2.5 rounded-xl text-white font-semibold text-sm border border-white/20 flex items-center gap-2 transition-colors"
                             >
-                                <Download className="w-5 h-5" /> {exporting === "excel" ? "Exporting Excel..." : "Export Excel"}
+                                <Download className="w-4 h-4" />
+                                {exporting === "excel" ? "Exporting…" : "Export Excel"}
                             </button>
                         </div>
                     </div>
-                </div>
+                </motion.div>
 
-                {/* Filters */}
-                <div className="bg-card border border-slate-200 dark:border-border rounded-3xl p-6 shadow-xl flex flex-col md:flex-row md:items-center justify-between gap-4">
-                    <div className="grid grid-cols-1 md:grid-cols-3 gap-4 flex-grow mr-0 md:mr-8">
-                        {/* Status */}
+                {/* ── Filters ── */}
+                <motion.div variants={fadeInUp} className="bg-white dark:bg-slate-800/60 rounded-xl border border-[#E2E8F0] dark:border-slate-700 shadow-sm p-5">
+                    <div className="flex items-center gap-2 mb-4">
+                        <Filter className="w-4 h-4 text-[#0EA5E9]" />
+                        <h2 className="text-sm font-bold text-[#0F172A] dark:text-white">Filter Reports</h2>
+                    </div>
+                    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                         <div>
-                            <label className="block text-xs font-black text-slate-500 dark:text-foreground/40 uppercase tracking-widest mb-2">Status</label>
-                            <select
-                                value={statusFilter}
-                                onChange={e => setStatusFilter(e.target.value)}
-                                className="w-full px-4 py-2.5 bg-slate-100 dark:bg-foreground/5 border border-slate-200 dark:border-border rounded-xl text-sm font-bold text-foreground focus:outline-none focus:ring-2 focus:ring-blue-500/40"
-                            >
+                            <label className="block text-[11px] font-semibold text-[#64748B] dark:text-slate-400 uppercase tracking-wider mb-1.5">Status</label>
+                            <select value={statusFilter} onChange={e => setStatusFilter(e.target.value)}
+                                className="w-full px-3 py-2.5 bg-[#F8FAFC] dark:bg-slate-700 border border-[#E2E8F0] dark:border-slate-600 rounded-xl text-sm font-semibold text-[#0F172A] dark:text-white focus:outline-none focus:ring-2 focus:ring-[#0EA5E9]/50 transition-all">
                                 <option value="All">All Statuses</option>
                                 <option value="OPEN">Pending (Open)</option>
                                 <option value="IN_PROGRESS">In Progress</option>
                                 <option value="COMPLETED">Completed</option>
                             </select>
                         </div>
-                        {/* Priority */}
                         <div>
-                            <label className="block text-xs font-black text-slate-500 dark:text-foreground/40 uppercase tracking-widest mb-2">Priority</label>
-                            <select
-                                value={priorityFilter}
-                                onChange={e => setPriorityFilter(e.target.value)}
-                                className="w-full px-4 py-2.5 bg-slate-100 dark:bg-foreground/5 border border-slate-200 dark:border-border rounded-xl text-sm font-bold text-foreground focus:outline-none focus:ring-2 focus:ring-blue-500/40"
-                            >
+                            <label className="block text-[11px] font-semibold text-[#64748B] dark:text-slate-400 uppercase tracking-wider mb-1.5">Priority</label>
+                            <select value={priorityFilter} onChange={e => setPriorityFilter(e.target.value)}
+                                className="w-full px-3 py-2.5 bg-[#F8FAFC] dark:bg-slate-700 border border-[#E2E8F0] dark:border-slate-600 rounded-xl text-sm font-semibold text-[#0F172A] dark:text-white focus:outline-none focus:ring-2 focus:ring-[#0EA5E9]/50 transition-all">
                                 <option value="All">All Priorities</option>
                                 <option value="Low">Low</option>
                                 <option value="Medium">Medium</option>
                                 <option value="High">High</option>
                             </select>
                         </div>
-                        {/* Resource */}
                         <div>
-                            <label className="block text-xs font-black text-slate-500 dark:text-foreground/40 uppercase tracking-widest mb-2">Resource</label>
-                            <select
-                                value={resourceFilter}
-                                onChange={e => setResourceFilter(e.target.value)}
-                                className="w-full px-4 py-2.5 bg-slate-100 dark:bg-foreground/5 border border-slate-200 dark:border-border rounded-xl text-sm font-bold text-foreground focus:outline-none focus:ring-2 focus:ring-blue-500/40"
-                            >
+                            <label className="block text-[11px] font-semibold text-[#64748B] dark:text-slate-400 uppercase tracking-wider mb-1.5">Resource</label>
+                            <select value={resourceFilter} onChange={e => setResourceFilter(e.target.value)}
+                                className="w-full px-3 py-2.5 bg-[#F8FAFC] dark:bg-slate-700 border border-[#E2E8F0] dark:border-slate-600 rounded-xl text-sm font-semibold text-[#0F172A] dark:text-white focus:outline-none focus:ring-2 focus:ring-[#0EA5E9]/50 transition-all">
                                 <option value="All">All Resources</option>
-                                {resources.map(r => (
-                                    <option key={r.id} value={r.id}>{r.name}</option>
-                                ))}
+                                {resources.map(r => <option key={r.id} value={r.id}>{r.name}</option>)}
                             </select>
                         </div>
                     </div>
-                    <button
-                        onClick={fetchTickets}
-                        title="Reload Data"
-                        className="p-3 bg-slate-100 dark:bg-foreground/5 border border-slate-200 dark:border-border rounded-xl hover:bg-slate-200 transition-colors self-end md:self-auto"
-                    >
-                        <RefreshCcw className="w-5 h-5 text-slate-500" />
-                    </button>
-                </div>
+                    <div className="flex justify-end mt-4">
+                        <button onClick={fetchTickets}
+                            className="inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-[#F0F9FF] dark:bg-sky-500/10 border border-[#E0F2FE] dark:border-sky-500/20 text-[#0EA5E9] font-semibold text-sm hover:bg-[#E0F2FE] dark:hover:bg-sky-500/20 transition-colors">
+                            <RefreshCcw className="w-3.5 h-3.5" /> Reload Data
+                        </button>
+                    </div>
+                </motion.div>
 
-                {/* Stats Summary cards */}
-                <div className="grid grid-cols-2 lg:grid-cols-4 gap-6">
-                    {[
-                        { title: "Matched Records", value: metrics.total, icon: ListTodo, color: "blue" },
-                        { title: "Pending", value: metrics.pending, icon: ShieldAlert, color: "amber" },
-                        { title: "In Progress", value: metrics.inProgress, icon: Activity, color: "indigo" },
-                        { title: "Completed", value: metrics.completed, icon: CheckCircle2, color: "emerald" },
-                    ].map((m, idx) => (
-                        <div key={idx} className="bg-card rounded-3xl p-6 shadow-xl border border-slate-200 dark:border-border flex items-center justify-between">
-                            <div>
-                                <p className="text-[10px] font-black text-slate-500 dark:text-foreground/40 uppercase tracking-widest mb-1">{m.title}</p>
-                                <p className="text-4xl font-black text-foreground">{loading ? "—" : m.value}</p>
+                {/* ── Stat Cards ── */}
+                <motion.div variants={stagger} className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+                    {statCards.map(({ title, value, icon: Icon, bg, fg }) => (
+                        <motion.div key={title} variants={cardVariant}
+                            className="bg-white dark:bg-slate-800/60 rounded-xl p-5 border border-[#E2E8F0] dark:border-slate-700 shadow-sm hover:shadow-md hover:-translate-y-0.5 transition-all duration-200">
+                            <div className="w-10 h-10 rounded-xl flex items-center justify-center mb-3" style={{ backgroundColor: bg }}>
+                                <Icon className="w-5 h-5" style={{ color: fg }} />
                             </div>
-                            <div className={`p-3 rounded-2xl bg-${m.color}-500/10 text-${m.color}-500`}>
-                                <m.icon className="w-6 h-6" />
-                            </div>
-                        </div>
+                            <p className="text-[11px] font-semibold text-[#64748B] dark:text-slate-400 uppercase tracking-wider">{title}</p>
+                            <p className="text-3xl font-bold text-[#0F172A] dark:text-white mt-1">
+                                {loading ? <Loader2 className="w-6 h-6 animate-spin opacity-30" /> : value}
+                            </p>
+                        </motion.div>
                     ))}
-                </div>
+                </motion.div>
 
-                {/* Preview Table */}
-                <div className="bg-card rounded-3xl shadow-xl border border-slate-200 dark:border-border overflow-hidden">
-                    <div className="p-6 md:p-8 border-b border-slate-200 dark:border-border flex items-center justify-between">
-                        <h2 className="text-2xl font-black text-foreground flex items-center gap-2">
-                            <Eye className="w-6 h-6 text-brand-primary" /> Report Preview
+                {/* ── Preview Table ── */}
+                <motion.div variants={fadeInUp} className="bg-white dark:bg-slate-800/60 rounded-xl border border-[#E2E8F0] dark:border-slate-700 shadow-sm overflow-hidden">
+                    <div className="px-6 py-5 border-b border-[#E2E8F0] dark:border-slate-700 flex items-center justify-between">
+                        <h2 className="text-base font-bold text-[#0F172A] dark:text-white flex items-center gap-2">
+                            <Eye className="w-4 h-4 text-[#0EA5E9]" /> Report Preview
                         </h2>
-                        <span className="text-xs font-black text-slate-400 dark:text-foreground/35 uppercase tracking-wider bg-slate-100 dark:bg-foreground/5 px-3.5 py-1.5 rounded-full border border-slate-200 dark:border-border">
+                        <span className="text-[11px] font-semibold text-[#64748B] dark:text-slate-400 bg-[#F8FAFC] dark:bg-slate-700 px-3 py-1 rounded-full border border-[#E2E8F0] dark:border-slate-600">
                             {tickets.length} tickets matched
                         </span>
                     </div>
@@ -284,18 +275,20 @@ export default function MaintenanceReportsPage() {
                     <div className="overflow-x-auto">
                         <table className="w-full text-left">
                             <thead>
-                                <tr className="bg-foreground/[0.02] border-b border-slate-200 dark:border-border">
+                                <tr className="bg-[#F8FAFC] dark:bg-slate-800/50 border-b border-[#E2E8F0] dark:border-slate-700">
                                     {["ID / Ticket", "Issue & Details", "Requested", "Status", "Priority", "Outcome"].map(h => (
-                                        <th key={h} className="px-6 py-4 font-black text-slate-505 dark:text-foreground/40 text-[10px] uppercase tracking-widest">{h}</th>
+                                        <th key={h} className="px-6 py-3.5 font-semibold text-[#64748B] dark:text-slate-400 text-[11px] uppercase tracking-wider">{h}</th>
                                     ))}
                                 </tr>
                             </thead>
-                            <tbody className="divide-y divide-border/50">
+                            <tbody className="divide-y divide-[#E2E8F0] dark:divide-slate-700">
                                 {loading ? (
                                     Array.from({ length: 4 }).map((_, i) => (
                                         <tr key={i}>
                                             {Array.from({ length: 6 }).map((_, j) => (
-                                                <td key={j} className="px-6 py-5"><div className="h-4 bg-slate-200 dark:bg-foreground/10 rounded animate-pulse w-20" /></td>
+                                                <td key={j} className="px-6 py-4">
+                                                    <div className="h-4 bg-slate-100 dark:bg-slate-700 rounded-lg animate-pulse w-20" />
+                                                </td>
                                             ))}
                                         </tr>
                                     ))
@@ -303,53 +296,57 @@ export default function MaintenanceReportsPage() {
                                     <tr>
                                         <td colSpan={6} className="px-6 py-16 text-center">
                                             <div className="inline-flex flex-col items-center gap-3">
-                                                <div className="w-14 h-14 rounded-2xl bg-slate-100 dark:bg-foreground/5 flex items-center justify-center"><FileText className="w-7 h-7 text-slate-400" /></div>
-                                                <p className="font-black text-foreground">No records found</p>
-                                                <p className="text-sm text-slate-500 dark:text-foreground/40 font-bold">No tasks match the active filters.</p>
+                                                <div className="w-14 h-14 rounded-2xl bg-[#F0F9FF] flex items-center justify-center">
+                                                    <FileText className="w-7 h-7 text-[#0EA5E9]" />
+                                                </div>
+                                                <p className="font-semibold text-[#0F172A] dark:text-white">No records found</p>
+                                                <p className="text-sm text-[#64748B] dark:text-slate-400">No tasks match the active filters.</p>
                                             </div>
                                         </td>
                                     </tr>
                                 ) : (
                                     tickets.map(ticket => {
-                                        const dateStr = ticket.created_at ? new Date(ticket.created_at).toLocaleDateString() : 'N/A';
-                                        
-                                        // Status styling
-                                        let statusBadge = "bg-slate-100 text-slate-700 border-slate-200";
-                                        if (ticket.status === "COMPLETED") statusBadge = "bg-emerald-50 text-emerald-700 border-emerald-250";
-                                        else if (ticket.status === "IN_PROGRESS") statusBadge = "bg-blue-50 text-blue-700 border-blue-250";
+                                        const dateStr = ticket.created_at ? new Date(ticket.created_at).toLocaleDateString() : "N/A";
+
+                                        const statusClass =
+                                            ticket.status === "COMPLETED" ? "bg-teal-50 text-teal-700 border-teal-200 dark:bg-teal-500/10 dark:text-teal-300 dark:border-teal-500/20" :
+                                            ticket.status === "IN_PROGRESS" ? "bg-sky-50 text-sky-700 border-sky-200 dark:bg-sky-500/10 dark:text-sky-300 dark:border-sky-500/20" :
+                                            "bg-amber-50 text-amber-700 border-amber-200 dark:bg-amber-500/10 dark:text-amber-300 dark:border-amber-500/20";
 
-                                        // Priority styling
-                                        let priorityBadge = "text-slate-600 bg-slate-100 border-slate-200";
-                                        if (ticket.priority === "High") priorityBadge = "text-red-700 bg-red-50 border-red-250";
-                                        else if (ticket.priority === "Medium") priorityBadge = "text-amber-700 bg-amber-50 border-amber-250";
+                                        const priorityClass =
+                                            ticket.priority === "High" ? "text-rose-700 bg-rose-50 border-rose-200 dark:bg-rose-500/10 dark:text-rose-300 dark:border-rose-500/20" :
+                                            ticket.priority === "Medium" ? "text-amber-700 bg-amber-50 border-amber-200 dark:bg-amber-500/10 dark:text-amber-300 dark:border-amber-500/20" :
+                                            "text-slate-600 bg-slate-50 border-slate-200 dark:bg-slate-500/10 dark:text-slate-300 dark:border-slate-500/20";
 
                                         return (
-                                            <tr key={ticket.id} className="hover:bg-foreground/[0.01] transition-colors">
-                                                <td className="px-6 py-5">
-                                                    <div className="font-black text-foreground text-sm">REQ-{ticket.id.slice(0, 8).toUpperCase()}</div>
-                                                    <div className="text-[10px] font-bold text-slate-450 dark:text-foreground/30 uppercase tracking-widest mt-0.5">Resource: {ticket.resourceName || `#${ticket.resourceId.slice(0, 8)}`}</div>
+                                            <tr key={ticket.id} className="hover:bg-[#F8FAFC] dark:hover:bg-slate-700/30 transition-colors">
+                                                <td className="px-6 py-4">
+                                                    <div className="font-semibold text-[#0F172A] dark:text-white text-sm">REQ-{ticket.id.slice(0, 8).toUpperCase()}</div>
+                                                    <div className="text-[11px] text-[#64748B] dark:text-slate-400 mt-0.5">Resource: {ticket.resourceName || `#${ticket.resourceId.slice(0, 8)}`}</div>
                                                 </td>
-                                                <td className="px-6 py-5 max-w-sm">
-                                                    <p className="font-bold text-slate-800 dark:text-foreground/80 text-sm line-clamp-1">{ticket.title}</p>
-                                                    <p className="text-xs text-slate-400 dark:text-foreground/35 mt-0.5 line-clamp-1">{ticket.description}</p>
+                                                <td className="px-6 py-4 max-w-sm">
+                                                    <p className="font-semibold text-[#0F172A] dark:text-white text-sm line-clamp-1">{ticket.title}</p>
+                                                    <p className="text-[11px] text-[#64748B] dark:text-slate-400 mt-0.5 line-clamp-1">{ticket.description}</p>
                                                 </td>
-                                                <td className="px-6 py-5">
-                                                    <div className="flex items-center gap-2 text-xs text-slate-600 dark:text-foreground/60 font-bold">
-                                                        <CalendarDays className="w-3.5 h-3.5 text-slate-400" /> {dateStr}
+                                                <td className="px-6 py-4">
+                                                    <div className="flex items-center gap-1.5 text-[11px] text-[#64748B] dark:text-slate-400">
+                                                        <CalendarDays className="w-3.5 h-3.5" /> {dateStr}
                                                     </div>
                                                 </td>
-                                                <td className="px-6 py-5">
-                                                    <span className={`inline-flex items-center px-2.5 py-1 rounded-full text-xs font-bold border ${statusBadge}`}>
+                                                <td className="px-6 py-4">
+                                                    <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-[11px] font-semibold border ${statusClass}`}>
                                                         {STATUS_DISPLAY[ticket.status] || ticket.status}
                                                     </span>
                                                 </td>
-                                                <td className="px-6 py-5">
-                                                    <span className={`inline-flex px-2.5 py-1 rounded-lg text-xs font-bold border ${priorityBadge}`}>
+                                                <td className="px-6 py-4">
+                                                    <span className={`inline-flex px-2.5 py-0.5 rounded-full text-[11px] font-semibold border ${priorityClass}`}>
                                                         {ticket.priority}
                                                     </span>
                                                 </td>
-                                                <td className="px-6 py-5 font-bold text-slate-700 dark:text-foreground/75 text-xs">
-                                                    {ticket.status === "COMPLETED" ? (ticket.outcome || "Fixed") : "—"}
+                                                <td className="px-6 py-4 text-sm font-semibold text-[#64748B] dark:text-slate-400">
+                                                    {ticket.status === "COMPLETED" ? (
+                                                        <span className="text-teal-600 dark:text-teal-400">{ticket.outcome || "Fixed"}</span>
+                                                    ) : "—"}
                                                 </td>
                                             </tr>
                                         );
@@ -358,9 +355,8 @@ export default function MaintenanceReportsPage() {
                             </tbody>
                         </table>
                     </div>
-                </div>
-
+                </motion.div>
             </div>
-        </div>
+        </motion.div>
     );
 }
diff --git a/app/maintenance/request/page.tsx b/app/maintenance/request/page.tsx
index e284f87..4363290 100644
--- a/app/maintenance/request/page.tsx
+++ b/app/maintenance/request/page.tsx
@@ -136,7 +136,7 @@ export default function MaintenanceRequestPage() {
 
   return (
     <div className="flex-grow flex items-center justify-center p-4 md:p-8 bg-slate-50 min-h-[calc(100vh-140px)]">
-      <div className="w-full max-w-2xl bg-white rounded-3xl shadow-xl border border-slate-100 overflow-hidden transform transition-all">
+      <div className="w-full max-w-2xl bg-white rounded-none border-2 border-foreground shadow-[4px_4px_0_0_rgba(0,0,0,1)] dark:shadow-[4px_4px_0_0_rgba(255,255,255,0.2)] border border-slate-100 overflow-hidden transform transition-all">
         {/* Header Section */}
         <div className="bg-brand-primary p-8 text-white relative">
           <div className="relative z-10">
@@ -146,14 +146,14 @@ export default function MaintenanceRequestPage() {
             </p>
           </div>
           {/* Subtle background decoration */}
-          <div className="absolute top-0 right-0 -mt-8 -mr-8 w-32 h-32 bg-slate-100 dark:bg-white/10 rounded-full blur-2xl"></div>
-          <div className="absolute bottom-0 left-0 -mb-8 -ml-8 w-24 h-24 bg-brand-accent/20 rounded-full blur-xl"></div>
+          <div className="absolute top-0 right-0 -mt-8 -mr-8 w-32 h-32 bg-slate-100 dark:bg-white/10 rounded-none blur-2xl"></div>
+          <div className="absolute bottom-0 left-0 -mb-8 -ml-8 w-24 h-24 bg-brand-accent/20 rounded-none blur-xl"></div>
         </div>
 
         <div className="p-8">
           {isSubmitted ? (
             <div className="py-12 text-center space-y-4 animate-in fade-in zoom-in duration-300">
-              <div className="bg-brand-success/10 w-20 h-20 rounded-full flex items-center justify-center mx-auto text-brand-success">
+              <div className="bg-brand-success/10 w-20 h-20 rounded-none flex items-center justify-center mx-auto text-brand-success">
                 <svg xmlns="http://www.w3.org/2000/svg" className="h-10 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
                 </svg>
@@ -172,8 +172,8 @@ export default function MaintenanceRequestPage() {
           ) : (
             <form onSubmit={handleSubmit} className="space-y-6">
               {submissionError && (
-                <div className="p-4 bg-red-500/10 border border-red-500/20 text-red-655 dark:text-red-400 text-sm font-semibold rounded-2xl flex items-center gap-2">
-                  <span className="w-2 h-2 rounded-full bg-red-500 animate-pulse shrink-0" />
+                <div className="p-4 bg-red-500/10 border border-red-500/20 text-red-655 dark:text-red-400 text-sm font-semibold rounded-none flex items-center gap-2">
+                  <span className="w-2 h-2 rounded-none bg-red-500 animate-pulse shrink-0" />
                   {submissionError}
                 </div>
               )}
@@ -185,7 +185,7 @@ export default function MaintenanceRequestPage() {
                 </label>
                 <div className="relative">
                   {loadingResources ? (
-                    <div className="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl flex items-center gap-2">
+                    <div className="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-none flex items-center gap-2">
                       <Loader2 className="w-4 h-4 animate-spin text-brand-primary" />
                       <span className="text-sm font-bold text-slate-400">Loading resources...</span>
                     </div>
@@ -196,7 +196,7 @@ export default function MaintenanceRequestPage() {
                       value={formData.resource}
                       onChange={handleChange}
                       disabled={submitting}
-                      className={`w-full appearance-none px-4 py-3 bg-slate-55 border rounded-xl focus:ring-4 focus:ring-brand-primary/10 focus:border-brand-primary outline-none transition-all cursor-pointer ${
+                      className={`w-full appearance-none px-4 py-3 bg-slate-55 border rounded-none focus:ring-4 focus:ring-brand-primary/10 focus:border-brand-primary outline-none transition-all cursor-pointer ${
                         errors.resource ? "border-brand-danger bg-red-50" : "border-slate-200"
                       }`}
                     >
@@ -239,7 +239,7 @@ export default function MaintenanceRequestPage() {
                   value={formData.description}
                   onChange={handleChange}
                   disabled={submitting}
-                  className={`w-full px-4 py-3 bg-slate-50 border rounded-xl focus:ring-4 focus:ring-brand-primary/10 focus:border-brand-primary outline-none transition-all resize-none placeholder:text-slate-400 ${
+                  className={`w-full px-4 py-3 bg-slate-50 border rounded-none focus:ring-4 focus:ring-brand-primary/10 focus:border-brand-primary outline-none transition-all resize-none placeholder:text-slate-400 ${
                     errors.description ? "border-brand-danger bg-red-50" : "border-slate-200"
                   }`}
                 ></textarea>
@@ -266,7 +266,7 @@ export default function MaintenanceRequestPage() {
                     value={formData.date}
                     onChange={handleChange}
                     disabled={submitting}
-                    className="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl focus:ring-4 focus:ring-brand-primary/10 focus:border-brand-primary outline-none transition-all"
+                    className="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-none focus:ring-4 focus:ring-brand-primary/10 focus:border-brand-primary outline-none transition-all"
                   />
                 </div>
 
@@ -282,7 +282,7 @@ export default function MaintenanceRequestPage() {
                       value={formData.priority}
                       onChange={handleChange}
                       disabled={submitting}
-                      className="w-full appearance-none px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl focus:ring-4 focus:ring-brand-primary/10 focus:border-brand-primary outline-none transition-all cursor-pointer"
+                      className="w-full appearance-none px-4 py-3 bg-slate-50 border border-slate-200 rounded-none focus:ring-4 focus:ring-brand-primary/10 focus:border-brand-primary outline-none transition-all cursor-pointer"
                     >
                       <option value="Low">Low - Improvement / Minor</option>
                       <option value="Medium">Medium - Normal usage affected</option>
@@ -302,7 +302,7 @@ export default function MaintenanceRequestPage() {
                 <button
                   type="submit"
                   disabled={submitting}
-                  className="w-full bg-brand-primary hover:bg-brand-secondary active:scale-[0.98] text-white font-bold py-4 px-6 rounded-xl shadow-lg shadow-brand-primary/20 transition-all duration-200 flex items-center justify-center gap-2 group disabled:opacity-60"
+                  className="w-full bg-brand-primary hover:bg-brand-secondary active:scale-[0.98] text-white font-bold py-4 px-6 rounded-none border-2 border-foreground shadow-[4px_4px_0_0_rgba(0,0,0,1)] dark:shadow-[4px_4px_0_0_rgba(255,255,255,0.2)] shadow-brand-primary/20 transition-all duration-200 flex items-center justify-center gap-2 group disabled:opacity-60"
                 >
                   {submitting ? (
                     <><Loader2 className="w-5 h-5 animate-spin" /> Submitting Request…</>
diff --git a/app/maintenance/resources/page.tsx b/app/maintenance/resources/page.tsx
index 669db33..4c7d79a 100644
--- a/app/maintenance/resources/page.tsx
+++ b/app/maintenance/resources/page.tsx
@@ -2,6 +2,7 @@
 
 import React, { useState, useEffect, useMemo } from "react";
 import { supabase } from "@/lib/supabase";
+import { motion } from "framer-motion";
 import {
     Search,
     Wrench,
@@ -11,13 +12,20 @@ import {
     RefreshCcw,
     Database,
     ShieldAlert,
-    ChevronDown,
     Building2,
     FlaskConical,
     DoorOpen,
-    Package
+    Package,
+    Loader2,
+    MapPin
 } from "lucide-react";
-import { motion } from "framer-motion";
+
+/* ─── URMS Light Blue Design System ───────────────────────
+   primary     : #0EA5E9  teal : #0D9488
+   ink-main    : #0F172A  muted: #64748B
+   surface     : #FFFFFF  bg   : #F8FAFC
+   border      : #E2E8F0
+──────────────────────────────────────────────────────────── */
 
 interface Resource {
     id: string;
@@ -29,13 +37,16 @@ interface Resource {
 }
 
 const fadeInUp = {
-    hidden: { opacity: 0, y: 15 },
-    visible: { opacity: 1, y: 0, transition: { duration: 0.4 } },
+    hidden: { opacity: 0, y: 20 },
+    visible: { opacity: 1, y: 0, transition: { duration: 0.45, ease: "easeOut" as const } },
 };
-
-const staggerContainer = {
+const stagger = {
     hidden: { opacity: 0 },
-    visible: { opacity: 1, transition: { staggerChildren: 0.08 } },
+    visible: { opacity: 1, transition: { staggerChildren: 0.07 } },
+};
+const cardVariant = {
+    hidden: { opacity: 0, y: 16 },
+    visible: { opacity: 1, y: 0, transition: { duration: 0.4 } },
 };
 
 export default function MaintenanceResourcesPage() {
@@ -72,9 +83,7 @@ export default function MaintenanceResourcesPage() {
         }
     };
 
-    useEffect(() => {
-        fetchResources();
-    }, []);
+    useEffect(() => { fetchResources(); }, []);
 
     const handleUpdateStatus = async (id: string, newStatus: string) => {
         setUpdatingId(id);
@@ -85,10 +94,7 @@ export default function MaintenanceResourcesPage() {
                 .update({ availability_status: newStatus })
                 .eq("id", id);
             if (err) throw err;
-            
-            setResources(prev =>
-                prev.map(r => r.id === id ? { ...r, availability_status: newStatus } : r)
-            );
+            setResources(prev => prev.map(r => r.id === id ? { ...r, availability_status: newStatus } : r));
         } catch (err: any) {
             console.error("Error updating resource status:", err);
             setError(err.message || "Failed to update resource status");
@@ -97,21 +103,20 @@ export default function MaintenanceResourcesPage() {
         }
     };
 
-    // Calculate metrics
-    const stats = useMemo(() => {
-        const total = resources.length;
-        const available = resources.filter(r => r.availability_status === "Available").length;
-        const inMaintenance = resources.filter(r => r.availability_status === "Maintenance" || r.availability_status === "Under Maintenance").length;
-        const inactive = resources.filter(r => r.availability_status === "Inactive" || r.availability_status === "Decommissioned").length;
-        return { total, available, inMaintenance, inactive };
-    }, [resources]);
+    const stats = useMemo(() => ({
+        total: resources.length,
+        available: resources.filter(r => r.availability_status === "Available").length,
+        inMaintenance: resources.filter(r => r.availability_status === "Maintenance" || r.availability_status === "Under Maintenance").length,
+        inactive: resources.filter(r => r.availability_status === "Inactive" || r.availability_status === "Decommissioned").length,
+    }), [resources]);
 
     const filteredResources = useMemo(() => {
         return resources.filter(r => {
             const q = search.toLowerCase();
             const matchesSearch = r.name.toLowerCase().includes(q) || r.location.toLowerCase().includes(q) || r.id.toLowerCase().includes(q);
             const matchesType = typeFilter === "All" || r.type === typeFilter;
-            const matchesStatus = statusFilter === "All" || 
+            const matchesStatus =
+                statusFilter === "All" ||
                 (statusFilter === "Maintenance" && (r.availability_status === "Maintenance" || r.availability_status === "Under Maintenance")) ||
                 (statusFilter === "Inactive" && (r.availability_status === "Inactive" || r.availability_status === "Decommissioned")) ||
                 (statusFilter === r.availability_status);
@@ -130,92 +135,105 @@ export default function MaintenanceResourcesPage() {
 
     const getCategoryColor = (category: string) => {
         switch (category) {
-            case "Labs": return "bg-purple-500/10 text-purple-600 dark:text-purple-400 border border-purple-500/20";
-            case "Lecture Halls": return "bg-blue-500/10 text-blue-600 dark:text-blue-400 border border-blue-500/20";
-            case "Rooms": return "bg-teal-500/10 text-teal-600 dark:text-teal-400 border border-teal-500/20";
-            default: return "bg-slate-500/10 text-slate-600 dark:text-foreground/60 border border-slate-550/20";
+            case "Labs": return "bg-purple-50 text-purple-700 border-purple-200 dark:bg-purple-500/10 dark:text-purple-300 dark:border-purple-500/20";
+            case "Lecture Halls": return "bg-sky-50 text-sky-700 border-sky-200 dark:bg-sky-500/10 dark:text-sky-300 dark:border-sky-500/20";
+            case "Rooms": return "bg-teal-50 text-teal-700 border-teal-200 dark:bg-teal-500/10 dark:text-teal-300 dark:border-teal-500/20";
+            default: return "bg-slate-50 text-slate-600 border-slate-200 dark:bg-slate-500/10 dark:text-slate-300 dark:border-slate-500/20";
         }
     };
 
+    const getStatusBadge = (status: string) => {
+        if (status === "Available")
+            return { cls: "bg-teal-50 text-teal-700 border-teal-200 dark:bg-teal-500/10 dark:text-teal-300 dark:border-teal-500/20", dot: "bg-teal-500" };
+        if (status === "Booked")
+            return { cls: "bg-sky-50 text-sky-700 border-sky-200 dark:bg-sky-500/10 dark:text-sky-300 dark:border-sky-500/20", dot: "bg-sky-500 animate-pulse" };
+        if (status === "Maintenance" || status === "Under Maintenance")
+            return { cls: "bg-amber-50 text-amber-700 border-amber-200 dark:bg-amber-500/10 dark:text-amber-300 dark:border-amber-500/20", dot: "bg-amber-500 animate-pulse" };
+        if (status === "Inactive" || status === "Decommissioned")
+            return { cls: "bg-rose-50 text-rose-700 border-rose-200 dark:bg-rose-500/10 dark:text-rose-300 dark:border-rose-500/20", dot: "bg-rose-500" };
+        return { cls: "bg-slate-50 text-slate-600 border-slate-200", dot: "bg-slate-400" };
+    };
+
     return (
-        <div className="min-h-screen bg-background p-4 md:p-8 font-sans">
-            <div className="max-w-7xl mx-auto space-y-8">
-                
-                {/* Header */}
-                <div className="relative overflow-hidden rounded-3xl bg-card border border-slate-200 dark:border-border p-8 shadow-2xl">
-                    <div className="absolute top-0 right-0 p-8 opacity-5 pointer-events-none">
-                        <Wrench className="w-64 h-64 rotate-45 text-amber-500" />
-                    </div>
-                    <div className="relative z-10 flex flex-col md:flex-row md:items-end justify-between gap-6">
+        <motion.div variants={stagger} initial="hidden" animate="visible" className="min-h-screen bg-[#F8FAFC] dark:bg-[#0F172A] p-4 md:p-8">
+            <div className="max-w-7xl mx-auto space-y-6">
+
+                {/* ── Hero Banner ── */}
+                <motion.div variants={fadeInUp} className="relative overflow-hidden rounded-2xl bg-gradient-to-br from-[#0EA5E9] to-[#0284C7] p-6 md:p-8 text-white shadow-lg shadow-sky-500/20">
+                    <div className="absolute -top-12 -right-12 w-48 h-48 rounded-full bg-white/10 pointer-events-none" />
+                    <div className="absolute -bottom-8 -left-8 w-36 h-36 rounded-full bg-white/5 pointer-events-none" />
+                    <div className="absolute top-4 right-32 w-20 h-20 rounded-full bg-[#0D9488]/20 pointer-events-none" />
+
+                    <div className="relative z-10 flex flex-col md:flex-row md:items-center justify-between gap-6">
                         <div>
-                            <div className="inline-flex items-center gap-2 px-3 py-1 bg-amber-500/10 rounded-full text-sm font-semibold text-amber-600 dark:text-amber-400 mb-4 border border-amber-500/20">
-                                <ShieldAlert className="w-4 h-4" /> Resource Management
+                            <div className="flex items-center gap-2 mb-2">
+                                <span className="inline-flex items-center gap-1.5 bg-white/20 backdrop-blur-sm px-3 py-1 rounded-full text-[11px] font-semibold uppercase tracking-wider">
+                                    <ShieldAlert className="w-3 h-3" /> Resource Management
+                                </span>
                             </div>
-                            <h1 className="text-4xl md:text-5xl font-black tracking-tight mb-2">
-                                Resource <span className="text-transparent bg-clip-text bg-gradient-to-r from-amber-500 to-orange-500">Condition</span> Updates
-                            </h1>
-                            <p className="text-slate-600 dark:text-foreground/50 text-lg font-medium max-w-xl">
+                            <h1 className="text-2xl md:text-3xl font-bold tracking-tight">Resource Condition Updates</h1>
+                            <p className="mt-1.5 text-sky-100 text-sm font-medium max-w-xl">
                                 Instantly modify availability status, mark units under repair, and record decommissioned equipment.
                             </p>
                         </div>
                         <button
                             onClick={fetchResources}
-                            className="bg-card hover:bg-slate-100 dark:hover:bg-foreground/5 px-6 py-3 rounded-xl text-foreground font-bold border border-slate-200 dark:border-border flex items-center justify-center gap-2 self-start md:self-auto transition-colors"
+                            className="bg-white/15 hover:bg-white/25 backdrop-blur-sm px-5 py-2.5 rounded-xl text-white font-semibold text-sm border border-white/20 flex items-center gap-2 transition-colors self-start md:self-auto"
                         >
-                            <RefreshCcw className="w-5 h-5 text-amber-500" /> Refresh List
+                            <RefreshCcw className="w-4 h-4" /> Refresh List
                         </button>
                     </div>
-                </div>
+                </motion.div>
 
-                {/* Statistics Cards */}
-                <div className="grid grid-cols-2 lg:grid-cols-4 gap-6">
+                {/* ── Stat Cards ── */}
+                <motion.div variants={stagger} className="grid grid-cols-2 lg:grid-cols-4 gap-4">
                     {[
-                        { label: "Total Assets", value: stats.total, icon: Database, color: "text-blue-500 bg-blue-500/10 border-blue-500/20" },
-                        { label: "Available / Active", value: stats.available, icon: CheckCircle2, color: "text-emerald-500 bg-emerald-500/10 border-emerald-500/20" },
-                        { label: "Under Maintenance", value: stats.inMaintenance, icon: Wrench, color: "text-amber-500 bg-amber-500/10 border-amber-500/20" },
-                        { label: "Inactive / Retired", value: stats.inactive, icon: XCircle, color: "text-red-500 bg-red-500/10 border-red-500/20" }
-                    ].map((card, idx) => (
-                        <div key={idx} className={`bg-card rounded-3xl p-6 shadow-xl border-2 flex items-center justify-between ${card.color}`}>
-                            <div>
-                                <p className="text-[10px] font-black text-slate-500 dark:text-foreground/40 uppercase tracking-widest mb-1">{card.label}</p>
-                                <p className="text-4xl font-black text-foreground">{loading ? "—" : card.value}</p>
+                        { label: "Total Assets",        value: stats.total,         icon: Database,    bg: "#F0F9FF", fg: "#0EA5E9" },
+                        { label: "Available / Active",  value: stats.available,     icon: CheckCircle2,bg: "#CCFBF1", fg: "#0D9488" },
+                        { label: "Under Maintenance",   value: stats.inMaintenance, icon: Wrench,      bg: "#FFFBEB", fg: "#D97706" },
+                        { label: "Inactive / Retired",  value: stats.inactive,      icon: XCircle,     bg: "#FFF1F2", fg: "#E11D48" },
+                    ].map(({ label, value, icon: Icon, bg, fg }) => (
+                        <motion.div key={label} variants={cardVariant}
+                            className="bg-white dark:bg-slate-800/60 rounded-xl p-5 border border-[#E2E8F0] dark:border-slate-700 shadow-sm hover:shadow-md hover:-translate-y-0.5 transition-all duration-200">
+                            <div className="w-10 h-10 rounded-xl flex items-center justify-center mb-3" style={{ backgroundColor: bg }}>
+                                <Icon className="w-5 h-5" style={{ color: fg }} />
                             </div>
-                            <div className="p-3.5 rounded-2xl bg-white/10 dark:bg-black/10">
-                                <card.icon className="w-6 h-6" />
-                            </div>
-                        </div>
+                            <p className="text-[11px] font-semibold text-[#64748B] dark:text-slate-400 uppercase tracking-wider">{label}</p>
+                            <p className="text-3xl font-bold text-[#0F172A] dark:text-white mt-1">
+                                {loading ? <Loader2 className="w-6 h-6 animate-spin opacity-30" /> : value}
+                            </p>
+                        </motion.div>
                     ))}
-                </div>
+                </motion.div>
 
-                {/* Error Banner */}
+                {/* ── Error Banner ── */}
                 {error && (
-                    <div className="p-4 bg-red-500/10 border border-red-500/20 rounded-2xl text-red-600 dark:text-red-400 text-sm font-bold flex items-center gap-2">
+                    <div className="p-4 bg-rose-50 dark:bg-rose-500/10 border border-rose-200 dark:border-rose-500/20 rounded-xl text-rose-700 dark:text-rose-300 text-sm font-semibold flex items-center gap-2">
                         <ShieldAlert className="w-4 h-4 flex-shrink-0" /> {error}
                     </div>
                 )}
 
-                {/* Table Container */}
-                <div className="bg-card rounded-3xl shadow-xl border border-slate-200 dark:border-border overflow-hidden">
-                    {/* Filters Header */}
-                    <div className="p-6 md:p-8 border-b border-slate-200 dark:border-border flex flex-col md:flex-row md:items-center justify-between gap-4">
-                        <h2 className="text-2xl font-black text-foreground">Operational Catalog</h2>
+                {/* ── Table ── */}
+                <motion.div variants={fadeInUp} className="bg-white dark:bg-slate-800/60 rounded-xl border border-[#E2E8F0] dark:border-slate-700 shadow-sm overflow-hidden">
+                    {/* Table header / filters */}
+                    <div className="px-6 py-5 border-b border-[#E2E8F0] dark:border-slate-700 flex flex-col md:flex-row md:items-center justify-between gap-4">
+                        <h2 className="text-base font-bold text-[#0F172A] dark:text-white flex items-center gap-2">
+                            <Database className="w-4 h-4 text-[#0EA5E9]" /> Operational Catalog
+                        </h2>
                         <div className="flex gap-3 flex-wrap w-full md:w-auto">
                             {/* Search */}
                             <div className="relative flex-grow md:flex-grow-0">
-                                <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
+                                <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[#64748B]" />
                                 <input
                                     value={search}
                                     onChange={e => setSearch(e.target.value)}
                                     placeholder="Search resources..."
-                                    className="w-full md:w-56 pl-9 pr-4 py-2.5 bg-slate-100 dark:bg-foreground/5 border border-slate-200 dark:border-border rounded-xl text-sm font-bold text-foreground placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-amber-500/40"
+                                    className="w-full md:w-56 pl-9 pr-4 py-2 bg-[#F8FAFC] dark:bg-slate-800 border border-[#E2E8F0] dark:border-slate-700 rounded-lg text-sm text-[#0F172A] dark:text-white placeholder:text-[#64748B] focus:outline-none focus:ring-2 focus:ring-[#0EA5E9]/50 transition-all"
                                 />
                             </div>
                             {/* Type Filter */}
-                            <select
-                                value={typeFilter}
-                                onChange={e => setTypeFilter(e.target.value)}
-                                className="px-4 py-2.5 bg-slate-100 dark:bg-foreground/5 border border-slate-200 dark:border-border rounded-xl text-sm font-bold text-foreground focus:outline-none focus:ring-2 focus:ring-amber-500/40"
-                            >
+                            <select value={typeFilter} onChange={e => setTypeFilter(e.target.value)}
+                                className="px-3 py-2 bg-[#F8FAFC] dark:bg-slate-800 border border-[#E2E8F0] dark:border-slate-700 rounded-lg text-sm font-semibold text-[#0F172A] dark:text-white focus:outline-none focus:ring-2 focus:ring-[#0EA5E9]/50 transition-all">
                                 <option value="All">All Types</option>
                                 <option value="Lecture Halls">Lecture Halls</option>
                                 <option value="Labs">Labs</option>
@@ -224,11 +242,8 @@ export default function MaintenanceResourcesPage() {
                                 <option value="Vehicles">Vehicles</option>
                             </select>
                             {/* Status Filter */}
-                            <select
-                                value={statusFilter}
-                                onChange={e => setStatusFilter(e.target.value)}
-                                className="px-4 py-2.5 bg-slate-100 dark:bg-foreground/5 border border-slate-200 dark:border-border rounded-xl text-sm font-bold text-foreground focus:outline-none focus:ring-2 focus:ring-amber-500/40"
-                            >
+                            <select value={statusFilter} onChange={e => setStatusFilter(e.target.value)}
+                                className="px-3 py-2 bg-[#F8FAFC] dark:bg-slate-800 border border-[#E2E8F0] dark:border-slate-700 rounded-lg text-sm font-semibold text-[#0F172A] dark:text-white focus:outline-none focus:ring-2 focus:ring-[#0EA5E9]/50 transition-all">
                                 <option value="All">All Statuses</option>
                                 <option value="Available">Available</option>
                                 <option value="Booked">Booked</option>
@@ -238,22 +253,23 @@ export default function MaintenanceResourcesPage() {
                         </div>
                     </div>
 
-                    {/* Table View */}
                     <div className="overflow-x-auto">
                         <table className="w-full text-left">
                             <thead>
-                                <tr className="bg-foreground/[0.02] border-b border-slate-200 dark:border-border">
+                                <tr className="bg-[#F8FAFC] dark:bg-slate-800/50 border-b border-[#E2E8F0] dark:border-slate-700">
                                     {["Resource Name", "Location", "Category", "Operational Status", "Quick Status Update"].map(h => (
-                                        <th key={h} className="px-6 py-4 font-black text-slate-505 dark:text-foreground/40 text-[10px] uppercase tracking-widest">{h}</th>
+                                        <th key={h} className="px-6 py-3.5 font-semibold text-[#64748B] dark:text-slate-400 text-[11px] uppercase tracking-wider">{h}</th>
                                     ))}
                                 </tr>
                             </thead>
-                            <tbody className="divide-y divide-border/50">
+                            <tbody className="divide-y divide-[#E2E8F0] dark:divide-slate-700">
                                 {loading ? (
                                     Array.from({ length: 5 }).map((_, i) => (
                                         <tr key={i}>
                                             {Array.from({ length: 5 }).map((_, j) => (
-                                                <td key={j} className="px-6 py-5"><div className="h-4 bg-slate-200 dark:bg-foreground/10 rounded animate-pulse w-24" /></td>
+                                                <td key={j} className="px-6 py-4">
+                                                    <div className="h-4 bg-slate-100 dark:bg-slate-700 rounded-lg animate-pulse w-24" />
+                                                </td>
                                             ))}
                                         </tr>
                                     ))
@@ -261,71 +277,63 @@ export default function MaintenanceResourcesPage() {
                                     <tr>
                                         <td colSpan={5} className="px-6 py-16 text-center">
                                             <div className="inline-flex flex-col items-center gap-3">
-                                                <div className="w-14 h-14 rounded-2xl bg-slate-100 dark:bg-foreground/5 flex items-center justify-center"><Database className="w-7 h-7 text-slate-400" /></div>
-                                                <p className="font-black text-foreground">No resources found</p>
-                                                <p className="text-sm text-slate-550 dark:text-foreground/40 font-bold">Try adjusting your filters or search query.</p>
+                                                <div className="w-14 h-14 rounded-2xl bg-[#F0F9FF] flex items-center justify-center">
+                                                    <Database className="w-7 h-7 text-[#0EA5E9]" />
+                                                </div>
+                                                <p className="font-semibold text-[#0F172A] dark:text-white">No resources found</p>
+                                                <p className="text-sm text-[#64748B] dark:text-slate-400">Try adjusting your filters or search query.</p>
                                             </div>
                                         </td>
                                     </tr>
                                 ) : (
                                     filteredResources.map(resource => {
-                                        const isStatusUpdating = updatingId === resource.id;
+                                        const isUpdating = updatingId === resource.id;
                                         const currentStatus = resource.availability_status;
-
-                                        // Styling for status badge
-                                        let statusBadgeClass = "bg-slate-100 text-slate-700 border-slate-200";
-                                        let statusDotClass = "bg-slate-400";
-                                        if (currentStatus === "Available") {
-                                            statusBadgeClass = "bg-emerald-50 dark:bg-emerald-500/10 text-emerald-700 dark:text-emerald-400 border-emerald-200 dark:border-emerald-500/20";
-                                            statusDotClass = "bg-emerald-500";
-                                        } else if (currentStatus === "Booked") {
-                                            statusBadgeClass = "bg-blue-50 dark:bg-blue-500/10 text-blue-700 dark:text-blue-400 border-blue-200 dark:border-blue-500/20";
-                                            statusDotClass = "bg-blue-500";
-                                        } else if (currentStatus === "Maintenance" || currentStatus === "Under Maintenance") {
-                                            statusBadgeClass = "bg-amber-50 dark:bg-amber-500/10 text-amber-700 dark:text-amber-400 border-amber-200 dark:border-amber-500/20";
-                                            statusDotClass = "bg-amber-500 animate-pulse";
-                                        } else if (currentStatus === "Inactive" || currentStatus === "Decommissioned") {
-                                            statusBadgeClass = "bg-red-50 dark:bg-red-500/10 text-red-700 dark:text-red-400 border-red-200 dark:border-red-500/20";
-                                            statusDotClass = "bg-red-500";
-                                        }
+                                        const { cls: statusCls, dot: statusDot } = getStatusBadge(currentStatus);
 
                                         return (
-                                            <tr key={resource.id} className="hover:bg-foreground/[0.01] transition-colors">
-                                                <td className="px-6 py-5">
-                                                    <div className="font-bold text-foreground text-sm">{resource.name}</div>
-                                                    <div className="text-[10px] text-slate-400 dark:text-foreground/30 mt-0.5 uppercase tracking-wider font-mono">ID: {resource.id.slice(0, 8)}</div>
+                                            <tr key={resource.id} className="hover:bg-[#F8FAFC] dark:hover:bg-slate-700/30 transition-colors group">
+                                                <td className="px-6 py-4">
+                                                    <div className="font-semibold text-[#0F172A] dark:text-white text-sm">{resource.name}</div>
+                                                    <div className="text-[11px] text-[#64748B] dark:text-slate-400 mt-0.5 font-mono">ID: {resource.id.slice(0, 8)}</div>
                                                 </td>
-                                                <td className="px-6 py-5 font-bold text-slate-600 dark:text-foreground/60 text-sm">
-                                                    {resource.location}
+                                                <td className="px-6 py-4">
+                                                    <span className="text-sm text-[#64748B] dark:text-slate-300 flex items-center gap-1.5">
+                                                        <MapPin className="w-3.5 h-3.5 text-[#0EA5E9] shrink-0" />
+                                                        {resource.location}
+                                                    </span>
                                                 </td>
-                                                <td className="px-6 py-5">
-                                                    <span className={`inline-flex items-center gap-1.5 text-xs font-semibold px-2.5 py-1 rounded-full border ${getCategoryColor(resource.type)}`}>
+                                                <td className="px-6 py-4">
+                                                    <span className={`inline-flex items-center gap-1.5 text-[11px] font-semibold px-2.5 py-0.5 rounded-full border ${getCategoryColor(resource.type)}`}>
                                                         {getCategoryIcon(resource.type)}
                                                         {resource.type}
                                                     </span>
                                                 </td>
-                                                <td className="px-6 py-5">
-                                                    <span className={`inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-bold border ${statusBadgeClass}`}>
-                                                        <span className={`w-1.5 h-1.5 rounded-full ${statusDotClass}`} />
-                                                        {currentStatus === "Maintenance" ? "Under Maintenance" : currentStatus === "Inactive" ? "Decommissioned" : currentStatus}
+                                                <td className="px-6 py-4">
+                                                    <span className={`inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-[11px] font-semibold border ${statusCls}`}>
+                                                        <span className={`w-1.5 h-1.5 rounded-full ${statusDot}`} />
+                                                        {currentStatus === "Maintenance" ? "Under Maintenance" :
+                                                         currentStatus === "Inactive" ? "Decommissioned" : currentStatus}
                                                     </span>
                                                 </td>
-                                                <td className="px-6 py-5">
-                                                    <div className="flex gap-2">
+                                                <td className="px-6 py-4">
+                                                    <div className="flex gap-2 flex-wrap">
                                                         {[
-                                                            { label: "Available", status: "Available", color: "hover:bg-emerald-500/10 border-transparent hover:border-emerald-500/25 text-emerald-600 dark:text-emerald-400" },
-                                                            { label: "Maintenance", status: "Maintenance", color: "hover:bg-amber-500/10 border-transparent hover:border-amber-500/25 text-amber-600 dark:text-amber-400" },
-                                                            { label: "Inactive", status: "Inactive", color: "hover:bg-red-500/10 border-transparent hover:border-red-500/25 text-red-600 dark:text-red-400" }
+                                                            { label: "Available",   status: "Available",   cls: "bg-teal-50 text-teal-700 border-teal-200 hover:bg-teal-100 dark:bg-teal-500/10 dark:text-teal-300 dark:border-teal-500/20 dark:hover:bg-teal-500/20" },
+                                                            { label: "Maintenance", status: "Maintenance", cls: "bg-amber-50 text-amber-700 border-amber-200 hover:bg-amber-100 dark:bg-amber-500/10 dark:text-amber-300 dark:border-amber-500/20 dark:hover:bg-amber-500/20" },
+                                                            { label: "Inactive",    status: "Inactive",    cls: "bg-rose-50 text-rose-700 border-rose-200 hover:bg-rose-100 dark:bg-rose-500/10 dark:text-rose-300 dark:border-rose-500/20 dark:hover:bg-rose-500/20" },
                                                         ].map(action => (
                                                             <button
                                                                 key={action.status}
                                                                 onClick={() => handleUpdateStatus(resource.id, action.status)}
-                                                                disabled={isStatusUpdating || currentStatus === action.status}
-                                                                className={`px-3 py-1.5 border text-xs font-black uppercase tracking-widest rounded-lg transition-all disabled:opacity-35 disabled:cursor-not-allowed ${action.color} ${
-                                                                    currentStatus === action.status ? "bg-foreground/[0.03] opacity-35" : ""
+                                                                disabled={isUpdating || currentStatus === action.status}
+                                                                className={`px-3 py-1.5 border text-[11px] font-semibold rounded-lg transition-all disabled:opacity-40 disabled:cursor-not-allowed ${action.cls} ${
+                                                                    currentStatus === action.status ? "ring-1 ring-offset-0" : ""
                                                                 }`}
                                                             >
-                                                                {isStatusUpdating && updatingId === resource.id ? "..." : action.label}
+                                                                {isUpdating && updatingId === resource.id ? (
+                                                                    <Loader2 className="w-3 h-3 animate-spin inline" />
+                                                                ) : action.label}
                                                             </button>
                                                         ))}
                                                     </div>
@@ -337,8 +345,8 @@ export default function MaintenanceResourcesPage() {
                             </tbody>
                         </table>
                     </div>
-                </div>
+                </motion.div>
             </div>
-        </div>
+        </motion.div>
     );
 }
diff --git a/app/notifications/page.tsx b/app/notifications/page.tsx
index 8663abc..e7b227f 100644
--- a/app/notifications/page.tsx
+++ b/app/notifications/page.tsx
@@ -21,6 +21,18 @@ import {
     ShieldAlert,
 } from "lucide-react";
 
+/* ─── URMS Light Blue Design System ───────────────────────
+   primary     : #0EA5E9 (Sky 500)
+   primary-dark: #0284C7 (Sky 600)
+   teal        : #0D9488
+   teal-light  : #CCFBF1
+   ink-main    : #0F172A
+   ink-muted   : #64748B
+   surface     : #FFFFFF
+   bg-base     : #F8FAFC
+   border      : #E2E8F0
+──────────────────────────────────────────────────────────── */
+
 interface Notification {
     id: string;
     title: string;
@@ -32,7 +44,6 @@ interface Notification {
 
 const ITEMS_PER_PAGE = 10;
 
-// Helper to format date in a premium relative format
 const formatRelativeTime = (dateStr: string) => {
     const now = new Date();
     const date = new Date(dateStr);
@@ -41,26 +52,12 @@ const formatRelativeTime = (dateStr: string) => {
     const diffHours = Math.floor(diffMins / 60);
     const diffDays = Math.floor(diffHours / 24);
 
-    if (diffMs < 0 || diffMins < 1) {
-        return "Just now";
-    }
-    if (diffMins < 60) {
-        return `${diffMins}m ago`;
-    }
-    if (diffHours < 24) {
-        return `${diffHours}h ago`;
-    }
-    if (diffDays === 1) {
-        return "Yesterday";
-    }
-    if (diffDays < 7) {
-        return `${diffDays}d ago`;
-    }
-    return date.toLocaleDateString(undefined, {
-        month: "short",
-        day: "numeric",
-        year: "numeric",
-    });
+    if (diffMs < 0 || diffMins < 1) return "Just now";
+    if (diffMins < 60) return `${diffMins}m ago`;
+    if (diffHours < 24) return `${diffHours}h ago`;
+    if (diffDays === 1) return "Yesterday";
+    if (diffDays < 7) return `${diffDays}d ago`;
+    return date.toLocaleDateString(undefined, { month: "short", day: "numeric", year: "numeric" });
 };
 
 export default function NotificationsPage() {
@@ -72,7 +69,6 @@ export default function NotificationsPage() {
     const [typeFilter, setTypeFilter] = useState<"all" | "info" | "success" | "warning" | "error">("all");
     const [currentPage, setCurrentPage] = useState(1);
 
-    // Fetch notifications
     const fetchNotifications = async () => {
         if (!profile?.id) return;
         setLoading(true);
@@ -103,362 +99,315 @@ export default function NotificationsPage() {
         }
     };
 
-    useEffect(() => {
-        fetchNotifications();
-    }, [profile?.id]);
+    useEffect(() => { fetchNotifications(); }, [profile?.id]);
 
-    // Handle single read
     const toggleReadStatus = async (id: string, currentRead: boolean) => {
-        setNotifications((prev) =>
-            prev.map((n) => (n.id === id ? { ...n, read: !currentRead } : n))
-        );
+        setNotifications((prev) => prev.map((n) => (n.id === id ? { ...n, read: !currentRead } : n)));
         try {
-            await supabase
-                .from("notifications")
-                .update({ is_read: !currentRead })
-                .eq("id", id);
+            await supabase.from("notifications").update({ is_read: !currentRead }).eq("id", id);
         } catch (err) {
             console.error("Error toggling notification status:", err);
         }
     };
 
-    // Delete single notification
     const deleteNotification = async (id: string) => {
         setNotifications((prev) => prev.filter((n) => n.id !== id));
         try {
-            await supabase
-                .from("notifications")
-                .delete()
-                .eq("id", id);
+            await supabase.from("notifications").delete().eq("id", id);
         } catch (err) {
             console.error("Error deleting notification:", err);
         }
     };
 
-    // Mark all as read
     const markAllAsRead = async () => {
         const unreadIds = notifications.filter((n) => !n.read).map((n) => n.id);
         if (unreadIds.length === 0) return;
-
         setNotifications((prev) => prev.map((n) => ({ ...n, read: true })));
         try {
-            await supabase
-                .from("notifications")
-                .update({ is_read: true })
-                .eq("user_id", profile?.id)
-                .eq("is_read", false);
+            await supabase.from("notifications").update({ is_read: true }).eq("user_id", profile?.id).eq("is_read", false);
         } catch (err) {
             console.error("Error marking all read:", err);
         }
     };
 
-    // Delete all read notifications
     const deleteAllRead = async () => {
         const readIds = notifications.filter((n) => n.read).map((n) => n.id);
         if (readIds.length === 0) return;
-
         setNotifications((prev) => prev.filter((n) => !n.read));
         try {
-            await supabase
-                .from("notifications")
-                .delete()
-                .eq("user_id", profile?.id)
-                .eq("is_read", true);
+            await supabase.from("notifications").delete().eq("user_id", profile?.id).eq("is_read", true);
         } catch (err) {
             console.error("Error deleting read notifications:", err);
         }
     };
 
-    // Clear entire history
     const clearAllHistory = async () => {
-        if (!confirm("Are you sure you want to clear your entire notification history? This cannot be undone.")) {
-            return;
-        }
-
+        if (!confirm("Are you sure you want to clear your entire notification history? This cannot be undone.")) return;
         setNotifications([]);
         try {
-            await supabase
-                .from("notifications")
-                .delete()
-                .eq("user_id", profile?.id);
+            await supabase.from("notifications").delete().eq("user_id", profile?.id);
         } catch (err) {
             console.error("Error clearing notifications:", err);
         }
     };
 
-    // Icons mapped to type
     const getIcon = (type: string) => {
         switch (type) {
-            case "success":
-                return <CheckCircle2 className="w-5 h-5 text-emerald-500 shrink-0" />;
-            case "warning":
-                return <AlertCircle className="w-5 h-5 text-amber-500 shrink-0" />;
-            case "error":
-                return <ShieldAlert className="w-5 h-5 text-red-500 shrink-0" />;
-            default:
-                return <Info className="w-5 h-5 text-blue-500 shrink-0" />;
+            case "success": return <CheckCircle2 className="w-5 h-5 text-[#0D9488]" />;
+            case "warning": return <AlertCircle className="w-5 h-5 text-amber-500" />;
+            case "error": return <ShieldAlert className="w-5 h-5 text-rose-500" />;
+            default: return <Info className="w-5 h-5 text-[#0EA5E9]" />;
         }
     };
 
-    // Count states
     const totalCount = notifications.length;
     const unreadCount = notifications.filter((n) => !n.read).length;
 
-    // Filtered lists
     const filteredNotifications = notifications.filter((n) => {
         const matchesSearch =
             n.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
             n.message.toLowerCase().includes(searchTerm.toLowerCase());
         const matchesStatus = statusFilter === "all" || !n.read;
         const matchesType = typeFilter === "all" || n.type === typeFilter;
-
         return matchesSearch && matchesStatus && matchesType;
     });
 
-    // Pagination bounds
     const totalPages = Math.ceil(filteredNotifications.length / ITEMS_PER_PAGE) || 1;
     const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
     const paginatedNotifications = filteredNotifications.slice(startIndex, startIndex + ITEMS_PER_PAGE);
 
-    // Reset pagination if filters change
-    useEffect(() => {
-        setCurrentPage(1);
-    }, [searchTerm, statusFilter, typeFilter]);
+    useEffect(() => { setCurrentPage(1); }, [searchTerm, statusFilter, typeFilter]);
 
     return (
         <ProtectedRoute>
-            <div className="min-h-[calc(100vh-64px)] bg-background p-6 md:p-10">
-                <div className="max-w-6xl mx-auto space-y-8">
-                    {/* Header */}
-                    <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 border-b border-slate-200 dark:border-border pb-6">
-                        <div>
-                            <h1 className="text-3xl font-black text-foreground tracking-tight flex items-center gap-3">
-                                <Bell className="w-8 h-8 text-brand-primary" /> Notification Center
-                            </h1>
-                            <p className="text-slate-600 dark:text-foreground/60 mt-2">
-                                Manage and view your account logs, system alerts, and resource booking statuses.
-                            </p>
-                        </div>
-                        <div className="flex flex-wrap gap-2 w-full md:w-auto">
-                            {unreadCount > 0 && (
-                                <button
-                                    onClick={markAllAsRead}
-                                    className="flex-1 md:flex-none flex items-center justify-center gap-2 bg-card hover:bg-slate-50 dark:hover:bg-white/5 border border-slate-200 dark:border-border px-4 py-2.5 rounded-xl text-sm font-bold text-foreground transition-all active:scale-95"
-                                >
-                                    <Check className="w-4 h-4" /> Mark All Read
-                                </button>
-                            )}
-                            {notifications.some((n) => n.read) && (
-                                <button
-                                    onClick={deleteAllRead}
-                                    className="flex-1 md:flex-none flex items-center justify-center gap-2 bg-card hover:bg-slate-50 dark:hover:bg-white/5 border border-slate-200 dark:border-border px-4 py-2.5 rounded-xl text-sm font-bold text-foreground transition-all active:scale-95"
-                                >
-                                    <Trash2 className="w-4 h-4 text-slate-500" /> Clear Read
-                                </button>
-                            )}
-                            {totalCount > 0 && (
-                                <button
-                                    onClick={clearAllHistory}
-                                    className="flex-1 md:flex-none flex items-center justify-center gap-2 bg-red-500/10 hover:bg-red-500/20 border border-red-500/20 px-4 py-2.5 rounded-xl text-sm font-bold text-red-500 transition-all active:scale-95"
-                                >
-                                    <Trash2 className="w-4 h-4" /> Clear All
-                                </button>
-                            )}
-                        </div>
-                    </div>
-
-                    {/* Stats Dashboard */}
-                    <div className="grid grid-cols-1 sm:grid-cols-3 gap-6">
-                        <div className="bg-card p-6 rounded-2xl border border-slate-200 dark:border-border shadow-sm flex items-center gap-4">
-                            <div className="bg-blue-500/10 p-4 rounded-xl text-blue-500 border border-blue-500/20 shrink-0">
-                                <Inbox className="w-6 h-6" />
-                            </div>
-                            <div>
-                                <p className="text-xs font-bold text-slate-500 dark:text-foreground/40 uppercase tracking-widest">
-                                    Total Logs
-                                </p>
-                                <p className="text-3xl font-black text-foreground">{totalCount}</p>
+            <div className="min-h-[calc(100vh-64px)] bg-[#F8FAFC] dark:bg-background p-6 md:p-8">
+                <div className="max-w-4xl mx-auto space-y-6">
+
+                    {/* ── Sky Gradient Header ── */}
+                    <div className="relative overflow-hidden rounded-2xl bg-gradient-to-br from-[#0EA5E9] to-[#0284C7] p-6 md:p-8 text-white shadow-lg shadow-sky-500/20">
+                        <div className="absolute -top-10 -right-10 w-40 h-40 rounded-full bg-white/10 pointer-events-none" />
+                        <div className="absolute bottom-0 left-16 w-24 h-24 rounded-full bg-[#0D9488]/20 pointer-events-none" />
+
+                        <div className="relative z-10 flex flex-col md:flex-row md:items-center justify-between gap-4">
+                            <div className="flex items-center gap-3">
+                                <div className="w-10 h-10 rounded-xl bg-white/20 backdrop-blur-sm flex items-center justify-center">
+                                    <Bell className="w-5 h-5 text-white" />
+                                </div>
+                                <div>
+                                    <h1 className="text-xl font-bold text-white">Notification Centre</h1>
+                                    <p className="text-sky-200 text-xs">Account logs, alerts & booking updates</p>
+                                </div>
+                                {unreadCount > 0 && (
+                                    <span className="ml-2 inline-flex items-center justify-center min-w-[24px] h-6 px-1.5 rounded-full bg-white text-[#0EA5E9] text-[11px] font-bold">
+                                        {unreadCount}
+                                    </span>
+                                )}
                             </div>
-                        </div>
 
-                        <div className="bg-card p-6 rounded-2xl border border-slate-200 dark:border-border shadow-sm flex items-center gap-4">
-                            <div className="bg-amber-500/10 p-4 rounded-xl text-amber-500 border border-amber-500/20 shrink-0">
-                                <Bell className="w-6 h-6" />
-                            </div>
-                            <div>
-                                <p className="text-xs font-bold text-slate-500 dark:text-foreground/40 uppercase tracking-widest">
-                                    Unread Logs
-                                </p>
-                                <p className="text-3xl font-black text-foreground">{unreadCount}</p>
+                            <div className="flex flex-wrap gap-2">
+                                {unreadCount > 0 && (
+                                    <button
+                                        onClick={markAllAsRead}
+                                        className="flex items-center gap-1.5 bg-white/20 hover:bg-white/30 backdrop-blur-sm px-4 py-2 rounded-lg text-sm font-semibold text-white transition-all active:scale-95"
+                                    >
+                                        <Check className="w-4 h-4" /> Mark All Read
+                                    </button>
+                                )}
+                                {notifications.some((n) => n.read) && (
+                                    <button
+                                        onClick={deleteAllRead}
+                                        className="flex items-center gap-1.5 bg-white/15 hover:bg-white/25 backdrop-blur-sm px-4 py-2 rounded-lg text-sm font-semibold text-white transition-all active:scale-95"
+                                    >
+                                        <Trash2 className="w-4 h-4" /> Clear Read
+                                    </button>
+                                )}
+                                {totalCount > 0 && (
+                                    <button
+                                        onClick={clearAllHistory}
+                                        className="flex items-center gap-1.5 bg-red-500/80 hover:bg-red-500 backdrop-blur-sm px-4 py-2 rounded-lg text-sm font-semibold text-white transition-all active:scale-95"
+                                    >
+                                        <Trash2 className="w-4 h-4" /> Clear All
+                                    </button>
+                                )}
                             </div>
                         </div>
+                    </div>
 
-                        <div className="bg-card p-6 rounded-2xl border border-slate-200 dark:border-border shadow-sm flex items-center gap-4">
-                            <div className="bg-emerald-500/10 p-4 rounded-xl text-emerald-500 border border-emerald-500/20 shrink-0 flex items-center justify-center">
-                                <span className="relative flex h-3 w-3">
-                                    <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
-                                    <span className="relative inline-flex rounded-full h-3 w-3 bg-emerald-500"></span>
-                                </span>
-                            </div>
-                            <div>
-                                <p className="text-xs font-bold text-slate-500 dark:text-foreground/40 uppercase tracking-widest">
-                                    System Status
-                                </p>
-                                <p className="text-lg font-black text-foreground">Active & Healthy</p>
+                    {/* ── Stat Cards ── */}
+                    <div className="grid grid-cols-3 gap-4">
+                        {[
+                            { label: "Total", value: totalCount, bg: "#F0F9FF", fg: "#0EA5E9", icon: Inbox },
+                            { label: "Unread", value: unreadCount, bg: "#FFFBEB", fg: "#D97706", icon: Bell },
+                            { label: "Status", value: "Active", bg: "#CCFBF1", fg: "#0D9488", icon: CheckCircle2 },
+                        ].map(({ label, value, bg, fg, icon: Icon }) => (
+                            <div key={label} className="bg-white dark:bg-slate-800/60 rounded-xl border border-[#E2E8F0] dark:border-slate-700 p-5 shadow-sm flex items-center gap-4">
+                                <div className="w-11 h-11 rounded-xl flex items-center justify-center shrink-0" style={{ backgroundColor: bg }}>
+                                    <Icon className="w-5 h-5" style={{ color: fg }} />
+                                </div>
+                                <div>
+                                    <p className="text-[11px] font-semibold text-[#64748B] dark:text-slate-400 uppercase tracking-wider">{label}</p>
+                                    <p className="text-2xl font-bold text-[#0F172A] dark:text-white">{value}</p>
+                                </div>
                             </div>
-                        </div>
+                        ))}
                     </div>
 
-                    {/* Filter & Control Bar */}
-                    <div className="bg-card border border-slate-200 dark:border-border rounded-2xl p-4 shadow-sm flex flex-col md:flex-row gap-4 items-center justify-between">
-                        {/* Status Toggle Filter */}
-                        <div className="flex bg-slate-100 dark:bg-foreground/5 p-1 rounded-xl w-full md:w-auto">
+                    {/* ── Filter & Search Bar ── */}
+                    <div className="bg-white dark:bg-slate-800/60 rounded-xl border border-[#E2E8F0] dark:border-slate-700 p-4 shadow-sm flex flex-col md:flex-row gap-4 items-start md:items-center flex-wrap">
+                        {/* Status toggle */}
+                        <div className="flex bg-[#F0F9FF] dark:bg-sky-500/10 p-1 rounded-lg">
                             <button
                                 onClick={() => setStatusFilter("all")}
-                                className={`flex-1 md:flex-none px-4 py-2 rounded-lg text-xs font-bold transition-all ${
+                                className={`px-4 py-1.5 rounded-md text-xs font-semibold transition-all ${
                                     statusFilter === "all"
-                                        ? "bg-card text-foreground shadow-sm"
-                                        : "text-slate-500 hover:text-foreground"
+                                        ? "bg-[#0EA5E9] text-white shadow-sm"
+                                        : "text-[#0EA5E9] dark:text-sky-300 hover:bg-[#E0F2FE] dark:hover:bg-sky-500/20"
                                 }`}
                             >
-                                All Status
+                                All
                             </button>
                             <button
                                 onClick={() => setStatusFilter("unread")}
-                                className={`flex-1 md:flex-none px-4 py-2 rounded-lg text-xs font-bold transition-all relative ${
+                                className={`px-4 py-1.5 rounded-md text-xs font-semibold transition-all relative ${
                                     statusFilter === "unread"
-                                        ? "bg-card text-foreground shadow-sm"
-                                        : "text-slate-500 hover:text-foreground"
+                                        ? "bg-[#0EA5E9] text-white shadow-sm"
+                                        : "text-[#0EA5E9] dark:text-sky-300 hover:bg-[#E0F2FE] dark:hover:bg-sky-500/20"
                                 }`}
                             >
                                 Unread
                                 {unreadCount > 0 && (
-                                    <span className="absolute -top-1.5 -right-1 flex h-4 w-4 items-center justify-center rounded-full bg-red-500 text-[10px] font-black text-white">
+                                    <span className="absolute -top-1.5 -right-1.5 flex h-4 w-4 items-center justify-center rounded-full bg-[#0EA5E9] text-[9px] font-bold text-white">
                                         {unreadCount}
                                     </span>
                                 )}
                             </button>
                         </div>
 
-                        {/* Type Selector Pills */}
-                        <div className="flex flex-wrap items-center gap-1.5 w-full md:w-auto justify-start md:justify-center">
-                            <span className="text-xs font-black text-slate-400 dark:text-foreground/40 uppercase tracking-wider mr-1.5 flex items-center gap-1">
-                                <Filter className="w-3.5 h-3.5" /> Type:
-                            </span>
-                            {(["all", "info", "success", "warning", "error"] as const).map((type) => (
-                                <button
-                                    key={type}
-                                    onClick={() => setTypeFilter(type)}
-                                    className={`px-3 py-1.5 rounded-lg text-xs font-bold border transition-all ${
-                                        typeFilter === type
-                                            ? "bg-brand-primary text-white border-brand-primary shadow-sm shadow-brand-primary/10"
-                                            : "bg-card border-slate-200 dark:border-border text-slate-600 dark:text-foreground/60 hover:border-slate-300 dark:hover:border-foreground/30 hover:text-foreground"
-                                    }`}
-                                >
-                                    {type.charAt(0).toUpperCase() + type.slice(1)}
-                                </button>
-                            ))}
+                        {/* Type pills */}
+                        <div className="flex flex-wrap items-center gap-2">
+                            <Filter className="w-3.5 h-3.5 text-[#64748B]" />
+                            {(["all", "info", "success", "warning", "error"] as const).map((type) => {
+                                const typeColors: Record<string, { active: string; inactive: string }> = {
+                                    all: { active: "bg-[#0EA5E9] text-white", inactive: "bg-[#F0F9FF] text-[#0EA5E9] hover:bg-[#E0F2FE]" },
+                                    info: { active: "bg-[#0EA5E9] text-white", inactive: "bg-[#F0F9FF] text-[#0EA5E9] hover:bg-[#E0F2FE]" },
+                                    success: { active: "bg-[#0D9488] text-white", inactive: "bg-[#CCFBF1] text-[#0D9488] hover:bg-teal-100" },
+                                    warning: { active: "bg-amber-500 text-white", inactive: "bg-amber-50 text-amber-700 hover:bg-amber-100" },
+                                    error: { active: "bg-rose-500 text-white", inactive: "bg-rose-50 text-rose-600 hover:bg-rose-100" },
+                                };
+                                const c = typeColors[type];
+                                return (
+                                    <button
+                                        key={type}
+                                        onClick={() => setTypeFilter(type)}
+                                        className={`px-3 py-1 rounded-full text-[11px] font-semibold transition-all ${
+                                            typeFilter === type ? c.active : c.inactive
+                                        }`}
+                                    >
+                                        {type.charAt(0).toUpperCase() + type.slice(1)}
+                                    </button>
+                                );
+                            })}
                         </div>
 
-                        {/* Search Input */}
-                        <div className="relative w-full md:w-64">
-                            <Search className="absolute left-3.5 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 dark:text-foreground/30" />
+                        {/* Search */}
+                        <div className="relative flex-1 min-w-[180px]">
+                            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[#64748B]" />
                             <input
                                 type="text"
-                                placeholder="Search notification contents..."
+                                placeholder="Search notifications..."
                                 value={searchTerm}
                                 onChange={(e) => setSearchTerm(e.target.value)}
-                                className="w-full bg-slate-100 dark:bg-foreground/5 border border-transparent hover:border-slate-300 dark:hover:border-white/10 focus:border-brand-primary focus:bg-card focus:ring-1 focus:ring-brand-primary pl-10 pr-4 py-2.5 rounded-xl text-xs font-semibold text-foreground placeholder:text-slate-400 dark:placeholder:text-foreground/30 outline-none transition-all"
+                                className="w-full bg-[#F8FAFC] dark:bg-slate-900 border border-[#E2E8F0] dark:border-slate-600 rounded-lg pl-9 pr-4 py-2 text-sm font-medium text-[#0F172A] dark:text-white placeholder:text-[#94A3B8] focus:outline-none focus:border-[#0EA5E9] focus:ring-2 focus:ring-[#0EA5E9]/15 transition-all"
                             />
                         </div>
                     </div>
 
-                    {/* Notifications Log List */}
-                    <div className="bg-card border border-slate-200 dark:border-border rounded-3xl overflow-hidden shadow-sm min-h-[300px] flex flex-col justify-between">
+                    {/* ── Notification List ── */}
+                    <div className="bg-white dark:bg-slate-800/60 rounded-xl border border-[#E2E8F0] dark:border-slate-700 shadow-sm overflow-hidden">
                         {loading ? (
-                            <div className="p-20 text-center flex flex-col items-center justify-center text-slate-500 dark:text-foreground/40 flex-grow">
-                                <div className="w-8 h-8 rounded-full border-2 border-brand-primary border-t-transparent animate-spin mb-4" />
-                                <p className="text-sm font-semibold">Loading notifications...</p>
+                            <div className="flex flex-col items-center justify-center py-16 gap-3">
+                                <div className="w-8 h-8 rounded-full border-2 border-[#E2E8F0] border-t-[#0EA5E9] animate-spin" />
+                                <p className="text-sm font-medium text-[#64748B]">Loading notifications…</p>
                             </div>
                         ) : filteredNotifications.length === 0 ? (
-                            <div className="p-20 text-center flex flex-col items-center justify-center text-slate-500 dark:text-foreground/40 flex-grow">
-                                <Inbox className="w-16 h-16 mb-4 opacity-20" />
-                                <p className="text-base font-bold text-foreground">No matching notifications</p>
-                                <p className="text-sm mt-1 max-w-md">
+                            <div className="flex flex-col items-center justify-center py-16 gap-3">
+                                <div className="w-16 h-16 rounded-2xl bg-[#F0F9FF] flex items-center justify-center">
+                                    <Inbox className="w-8 h-8 text-[#0EA5E9]" />
+                                </div>
+                                <p className="font-semibold text-[#0F172A] dark:text-white">No notifications found</p>
+                                <p className="text-sm text-[#64748B] dark:text-slate-400 text-center max-w-xs">
                                     {searchTerm || typeFilter !== "all" || statusFilter !== "all"
-                                        ? "Try adjusting your search keywords or filters to find what you are looking for."
-                                        : "Your notification history log is completely empty."}
+                                        ? "Try adjusting your search or filters."
+                                        : "You're all caught up! No notifications yet."}
                                 </p>
                             </div>
                         ) : (
-                            <div className="divide-y divide-slate-100 dark:divide-border/30 flex-grow">
-                                <AnimatePresence initial={false}>
-                                    {paginatedNotifications.map((notification) => (
+                            <AnimatePresence initial={false}>
+                                {paginatedNotifications.map((notification) => {
+                                    const typeConfig: Record<string, { bg: string; fg: string; borderClass: string }> = {
+                                        success: { bg: "#CCFBF1", fg: "#0D9488", borderClass: "border-l-[#0D9488]" },
+                                        warning: { bg: "#FFFBEB", fg: "#D97706", borderClass: "border-l-amber-400" },
+                                        error: { bg: "#FFF1F2", fg: "#E11D48", borderClass: "border-l-rose-500" },
+                                        info: { bg: "#F0F9FF", fg: "#0EA5E9", borderClass: "border-l-[#0EA5E9]" },
+                                    };
+                                    const tc = typeConfig[notification.type] || typeConfig.info;
+                                    return (
                                         <motion.div
                                             key={notification.id}
-                                            initial={{ opacity: 0, y: 10 }}
+                                            initial={{ opacity: 0, y: 8 }}
                                             animate={{ opacity: 1, y: 0 }}
-                                            exit={{ opacity: 0, x: -50 }}
+                                            exit={{ opacity: 0, x: -40 }}
                                             transition={{ duration: 0.2 }}
-                                            className={`p-5 flex gap-4 transition-all relative group ${
+                                            className={`relative flex gap-4 p-5 border-b border-[#E2E8F0] dark:border-slate-700 last:border-0 transition-colors group border-l-4 ${
                                                 notification.read
-                                                    ? "bg-transparent opacity-85"
-                                                    : "bg-slate-500/5 hover:bg-slate-500/10 border-l-[3px] border-brand-primary pl-[17px]"
+                                                    ? "border-l-transparent bg-transparent hover:bg-[#F8FAFC] dark:hover:bg-slate-700/20 opacity-70"
+                                                    : `${tc.borderClass} bg-[#F8FAFC] dark:bg-slate-700/30 hover:bg-[#F0F9FF] dark:hover:bg-slate-700/40`
                                             }`}
                                         >
-                                            {/* Left icon wrapper */}
-                                            <div className="shrink-0 mt-0.5">
-                                                <div className="w-10 h-10 rounded-xl bg-slate-100 dark:bg-foreground/5 flex items-center justify-center border border-slate-200 dark:border-border/30">
-                                                    {getIcon(notification.type)}
-                                                </div>
+                                            {/* Type icon */}
+                                            <div
+                                                className="w-10 h-10 rounded-xl flex items-center justify-center shrink-0 mt-0.5"
+                                                style={{ backgroundColor: tc.bg }}
+                                            >
+                                                {getIcon(notification.type)}
                                             </div>
 
-                                            {/* Details body */}
+                                            {/* Content */}
                                             <div className="flex-1 min-w-0">
-                                                <div className="flex items-center gap-2 flex-wrap">
-                                                    <h3
-                                                        className={`text-sm font-extrabold truncate ${
-                                                            notification.read
-                                                                ? "text-slate-600 dark:text-foreground/75"
-                                                                : "text-foreground"
-                                                        }`}
-                                                    >
-                                                        {notification.title}
-                                                    </h3>
-                                                    {!notification.read && (
-                                                        <span className="bg-brand-primary/10 text-brand-primary border border-brand-primary/20 text-[9px] font-black uppercase px-2 py-0.5 rounded-full tracking-wide">
-                                                            New
-                                                        </span>
-                                                    )}
-                                                    <span className="text-[10px] text-slate-400 dark:text-foreground/30 font-medium ml-auto flex items-center gap-1 shrink-0">
+                                                <div className="flex items-start justify-between gap-2">
+                                                    <div className="flex items-center gap-2 flex-wrap">
+                                                        <h3 className={`text-sm font-semibold ${
+                                                            notification.read ? "text-[#64748B] dark:text-slate-400" : "text-[#0F172A] dark:text-white"
+                                                        }`}>
+                                                            {notification.title}
+                                                        </h3>
+                                                        {!notification.read && (
+                                                            <span className="inline-flex items-center gap-1 bg-[#F0F9FF] text-[#0EA5E9] border border-sky-200 text-[10px] font-semibold px-2 py-0.5 rounded-full">
+                                                                <span className="w-1.5 h-1.5 rounded-full bg-[#0EA5E9] animate-pulse" />
+                                                                New
+                                                            </span>
+                                                        )}
+                                                    </div>
+                                                    <span className="text-[11px] text-[#94A3B8] dark:text-slate-500 font-medium flex items-center gap-1 shrink-0">
                                                         <Clock className="w-3 h-3" />
                                                         {formatRelativeTime(notification.createdAt)}
                                                     </span>
                                                 </div>
-                                                <p
-                                                    className={`text-xs mt-1.5 leading-relaxed break-words whitespace-pre-wrap ${
-                                                        notification.read
-                                                            ? "text-slate-500 dark:text-foreground/50"
-                                                            : "text-slate-600 dark:text-foreground/80 font-medium"
-                                                    }`}
-                                                >
+                                                <p className={`text-xs mt-1.5 leading-relaxed ${
+                                                    notification.read ? "text-[#94A3B8] dark:text-slate-500" : "text-[#64748B] dark:text-slate-300"
+                                                }`}>
                                                     {notification.message}
                                                 </p>
-                                                <div className="flex items-center gap-4 mt-3">
-                                                    <span className="text-[10px] text-slate-400 dark:text-foreground/30 font-semibold uppercase tracking-wider">
-                                                        Logged: {new Date(notification.createdAt).toLocaleString()}
-                                                    </span>
-                                                </div>
                                             </div>
 
-                                            {/* Float action tools */}
-                                            <div className="flex items-center gap-1 bg-card/95 border border-slate-200 dark:border-border p-1 rounded-xl opacity-0 group-hover:opacity-100 shadow-md shadow-black/5 absolute right-4 top-1/2 -translate-y-1/2 transition-all">
+                                            {/* Hover actions */}
+                                            <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity shrink-0">
                                                 <button
                                                     onClick={() => toggleReadStatus(notification.id, notification.read)}
-                                                    className={`p-2 rounded-lg text-xs font-bold transition-all ${
+                                                    className={`p-2 rounded-lg transition-all ${
                                                         notification.read
-                                                            ? "text-slate-500 hover:text-foreground hover:bg-slate-100 dark:hover:bg-white/5"
-                                                            : "text-emerald-500 hover:bg-emerald-500/10"
+                                                            ? "text-[#64748B] hover:bg-[#F0F9FF] hover:text-[#0EA5E9]"
+                                                            : "text-[#0D9488] hover:bg-[#CCFBF1]"
                                                     }`}
                                                     title={notification.read ? "Mark as unread" : "Mark as read"}
                                                 >
@@ -466,37 +415,38 @@ export default function NotificationsPage() {
                                                 </button>
                                                 <button
                                                     onClick={() => deleteNotification(notification.id)}
-                                                    className="p-2 rounded-lg text-red-500 hover:bg-red-500/10 transition-all"
-                                                    title="Delete permanently"
+                                                    className="p-2 rounded-lg text-[#94A3B8] hover:text-rose-500 hover:bg-rose-50 dark:hover:bg-rose-500/10 transition-all"
+                                                    title="Delete"
                                                 >
                                                     <Trash2 className="w-4 h-4" />
                                                 </button>
                                             </div>
                                         </motion.div>
-                                    ))}
-                                </AnimatePresence>
-                            </div>
+                                    );
+                                })}
+                            </AnimatePresence>
                         )}
 
-                        {/* Pagination footer controls */}
+                        {/* Pagination */}
                         {totalPages > 1 && (
-                            <div className="px-6 py-4 bg-slate-50 dark:bg-foreground/5 border-t border-slate-200 dark:border-border flex items-center justify-between gap-4">
-                                <span className="text-xs font-semibold text-slate-500 dark:text-foreground/40">
-                                    Showing page <strong className="text-foreground">{currentPage}</strong> of{" "}
-                                    <strong className="text-foreground">{totalPages}</strong> ({filteredNotifications.length} items)
+                            <div className="px-6 py-4 bg-[#F8FAFC] dark:bg-slate-900/40 border-t border-[#E2E8F0] dark:border-slate-700 flex items-center justify-between gap-4">
+                                <span className="text-xs font-medium text-[#64748B] dark:text-slate-400">
+                                    Page <strong className="text-[#0F172A] dark:text-white">{currentPage}</strong> of{" "}
+                                    <strong className="text-[#0F172A] dark:text-white">{totalPages}</strong>{" "}
+                                    · {filteredNotifications.length} items
                                 </span>
                                 <div className="flex gap-2">
                                     <button
                                         onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
                                         disabled={currentPage === 1}
-                                        className="flex items-center justify-center p-2 border border-slate-200 dark:border-border bg-card rounded-lg text-foreground hover:bg-slate-50 dark:hover:bg-white/5 disabled:opacity-40 disabled:cursor-not-allowed transition-all"
+                                        className="flex items-center justify-center w-8 h-8 border border-[#E2E8F0] dark:border-slate-600 bg-white dark:bg-slate-800 rounded-lg text-[#64748B] hover:text-[#0EA5E9] hover:border-[#0EA5E9] disabled:opacity-40 disabled:cursor-not-allowed transition-all"
                                     >
                                         <ChevronLeft className="w-4 h-4" />
                                     </button>
                                     <button
                                         onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
                                         disabled={currentPage === totalPages}
-                                        className="flex items-center justify-center p-2 border border-slate-200 dark:border-border bg-card rounded-lg text-foreground hover:bg-slate-50 dark:hover:bg-white/5 disabled:opacity-40 disabled:cursor-not-allowed transition-all"
+                                        className="flex items-center justify-center w-8 h-8 border border-[#E2E8F0] dark:border-slate-600 bg-white dark:bg-slate-800 rounded-lg text-[#64748B] hover:text-[#0EA5E9] hover:border-[#0EA5E9] disabled:opacity-40 disabled:cursor-not-allowed transition-all"
                                     >
                                         <ChevronRight className="w-4 h-4" />
                                     </button>
@@ -504,6 +454,7 @@ export default function NotificationsPage() {
                             </div>
                         )}
                     </div>
+
                 </div>
             </div>
         </ProtectedRoute>
diff --git a/app/page.tsx b/app/page.tsx
index a97ad5b..8ed118e 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -2,940 +2,691 @@
 
 import React, { useState, useEffect } from "react";
 import Link from "next/link";
-import { motion, AnimatePresence } from "framer-motion";
+import Footer from "@/components/Footer";
 import {
   ArrowRight,
   Calendar,
-  ShieldCheck,
+  Clock,
   Users,
-  Zap,
-  TrendingUp,
-  LayoutDashboard,
-  CheckCircle2,
-  ChevronRight,
+  GraduationCap,
+  ShieldCheck,
   Building2,
-  Clock,
   Sparkles,
-  Lock,
+  AlertTriangle,
+  RefreshCw,
+  CheckCircle2,
   Search,
-  Activity,
-  Laptop,
   Check,
-  AlertTriangle,
-  Plus,
-  Wrench,
-  ShieldAlert,
-  PieChart,
+  ChevronRight,
+  Send,
   HelpCircle,
-  RefreshCw
+  Mail,
+  MapPin,
+  Phone,
+  Layers,
+  Activity,
+  UserCheck,
 } from "lucide-react";
 
-/* ─── Mock Data for Interactive Simulator ─── */
-const mockSpaces = [
-  { id: "lab01", name: "Computing Lab 01", capacity: "36/40 seats", status: "Occupied", detail: "CS302 Database Lecture", fill: 90, color: "text-amber-500 bg-amber-500/10 border-amber-500/20" },
-  { id: "audiB", name: "Lecture Theatre B", capacity: "0/120 seats", status: "Vacant", detail: "Next class: 2:00 PM", fill: 0, color: "text-emerald-500 bg-emerald-500/10 border-emerald-500/20" },
-  { id: "seminar02", name: "Seminar Room 02", capacity: "15/30 seats", status: "Occupied", detail: "Seminar: AI & Ethics", fill: 50, color: "text-amber-500 bg-amber-500/10 border-amber-500/20" },
-  { id: "iotlab", name: "IoT & Robotics Lab", capacity: "0/20 seats", status: "Maintenance", detail: "AC Unit Repair", fill: 0, color: "text-rose-500 bg-rose-500/10 border-rose-500/20" }
+/* ────────────────────────────────────────────────────────────────────────
+   URMS LIGHT BLUE DESIGN SYSTEM
+   bg-base     : #F8FAFC (Slate 50)
+   surface     : #FFFFFF
+   border      : #E2E8F0 (Slate 200)
+   primary     : #0EA5E9 (Sky 500)
+   primary-dark: #0284C7 (Sky 600)
+   teal        : #0D9488 (Teal 600 - Main Accent)
+   teal-light  : #CCFBF1 (Teal 100)
+   ink-main    : #0F172A (Slate 900)
+   ink-muted   : #64748B (Slate 500)
+   ──────────────────────────────────────────────────────────────────────── */
+
+const ROOM_FACULTIES = [
+  {
+    id: "computing",
+    title: "Computing & IT Lab 01",
+    type: "Computer Lab",
+    capacity: "60 Seats",
+    status: "Available",
+    badge: "Interactive Workstations",
+    image: "https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?auto=format&fit=crop&w=800&q=80",
+  },
+  {
+    id: "engineering",
+    title: "Main Auditorium Hall A",
+    type: "Auditorium",
+    capacity: "350 Seats",
+    status: "Available",
+    badge: "AV System Synced",
+    image: "https://images.unsplash.com/photo-1541829070764-84a7d30dd3f3?auto=format&fit=crop&w=800&q=80",
+  },
+  {
+    id: "science",
+    title: "Advanced Physics Lab",
+    type: "Specialised Science Lab",
+    capacity: "40 Seats",
+    status: "Reserved",
+    badge: "Safety Verification",
+    image: "https://images.unsplash.com/photo-1532094349884-543bc11b234d?auto=format&fit=crop&w=800&q=80",
+  },
+  {
+    id: "management",
+    title: "Executive Seminar Room 02",
+    type: "Conference Room",
+    capacity: "80 Seats",
+    status: "Available",
+    badge: "Hybrid Video Stream",
+    image: "https://images.unsplash.com/photo-1431540015161-0bf868a2d407?auto=format&fit=crop&w=800&q=80",
+  },
+];
+
+const SERVICES = [
+  {
+    icon: Calendar,
+    title: "Smart Room Booking",
+    desc: "Reserve lecture halls, computing labs, and seminar spaces in real time with zero overlapping schedules.",
+  },
+  {
+    icon: AlertTriangle,
+    title: "Conflict Resolver",
+    desc: "Automated engine flags double-bookings instantly and proposes tier-equivalent alternative spaces.",
+  },
+  {
+    icon: UserCheck,
+    title: "Digital Pass Check-in",
+    desc: "Digital passes generated on confirmation to verify attendance and monitor room utilization.",
+  },
+  {
+    icon: Layers,
+    title: "Equipment & AV Lock",
+    desc: "Request projectors, audio systems, and specialised hardware alongside room reservations.",
+  },
+];
+
+const ROLES_DATA = [
+  {
+    id: "student",
+    title: "Students",
+    icon: GraduationCap,
+    desc: "Browse live campus catalog, hold study group spaces, track waitlists, and check in via digital pass.",
+    stats: [
+      { n: "128", l: "Credits Tracked" },
+      { n: "6", l: "Active Holds" },
+      { n: "100%", l: "Verified Access" },
+    ],
+    features: ["Browse Live Catalog", "Self-Service Reservations", "Digital Pass Access"],
+  },
+  {
+    id: "lecturer",
+    title: "Lecturers & Faculty",
+    icon: Users,
+    desc: "Skip queue approvals for term-long recurring lectures, reserve specialized labs, and view attendance trends.",
+    stats: [
+      { n: "14", l: "Course Sections" },
+      { n: "240", l: "Enrolled Students" },
+      { n: "Priority", l: "Queue Level" },
+    ],
+    features: ["Recurring Section Lock", "Priority Override", "Lab Hardware Tracking"],
+  },
+  {
+    id: "admin",
+    title: "Operations Admin",
+    icon: ShieldCheck,
+    desc: "Complete operational visibility over campus facilities, manual conflict overrides, and automated maintenance routing.",
+    stats: [
+      { n: "482", l: "Total Rooms" },
+      { n: "0.2s", l: "Sync Speed" },
+      { n: "Full", l: "Audit Controls" },
+    ],
+    features: ["Campus Real-Time Audit", "Manual Schedule Override", "Maintenance Ticketing"],
+  },
+];
+
+const PROCESS_STEPS = [
+  {
+    step: "01",
+    title: "Search & Select",
+    desc: "Filter campus spaces by capacity, faculty block, or specific AV equipment needed.",
+  },
+  {
+    step: "02",
+    title: "Real-Time Index Lock",
+    desc: "The core engine locks your chosen time index down to the exact minute to stop race conditions.",
+  },
+  {
+    step: "03",
+    title: "Automated Verification",
+    desc: "System cross-checks role permissions and flags any schedule overlap across all departments.",
+  },
+  {
+    step: "04",
+    title: "Instant Digital Pass Issued",
+    desc: "Your booking is confirmed with a digital access pass ready for door check-in.",
+  },
 ];
 
 export default function LandingPage() {
-  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
-  
-  // Interactive Simulator States
-  const [simTab, setSimTab] = useState<"availability" | "booking" | "analytics">("availability");
-  const [selectedRoom, setSelectedRoom] = useState("Computing Lab 01");
-  const [selectedTimeSlot, setSelectedTimeSlot] = useState("");
-  const [bookingStatus, setBookingStatus] = useState<"idle" | "conflict" | "resolving" | "resolved" | "success">("idle");
-  const [bookingMessage, setBookingMessage] = useState("");
-
-  // Role Switcher States
-  const [activeRole, setActiveRole] = useState<"student" | "lecturer" | "admin">("student");
-
-  // Conflict visualizer step
-  const [conflictStep, setConflictStep] = useState(0);
-
-  // Time tracker for simulator status bar
-  const [currentTime, setCurrentTime] = useState("");
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    setMounted(true);
-    const handleMouseMove = (e: MouseEvent) => {
-      setMousePosition({ x: e.clientX, y: e.clientY });
-    };
-    window.addEventListener("mousemove", handleMouseMove);
-    
-    // Simple digital clock
-    const updateTime = () => {
-      const now = new Date();
-      setCurrentTime(now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' }));
-    };
-    updateTime();
-    const interval = setInterval(updateTime, 1000);
-
-    return () => {
-      window.removeEventListener("mousemove", handleMouseMove);
-      clearInterval(interval);
-    };
-  }, []);
-
-  // Handle simulated booking slot click
-  const handleSlotSelect = (time: string) => {
-    setSelectedTimeSlot(time);
-    if (time === "10:30 AM - 12:30 PM") {
-      setBookingStatus("conflict");
-      setBookingMessage("⚠️ Collision detected! Computing Lab 01 is booked for CS302 class.");
-    } else {
-      setBookingStatus("success");
-      setBookingMessage(`🎉 Success! Reserved ${selectedRoom} for ${time}.`);
-    }
-  };
-
-  // Run simulated conflict solver
-  const runConflictSolver = () => {
-    setBookingStatus("resolving");
-    setBookingMessage("Running conflict resolution algorithm...");
-    
-    setTimeout(() => {
-      setBookingStatus("resolved");
-      setBookingMessage("✅ Smart suggestion found: Seminar Room 02 is vacant during this time!");
-    }, 1200);
-  };
-
-  const confirmAlternative = () => {
-    setSelectedRoom("Seminar Room 02");
-    setBookingStatus("success");
-    setBookingMessage("🎉 Success! Reserved Seminar Room 02 for 10:30 AM - 12:30 PM.");
-  };
-
-  const resetBookingSim = () => {
-    setSelectedRoom("Computing Lab 01");
-    setSelectedTimeSlot("");
-    setBookingStatus("idle");
-    setBookingMessage("");
-  };
-
-  // Conflict Resolution Step Explanations
-  const pipelineSteps = [
-    {
-      title: "1. Request Intake",
-      desc: "Student/lecturer inputs booking parameters (space type, duration, capacity). Request passes client-side schema checks.",
-      icon: <Plus className="w-5 h-5" />,
-      color: "border-blue-500/30 text-blue-500 bg-blue-500/5"
-    },
-    {
-      title: "2. Database Index Lock",
-      desc: "UniLink queries PostgreSQL with precise time block indexes to search for overlapping booking intervals.",
-      icon: <Search className="w-5 h-5" />,
-      color: "border-amber-500/30 text-amber-500 bg-amber-500/5"
-    },
-    {
-      title: "3. Conflict Evaluation",
-      desc: "Smart validation detects intersecting bookings. Evaluates role hierarchy (e.g., lecturers can override students).",
-      icon: <ShieldAlert className="w-5 h-5" />,
-      color: "border-rose-500/30 text-rose-500 bg-rose-500/5"
-    },
-    {
-      title: "4. Auto-Routing & Confirmation",
-      desc: "Provides instant alternate suggestions or automatically locks the conflict-free slot, writing to Supabase DB and sending WS notifications.",
-      icon: <CheckCircle2 className="w-5 h-5" />,
-      color: "border-emerald-500/30 text-emerald-500 bg-emerald-500/5"
-    }
-  ];
+  const [activeRole, setActiveRole] = useState("student");
+  const [inquirySubmitted, setInquirySubmitted] = useState(false);
+
+  const selectedRoleInfo = ROLES_DATA.find((r) => r.id === activeRole) || ROLES_DATA[0];
 
   return (
-    <div className="min-h-screen bg-background text-foreground overflow-hidden selection:bg-brand-primary/30 relative">
+    <div className="min-h-screen bg-[#F8FAFC] dark:bg-[#0B111E] text-[#0F172A] dark:text-[#E2E8F0] font-sans antialiased selection:bg-[#0EA5E9] selection:text-white">
       
-      {/* Premium Cursor Ambient Highlight */}
-      <motion.div
-        className="pointer-events-none fixed inset-0 z-50 transition-opacity duration-300"
-        animate={{
-          background: `radial-gradient(800px circle at ${mousePosition.x}px ${mousePosition.y}px, rgba(124, 58, 237, 0.05), transparent 45%)`
-        }}
-      />
-
-      {/* ─── HERO SECTION ─── */}
-      <section className="relative min-h-[92svh] flex items-center pt-24 pb-20 lg:pt-16 overflow-hidden border-b border-slate-200/40 dark:border-border/30">
-        
-        {/* Subtle Backdrop Pattern & Blobs */}
-        <div className="absolute inset-0 z-0 pointer-events-none">
-          <div className="absolute top-[10%] left-[5%] w-[55vw] h-[35vw] rounded-full bg-brand-primary/5 blur-[120px]" />
-          <div className="absolute top-[20%] right-[10%] w-[40vw] h-[40vw] rounded-full bg-blue-500/5 blur-[140px]" />
-          <div className="absolute inset-0 opacity-[0.02] dark:opacity-[0.015]" style={{ backgroundImage: "url(\"data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 0v80M0 40h80' stroke='%237C3AED' stroke-width='1' fill='none'/%3E%3C/svg%3E\")" }} />
+      {/* ── HERO SECTION ── */}
+      <section className="relative overflow-hidden pt-12 pb-20 lg:pt-20 lg:pb-28">
+        {/* Soft Background Accent Graphics */}
+        <div className="pointer-events-none absolute inset-0 -z-10 overflow-hidden">
+          <div className="absolute -top-24 right-0 h-[500px] w-[500px] rounded-full bg-gradient-to-bl from-[#0EA5E9]/10 via-[#0D9488]/10 to-transparent blur-3xl dark:from-[#0EA5E9]/20 dark:via-[#0D9488]/15" />
+          <div className="absolute top-1/2 -left-24 h-[400px] w-[400px] rounded-full bg-sky-100/60 dark:bg-sky-900/20 blur-3xl" />
         </div>
 
-        <div className="max-w-7xl mx-auto px-6 w-full relative z-10 grid lg:grid-cols-12 gap-12 xl:gap-16 items-center">
-          
-          {/* Hero Left Content */}
-          <div className="lg:col-span-6 flex flex-col items-start text-left">
-            <motion.div 
-              initial={{ opacity: 0, y: 15 }} 
-              animate={{ opacity: 1, y: 0 }} 
-              transition={{ duration: 0.5 }}
-              className="inline-flex items-center gap-2 bg-brand-primary/5 dark:bg-brand-primary/10 border border-brand-primary/20 text-brand-primary text-xs sm:text-sm font-black px-4.5 py-2 rounded-full mb-8 shadow-sm"
-            >
-              <span className="relative flex h-2 w-2">
-                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-primary opacity-75 animate-duration-1000"></span>
-                <span className="relative inline-flex rounded-full h-2 w-2 bg-brand-primary"></span>
-              </span>
-              Production-Grade Resource Portal
-            </motion.div>
-
-            <motion.h1 
-              initial={{ opacity: 0, y: 25 }} 
-              animate={{ opacity: 1, y: 0 }} 
-              transition={{ duration: 0.6, delay: 0.1 }}
-              className="text-4xl sm:text-5xl xl:text-6xl font-black leading-[1.08] tracking-tight mb-6 text-slate-900 dark:text-white"
-            >
-              A Unified Engine for <br />
-              <span className="text-transparent bg-clip-text bg-gradient-to-r from-brand-primary via-brand-accent to-blue-500">
-                Campus Bookings
-              </span>
-            </motion.h1>
-
-            <motion.p 
-              initial={{ opacity: 0, y: 25 }} 
-              animate={{ opacity: 1, y: 0 }} 
-              transition={{ duration: 0.6, delay: 0.2 }}
-              className="text-slate-500 dark:text-foreground/60 text-lg max-w-xl mb-10 leading-relaxed font-semibold"
-            >
-              Optimize academic facility utilization, dispatch maintenance tickets instantly, and eliminate scheduling collisions with our real-time resource planner. Built for SUSL.
-            </motion.p>
-
-            <motion.div 
-              initial={{ opacity: 0, y: 25 }} 
-              animate={{ opacity: 1, y: 0 }} 
-              transition={{ duration: 0.6, delay: 0.3 }}
-              className="flex flex-col sm:flex-row gap-4 w-full sm:w-auto"
-            >
-              <Link
-                href="/login"
-                className="relative overflow-hidden flex items-center justify-center gap-2 px-8 py-4 text-sm font-black text-white rounded-2xl bg-brand-primary hover:bg-brand-secondary shadow-xl shadow-brand-primary/25 hover:-translate-y-0.5 transition-all duration-300 group"
-              >
-                Launch Console
-                <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
-              </Link>
-              <Link
-                href="/resources"
-                className="flex items-center justify-center gap-2 px-8 py-4 text-sm font-black text-slate-800 dark:text-white rounded-2xl border border-slate-200 dark:border-border hover:border-brand-primary/30 hover:bg-brand-primary/5 transition-all duration-300 group backdrop-blur-md"
-              >
-                Browse Resources
-                <ChevronRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
-              </Link>
-            </motion.div>
-            
-            {/* Quick Metrics */}
-            <motion.div 
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              transition={{ delay: 0.5, duration: 0.8 }}
-              className="mt-12 pt-8 border-t border-slate-200/55 dark:border-border/20 w-full grid grid-cols-3 gap-4"
-            >
-              <div>
-                <p className="text-2xl font-black text-slate-800 dark:text-white">99.9%</p>
-                <p className="text-[10px] uppercase font-black text-slate-500 tracking-wider">Uptime SLA</p>
-              </div>
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <div className="grid items-center gap-12 lg:grid-cols-12 lg:gap-8">
+            {/* Hero Left Content */}
+            <div className="lg:col-span-6">
               <div>
-                <p className="text-2xl font-black text-slate-800 dark:text-white">0s</p>
-                <p className="text-[10px] uppercase font-black text-slate-500 tracking-wider">Collision Risk</p>
+              
               </div>
-              <div>
-                <p className="text-2xl font-black text-slate-800 dark:text-white">4 Departments</p>
-                <p className="text-[10px] uppercase font-black text-slate-500 tracking-wider">Active Sync</p>
+
+              <h1 className="text-4xl font-extrabold tracking-tight text-[#0F172A] dark:text-white sm:text-5xl lg:text-6xl lg:leading-[1.12]">
+                Campus Spaces <br />
+                Scheduled Without <br />
+                <span className="bg-gradient-to-r from-[#0EA5E9] to-[#0D9488] bg-clip-text text-transparent">
+                  A Single Collision.
+                </span>
+              </h1>
+
+              <p className="mt-5 max-w-xl text-base text-slate-600 dark:text-slate-400 leading-relaxed sm:text-lg">
+                One centralized index for every lecture hall, computing laboratory, and seminar space on campus.
+                Booked, verified, and audited in real-time.
+              </p>
+
+              {/* Action Group */}
+              <div className="mt-8 flex flex-wrap items-center gap-4">
+                <Link
+                  href="/login"
+                  className="inline-flex items-center gap-2 rounded-full bg-[#0D9488] px-6 py-3.5 text-sm font-bold text-white shadow-lg shadow-[#0D9488]/20 transition-all hover:bg-[#0F766E] hover:-translate-y-0.5"
+                >
+                  <span>Explore Live Catalog</span>
+                  <ArrowRight className="h-4 w-4" />
+                </Link>
+
+                <a
+                  href="#process"
+                  className="inline-flex items-center gap-2 rounded-full border border-slate-300 dark:border-slate-600 bg-white dark:bg-[#151E2E] px-6 py-3.5 text-sm font-semibold text-slate-700 dark:text-slate-300 shadow-sm transition-colors hover:border-slate-400 hover:bg-slate-50 dark:hover:bg-slate-800"
+                >
+                  <span>How It Works</span>
+                </a>
               </div>
-            </motion.div>
-          </div>
 
-          {/* Hero Right: Interactive URMS Live Dashboard Simulator */}
-          <div className="lg:col-span-6 relative w-full flex items-center justify-center">
-            <motion.div
-              initial={{ opacity: 0, scale: 0.95, y: 15 }}
-              animate={{ opacity: 1, scale: 1, y: 0 }}
-              transition={{ duration: 0.6 }}
-              className="w-full max-w-[540px] bg-card border border-slate-200 dark:border-border/50 rounded-3xl shadow-2xl overflow-hidden flex flex-col relative"
-            >
-              {/* Simulator Header Bar */}
-              <div className="bg-slate-100/80 dark:bg-[#120E22]/60 px-5 py-3.5 border-b border-slate-200/80 dark:border-border/40 flex items-center justify-between">
-                <div className="flex items-center gap-2">
-                  <div className="flex gap-1.5">
-                    <span className="w-3 h-3 rounded-full bg-red-400 opacity-80" />
-                    <span className="w-3 h-3 rounded-full bg-amber-400 opacity-80" />
-                    <span className="w-3 h-3 rounded-full bg-emerald-400 opacity-80" />
+              {/* Social Proof / Stats Bar */}
+              <div className="mt-10 flex items-center gap-6 border-t border-slate-200/80 dark:border-slate-700/60 pt-6">
+                <div className="flex -space-x-2 overflow-hidden">
+                  <div className="inline-block h-9 w-9 rounded-full bg-sky-500 ring-2 ring-white dark:ring-[#0B111E] text-white font-bold text-xs flex items-center justify-center">
+                    CS
+                  </div>
+                  <div className="inline-block h-9 w-9 rounded-full bg-teal-500 ring-2 ring-white dark:ring-[#0B111E] text-white font-bold text-xs flex items-center justify-center">
+                    ENG
+                  </div>
+                  <div className="inline-block h-9 w-9 rounded-full bg-slate-700 ring-2 ring-white dark:ring-[#0B111E] text-white font-bold text-xs flex items-center justify-center">
+                    SCI
                   </div>
-                  <span className="text-[10px] font-black uppercase text-slate-500 dark:text-white/40 tracking-widest ml-3">
-                    URMS Core Console v1.2
-                  </span>
                 </div>
-                
-                {/* Live clock/status badge */}
-                <div className="flex items-center gap-2 bg-emerald-500/10 text-emerald-500 dark:text-emerald-400 px-2.5 py-0.5 rounded-full border border-emerald-500/20 text-[9px] font-bold">
-                  <span className="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse" />
-                  LIVE
+                <div>
+                  <p className="text-sm font-bold text-[#0F172A] dark:text-white">480+ Campus Spaces</p>
+                  <p className="text-xs font-medium text-slate-500 dark:text-slate-400">Synced across all faculties daily</p>
                 </div>
               </div>
+            </div>
 
-              {/* Simulator Navigation Tabs */}
-              <div className="flex bg-slate-50/50 dark:bg-slate-900/10 border-b border-slate-200/50 dark:border-border/25 px-4 pt-2">
-                {(["availability", "booking", "analytics"] as const).map((tab) => (
-                  <button
-                    key={tab}
-                    onClick={() => { setSimTab(tab); resetBookingSim(); }}
-                    className={`px-4 py-2.5 text-xs font-bold uppercase tracking-wider relative transition-colors ${
-                      simTab === tab 
-                        ? "text-brand-primary" 
-                        : "text-slate-500 dark:text-foreground/40 hover:text-slate-800 dark:hover:text-foreground/80"
-                    }`}
-                  >
-                    {tab}
-                    {simTab === tab && (
-                      <motion.span
-                        layoutId="activeSimTab"
-                        className="absolute bottom-0 left-0 right-0 h-0.5 bg-brand-primary"
-                      />
-                    )}
-                  </button>
-                ))}
-                
-                {/* Simulated timestamp */}
-                <div className="ml-auto self-center pb-2 pr-1 text-[10px] font-mono text-slate-500 hidden sm:block" suppressHydrationWarning>
-                  {mounted ? currentTime : "12:00:00 PM"}
+            {/* Hero Right Visual Showcase */}
+            <div className="relative lg:col-span-6">
+              <div className="relative mx-auto max-w-md rounded-3xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-[#151E2E] p-4 shadow-2xl shadow-slate-200/60 dark:shadow-black/40 sm:max-w-none">
+                {/* Visual Image Header */}
+                <div className="relative h-64 overflow-hidden rounded-2xl sm:h-80">
+                  <img
+                    src="https://images.unsplash.com/photo-1523240795612-9a054b0db644?auto=format&fit=crop&w=1200&q=80"
+                    alt="University Campus Facilities"
+                    className="h-full w-full object-cover"
+                  />
+                  <div className="absolute inset-0 bg-gradient-to-t from-slate-900/60 via-transparent to-transparent" />
+                  <div className="absolute bottom-4 left-4 right-4 flex items-center justify-between text-white">
+                    <div>
+                      <p className="text-xs font-semibold text-sky-300">Central Computing Building</p>
+                      <p className="text-lg font-bold">Main Resource Control</p>
+                    </div>
+                    <span className="rounded-full bg-[#0D9488] px-3 py-1 text-xs font-bold uppercase tracking-wider text-white">
+                      Live
+                    </span>
+                  </div>
                 </div>
-              </div>
 
-              {/* Simulator Content Panel */}
-              <div className="p-5 min-h-[310px] flex flex-col justify-between bg-card text-foreground">
-                <AnimatePresence mode="wait">
-                  {simTab === "availability" && (
-                    <motion.div
-                      key="availability"
-                      initial={{ opacity: 0, y: 5 }}
-                      animate={{ opacity: 1, y: 0 }}
-                      exit={{ opacity: 0, y: -5 }}
-                      className="space-y-3 w-full"
-                    >
-                      <div className="flex items-center justify-between mb-1">
-                        <span className="text-[10px] font-black uppercase text-slate-400 tracking-wider">Resource Name</span>
-                        <span className="text-[10px] font-black uppercase text-slate-400 tracking-wider">Status / Utilization</span>
-                      </div>
-                      
-                      {mockSpaces.map((room) => (
-                        <div key={room.id} className="p-3 bg-slate-50/65 dark:bg-slate-950/20 border border-slate-200/60 dark:border-border/30 rounded-2xl flex items-center justify-between hover:border-brand-primary/30 transition-all duration-200">
-                          <div>
-                            <p className="text-xs font-bold text-slate-800 dark:text-white">{room.name}</p>
-                            <p className="text-[10px] text-slate-500 dark:text-foreground/40 mt-0.5">{room.detail}</p>
-                          </div>
-                          <div className="text-right flex flex-col items-end gap-1.5">
-                            <span className={`text-[9px] px-2 py-0.5 font-bold uppercase rounded-full border ${room.color}`}>
-                              {room.status}
-                            </span>
-                            {room.status !== "Maintenance" && (
-                              <div className="flex items-center gap-1.5">
-                                <span className="text-[9px] text-slate-500 font-bold">{room.capacity}</span>
-                                <div className="w-12 bg-slate-200 dark:bg-white/10 h-1 rounded-full overflow-hidden">
-                                  <div className="bg-brand-primary h-full" style={{ width: `${room.fill}%` }} />
-                                </div>
-                              </div>
-                            )}
-                          </div>
-                        </div>
-                      ))}
-                    </motion.div>
-                  )}
-
-                  {simTab === "booking" && (
-                    <motion.div
-                      key="booking"
-                      initial={{ opacity: 0, y: 5 }}
-                      animate={{ opacity: 1, y: 0 }}
-                      exit={{ opacity: 0, y: -5 }}
-                      className="space-y-4 w-full flex flex-col"
-                    >
-                      <div>
-                        <span className="text-[10px] font-black uppercase text-slate-400 tracking-wider block mb-2">1. Choose Resource</span>
-                        <div className="grid grid-cols-3 gap-2">
-                          {["Computing Lab 01", "Lecture Theatre B", "Seminar Room 02"].map((name) => (
-                            <button
-                              key={name}
-                              onClick={() => { setSelectedRoom(name); setBookingStatus("idle"); setSelectedTimeSlot(""); }}
-                              className={`py-2 text-[10px] font-bold rounded-xl border text-center transition-all ${
-                                selectedRoom === name
-                                  ? "border-brand-primary bg-brand-primary/5 text-brand-primary shadow-sm"
-                                  : "border-slate-200 dark:border-border/60 hover:bg-slate-50 dark:hover:bg-white/5 text-slate-600 dark:text-foreground/75"
-                              }`}
-                            >
-                              {name.replace("Computing ", "").replace("Lecture ", "")}
-                            </button>
-                          ))}
-                        </div>
-                      </div>
-
-                      <div>
-                        <span className="text-[10px] font-black uppercase text-slate-400 tracking-wider block mb-2">2. Select Target Time Slot</span>
-                        <div className="grid grid-cols-2 gap-2">
-                          <button
-                            onClick={() => handleSlotSelect("08:30 AM - 10:30 AM")}
-                            className={`py-2 px-3 text-[10px] font-bold rounded-xl border text-left flex justify-between items-center transition-all ${
-                              selectedTimeSlot === "08:30 AM - 10:30 AM"
-                                ? "border-brand-primary bg-brand-primary/5 text-brand-primary"
-                                : "border-slate-200 dark:border-border/60 text-slate-600 dark:text-foreground/70"
-                            }`}
-                          >
-                            <span>08:30 - 10:30 AM</span>
-                            <span className="text-[9px] text-emerald-500 bg-emerald-500/10 px-1.5 py-0.5 rounded font-black">VACANT</span>
-                          </button>
-                          <button
-                            onClick={() => handleSlotSelect("10:30 AM - 12:30 PM")}
-                            className={`py-2 px-3 text-[10px] font-bold rounded-xl border text-left flex justify-between items-center transition-all ${
-                              selectedTimeSlot === "10:30 AM - 12:30 PM"
-                                ? "border-brand-primary bg-brand-primary/5"
-                                : "border-slate-200 dark:border-border/60 text-slate-600 dark:text-foreground/70"
-                            }`}
-                          >
-                            <span>10:30 - 12:30 PM</span>
-                            <span className="text-[9px] text-amber-500 bg-amber-500/10 px-1.5 py-0.5 rounded font-black">COLLISION</span>
-                          </button>
-                        </div>
-                      </div>
-
-                      {/* Animated Result Board */}
-                      <div className="flex-1 min-h-[90px] border border-dashed border-slate-200 dark:border-border/60 rounded-2xl p-3 flex flex-col justify-center bg-slate-50/50 dark:bg-slate-900/5 relative overflow-hidden">
-                        {bookingStatus === "idle" && (
-                          <p className="text-[11px] font-semibold text-slate-400 text-center flex items-center justify-center gap-1.5">
-                            <HelpCircle className="w-4 h-4 text-slate-400" /> Select a time slot above to test validation
-                          </p>
-                        )}
-
-                        {bookingStatus === "conflict" && (
-                          <div className="space-y-2 animate-in fade-in zoom-in-95 duration-200">
-                            <p className="text-[11px] font-bold text-red-500 dark:text-red-400 flex items-center gap-1.5 leading-tight">
-                              <AlertTriangle className="w-4 h-4 text-red-500 shrink-0" /> {bookingMessage}
-                            </p>
-                            <button
-                              onClick={runConflictSolver}
-                              className="w-full flex items-center justify-center gap-1.5 py-1.5 text-[10px] font-black uppercase tracking-wider bg-brand-primary text-white hover:bg-brand-secondary rounded-xl transition-all shadow-md shadow-brand-primary/20"
-                            >
-                              <RefreshCw className="w-3.5 h-3.5 animate-spin-slow" /> Resolve Scheduling Conflict
-                            </button>
-                          </div>
-                        )}
-
-                        {bookingStatus === "resolving" && (
-                          <div className="flex flex-col items-center justify-center gap-2 animate-in fade-in duration-200">
-                            <div className="w-5 h-5 border-2 border-brand-primary/30 border-t-brand-primary rounded-full animate-spin" />
-                            <p className="text-[10px] font-black text-brand-primary uppercase tracking-widest">{bookingMessage}</p>
-                          </div>
-                        )}
-
-                        {bookingStatus === "resolved" && (
-                          <div className="space-y-2 animate-in fade-in zoom-in-95 duration-200">
-                            <p className="text-[11px] font-bold text-amber-500 dark:text-amber-400 flex items-center gap-1.5 leading-tight">
-                              <Check className="w-4 h-4 text-emerald-500 shrink-0" /> {bookingMessage}
-                            </p>
-                            <div className="flex gap-2">
-                              <button
-                                onClick={confirmAlternative}
-                                className="flex-1 py-1.5 text-[10px] font-black uppercase bg-emerald-500 hover:bg-emerald-600 text-white rounded-xl transition-all shadow-sm"
-                              >
-                                Accept alternate space
-                              </button>
-                              <button
-                                onClick={resetBookingSim}
-                                className="py-1.5 px-3 text-[10px] font-bold border border-slate-200 dark:border-border rounded-xl text-slate-500 hover:bg-slate-50 dark:hover:bg-white/5 transition-all"
-                              >
-                                Cancel
-                              </button>
-                            </div>
-                          </div>
-                        )}
-
-                        {bookingStatus === "success" && (
-                          <div className="text-center space-y-2.5 animate-in fade-in zoom-in-95 duration-200">
-                            <p className="text-[11px] font-black text-emerald-600 dark:text-emerald-400 leading-tight">
-                              {bookingMessage}
-                            </p>
-                            <button
-                              onClick={resetBookingSim}
-                              className="inline-flex items-center gap-1 px-4 py-1 text-[9px] font-black border border-emerald-500/20 text-emerald-500 bg-emerald-500/5 rounded-full hover:bg-emerald-500/10 transition-colors"
-                            >
-                              Reset Simulator
-                            </button>
-                          </div>
-                        )}
-                      </div>
-                    </motion.div>
-                  )}
-
-                  {simTab === "analytics" && (
-                    <motion.div
-                      key="analytics"
-                      initial={{ opacity: 0, y: 5 }}
-                      animate={{ opacity: 1, y: 0 }}
-                      exit={{ opacity: 0, y: -5 }}
-                      className="space-y-4 w-full"
-                    >
-                      <div className="grid grid-cols-3 gap-2">
-                        <div className="bg-slate-50 dark:bg-white/5 p-3 rounded-2xl border border-slate-200/50 dark:border-border/30 text-center">
-                          <p className="text-[9px] text-slate-400 font-bold uppercase">Util Rate</p>
-                          <p className="text-lg font-black mt-1 text-slate-800 dark:text-white">84.6%</p>
-                        </div>
-                        <div className="bg-slate-50 dark:bg-white/5 p-3 rounded-2xl border border-slate-200/50 dark:border-border/30 text-center">
-                          <p className="text-[9px] text-slate-400 font-bold uppercase">Bookings</p>
-                          <p className="text-lg font-black mt-1 text-slate-800 dark:text-white">342</p>
-                        </div>
-                        <div className="bg-slate-50 dark:bg-white/5 p-3 rounded-2xl border border-slate-200/50 dark:border-border/30 text-center">
-                          <p className="text-[9px] text-slate-400 font-bold uppercase">Collisions Blocked</p>
-                          <p className="text-lg font-black mt-1 text-emerald-500">47</p>
-                        </div>
-                      </div>
-
-                      <div className="space-y-3 pt-1">
-                        <p className="text-[10px] font-black uppercase text-slate-400 tracking-wider">Utilization by Faculty</p>
-                        
-                        <div className="space-y-2">
-                          <div>
-                            <div className="flex justify-between text-[9px] font-bold text-slate-500 mb-1">
-                              <span>Computing & IS</span>
-                              <span>92%</span>
-                            </div>
-                            <div className="w-full bg-slate-100 dark:bg-white/10 h-1.5 rounded-full overflow-hidden">
-                              <div className="bg-gradient-to-r from-brand-primary to-blue-500 h-full rounded-full" style={{ width: "92%" }} />
-                            </div>
-                          </div>
-                          
-                          <div>
-                            <div className="flex justify-between text-[9px] font-bold text-slate-500 mb-1">
-                              <span>Applied Sciences</span>
-                              <span>76%</span>
-                            </div>
-                            <div className="w-full bg-slate-100 dark:bg-white/10 h-1.5 rounded-full overflow-hidden">
-                              <div className="bg-gradient-to-r from-brand-primary to-blue-500 h-full rounded-full" style={{ width: "76%" }} />
-                            </div>
-                          </div>
-
-                          <div>
-                            <div className="flex justify-between text-[9px] font-bold text-slate-500 mb-1">
-                              <span>Geomatics</span>
-                              <span>68%</span>
-                            </div>
-                            <div className="w-full bg-slate-100 dark:bg-white/10 h-1.5 rounded-full overflow-hidden">
-                              <div className="bg-gradient-to-r from-brand-primary to-blue-500 h-full rounded-full" style={{ width: "68%" }} />
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </motion.div>
-                  )}
-                </AnimatePresence>
-              </div>
+                {/* Floating Metric Badges */}
+                <div className="mt-4 grid grid-cols-2 gap-3">
+                  <div className="rounded-xl bg-sky-50/80 dark:bg-sky-900/30 p-3.5 border border-sky-100 dark:border-sky-800/50">
+                    <div className="flex items-center gap-2 text-sky-700 dark:text-sky-400">
+                      <Clock className="h-4 w-4" />
+                      <span className="text-xs font-bold uppercase tracking-wide">Sync Speed</span>
+                    </div>
+                    <p className="mt-1 text-xl font-extrabold text-[#0F172A] dark:text-white">0.2s</p>
+                    <p className="text-[11px] text-slate-500 dark:text-slate-400">Instant collision detection</p>
+                  </div>
 
-              {/* Simulator Action Footer */}
-              <div className="bg-slate-100/80 dark:bg-[#120E22]/60 px-5 py-3 border-t border-slate-200/80 dark:border-border/40 flex items-center justify-between text-[10px] font-semibold text-slate-500 dark:text-foreground/40">
-                <span>Database Index: Locked</span>
-                <span className="flex items-center gap-1">
-                  <span className="w-1.5 h-1.5 rounded-full bg-blue-500" />
-                  RLS Rules: Enforcement Active
-                </span>
+                  <div className="rounded-xl bg-teal-50/80 dark:bg-teal-900/30 p-3.5 border border-teal-100 dark:border-teal-800/50">
+                    <div className="flex items-center gap-2 text-teal-700 dark:text-teal-400">
+                      <CheckCircle2 className="h-4 w-4" />
+                      <span className="text-xs font-bold uppercase tracking-wide">Weekly Load</span>
+                    </div>
+                    <p className="mt-1 text-xl font-extrabold text-[#0F172A] dark:text-white">98.4%</p>
+                    <p className="text-[11px] text-slate-500 dark:text-slate-400">Zero double-bookings</p>
+                  </div>
+                </div>
               </div>
-            </motion.div>
+            </div>
           </div>
-
         </div>
       </section>
 
-      {/* ─── INTERACTIVE ROLE HUB ─── */}
-      <section className="py-24 relative z-20 bg-slate-50/50 dark:bg-[#0b0814]/40 border-b border-slate-200/40 dark:border-border/30">
-        <div className="max-w-7xl mx-auto px-6">
-          
-          <div className="text-center max-w-2xl mx-auto mb-16">
-            <span className="text-brand-primary font-black tracking-widest uppercase text-xs mb-3 block">Role-Tailored Workspaces</span>
-            <h2 className="text-3xl sm:text-4xl font-black text-slate-900 dark:text-white tracking-tight">
-              One Unified Database. <br />Three Customized Dashboards.
-            </h2>
-            <p className="text-slate-500 dark:text-foreground/60 text-sm font-semibold mt-3">
-              UniLink detects user credentials automatically, serving role-specific features while respecting security boundaries.
-            </p>
-          </div>
-
-          <div className="grid lg:grid-cols-12 gap-8 items-center">
-            
-            {/* Role Hub Left: Controls & Copy */}
-            <div className="lg:col-span-5 space-y-6">
-              <div className="flex flex-col gap-2.5">
-                {(["student", "lecturer", "admin"] as const).map((role) => (
-                  <button
-                    key={role}
-                    onClick={() => setActiveRole(role)}
-                    className={`p-4 text-left rounded-2xl border transition-all flex items-center gap-4 ${
-                      activeRole === role
-                        ? "border-brand-primary bg-card text-foreground shadow-md shadow-brand-primary/5"
-                        : "border-slate-200/80 dark:border-border/40 hover:bg-slate-100/50 dark:hover:bg-white/5 text-slate-500 dark:text-foreground/50"
-                    }`}
-                  >
-                    <div className={`w-10 h-10 rounded-xl flex items-center justify-center font-bold ${
-                      activeRole === role 
-                        ? "bg-brand-primary/10 text-brand-primary" 
-                        : "bg-slate-200/50 dark:bg-white/5 text-slate-400 dark:text-white/20"
-                    }`}>
-                      {role === "student" && <Users className="w-5 h-5" />}
-                      {role === "lecturer" && <Laptop className="w-5 h-5" />}
-                      {role === "admin" && <ShieldCheck className="w-5 h-5" />}
-                    </div>
-                    <div>
-                      <p className="text-sm font-black capitalize">{role === "admin" ? "Admin & Operations" : role}</p>
-                      <p className="text-xs text-slate-400 mt-0.5">
-                        {role === "student" && "For reservation requests & updates"}
-                        {role === "lecturer" && "For class schedules & priority locks"}
-                        {role === "admin" && "For system audits & analytics controls"}
-                      </p>
-                    </div>
-                  </button>
-                ))}
-              </div>
+      {/* ── FEATURED ROOM CATALOG ── */}
+      <section id="catalog" className="bg-white dark:bg-[#0F1623] py-16 border-y border-slate-200/80 dark:border-slate-700/60">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <div className="flex flex-col justify-between gap-4 sm:flex-row sm:items-end mb-10">
+            <div>
+              <p className="text-xs font-bold uppercase tracking-wider text-[#0EA5E9]">Active Facilities</p>
+              <h2 className="mt-1 text-2xl font-bold text-[#0F172A] dark:text-white sm:text-3xl">Featured Campus Spaces</h2>
             </div>
+            <Link
+              href="/login"
+              className="inline-flex items-center gap-1.5 text-xs font-bold text-[#0D9488] hover:text-[#0F766E]"
+            >
+              <span>View Full Catalog</span>
+              <ChevronRight className="h-4 w-4" />
+            </Link>
+          </div>
 
-            {/* Role Hub Right: Interactive Terminal Display */}
-            <div className="lg:col-span-7">
-              <div className="bg-card border border-slate-200 dark:border-border rounded-3xl p-6 shadow-xl relative overflow-hidden min-h-[360px] flex flex-col justify-between">
-                
-                {/* Terminal Header */}
-                <div className="flex justify-between items-center pb-4 border-b border-slate-200/60 dark:border-border/40">
-                  <div className="flex items-center gap-2">
-                    <span className="w-2.5 h-2.5 rounded-full bg-brand-primary opacity-60" />
-                    <span className="text-xs font-black uppercase text-slate-500 dark:text-foreground/50 tracking-wider">
-                      {activeRole === "student" && "Active Session: Student Hub"}
-                      {activeRole === "lecturer" && "Active Session: Faculty Console"}
-                      {activeRole === "admin" && "Active Session: Operator Dashboard"}
+          <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
+            {ROOM_FACULTIES.map((room) => (
+              <div
+                key={room.id}
+                className="group flex flex-col justify-between overflow-hidden rounded-2xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-[#151E2E] transition-all hover:border-sky-300 dark:hover:border-sky-600 hover:shadow-lg hover:shadow-sky-100 dark:hover:shadow-sky-900/20"
+              >
+                <div>
+                  <div className="relative h-44 overflow-hidden">
+                    <img
+                      src={room.image}
+                      alt={room.title}
+                      className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
+                    />
+                    <span className="absolute top-3 right-3 rounded-full bg-white/90 backdrop-blur-sm px-2.5 py-1 text-[10px] font-bold text-slate-700 shadow-sm">
+                      {room.badge}
                     </span>
                   </div>
-                  <span className="text-[10px] font-mono text-slate-400 uppercase">SYS_OK</span>
-                </div>
-
-                {/* Switchable Mock Viewport */}
-                <div className="flex-1 py-6 flex flex-col justify-center">
-                  <AnimatePresence mode="wait">
-                    {activeRole === "student" && (
-                      <motion.div
-                        key="student"
-                        initial={{ opacity: 0, x: 10 }}
-                        animate={{ opacity: 1, x: 0 }}
-                        exit={{ opacity: 0, x: -10 }}
-                        className="space-y-4"
-                      >
-                        <p className="text-sm font-bold text-slate-800 dark:text-white leading-relaxed">
-                          Students gain access to an instant dashboard where they can track approved rooms, reserve laboratory equipment, and view check-in barcodes.
-                        </p>
-                        
-                        {/* Interactive UI Snippet */}
-                        <div className="p-4 bg-slate-50 dark:bg-white/5 rounded-2xl border border-slate-200/50 dark:border-border/30 space-y-3">
-                          <div className="flex justify-between items-center text-[10px] font-black uppercase text-slate-400">
-                            <span>Your Reserved Slots</span>
-                            <span className="text-brand-primary">2 Active</span>
-                          </div>
-                          
-                          <div className="space-y-2">
-                            <div className="flex items-center justify-between p-2.5 bg-card border border-slate-200/60 dark:border-border/30 rounded-xl">
-                              <span className="text-xs font-bold text-slate-800 dark:text-white">Chemistry Lab Space B</span>
-                              <span className="text-[9px] font-bold text-emerald-500 bg-emerald-500/10 px-2 py-0.5 rounded-full border border-emerald-500/20">Approved</span>
-                            </div>
-                            <div className="flex items-center justify-between p-2.5 bg-card border border-slate-200/60 dark:border-border/30 rounded-xl">
-                              <span className="text-xs font-bold text-slate-800 dark:text-white">Smart Projector Kit #4</span>
-                              <span className="text-[9px] font-bold text-amber-500 bg-amber-500/10 px-2 py-0.5 rounded-full border border-amber-500/20">Pending Admin</span>
-                            </div>
-                          </div>
-                        </div>
-                      </motion.div>
-                    )}
-
-                    {activeRole === "lecturer" && (
-                      <motion.div
-                        key="lecturer"
-                        initial={{ opacity: 0, x: 10 }}
-                        animate={{ opacity: 1, x: 0 }}
-                        exit={{ opacity: 0, x: -10 }}
-                        className="space-y-4"
-                      >
-                        <p className="text-sm font-bold text-slate-800 dark:text-white leading-relaxed">
-                          Lecturers bypass standard reservations. They can lock classrooms recursively for a whole term, override student bookings, and approve space requests.
-                        </p>
-                        
-                        {/* Interactive UI Snippet */}
-                        <div className="p-4 bg-slate-50 dark:bg-white/5 rounded-2xl border border-slate-200/50 dark:border-border/30 space-y-3">
-                          <div className="flex justify-between items-center text-[10px] font-black uppercase text-slate-400">
-                            <span>Pending Student Requests</span>
-                            <span className="text-amber-500">Action Required</span>
-                          </div>
-                          
-                          <div className="flex items-center justify-between p-3 bg-card border border-slate-200/60 dark:border-border/30 rounded-xl">
-                            <div>
-                              <p className="text-xs font-bold text-slate-800 dark:text-white">Computing Lab 01</p>
-                              <p className="text-[9px] text-slate-400 mt-0.5">Requested by: Student Society (1:30 PM)</p>
-                            </div>
-                            <div className="flex gap-1.5">
-                              <button className="px-2.5 py-1 text-[9px] font-bold text-white bg-brand-primary rounded-lg">Approve</button>
-                              <button className="px-2.5 py-1 text-[9px] font-bold border border-slate-200 dark:border-border text-slate-500 dark:text-white/60 rounded-lg">Decline</button>
-                            </div>
-                          </div>
-                        </div>
-                      </motion.div>
-                    )}
-
-                    {activeRole === "admin" && (
-                      <motion.div
-                        key="admin"
-                        initial={{ opacity: 0, x: 10 }}
-                        animate={{ opacity: 1, x: 0 }}
-                        exit={{ opacity: 0, x: -10 }}
-                        className="space-y-4"
-                      >
-                        <p className="text-sm font-bold text-slate-800 dark:text-white leading-relaxed">
-                          Administrators monitor security controls, access the complete maintenance ticket system, review usage audits, and compile PDF/Excel reports.
-                        </p>
-                        
-                        {/* Interactive UI Snippet */}
-                        <div className="p-4 bg-slate-50 dark:bg-white/5 rounded-2xl border border-slate-200/50 dark:border-border/30 space-y-3">
-                          <div className="flex justify-between items-center text-[10px] font-black uppercase text-slate-400">
-                            <span>System Status Panel</span>
-                            <span className="text-blue-500 font-mono">100% SECURE</span>
-                          </div>
-                          
-                          <div className="grid grid-cols-2 gap-2.5">
-                            <div className="p-2 bg-card border border-slate-200/60 dark:border-border/30 rounded-xl flex items-center justify-between">
-                              <span className="text-[10px] text-slate-500 dark:text-white/40 font-bold">Active Tickets</span>
-                              <span className="text-xs font-black text-rose-500">12 Pending</span>
-                            </div>
-                            <div className="p-2 bg-card border border-slate-200/60 dark:border-border/30 rounded-xl flex items-center justify-between">
-                              <span className="text-[10px] text-slate-500 dark:text-white/40 font-bold">DB Operations</span>
-                              <span className="text-xs font-black text-emerald-500">Sync OK</span>
-                            </div>
-                          </div>
-                        </div>
-                      </motion.div>
-                    )}
-                  </AnimatePresence>
+                  <div className="p-4">
+                    <p className="text-xs font-semibold text-[#0EA5E9]">{room.type}</p>
+                    <h3 className="mt-1 text-base font-bold text-[#0F172A] dark:text-white">{room.title}</h3>
+                    <p className="mt-1 text-xs text-slate-500 dark:text-slate-400">{room.capacity}</p>
+                  </div>
                 </div>
 
-                {/* Footer specs checklist */}
-                <div className="pt-4 border-t border-slate-200/60 dark:border-border/40 grid grid-cols-3 gap-2 text-[10px] font-bold text-slate-500 dark:text-foreground/40">
-                  <span className="flex items-center gap-1"><Check className="w-3.5 h-3.5 text-brand-primary" /> RBAC Middleware</span>
-                  <span className="flex items-center gap-1"><Check className="w-3.5 h-3.5 text-brand-primary" /> Supabase RLS</span>
-                  <span className="flex items-center gap-1"><Check className="w-3.5 h-3.5 text-brand-primary" /> JWT Verification</span>
+                <div className="flex items-center justify-between border-t border-slate-100 dark:border-slate-700/60 px-4 py-3 bg-slate-50/50 dark:bg-slate-800/30">
+                  <span className="inline-flex items-center gap-1.5 text-xs font-semibold text-teal-700 dark:text-teal-400">
+                    <span className="h-2 w-2 rounded-full bg-teal-500" />
+                    {room.status}
+                  </span>
+                  <Link
+                    href="/login"
+                    className="rounded-lg bg-white dark:bg-[#1E2D42] border border-slate-200 dark:border-slate-600 px-3 py-1.5 text-xs font-semibold text-slate-700 dark:text-slate-300 transition-colors hover:border-sky-400 hover:text-[#0EA5E9]"
+                  >
+                    Hold Room
+                  </Link>
                 </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
 
+      {/* ── SERVICES SECTION ── */}
+      <section id="services" className="py-20 bg-[#F8FAFC] dark:bg-[#0B111E]">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <div className="grid items-center gap-12 lg:grid-cols-12">
+            {/* Left Header */}
+            <div className="lg:col-span-5">
+              <p className="text-xs font-bold uppercase tracking-wider text-[#0EA5E9]">System Capabilities</p>
+              <h2 className="mt-2 text-3xl font-extrabold text-[#0F172A] dark:text-white sm:text-4xl">
+                Services Offered By URMS Index
+              </h2>
+              <p className="mt-4 text-sm leading-relaxed text-slate-600 dark:text-slate-400">
+                Designed to handle high-density university scheduling requests while strictly eliminating administrative delays and double-booking errors.
+              </p>
+              <div className="mt-6">
+                <Link
+                  href="/login"
+                  className="inline-flex items-center gap-2 rounded-full bg-[#0EA5E9] px-5 py-2.5 text-xs font-bold text-white shadow-md shadow-sky-200 dark:shadow-sky-900/30 transition-all hover:bg-sky-600"
+                >
+                  <span>Request Custom Access</span>
+                  <ArrowRight className="h-3.5 w-3.5" />
+                </Link>
               </div>
             </div>
 
+            {/* Right Cards Grid */}
+            <div className="grid gap-4 sm:grid-cols-2 lg:col-span-7">
+              {SERVICES.map((srv, idx) => {
+                const Icon = srv.icon;
+                return (
+                  <div
+                    key={idx}
+                    className="rounded-2xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-[#151E2E] p-5 shadow-sm transition-all hover:border-teal-200 dark:hover:border-teal-700 hover:shadow-md"
+                  >
+                    <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-teal-50 dark:bg-teal-900/30 text-[#0D9488] dark:text-teal-400">
+                      <Icon className="h-5 w-5" />
+                    </div>
+                    <h3 className="mt-4 text-base font-bold text-[#0F172A] dark:text-white">{srv.title}</h3>
+                    <p className="mt-1.5 text-xs leading-relaxed text-slate-600 dark:text-slate-400">{srv.desc}</p>
+                  </div>
+                );
+              })}
+            </div>
           </div>
-
         </div>
       </section>
 
-      {/* ─── DYNAMIC CONFLICT PIPELINE ─── */}
-      <section className="py-24 relative z-20">
-        <div className="max-w-7xl mx-auto px-6">
-          
-          <div className="text-center max-w-2xl mx-auto mb-16">
-            <span className="text-brand-primary font-black tracking-widest uppercase text-xs mb-3 block">Collision Prevention Pipeline</span>
-            <h2 className="text-3xl sm:text-4xl font-black text-slate-900 dark:text-white tracking-tight">
-              Behind the Scheduling Engine
+      {/* ── ROLE WORKSPACES (TABBED HUB) ── */}
+      <section id="workspaces" className="bg-slate-100/70 dark:bg-[#0F1623] py-20 border-y border-slate-200/80 dark:border-slate-700/60">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <div className="text-center max-w-2xl mx-auto mb-12">
+            <p className="text-xs font-bold uppercase tracking-wider text-[#0EA5E9]">Role Architecture</p>
+            <h2 className="mt-1 text-3xl font-extrabold text-[#0F172A] dark:text-white sm:text-4xl">
+              One Engine, Tailored Workspaces
             </h2>
-            <p className="text-slate-500 dark:text-foreground/60 text-sm font-semibold mt-3">
-              How UniLink validates, processes, and matches bookings dynamically inside the database index.
+            <p className="mt-3 text-sm text-slate-600 dark:text-slate-400">
+              Granular access control ensuring each campus member interacts with the exact features required for their responsibility level.
             </p>
           </div>
 
-          {/* Interactive Steps Visualizer */}
-          <div className="grid md:grid-cols-4 gap-6">
-            {pipelineSteps.map((step, idx) => (
-              <motion.div
-                key={idx}
-                initial={{ opacity: 0, y: 15 }}
-                whileInView={{ opacity: 1, y: 0 }}
-                viewport={{ once: true, margin: "-50px" }}
-                transition={{ duration: 0.5, delay: idx * 0.1 }}
-                onClick={() => setConflictStep(idx)}
-                className={`p-6 rounded-3xl border text-left cursor-pointer transition-all ${
-                  conflictStep === idx
-                    ? "bg-card border-brand-primary shadow-lg shadow-brand-primary/5 -translate-y-1"
-                    : "bg-card/40 border-slate-200/80 dark:border-border/30 hover:border-brand-primary/20"
-                }`}
-              >
-                <div className={`w-10 h-10 rounded-xl border flex items-center justify-center mb-4 ${step.color}`}>
-                  {step.icon}
-                </div>
-                <h3 className="text-sm font-black text-slate-800 dark:text-white mb-2">{step.title}</h3>
-                <p className="text-xs text-slate-500 dark:text-foreground/60 leading-relaxed font-semibold">{step.desc}</p>
-              </motion.div>
-            ))}
-          </div>
-
-          {/* Pipeline Interactive Status Graph */}
-          <div className="mt-12 bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-border rounded-3xl p-6 relative overflow-hidden">
-            <div className="flex items-center justify-between mb-4">
-              <span className="text-[10px] font-black uppercase text-slate-400">Simulation Status Graph</span>
-              <span className="text-[10px] font-mono text-brand-primary">Pipeline Step {conflictStep + 1} of 4</span>
-            </div>
-            
-            {/* Visual node connector line */}
-            <div className="relative h-16 w-full flex items-center justify-between px-8 sm:px-16 mt-8 mb-4">
-              <div className="absolute top-1/2 left-0 right-0 h-0.5 bg-slate-200 dark:bg-white/10 -translate-y-1/2 z-0" />
-              <div 
-                className="absolute top-1/2 left-0 h-0.5 bg-brand-primary -translate-y-1/2 z-0 transition-all duration-500" 
-                style={{ width: `${(conflictStep / 3) * 100}%` }}
-              />
-              
-              {[0, 1, 2, 3].map((n) => (
+          {/* Role Navigation Tabs */}
+          <div className="flex justify-center gap-2 mb-8">
+            {ROLES_DATA.map((role) => {
+              const Icon = role.icon;
+              const isActive = activeRole === role.id;
+              return (
                 <button
-                  key={n}
-                  onClick={() => setConflictStep(n)}
-                  suppressHydrationWarning
-                  className={`w-10 h-10 rounded-full flex items-center justify-center font-black text-xs z-10 transition-all ${
-                    n <= conflictStep
-                      ? "bg-brand-primary text-white shadow-lg shadow-brand-primary/20 scale-110"
-                      : "bg-slate-100 dark:bg-[#120E22] border border-slate-200 dark:border-border text-slate-400"
+                  key={role.id}
+                  onClick={() => setActiveRole(role.id)}
+                  className={`flex items-center gap-2 rounded-full px-5 py-2.5 text-xs font-bold transition-all ${
+                    isActive
+                      ? "bg-[#0D9488] text-white shadow-md shadow-teal-200 dark:shadow-teal-900/40"
+                      : "bg-white dark:bg-[#151E2E] text-slate-600 dark:text-slate-300 hover:bg-slate-200/60 dark:hover:bg-slate-700/60 border border-slate-200 dark:border-slate-700"
                   }`}
                 >
-                  {n + 1}
+                  <Icon className="h-4 w-4" />
+                  <span>{role.title}</span>
                 </button>
-              ))}
+              );
+            })}
+          </div>
+
+          {/* Selected Role Display Card */}
+          <div className="mx-auto max-w-4xl rounded-3xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-[#151E2E] p-6 shadow-xl sm:p-8">
+            <div className="flex flex-col gap-6 lg:flex-row lg:items-center lg:justify-between border-b border-slate-100 dark:border-slate-700/60 pb-6">
+              <div>
+                <span className="text-xs font-bold uppercase tracking-wider text-[#0EA5E9]">Role Profile</span>
+                <h3 className="text-2xl font-bold text-[#0F172A] dark:text-white">{selectedRoleInfo.title} Workspace</h3>
+                <p className="mt-2 text-sm text-slate-600 dark:text-slate-400 max-w-xl">{selectedRoleInfo.desc}</p>
+              </div>
+
+              <div className="flex items-center gap-2">
+                {selectedRoleInfo.stats.map((s, idx) => (
+                  <div key={idx} className="rounded-xl bg-slate-50 dark:bg-slate-800/60 p-3 text-center border border-slate-100 dark:border-slate-700 min-w-[100px]">
+                    <p className="text-base font-bold text-[#0F172A] dark:text-white">{s.n}</p>
+                    <p className="text-[10px] font-semibold text-slate-400 uppercase">{s.l}</p>
+                  </div>
+                ))}
+              </div>
             </div>
+
+            <div className="mt-6">
+              <p className="text-xs font-bold uppercase tracking-wider text-slate-400 mb-3">Key Role Capabilities</p>
+              <div className="grid gap-3 sm:grid-cols-3">
+                {selectedRoleInfo.features.map((feat, idx) => (
+                  <div key={idx} className="flex items-center gap-2 rounded-xl bg-sky-50/60 dark:bg-sky-900/20 p-3 text-xs font-semibold text-sky-900 dark:text-sky-300 border border-sky-100 dark:border-sky-800/40">
+                    <Check className="h-4 w-4 text-[#0EA5E9] shrink-0" />
+                    <span>{feat}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* ── PROCESS SECTION ── */}
+      <section id="process" className="py-20 bg-[#F8FAFC] dark:bg-[#0B111E]">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <div className="text-center max-w-2xl mx-auto mb-16">
+            <p className="text-xs font-bold uppercase tracking-wider text-[#0EA5E9]">System Mechanics</p>
+            <h2 className="mt-1 text-3xl font-extrabold text-[#0F172A] dark:text-white sm:text-4xl">
+              Our Design Process & Workflow
+            </h2>
+            <p className="mt-3 text-sm text-slate-600 dark:text-slate-400">
+              Four structured checkpoints behind every single reservation on campus.
+            </p>
           </div>
 
+          <div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-4">
+            {PROCESS_STEPS.map((step, idx) => (
+              <div key={idx} className="relative rounded-2xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-[#151E2E] p-6 shadow-sm">
+                <span className="text-3xl font-extrabold text-sky-200 dark:text-sky-900">{step.step}</span>
+                <h3 className="mt-3 text-base font-bold text-[#0F172A] dark:text-white">{step.title}</h3>
+                <p className="mt-2 text-xs leading-relaxed text-slate-600 dark:text-slate-400">{step.desc}</p>
+              </div>
+            ))}
+          </div>
         </div>
       </section>
 
-      {/* ─── BENTO GRID FEATURES ─── */}
-      <section className="py-24 relative z-20 bg-slate-50/50 dark:bg-[#0b0814]/20 border-y border-slate-200/40 dark:border-border/30">
-        <div className="max-w-7xl mx-auto px-6">
+      {/* ── PORTAL ACCESS ── */}
+      <section className="py-20 bg-white dark:bg-[#0F1623]">
+        <div className="mx-auto max-w-7xl px-6 lg:px-8">
           
-          <div className="mb-16 text-left">
-            <span className="text-brand-primary font-black tracking-widest uppercase text-xs mb-3 block">Platform Capability Ecosystem</span>
-            <h2 className="text-3xl sm:text-4xl font-black text-slate-900 dark:text-white tracking-tight">
-              Fine-Tuned For Academic Operations
+          {/* Section Header */}
+          <div className="mx-auto max-w-2xl text-center">
+            <span className="text-xs font-bold uppercase tracking-widest text-[#0D9488]">
+              Portal Access
+            </span>
+
+            <h2 className="mt-2 text-3xl font-extrabold tracking-tight text-[#0F172A] dark:text-white sm:text-4xl">
+              Choose Your Portal
             </h2>
+
+            <p className="mt-4 text-sm leading-6 text-slate-500 dark:text-slate-400">
+              Access the UniLink Resource Management System through the portal
+              designed for your role and responsibilities.
+            </p>
           </div>
 
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-            
-            {/* Bento Card 1: Console */}
-            <div className="md:col-span-2 bg-card border border-slate-200/70 dark:border-border rounded-[2rem] p-8 relative overflow-hidden group hover:border-brand-primary/30 transition-all duration-300">
-              <div className="relative z-10 flex flex-col justify-between h-full min-h-[220px]">
-                <div className="space-y-4">
-                  <div className="w-10 h-10 rounded-xl bg-brand-primary/10 text-brand-primary flex items-center justify-center">
-                    <LayoutDashboard className="w-5 h-5" />
-                  </div>
-                  <h3 className="text-xl font-black text-slate-800 dark:text-white">Unified Live Console</h3>
-                  <p className="text-slate-500 dark:text-foreground/60 text-sm leading-relaxed max-w-md font-semibold">
-                    Monitor classroom occupancy, labs, and equipment sets. Instant color status tags help operators see vacant resources dynamically.
+          {/* Portal Cards */}
+          <div className="mt-12 grid gap-8 lg:grid-cols-3 lg:items-center">
+            {[
+              {
+                name: "Student Portal",
+                desc: "For students to access and reserve university resources.",
+                features: [
+                  "View available resources",
+                  "Make resource reservations",
+                  "Track reservation status",
+                  "View booking history",
+                  "Manage personal profile",
+                ],
+                cta: "Access Student Portal",
+                popular: false,
+              },
+              {
+                name: "Academic Portal",
+                desc: "For academic staff to manage and coordinate university resources.",
+                features: [
+                  "Manage academic resources",
+                  "Review resource reservations",
+                  "Approve or reject requests",
+                  "Monitor resource availability",
+                  "Manage academic schedules",
+                ],
+                cta: "Access Academic Portal",
+                popular: true,
+              },
+              {
+                name: "Maintenance Portal",
+                desc: "For maintenance teams to monitor and manage resource issues.",
+                features: [
+                  "View maintenance requests",
+                  "Track reported issues",
+                  "Manage maintenance tasks",
+                  "Update repair status",
+                  "Monitor resource conditions",
+                ],
+                cta: "Access Maintenance Portal",
+                popular: false,
+              },
+            ].map((portal, idx) => (
+              <div
+                key={idx}
+                className={`relative flex flex-col justify-between rounded-3xl border p-8 bg-white dark:bg-[#151E2E] transition-all ${
+                  portal.popular
+                    ? "border-[#0D9488] shadow-xl ring-2 ring-[#0D9488]/20 lg:-translate-y-2"
+                    : "border-slate-200 dark:border-slate-700 shadow-sm"
+                }`}
+              >
+                <div>
+                  <h3 className="text-lg font-bold text-[#0F172A] dark:text-white">
+                    {portal.name}
+                  </h3>
+
+                  <p className="mt-1 text-xs text-slate-500 dark:text-slate-400">
+                    {portal.desc}
                   </p>
+
+                  <ul className="mt-8 space-y-3 border-t border-slate-100 dark:border-slate-700/60 pt-6">
+                    {portal.features.map((feat, fIdx) => (
+                      <li
+                        key={fIdx}
+                        className="flex items-center gap-2.5 text-xs text-slate-600 dark:text-slate-400"
+                      >
+                        <Check className="h-4 w-4 shrink-0 text-[#0D9488]" />
+                        <span>{feat}</span>
+                      </li>
+                    ))}
+                  </ul>
                 </div>
-                <div className="flex items-center gap-1.5 text-xs font-bold text-brand-primary pt-4">
-                  Explore Console Views <ChevronRight className="w-4 h-4" />
-                </div>
-              </div>
-              <div className="absolute right-0 bottom-0 top-0 w-1/3 bg-gradient-to-l from-brand-primary/5 to-transparent pointer-events-none hidden sm:block" />
-            </div>
 
-            {/* Bento Card 2: Conflict Validation */}
-            <div className="bg-card border border-slate-200/70 dark:border-border rounded-[2rem] p-8 relative overflow-hidden group hover:border-brand-primary/30 transition-all duration-300">
-              <div className="relative z-10 flex flex-col justify-between h-full min-h-[220px]">
-                <div className="space-y-4">
-                  <div className="w-10 h-10 rounded-xl bg-amber-500/10 text-amber-500 flex items-center justify-center">
-                    <Calendar className="w-5 h-5" />
-                  </div>
-                  <h3 className="text-xl font-black text-slate-800 dark:text-white">Conflict Validation</h3>
-                  <p className="text-slate-500 dark:text-foreground/60 text-sm leading-relaxed font-semibold">
-                    Prevents schedule overlap with absolute precision using dynamic time boundaries.
-                  </p>
+                <div className="mt-8 pt-4">
+                  <Link
+                    href="/login"
+                    className={`block w-full rounded-full py-3 text-center text-xs font-bold transition-all ${
+                      portal.popular
+                        ? "bg-[#0D9488] text-white shadow-md shadow-teal-200 dark:shadow-teal-900/30 hover:bg-[#0F766E]"
+                        : "border border-slate-300 dark:border-slate-600 bg-white dark:bg-transparent text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800"
+                    }`}
+                  >
+                    {portal.cta}
+                  </Link>
                 </div>
-                <span className="text-[10px] font-mono bg-amber-500/10 text-amber-500 py-1 px-3 rounded-full border border-amber-500/20 max-w-max">
-                  PostgreSQL Index Lock
-                </span>
               </div>
-            </div>
+            ))}
+          </div>
+        </div>
+      </section>
 
-            {/* Bento Card 3: Security */}
-            <div className="bg-card border border-slate-200/70 dark:border-border rounded-[2rem] p-8 relative overflow-hidden group hover:border-brand-primary/30 transition-all duration-300">
-              <div className="relative z-10 flex flex-col justify-between h-full min-h-[220px]">
-                <div className="space-y-4">
-                  <div className="w-10 h-10 rounded-xl bg-rose-500/10 text-rose-500 flex items-center justify-center">
-                    <Lock className="w-5 h-5" />
+      {/* ── INQUIRY & CONTACT SECTION ── */}
+      <section className="py-20 bg-[#F8FAFC] dark:bg-[#0B111E]">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <div className="overflow-hidden rounded-3xl bg-gradient-to-r from-slate-900 to-slate-800 dark:from-[#0F1623] dark:to-[#151E2E] dark:border dark:border-slate-700 p-8 text-white shadow-2xl sm:p-12">
+            <div className="grid gap-10 lg:grid-cols-12 lg:items-center">
+              {/* Contact Info */}
+              <div className="lg:col-span-5">
+                <p className="text-xs font-bold uppercase tracking-wider text-sky-400">Direct Support</p>
+                <h2 className="mt-2 text-3xl font-extrabold tracking-tight text-white sm:text-4xl">
+                  Let's Build Something Great Together
+                </h2>
+                <p className="mt-4 text-sm text-slate-300 leading-relaxed">
+                  Have questions regarding faculty resource integration, custom lab setups, or system access? Reach out to the IT administration team.
+                </p>
+
+                <div className="mt-8 space-y-4 text-xs font-medium text-slate-300">
+                  <div className="flex items-center gap-3">
+                    <Mail className="h-4 w-4 text-[#0EA5E9]" />
+                    <span>support@urms.edu.lk</span>
+                  </div>
+                  <div className="flex items-center gap-3">
+                    <Phone className="h-4 w-4 text-[#0EA5E9]" />
+                    <span>+94 (0) 45 228 0000</span>
+                  </div>
+                  <div className="flex items-center gap-3">
+                    <MapPin className="h-4 w-4 text-[#0EA5E9]" />
+                    <span>Faculty of Computing, Campus Administration</span>
                   </div>
-                  <h3 className="text-xl font-black text-slate-800 dark:text-white">Granular DB Access</h3>
-                  <p className="text-slate-500 dark:text-foreground/60 text-sm leading-relaxed font-semibold">
-                    Row Level Security filters users based on their active student, lecturer, or staff role.
-                  </p>
                 </div>
-                <span className="text-[10px] font-mono bg-rose-500/10 text-rose-500 py-1 px-3 rounded-full border border-rose-500/20 max-w-max">
-                  Supabase RLS Active
-                </span>
               </div>
-            </div>
 
-            {/* Bento Card 4: Reports */}
-            <div className="md:col-span-2 bg-card border border-slate-200/70 dark:border-border rounded-[2rem] p-8 relative overflow-hidden group hover:border-brand-primary/30 transition-all duration-300">
-              <div className="relative z-10 flex flex-col justify-between h-full min-h-[220px]">
-                <div className="space-y-4">
-                  <div className="w-10 h-10 rounded-xl bg-emerald-500/10 text-emerald-500 flex items-center justify-center">
-                    <TrendingUp className="w-5 h-5" />
+              {/* Inquiry Form */}
+              <div className="rounded-2xl bg-white/10 p-6 backdrop-blur-md border border-white/10 lg:col-span-7">
+                {inquirySubmitted ? (
+                  <div className="py-8 text-center">
+                    <CheckCircle2 className="mx-auto h-12 w-12 text-teal-400" />
+                    <h3 className="mt-3 text-lg font-bold">Inquiry Sent Successfully</h3>
+                    <p className="mt-1 text-xs text-slate-300">
+                      Our IT resource coordinator will respond within 24 hours.
+                    </p>
                   </div>
-                  <h3 className="text-xl font-black text-slate-800 dark:text-white">Audits & Reports Export</h3>
-                  <p className="text-slate-500 dark:text-foreground/60 text-sm leading-relaxed max-w-md font-semibold">
-                    Generate instant PDF utilization sheets, export tabular schedules to Excel, or coordinate sync to Google Sheets for university management review.
-                  </p>
-                </div>
-                <div className="flex gap-2.5 pt-4">
-                  <span className="text-[9px] font-bold bg-slate-100 dark:bg-[#120E22] px-2.5 py-1 rounded-lg border border-slate-200 dark:border-border">PDF Export</span>
-                  <span className="text-[9px] font-bold bg-slate-100 dark:bg-[#120E22] px-2.5 py-1 rounded-lg border border-slate-200 dark:border-border">Excel Export</span>
-                  <span className="text-[9px] font-bold bg-slate-100 dark:bg-[#120E22] px-2.5 py-1 rounded-lg border border-slate-200 dark:border-border">Google Sheets API</span>
-                </div>
+                ) : (
+                  <form
+                    onSubmit={(e) => {
+                      e.preventDefault();
+                      setInquirySubmitted(true);
+                    }}
+                    className="space-y-4"
+                  >
+                    <div className="grid gap-4 sm:grid-cols-2">
+                      <input
+                        type="text"
+                        required
+                        placeholder="Your Name"
+                        className="w-full rounded-xl border border-white/20 bg-white/10 px-4 py-3 text-xs text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-[#0EA5E9]"
+                      />
+                      <input
+                        type="email"
+                        required
+                        placeholder="University Email"
+                        className="w-full rounded-xl border border-white/20 bg-white/10 px-4 py-3 text-xs text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-[#0EA5E9]"
+                      />
+                    </div>
+                    <select className="w-full rounded-xl border border-white/20 bg-slate-800 px-4 py-3 text-xs text-white focus:outline-none focus:ring-2 focus:ring-[#0EA5E9]">
+                      <option>General Resource Query</option>
+                      <option>Faculty Schedule Integration</option>
+                      <option>Lab Equipment Request</option>
+                    </select>
+                    <textarea
+                      rows={3}
+                      required
+                      placeholder="Your Message..."
+                      className="w-full rounded-xl border border-white/20 bg-white/10 px-4 py-3 text-xs text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-[#0EA5E9]"
+                    />
+                    <button
+                      type="submit"
+                      className="w-full rounded-xl bg-[#0D9488] py-3 text-xs font-bold text-white transition-all hover:bg-[#0F766E]"
+                    >
+                      Send Message
+                    </button>
+                  </form>
+                )}
               </div>
             </div>
-
           </div>
-
         </div>
       </section>
 
-      {/* ─── IMMERSIVE CTA FOOTER ─── */}
-      <section className="relative pt-32 pb-20 overflow-hidden bg-slate-950 dark:bg-black border-t border-white/5">
-        
-        {/* Glow ambient lines */}
-        <div className="absolute bottom-[-20%] left-1/2 -translate-x-1/2 w-[80vw] h-[40vw] bg-brand-primary/20 rounded-full blur-[140px] pointer-events-none" />
-        
-        <div className="relative max-w-5xl mx-auto px-6 text-center z-10">
-          <div className="bg-white/5 backdrop-blur-2xl border border-white/10 p-12 md:p-20 rounded-[3rem] shadow-2xl relative overflow-hidden">
-            <div className="absolute inset-0 bg-gradient-to-br from-brand-primary/10 to-transparent pointer-events-none" />
-            
-            <h2 className="text-3xl md:text-5xl font-black text-white mb-6 leading-tight relative z-10">
-              Upgrade Your Campus <br />
-              <span className="text-transparent bg-clip-text bg-gradient-to-r from-brand-accent to-brand-primary">Resource Control System</span>
-            </h2>
-            <p className="text-slate-300 text-base md:text-lg mb-10 max-w-xl mx-auto font-semibold relative z-10">
-              Coordinate and optimize your campus rooms, schedule classes conflict-free, and resolve resource bottlenecks today.
-            </p>
-
-            <div className="flex flex-col sm:flex-row justify-center gap-4 relative z-10">
-              <Link
-                href="/register"
-                className="inline-flex items-center justify-center gap-2 px-10 py-5 text-base font-black text-slate-900 rounded-2xl bg-white hover:scale-[1.02] hover:shadow-[0_0_30px_rgba(255,255,255,0.25)] transition-all duration-300 cursor-pointer"
-              >
-                Create Account
-              </Link>
-              <Link
-                href="/login"
-                className="inline-flex items-center justify-center gap-2 px-10 py-5 text-base font-black text-white rounded-2xl border border-white/20 hover:bg-white/10 transition-all duration-300"
-              >
-                Sign In
-              </Link>
-            </div>
-          </div>
-          
-          <div className="mt-16 text-slate-500 text-sm font-bold flex items-center justify-center gap-2">
-            © {new Date().getFullYear()} UniLink. Built for Capstone Project G15.
-          </div>
-        </div>
-      </section>
-      
     </div>
   );
 }
\ No newline at end of file
diff --git a/app/profile/page.tsx b/app/profile/page.tsx
index a084f85..89b9272 100644
--- a/app/profile/page.tsx
+++ b/app/profile/page.tsx
@@ -37,13 +37,13 @@ const roleMeta: Record<string, {
     dot: string;
     icon: string;
 }> = {
-    admin:       { label: "Administrator", gradient: "from-violet-500 to-purple-600",  badge: "bg-violet-500/10 border-violet-500/20",  badgeText: "text-violet-500",  dot: "bg-violet-500", icon: "👑" },
-    lecturer:    { label: "Lecturer",      gradient: "from-emerald-500 to-teal-600",   badge: "bg-emerald-500/10 border-emerald-500/20",badgeText: "text-emerald-500", dot: "bg-emerald-500",icon: "🎓" },
-    student:     { label: "Student",       gradient: "from-blue-500 to-indigo-600",    badge: "bg-blue-500/10 border-blue-500/20",      badgeText: "text-blue-500",    dot: "bg-blue-500",   icon: "📚" },
-    maintenance: { label: "Maintenance",   gradient: "from-amber-500 to-orange-600",   badge: "bg-amber-500/10 border-amber-500/20",    badgeText: "text-amber-500",   dot: "bg-amber-500",  icon: "🔧" },
+    admin:       { label: "Administrator", gradient: "bg-gradient-to-br from-violet-600 to-indigo-600",  badge: "bg-violet-500/10 border-violet-500/20",  badgeText: "text-violet-500",  dot: "bg-violet-500", icon: "👑" },
+    lecturer:    { label: "Lecturer",      gradient: "bg-gradient-to-br from-emerald-500 to-teal-600",   badge: "bg-emerald-500/10 border-emerald-500/20",badgeText: "text-emerald-500", dot: "bg-emerald-500",icon: "🎓" },
+    student:     { label: "Student",       gradient: "bg-gradient-to-br from-blue-500 to-indigo-600",    badge: "bg-blue-500/10 border-blue-500/20",      badgeText: "text-blue-500",    dot: "bg-blue-500",   icon: "📚" },
+    maintenance: { label: "Maintenance",   gradient: "bg-gradient-to-br from-amber-500 to-orange-600",   badge: "bg-amber-500/10 border-amber-500/20",    badgeText: "text-amber-500",   dot: "bg-amber-500",  icon: "🔧" },
 };
 
-const defaultMeta = { label: "User", gradient: "from-slate-500 to-slate-700", badge: "bg-slate-500/10 border-slate-200", badgeText: "text-slate-700", dot: "bg-slate-500", icon: "👤" };
+const defaultMeta = { label: "User", gradient: "bg-gradient-to-br from-slate-500 to-slate-700", badge: "bg-slate-500/10 border-slate-200", badgeText: "text-slate-700", dot: "bg-slate-500", icon: "👤" };
 
 /* ── Custom Toggle Switch Component ── */
 interface SwitchProps {
@@ -58,12 +58,12 @@ function ToggleSwitch({ checked, onChange, disabled }: SwitchProps) {
             type="button"
             disabled={disabled}
             onClick={() => onChange(!checked)}
-            className={`relative inline-flex h-6.5 w-12 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-250 ease-in-out focus:outline-none focus:ring-2 focus:ring-brand-primary/25 ${
+            className={`relative inline-flex h-6.5 w-12 shrink-0 cursor-pointer rounded-none border-2 border-transparent transition-colors duration-250 ease-in-out focus:outline-none focus:ring-2 focus:ring-brand-primary/25 ${
                 checked ? "bg-brand-primary" : "bg-slate-200 dark:bg-white/10"
             } ${disabled ? "opacity-50 cursor-not-allowed" : ""}`}
         >
             <span
-                className={`pointer-events-none inline-block h-5.5 w-5.5 transform rounded-full bg-white shadow-md ring-0 transition duration-250 ease-in-out ${
+                className={`pointer-events-none inline-block h-5.5 w-5.5 transform rounded-none bg-white shadow-md ring-0 transition duration-250 ease-in-out ${
                     checked ? "translate-x-5.5" : "translate-x-0"
                 }`}
             />
@@ -254,79 +254,117 @@ export default function ProfilePage() {
 
     return (
         <ProtectedRoute>
-            <div className="min-h-screen bg-slate-50 dark:bg-background/20 overflow-x-hidden">
+            <div className="min-h-screen bg-[#F8FAFC] overflow-x-hidden">
 
                 <style>{`
-                    @keyframes slide-up   { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
+                    @keyframes slide-up   { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
                     @keyframes fade-in    { from{opacity:0} to{opacity:1} }
-                    @keyframes pulse-dot  { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.25);opacity:0.7} }
-                    .anim-up-1  { animation: slide-up 0.45s ease 0.05s both; }
-                    .anim-up-2  { animation: slide-up 0.45s ease 0.12s both; }
-                    .anim-up-3  { animation: slide-up 0.45s ease 0.2s both; }
-                    .anim-up-4  { animation: slide-up 0.45s ease 0.28s both; }
-                    .anim-fade  { animation: fade-in  0.5s ease both; }
-                    .card-hover { transition: all 0.25s cubic-bezier(.4,0,.2,1); }
-                    .card-hover:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
-                    .online-dot { animation: pulse-dot 2s ease-in-out infinite; }
+                    @keyframes pulse-ring { 0%,100%{transform:scale(1);opacity:0.6} 50%{transform:scale(1.12);opacity:0} }
+                    @keyframes online-pulse { 0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,0.5)} 70%{box-shadow:0 0 0 6px rgba(16,185,129,0)} }
+                    .anim-1 { animation: slide-up 0.5s cubic-bezier(0.16,1,0.3,1) 0.05s both; }
+                    .anim-2 { animation: slide-up 0.5s cubic-bezier(0.16,1,0.3,1) 0.12s both; }
+                    .anim-3 { animation: slide-up 0.5s cubic-bezier(0.16,1,0.3,1) 0.2s both; }
+                    .anim-4 { animation: slide-up 0.5s cubic-bezier(0.16,1,0.3,1) 0.28s both; }
+                    .anim-fade { animation: fade-in 0.4s ease both; }
+                    .ring-pulse::before { content:''; position:absolute; inset:-4px; border-radius:50%; border:2px solid; animation: pulse-ring 2.5s ease-in-out infinite; }
+                    .online-dot { animation: online-pulse 2s ease-in-out infinite; }
+                    .card-lift { transition: all 0.25s cubic-bezier(0.4,0,0.2,1); }
+                    .card-lift:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(14,165,233,0.10); }
+                    .tab-underline { position:absolute; bottom:-1px; left:0; right:0; height:2px; border-radius:2px; background:linear-gradient(90deg,#0EA5E9,#0D9488); }
+                    .input-field {
+                        width:100%; padding: 0.875rem 1rem 0.875rem 2.75rem;
+                        background:#fff; border:1.5px solid #E2E8F0; border-radius:12px;
+                        font-size:0.875rem; font-weight:600; color:#0F172A;
+                        transition: border-color 0.2s, box-shadow 0.2s;
+                        outline:none;
+                    }
+                    .input-field:focus { border-color:#0EA5E9; box-shadow:0 0 0 3px rgba(14,165,233,0.12); }
+                    .input-field:disabled { background:#F8FAFC; color:#94A3B8; cursor:not-allowed; }
+                    .toggle-track {
+                        position:relative; display:inline-flex; align-items:center;
+                        width:46px; height:26px; border-radius:99px; cursor:pointer;
+                        transition: background 0.25s ease; border:none; outline:none;
+                        flex-shrink:0;
+                    }
+                    .toggle-thumb {
+                        position:absolute; left:3px; width:20px; height:20px;
+                        background:#fff; border-radius:50%;
+                        box-shadow: 0 1px 4px rgba(0,0,0,0.18);
+                        transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);
+                    }
                 `}</style>
 
                 {authLoading ? (
                     <div className="flex flex-col items-center justify-center min-h-screen gap-4">
-                        <div className="w-16 h-16 rounded-3xl bg-brand-primary/5 border border-brand-primary/10 flex items-center justify-center shadow-md">
-                            <Loader2 className="w-8 h-8 text-brand-primary animate-spin" />
+                        <div className="w-16 h-16 rounded-2xl bg-[#F0F9FF] border border-[#BAE6FD] flex items-center justify-center shadow-md">
+                            <Loader2 className="w-7 h-7 text-[#0EA5E9] animate-spin" />
                         </div>
-                        <p className="text-slate-400 font-semibold text-sm">Loading your profile…</p>
+                        <p className="text-[#64748B] font-semibold text-sm">Loading your profile…</p>
                     </div>
 
                 ) : !user ? (
                     <div className="flex flex-col items-center justify-center min-h-screen gap-4">
-                        <div className="w-16 h-16 rounded-3xl bg-red-50 dark:bg-red-500/10 border border-red-100 dark:border-red-500/20 flex items-center justify-center shadow-md">
-                            <AlertCircle className="w-8 h-8 text-red-400" />
+                        <div className="w-16 h-16 rounded-2xl bg-red-50 border border-red-100 flex items-center justify-center shadow-md">
+                            <AlertCircle className="w-7 h-7 text-red-400" />
                         </div>
-                        <p className="text-slate-700 dark:text-white/80 font-bold">Not signed in</p>
-                        <p className="text-slate-400 text-sm">Please sign in to view your profile.</p>
+                        <p className="text-[#0F172A] font-bold">Not signed in</p>
+                        <p className="text-[#64748B] text-sm">Please sign in to view your profile.</p>
                     </div>
 
                 ) : (
-                    <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-10 space-y-8">
-
-                        {/* HERO BANNER CARD */}
-                        <div className="anim-up-1 relative overflow-hidden rounded-3xl shadow-xl shadow-slate-100 dark:shadow-none border border-slate-100 dark:border-white/5">
-                            {/* Gradient banner top */}
-                            <div className={`h-36 bg-gradient-to-br ${meta.gradient} relative overflow-hidden`}>
-                                <div className="absolute -top-8 -right-8 w-48 h-48 bg-white/10 rounded-full" />
-                                <div className="absolute -bottom-12 -left-8 w-56 h-56 bg-white/10 rounded-full" />
-                                <div className="absolute inset-0 opacity-10" style={{ backgroundImage: "radial-gradient(circle, white 1px, transparent 1px)", backgroundSize: "20px 20px" }} />
+                    <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-6">
+
+                        {/* ── HERO CARD ── */}
+                        <div className="anim-1 relative overflow-hidden rounded-2xl bg-white border border-[#E2E8F0] shadow-sm">
+                            {/* Banner gradient */}
+                            <div className="h-40 relative overflow-hidden"
+                                style={{ background: "linear-gradient(135deg, #0EA5E9 0%, #0D9488 50%, #0284C7 100%)" }}>
+                                {/* Decorative blobs */}
+                                <div className="absolute -top-10 -right-10 w-52 h-52 rounded-full bg-white/10" />
+                                <div className="absolute -bottom-16 -left-6 w-48 h-48 rounded-full bg-white/10" />
+                                <div className="absolute top-4 right-4 w-24 h-24 rounded-full bg-white/5" />
+                                {/* Dot grid */}
+                                <div className="absolute inset-0 opacity-10"
+                                    style={{ backgroundImage:"radial-gradient(circle, white 1.5px, transparent 1.5px)", backgroundSize:"24px 24px" }} />
+                                {/* Role badge top-right */}
+                                <div className="absolute top-4 left-6 flex items-center gap-2">
+                                    <span className="text-xl">{meta.icon}</span>
+                                    <span className="text-xs font-bold text-white/80 uppercase tracking-widest">{meta.label} Account</span>
+                                </div>
                             </div>
 
-                            {/* White body */}
-                            <div className="bg-card px-8 pb-8">
-                                <div className="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-4 -mt-14 mb-7">
-                                    <div className="flex items-end gap-5">
-                                        <div className={`relative p-1 rounded-3xl bg-gradient-to-br ${meta.gradient} shadow-2xl`}>
-                                            <div className="w-24 h-24 rounded-[20px] bg-card flex items-center justify-center text-3xl font-black text-slate-800 dark:text-white">
-                                                {initials}
-                                            </div>
-                                            <div className="absolute -bottom-1.5 -right-1.5 w-6 h-6 rounded-full bg-emerald-400 border-2 border-white dark:border-slate-900 shadow online-dot" />
-                                        </div>
+                            {/* Avatar + name row */}
+                            <div className="px-6 sm:px-8 pb-6">
+                                <div className="relative -mt-12 mb-4 w-fit">
+                                    <div className="w-24 h-24 rounded-2xl bg-white border-4 border-white shadow-xl flex items-center justify-center"
+                                        style={{ background: "linear-gradient(135deg, #0EA5E9, #0D9488)" }}>
+                                        <span className="text-3xl font-black text-white">{initials}</span>
+                                    </div>
+                                    {/* Online dot */}
+                                    <div className="absolute -bottom-1.5 -right-1.5 w-5 h-5 rounded-full bg-emerald-400 border-2 border-white shadow-sm online-dot" />
+                                </div>
 
-                                        <div className="pb-2">
-                                            <div className="flex items-center gap-2 mb-1">
-                                                <h1 className="text-2xl font-black text-slate-900 dark:text-white leading-tight">{currentName}</h1>
-                                                <span className="text-lg">{meta.icon}</span>
-                                            </div>
-                                            <p className="text-slate-500 dark:text-slate-400 text-sm font-medium">{currentEmail}</p>
-                                            <span className={`inline-flex items-center gap-1.5 mt-2 px-3 py-1 rounded-full text-xs font-bold border ${meta.badge} ${meta.badgeText}`}>
-                                                <BadgeCheck className="w-3.5 h-3.5" />
+                                <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4 mb-6">
+                                    <div className="pb-1 max-w-full">
+                                        <div className="flex items-center gap-2 mb-1">
+                                            <h1 className="text-xl font-black text-[#0F172A] leading-tight">{currentName}</h1>
+                                            <BadgeCheck className="w-4.5 h-4.5 text-[#0EA5E9] shrink-0" />
+                                        </div>
+                                        <p className="text-[#64748B] text-sm break-all">{currentEmail}</p>
+                                        <div className="mt-2.5">
+                                            <span className={`inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-[11px] font-bold border ${meta.badge} ${meta.badgeText}`}>
+                                                <BadgeCheck className="w-3 h-3" />
                                                 {meta.label}
                                             </span>
                                         </div>
                                     </div>
 
+                                    {/* Edit button */}
                                     {activeTab === "profile" && !isEditing && (
                                         <button
                                             onClick={() => setIsEditing(true)}
-                                            className={`flex items-center gap-2 px-5 py-2.5 rounded-xl text-sm font-bold text-white bg-gradient-to-r ${meta.gradient} shadow-md hover:scale-[1.02] active:scale-95 transition-all duration-200`}
+                                            className="shrink-0 flex items-center justify-center gap-2 px-5 py-2.5 rounded-xl text-sm font-bold text-white transition-all duration-200 hover:-translate-y-0.5 hover:shadow-lg active:scale-95 cursor-pointer h-fit"
+                                            style={{ background: "linear-gradient(135deg, #0EA5E9, #0D9488)", boxShadow: "0 4px 14px rgba(14,165,233,0.25)" }}
                                         >
                                             <Edit2 className="w-4 h-4" />
                                             Edit Profile
@@ -334,15 +372,22 @@ export default function ProfilePage() {
                                     )}
                                 </div>
 
+                                {/* Info chips row */}
                                 <div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
-                                    {infoItems.map((item, i) => (
-                                        <div key={i} className={`card-hover flex items-center gap-3 p-4 rounded-2xl border ${item.border} ${item.bg}`}>
-                                            <div className={`shrink-0 w-9 h-9 rounded-xl bg-card border border-slate-200/40 dark:border-white/5 flex items-center justify-center shadow-sm ${item.color}`}>
+                                    {[
+                                        { icon: <Mail className="w-4 h-4" />,     label: "Email",        value: currentEmail, accent: "#0EA5E9", bg: "#F0F9FF" },
+                                        { icon: <Shield className="w-4 h-4" />,   label: "Role",         value: meta.label,   accent: "#8B5CF6", bg: "#F5F3FF" },
+                                        { icon: <Calendar className="w-4 h-4" />, label: "Member Since", value: joinDate,      accent: "#0D9488", bg: "#F0FDFA" },
+                                        { icon: <Building2 className="w-4 h-4" />,label: "Institution",  value: "SUSL",        accent: "#F59E0B", bg: "#FFFBEB" },
+                                    ].map((item, i) => (
+                                        <div key={i} className="card-lift flex items-center gap-3 p-3.5 rounded-xl border border-[#E2E8F0] bg-[#F8FAFC]">
+                                            <div className="shrink-0 w-9 h-9 rounded-xl flex items-center justify-center"
+                                                style={{ background: item.bg, color: item.accent }}>
                                                 {item.icon}
                                             </div>
                                             <div className="min-w-0">
-                                                <p className="text-[9px] font-bold uppercase tracking-widest text-slate-400 dark:text-slate-500">{item.label}</p>
-                                                <p className="text-sm font-bold text-slate-800 dark:text-white truncate mt-0.5">{item.value}</p>
+                                                <p className="text-[9px] font-bold uppercase tracking-widest text-[#94A3B8]">{item.label}</p>
+                                                <p className="text-[12px] font-bold text-[#0F172A] truncate mt-0.5">{item.value}</p>
                                             </div>
                                         </div>
                                     ))}
@@ -350,138 +395,123 @@ export default function ProfilePage() {
                             </div>
                         </div>
 
-                        {/* TAB BAR SWITCHER */}
-                        <div className="anim-up-2 flex border-b border-slate-200 dark:border-white/5 pb-px gap-6">
-                            <button
-                                onClick={() => setActiveTab("profile")}
-                                className={`pb-4 text-xs font-black uppercase tracking-wider transition-all relative ${
-                                    activeTab === "profile" 
-                                        ? "text-brand-primary" 
-                                        : "text-slate-400 hover:text-slate-600 dark:hover:text-slate-300"
-                                }`}
-                            >
-                                General Profile
-                                {activeTab === "profile" && (
-                                    <motion.div layoutId="profileActiveTab" className="absolute bottom-0 left-0 right-0 h-0.5 bg-brand-primary" />
-                                )}
-                            </button>
-                            <button
-                                onClick={() => {
-                                    setActiveTab("preferences");
-                                    setSuccess(null);
-                                    setError(null);
-                                }}
-                                className={`pb-4 text-xs font-black uppercase tracking-wider transition-all relative flex items-center gap-1.5 ${
-                                    activeTab === "preferences" 
-                                        ? "text-brand-primary" 
-                                        : "text-slate-400 hover:text-slate-600 dark:hover:text-slate-300"
-                                }`}
-                            >
-                                <BellRing className="w-3.5 h-3.5" />
-                                Notification Settings
-                                {activeTab === "preferences" && (
-                                    <motion.div layoutId="profileActiveTab" className="absolute bottom-0 left-0 right-0 h-0.5 bg-brand-primary" />
-                                )}
-                            </button>
+                        {/* ── TAB BAR ── */}
+                        <div className="anim-2 flex items-center gap-1 bg-white border border-[#E2E8F0] rounded-2xl p-1.5 shadow-sm">
+                            {[
+                                { key: "profile", label: "General Profile", icon: <UserIcon className="w-3.5 h-3.5" /> },
+                                { key: "preferences", label: "Notifications", icon: <BellRing className="w-3.5 h-3.5" /> },
+                            ].map((tab) => (
+                                <button
+                                    key={tab.key}
+                                    onClick={() => { setActiveTab(tab.key as any); setSuccess(null); setError(null); }}
+                                    className={`flex-1 flex items-center justify-center gap-2 py-2.5 px-4 rounded-xl text-sm font-semibold transition-all duration-200 cursor-pointer ${
+                                        activeTab === tab.key
+                                            ? "text-white shadow-md"
+                                            : "text-[#64748B] hover:text-[#0F172A] hover:bg-[#F8FAFC]"
+                                    }`}
+                                    style={activeTab === tab.key ? { background: "linear-gradient(135deg, #0EA5E9, #0D9488)" } : {}}
+                                >
+                                    {tab.icon}
+                                    {tab.label}
+                                </button>
+                            ))}
                         </div>
 
-                        {/* Feedback Banner */}
+                        {/* ── Feedback Banner ── */}
                         {success && (
-                            <div className="anim-fade flex items-center gap-3 bg-emerald-50 dark:bg-emerald-500/10 border border-emerald-250 dark:border-emerald-500/20 p-4 rounded-2xl shadow-sm">
-                                <CheckCircle2 className="w-5 h-5 text-emerald-500 shrink-0" />
-                                <p className="text-sm font-bold text-emerald-700 dark:text-emerald-400">{success}</p>
+                            <div className="anim-fade flex items-center gap-3 bg-[#F0FDFA] border border-[#99F6E4] p-4 rounded-2xl shadow-sm">
+                                <CheckCircle2 className="w-5 h-5 text-[#0D9488] shrink-0" />
+                                <p className="text-sm font-semibold text-[#0F766E]">{success}</p>
+                            </div>
+                        )}
+                        {error && (
+                            <div className="anim-fade flex items-center gap-3 bg-red-50 border border-red-200 p-4 rounded-2xl shadow-sm">
+                                <AlertCircle className="w-5 h-5 text-red-500 shrink-0" />
+                                <p className="text-sm font-semibold text-red-600">{error}</p>
                             </div>
                         )}
 
-                        {/* ─── TAB CONTENT 1: PROFILE INFO ─── */}
+                        {/* ─── TAB 1: PROFILE ─── */}
                         {activeTab === "profile" && (
-                            <div className="space-y-6">
-                                {/* EDIT FORM */}
+                            <div className="anim-3 space-y-5">
+
+                                {/* Edit Form */}
                                 {isEditing && (
-                                    <div className="anim-up-2 bg-card border border-slate-100 dark:border-white/5 rounded-3xl shadow-sm overflow-hidden">
-                                        <div className={`h-1 bg-gradient-to-r ${meta.gradient}`} />
-                                        <div className="p-8">
-                                            <div className="flex items-center gap-3 mb-7">
-                                                <div className={`w-10 h-10 rounded-2xl bg-gradient-to-br ${meta.gradient} flex items-center justify-center shadow-md`}>
-                                                    <Edit2 className="w-4 h-4 text-white" />
+                                    <div className="bg-white border border-[#E2E8F0] rounded-2xl shadow-sm overflow-hidden">
+                                        {/* Top accent bar */}
+                                        <div className="h-1 w-full" style={{ background: "linear-gradient(90deg, #0EA5E9, #0D9488)" }} />
+                                        <div className="p-6 sm:p-8">
+                                            <div className="flex items-center gap-3 mb-6">
+                                                <div className="w-10 h-10 rounded-xl flex items-center justify-center text-white"
+                                                    style={{ background: "linear-gradient(135deg, #0EA5E9, #0D9488)" }}>
+                                                    <Edit2 className="w-4 h-4" />
                                                 </div>
                                                 <div>
-                                                    <h2 className="text-lg font-black text-slate-900 dark:text-white">Edit Information</h2>
-                                                    <p className="text-xs text-slate-450">Update your display name</p>
+                                                    <h2 className="text-base font-bold text-[#0F172A]">Edit Information</h2>
+                                                    <p className="text-xs text-[#64748B]">Update your display name and contact details</p>
                                                 </div>
                                             </div>
 
-                                            {error && (
-                                                <div className="flex items-center gap-3 bg-red-50 border border-red-200 p-4 rounded-2xl mb-6">
-                                                    <AlertCircle className="w-4 h-4 text-red-500 shrink-0" />
-                                                    <p className="text-sm font-semibold text-red-600">{error}</p>
-                                                </div>
-                                            )}
-
                                             <form onSubmit={handleSaveProfile} className="space-y-5 max-w-lg">
+                                                {/* Full Name */}
                                                 <div>
-                                                    <label htmlFor="displayName" className="block text-[10px] font-black uppercase tracking-widest text-slate-400 mb-2">
+                                                    <label htmlFor="displayName" className="block text-[10px] font-black uppercase tracking-widest text-[#94A3B8] mb-2">
                                                         Full Name
                                                     </label>
                                                     <div className="relative">
-                                                        <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
-                                                            <UserIcon className="h-4 w-4 text-slate-400" />
+                                                        <div className="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none">
+                                                            <UserIcon className="h-4 w-4 text-[#94A3B8]" />
                                                         </div>
                                                         <input
-                                                            id="displayName"
-                                                            type="text"
+                                                            id="displayName" type="text"
                                                             value={displayName}
                                                             onChange={(e) => setDisplayName(e.target.value)}
-                                                            disabled={saveLoading}
-                                                            required
+                                                            disabled={saveLoading} required
                                                             placeholder="Your full name"
-                                                            className="block w-full pl-11 pr-4 py-3.5 bg-slate-55 dark:bg-white/5 border border-slate-200/50 dark:border-white/5 rounded-2xl text-sm font-semibold text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary transition-all disabled:opacity-50"
+                                                            className="input-field"
                                                         />
                                                     </div>
                                                 </div>
 
+                                                {/* Phone */}
                                                 <div>
-                                                    <label htmlFor="phone" className="block text-[10px] font-black uppercase tracking-widest text-slate-400 mb-2">
-                                                        Phone Number (for Critical SMS Alerts)
+                                                    <label htmlFor="phone" className="block text-[10px] font-black uppercase tracking-widest text-[#94A3B8] mb-2">
+                                                        Phone Number <span className="normal-case font-medium">(for SMS alerts)</span>
                                                     </label>
                                                     <div className="relative">
-                                                        <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
-                                                            <Smartphone className="h-4 w-4 text-slate-400" />
+                                                        <div className="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none">
+                                                            <Smartphone className="h-4 w-4 text-[#94A3B8]" />
                                                         </div>
                                                         <input
-                                                            id="phone"
-                                                            type="text"
+                                                            id="phone" type="text"
                                                             value={phone}
                                                             onChange={(e) => setPhone(e.target.value)}
                                                             disabled={saveLoading}
-                                                            placeholder="+947XXXXXXXX or 07XXXXXXXX"
-                                                            className="block w-full pl-11 pr-4 py-3.5 bg-slate-55 dark:bg-white/5 border border-slate-200/50 dark:border-white/5 rounded-2xl text-sm font-semibold text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary transition-all disabled:opacity-50"
+                                                            placeholder="+947XXXXXXXX"
+                                                            className="input-field"
                                                         />
                                                     </div>
                                                 </div>
 
+                                                {/* Email (read-only) */}
                                                 <div className="opacity-60 pointer-events-none">
-                                                    <label className="block text-[10px] font-black uppercase tracking-widest text-slate-400 mb-2">
+                                                    <label className="block text-[10px] font-black uppercase tracking-widest text-[#94A3B8] mb-2">
                                                         Email Address <span className="normal-case font-medium">(read-only)</span>
                                                     </label>
                                                     <div className="relative">
-                                                        <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
-                                                            <Mail className="h-4 w-4 text-slate-400" />
+                                                        <div className="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none">
+                                                            <Mail className="h-4 w-4 text-[#94A3B8]" />
                                                         </div>
-                                                        <input
-                                                            type="email"
-                                                            value={currentEmail}
-                                                            disabled
-                                                            className="block w-full pl-11 pr-4 py-3.5 bg-slate-100 dark:bg-white/5 border border-slate-200/60 dark:border-white/5 rounded-2xl text-sm font-semibold text-slate-500 cursor-not-allowed"
-                                                        />
+                                                        <input type="email" value={currentEmail} disabled className="input-field" />
                                                     </div>
                                                 </div>
 
-                                                <div className="flex gap-3 pt-2">
+                                                {/* Actions */}
+                                                <div className="flex gap-3 pt-1">
                                                     <button
-                                                        type="submit"
-                                                        disabled={saveLoading}
-                                                        className={`relative overflow-hidden inline-flex items-center gap-2 px-6 py-3 rounded-xl text-sm font-bold text-white bg-gradient-to-r ${meta.gradient} shadow-lg hover:scale-[1.02] active:scale-95 transition-all`}
+                                                        type="submit" disabled={saveLoading}
+                                                        className="inline-flex items-center gap-2 px-6 py-2.5 rounded-xl text-sm font-bold text-white shadow-md hover:-translate-y-0.5 active:scale-95 transition-all disabled:opacity-50 cursor-pointer"
+                                                        style={{ background: "linear-gradient(135deg, #0EA5E9, #0D9488)", boxShadow: "0 4px 14px rgba(14,165,233,0.25)" }}
                                                     >
                                                         {saveLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
                                                         Save Changes
@@ -490,7 +520,7 @@ export default function ProfilePage() {
                                                         type="button"
                                                         onClick={() => { setIsEditing(false); setDisplayName(currentName); setError(null); }}
                                                         disabled={saveLoading}
-                                                        className="inline-flex items-center gap-2 px-6 py-3 rounded-xl text-sm font-bold text-slate-650 border border-slate-200 dark:border-white/10 bg-card hover:bg-slate-50 dark:hover:bg-white/5 transition-all"
+                                                        className="inline-flex items-center gap-2 px-6 py-2.5 rounded-xl text-sm font-semibold text-[#64748B] bg-[#F8FAFC] border border-[#E2E8F0] hover:bg-[#F0F9FF] hover:border-[#0EA5E9]/40 transition-all cursor-pointer"
                                                     >
                                                         <X className="w-4 h-4" />
                                                         Cancel
@@ -501,69 +531,89 @@ export default function ProfilePage() {
                                     </div>
                                 )}
 
-                                {/* BOTTOM ROW: Security + Quick Links */}
-                                <div className="anim-up-3 grid md:grid-cols-2 gap-6">
-                                    <div className="bg-card border border-slate-100 dark:border-white/5 rounded-3xl shadow-sm overflow-hidden">
-                                        <div className="px-6 pt-6 pb-2 flex items-center gap-3 mb-4">
-                                            <div className="w-10 h-10 rounded-2xl bg-slate-900 flex items-center justify-center shadow-md">
+                                {/* Security + Quick Links */}
+                                <div className="grid md:grid-cols-2 gap-5">
+                                    {/* Security Status */}
+                                    <div className="bg-white border border-[#E2E8F0] rounded-2xl shadow-sm overflow-hidden">
+                                        <div className="px-6 pt-6 pb-4 flex items-center gap-3 border-b border-[#F1F5F9]">
+                                            <div className="w-10 h-10 rounded-xl bg-[#0F172A] flex items-center justify-center shadow-md">
                                                 <Lock className="w-4 h-4 text-white" />
                                             </div>
                                             <div>
-                                                <h3 className="text-base font-black text-slate-900 dark:text-white">Security Status</h3>
-                                                <p className="text-xs text-slate-405">Account protection overview</p>
+                                                <h3 className="text-sm font-bold text-[#0F172A]">Security Status</h3>
+                                                <p className="text-xs text-[#64748B]">Account protection overview</p>
                                             </div>
                                         </div>
-
-                                        <div className="px-6 pb-6 space-y-3">
-                                            <div className="flex items-center justify-between p-4 bg-slate-50/50 dark:bg-white/5 border border-slate-100 dark:border-white/5 rounded-2xl">
-                                                <div className="flex items-center gap-3">
-                                                    <div className={`w-2.5 h-2.5 rounded-full ${user?.emailVerified ? "bg-emerald-400" : "bg-amber-400"}`} />
-                                                    <span className="text-sm font-semibold text-slate-700 dark:text-slate-350">Email Verified</span>
+                                        <div className="px-6 py-4 space-y-3">
+                                            {[
+                                                {
+                                                    label: "Email Verified",
+                                                    ok: user?.emailVerified,
+                                                    trueText: "Verified",
+                                                    falseText: "Pending",
+                                                },
+                                                {
+                                                    label: "Account Type",
+                                                    ok: true,
+                                                    trueText: "Institutional",
+                                                    falseText: "—",
+                                                },
+                                            ].map((row, i) => (
+                                                <div key={i} className="flex items-center justify-between p-3.5 rounded-xl bg-[#F8FAFC] border border-[#E2E8F0]">
+                                                    <div className="flex items-center gap-2.5">
+                                                        <div className={`w-2 h-2 rounded-full ${row.ok ? "bg-emerald-400" : "bg-amber-400"}`} />
+                                                        <span className="text-sm font-semibold text-[#0F172A]">{row.label}</span>
+                                                    </div>
+                                                    <span className={`text-[10px] font-bold uppercase tracking-wider px-2.5 py-1 rounded-full ${row.ok ? "bg-[#F0FDFA] text-[#0D9488]" : "bg-amber-50 text-amber-600"}`}>
+                                                        {row.ok ? row.trueText : row.falseText}
+                                                    </span>
                                                 </div>
-                                                <span className={`text-[10px] font-black uppercase tracking-wider px-2.5 py-1 rounded-full ${user?.emailVerified ? "bg-emerald-100/80 text-emerald-800 dark:bg-emerald-500/10 dark:text-emerald-400" : "bg-amber-100/80 text-amber-800 dark:bg-amber-500/10 dark:text-amber-400"}`}>
-                                                    {user?.emailVerified ? "Verified" : "Pending"}
-                                                </span>
-                                            </div>
-
-                                            <div className="flex items-center justify-between p-4 bg-slate-50/50 dark:bg-white/5 border border-slate-100 dark:border-white/5 rounded-2xl">
-                                                <div className="flex items-center gap-3">
-                                                    <div className="w-2.5 h-2.5 rounded-full bg-blue-400" />
-                                                    <span className="text-sm font-semibold text-slate-700 dark:text-slate-350">Account Type</span>
+                                            ))}
+                                            <div className="flex items-center justify-between p-3.5 rounded-xl bg-[#F8FAFC] border border-[#E2E8F0]">
+                                                <div className="flex items-center gap-2.5">
+                                                    <KeyRound className="w-4 h-4 text-[#64748B]" />
+                                                    <span className="text-sm font-semibold text-[#0F172A]">Password</span>
                                                 </div>
-                                                <span className="text-[10px] font-black uppercase tracking-wider px-2.5 py-1 rounded-full bg-blue-100/80 text-blue-800 dark:bg-blue-500/10 dark:text-blue-400">
-                                                    Institutional
-                                                </span>
+                                                <button className="text-[11px] font-bold text-[#0EA5E9] hover:text-[#0284C7] transition-colors cursor-pointer flex items-center gap-1">
+                                                    Change <ChevronRight className="w-3 h-3" />
+                                                </button>
                                             </div>
                                         </div>
                                     </div>
 
-                                    <div className="bg-card border border-slate-100 dark:border-white/5 rounded-3xl shadow-sm overflow-hidden">
-                                        <div className="px-6 pt-6 pb-2 flex items-center gap-3 mb-4">
-                                            <div className={`w-10 h-10 rounded-2xl bg-gradient-to-br ${meta.gradient} flex items-center justify-center shadow-md`}>
+                                    {/* Quick Access */}
+                                    <div className="bg-white border border-[#E2E8F0] rounded-2xl shadow-sm overflow-hidden">
+                                        <div className="px-6 pt-6 pb-4 flex items-center gap-3 border-b border-[#F1F5F9]">
+                                            <div className="w-10 h-10 rounded-xl flex items-center justify-center shadow-md"
+                                                style={{ background: "linear-gradient(135deg, #0EA5E9, #0D9488)" }}>
                                                 <Sparkles className="w-4 h-4 text-white" />
                                             </div>
                                             <div>
-                                                <h3 className="text-base font-black text-slate-900 dark:text-white">Quick Access</h3>
-                                                <p className="text-xs text-slate-405">Navigate to your key pages</p>
+                                                <h3 className="text-sm font-bold text-[#0F172A]">Quick Access</h3>
+                                                <p className="text-xs text-[#64748B]">Jump to your key pages</p>
                                             </div>
                                         </div>
-
-                                        <div className="px-6 pb-6 space-y-2">
+                                        <div className="px-6 py-4 space-y-2">
                                             {[
-                                                { label: "My Bookings",       href: "/bookings",    desc: "View & manage reservations" },
-                                                { label: "Browse Resources",  href: "/resources",   desc: "Labs, equipment & rooms"    },
-                                                { label: "Dashboard",         href: "/dashboard",   desc: "Overview & analytics"       },
+                                                { label: "My Bookings",      href: "/bookings",   desc: "View & manage reservations",   icon: <Calendar className="w-4 h-4" /> },
+                                                { label: "Browse Resources", href: "/resources",  desc: "Labs, equipment & rooms",      icon: <Building2 className="w-4 h-4" /> },
+                                                { label: "Dashboard",        href: "/dashboard",  desc: "Overview & analytics",         icon: <Sparkles className="w-4 h-4" /> },
                                             ].map((link) => (
                                                 <Link
                                                     key={link.href}
                                                     href={link.href}
-                                                    className="card-hover flex items-center justify-between p-4 bg-slate-50/50 dark:bg-white/5 border border-slate-100 dark:border-white/5 hover:border-brand-primary/30 rounded-2xl group"
+                                                    className="card-lift flex items-center justify-between p-3.5 rounded-xl bg-[#F8FAFC] border border-[#E2E8F0] hover:border-[#BAE6FD] hover:bg-[#F0F9FF] group"
                                                 >
-                                                    <div>
-                                                        <p className="text-sm font-bold text-slate-800 dark:text-white group-hover:text-brand-primary transition-colors">{link.label}</p>
-                                                        <p className="text-xs text-slate-400 mt-0.5">{link.desc}</p>
+                                                    <div className="flex items-center gap-3">
+                                                        <div className="w-8 h-8 rounded-lg flex items-center justify-center text-[#0EA5E9] bg-[#E0F2FE]">
+                                                            {link.icon}
+                                                        </div>
+                                                        <div>
+                                                            <p className="text-sm font-bold text-[#0F172A] group-hover:text-[#0EA5E9] transition-colors">{link.label}</p>
+                                                            <p className="text-xs text-[#64748B] mt-0.5">{link.desc}</p>
+                                                        </div>
                                                     </div>
-                                                    <ChevronRight className="w-4 h-4 text-slate-300 group-hover:text-brand-primary group-hover:translate-x-1 transition-all" />
+                                                    <ChevronRight className="w-4 h-4 text-[#CBD5E1] group-hover:text-[#0EA5E9] group-hover:translate-x-1 transition-all" />
                                                 </Link>
                                             ))}
                                         </div>
@@ -572,130 +622,110 @@ export default function ProfilePage() {
                             </div>
                         )}
 
-                        {/* ─── TAB CONTENT 2: NOTIFICATION PREFERENCES ─── */}
+                        {/* ─── TAB 2: NOTIFICATION PREFERENCES ─── */}
                         {activeTab === "preferences" && (
-                            <div className="anim-up-2 space-y-6">
+                            <div className="anim-3 space-y-5">
                                 {prefLoading ? (
-                                    <div className="bg-card border border-slate-100 dark:border-white/5 rounded-3xl p-16 flex flex-col items-center justify-center gap-4">
-                                        <Loader2 className="w-8 h-8 text-brand-primary animate-spin" />
-                                        <p className="text-slate-400 text-sm font-semibold">Retrieving your notification settings…</p>
+                                    <div className="bg-white border border-[#E2E8F0] rounded-2xl p-16 flex flex-col items-center gap-4">
+                                        <Loader2 className="w-8 h-8 text-[#0EA5E9] animate-spin" />
+                                        <p className="text-[#64748B] text-sm font-semibold">Retrieving your notification settings…</p>
                                     </div>
                                 ) : (
-                                    <div className="space-y-6">
-                                        <div className="grid md:grid-cols-2 gap-6">
-                                            
-                                            {/* Email settings card */}
-                                            <div className="bg-card border border-slate-100 dark:border-white/5 rounded-3xl shadow-sm p-6 space-y-6">
-                                                <div className="flex items-center gap-3 pb-4 border-b border-slate-100 dark:border-white/5">
-                                                    <div className="w-9 h-9 rounded-xl bg-brand-primary/10 text-brand-primary flex items-center justify-center">
-                                                        <Mail className="w-4 h-4" />
+                                    <div className="space-y-5">
+                                        <div className="grid md:grid-cols-2 gap-5">
+                                            {/* Email Notifications */}
+                                            <div className="bg-white border border-[#E2E8F0] rounded-2xl shadow-sm p-6">
+                                                <div className="flex items-center gap-3 pb-4 mb-4 border-b border-[#F1F5F9]">
+                                                    <div className="w-9 h-9 rounded-xl bg-[#F0F9FF] flex items-center justify-center">
+                                                        <Mail className="w-4 h-4 text-[#0EA5E9]" />
                                                     </div>
                                                     <div>
-                                                        <h3 className="text-base font-black text-slate-900 dark:text-white">Email Notifications</h3>
-                                                        <p className="text-xs text-slate-400">Settings sent directly to {currentEmail}</p>
+                                                        <h3 className="text-sm font-bold text-[#0F172A]">Email Notifications</h3>
+                                                        <p className="text-xs text-[#64748B] truncate">Sent to {currentEmail}</p>
                                                     </div>
                                                 </div>
-
-                                                <div className="space-y-5">
-                                                    {/* Booking toggle */}
-                                                    <div className="flex items-start justify-between gap-4">
-                                                        <div className="space-y-0.5">
-                                                            <p className="text-sm font-bold text-slate-800 dark:text-white">Booking Requests & Approvals</p>
-                                                            <p className="text-xs text-slate-400 leading-normal">Get notified when a booking is created, approved, or rejected.</p>
-                                                        </div>
-                                                        <ToggleSwitch checked={emailBookings} onChange={setEmailBookings} />
-                                                    </div>
-
-                                                    {/* Maintenance toggle */}
-                                                    <div className="flex items-start justify-between gap-4">
-                                                        <div className="space-y-0.5">
-                                                            <p className="text-sm font-bold text-slate-800 dark:text-white">Maintenance Ticket Updates</p>
-                                                            <p className="text-xs text-slate-400 leading-normal">Alerts on room repairs, hardware downtime, or status completions.</p>
-                                                        </div>
-                                                        <ToggleSwitch checked={emailMaint} onChange={setEmailMaint} />
-                                                    </div>
-
-                                                    {/* System news toggle */}
-                                                    <div className="flex items-start justify-between gap-4">
-                                                        <div className="space-y-0.5">
-                                                            <p className="text-sm font-bold text-slate-800 dark:text-white">System Security & Alerts</p>
-                                                            <p className="text-xs text-slate-400 leading-normal">Receive critical security updates and administrative notifications.</p>
+                                                <div className="space-y-4">
+                                                    {[
+                                                        { label: "Booking Requests & Approvals", desc: "Notified when a booking is created, approved, or rejected.", checked: emailBookings, onChange: setEmailBookings },
+                                                        { label: "Maintenance Ticket Updates",   desc: "Alerts on room repairs, hardware downtime or completions.",  checked: emailMaint,    onChange: setEmailMaint    },
+                                                        { label: "System Security & Alerts",     desc: "Critical security updates and administrative notifications.", checked: emailSystem,   onChange: setEmailSystem   },
+                                                    ].map((row, i) => (
+                                                        <div key={i} className="flex items-start justify-between gap-4 p-3.5 rounded-xl bg-[#F8FAFC] border border-[#E2E8F0]">
+                                                            <div className="space-y-0.5">
+                                                                <p className="text-sm font-semibold text-[#0F172A]">{row.label}</p>
+                                                                <p className="text-xs text-[#64748B] leading-normal">{row.desc}</p>
+                                                            </div>
+                                                            <button
+                                                                type="button"
+                                                                onClick={() => row.onChange(!row.checked)}
+                                                                className="toggle-track shrink-0 mt-0.5"
+                                                                style={{ background: row.checked ? "linear-gradient(135deg,#0EA5E9,#0D9488)" : "#E2E8F0" }}
+                                                                aria-pressed={row.checked}
+                                                            >
+                                                                <span className="toggle-thumb" style={{ transform: row.checked ? "translateX(20px)" : "translateX(0)" }} />
+                                                            </button>
                                                         </div>
-                                                        <ToggleSwitch checked={emailSystem} onChange={setEmailSystem} />
-                                                    </div>
+                                                    ))}
                                                 </div>
                                             </div>
 
-                                            {/* Push / Web socket settings card */}
-                                            <div className="bg-card border border-slate-100 dark:border-white/5 rounded-3xl shadow-sm p-6 space-y-6">
-                                                <div className="flex items-center gap-3 pb-4 border-b border-slate-100 dark:border-white/5">
-                                                    <div className="w-9 h-9 rounded-xl bg-brand-primary/10 text-brand-primary flex items-center justify-center">
-                                                        <Smartphone className="w-4 h-4" />
+                                            {/* Push / In-App Notifications */}
+                                            <div className="bg-white border border-[#E2E8F0] rounded-2xl shadow-sm p-6">
+                                                <div className="flex items-center gap-3 pb-4 mb-4 border-b border-[#F1F5F9]">
+                                                    <div className="w-9 h-9 rounded-xl bg-[#F0FDFA] flex items-center justify-center">
+                                                        <Smartphone className="w-4 h-4 text-[#0D9488]" />
                                                     </div>
                                                     <div>
-                                                        <h3 className="text-base font-black text-slate-900 dark:text-white">In-App & Push Notifications</h3>
-                                                        <p className="text-xs text-slate-400">Settings for real-time dashboard updates</p>
+                                                        <h3 className="text-sm font-bold text-[#0F172A]">In-App & Push</h3>
+                                                        <p className="text-xs text-[#64748B]">Real-time dashboard updates</p>
                                                     </div>
                                                 </div>
-
-                                                <div className="space-y-5">
-                                                    {/* Push Booking toggle */}
-                                                    <div className="flex items-start justify-between gap-4">
-                                                        <div className="space-y-0.5">
-                                                            <p className="text-sm font-bold text-slate-800 dark:text-white">Real-Time Booking Status</p>
-                                                            <p className="text-xs text-slate-400 leading-normal">Show popup banner alerts instantly when booking logs change status.</p>
-                                                        </div>
-                                                        <ToggleSwitch checked={pushBookings} onChange={setPushBookings} />
-                                                    </div>
-
-                                                    {/* Push Maintenance toggle */}
-                                                    <div className="flex items-start justify-between gap-4">
-                                                        <div className="space-y-0.5">
-                                                            <p className="text-sm font-bold text-slate-800 dark:text-white">Immediate Maintenance Allocations</p>
-                                                            <p className="text-xs text-slate-400 leading-normal">Get instant alerts when assigned to resolve open hardware issues.</p>
+                                                <div className="space-y-4">
+                                                    {[
+                                                        { label: "Real-Time Booking Status",         desc: "Popup banner alerts when booking status changes.",            checked: pushBookings, onChange: setPushBookings },
+                                                        { label: "Immediate Maintenance Allocations", desc: "Instant alerts when assigned to resolve hardware issues.",    checked: pushMaint,    onChange: setPushMaint    },
+                                                        { label: "Live System Broadcaster",           desc: "Broadcast pings when administrators emit system alerts.",    checked: pushSystem,   onChange: setPushSystem   },
+                                                    ].map((row, i) => (
+                                                        <div key={i} className="flex items-start justify-between gap-4 p-3.5 rounded-xl bg-[#F8FAFC] border border-[#E2E8F0]">
+                                                            <div className="space-y-0.5">
+                                                                <p className="text-sm font-semibold text-[#0F172A]">{row.label}</p>
+                                                                <p className="text-xs text-[#64748B] leading-normal">{row.desc}</p>
+                                                            </div>
+                                                            <button
+                                                                type="button"
+                                                                onClick={() => row.onChange(!row.checked)}
+                                                                className="toggle-track shrink-0 mt-0.5"
+                                                                style={{ background: row.checked ? "linear-gradient(135deg,#0EA5E9,#0D9488)" : "#E2E8F0" }}
+                                                                aria-pressed={row.checked}
+                                                            >
+                                                                <span className="toggle-thumb" style={{ transform: row.checked ? "translateX(20px)" : "translateX(0)" }} />
+                                                            </button>
                                                         </div>
-                                                        <ToggleSwitch checked={pushMaint} onChange={setPushMaint} />
-                                                    </div>
-
-                                                    {/* Push System toggle */}
-                                                    <div className="flex items-start justify-between gap-4">
-                                                        <div className="space-y-0.5">
-                                                            <p className="text-sm font-bold text-slate-800 dark:text-white">Live System Broadcaster</p>
-                                                            <p className="text-xs text-slate-400 leading-normal">Receive immediate broadcast pings when administrators emit alerts.</p>
-                                                        </div>
-                                                        <ToggleSwitch checked={pushSystem} onChange={setPushSystem} />
-                                                    </div>
+                                                    ))}
                                                 </div>
                                             </div>
-
                                         </div>
 
-                                        {/* Actions panel */}
-                                        <div className="bg-card border border-slate-100 dark:border-white/5 rounded-3xl p-6 flex flex-col sm:flex-row items-center justify-between gap-4">
+                                        {/* Save footer */}
+                                        <div className="bg-white border border-[#E2E8F0] rounded-2xl p-5 flex flex-col sm:flex-row items-center justify-between gap-4">
                                             <div className="flex items-center gap-3">
-                                                <div className="w-8 h-8 rounded-lg bg-emerald-500/10 text-emerald-500 flex items-center justify-center">
-                                                    <Globe className="w-4 h-4" />
+                                                <div className="w-9 h-9 rounded-xl bg-[#F0FDFA] flex items-center justify-center">
+                                                    <Globe className="w-4 h-4 text-[#0D9488]" />
                                                 </div>
-                                                <p className="text-xs text-slate-400 leading-relaxed max-w-md">
-                                                    Your notification preferences are synchronized securely with the UniLink database. Updates take effect immediately.
+                                                <p className="text-xs text-[#64748B] leading-relaxed max-w-md">
+                                                    Preferences are synced securely with the UniLink database and take effect immediately.
                                                 </p>
                                             </div>
-                                            
                                             <button
                                                 onClick={handleSavePreferences}
                                                 disabled={prefSaving}
-                                                className="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-8 py-3 rounded-xl text-sm font-bold text-white bg-brand-primary hover:bg-brand-secondary shadow-lg shadow-brand-primary/20 hover:scale-[1.01] active:scale-95 transition-all disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer"
+                                                className="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-7 py-2.5 rounded-xl text-sm font-bold text-white shadow-md hover:-translate-y-0.5 active:scale-95 transition-all disabled:opacity-50 cursor-pointer"
+                                                style={{ background: "linear-gradient(135deg, #0EA5E9, #0D9488)", boxShadow: "0 4px 14px rgba(14,165,233,0.25)" }}
                                             >
                                                 {prefSaving ? (
-                                                    <>
-                                                        <Loader2 className="w-4 h-4 animate-spin" />
-                                                        Saving settings…
-                                                    </>
+                                                    <><Loader2 className="w-4 h-4 animate-spin" />Saving…</>
                                                 ) : (
-                                                    <>
-                                                        <Save className="w-4 h-4" />
-                                                        Save Preferences
-                                                    </>
+                                                    <><Save className="w-4 h-4" />Save Preferences</>
                                                 )}
                                             </button>
                                         </div>
@@ -704,9 +734,9 @@ export default function ProfilePage() {
                             </div>
                         )}
 
-                        {/* Footer branding details */}
-                        <div className="anim-up-4 text-center py-4">
-                            <p className="text-xs text-slate-400">UniLink · University Resource Management System · SUSL © {new Date().getFullYear()}</p>
+                        {/* Footer */}
+                        <div className="anim-4 text-center py-4">
+                            <p className="text-xs text-[#94A3B8]">UniLink · University Resource Management System · SUSL © {new Date().getFullYear()}</p>
                         </div>
 
                     </div>
@@ -715,3 +745,4 @@ export default function ProfilePage() {
         </ProtectedRoute>
     );
 }
+
diff --git a/app/register/page.tsx b/app/register/page.tsx
index a52a65b..f477ad7 100644
--- a/app/register/page.tsx
+++ b/app/register/page.tsx
@@ -1,614 +1,5 @@
-"use client";
-
-import { useState, useEffect, FormEvent } from "react";
-import { useRouter } from "next/navigation";
-import Link from "next/link";
-import { 
-  User, 
-  AtSign, 
-  Lock, 
-  Eye, 
-  EyeOff, 
-  ArrowRight, 
-  AlertCircle, 
-  CheckCircle2, 
-  Sparkles, 
-  BadgeCheck, 
-  ChevronDown, 
-  ChevronLeft,
-  LayoutDashboard,
-  Calendar,
-  Building2,
-  Wrench,
-  TrendingUp,
-  Settings,
-  Bell,
-  Search,
-  Clock,
-  Shield,
-  Activity,
-  Users
-} from "lucide-react";
-import {
-  createUserWithEmailAndPassword,
-  updateProfile,
-} from "firebase/auth";
-import { auth } from "@/lib/firebase";
-import { createUserProfile } from "@/lib/supabase";
-import { apiClient, BASE_URL as API_BASE } from "@/lib/apiClient";
-import { motion } from "framer-motion";
-
-/* Password strength helper */
-function PasswordStrength({ password }: { password: string }) {
-  const strength = password.length === 0 ? 0
-    : password.length < 6 ? 1
-    : password.length < 8 ? 2
-    : /[A-Z]/.test(password) && /[0-9]/.test(password) ? 4
-    : 3;
-
-  const labels = ["", "Weak", "Fair", "Good", "Strong"];
-  const colors = ["", "bg-rose-500", "bg-amber-500", "bg-blue-500", "bg-emerald-500"];
-  const textColors = ["", "text-rose-500 dark:text-rose-400", "text-amber-500 dark:text-amber-400", "text-blue-500 dark:text-blue-400", "text-emerald-500 dark:text-emerald-400"];
-
-  if (!password) return null;
-
-  return (
-    <div className="mt-2 space-y-1.5 ml-1">
-      <div className="flex gap-1.5">
-        {[1, 2, 3, 4].map((i) => (
-          <div
-            key={i}
-            className={`h-1 flex-1 rounded-full transition-all duration-300 ${i <= strength ? colors[strength] : "bg-slate-200 dark:bg-white/10"}`}
-          />
-        ))}
-      </div>
-      <p className={`text-[10px] font-bold uppercase tracking-wider ${textColors[strength]}`}>{labels[strength]} Password</p>
-    </div>
-  );
-}
-
-
+import { redirect } from "next/navigation";
 
 export default function RegisterPage() {
-  const router = useRouter();
-
-  const [fullName, setFullName] = useState("");
-  const [email, setEmail] = useState("");
-  const [role, setRole] = useState("");
-  const [department, setDepartment] = useState("");
-  const [password, setPassword] = useState("");
-  const [confirmPassword, setConfirmPassword] = useState("");
-  const [showPassword, setShowPassword] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [success, setSuccess] = useState<string | null>(null);
-  const [loading, setLoading] = useState(false);
-  const [focusedField, setFocusedField] = useState<string | null>(null);
-  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
-  const [currentTime, setCurrentTime] = useState("");
-
-  useEffect(() => {
-    const handleMouseMove = (e: MouseEvent) => {
-      setMousePosition({ x: e.clientX, y: e.clientY });
-    };
-    window.addEventListener("mousemove", handleMouseMove);
-
-    const updateTime = () => {
-      const now = new Date();
-      setCurrentTime(now.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", second: "2-digit" }));
-    };
-    updateTime();
-    const clockInterval = setInterval(updateTime, 1000);
-
-    return () => {
-      window.removeEventListener("mousemove", handleMouseMove);
-      clearInterval(clockInterval);
-    };
-  }, []);
-
-  const validateForm = () => {
-    if (!fullName || !email || !role || !department || !password || !confirmPassword) {
-      setError("All fields are required.");
-      return false;
-    }
-    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-    if (!emailRegex.test(email)) {
-      setError("Please enter a valid email address.");
-      return false;
-    }
-    if (password.length < 8) {
-      setError("Password must be at least 8 characters long.");
-      return false;
-    }
-    if (password !== confirmPassword) {
-      setError("Passwords do not match.");
-      return false;
-    }
-    return true;
-  };
-
-  const handleSubmit = async (e: FormEvent) => {
-    e.preventDefault();
-    setError(null);
-    setSuccess(null);
-    if (!validateForm()) return;
-
-    setLoading(true);
-    try {
-      if (!auth) {
-        throw new Error("Authentication service is not available. Please try again later.");
-      }
-      const userCredential = await createUserWithEmailAndPassword(auth, email, password);
-      const uid = userCredential.user.uid;
-
-      if (fullName.trim()) {
-        await updateProfile(userCredential.user, { displayName: fullName.trim() });
-      }
-
-      // Hash the password using bcrypt via the backend API
-      let passwordHash: string | undefined;
-      try {
-        const token = await userCredential.user.getIdToken();
-        const hashResponse = await fetch(
-          `${API_BASE}/users/hash-password`,
-          {
-            method: "POST",
-            headers: {
-              "Content-Type": "application/json",
-              Authorization: `Bearer ${token}`,
-            },
-            body: JSON.stringify({ password }),
-          }
-        );
-        if (hashResponse.ok) {
-          const hashData = await hashResponse.json();
-          passwordHash = hashData.password_hash;
-        } else {
-          console.warn("Password hashing endpoint returned non-OK status. Continuing without hash.");
-        }
-      } catch (hashErr) {
-        // If hashing fails, we still continue with registration (graceful degradation)
-        console.warn("Failed to hash password via backend. Registration will continue without bcrypt hash.", hashErr);
-      }
-
-      await createUserProfile({
-        id: uid,
-        name: fullName.trim(),
-        email: email.toLowerCase(),
-        role: role.toLowerCase() as any,
-        department: department,
-        ...(passwordHash ? { password_hash: passwordHash } : {}),
-      });
-
-      setSuccess("Account created! Redirecting to sign in…");
-      setTimeout(() => router.push("/login"), 1500);
-    } catch (err: unknown) {
-      if (err instanceof Error) {
-        const code = (err as { code?: string }).code ?? "";
-        if (code.includes("email-already-in-use")) {
-          setError("An account with this email already exists. Please sign in instead.");
-        } else if (code.includes("weak-password")) {
-          setError("Password is too weak. Use at least 8 characters.");
-        } else if (code.includes("invalid-email")) {
-          setError("The email address is not valid.");
-        } else if (code.includes("network-request-failed")) {
-          setError("Network error. Check your connection and try again.");
-        } else {
-          setError("Registration failed. Please try again.");
-        }
-        console.error(err);
-      } else {
-        setError("An unexpected error occurred.");
-      }
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const inputBase = "block w-full pl-11 pr-4 py-2.5 bg-white/50 dark:bg-slate-950/20 border border-slate-200 dark:border-border/80 rounded-2xl text-sm font-bold text-foreground placeholder-slate-400 dark:placeholder-foreground/30 focus:outline-none focus:ring-2 focus:ring-brand-primary/30 focus:border-brand-primary/50 transition-all disabled:opacity-40";
-
-  return (
-    <div className="min-h-screen w-full bg-slate-50 dark:bg-slate-950 text-slate-900 dark:text-slate-100 overflow-hidden relative flex items-center justify-center">
-      
-      {/* Premium Cursor Highlight */}
-      <motion.div
-        className="pointer-events-none fixed inset-0 z-40 transition-opacity duration-300 hidden lg:block"
-        animate={{
-          background: `radial-gradient(800px circle at ${mousePosition.x}px ${mousePosition.y}px, rgba(124, 58, 237, 0.05), transparent 45%)`
-        }}
-      />
-
-      {/* BACKGROUND MOCKUP: Live simulated UniLink Dashboard (Visible only on Desktop for richness) */}
-      <div className="absolute inset-0 z-0 pointer-events-none select-none opacity-35 dark:opacity-20 hidden lg:flex">
-        
-        {/* Mock Sidebar */}
-        <div className="w-64 border-r border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900/60 p-6 flex flex-col justify-between">
-          <div className="space-y-8">
-            <div className="flex items-center gap-3">
-              <div className="h-9 w-9 rounded-xl bg-gradient-to-tr from-brand-primary to-indigo-600 flex items-center justify-center">
-                <Sparkles className="w-5 h-5 text-white" />
-              </div>
-              <span className="font-black text-lg tracking-tight text-slate-900 dark:text-white">UniLink</span>
-            </div>
-            
-            <div className="space-y-1">
-              {[
-                { name: "Dashboard", icon: <LayoutDashboard className="w-4 h-4" />, active: true },
-                { name: "Bookings", icon: <Calendar className="w-4 h-4" /> },
-                { name: "Resources", icon: <Building2 className="w-4 h-4" /> },
-                { name: "Maintenance", icon: <Wrench className="w-4 h-4" /> },
-                { name: "Analytics", icon: <TrendingUp className="w-4 h-4" /> },
-                { name: "Settings", icon: <Settings className="w-4 h-4" /> }
-              ].map((item, idx) => (
-                <div 
-                  key={idx} 
-                  className={`flex items-center gap-3 px-4 py-3 rounded-2xl text-xs font-bold transition-all ${
-                    item.active 
-                      ? "text-brand-primary bg-brand-primary/10" 
-                      : "text-slate-500 dark:text-slate-400"
-                  }`}
-                >
-                  {item.icon}
-                  <span>{item.name}</span>
-                </div>
-              ))}
-            </div>
-          </div>
-          
-          <div className="p-4 rounded-2xl bg-slate-50 dark:bg-slate-800/40 flex items-center gap-3">
-            <div className="h-8 w-8 rounded-full bg-slate-200 dark:bg-slate-700" />
-            <div>
-              <p className="text-[10px] font-black uppercase text-slate-400">Gateway Standby</p>
-              <p className="text-xs font-bold text-slate-600 dark:text-slate-350">Authorization Req.</p>
-            </div>
-          </div>
-        </div>
-
-        {/* Mock Main Dashboard View */}
-        <div className="flex-1 flex flex-col">
-          {/* Topbar */}
-          <div className="h-16 border-b border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900/60 px-8 flex items-center justify-between">
-            <div className="flex items-center gap-3 w-80 py-2 px-4 rounded-xl bg-slate-100 dark:bg-slate-800/40 border border-slate-200/50 dark:border-slate-700/50">
-              <Search className="w-4 h-4 text-slate-400" />
-              <span className="text-xs text-slate-450 dark:text-slate-400">Search spaces, lecturers, faculties...</span>
-            </div>
-            
-            <div className="flex items-center gap-6">
-              <div className="flex items-center gap-1.5 text-xs font-black uppercase tracking-wider text-brand-primary bg-brand-primary/10 px-3 py-1.5 rounded-lg border border-brand-primary/15">
-                <Clock className="w-3.5 h-3.5 animate-pulse" />
-                {currentTime || "19:20:00"}
-              </div>
-              <div className="relative p-2 rounded-xl bg-slate-100 dark:bg-slate-800/60 text-slate-655 dark:text-slate-400">
-                <Bell className="w-4 h-4" />
-                <span className="absolute top-1.5 right-1.5 w-2 h-2 rounded-full bg-brand-primary" />
-              </div>
-              <div className="h-8 w-8 rounded-full bg-slate-200 dark:bg-slate-700" />
-            </div>
-          </div>
-
-          {/* Dashboard Main Grid Area */}
-          <div className="p-8 space-y-6 flex-1 overflow-hidden">
-            
-            {/* Stats Row */}
-            <div className="grid grid-cols-3 gap-6">
-              {[
-                { label: "Active Room Occupancy", value: "89.2%", change: "+4.2% from peak", color: "text-brand-primary bg-brand-primary/5" },
-                { label: "Conflict Resolution Solver", value: "99.8%", change: "14 conflicts auto-resolved", color: "text-emerald-500 bg-emerald-500/5" },
-                { label: "Sensors Online Node status", value: "98.4%", change: "264 active devices online", color: "text-blue-500 bg-blue-500/5" }
-              ].map((stat, i) => (
-                <div key={i} className="p-5 rounded-3xl bg-white dark:bg-slate-900/60 border border-slate-200/80 dark:border-slate-800/80 flex flex-col justify-between h-28">
-                  <div className="flex justify-between items-start">
-                    <span className="text-[10px] font-black uppercase tracking-widest text-slate-400">{stat.label}</span>
-                    <span className={`text-[9px] font-bold px-2 py-0.5 rounded-full ${stat.color}`}>{stat.change}</span>
-                  </div>
-                  <span className="text-3xl font-black text-slate-900 dark:text-white">{stat.value}</span>
-                </div>
-              ))}
-            </div>
-
-            {/* Room Availability Matrix Grid */}
-            <div className="space-y-3">
-              <span className="text-[10px] font-black uppercase tracking-widest text-slate-400">Campus Facilities Status Monitor</span>
-              <div className="grid grid-cols-4 gap-6">
-                {[
-                  { name: "Computing Lab 01", cap: "36/40 seats", status: "Occupied", desc: "CS302 Database Lecture", border: "border-brand-primary/20", fill: "bg-brand-primary" },
-                  { name: "Lecture Theatre B", cap: "0/120 seats", status: "Vacant", desc: "Next: 2:00 PM Lecture", border: "border-emerald-500/20", fill: "bg-emerald-500" },
-                  { name: "Seminar Room 02", cap: "15/30 seats", status: "Occupied", desc: "AI Ethics Symposium", border: "border-brand-primary/20", fill: "bg-brand-primary" },
-                  { name: "IoT & Robotics Lab", cap: "0/20 seats", status: "Maintenance", desc: "AC Repair In Progress", border: "border-rose-500/20", fill: "bg-rose-500" }
-                ].map((room, i) => (
-                  <div key={i} className={`p-5 rounded-3xl bg-white dark:bg-slate-900/60 border border-slate-200/80 dark:border-slate-800/80 flex flex-col justify-between h-36 ${room.border}`}>
-                    <div className="flex justify-between items-start">
-                      <span className="font-black text-sm text-slate-900 dark:text-white truncate max-w-[130px]">{room.name}</span>
-                      <span className="text-[9px] font-bold text-slate-400">{room.cap}</span>
-                    </div>
-                    <div>
-                      <p className="text-[10px] font-semibold text-slate-500 dark:text-slate-400">{room.desc}</p>
-                      <div className="flex items-center gap-2 mt-3">
-                        <span className={`h-2 w-2 rounded-full ${room.fill}`} />
-                        <span className="text-[9px] font-black uppercase tracking-widest text-slate-600 dark:text-slate-350">{room.status}</span>
-                      </div>
-                    </div>
-                  </div>
-                ))}
-              </div>
-            </div>
-
-            {/* Simulated Live Analytics Grid */}
-            <div className="p-5 rounded-3xl bg-white dark:bg-slate-900/60 border border-slate-200/80 dark:border-slate-800/80 h-32 flex flex-col justify-between">
-              <div className="flex justify-between items-center">
-                <span className="text-[10px] font-black uppercase tracking-widest text-slate-400">Weekly Resource Allocations Telemetry</span>
-                <span className="text-[10px] font-bold text-brand-primary">Automated scheduler: Online</span>
-              </div>
-              <div className="flex items-end gap-2 h-14 pt-2">
-                {[60, 45, 80, 55, 90, 70, 85, 95, 60, 75, 85, 92, 78, 88].map((val, idx) => (
-                  <div key={idx} className="flex-1 bg-slate-100 dark:bg-slate-800 rounded-t-lg h-full relative overflow-hidden">
-                    <div className="absolute bottom-0 w-full rounded-t-lg bg-brand-primary/45" style={{ height: `${val}%` }} />
-                  </div>
-                ))}
-              </div>
-            </div>
-
-          </div>
-        </div>
-
-      </div>
-
-      {/* Semi-transparent Glassmorphic Security Overlay */}
-      <div className="absolute inset-0 z-10 bg-slate-50/50 dark:bg-slate-950/50 backdrop-blur-[6px]" />
-
-      {/* Floating Centered Registration Card */}
-      <motion.div 
-        initial={{ opacity: 0, scale: 0.95 }}
-        animate={{ opacity: 1, scale: 1 }}
-        transition={{ duration: 0.4 }}
-        className="w-full max-w-[460px] mx-4 bg-white/75 dark:bg-slate-900/70 border border-slate-200/60 dark:border-slate-800/80 backdrop-blur-2xl rounded-[2.5rem] shadow-2xl p-8 sm:p-10 relative z-20 space-y-6 my-6"
-      >
-        
-        {/* Back to Home Control */}
-        <div className="absolute top-6 left-6 z-30">
-          <Link 
-            href="/" 
-            className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-xl bg-slate-100/90 dark:bg-foreground/5 hover:bg-slate-200/90 dark:hover:bg-foreground/10 border border-slate-200 dark:border-border text-slate-700 dark:text-foreground/75 hover:text-foreground text-[9px] font-black uppercase tracking-wider transition-all group"
-          >
-            <ChevronLeft className="w-3.5 h-3.5 group-hover:-translate-x-0.5 transition-transform" />
-            Home
-          </Link>
-        </div>
-
-        {/* Card Header & Branding */}
-        <div className="text-center pt-4">
-          <div className="inline-flex items-center gap-2 bg-brand-primary/5 dark:bg-brand-primary/10 border border-brand-primary/15 rounded-full px-3 py-1 mb-5">
-            <span className="relative flex h-2 w-2">
-              <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-primary opacity-75"></span>
-              <span className="relative inline-flex rounded-full h-2 w-2 bg-brand-primary"></span>
-            </span>
-            <span className="text-brand-primary text-[9px] font-black uppercase tracking-widest">New Registration</span>
-          </div>
-          
-          <h1 className="text-3xl font-black text-slate-900 dark:text-white tracking-tight mb-2">
-            Create Account
-          </h1>
-          <p className="text-slate-500 dark:text-foreground/50 text-sm font-semibold">
-            Enter your details to register on UniLink
-          </p>
-        </div>
-
-        {/* Signup Form */}
-        <form onSubmit={handleSubmit} className="space-y-3.5" noValidate>
-          
-          {/* Full Name */}
-          <div>
-            <label htmlFor="fullName" className="block text-[10px] font-black uppercase tracking-widest text-slate-500 dark:text-foreground/45 mb-1 ml-1">
-              Full Name
-            </label>
-            <div className={`relative transition-all duration-255 ${focusedField === "fullName" ? "scale-[1.01]" : ""}`}>
-              <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
-                <User className={`h-4 w-4 transition-colors ${focusedField === "fullName" ? "text-brand-primary" : "text-slate-400 dark:text-foreground/30"}`} />
-              </div>
-              <input
-                id="fullName"
-                type="text"
-                required
-                value={fullName}
-                onChange={(e) => setFullName(e.target.value)}
-                onFocus={() => setFocusedField("fullName")}
-                onBlur={() => setFocusedField(null)}
-                placeholder="John Doe"
-                disabled={loading}
-                className={inputBase}
-              />
-            </div>
-          </div>
-
-          {/* Email Address */}
-          <div>
-            <label htmlFor="email" className="block text-[10px] font-black uppercase tracking-widest text-slate-500 dark:text-foreground/45 mb-1 ml-1">
-              Institutional Email
-            </label>
-            <div className={`relative transition-all duration-255 ${focusedField === "email" ? "scale-[1.01]" : ""}`}>
-              <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
-                <AtSign className={`h-4 w-4 transition-colors ${focusedField === "email" ? "text-brand-primary" : "text-slate-400 dark:text-foreground/30"}`} />
-              </div>
-              <input
-                id="email"
-                type="email"
-                required
-                value={email}
-                onChange={(e) => setEmail(e.target.value)}
-                onFocus={() => setFocusedField("email")}
-                onBlur={() => setFocusedField(null)}
-                placeholder="name@university.ac.lk"
-                disabled={loading}
-                className={inputBase}
-              />
-            </div>
-          </div>
-
-          {/* Role Dropdown */}
-          <div>
-            <label htmlFor="role" className="block text-[10px] font-black uppercase tracking-widest text-slate-500 dark:text-foreground/45 mb-1 ml-1">
-              Select Role
-            </label>
-            <div className={`relative transition-all duration-255 ${focusedField === "role" ? "scale-[1.01]" : ""}`}>
-              <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
-                <BadgeCheck className={`h-4 w-4 transition-colors ${focusedField === "role" ? "text-brand-primary" : "text-slate-400 dark:text-foreground/30"}`} />
-              </div>
-              <select
-                id="role"
-                required
-                value={role}
-                onChange={(e) => setRole(e.target.value)}
-                onFocus={() => setFocusedField("role")}
-                onBlur={() => setFocusedField(null)}
-                disabled={loading}
-                className={`${inputBase} pr-10 appearance-none ${!role ? "text-slate-400 dark:text-foreground/30" : ""}`}
-              >
-                <option value="" disabled className="bg-card text-slate-500 dark:text-foreground/40">Select your role</option>
-                <option value="Admin" className="bg-card text-foreground">Admin</option>
-                <option value="Lecturer" className="bg-card text-foreground">Lecturer</option>
-                <option value="Student" className="bg-card text-foreground">Student</option>
-                <option value="Maintenance" className="bg-card text-foreground">Maintenance</option>
-              </select>
-              <div className="absolute inset-y-0 right-0 pr-4 flex items-center pointer-events-none">
-                <ChevronDown className="h-4 w-4 text-slate-400 dark:text-foreground/40" />
-              </div>
-            </div>
-          </div>
-
-          {/* Faculty / Department Dropdown */}
-          <div>
-            <label htmlFor="department" className="block text-[10px] font-black uppercase tracking-widest text-slate-500 dark:text-foreground/45 mb-1 ml-1">
-              Faculty / Department
-            </label>
-            <div className={`relative transition-all duration-255 ${focusedField === "department" ? "scale-[1.01]" : ""}`}>
-              <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
-                <Sparkles className={`h-4 w-4 transition-colors ${focusedField === "department" ? "text-brand-primary" : "text-slate-400 dark:text-foreground/30"}`} />
-              </div>
-              <select
-                id="department"
-                required
-                value={department}
-                onChange={(e) => setDepartment(e.target.value)}
-                onFocus={() => setFocusedField("department")}
-                onBlur={() => setFocusedField(null)}
-                disabled={loading}
-                className={`${inputBase} pr-10 appearance-none ${!department ? "text-slate-400 dark:text-foreground/30" : ""}`}
-              >
-                <option value="" disabled className="bg-card text-slate-500 dark:text-foreground/40">Select your faculty</option>
-                <option value="Faculty of Computing" className="bg-card text-foreground">Faculty of Computing</option>
-                <option value="Faculty of Applied Sciences" className="bg-card text-foreground">Faculty of Applied Sciences</option>
-                <option value="Faculty of Management" className="bg-card text-foreground">Faculty of Management</option>
-                <option value="Faculty of Engineering" className="bg-card text-foreground">Faculty of Engineering</option>
-                <option value="Faculty of Business" className="bg-card text-foreground">Faculty of Business</option>
-                <option value="Faculty of Medicine" className="bg-card text-foreground">Faculty of Medicine</option>
-              </select>
-              <div className="absolute inset-y-0 right-0 pr-4 flex items-center pointer-events-none">
-                <ChevronDown className="h-4 w-4 text-slate-400 dark:text-foreground/40" />
-              </div>
-            </div>
-          </div>
-
-          {/* Password Input */}
-          <div>
-            <label htmlFor="password" className="block text-[10px] font-black uppercase tracking-widest text-slate-500 dark:text-foreground/45 mb-1 ml-1">
-              Password
-            </label>
-            <div className={`relative transition-all duration-255 ${focusedField === "password" ? "scale-[1.01]" : ""}`}>
-              <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
-                <Lock className={`h-4 w-4 transition-colors ${focusedField === "password" ? "text-brand-primary" : "text-slate-400 dark:text-foreground/30"}`} />
-              </div>
-              <input
-                id="password"
-                type={showPassword ? "text" : "password"}
-                required
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                onFocus={() => setFocusedField("password")}
-                onBlur={() => setFocusedField(null)}
-                placeholder="••••••••"
-                disabled={loading}
-                className={`${inputBase} pr-12`}
-              />
-              <button
-                type="button"
-                onClick={() => setShowPassword(!showPassword)}
-                className="absolute inset-y-0 right-0 pr-4 flex items-center text-slate-400 dark:text-foreground/40 hover:text-brand-primary transition-colors"
-              >
-                {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
-              </button>
-            </div>
-            <PasswordStrength password={password} />
-          </div>
-
-          {/* Confirm Password */}
-          <div>
-            <label htmlFor="confirmPassword" className="block text-[10px] font-black uppercase tracking-widest text-slate-500 dark:text-foreground/45 mb-1 ml-1">
-              Confirm Password
-            </label>
-            <div className={`relative transition-all duration-255 ${focusedField === "confirm" ? "scale-[1.01]" : ""}`}>
-              <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
-                <Lock className={`h-4 w-4 transition-colors ${focusedField === "confirm" ? "text-brand-primary" : "text-slate-400 dark:text-foreground/30"}`} />
-              </div>
-              <input
-                id="confirmPassword"
-                type={showPassword ? "text" : "password"}
-                required
-                value={confirmPassword}
-                onChange={(e) => setConfirmPassword(e.target.value)}
-                onFocus={() => setFocusedField("confirm")}
-                onBlur={() => setFocusedField(null)}
-                placeholder="••••••••"
-                disabled={loading}
-                className={`${inputBase} pr-12 ${confirmPassword && confirmPassword === password ? "border-emerald-500/40" : ""}`}
-              />
-              {confirmPassword && confirmPassword === password && (
-                <div className="absolute inset-y-0 right-0 pr-4 flex items-center">
-                  <CheckCircle2 className="h-4 w-4 text-emerald-400" />
-                </div>
-              )}
-            </div>
-          </div>
-
-          {/* Form Alerts */}
-          {error && (
-            <div className="flex items-center gap-3 bg-rose-500/10 border border-rose-500/20 p-4 rounded-2xl animate-in fade-in slide-in-from-top-2 duration-200">
-              <AlertCircle className="w-4.5 h-4.5 text-rose-500 shrink-0" />
-              <p className="text-xs font-bold text-rose-500 leading-tight">{error}</p>
-            </div>
-          )}
-          {success && (
-            <div className="flex items-center gap-3 bg-emerald-500/10 border border-emerald-500/20 p-4 rounded-2xl animate-in fade-in slide-in-from-top-2 duration-200">
-              <CheckCircle2 className="w-4.5 h-4.5 text-emerald-400 shrink-0" />
-              <p className="text-xs font-bold text-emerald-400 leading-tight">{success}</p>
-            </div>
-          )}
-
-          {/* Submit Button */}
-          <button
-            type="submit"
-            disabled={loading}
-            className="w-full relative overflow-hidden bg-gradient-to-r from-brand-primary to-indigo-600 hover:from-brand-secondary hover:to-indigo-500 text-white font-black py-3.5 rounded-2xl transition-all duration-300 shadow-xl shadow-brand-primary/20 hover:shadow-brand-primary/30 active:scale-[0.98] disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2 group mt-2"
-          >
-            <div className="absolute inset-0 bg-gradient-to-r from-white/0 via-white/10 to-white/0 translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-700 skew-x-12" />
-            {loading ? (
-              <div className="h-5 w-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
-            ) : (
-              <>
-                Create Account
-                <ArrowRight className="w-4 h-4 group-hover:translate-x-0.5 transition-transform" />
-              </>
-            )}
-          </button>
-        </form>
-
-        {/* Redirect to Login */}
-        <p className="text-center text-xs font-semibold text-slate-500 dark:text-foreground/50 mt-4">
-          Already have an account?{" "}
-          <Link href="/login" className="font-black text-brand-primary hover:text-brand-secondary transition-colors">
-            Sign In
-          </Link>
-        </p>
-
-      </motion.div>
-    </div>
-  );
+  redirect("/login?mode=register");
 }
diff --git a/app/resources/page.tsx b/app/resources/page.tsx
index b7be6ca..6a76602 100644
--- a/app/resources/page.tsx
+++ b/app/resources/page.tsx
@@ -223,8 +223,8 @@ function ResourcesPageContent() {
     const SortIcon = ({ field }: { field: SortField }) => {
         if (sortField !== field) return <ChevronsUpDown className="w-3.5 h-3.5 opacity-40" />;
         return sortDir === "asc"
-            ? <ChevronUp className="w-3.5 h-3.5 text-[#1E3A8A]" />
-            : <ChevronDown className="w-3.5 h-3.5 text-[#1E3A8A]" />;
+            ? <ChevronUp className="w-3.5 h-3.5 text-[#0EA5E9]" />
+            : <ChevronDown className="w-3.5 h-3.5 text-[#0EA5E9]" />;
     };
 
     return (
@@ -236,14 +236,14 @@ function ResourcesPageContent() {
                     {/* ── Page Header ── */}
                     <div className="flex flex-col sm:flex-row sm:items-end justify-between gap-4 mb-8">
                         <div>
-                            <h1 className="text-3xl font-bold text-[#1E3A8A] dark:text-blue-400 tracking-tight">Resources</h1>
+                            <h1 className="text-3xl font-bold text-[#0EA5E9] dark:text-sky-400 tracking-tight">Resources</h1>
                             <p className="text-slate-500 dark:text-foreground/50 mt-1 text-sm">Manage university resources, labs, and halls</p>
                         </div>
                         {isAdmin && (
                             <div className="flex items-center gap-3">
                                 <button
                                     onClick={() => setIsBulkImportOpen(true)}
-                                    className="inline-flex items-center gap-2 bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 hover:bg-slate-50 dark:hover:bg-white/10 active:scale-95 text-slate-700 dark:text-foreground/80 font-semibold px-5 py-2.5 rounded-xl shadow-sm transition-all duration-200"
+                                    className="inline-flex items-center gap-2 bg-white dark:bg-white/5 border border-[#E2E8F0] dark:border-white/10 hover:bg-[#F0F9FF] dark:hover:bg-white/10 active:scale-95 text-[#64748B] dark:text-foreground/80 font-semibold px-5 py-2.5 rounded-none shadow-sm transition-all duration-200"
                                 >
                                     <UploadCloud className="w-4 h-4" />
                                     Bulk Import
@@ -251,7 +251,7 @@ function ResourcesPageContent() {
                                 <button
                                     id="add-resource-btn"
                                     onClick={() => setIsAddModalOpen(true)}
-                                    className="inline-flex items-center gap-2 bg-[#1E3A8A] dark:bg-blue-600 hover:bg-[#1e40af] dark:hover:bg-blue-500 active:scale-95 text-white font-semibold px-5 py-2.5 rounded-xl shadow-md shadow-blue-900/20 dark:shadow-blue-500/10 transition-all duration-200"
+                                    className="inline-flex items-center gap-2 bg-[#0EA5E9] hover:bg-[#0284C7] active:scale-95 text-white font-semibold px-5 py-2.5 rounded-none shadow-md shadow-sky-500/20 transition-all duration-200"
                                 >
                                     <Plus className="w-4 h-4" />
                                     Add Resource
@@ -263,9 +263,9 @@ function ResourcesPageContent() {
                     {/* ── Stats Cards ── */}
                     <div className="grid grid-cols-1 sm:grid-cols-3 gap-5 mb-8">
                         {/* Total */}
-                        <div className="bg-white dark:bg-slate-900/60 rounded-2xl shadow-sm border border-slate-100 dark:border-white/[0.06] p-6 flex items-center gap-5">
-                            <div className="w-12 h-12 rounded-xl bg-blue-50 dark:bg-blue-500/10 flex items-center justify-center shrink-0">
-                                <Database className="w-6 h-6 text-[#1E3A8A] dark:text-blue-400" />
+                        <div className="bg-white dark:bg-slate-900/60 rounded-none shadow-sm border border-[#E2E8F0] dark:border-white/[0.06] p-6 flex items-center gap-5">
+                            <div className="w-12 h-12 rounded-none bg-[#F0F9FF] dark:bg-sky-500/10 flex items-center justify-center shrink-0">
+                                <Database className="w-6 h-6 text-[#0EA5E9] dark:text-sky-400" />
                             </div>
                             <div>
                                 <p className="text-xs font-semibold text-slate-500 dark:text-foreground/45 uppercase tracking-wider">Total Resources</p>
@@ -276,8 +276,8 @@ function ResourcesPageContent() {
                         </div>
 
                         {/* Available */}
-                        <div className="bg-white dark:bg-slate-900/60 rounded-2xl shadow-sm border border-slate-100 dark:border-white/[0.06] p-6 flex items-center gap-5">
-                            <div className="w-12 h-12 rounded-xl bg-emerald-50 dark:bg-emerald-500/10 flex items-center justify-center shrink-0">
+                        <div className="bg-white dark:bg-slate-900/60 rounded-none shadow-sm border border-slate-100 dark:border-white/[0.06] p-6 flex items-center gap-5">
+                            <div className="w-12 h-12 rounded-none bg-emerald-50 dark:bg-emerald-500/10 flex items-center justify-center shrink-0">
                                 <CheckCircle2 className="w-6 h-6 text-emerald-600 dark:text-emerald-450" />
                             </div>
                             <div>
@@ -289,8 +289,8 @@ function ResourcesPageContent() {
                         </div>
 
                         {/* Booked */}
-                        <div className="bg-white dark:bg-slate-900/60 rounded-2xl shadow-sm border border-slate-100 dark:border-white/[0.06] p-6 flex items-center gap-5">
-                            <div className="w-12 h-12 rounded-xl bg-red-50 dark:bg-red-500/10 flex items-center justify-center shrink-0">
+                        <div className="bg-white dark:bg-slate-900/60 rounded-none shadow-sm border border-slate-100 dark:border-white/[0.06] p-6 flex items-center gap-5">
+                            <div className="w-12 h-12 rounded-none bg-red-50 dark:bg-red-500/10 flex items-center justify-center shrink-0">
                                 <XCircle className="w-6 h-6 text-red-500 dark:text-red-400" />
                             </div>
                             <div>
@@ -303,7 +303,7 @@ function ResourcesPageContent() {
                     </div>
 
                     {/* ── Search & Filters ── */}
-                    <div className="bg-white dark:bg-slate-900/60 rounded-2xl shadow-sm border border-slate-100 dark:border-white/[0.06] p-4 mb-4 flex flex-col sm:flex-row gap-3">
+                    <div className="bg-white dark:bg-slate-900/60 rounded-none shadow-sm border border-slate-100 dark:border-white/[0.06] p-4 mb-4 flex flex-col sm:flex-row gap-3">
                         <div className="relative flex-1">
                             <Search className="absolute left-3.5 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
                             <input
@@ -314,7 +314,7 @@ function ResourcesPageContent() {
                                     updateUrlParams(1, pageSize);
                                 }}
                                 placeholder="Search resources…"
-                                className="w-full pl-10 pr-4 py-2.5 bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-xl text-sm font-medium text-slate-800 dark:text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all"
+                                className="w-full pl-10 pr-4 py-2.5 bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-none text-sm font-medium text-slate-800 dark:text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all"
                             />
                         </div>
                         <select
@@ -323,7 +323,7 @@ function ResourcesPageContent() {
                                 setSelectedCategory(e.target.value);
                                 updateUrlParams(1, pageSize);
                             }}
-                            className="px-4 py-2.5 bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-xl text-sm font-medium text-slate-700 dark:text-foreground/75 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all appearance-none cursor-pointer"
+                            className="px-4 py-2.5 bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-none text-sm font-medium text-slate-700 dark:text-foreground/75 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all appearance-none cursor-pointer"
                         >
                             <option value="All">All Categories</option>
                             <option value="Lecture Halls">Lecture Halls</option>
@@ -338,7 +338,7 @@ function ResourcesPageContent() {
                                 setSelectedStatus(e.target.value);
                                 updateUrlParams(1, pageSize);
                             }}
-                            className="px-4 py-2.5 bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-xl text-sm font-medium text-slate-700 dark:text-foreground/75 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all appearance-none cursor-pointer"
+                            className="px-4 py-2.5 bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-none text-sm font-medium text-slate-700 dark:text-foreground/75 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all appearance-none cursor-pointer"
                         >
                             <option value="All">All Statuses</option>
                             <option value="Available">Available</option>
@@ -372,7 +372,7 @@ function ResourcesPageContent() {
                                     "resources"
                                 );
                             }}
-                            className="inline-flex items-center gap-2 bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 hover:bg-slate-50 dark:hover:bg-white/10 active:scale-95 text-slate-700 dark:text-foreground/80 font-semibold px-4 py-2.5 rounded-xl shadow-sm transition-all duration-200 text-sm"
+                            className="inline-flex items-center gap-2 bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 hover:bg-slate-50 dark:hover:bg-white/10 active:scale-95 text-slate-700 dark:text-foreground/80 font-semibold px-4 py-2.5 rounded-none shadow-sm transition-all duration-200 text-sm"
                         >
                             <DownloadCloud className="w-4 h-4 text-emerald-500" />
                             <span>Export CSV</span>
@@ -381,22 +381,22 @@ function ResourcesPageContent() {
 
                     {/* ── Error Banner ── */}
                     {error && (
-                        <div className="mb-6 p-4 bg-red-50 dark:bg-red-500/10 border border-red-100 dark:border-red-500/20 text-red-600 dark:text-red-400 rounded-xl text-sm font-medium flex items-center gap-2">
+                        <div className="mb-6 p-4 bg-red-50 dark:bg-red-500/10 border border-red-100 dark:border-red-500/20 text-red-600 dark:text-red-400 rounded-none text-sm font-medium flex items-center gap-2">
                             <XCircle className="w-4 h-4 shrink-0" />
                             {error}
                         </div>
                     )}
 
                     {/* ── Table ── */}
-                    <div className="bg-white dark:bg-slate-900/60 rounded-2xl shadow-sm border border-slate-100 dark:border-white/[0.06] overflow-hidden">
+                    <div className="bg-white dark:bg-slate-900/60 rounded-none shadow-sm border border-slate-100 dark:border-white/[0.06] overflow-hidden">
                         {loading ? (
                             <div className="flex items-center justify-center py-24">
-                                <div className="animate-spin rounded-full h-10 w-10 border-[3px] border-slate-200 border-t-[#1E3A8A] dark:border-t-blue-500" />
+                                <div className="animate-spin rounded-none h-10 w-10 border-[3px] border-[#E2E8F0] border-t-[#0EA5E9]" />
                             </div>
                         ) : filteredResources.length === 0 ? (
                             <div className="flex flex-col items-center justify-center py-24 text-center px-6">
-                                <div className="w-16 h-16 rounded-2xl bg-blue-50 dark:bg-blue-500/10 flex items-center justify-center mb-4">
-                                    <Search className="w-7 h-7 text-blue-300 dark:text-blue-400" />
+                                <div className="w-16 h-16 rounded-none bg-[#F0F9FF] dark:bg-sky-500/10 flex items-center justify-center mb-4">
+                                    <Search className="w-7 h-7 text-[#0EA5E9]/60 dark:text-sky-400" />
                                 </div>
                                 <h3 className="text-lg font-bold text-slate-800 dark:text-foreground mb-1">No resources found</h3>
                                 <p className="text-sm text-slate-500 dark:text-foreground/45">Try adjusting your search or filters.</p>
@@ -419,7 +419,7 @@ function ResourcesPageContent() {
                                                     className="px-6 py-4 text-left text-xs font-semibold text-slate-505 dark:text-foreground/40 uppercase tracking-wider cursor-pointer select-none hover:text-[#1E3A8A] dark:hover:text-blue-450 transition-colors"
                                                     onClick={() => handleSort(field)}
                                                 >
-                                                    <span className="inline-flex items-center gap-1.5">
+                                                    <span className="inline-flex items-center gap-1.5 text-xs font-semibold text-[#64748B] dark:text-foreground/40 uppercase tracking-wider hover:text-[#0EA5E9] transition-colors">
                                                         {label}
                                                         <SortIcon field={field} />
                                                     </span>
@@ -436,7 +436,7 @@ function ResourcesPageContent() {
                                         {paginatedResources.map((resource) => (
                                             <tr
                                                 key={resource.id}
-                                                className="hover:bg-blue-50/40 dark:hover:bg-white/[0.01] transition-colors duration-150 group"
+                                                className="hover:bg-[#F0F9FF]/60 dark:hover:bg-white/[0.01] transition-colors duration-150 group"
                                             >
                                                 {/* Name */}
                                                 <td className="px-6 py-4">
@@ -448,7 +448,7 @@ function ResourcesPageContent() {
 
                                                 {/* Category */}
                                                 <td className="px-6 py-4">
-                                                    <span className={`inline-flex items-center gap-1.5 text-xs font-semibold px-2.5 py-1 rounded-full border ${getCategoryColor(resource.type)}`}>
+                                                    <span className={`inline-flex items-center gap-1.5 text-xs font-semibold px-2.5 py-1 rounded-none border ${getCategoryColor(resource.type)}`}>
                                                         {getCategoryIcon(resource.type)}
                                                         {resource.type}
                                                     </span>
@@ -466,7 +466,7 @@ function ResourcesPageContent() {
                                                         onClick={() => handleToggleStatus(resource)}
                                                         disabled={updatingStatusId === resource.id}
                                                         title="Click to toggle status"
-                                                        className={`inline-flex items-center gap-1.5 text-xs font-bold px-3 py-1 rounded-full transition-colors border ${resource.availability_status === "Available"
+                                                        className={`inline-flex items-center gap-1.5 text-xs font-bold px-3 py-1 rounded-none transition-colors border ${resource.availability_status === "Available"
                                                             ? "bg-emerald-100 dark:bg-emerald-500/10 text-emerald-700 dark:text-emerald-450 border-emerald-250 dark:border-emerald-500/20"
                                                             : resource.availability_status === "Booked"
                                                                 ? "bg-red-100 dark:bg-red-500/10 text-red-600 dark:text-red-400 border-red-250 dark:border-red-500/20"
@@ -477,7 +477,7 @@ function ResourcesPageContent() {
                                                             }`}
                                                     >
                                                         <span
-                                                            className={`w-1.5 h-1.5 rounded-full ${resource.availability_status === "Available"
+                                                            className={`w-1.5 h-1.5 rounded-none ${resource.availability_status === "Available"
                                                                 ? "bg-emerald-500"
                                                                 : resource.availability_status === "Booked"
                                                                     ? "bg-red-500"
@@ -495,7 +495,7 @@ function ResourcesPageContent() {
                                                             <button
                                                                 onClick={() => setEditingResource(resource)}
                                                                 title="Edit"
-                                                                className="p-2 rounded-lg text-slate-400 hover:text-[#1E3A8A] dark:hover:text-blue-400 hover:bg-blue-50 dark:hover:bg-white/5 transition-all duration-150"
+                                                                className="p-2 rounded-lg text-slate-400 hover:text-[#0EA5E9] dark:hover:text-sky-400 hover:bg-[#F0F9FF] dark:hover:bg-white/5 transition-all duration-150"
                                                             >
                                                                 <Edit3 className="w-4 h-4" />
                                                             </button>
diff --git a/assets/logo1.PNG b/assets/logo1.PNG
new file mode 100644
index 0000000..00458b4
Binary files /dev/null and b/assets/logo1.PNG differ
diff --git a/backend/package-lock.json b/backend/package-lock.json
index 099ffd9..298eb81 100644
--- a/backend/package-lock.json
+++ b/backend/package-lock.json
@@ -10,7 +10,15 @@
       "license": "ISC",
       "dependencies": {
         "@supabase/supabase-js": "^2.105.0",
+        "@types/bcryptjs": "^2.4.6",
+        "@types/cors": "^2.8.19",
+        "@types/express": "^5.0.6",
+        "@types/morgan": "^1.9.10",
+        "@types/node": "^25.3.3",
+        "@types/nodemailer": "^8.0.0",
         "@types/pdfkit": "^0.17.6",
+        "@types/pg": "^8.20.0",
+        "@types/socket.io": "^3.0.1",
         "bcryptjs": "^3.0.3",
         "cors": "^2.8.6",
         "dotenv": "^17.3.1",
@@ -25,21 +33,13 @@
         "pdfkit": "^0.18.0",
         "pg": "^8.22.0",
         "socket.io": "^4.8.3",
+        "typescript": "^5.9.3",
         "xlsx": "^0.18.5",
         "zod": "^4.4.3"
       },
       "devDependencies": {
-        "@types/bcryptjs": "^2.4.6",
-        "@types/cors": "^2.8.19",
-        "@types/express": "^5.0.6",
-        "@types/morgan": "^1.9.10",
-        "@types/node": "^25.3.3",
-        "@types/nodemailer": "^8.0.0",
-        "@types/pg": "^8.20.0",
-        "@types/socket.io": "^3.0.1",
         "nodemon": "^3.1.14",
-        "ts-node": "^10.9.2",
-        "typescript": "^5.9.3"
+        "ts-node": "^10.9.2"
       }
     },
     "node_modules/@cspotcode/source-map-support": {
@@ -651,14 +651,12 @@
       "version": "2.4.6",
       "resolved": "https://registry.npmjs.org/@types/bcryptjs/-/bcryptjs-2.4.6.tgz",
       "integrity": "sha512-9xlo6R2qDs5uixm0bcIqCeMCE6HiQsIyel9KQySStiyqNl2tnj2mP3DX1Nf56MD6KMenNNlBBsy3LJ7gUEQPXQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@types/body-parser": {
       "version": "1.19.6",
       "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.6.tgz",
       "integrity": "sha512-HLFeCYgz89uk22N5Qg3dvGvsv46B8GLvKKo1zKG4NybA8U2DiEO3w9lqGg29t/tfLRJpJ6iQxnVw4OnB7MoM9g==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/connect": "*",
@@ -676,7 +674,6 @@
       "version": "3.4.38",
       "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.38.tgz",
       "integrity": "sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/node": "*"
@@ -695,7 +692,6 @@
       "version": "5.0.6",
       "resolved": "https://registry.npmjs.org/@types/express/-/express-5.0.6.tgz",
       "integrity": "sha512-sKYVuV7Sv9fbPIt/442koC7+IIwK5olP1KWeD88e/idgoJqDm3JV/YUiPwkoKK92ylff2MGxSz1CSjsXelx0YA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/body-parser": "*",
@@ -707,7 +703,6 @@
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-5.1.1.tgz",
       "integrity": "sha512-v4zIMr/cX7/d2BpAEX3KNKL/JrT1s43s96lLvvdTmza1oEvDudCqK9aF/djc/SWgy8Yh0h30TZx5VpzqFCxk5A==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/node": "*",
@@ -720,7 +715,6 @@
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/@types/http-errors/-/http-errors-2.0.5.tgz",
       "integrity": "sha512-r8Tayk8HJnX0FztbZN7oVqGccWgw98T/0neJphO91KkmOzug1KkofZURD4UaD5uH8AqcFLfdPErnBod0u71/qg==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@types/jsonwebtoken": {
@@ -744,7 +738,6 @@
       "version": "1.9.10",
       "resolved": "https://registry.npmjs.org/@types/morgan/-/morgan-1.9.10.tgz",
       "integrity": "sha512-sS4A1zheMvsADRVfT0lYbJ4S9lmsey8Zo2F7cnbYjWHP67Q0AwMYuuzLlkIM2N8gAbb9cubhIVFwcIN2XyYCkA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/node": "*"
@@ -769,7 +762,6 @@
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/@types/nodemailer/-/nodemailer-8.0.0.tgz",
       "integrity": "sha512-fyf8jWULsCo0d0BuoQ75i6IeoHs47qcqxWc7yUdUcV0pOZGjUTTOvwdG1PRXUDqN/8A64yQdQdnA2pZgcdi+cA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/node": "*"
@@ -788,7 +780,6 @@
       "version": "8.20.0",
       "resolved": "https://registry.npmjs.org/@types/pg/-/pg-8.20.0.tgz",
       "integrity": "sha512-bEPFOaMAHTEP1EzpvHTbmwR8UsFyHSKsRisLIHVMXnpNefSbGA1bD6CVy+qKjGSqmZqNqBDV2azOBo8TgkcVow==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/node": "*",
@@ -800,14 +791,12 @@
       "version": "6.15.0",
       "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.15.0.tgz",
       "integrity": "sha512-JawvT8iBVWpzTrz3EGw9BTQFg3BQNmwERdKE22vlTxawwtbyUSlMppvZYKLZzB5zgACXdXxbD3m1bXaMqP/9ow==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@types/range-parser": {
       "version": "1.2.7",
       "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.7.tgz",
       "integrity": "sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@types/request": {
@@ -827,7 +816,6 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@types/send/-/send-1.2.1.tgz",
       "integrity": "sha512-arsCikDvlU99zl1g69TcAB3mzZPpxgw0UQnaHeC1Nwb015xp8bknZv5rIfri9xTOcMuaVgvabfIRA7PSZVuZIQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/node": "*"
@@ -837,7 +825,6 @@
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-2.2.0.tgz",
       "integrity": "sha512-8mam4H1NHLtu7nmtalF7eyBH14QyOASmcxHhSfEoRyr0nP/YdoesEtU+uSRvMe96TW/HPTtkoKqQLl53N7UXMQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/http-errors": "*",
@@ -848,7 +835,6 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@types/socket.io/-/socket.io-3.0.1.tgz",
       "integrity": "sha512-XSma2FhVD78ymvoxYV4xGXrIH/0EKQ93rR+YR0Y+Kw1xbPzLDCip/UWSejZ08FpxYeYNci/PZPQS9anrvJRqMA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "socket.io": "*"
@@ -4249,7 +4235,6 @@
       "version": "5.9.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
-      "dev": true,
       "license": "Apache-2.0",
       "bin": {
         "tsc": "bin/tsc",
diff --git a/backend/src/controllers/userCtrl.ts b/backend/src/controllers/userCtrl.ts
index e4c3262..ce7344d 100644
--- a/backend/src/controllers/userCtrl.ts
+++ b/backend/src/controllers/userCtrl.ts
@@ -1,4 +1,4 @@
-import { Response } from "express";
+import { Request, Response } from "express";
 import admin, { isFirebaseInitialized } from "../config/firebase.config";
 import { AuthRequest } from "../middleware/auth.middleware";
 import { hashPassword, verifyPassword } from "../services/password.service";
@@ -113,6 +113,116 @@ export const hashPasswordHandler = async (req: AuthRequest, res: Response) => {
     }
 };
 
+/**
+ * Self-registration endpoint — publicly accessible (no auth middleware applied here).
+ * The caller must supply a valid Firebase ID token in the Authorization header so we
+ * can verify their identity server-side before writing to Supabase using the service
+ * role key (which bypasses RLS).
+ *
+ * POST /api/users/register
+ * Headers: Authorization: Bearer <firebase-id-token>
+ * Body:    { name, email, role, department, password? }
+ * Returns: 201 + { message }
+ */
+export const selfRegister = async (req: Request, res: Response) => {
+    const authHeader = req.headers.authorization as string | undefined;
+    if (!authHeader || !authHeader.startsWith("Bearer ")) {
+        return res.status(401).json({ message: "Unauthorized: No token provided" });
+    }
+
+    const idToken = authHeader.split(" ")[1];
+
+    try {
+        // Verify the Firebase ID token to confirm the caller's identity
+        let decodedToken: admin.auth.DecodedIdToken;
+        try {
+            decodedToken = await admin.auth().verifyIdToken(idToken);
+        } catch {
+            return res.status(401).json({ message: "Unauthorized: Invalid or expired token" });
+        }
+
+        const uid = decodedToken.uid;
+        const { name, email, role, department, password } = req.body;
+
+        // Basic validation
+        if (!name || !email || !role || !department) {
+            return res.status(400).json({ message: "name, email, role, and department are all required." });
+        }
+
+        const allowedRoles = ["admin", "student", "lecturer", "maintenance"];
+        const normalizedRole = (role as string).toLowerCase();
+        if (!allowedRoles.includes(normalizedRole)) {
+            return res.status(400).json({ message: `Invalid role. Must be one of: ${allowedRoles.join(", ")}` });
+        }
+
+        // Hash the password if provided
+        let password_hash: string | undefined;
+        if (password && typeof password === "string" && password.length >= 8) {
+            try {
+                password_hash = await hashPassword(password);
+            } catch {
+                // Non-fatal — continue without a hash
+            }
+        }
+
+        // Check for an existing profile (e.g. created by userSync race)
+        const { data: existing } = await supabase
+            .from("users")
+            .select("id")
+            .eq("id", uid)
+            .maybeSingle();
+
+        const isStudent = normalizedRole === "student";
+
+        const profileData: Record<string, unknown> = {
+            id: uid,
+            name: name.trim(),
+            email: email.toLowerCase(),
+            role: normalizedRole,
+            department,
+            approval_status: isStudent ? "Approved" : "Pending",
+            ...(password_hash ? { password_hash } : {}),
+        };
+
+        let dbError: any;
+        if (existing) {
+            // Row already exists (auto-created by userSync) — update it with the correct values
+            const { error } = await supabase
+                .from("users")
+                .update(profileData)
+                .eq("id", uid);
+            dbError = error;
+        } else {
+            const { error } = await supabase
+                .from("users")
+                .insert(profileData);
+            dbError = error;
+        }
+
+        if (dbError) {
+            console.error("selfRegister: Supabase error:", dbError);
+            return res.status(500).json({ message: "Failed to create user profile.", error: dbError.message });
+        }
+
+        // Set the Firebase custom claim for this user so future token refreshes carry the role
+        try {
+            await admin.auth().setCustomUserClaims(uid, { role: normalizedRole });
+        } catch (claimErr) {
+            console.warn("selfRegister: Could not set custom claim:", claimErr);
+        }
+
+        return res.status(201).json({
+            status: "success",
+            message: isStudent
+                ? "Registration successful. Account active."
+                : "Registration submitted. Your account is pending admin approval.",
+        });
+    } catch (error: any) {
+        console.error("selfRegister error:", error);
+        return res.status(500).json({ message: "Registration failed.", error: error.message });
+    }
+};
+
 /**
  * Verify a password against the stored bcrypt hash.
  * Called during login as a secondary validation step.
@@ -244,6 +354,7 @@ export const adminCreateUser = async (req: AuthRequest, res: Response) => {
                 department,
                 password_hash: passwordHash,
                 phone: phone || null,
+                approval_status: "Approved" // Admin-created members are Approved by default
             });
 
         if (dbError) {
@@ -265,6 +376,7 @@ export const adminCreateUser = async (req: AuthRequest, res: Response) => {
                 role: role.toLowerCase(),
                 department,
                 phone: phone || null,
+                approval_status: "Approved"
             }
         });
     } catch (error: any) {
@@ -279,7 +391,7 @@ export const adminCreateUser = async (req: AuthRequest, res: Response) => {
 export const adminUpdateUser = async (req: AuthRequest, res: Response) => {
     try {
         const id = req.params.id as string;
-        const { name, role, department, password, phone } = req.body;
+        const { name, role, department, password, phone, approval_status } = req.body;
 
         if (!name || !role || !department) {
             return res.status(400).json({ status: "error", message: "Name, role, and department are required." });
@@ -333,6 +445,7 @@ export const adminUpdateUser = async (req: AuthRequest, res: Response) => {
                 role: role.toLowerCase(),
                 department,
                 phone: phone !== undefined ? phone : undefined,
+                approval_status: approval_status !== undefined ? approval_status : undefined,
                 ...(passwordHash ? { password_hash: passwordHash } : {})
             })
             .eq("id", id);
@@ -351,6 +464,7 @@ export const adminUpdateUser = async (req: AuthRequest, res: Response) => {
                 role: role.toLowerCase(),
                 department,
                 phone,
+                approval_status,
             }
         });
     } catch (error: any) {
diff --git a/backend/src/db/migrations/0007_user_approval.down.sql b/backend/src/db/migrations/0007_user_approval.down.sql
new file mode 100644
index 0000000..6fc344c
--- /dev/null
+++ b/backend/src/db/migrations/0007_user_approval.down.sql
@@ -0,0 +1,9 @@
+-- ────────────────────────────────────────────────────────────
+-- 0007_user_approval.down.sql
+-- ────────────────────────────────────────────────────────────
+
+-- 1. Remove constraint
+ALTER TABLE users DROP CONSTRAINT IF EXISTS valid_approval_status;
+
+-- 2. Drop approval_status column
+ALTER TABLE users DROP COLUMN IF EXISTS approval_status;
diff --git a/backend/src/db/migrations/0007_user_approval.up.sql b/backend/src/db/migrations/0007_user_approval.up.sql
new file mode 100644
index 0000000..9f3648c
--- /dev/null
+++ b/backend/src/db/migrations/0007_user_approval.up.sql
@@ -0,0 +1,12 @@
+-- ────────────────────────────────────────────────────────────
+-- 0007_user_approval.up.sql
+-- ────────────────────────────────────────────────────────────
+
+-- 1. Add approval_status column to users table with a default of 'Pending'
+ALTER TABLE users ADD COLUMN IF NOT EXISTS approval_status TEXT NOT NULL DEFAULT 'Pending';
+
+-- 2. Update existing users to 'Approved' so they don't get locked out
+UPDATE users SET approval_status = 'Approved';
+
+-- 3. Add constraint to validate correct statuses
+ALTER TABLE users ADD CONSTRAINT valid_approval_status CHECK (approval_status IN ('Pending', 'Approved', 'Rejected'));
diff --git a/backend/src/routes/userRoutes.ts b/backend/src/routes/userRoutes.ts
index f227690..478f887 100644
--- a/backend/src/routes/userRoutes.ts
+++ b/backend/src/routes/userRoutes.ts
@@ -7,13 +7,19 @@ import {
     getAllUsers,
     adminCreateUser,
     adminUpdateUser,
-    adminDeleteUser
+    adminDeleteUser,
+    selfRegister
 } from "../controllers/userCtrl";
 import { verifyToken, requireAdmin } from "../middleware/auth.middleware";
 
 const router = express.Router();
 
-// Apply auth middleware to all user routes
+// ── Public routes (no auth required) ─────────────────────────
+// Self-registration: the handler verifies the Firebase token internally
+// and writes to Supabase via the service role key (bypasses RLS).
+router.post("/register", selfRegister as any);
+
+// Apply auth middleware to all routes below this line
 router.use(verifyToken);
 
 // Profile routes
diff --git a/backend/src/services/userSync.ts b/backend/src/services/userSync.ts
index f4d1dae..769f445 100644
--- a/backend/src/services/userSync.ts
+++ b/backend/src/services/userSync.ts
@@ -7,6 +7,7 @@ export interface SyncedUser {
     email: string;
     role: 'admin' | 'student' | 'lecturer' | 'maintenance';
     department?: string;
+    approval_status?: 'Pending' | 'Approved' | 'Rejected';
     created_at?: string;
 }
 
@@ -83,6 +84,7 @@ export async function syncSingleUser(uid: string): Promise<SyncedUser | null> {
                 email: emailLower,
                 role,
                 department,
+                approval_status: role === 'student' ? 'Approved' : 'Pending',
                 created_at: createdAt
             };
 
@@ -94,6 +96,7 @@ export async function syncSingleUser(uid: string): Promise<SyncedUser | null> {
                     email: newUser.email,
                     role: newUser.role,
                     department: newUser.department,
+                    approval_status: newUser.approval_status,
                     created_at: newUser.created_at
                 });
 
@@ -188,6 +191,7 @@ export async function syncAllUsers(): Promise<SyncedUser[]> {
                     email: emailLower,
                     role,
                     department,
+                    approval_status: role === 'student' ? 'Approved' : 'Pending',
                     created_at: createdAt
                 };
 
@@ -199,6 +203,7 @@ export async function syncAllUsers(): Promise<SyncedUser[]> {
                         email: newUser.email,
                         role: newUser.role,
                         department: newUser.department,
+                        approval_status: newUser.approval_status,
                         created_at: newUser.created_at
                     });
 
diff --git a/components/AddResourceModal.tsx b/components/AddResourceModal.tsx
index 57b5814..d48ff8d 100644
--- a/components/AddResourceModal.tsx
+++ b/components/AddResourceModal.tsx
@@ -76,9 +76,9 @@ export default function AddResourceModal({ isOpen, onClose, onSuccess }: AddReso
     };
 
     return (
-        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/60 backdrop-blur-sm">
+        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/60 ">
             <div
-                className="bg-white dark:bg-slate-900 w-full max-w-lg rounded-2xl shadow-2xl border border-slate-100 dark:border-slate-800 flex flex-col max-h-[92vh] overflow-hidden"
+                className="bg-white dark:bg-slate-900 w-full max-w-lg rounded-none border-2 border-foreground shadow-[4px_4px_0_0_rgba(0,0,0,1)] dark:shadow-[4px_4px_0_0_rgba(255,255,255,0.2)] border border-slate-100 dark:border-slate-800 flex flex-col max-h-[92vh] overflow-hidden"
                 onClick={e => e.stopPropagation()}
             >
                 {/* Header */}
@@ -89,7 +89,7 @@ export default function AddResourceModal({ isOpen, onClose, onSuccess }: AddReso
                     </div>
                     <button
                         onClick={onClose}
-                        className="p-2 rounded-xl hover:bg-slate-100 dark:hover:bg-white/5 text-slate-400 dark:text-foreground/45 hover:text-slate-600 dark:hover:text-foreground transition-colors"
+                        className="p-2 rounded-none hover:bg-slate-100 dark:hover:bg-white/5 text-slate-400 dark:text-foreground/45 hover:text-slate-600 dark:hover:text-foreground transition-colors"
                     >
                         <X className="w-5 h-5" />
                     </button>
@@ -98,7 +98,7 @@ export default function AddResourceModal({ isOpen, onClose, onSuccess }: AddReso
                 {/* Body */}
                 <div className="overflow-y-auto flex-1 px-7 py-6">
                     {error && (
-                        <div className="mb-5 p-3.5 bg-red-50 dark:bg-red-500/10 border border-red-100 dark:border-red-500/20 text-red-600 dark:text-red-400 rounded-xl text-sm font-medium flex items-center gap-2">
+                        <div className="mb-5 p-3.5 bg-red-50 dark:bg-red-500/10 border border-red-100 dark:border-red-500/20 text-red-600 dark:text-red-400 rounded-none text-sm font-medium flex items-center gap-2">
                             <X className="w-4 h-4 shrink-0" />
                             {error}
                         </div>
@@ -116,7 +116,7 @@ export default function AddResourceModal({ isOpen, onClose, onSuccess }: AddReso
                                 value={formData.name}
                                 onChange={handleChange}
                                 placeholder="e.g. Lab 01, Hall A"
-                                className="w-full px-4 py-2.5 border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-950/40 rounded-xl text-sm font-medium text-slate-800 dark:text-foreground placeholder-slate-400 dark:placeholder-foreground/30 focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary transition-all"
+                                className="w-full px-4 py-2.5 border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-950/40 rounded-none text-sm font-medium text-slate-800 dark:text-foreground placeholder-slate-400 dark:placeholder-foreground/30 focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary transition-all"
                             />
                         </div>
 
@@ -130,7 +130,7 @@ export default function AddResourceModal({ isOpen, onClose, onSuccess }: AddReso
                                     name="type"
                                     value={formData.type}
                                     onChange={handleChange}
-                                    className="w-full px-4 py-2.5 border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-950/40 rounded-xl text-sm font-medium text-slate-700 dark:text-foreground focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary transition-all appearance-none"
+                                    className="w-full px-4 py-2.5 border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-950/40 rounded-none text-sm font-medium text-slate-700 dark:text-foreground focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary transition-all appearance-none"
                                 >
                                     {CATEGORIES.map(c => <option key={c} className="dark:bg-slate-900">{c}</option>)}
                                 </select>
@@ -147,7 +147,7 @@ export default function AddResourceModal({ isOpen, onClose, onSuccess }: AddReso
                                     value={formData.capacity}
                                     onChange={handleChange}
                                     placeholder="e.g. 60"
-                                    className="w-full px-4 py-2.5 border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-950/40 rounded-xl text-sm font-medium text-slate-800 dark:text-foreground placeholder-slate-400 dark:placeholder-foreground/30 focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary transition-all"
+                                    className="w-full px-4 py-2.5 border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-950/40 rounded-none text-sm font-medium text-slate-800 dark:text-foreground placeholder-slate-400 dark:placeholder-foreground/30 focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary transition-all"
                                 />
                             </div>
                         </div>
@@ -163,7 +163,7 @@ export default function AddResourceModal({ isOpen, onClose, onSuccess }: AddReso
                                 value={formData.location}
                                 onChange={handleChange}
                                 placeholder="e.g. Block A, Floor 2"
-                                className="w-full px-4 py-2.5 border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-950/40 rounded-xl text-sm font-medium text-slate-800 dark:text-foreground placeholder-slate-400 dark:placeholder-foreground/30 focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary transition-all"
+                                className="w-full px-4 py-2.5 border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-950/40 rounded-none text-sm font-medium text-slate-800 dark:text-foreground placeholder-slate-400 dark:placeholder-foreground/30 focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary transition-all"
                             />
                         </div>
 
@@ -199,7 +199,7 @@ export default function AddResourceModal({ isOpen, onClose, onSuccess }: AddReso
                                 name="availability_status"
                                 value={formData.availability_status}
                                 onChange={handleChange}
-                                className="w-full px-4 py-2.5 border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-950/40 rounded-xl text-sm font-medium text-slate-700 dark:text-foreground focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary transition-all appearance-none"
+                                className="w-full px-4 py-2.5 border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-950/40 rounded-none text-sm font-medium text-slate-700 dark:text-foreground focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary transition-all appearance-none"
                             >
                                 {STATUSES.map(s => <option key={s} className="dark:bg-slate-900">{s}</option>)}
                             </select>
@@ -212,7 +212,7 @@ export default function AddResourceModal({ isOpen, onClose, onSuccess }: AddReso
                     <button
                         type="button"
                         onClick={onClose}
-                        className="px-5 py-2.5 rounded-xl border border-slate-200 dark:border-white/10 text-slate-600 dark:text-foreground/60 text-sm font-semibold hover:bg-slate-100 dark:hover:bg-white/5 transition-colors"
+                        className="px-5 py-2.5 rounded-none border border-slate-200 dark:border-white/10 text-slate-600 dark:text-foreground/60 text-sm font-semibold hover:bg-slate-100 dark:hover:bg-white/5 transition-colors"
                     >
                         Cancel
                     </button>
@@ -220,7 +220,7 @@ export default function AddResourceModal({ isOpen, onClose, onSuccess }: AddReso
                         type="submit"
                         form="add-resource-form"
                         disabled={loading}
-                        className="px-6 py-2.5 rounded-xl bg-brand-primary hover:bg-brand-secondary text-white text-sm font-semibold flex items-center gap-2 transition-colors shadow-md shadow-brand-primary/20 disabled:opacity-60 active:scale-95"
+                        className="px-6 py-2.5 rounded-none bg-brand-primary hover:bg-brand-secondary text-white text-sm font-semibold flex items-center gap-2 transition-colors shadow-md shadow-brand-primary/20 disabled:opacity-60 active:scale-95"
                     >
                         {loading ? (
                             <><Loader2 className="w-4 h-4 animate-spin" /> Saving…</>
diff --git a/components/BulkImport.tsx b/components/BulkImport.tsx
index 2f6fd65..bf65397 100644
--- a/components/BulkImport.tsx
+++ b/components/BulkImport.tsx
@@ -156,9 +156,9 @@ export default function BulkImport({ isOpen, onClose, onSuccess }: BulkImportPro
 
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
-      <div className="absolute inset-0 bg-slate-900/50 backdrop-blur-sm" onClick={closeAndReset} />
+      <div className="absolute inset-0 bg-slate-900/50 " onClick={closeAndReset} />
       
-      <div className="relative bg-white w-full max-w-3xl rounded-2xl shadow-xl flex flex-col max-h-[90vh]">
+      <div className="relative bg-white w-full max-w-3xl rounded-none border-2 border-foreground shadow-[4px_4px_0_0_rgba(0,0,0,1)] dark:shadow-[4px_4px_0_0_rgba(255,255,255,0.2)] flex flex-col max-h-[90vh]">
         <div className="flex items-center justify-between p-6 border-b border-slate-100">
           <h2 className="text-2xl font-bold text-[#1E3A8A]">Bulk Import Resources</h2>
           <button onClick={closeAndReset} className="text-slate-400 hover:text-slate-600 transition-colors">
@@ -178,10 +178,10 @@ export default function BulkImport({ isOpen, onClose, onSuccess }: BulkImportPro
               {/* Upload Dropzone */}
               {!file && (
                 <div 
-                  className="border-2 border-dashed border-blue-200 bg-blue-50/50 rounded-2xl p-10 flex flex-col items-center justify-center cursor-pointer hover:bg-blue-50 transition-colors group"
+                  className="border-2 border-dashed border-blue-200 bg-blue-50/50 rounded-none p-10 flex flex-col items-center justify-center cursor-pointer hover:bg-blue-50 transition-colors group"
                   onClick={() => fileInputRef.current?.click()}
                 >
-                  <div className="w-16 h-16 bg-white rounded-full shadow-sm flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
+                  <div className="w-16 h-16 bg-white rounded-none shadow-sm flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
                     <UploadCloud className="w-8 h-8 text-blue-500" />
                   </div>
                   <h3 className="text-lg font-bold text-slate-800 mb-1">Upload CSV or Excel File</h3>
@@ -201,7 +201,7 @@ export default function BulkImport({ isOpen, onClose, onSuccess }: BulkImportPro
               {/* File Info & Errors */}
               {file && (
                 <div className="mb-6">
-                  <div className="flex items-center justify-between bg-blue-50 border border-blue-100 rounded-xl p-4 mb-4">
+                  <div className="flex items-center justify-between bg-blue-50 border border-blue-100 rounded-none p-4 mb-4">
                     <div className="flex items-center gap-3">
                       <FileSpreadsheet className="w-6 h-6 text-blue-600" />
                       <div>
@@ -218,7 +218,7 @@ export default function BulkImport({ isOpen, onClose, onSuccess }: BulkImportPro
                   </div>
 
                   {errors.length > 0 && (
-                    <div className="bg-red-50 border border-red-100 rounded-xl p-4 mb-4">
+                    <div className="bg-red-50 border border-red-100 rounded-none p-4 mb-4">
                       <div className="flex gap-2">
                         <AlertCircle className="w-5 h-5 text-red-500 shrink-0" />
                         <div>
@@ -240,11 +240,11 @@ export default function BulkImport({ isOpen, onClose, onSuccess }: BulkImportPro
                 <div>
                   <h3 className="font-bold text-slate-800 mb-3 flex items-center justify-between">
                     Data Preview 
-                    <span className="text-xs font-medium bg-blue-100 text-blue-700 px-2.5 py-1 rounded-full">
+                    <span className="text-xs font-medium bg-blue-100 text-blue-700 px-2.5 py-1 rounded-none">
                       {parsedData.length} records ready
                     </span>
                   </h3>
-                  <div className="border border-slate-200 rounded-xl overflow-hidden">
+                  <div className="border border-slate-200 rounded-none overflow-hidden">
                     <div className="overflow-auto max-h-60">
                       <table className="w-full text-sm text-left">
                         <thead className="text-xs text-slate-500 uppercase bg-slate-50 sticky top-0">
@@ -264,7 +264,7 @@ export default function BulkImport({ isOpen, onClose, onSuccess }: BulkImportPro
                               <td className="px-4 py-3">{row.location}</td>
                               <td className="px-4 py-3 text-center">{row.capacity}</td>
                               <td className="px-4 py-3">
-                                <span className={`px-2 py-1 text-xs rounded-full font-semibold ${row.availability_status === 'Available' ? 'bg-emerald-100 text-emerald-700' : row.availability_status === 'Booked' ? 'bg-red-100 text-red-700' : 'bg-orange-100 text-orange-700'}`}>
+                                <span className={`px-2 py-1 text-xs rounded-none font-semibold ${row.availability_status === 'Available' ? 'bg-emerald-100 text-emerald-700' : row.availability_status === 'Booked' ? 'bg-red-100 text-red-700' : 'bg-orange-100 text-orange-700'}`}>
                                   {row.availability_status}
                                 </span>
                               </td>
@@ -288,18 +288,18 @@ export default function BulkImport({ isOpen, onClose, onSuccess }: BulkImportPro
           <div className="p-6 border-t border-slate-100 flex justify-end gap-3 bg-slate-50">
             <button 
               onClick={closeAndReset}
-              className="px-5 py-2.5 text-sm font-bold text-slate-600 bg-white border border-slate-200 rounded-xl hover:bg-slate-100 transition-colors"
+              className="px-5 py-2.5 text-sm font-bold text-slate-600 bg-white border border-slate-200 rounded-none hover:bg-slate-100 transition-colors"
             >
               Cancel
             </button>
             <button 
               disabled={parsedData.length === 0 || errors.length > 0 || isLoading}
               onClick={handleImport}
-              className="px-5 py-2.5 text-sm font-bold text-white bg-blue-600 rounded-xl hover:bg-blue-700 transition-colors disabled:opacity-50 flex items-center gap-2"
+              className="px-5 py-2.5 text-sm font-bold text-white bg-blue-600 rounded-none hover:bg-blue-700 transition-colors disabled:opacity-50 flex items-center gap-2"
             >
               {isLoading ? (
                 <>
-                  <div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
+                  <div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-none animate-spin" />
                   Importing...
                 </>
               ) : (
diff --git a/components/DeleteBookingModal.tsx b/components/DeleteBookingModal.tsx
index 4fafcb6..c3ff6d5 100644
--- a/components/DeleteBookingModal.tsx
+++ b/components/DeleteBookingModal.tsx
@@ -89,10 +89,10 @@ export default function DeleteBookingModal({ isOpen, onClose, onSuccess, booking
     return (
         <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
             {/* Backdrop */}
-            <div className="absolute inset-0 bg-black/40 backdrop-blur-sm" onClick={onClose} />
+            <div className="absolute inset-0 bg-black/40 " onClick={onClose} />
 
             {/* Modal */}
-            <div className="relative w-full max-w-md bg-white dark:bg-slate-900 rounded-3xl shadow-2xl border border-slate-100 dark:border-slate-800 overflow-hidden animate-in fade-in zoom-in-95">
+            <div className="relative w-full max-w-md bg-white dark:bg-slate-900 rounded-none border-2 border-foreground shadow-[4px_4px_0_0_rgba(0,0,0,1)] dark:shadow-[4px_4px_0_0_rgba(255,255,255,0.2)] border border-slate-100 dark:border-slate-800 overflow-hidden animate-in fade-in zoom-in-95">
                 {/* Header */}
                 <div className="flex items-center justify-between px-6 py-5 border-b border-slate-100 dark:border-slate-800">
                     <div>
@@ -106,7 +106,7 @@ export default function DeleteBookingModal({ isOpen, onClose, onSuccess, booking
                     </div>
                     <button
                         onClick={onClose}
-                        className="p-2 hover:bg-slate-100 dark:hover:bg-white/5 rounded-xl transition-colors text-slate-400 hover:text-slate-600"
+                        className="p-2 hover:bg-slate-100 dark:hover:bg-white/5 rounded-none transition-colors text-slate-400 hover:text-slate-600"
                     >
                         <X className="w-5 h-5" />
                     </button>
@@ -115,22 +115,22 @@ export default function DeleteBookingModal({ isOpen, onClose, onSuccess, booking
                 {/* Content */}
                 <div className="p-6 space-y-5">
                     {error && (
-                        <div className="flex items-center gap-3 p-4 bg-rose-50 dark:bg-red-500/10 border border-rose-100 dark:border-red-500/20 rounded-2xl text-rose-600 dark:text-red-400 text-xs font-semibold">
+                        <div className="flex items-center gap-3 p-4 bg-rose-50 dark:bg-red-500/10 border border-rose-100 dark:border-red-500/20 rounded-none text-rose-600 dark:text-red-400 text-xs font-semibold">
                             <AlertTriangle className="w-4 h-4 shrink-0" />
                             <p>{error}</p>
                         </div>
                     )}
 
                     {/* Warning */}
-                    <div className="p-4 bg-rose-50 dark:bg-red-500/5 border border-rose-200 dark:border-red-500/20 rounded-2xl">
+                    <div className="p-4 bg-rose-50 dark:bg-red-500/5 border border-rose-200 dark:border-red-500/20 rounded-none">
                         <p className="text-sm font-semibold text-rose-800 dark:text-red-300">
                             Are you sure you want to permanently delete this booking record?
                         </p>
                     </div>
 
                     {/* Booking details */}
-                    <div className="flex items-center gap-3 p-4 bg-slate-50 dark:bg-white/[0.03] border border-slate-200 dark:border-slate-800 rounded-2xl">
-                        <div className="w-10 h-10 rounded-xl bg-brand-primary/10 flex items-center justify-center shrink-0">
+                    <div className="flex items-center gap-3 p-4 bg-slate-50 dark:bg-white/[0.03] border border-slate-200 dark:border-slate-800 rounded-none">
+                        <div className="w-10 h-10 rounded-none bg-brand-primary/10 flex items-center justify-center shrink-0">
                             <MapPin className="w-5 h-5 text-brand-primary" />
                         </div>
                         <div className="min-w-0">
@@ -148,7 +148,7 @@ export default function DeleteBookingModal({ isOpen, onClose, onSuccess, booking
                         <button
                             type="button"
                             onClick={onClose}
-                            className="px-5 py-3 border border-slate-200 dark:border-slate-700 rounded-2xl text-sm font-bold text-slate-600 dark:text-foreground/60 hover:bg-slate-50 dark:hover:bg-white/5 transition-colors"
+                            className="px-5 py-3 border border-slate-200 dark:border-slate-700 rounded-none text-sm font-bold text-slate-600 dark:text-foreground/60 hover:bg-slate-50 dark:hover:bg-white/5 transition-colors"
                         >
                             Cancel
                         </button>
@@ -156,7 +156,7 @@ export default function DeleteBookingModal({ isOpen, onClose, onSuccess, booking
                             type="button"
                             onClick={handleDelete}
                             disabled={isDeleting}
-                            className="inline-flex items-center gap-2 bg-rose-600 text-white font-bold px-6 py-3 rounded-2xl hover:bg-rose-500 transition-all shadow-lg shadow-rose-600/20 active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed"
+                            className="inline-flex items-center gap-2 bg-rose-600 text-white font-bold px-6 py-3 rounded-none hover:bg-rose-500 transition-all border-2 border-foreground shadow-[4px_4px_0_0_rgba(0,0,0,1)] dark:shadow-[4px_4px_0_0_rgba(255,255,255,0.2)] shadow-rose-600/20 active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed"
                         >
                             <Trash2 className="w-4 h-4" />
                             {isDeleting ? "Deleting..." : "Delete Booking"}
diff --git a/components/EditBookingModal.tsx b/components/EditBookingModal.tsx
index fece81b..348f498 100644
--- a/components/EditBookingModal.tsx
+++ b/components/EditBookingModal.tsx
@@ -124,10 +124,10 @@ export default function EditBookingModal({ isOpen, onClose, onSuccess, booking }
     return (
         <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
             {/* Backdrop */}
-            <div className="absolute inset-0 bg-black/40 backdrop-blur-sm" onClick={onClose} />
+            <div className="absolute inset-0 bg-black/40 " onClick={onClose} />
 
             {/* Modal */}
-            <div className="relative w-full max-w-lg bg-white dark:bg-slate-900 rounded-3xl shadow-2xl border border-slate-100 dark:border-slate-800 overflow-hidden animate-in fade-in zoom-in-95">
+            <div className="relative w-full max-w-lg bg-white dark:bg-slate-900 rounded-none border-2 border-foreground shadow-[4px_4px_0_0_rgba(0,0,0,1)] dark:shadow-[4px_4px_0_0_rgba(255,255,255,0.2)] border border-slate-100 dark:border-slate-800 overflow-hidden animate-in fade-in zoom-in-95">
                 {/* Header */}
                 <div className="flex items-center justify-between px-6 py-5 border-b border-slate-100 dark:border-slate-800">
                     <div>
@@ -141,7 +141,7 @@ export default function EditBookingModal({ isOpen, onClose, onSuccess, booking }
                     </div>
                     <button
                         onClick={onClose}
-                        className="p-2 hover:bg-slate-100 dark:hover:bg-white/5 rounded-xl transition-colors text-slate-400 hover:text-slate-600"
+                        className="p-2 hover:bg-slate-100 dark:hover:bg-white/5 rounded-none transition-colors text-slate-400 hover:text-slate-600"
                     >
                         <X className="w-5 h-5" />
                     </button>
@@ -150,7 +150,7 @@ export default function EditBookingModal({ isOpen, onClose, onSuccess, booking }
                 {/* Resource info */}
                 <div className="px-6 py-4 bg-slate-50 dark:bg-white/[0.03] border-b border-slate-100 dark:border-slate-800">
                     <div className="flex items-center gap-3">
-                        <div className="w-10 h-10 rounded-xl bg-brand-primary/10 flex items-center justify-center">
+                        <div className="w-10 h-10 rounded-none bg-brand-primary/10 flex items-center justify-center">
                             <MapPin className="w-5 h-5 text-brand-primary" />
                         </div>
                         <div>
@@ -165,7 +165,7 @@ export default function EditBookingModal({ isOpen, onClose, onSuccess, booking }
                 {/* Form */}
                 <form onSubmit={handleSubmit} className="p-6 space-y-5">
                     {error && (
-                        <div className="flex items-center gap-3 p-4 bg-rose-50 dark:bg-red-500/10 border border-rose-100 dark:border-red-500/20 rounded-2xl text-rose-600 dark:text-red-400 text-xs font-semibold">
+                        <div className="flex items-center gap-3 p-4 bg-rose-50 dark:bg-red-500/10 border border-rose-100 dark:border-red-500/20 rounded-none text-rose-600 dark:text-red-400 text-xs font-semibold">
                             <AlertTriangle className="w-4 h-4 shrink-0" />
                             <p>{error}</p>
                         </div>
@@ -184,7 +184,7 @@ export default function EditBookingModal({ isOpen, onClose, onSuccess, booking }
                                 value={formData.date}
                                 onChange={handleChange}
                                 required
-                                className="w-full pl-11 pr-4 py-3 bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-slate-700 rounded-2xl text-sm font-semibold text-foreground focus:outline-none focus:ring-4 focus:ring-brand-primary/10 transition-all"
+                                className="w-full pl-11 pr-4 py-3 bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-slate-700 rounded-none text-sm font-semibold text-foreground focus:outline-none focus:ring-4 focus:ring-brand-primary/10 transition-all"
                             />
                         </div>
                     </div>
@@ -203,7 +203,7 @@ export default function EditBookingModal({ isOpen, onClose, onSuccess, booking }
                                     value={formData.startTime}
                                     onChange={handleChange}
                                     required
-                                    className="w-full pl-11 pr-4 py-3 bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-slate-700 rounded-2xl text-sm font-semibold text-foreground focus:outline-none focus:ring-4 focus:ring-brand-primary/10 transition-all"
+                                    className="w-full pl-11 pr-4 py-3 bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-slate-700 rounded-none text-sm font-semibold text-foreground focus:outline-none focus:ring-4 focus:ring-brand-primary/10 transition-all"
                                 />
                             </div>
                         </div>
@@ -219,7 +219,7 @@ export default function EditBookingModal({ isOpen, onClose, onSuccess, booking }
                                     value={formData.endTime}
                                     onChange={handleChange}
                                     required
-                                    className="w-full pl-11 pr-4 py-3 bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-slate-700 rounded-2xl text-sm font-semibold text-foreground focus:outline-none focus:ring-4 focus:ring-brand-primary/10 transition-all"
+                                    className="w-full pl-11 pr-4 py-3 bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-slate-700 rounded-none text-sm font-semibold text-foreground focus:outline-none focus:ring-4 focus:ring-brand-primary/10 transition-all"
                                 />
                             </div>
                         </div>
@@ -230,14 +230,14 @@ export default function EditBookingModal({ isOpen, onClose, onSuccess, booking }
                         <button
                             type="button"
                             onClick={onClose}
-                            className="px-5 py-3 border border-slate-200 dark:border-slate-700 rounded-2xl text-sm font-bold text-slate-600 dark:text-foreground/60 hover:bg-slate-50 dark:hover:bg-white/5 transition-colors"
+                            className="px-5 py-3 border border-slate-200 dark:border-slate-700 rounded-none text-sm font-bold text-slate-600 dark:text-foreground/60 hover:bg-slate-50 dark:hover:bg-white/5 transition-colors"
                         >
                             Cancel
                         </button>
                         <button
                             type="submit"
                             disabled={isSubmitting}
-                            className="inline-flex items-center gap-2 bg-brand-primary text-white font-bold px-6 py-3 rounded-2xl hover:bg-brand-secondary transition-all shadow-lg active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed"
+                            className="inline-flex items-center gap-2 bg-brand-primary text-white font-bold px-6 py-3 rounded-none hover:bg-brand-secondary transition-all border-2 border-foreground shadow-[4px_4px_0_0_rgba(0,0,0,1)] dark:shadow-[4px_4px_0_0_rgba(255,255,255,0.2)] active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed"
                         >
                             {isSubmitting ? "Updating..." : "Update Booking"}
                         </button>
diff --git a/components/EditResourceModal.tsx b/components/EditResourceModal.tsx
index 9e417fc..c127630 100644
--- a/components/EditResourceModal.tsx
+++ b/components/EditResourceModal.tsx
@@ -99,9 +99,9 @@ export default function EditResourceModal({ isOpen, resource, onClose, onSuccess
     };
 
     return (
-        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/60 backdrop-blur-sm">
+        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/60 ">
             <div
-                className="bg-white dark:bg-slate-900 w-full max-w-lg rounded-2xl shadow-2xl border border-slate-100 dark:border-slate-800 flex flex-col max-h-[92vh] overflow-hidden"
+                className="bg-white dark:bg-slate-900 w-full max-w-lg rounded-none border-2 border-foreground shadow-[4px_4px_0_0_rgba(0,0,0,1)] dark:shadow-[4px_4px_0_0_rgba(255,255,255,0.2)] border border-slate-100 dark:border-slate-800 flex flex-col max-h-[92vh] overflow-hidden"
                 onClick={e => e.stopPropagation()}
             >
                 {/* Header */}
@@ -112,7 +112,7 @@ export default function EditResourceModal({ isOpen, resource, onClose, onSuccess
                     </div>
                     <button
                         onClick={onClose}
-                        className="p-2 rounded-xl hover:bg-slate-100 dark:hover:bg-white/5 text-slate-400 dark:text-foreground/45 hover:text-slate-600 dark:hover:text-foreground transition-colors"
+                        className="p-2 rounded-none hover:bg-slate-100 dark:hover:bg-white/5 text-slate-400 dark:text-foreground/45 hover:text-slate-600 dark:hover:text-foreground transition-colors"
                     >
                         <X className="w-5 h-5" />
                     </button>
@@ -121,7 +121,7 @@ export default function EditResourceModal({ isOpen, resource, onClose, onSuccess
                 {/* Body */}
                 <div className="overflow-y-auto flex-1 px-7 py-6">
                     {error && (
-                        <div className="mb-5 p-3.5 bg-red-50 dark:bg-red-500/10 border border-red-100 dark:border-red-500/20 text-red-600 dark:text-red-400 rounded-xl text-sm font-medium flex items-center gap-2">
+                        <div className="mb-5 p-3.5 bg-red-50 dark:bg-red-500/10 border border-red-100 dark:border-red-500/20 text-red-600 dark:text-red-400 rounded-none text-sm font-medium flex items-center gap-2">
                             <X className="w-4 h-4 shrink-0" />
                             {error}
                         </div>
@@ -139,7 +139,7 @@ export default function EditResourceModal({ isOpen, resource, onClose, onSuccess
                                 value={formData.name}
                                 onChange={handleChange}
                                 placeholder="e.g. Lab 01, Hall A"
-                                className="w-full px-4 py-2.5 border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-950/40 rounded-xl text-sm font-medium text-slate-800 dark:text-foreground placeholder-slate-400 dark:placeholder-foreground/30 focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary transition-all"
+                                className="w-full px-4 py-2.5 border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-950/40 rounded-none text-sm font-medium text-slate-800 dark:text-foreground placeholder-slate-400 dark:placeholder-foreground/30 focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary transition-all"
                             />
                         </div>
 
@@ -153,7 +153,7 @@ export default function EditResourceModal({ isOpen, resource, onClose, onSuccess
                                     name="type"
                                     value={formData.type}
                                     onChange={handleChange}
-                                    className="w-full px-4 py-2.5 border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-950/40 rounded-xl text-sm font-medium text-slate-700 dark:text-foreground focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary transition-all appearance-none"
+                                    className="w-full px-4 py-2.5 border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-950/40 rounded-none text-sm font-medium text-slate-700 dark:text-foreground focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary transition-all appearance-none"
                                 >
                                     {CATEGORIES.map(c => <option key={c} className="dark:bg-slate-900">{c}</option>)}
                                 </select>
@@ -170,7 +170,7 @@ export default function EditResourceModal({ isOpen, resource, onClose, onSuccess
                                     value={formData.capacity}
                                     onChange={handleChange}
                                     placeholder="e.g. 60"
-                                    className="w-full px-4 py-2.5 border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-950/40 rounded-xl text-sm font-medium text-slate-800 dark:text-foreground placeholder-slate-400 dark:placeholder-foreground/30 focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary transition-all"
+                                    className="w-full px-4 py-2.5 border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-950/40 rounded-none text-sm font-medium text-slate-800 dark:text-foreground placeholder-slate-400 dark:placeholder-foreground/30 focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary transition-all"
                                 />
                             </div>
                         </div>
@@ -186,7 +186,7 @@ export default function EditResourceModal({ isOpen, resource, onClose, onSuccess
                                 value={formData.location}
                                 onChange={handleChange}
                                 placeholder="e.g. Block A, Floor 2"
-                                className="w-full px-4 py-2.5 border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-950/40 rounded-xl text-sm font-medium text-slate-800 dark:text-foreground placeholder-slate-400 dark:placeholder-foreground/30 focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary transition-all"
+                                className="w-full px-4 py-2.5 border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-950/40 rounded-none text-sm font-medium text-slate-800 dark:text-foreground placeholder-slate-400 dark:placeholder-foreground/30 focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary transition-all"
                             />
                         </div>
 
@@ -222,7 +222,7 @@ export default function EditResourceModal({ isOpen, resource, onClose, onSuccess
                                 name="availability_status"
                                 value={formData.availability_status}
                                 onChange={handleChange}
-                                className="w-full px-4 py-2.5 border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-950/40 rounded-xl text-sm font-medium text-slate-700 dark:text-foreground focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary transition-all appearance-none"
+                                className="w-full px-4 py-2.5 border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-950/40 rounded-none text-sm font-medium text-slate-700 dark:text-foreground focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary transition-all appearance-none"
                             >
                                 {STATUSES.map(s => <option key={s} className="dark:bg-slate-900">{s}</option>)}
                             </select>
@@ -235,7 +235,7 @@ export default function EditResourceModal({ isOpen, resource, onClose, onSuccess
                     <button
                         type="button"
                         onClick={onClose}
-                        className="px-5 py-2.5 rounded-xl border border-slate-200 dark:border-white/10 text-slate-600 dark:text-foreground/60 text-sm font-semibold hover:bg-slate-100 dark:hover:bg-white/5 transition-colors"
+                        className="px-5 py-2.5 rounded-none border border-slate-200 dark:border-white/10 text-slate-600 dark:text-foreground/60 text-sm font-semibold hover:bg-slate-100 dark:hover:bg-white/5 transition-colors"
                     >
                         Cancel
                     </button>
@@ -243,7 +243,7 @@ export default function EditResourceModal({ isOpen, resource, onClose, onSuccess
                         type="submit"
                         form="edit-resource-form"
                         disabled={loading}
-                        className="px-6 py-2.5 rounded-xl bg-brand-primary hover:bg-brand-secondary text-white text-sm font-semibold flex items-center gap-2 transition-colors shadow-md shadow-brand-primary/20 disabled:opacity-60 active:scale-95"
+                        className="px-6 py-2.5 rounded-none bg-brand-primary hover:bg-brand-secondary text-white text-sm font-semibold flex items-center gap-2 transition-colors shadow-md shadow-brand-primary/20 disabled:opacity-60 active:scale-95"
                     >
                         {loading ? (
                             <><Loader2 className="w-4 h-4 animate-spin" /> Saving…</>
diff --git a/components/Footer.tsx b/components/Footer.tsx
index 65b1698..7e8e29e 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -1,46 +1,181 @@
-import React from "react";
-import { Landmark, Github, Twitter, Linkedin } from "lucide-react";
+import Link from "next/link";
+import {
+    Building2,
+    Mail,
+    Phone,
+    MapPin,
+    ArrowRight,
+    Github,
+    Twitter,
+    Linkedin,
+} from "lucide-react";
+
+/*
+ * URMS LIGHT BLUE DESIGN SYSTEM
+ * bg-base      : #F8FAFC
+ * surface      : #FFFFFF
+ * border       : #E2E8F0
+ * primary      : #0EA5E9  (Sky 500)
+ * primary-dark : #0284C7  (Sky 600)
+ * teal         : #0D9488  (Teal 600)
+ * teal-light   : #CCFBF1  (Teal 100)
+ * ink-main     : #0F172A  (Slate 900)
+ * ink-muted    : #64748B  (Slate 500)
+ */
+
+const FOOTER_LINKS = {
+    Platform: [
+        { name: "Browse Resources",   href: "/resources"     },
+        { name: "Book a Space",       href: "/bookings"      },
+        { name: "Explore Campus",     href: "/explore"       },
+        { name: "Notifications",      href: "/notifications" },
+    ],
+    Portals: [
+        { name: "Student Hub",        href: "/login" },
+        { name: "Faculty Console",    href: "/login" },
+        { name: "Operations Admin",   href: "/login" },
+        { name: "Maintenance Centre", href: "/login" },
+    ],
+    Support: [
+        { name: "Getting Started",    href: "#"        },
+        { name: "Booking Guide",      href: "#"        },
+        { name: "FAQ",                href: "#"        },
+        { name: "Contact IT Support", href: "#contact" },
+    ],
+};
+
+const SOCIAL_LINKS = [
+    { icon: Github,   href: "#", label: "GitHub"   },
+    { icon: Twitter,  href: "#", label: "Twitter"  },
+    { icon: Linkedin, href: "#", label: "LinkedIn" },
+];
 
 export default function Footer() {
     return (
-        <footer className="bg-card text-slate-600 dark:text-foreground/60 py-12 px-4 sm:px-6 lg:px-8 mt-auto border-t border-slate-200 dark:border-border">
-            <div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-4 gap-12">
-                {/* Brand */}
-                <div className="col-span-1 md:col-span-2">
-                    <div className="flex items-center gap-3 text-foreground font-black text-2xl mb-4 tracking-tighter">
-                        <img
-                            src="/urms-logo.png"
-                            alt="URMS Logo"
-                            className="w-8 h-8 rounded-lg bg-white p-0.5"
-                        />
-                        <span>UniLink</span>
+        <footer className="bg-[#0F172A] text-white">
+
+            {/* ── Top CTA Strip ── */}
+            <div className="border-b border-white/10">
+                <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-10">
+                    <div className="flex flex-col items-start justify-between gap-6 sm:flex-row sm:items-center">
+                        <div>
+                            <h2 className="text-xl font-bold text-white">
+                                Ready to streamline campus bookings?
+                            </h2>
+                            <p className="mt-1 text-sm text-slate-400">
+                                Join thousands of students and faculty already using UniLink URMS.
+                            </p>
+                        </div>
+                        <Link
+                            href="/login"
+                            className="inline-flex items-center gap-2 px-6 py-3 text-sm font-semibold text-white bg-gradient-to-r from-[#0EA5E9] to-[#0D9488] rounded-full shadow-lg shadow-[#0EA5E9]/20 hover:shadow-xl hover:shadow-[#0EA5E9]/30 hover:-translate-y-0.5 transition-all duration-200 shrink-0"
+                        >
+                            Get Started Free
+                            <ArrowRight className="h-4 w-4" />
+                        </Link>
                     </div>
-                    <p className="max-w-sm text-slate-600 dark:text-foreground/50 leading-relaxed text-[15px] font-medium">
-                        The unified resource management platform for university faculties. Optimizing campus equipment and laboratory utilization since 2026.
-                    </p>
                 </div>
+            </div>
 
-                {/* Links */}
-                <div>
-                    <h3 className="text-foreground font-black text-[10px] uppercase tracking-widest mb-6">Platform</h3>
-                    <ul className="space-y-4 text-[14px] font-bold">
-                        <li><a href="/dashboard" className="hover:text-brand-primary transition-colors">Dashboard</a></li>
-                        <li><a href="/resources" className="hover:text-brand-primary transition-colors">Resources</a></li>
-                        <li><a href="/bookings" className="hover:text-brand-primary transition-colors">Bookings</a></li>
-                        <li><a href="/maintenance" className="hover:text-brand-primary transition-colors">Maintenance</a></li>
-                    </ul>
-                </div>
+            {/* ── Main Grid ── */}
+            <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 pt-14 pb-10">
+                <div className="grid gap-10 lg:grid-cols-12">
+
+                    {/* ── Brand Column ── */}
+                    <div className="lg:col-span-4">
+                        {/* Logo */}
+                        <Link href="/" className="inline-flex items-center gap-2.5 group">
+                            <img src="/logo1.png" alt="UniLink URMS Logo" className="h-25 w-auto object-contain" />
+                            
+                        </Link>
 
-                {/* Social / Legal */}
-                <div>
-                    <h3 className="text-foreground font-black text-[10px] uppercase tracking-widest mb-6">Connect</h3>
-                    <div className="flex space-x-5 mb-8 text-slate-500 dark:text-foreground/40">
-                        <a href="#" className="hover:text-foreground transition-colors"><Github className="w-5 h-5" /></a>
-                        <a href="#" className="hover:text-foreground transition-colors"><Twitter className="w-5 h-5" /></a>
-                        <a href="#" className="hover:text-foreground transition-colors"><Linkedin className="w-5 h-5" /></a>
+                        <p className="mt-4 text-sm leading-relaxed text-slate-400 max-w-xs">
+                            University Resource Management System — the single live index
+                            for every campus space, scheduled without a single collision.
+                        </p>
+
+                        {/* Contact details */}
+                        <div className="mt-6 space-y-2.5">
+                            <a
+                                href="mailto:urms@university.edu"
+                                className="flex items-center gap-2.5 text-[12.5px] text-slate-400 hover:text-[#0EA5E9] transition-colors group"
+                            >
+                                <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-white/[0.06] group-hover:bg-[#0EA5E9]/10 transition-colors">
+                                    <Mail className="h-3.5 w-3.5" />
+                                </span>
+                                urms@university.edu
+                            </a>
+                            <a
+                                href="tel:+94452280000"
+                                className="flex items-center gap-2.5 text-[12.5px] text-slate-400 hover:text-[#0EA5E9] transition-colors group"
+                            >
+                                <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-white/[0.06] group-hover:bg-[#0EA5E9]/10 transition-colors">
+                                    <Phone className="h-3.5 w-3.5" />
+                                </span>
+                                +94 (0) 45 228 0000
+                            </a>
+                            <div className="flex items-start gap-2.5 text-[12.5px] text-slate-400">
+                                <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-white/[0.06] mt-0.5">
+                                    <MapPin className="h-3.5 w-3.5" />
+                                </span>
+                                Faculty of Computing, Sabaragamuwa University of Sri Lanka
+                            </div>
+                        </div>
+
+                        {/* Social Icons */}
+                        <div className="mt-6 flex items-center gap-2">
+                            {SOCIAL_LINKS.map(({ icon: Icon, href, label }) => (
+                                <a
+                                    key={label}
+                                    href={href}
+                                    aria-label={label}
+                                    className="flex h-8 w-8 items-center justify-center rounded-full border border-white/10 bg-white/[0.04] text-slate-400 hover:bg-[#0EA5E9]/20 hover:text-[#0EA5E9] hover:border-[#0EA5E9]/30 transition-all"
+                                >
+                                    <Icon className="h-3.5 w-3.5" />
+                                </a>
+                            ))}
+                        </div>
+                    </div>
+
+                    {/* ── Link Columns ── */}
+                    <div className="lg:col-span-8 grid gap-8 sm:grid-cols-3">
+                        {Object.entries(FOOTER_LINKS).map(([group, links]) => (
+                            <div key={group}>
+                                <p className="text-[11px] font-bold uppercase tracking-[0.12em] text-slate-500 mb-4">
+                                    {group}
+                                </p>
+                                <ul className="space-y-2.5">
+                                    {links.map((link) => (
+                                        <li key={link.name}>
+                                            <Link
+                                                href={link.href}
+                                                className="text-[13px] text-slate-400 hover:text-white transition-colors duration-150"
+                                            >
+                                                {link.name}
+                                            </Link>
+                                        </li>
+                                    ))}
+                                </ul>
+                            </div>
+                        ))}
                     </div>
-                    <div className="text-[12px] text-slate-400 dark:text-foreground/30 font-black uppercase tracking-widest">
-                        &copy; {new Date().getFullYear()} UniLink. Built for Capstone Project G15.
+                </div>
+            </div>
+
+            {/* ── Bottom Bar ── */}
+            <div className="border-t border-white/[0.08]">
+                <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-5 flex flex-col items-center justify-between gap-3 sm:flex-row">
+                    <p className="text-[12px] text-slate-500">
+                        © {new Date().getFullYear()} UniLink URMS · Sabaragamuwa University of Sri Lanka · All rights reserved.
+                    </p>
+                    <div className="flex items-center gap-4 text-[12px] text-slate-500">
+                        <span className="flex items-center gap-1.5">
+                            <span className="h-1.5 w-1.5 rounded-full bg-[#0D9488] animate-pulse" />
+                            All systems operational
+                        </span>
+                        <span className="text-slate-700">·</span>
+                        <Link href="#" className="hover:text-slate-300 transition-colors">Privacy</Link>
+                        <Link href="#" className="hover:text-slate-300 transition-colors">Terms</Link>
                     </div>
                 </div>
             </div>
diff --git a/components/GlobalSearch.tsx b/components/GlobalSearch.tsx
index b45bc4c..ef08e62 100644
--- a/components/GlobalSearch.tsx
+++ b/components/GlobalSearch.tsx
@@ -173,13 +173,13 @@ export default function GlobalSearch() {
                     onKeyDown={handleKeyDown}
                     ref={(el) => { inputRef.current = el; }}
                     placeholder="Search resources, labs, equipment..."
-                    className="w-full pl-9 pr-10 py-2 bg-slate-50 dark:bg-foreground/5 border border-slate-200 dark:border-border rounded-full text-sm font-semibold focus:outline-none focus:ring-4 focus:ring-brand-primary/10 focus:border-brand-primary transition-all text-slate-700 dark:text-foreground placeholder-slate-400 dark:placeholder-foreground/30"
+                    className="w-full pl-9 pr-10 py-2 bg-slate-50 dark:bg-foreground/5 border border-slate-200 dark:border-border rounded-none text-sm font-semibold focus:outline-none focus:ring-4 focus:ring-brand-primary/10 focus:border-brand-primary transition-all text-slate-700 dark:text-foreground placeholder-slate-400 dark:placeholder-foreground/30"
                 />
                 
                 {/* Filter Toggle */}
                 <button 
                     onClick={() => setShowFilters(!showFilters)}
-                    className={`absolute right-2 top-1/2 -translate-y-1/2 p-1.5 rounded-full transition-colors ${showFilters ? 'bg-brand-primary/10 text-brand-primary' : 'text-slate-400 hover:text-slate-600 hover:bg-slate-100 dark:hover:bg-white/5'}`}
+                    className={`absolute right-2 top-1/2 -translate-y-1/2 p-1.5 rounded-none transition-colors ${showFilters ? 'bg-brand-primary/10 text-brand-primary' : 'text-slate-400 hover:text-slate-600 hover:bg-slate-100 dark:hover:bg-white/5'}`}
                     title="Filters"
                 >
                     <Filter className="w-4 h-4" />
@@ -188,12 +188,12 @@ export default function GlobalSearch() {
 
             {/* Filters Dropdown */}
             {isOpen && showFilters && (
-                <div className="absolute top-full right-0 mt-2 p-3 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-2xl shadow-xl z-50 w-48 animate-in fade-in slide-in-from-top-2">
+                <div className="absolute top-full right-0 mt-2 p-3 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-none border-2 border-foreground shadow-[4px_4px_0_0_rgba(0,0,0,1)] dark:shadow-[4px_4px_0_0_rgba(255,255,255,0.2)] z-50 w-48 animate-in fade-in slide-in-">
                     <p className="text-xs font-black uppercase text-slate-400 dark:text-foreground/30 mb-2 tracking-widest pl-1">Availability</p>
                     <select
                         value={filterStatus}
                         onChange={(e) => setFilterStatus(e.target.value)}
-                        className="w-full px-3 py-2 text-sm font-semibold rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-950/40 text-slate-700 dark:text-foreground focus:outline-none focus:ring-2 focus:ring-brand-primary/20"
+                        className="w-full px-3 py-2 text-sm font-semibold rounded-none border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-950/40 text-slate-700 dark:text-foreground focus:outline-none focus:ring-2 focus:ring-brand-primary/20"
                     >
                         <option value="All" className="dark:bg-slate-900">All Statuses</option>
                         <option value="Available" className="dark:bg-slate-900">Available</option>
@@ -205,7 +205,7 @@ export default function GlobalSearch() {
 
             {/* Results Dropdown */}
             {isOpen && query.length > 0 && !showFilters && (
-                <div className="absolute top-full left-0 right-0 mt-2 bg-white dark:bg-slate-900 border border-slate-100 dark:border-slate-800 rounded-2xl shadow-[0_8px_30px_rgb(0,0,0,0.08)] z-50 max-h-[400px] overflow-y-auto overscroll-contain animate-in fade-in slide-in-from-top-2 flex flex-col p-2">
+                <div className="absolute top-full left-0 right-0 mt-2 bg-white dark:bg-slate-900 border border-slate-100 dark:border-slate-800 rounded-none shadow-[0_8px_30px_rgb(0,0,0,0.08)] z-50 max-h-[400px] overflow-y-auto overscroll-contain animate-in fade-in slide-in- flex flex-col p-2">
                     {loading && resources.length === 0 ? (
                         <div className="p-8 flex justify-center items-center text-brand-primary">
                             <Loader2 className="w-6 h-6 animate-spin" />
@@ -221,7 +221,7 @@ export default function GlobalSearch() {
                                         key={res.id}
                                         href="/bookings"
                                         onClick={() => setIsOpen(false)}
-                                        className="flex items-start gap-3 p-3 hover:bg-slate-50 dark:hover:bg-white/[0.04] rounded-xl transition-colors group"
+                                        className="flex items-start gap-3 p-3 hover:bg-slate-50 dark:hover:bg-white/[0.04] rounded-none transition-colors group"
                                     >
                                         <div className="mt-0.5 p-2 bg-slate-100 dark:bg-white/5 text-slate-500 dark:text-foreground/50 rounded-lg group-hover:bg-brand-primary group-hover:text-white transition-colors">
                                             {getCategoryIcon(res.category)}
diff --git a/components/LayoutShell.tsx b/components/LayoutShell.tsx
index 5d746b9..3d6d43a 100644
--- a/components/LayoutShell.tsx
+++ b/components/LayoutShell.tsx
@@ -6,6 +6,7 @@ import Footer from "./Footer";
 import { usePathname } from "next/navigation";
 import ProtectedRoute from "./ProtectedRoute";
 import DashboardLayout from "./dashboard/DashboardLayout";
+import PageLoader from "./PageLoader";
 
 interface LayoutShellProps {
   children: React.ReactNode;
@@ -36,6 +37,7 @@ export default function LayoutShell({ children }: LayoutShellProps) {
 
   return (
     <>
+      <PageLoader />
       {!skipGlobalNav && <Navbar />}
       <main className="flex-grow flex flex-col">
         {isDashboardPage ? (
diff --git a/components/MaintenanceTimeline.tsx b/components/MaintenanceTimeline.tsx
index fad4cfc..de23da3 100644
--- a/components/MaintenanceTimeline.tsx
+++ b/components/MaintenanceTimeline.tsx
@@ -19,21 +19,21 @@ const getStatusConfig = (status: string) => {
         case 'completed':
             return {
                 icon: <CheckCircle2 className="w-4 h-4 md:w-5 md:h-5" />,
-                badge: 'text-emerald-700 bg-emerald-50 border-emerald-200',
-                iconContainer: 'text-emerald-600 bg-emerald-100',
+                badge: 'text-teal-700 bg-teal-50 border-teal-200 dark:bg-teal-500/10 dark:text-teal-300 dark:border-teal-500/20',
+                iconContainer: 'text-teal-600 bg-teal-100 dark:bg-teal-500/20 dark:text-teal-400',
             };
         case 'in progress':
             return {
                 icon: <Wrench className="w-4 h-4 md:w-5 md:h-5" />,
-                badge: 'text-blue-700 bg-blue-50 border-blue-200',
-                iconContainer: 'text-blue-600 bg-blue-100',
+                badge: 'text-[#0EA5E9] bg-[#F0F9FF] border-[#E0F2FE] dark:bg-sky-500/10 dark:text-sky-300 dark:border-sky-500/20',
+                iconContainer: 'text-[#0EA5E9] bg-[#F0F9FF] dark:bg-sky-500/20 dark:text-sky-400',
             };
         case 'pending':
         default:
             return {
                 icon: <Clock className="w-4 h-4 md:w-5 md:h-5" />,
-                badge: 'text-amber-700 bg-amber-50 border-amber-200',
-                iconContainer: 'text-amber-600 bg-amber-100',
+                badge: 'text-amber-700 bg-amber-50 border-amber-200 dark:bg-amber-500/10 dark:text-amber-300 dark:border-amber-500/20',
+                iconContainer: 'text-amber-600 bg-amber-100 dark:bg-amber-500/20 dark:text-amber-400',
             };
     }
 };
@@ -41,12 +41,12 @@ const getStatusConfig = (status: string) => {
 export default function MaintenanceTimeline({ records, resourceName }: MaintenanceTimelineProps) {
     if (!records || records.length === 0) {
         return (
-            <div className="flex flex-col items-center justify-center p-8 bg-slate-50 border border-slate-100 rounded-2xl w-full">
-                <div className="w-12 h-12 bg-slate-100 text-slate-400 rounded-full flex items-center justify-center mb-3 shadow-sm border border-slate-200">
+            <div className="flex flex-col items-center justify-center p-8 bg-slate-50 dark:bg-slate-800/40 border border-[#E2E8F0] dark:border-slate-700 rounded-xl w-full">
+                <div className="w-12 h-12 bg-white dark:bg-slate-800 text-[#64748B] dark:text-slate-400 rounded-xl flex items-center justify-center mb-3 shadow-sm border border-[#E2E8F0] dark:border-slate-700">
                     <AlertCircle className="w-6 h-6" />
                 </div>
-                <h3 className="text-sm font-semibold text-slate-700">No maintenance history</h3>
-                <p className="text-xs text-slate-500 mt-1 text-center max-w-sm">
+                <h3 className="text-sm font-semibold text-[#0F172A] dark:text-white">No maintenance history</h3>
+                <p className="text-xs text-[#64748B] dark:text-slate-400 mt-1 text-center max-w-sm">
                     {resourceName 
                         ? `There are no maintenance records available for ${resourceName}.` 
                         : 'There are no maintenance records recorded at this time.'}
@@ -59,37 +59,37 @@ export default function MaintenanceTimeline({ records, resourceName }: Maintenan
     const sortedRecords = [...records].sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
 
     return (
-        <div className="bg-white rounded-2xl border border-slate-100 p-4 md:p-6 shadow-sm w-full">
-            <div className="mb-6 border-b border-slate-100 pb-4">
-                <h2 className="text-lg font-bold text-[#1E3A8A] flex items-center gap-2">
-                    <Wrench className="w-5 h-5 text-blue-600" />
+        <div className="bg-white dark:bg-slate-800/60 rounded-xl border border-[#E2E8F0] dark:border-slate-700 p-4 md:p-6 shadow-sm w-full">
+            <div className="mb-6 border-b border-[#E2E8F0] dark:border-slate-700 pb-4">
+                <h2 className="text-lg font-bold text-[#0F172A] dark:text-white flex items-center gap-2">
+                    <Wrench className="w-5 h-5 text-[#0EA5E9]" />
                     Maintenance History
                 </h2>
                 {resourceName && (
-                    <p className="text-sm text-slate-500 mt-1 font-medium">
-                        Timeline for <span className="text-slate-700">{resourceName}</span>
+                    <p className="text-sm text-[#64748B] dark:text-slate-400 mt-1 font-medium">
+                        Timeline for <span className="text-[#0F172A] dark:text-white font-semibold">{resourceName}</span>
                     </p>
                 )}
             </div>
 
-            <div className="relative space-y-6 md:space-y-8 before:absolute before:inset-0 before:ml-5 before:-translate-x-px md:before:mx-auto md:before:translate-x-0 before:h-full before:w-0.5 before:bg-slate-200 before:z-0">
+            <div className="relative space-y-6 md:space-y-8 before:absolute before:inset-0 before:ml-5 before:-translate-x-px md:before:mx-auto md:before:translate-x-0 before:h-full before:w-0.5 before:bg-[#E2E8F0] dark:before:bg-slate-700 before:z-0">
                 {sortedRecords.map((record) => {
                     const statusConfig = getStatusConfig(record.status);
                     
                     return (
                         <div key={record.maintenance_id} className="relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group is-active z-10">
                             {/* Timeline Icon */}
-                            <div className={`flex items-center justify-center w-10 h-10 rounded-full border-4 border-white shrink-0 md:order-1 md:group-odd:-translate-x-1/2 md:group-even:translate-x-1/2 shadow-sm z-10 ${statusConfig.iconContainer}`}>
+                            <div className={`flex items-center justify-center w-10 h-10 rounded-full border-4 border-white dark:border-slate-800 shrink-0 md:order-1 md:group-odd:-translate-x-1/2 md:group-even:translate-x-1/2 shadow-sm z-10 ${statusConfig.iconContainer}`}>
                                 {statusConfig.icon}
                             </div>
                             
                             {/* Record Card */}
-                            <div className="w-[calc(100%-3.5rem)] md:w-[calc(50%-2.5rem)] p-4 rounded-xl border border-slate-100 bg-white shadow-sm hover:shadow-md transition-all duration-200 hover:border-slate-300">
+                            <div className="w-[calc(100%-3.5rem)] md:w-[calc(50%-2.5rem)] p-4 rounded-xl border border-[#E2E8F0] dark:border-slate-700 bg-white dark:bg-slate-800/80 shadow-sm hover:shadow-md transition-all duration-200">
                                 <div className="flex flex-col sm:flex-row sm:items-center justify-between mb-2.5 gap-2">
-                                    <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-bold border ${statusConfig.badge} shadow-sm`}>
+                                    <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-[11px] font-semibold border ${statusConfig.badge} shadow-sm`}>
                                         {record.status}
                                     </span>
-                                    <time className="text-xs font-semibold text-slate-500 bg-slate-50 px-2 py-1 rounded-md border border-slate-100">
+                                    <time className="text-xs font-semibold text-[#64748B] dark:text-slate-400 bg-slate-50 dark:bg-slate-700/50 px-2 py-1 rounded-md border border-[#E2E8F0] dark:border-slate-600">
                                         {new Date(record.date).toLocaleDateString(undefined, { 
                                             year: 'numeric', 
                                             month: 'short', 
@@ -97,7 +97,7 @@ export default function MaintenanceTimeline({ records, resourceName }: Maintenan
                                         })}
                                     </time>
                                 </div>
-                                <p className="text-sm text-slate-700 leading-relaxed font-medium">
+                                <p className="text-sm text-[#0F172A] dark:text-white leading-relaxed font-medium">
                                     {record.description}
                                 </p>
                             </div>
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index c9663c5..6886e61 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -3,30 +3,46 @@
 import React, { useEffect, useRef, useState } from "react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { LogOut, Menu, X, ChevronDown, User, Sparkles, Bell } from "lucide-react";
+import {
+    LogOut,
+    Menu,
+    X,
+    ChevronDown,
+    User,
+    Bell,
+    Building2,
+} from "lucide-react";
 import { useAuth } from "@/lib/auth-context";
-import GlobalSearch from "./GlobalSearch";
 import { ThemeToggle } from "./ThemeToggle";
 import NotificationBell from "./NotificationBell";
 
-/* ── role colours ─────────────────────────────────────────── */
-const roleMeta: Record<string, { label: string; dot: string; badge: string; text: string }> = {
-    admin:       { label: "Administrator", dot: "bg-purple-500", badge: "bg-purple-500/10 border-purple-500/20",  text: "text-purple-600 dark:text-purple-400"  },
-    lecturer:    { label: "Lecturer",      dot: "bg-emerald-500",badge: "bg-emerald-500/10 border-emerald-500/20",text: "text-emerald-600 dark:text-emerald-400" },
-    student:     { label: "Student",       dot: "bg-blue-500",   badge: "bg-blue-500/10 border-blue-500/20",      text: "text-blue-600 dark:text-blue-400"    },
-    maintenance: { label: "Maintenance",   dot: "bg-amber-500",  badge: "bg-amber-500/10 border-amber-500/20",    text: "text-amber-600 dark:text-amber-400"   },
+/*
+ * URMS LIGHT BLUE DESIGN SYSTEM
+ * bg-base      : #F8FAFC  (Slate 50)
+ * surface      : #FFFFFF
+ * border       : #E2E8F0  (Slate 200)
+ * primary      : #0EA5E9  (Sky 500)
+ * primary-dark : #0284C7  (Sky 600)
+ * teal         : #0D9488  (Teal 600)
+ * teal-light   : #CCFBF1  (Teal 100)
+ * ink-main     : #0F172A  (Slate 900)
+ * ink-muted    : #64748B  (Slate 500)
+ */
+
+const roleMeta: Record<string, { label: string }> = {
+    admin:       { label: "Administrator" },
+    lecturer:    { label: "Lecturer"      },
+    student:     { label: "Student"       },
+    maintenance: { label: "Maintenance"   },
 };
 
 export default function Navbar() {
-    const pathname    = usePathname();
+    const pathname   = usePathname();
     const { user, profile, signOut } = useAuth();
     const [isOpen,   setIsOpen]   = useState(false);
     const [scrolled, setScrolled] = useState(false);
     const [userMenu, setUserMenu] = useState(false);
-    const [hovered,  setHovered]  = useState<string | null>(null);
     const userMenuRef = useRef<HTMLDivElement>(null);
-    const indicatorRef = useRef<HTMLSpanElement>(null);
-    const navRef       = useRef<HTMLDivElement>(null);
 
     /* scroll shadow */
     useEffect(() => {
@@ -35,7 +51,7 @@ export default function Navbar() {
         return () => window.removeEventListener("scroll", fn);
     }, []);
 
-    /* outside click → close user menu */
+    /* close dropdown on outside click */
     useEffect(() => {
         const fn = (e: MouseEvent) => {
             if (userMenuRef.current && !userMenuRef.current.contains(e.target as Node))
@@ -45,10 +61,10 @@ export default function Navbar() {
         return () => document.removeEventListener("mousedown", fn);
     }, []);
 
-    /* close mobile on route change */
+    /* close mobile drawer on route change */
     useEffect(() => { setIsOpen(false); }, [pathname]);
 
-    /* ── role-based nav links (unchanged) ── */
+    /* nav links by role */
     let navLinks: { name: string; href: string }[] = [];
     switch (profile?.role) {
         case "admin":
@@ -78,6 +94,7 @@ export default function Navbar() {
         default:
             navLinks = [
                 { name: "Home",      href: "/"          },
+                { name: "Explore",   href: "/explore"   },
                 { name: "Resources", href: "/resources" },
             ];
     }
@@ -87,170 +104,125 @@ export default function Navbar() {
         ? profile.name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2)
         : user?.email?.[0].toUpperCase() ?? "U";
 
-    /* sliding indicator: move to hovered or active link */
-    useEffect(() => {
-        const key   = hovered ?? pathname;
-        const el    = navRef.current?.querySelector<HTMLElement>(`[data-href="${key}"]`);
-        const bar   = indicatorRef.current;
-        if (!el || !bar || !navRef.current) return;
-        const navRect = navRef.current.getBoundingClientRect();
-        const rect    = el.getBoundingClientRect();
-        bar.style.left  = `${rect.left - navRect.left}px`;
-        bar.style.width = `${rect.width}px`;
-        bar.style.opacity = "1";
-    }, [hovered, pathname, navLinks]);
-
     return (
         <>
-            {/* ════════════════════ NAVBAR ════════════════════ */}
-            <nav className={`sticky top-0 z-50 w-full bg-background/70 backdrop-blur-md transition-all duration-300 ${
-                scrolled ? "shadow-sm border-b border-slate-200/60 dark:border-border/30" : "border-b border-transparent"
-            }`}>
-
-                <style>{`
-                    @keyframes fadeUp  { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }
-                    .nav-item-enter { animation: fadeUp 0.25s ease forwards; }
-                `}</style>
-
-                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-                    <div className="flex items-center h-16 gap-4">
+            {/* ════════════════ NAVBAR ════════════════ */}
+            <nav
+                className={`sticky top-0 z-50 w-full transition-all duration-300 ${
+                    scrolled
+                        ? "bg-white/95 dark:bg-[#0B111E]/95 backdrop-blur-md shadow-[0_1px_12px_0_rgba(14,165,233,0.08)] border-b border-[#E2E8F0] dark:border-slate-700/60"
+                        : "bg-white/80 dark:bg-[#0B111E]/80 backdrop-blur-sm border-b border-[#E2E8F0] dark:border-slate-700/60"
+                }`}
+            >
+                <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+                    <div className="flex items-center h-16 gap-6">
 
                         {/* ── LOGO ── */}
-                        <Link href="/" className="flex items-center gap-2.5 group shrink-0 mr-2">
-                            <div className="relative">
-                                {/* glow ring on hover */}
-                                <span className="absolute inset-0 rounded-xl scale-0 group-hover:scale-110 bg-brand-primary/10 transition-transform duration-300 ease-out" />
-                                <img
-                                    src="/urms-logo.png"
-                                    alt="URMS Logo"
-                                    className="relative w-8 h-8 rounded-xl object-contain transition-transform duration-300 group-hover:scale-110 drop-shadow-sm"
-                                />
-                            </div>
-                            <span className="text-xl font-black tracking-tight text-foreground group-hover:text-brand-primary transition-colors duration-200">
-                                Uni<span className="text-brand-primary group-hover:text-foreground transition-colors duration-200">Link</span>
-                            </span>
+                        <Link href="/" className="flex items-center gap-2.5 group shrink-0">
+                            <img src="/logo1.png" alt="UniLink URMS Logo" className="h-25 w-auto object-contain" />
+                            
                         </Link>
 
-                        {/* ── SEARCH ── */}
-                        <div className="flex-1 flex justify-center px-2 lg:px-6">
-                            <GlobalSearch />
-                        </div>
-
                         {/* ── DESKTOP LINKS ── */}
-                        <div
-                            ref={navRef}
-                            className="hidden md:flex items-center gap-1 relative"
-                            onMouseLeave={() => setHovered(null)}
-                        >
-                            {/* sliding pill indicator */}
-                            <span
-                                ref={indicatorRef}
-                                className="absolute bottom-0 h-0.5 bg-brand-primary rounded-full transition-all duration-300 ease-out opacity-0 pointer-events-none"
-                                style={{ left: 0, width: 0 }}
-                            />
-
+                        <div className="hidden md:flex items-center gap-1 flex-1">
                             {navLinks.map((link) => {
                                 const isActive = pathname === link.href;
                                 return (
                                     <Link
                                         key={link.href}
                                         href={link.href}
-                                        data-href={link.href}
-                                        onMouseEnter={() => setHovered(link.href)}
-                                        className={`relative px-4 py-2 rounded-xl text-sm font-semibold transition-colors duration-150 ${
+                                        className={`relative px-3.5 py-2 text-[13px] font-medium rounded-lg transition-all duration-200 ${
                                             isActive
-                                                ? "text-brand-primary"
-                                                : "text-slate-600 dark:text-foreground/60 hover:text-foreground"
+                                                ? "text-[#0EA5E9] bg-[#F0F9FF] dark:bg-sky-900/30"
+                                                : "text-[#64748B] dark:text-slate-400 hover:text-[#0F172A] dark:hover:text-white hover:bg-[#F8FAFC] dark:hover:bg-slate-800/50"
                                         }`}
                                     >
-                                        {/* active dot */}
+                                        {link.name}
                                         {isActive && (
-                                            <span className="absolute top-1.5 right-1.5 w-1.5 h-1.5 rounded-full bg-brand-primary/60" />
+                                            <span className="absolute bottom-1 left-1/2 -translate-x-1/2 h-0.5 w-4 rounded-full bg-[#0EA5E9]" />
                                         )}
-                                        {link.name}
                                     </Link>
                                 );
                             })}
                         </div>
 
+                        {/* ── SPACER (pushes right area flush right on desktop) ── */}
+                        <div className="flex-1 md:hidden" />
+
                         {/* ── USER / AUTH AREA ── */}
                         <div className="hidden md:flex items-center gap-3 shrink-0">
                             {user && <NotificationBell />}
+
                             {user ? (
                                 <div className="relative" ref={userMenuRef}>
                                     <button
                                         onClick={() => setUserMenu(!userMenu)}
-                                        className={`flex items-center gap-2.5 pl-1 pr-3 py-1 rounded-2xl border transition-all duration-200 ${
+                                        className={`flex items-center gap-2 pl-1 pr-3 py-1 rounded-full border transition-all duration-200 cursor-pointer ${
                                             userMenu
-                                                ? "border-brand-primary/30 bg-brand-primary/5 shadow-sm"
-                                                : "border-slate-200 dark:border-border bg-slate-100 dark:bg-foreground/5 hover:border-brand-primary/20 hover:bg-slate-200 dark:bg-foreground/10 hover:shadow-sm"
+                                                ? "border-[#0EA5E9] bg-[#F0F9FF] dark:bg-sky-900/30 shadow-sm"
+                                                : "border-[#E2E8F0] dark:border-slate-700 bg-white dark:bg-[#151E2E] hover:border-[#0EA5E9]/40 hover:bg-[#F8FAFC] dark:hover:bg-slate-800"
                                         }`}
                                     >
                                         {/* avatar */}
-                                        <div className="w-7 h-7 rounded-xl bg-gradient-to-br from-brand-primary to-blue-600 flex items-center justify-center text-white text-xs font-black shadow">
+                                        <div className="w-7 h-7 rounded-full bg-gradient-to-br from-[#0EA5E9] to-[#0D9488] flex items-center justify-center text-[11px] font-bold text-white shrink-0">
                                             {initials}
                                         </div>
                                         <div className="text-left leading-none">
-                                            <p className="text-xs font-bold text-foreground">
+                                            <p className="text-[12px] font-semibold text-[#0F172A] dark:text-white">
                                                 {profile?.name?.split(" ")[0] ?? "User"}
                                             </p>
                                             {meta && (
-                                                <p className={`text-[10px] font-semibold mt-0.5 ${meta.text}`}>{meta.label}</p>
+                                                <p className="text-[10px] text-[#64748B] dark:text-slate-400 mt-0.5">{meta.label}</p>
                                             )}
                                         </div>
-                                        <ChevronDown className={`w-3.5 h-3.5 text-slate-500 dark:text-foreground/40 transition-transform duration-200 ${userMenu ? "rotate-180" : ""}`} />
+                                        <ChevronDown className={`w-3.5 h-3.5 text-[#64748B] dark:text-slate-400 transition-transform duration-200 ${userMenu ? "rotate-180" : ""}`} />
                                     </button>
 
                                     {/* ── DROPDOWN ── */}
                                     {userMenu && (
-                                        <div className="absolute right-0 mt-2 w-56 bg-card border border-slate-200 dark:border-border rounded-2xl shadow-xl shadow-black/10 overflow-hidden animate-in fade-in slide-in-from-top-2 duration-150 z-50">
+                                        <div className="absolute right-0 mt-2 w-60 bg-white dark:bg-[#151E2E] border border-[#E2E8F0] dark:border-slate-700 rounded-2xl shadow-xl shadow-[#0EA5E9]/[0.06] dark:shadow-black/30 overflow-hidden z-50 animate-in fade-in slide-in-from-top-2 duration-200">
                                             {/* header */}
-                                            <div className="px-4 py-3.5 bg-slate-100 dark:bg-foreground/5 border-b border-slate-200 dark:border-border">
+                                            <div className="px-4 py-3.5 bg-gradient-to-br from-[#F0F9FF] to-[#F0FDFA] dark:from-sky-900/20 dark:to-teal-900/20 border-b border-[#E2E8F0] dark:border-slate-700">
                                                 <div className="flex items-center gap-3">
-                                                    <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-brand-primary to-blue-600 flex items-center justify-center text-white text-sm font-black shadow-md shrink-0">
+                                                    <div className="w-9 h-9 rounded-full bg-gradient-to-br from-[#0EA5E9] to-[#0D9488] flex items-center justify-center text-sm font-bold text-white shrink-0">
                                                         {initials}
                                                     </div>
                                                     <div className="min-w-0">
-                                                        <p className="text-sm font-bold text-foreground truncate">{profile?.name ?? "User"}</p>
-                                                        <p className="text-xs text-slate-500 dark:text-foreground/40 truncate">{user.email}</p>
+                                                        <p className="text-[12px] font-semibold text-[#0F172A] dark:text-white truncate">{profile?.name ?? "User"}</p>
+                                                        <p className="text-[10px] text-[#64748B] dark:text-slate-400 truncate">{user.email}</p>
                                                     </div>
                                                 </div>
                                                 {meta && (
-                                                    <span className={`inline-flex items-center gap-1.5 mt-3 px-2.5 py-1 rounded-full text-[10px] font-black border ${meta.badge} ${meta.text}`}>
-                                                        <span className={`w-1.5 h-1.5 rounded-full ${meta.dot}`} />
+                                                    <span className="inline-flex items-center gap-1.5 mt-2.5 px-2.5 py-0.5 text-[10px] font-semibold bg-[#CCFBF1] dark:bg-teal-900/40 text-[#0D9488] dark:text-teal-400 rounded-full">
                                                         {meta.label}
                                                     </span>
                                                 )}
                                             </div>
 
-                                            <div className="p-2">
+                                            {/* menu items */}
+                                            <div className="p-1.5 space-y-0.5">
                                                 <Link
                                                     href="/profile"
                                                     onClick={() => setUserMenu(false)}
-                                                    className="flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-semibold text-slate-600 dark:text-foreground/60 hover:text-foreground hover:bg-slate-100 dark:bg-foreground/5 transition-all group"
+                                                    className="flex items-center gap-3 px-3 py-2.5 text-[12px] font-medium text-[#0F172A] dark:text-slate-200 hover:bg-[#F0F9FF] dark:hover:bg-sky-900/20 rounded-xl transition-colors group"
                                                 >
-                                                    <span className="w-7 h-7 rounded-lg bg-slate-100 dark:bg-foreground/5 group-hover:bg-brand-primary/10 flex items-center justify-center transition-colors">
-                                                        <User className="w-3.5 h-3.5 text-slate-500 dark:text-foreground/40 group-hover:text-brand-primary transition-colors" />
-                                                    </span>
+                                                    <User className="w-4 h-4 text-[#64748B] dark:text-slate-400 group-hover:text-[#0EA5E9]" />
                                                     My Profile
                                                 </Link>
                                                 <Link
                                                     href="/notifications"
                                                     onClick={() => setUserMenu(false)}
-                                                    className="flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-semibold text-slate-600 dark:text-foreground/60 hover:text-foreground hover:bg-slate-100 dark:bg-foreground/5 transition-all group"
+                                                    className="flex items-center gap-3 px-3 py-2.5 text-[12px] font-medium text-[#0F172A] dark:text-slate-200 hover:bg-[#F0F9FF] dark:hover:bg-sky-900/20 rounded-xl transition-colors group"
                                                 >
-                                                    <span className="w-7 h-7 rounded-lg bg-slate-100 dark:bg-foreground/5 group-hover:bg-brand-primary/10 flex items-center justify-center transition-colors">
-                                                        <Bell className="w-3.5 h-3.5 text-slate-500 dark:text-foreground/40 group-hover:text-brand-primary transition-colors" />
-                                                    </span>
+                                                    <Bell className="w-4 h-4 text-[#64748B] dark:text-slate-400 group-hover:text-[#0EA5E9]" />
                                                     Notifications
                                                 </Link>
+                                                <div className="my-1 mx-3 h-px bg-[#E2E8F0] dark:bg-slate-700" />
                                                 <button
                                                     onClick={() => { signOut(); setUserMenu(false); }}
-                                                    className="w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-semibold text-red-500 hover:text-red-600 hover:bg-red-500/10 transition-all group"
+                                                    className="w-full flex items-center gap-3 px-3 py-2.5 text-[12px] font-medium text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-xl transition-colors cursor-pointer"
                                                 >
-                                                    <span className="w-7 h-7 rounded-lg bg-red-500/10 group-hover:bg-red-500/20 flex items-center justify-center transition-colors">
-                                                        <LogOut className="w-3.5 h-3.5 text-red-500" />
-                                                    </span>
+                                                    <LogOut className="w-4 h-4" />
                                                     Sign Out
                                                 </button>
                                             </div>
@@ -258,66 +230,65 @@ export default function Navbar() {
                                     )}
                                 </div>
                             ) : (
-                                <div className="flex items-center gap-2">
+                                <div className="flex items-center gap-2.5">
                                     <Link
                                         href="/register"
-                                        className="text-sm font-semibold text-slate-600 dark:text-foreground/60 hover:text-foreground px-4 py-2 rounded-xl hover:bg-slate-100 dark:bg-foreground/5 transition-all"
+                                        className="text-[13px] font-medium text-[#64748B] dark:text-slate-400 hover:text-[#0F172A] dark:hover:text-white border border-[#E2E8F0] dark:border-slate-700 px-4 py-2 rounded-full hover:border-[#0EA5E9]/40 hover:bg-[#F8FAFC] dark:hover:bg-slate-800 transition-all"
                                     >
                                         Register
                                     </Link>
                                     <Link
                                         href="/login"
-                                        className="inline-flex items-center gap-1.5 px-6 py-2.5 text-xs font-black uppercase tracking-wider text-white rounded-full bg-brand-primary hover:bg-brand-secondary shadow-lg shadow-brand-primary/20 hover:shadow-brand-primary/30 transition-all duration-300 active:scale-95 group"
+                                        className="inline-flex items-center gap-1.5 px-5 py-2 text-[13px] font-semibold text-white bg-gradient-to-r from-[#0EA5E9] to-[#0D9488] rounded-full shadow-sm shadow-[#0EA5E9]/20 hover:shadow-md hover:shadow-[#0EA5E9]/30 hover:-translate-y-0.5 transition-all duration-200"
                                     >
-                                        <Sparkles className="w-3.5 h-3.5" />
                                         Sign In
                                     </Link>
                                 </div>
                             )}
-                            <div className="w-px h-6 bg-border mx-1" />
+
                             <ThemeToggle />
                         </div>
 
                         {/* ── HAMBURGER ── */}
                         <button
                             onClick={() => setIsOpen(!isOpen)}
-                            className="md:hidden relative w-9 h-9 flex flex-col items-center justify-center gap-[5px] rounded-xl border border-slate-200 dark:border-border bg-slate-100 dark:bg-foreground/5 hover:bg-slate-200 dark:bg-foreground/10 transition-all"
+                            className="md:hidden flex items-center justify-center w-9 h-9 rounded-xl border border-[#E2E8F0] dark:border-slate-700 bg-white dark:bg-[#151E2E] hover:bg-[#F0F9FF] dark:hover:bg-slate-800 hover:border-[#0EA5E9]/40 transition-all"
                             aria-label="Toggle menu"
                         >
-                            <span className={`block h-0.5 bg-foreground rounded-full transition-all duration-300 origin-center ${isOpen ? "w-5 rotate-45 translate-y-[7px]" : "w-5"}`} />
-                            <span className={`block h-0.5 bg-foreground rounded-full transition-all duration-300 ${isOpen ? "w-0 opacity-0" : "w-4"}`} />
-                            <span className={`block h-0.5 bg-foreground rounded-full transition-all duration-300 origin-center ${isOpen ? "w-5 -rotate-45 -translate-y-[7px]" : "w-5"}`} />
+                            {isOpen
+                                ? <X className="w-4.5 h-4.5 text-[#0F172A] dark:text-white" />
+                                : <Menu className="w-4.5 h-4.5 text-[#0F172A] dark:text-white" />
+                            }
                         </button>
                     </div>
                 </div>
             </nav>
 
-            {/* ════════════════════ MOBILE DRAWER ════════════════════ */}
+            {/* ════════════════ MOBILE DRAWER ════════════════ */}
             <div className={`md:hidden fixed inset-0 z-40 transition-all duration-300 ${isOpen ? "visible" : "invisible"}`}>
                 {/* backdrop */}
                 <div
-                    className={`absolute inset-0 bg-black/20 backdrop-blur-sm transition-opacity duration-300 ${isOpen ? "opacity-100" : "opacity-0"}`}
+                    className={`absolute inset-0 bg-[#0F172A]/20 backdrop-blur-sm transition-opacity duration-300 ${isOpen ? "opacity-100" : "opacity-0"}`}
                     onClick={() => setIsOpen(false)}
                 />
 
                 {/* panel */}
-                <div className={`absolute top-16 left-3 right-3 bg-background border border-slate-200 dark:border-white/10 rounded-2xl shadow-2xl shadow-black/40 overflow-hidden transition-all duration-300 ${
-                    isOpen ? "translate-y-0 opacity-100 scale-100" : "-translate-y-3 opacity-0 scale-95"
+                <div className={`absolute top-16 left-0 right-0 bottom-0 bg-white dark:bg-[#0B111E] overflow-y-auto transition-all duration-300 shadow-xl dark:shadow-black/40 ${
+                    isOpen ? "translate-y-0 opacity-100" : "-translate-y-2 opacity-0"
                 }`}>
 
                     {/* user strip */}
                     {user && (
-                        <div className="flex items-center gap-3 px-5 py-4 bg-slate-50 dark:bg-white/5 border-b border-slate-200 dark:border-white/10">
-                            <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-brand-primary to-blue-600 flex items-center justify-center text-white font-black shadow-md shrink-0">
+                        <div className="flex items-center gap-3 px-5 py-4 border-b border-[#E2E8F0] dark:border-slate-700 bg-gradient-to-r from-[#F0F9FF] to-[#F0FDFA] dark:from-sky-900/20 dark:to-teal-900/20">
+                            <div className="w-10 h-10 rounded-full bg-gradient-to-br from-[#0EA5E9] to-[#0D9488] flex items-center justify-center font-bold text-white text-sm shrink-0">
                                 {initials}
                             </div>
                             <div className="min-w-0">
-                                <p className="text-sm font-bold text-foreground truncate">{profile?.name ?? "User"}</p>
-                                <p className="text-xs text-slate-500 dark:text-foreground/40 truncate">{user.email}</p>
+                                <p className="text-[13px] font-semibold text-[#0F172A] dark:text-white truncate">{profile?.name ?? "User"}</p>
+                                <p className="text-[11px] text-[#64748B] dark:text-slate-400 truncate">{user.email}</p>
                             </div>
                             {meta && (
-                                <span className={`ml-auto shrink-0 flex items-center gap-1 px-2.5 py-1 rounded-full text-[10px] font-black border ${meta.badge} ${meta.text}`}>
-                                    <span className={`w-1.5 h-1.5 rounded-full ${meta.dot}`} />
+                                <span className="ml-auto shrink-0 px-2.5 py-0.5 text-[10px] font-semibold bg-[#CCFBF1] dark:bg-teal-900/40 text-[#0D9488] dark:text-teal-400 rounded-full">
                                     {meta.label}
                                 </span>
                             )}
@@ -325,23 +296,22 @@ export default function Navbar() {
                     )}
 
                     {/* nav links */}
-                    <div className="p-3 space-y-0.5">
-                        {navLinks.map((link, i) => {
+                    <div className="px-3 py-3 space-y-1 border-b border-[#E2E8F0] dark:border-slate-700">
+                        {navLinks.map((link) => {
                             const isActive = pathname === link.href;
                             return (
                                 <Link
                                     key={link.href}
                                     href={link.href}
                                     onClick={() => setIsOpen(false)}
-                                    className={`nav-item-enter flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-semibold transition-all ${
+                                    className={`flex items-center gap-3 px-4 py-3 text-[13px] font-medium rounded-xl transition-all ${
                                         isActive
-                                            ? "bg-brand-primary/10 text-brand-primary"
-                                            : "text-slate-600 dark:text-foreground/60 hover:text-foreground hover:bg-slate-50 dark:bg-white/5"
+                                            ? "bg-[#F0F9FF] dark:bg-sky-900/20 text-[#0EA5E9]"
+                                            : "text-[#0F172A] dark:text-slate-300 hover:bg-[#F8FAFC] dark:hover:bg-slate-800/50"
                                     }`}
-                                    style={{ animationDelay: `${i * 40}ms` }}
                                 >
                                     {isActive && (
-                                        <span className="w-1.5 h-1.5 rounded-full bg-brand-primary shrink-0" />
+                                        <span className="w-1.5 h-1.5 rounded-full bg-[#0EA5E9] shrink-0" />
                                     )}
                                     {link.name}
                                 </Link>
@@ -349,48 +319,47 @@ export default function Navbar() {
                         })}
                     </div>
 
-                    {/* auth actions */}
-                    <div className="px-3 pb-3 border-t border-slate-100 pt-3 space-y-1.5">
+                    {/* account actions */}
+                    <div className="px-3 py-3 space-y-2">
                         {user ? (
                             <>
                                 <Link
                                     href="/profile"
                                     onClick={() => setIsOpen(false)}
-                                    className="flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-semibold text-slate-600 dark:text-foreground/60 hover:text-foreground hover:bg-slate-50 dark:bg-white/5 transition-all"
+                                    className="flex items-center gap-3 px-4 py-3 text-[13px] font-medium text-[#0F172A] dark:text-slate-300 hover:bg-[#F8FAFC] dark:hover:bg-slate-800/50 rounded-xl transition-colors"
                                 >
-                                    <User className="w-4 h-4 text-slate-500 dark:text-foreground/40" />
+                                    <User className="w-4 h-4 text-[#64748B] dark:text-slate-400" />
                                     My Profile
-                                                                </Link>
-                                                                <Link
-                                                                    href="/notifications"
-                                                                    onClick={() => setIsOpen(false)}
-                                                                    className="flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-semibold text-slate-600 dark:text-foreground/60 hover:text-foreground hover:bg-slate-50 dark:bg-white/5 transition-all"
-                                                                >
-                                                                    <Bell className="w-4 h-4 text-slate-500 dark:text-foreground/40" />
-                                                                    Notifications
-                                                                </Link>
+                                </Link>
+                                <Link
+                                    href="/notifications"
+                                    onClick={() => setIsOpen(false)}
+                                    className="flex items-center gap-3 px-4 py-3 text-[13px] font-medium text-[#0F172A] dark:text-slate-300 hover:bg-[#F8FAFC] dark:hover:bg-slate-800/50 rounded-xl transition-colors"
+                                >
+                                    <Bell className="w-4 h-4 text-[#64748B] dark:text-slate-400" />
+                                    Notifications
+                                </Link>
                                 <button
                                     onClick={() => { signOut(); setIsOpen(false); }}
-                                    className="w-full flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-bold text-red-500 hover:bg-red-50 transition-all"
+                                    className="w-full flex items-center gap-3 px-4 py-3 text-[13px] font-medium text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-xl transition-colors cursor-pointer"
                                 >
                                     <LogOut className="w-4 h-4" />
                                     Sign Out
                                 </button>
                             </>
                         ) : (
-                            <div className="space-y-2">
+                            <div className="space-y-2 px-1 pt-2">
                                 <Link
                                     href="/login"
                                     onClick={() => setIsOpen(false)}
-                                    className="w-full flex items-center justify-center gap-2 py-3 rounded-full text-sm font-bold text-white bg-brand-primary shadow-lg shadow-brand-primary/20 active:scale-95 transition-all"
+                                    className="w-full flex items-center justify-center py-3 text-[13px] font-semibold text-white bg-gradient-to-r from-[#0EA5E9] to-[#0D9488] rounded-xl shadow-sm transition-all hover:opacity-90"
                                 >
-                                    <Sparkles className="w-4 h-4" />
                                     Sign In
                                 </Link>
                                 <Link
                                     href="/register"
                                     onClick={() => setIsOpen(false)}
-                                    className="w-full flex items-center justify-center py-3 rounded-full text-sm font-bold text-slate-600 dark:text-foreground/60 border border-slate-200 dark:border-white/10 hover:bg-slate-50 dark:bg-white/5 transition-all"
+                                    className="w-full flex items-center justify-center py-3 text-[13px] font-medium text-[#0F172A] dark:text-slate-300 border border-[#E2E8F0] dark:border-slate-700 rounded-xl hover:bg-[#F8FAFC] dark:hover:bg-slate-800 transition-all"
                                 >
                                     Create Account
                                 </Link>
diff --git a/components/NewBookingModal.tsx b/components/NewBookingModal.tsx
index f96632c..c0e7701 100644
--- a/components/NewBookingModal.tsx
+++ b/components/NewBookingModal.tsx
@@ -115,10 +115,10 @@ export default function NewBookingModal({ isOpen, onClose, onSuccess }: NewBooki
     return (
         <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
             {/* Backdrop */}
-            <div className="absolute inset-0 bg-black/40 backdrop-blur-sm" onClick={onClose} />
+            <div className="absolute inset-0 bg-black/40 " onClick={onClose} />
 
             {/* Modal */}
-            <div className="relative w-full max-w-lg bg-white dark:bg-slate-900 rounded-3xl shadow-2xl border border-slate-100 dark:border-slate-800 overflow-hidden animate-in fade-in zoom-in-95">
+            <div className="relative w-full max-w-lg bg-white dark:bg-slate-900 rounded-none border-2 border-foreground shadow-[4px_4px_0_0_rgba(0,0,0,1)] dark:shadow-[4px_4px_0_0_rgba(255,255,255,0.2)] border border-slate-100 dark:border-slate-800 overflow-hidden animate-in fade-in zoom-in-95">
                 {/* Header */}
                 <div className="flex items-center justify-between px-6 py-5 border-b border-slate-100 dark:border-slate-800">
                     <div>
@@ -127,7 +127,7 @@ export default function NewBookingModal({ isOpen, onClose, onSuccess }: NewBooki
                     </div>
                     <button
                         onClick={onClose}
-                        className="p-2 hover:bg-slate-100 dark:hover:bg-white/5 rounded-xl transition-colors text-slate-400 dark:text-foreground/45 hover:text-slate-600 dark:hover:text-foreground"
+                        className="p-2 hover:bg-slate-100 dark:hover:bg-white/5 rounded-none transition-colors text-slate-400 dark:text-foreground/45 hover:text-slate-600 dark:hover:text-foreground"
                     >
                         <X className="w-5 h-5" />
                     </button>
@@ -136,7 +136,7 @@ export default function NewBookingModal({ isOpen, onClose, onSuccess }: NewBooki
                 {/* Form */}
                 <form onSubmit={handleSubmit} className="p-6 space-y-5">
                     {error && (
-                        <div className="flex items-center gap-3 p-4 bg-rose-50 dark:bg-rose-500/10 border border-rose-100 dark:border-rose-500/20 rounded-2xl text-rose-600 dark:text-rose-400 text-xs font-semibold">
+                        <div className="flex items-center gap-3 p-4 bg-rose-50 dark:bg-rose-500/10 border border-rose-100 dark:border-rose-500/20 rounded-none text-rose-600 dark:text-rose-400 text-xs font-semibold">
                             <AlertTriangle className="w-4 h-4 shrink-0" />
                             <p>{error}</p>
                         </div>
@@ -155,7 +155,7 @@ export default function NewBookingModal({ isOpen, onClose, onSuccess }: NewBooki
                                 onChange={handleChange}
                                 required
                                 disabled={loadingResources}
-                                className="w-full pl-11 pr-4 py-3 bg-slate-50 dark:bg-slate-950/40 border border-slate-200 dark:border-slate-800 rounded-2xl text-sm font-semibold text-foreground focus:outline-none focus:ring-4 focus:ring-brand-primary/10 transition-all appearance-none"
+                                className="w-full pl-11 pr-4 py-3 bg-slate-50 dark:bg-slate-950/40 border border-slate-200 dark:border-slate-800 rounded-none text-sm font-semibold text-foreground focus:outline-none focus:ring-4 focus:ring-brand-primary/10 transition-all appearance-none"
                             >
                                 <option value="" className="dark:bg-slate-900">
                                     {loadingResources ? "Loading resources..." : "Select Resource"}
@@ -181,7 +181,7 @@ export default function NewBookingModal({ isOpen, onClose, onSuccess }: NewBooki
                                 value={formData.faculty}
                                 onChange={handleChange}
                                 required
-                                className="w-full pl-11 pr-4 py-3 bg-slate-50 dark:bg-slate-950/40 border border-slate-200 dark:border-slate-800 rounded-2xl text-sm font-semibold text-foreground focus:outline-none focus:ring-4 focus:ring-brand-primary/10 transition-all appearance-none"
+                                className="w-full pl-11 pr-4 py-3 bg-slate-50 dark:bg-slate-950/40 border border-slate-200 dark:border-slate-800 rounded-none text-sm font-semibold text-foreground focus:outline-none focus:ring-4 focus:ring-brand-primary/10 transition-all appearance-none"
                             >
                                 <option value="" className="dark:bg-slate-900">Select Faculty</option>
                                 <option value="Engineering" className="dark:bg-slate-900">Engineering</option>
@@ -207,7 +207,7 @@ export default function NewBookingModal({ isOpen, onClose, onSuccess }: NewBooki
                                 value={formData.date}
                                 onChange={handleChange}
                                 required
-                                className="w-full pl-11 pr-4 py-3 bg-slate-50 dark:bg-slate-950/40 border border-slate-200 dark:border-slate-800 rounded-2xl text-sm font-semibold text-foreground focus:outline-none focus:ring-4 focus:ring-brand-primary/10 transition-all"
+                                className="w-full pl-11 pr-4 py-3 bg-slate-50 dark:bg-slate-950/40 border border-slate-200 dark:border-slate-800 rounded-none text-sm font-semibold text-foreground focus:outline-none focus:ring-4 focus:ring-brand-primary/10 transition-all"
                             />
                         </div>
                     </div>
@@ -226,7 +226,7 @@ export default function NewBookingModal({ isOpen, onClose, onSuccess }: NewBooki
                                     value={formData.startTime}
                                     onChange={handleChange}
                                     required
-                                    className="w-full pl-11 pr-4 py-3 bg-slate-50 dark:bg-slate-950/40 border border-slate-200 dark:border-slate-800 rounded-2xl text-sm font-semibold text-foreground focus:outline-none focus:ring-4 focus:ring-brand-primary/10 transition-all"
+                                    className="w-full pl-11 pr-4 py-3 bg-slate-50 dark:bg-slate-950/40 border border-slate-200 dark:border-slate-800 rounded-none text-sm font-semibold text-foreground focus:outline-none focus:ring-4 focus:ring-brand-primary/10 transition-all"
                                 />
                             </div>
                         </div>
@@ -242,7 +242,7 @@ export default function NewBookingModal({ isOpen, onClose, onSuccess }: NewBooki
                                     value={formData.endTime}
                                     onChange={handleChange}
                                     required
-                                    className="w-full pl-11 pr-4 py-3 bg-slate-50 dark:bg-slate-950/40 border border-slate-200 dark:border-slate-800 rounded-2xl text-sm font-semibold text-foreground focus:outline-none focus:ring-4 focus:ring-brand-primary/10 transition-all"
+                                    className="w-full pl-11 pr-4 py-3 bg-slate-50 dark:bg-slate-950/40 border border-slate-200 dark:border-slate-800 rounded-none text-sm font-semibold text-foreground focus:outline-none focus:ring-4 focus:ring-brand-primary/10 transition-all"
                                 />
                             </div>
                         </div>
@@ -259,7 +259,7 @@ export default function NewBookingModal({ isOpen, onClose, onSuccess }: NewBooki
                             onChange={handleChange}
                             rows={3}
                             placeholder="Brief description of the booking purpose..."
-                            className="w-full px-4 py-3 bg-slate-50 dark:bg-slate-950/40 border border-slate-200 dark:border-slate-800 rounded-2xl text-sm font-semibold text-foreground placeholder-slate-400 dark:placeholder-foreground/30 focus:outline-none focus:ring-4 focus:ring-brand-primary/10 transition-all resize-none"
+                            className="w-full px-4 py-3 bg-slate-50 dark:bg-slate-950/40 border border-slate-200 dark:border-slate-800 rounded-none text-sm font-semibold text-foreground placeholder-slate-400 dark:placeholder-foreground/30 focus:outline-none focus:ring-4 focus:ring-brand-primary/10 transition-all resize-none"
                         />
                     </div>
 
@@ -268,14 +268,14 @@ export default function NewBookingModal({ isOpen, onClose, onSuccess }: NewBooki
                         <button
                             type="button"
                             onClick={onClose}
-                            className="px-5 py-3 border border-slate-200 dark:border-white/10 rounded-2xl text-sm font-bold text-slate-600 dark:text-foreground/60 hover:bg-slate-50 dark:hover:bg-white/5 transition-colors"
+                            className="px-5 py-3 border border-slate-200 dark:border-white/10 rounded-none text-sm font-bold text-slate-600 dark:text-foreground/60 hover:bg-slate-50 dark:hover:bg-white/5 transition-colors"
                         >
                             Cancel
                         </button>
                         <button
                             type="submit"
                             disabled={isSubmitting}
-                            className="inline-flex items-center gap-2 bg-brand-primary text-white font-bold px-6 py-3 rounded-2xl hover:bg-brand-secondary transition-all shadow-lg active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed"
+                            className="inline-flex items-center gap-2 bg-brand-primary text-white font-bold px-6 py-3 rounded-none hover:bg-brand-secondary transition-all border-2 border-foreground shadow-[4px_4px_0_0_rgba(0,0,0,1)] dark:shadow-[4px_4px_0_0_rgba(255,255,255,0.2)] active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed"
                         >
                             {isSubmitting ? "Booking..." : "Confirm Booking"}
                         </button>
diff --git a/components/NotificationBell.tsx b/components/NotificationBell.tsx
index f2e345e..ffa9ded 100644
--- a/components/NotificationBell.tsx
+++ b/components/NotificationBell.tsx
@@ -171,20 +171,20 @@ export default function NotificationBell() {
         <div className="relative" ref={dropdownRef}>
             <button
                 onClick={() => setIsOpen(!isOpen)}
-                className="relative p-2 rounded-xl text-slate-500 dark:text-foreground/60 hover:bg-slate-100 dark:hover:bg-foreground/5 hover:text-foreground transition-colors"
+                className="relative flex items-center justify-center w-10 h-10 rounded-xl bg-white dark:bg-[#0F172A] border border-[#E2E8F0] dark:border-slate-800 shadow-sm hover:shadow-md hover:border-[#0EA5E9]/40 hover:bg-[#F0F9FF] dark:hover:bg-slate-800 transition-all duration-300 group"
                 aria-label="Notifications"
             >
-                <Bell className="w-5 h-5" />
+                <Bell className="w-5 h-5 text-[#64748B] group-hover:text-[#0EA5E9] transition-colors" />
                 {unreadCount > 0 && (
-                    <span className="absolute top-1.5 right-1.5 flex h-2 w-2">
+                    <span className="absolute top-2 right-2.5 flex h-2.5 w-2.5">
                         <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
-                        <span className="relative inline-flex rounded-full h-2 w-2 bg-red-500"></span>
+                        <span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-red-500 border-2 border-white dark:border-[#0F172A]"></span>
                     </span>
                 )}
             </button>
 
             {isOpen && (
-                <div className="absolute right-0 mt-2 w-80 sm:w-96 bg-card border border-slate-200 dark:border-border rounded-2xl shadow-xl shadow-black/10 overflow-hidden animate-in fade-in slide-in-from-top-2 duration-200 z-50 flex flex-col max-h-[85vh]">
+                <div className="absolute right-0 mt-2 w-80 sm:w-96 bg-card border border-slate-200 dark:border-border rounded-none border-2 border-foreground shadow-[4px_4px_0_0_rgba(0,0,0,1)] dark:shadow-[4px_4px_0_0_rgba(255,255,255,0.2)] shadow-black/10 overflow-hidden animate-in fade-in slide-in- duration-200 z-50 flex flex-col max-h-[85vh]">
                     {/* Header */}
                     <div className="px-4 py-3 border-b border-slate-200 dark:border-border flex items-center justify-between bg-slate-50 dark:bg-foreground/5">
                         <h3 className="font-bold text-foreground">Notifications</h3>
@@ -215,7 +215,7 @@ export default function NotificationBell() {
                                         className={`p-4 transition-colors relative group flex gap-3 ${getBgColor(notification.type, notification.read)}`}
                                     >
                                         {!notification.read && (
-                                            <span className="absolute top-4 left-1.5 w-1.5 h-1.5 rounded-full bg-brand-primary" />
+                                            <span className="absolute top-4 left-1.5 w-1.5 h-1.5 rounded-none bg-brand-primary" />
                                         )}
                                         
                                         <div className="shrink-0 mt-0.5">
diff --git a/components/PageLoader.tsx b/components/PageLoader.tsx
new file mode 100644
index 0000000..22e1e11
--- /dev/null
+++ b/components/PageLoader.tsx
@@ -0,0 +1,180 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+
+/**
+ * PageLoader — Full-screen branded loading animation for UniLink URMS.
+ * Shows on first mount, fades out after the site hydrates.
+ */
+export default function PageLoader() {
+  const [visible, setVisible] = useState(true);
+  const [fadeOut, setFadeOut] = useState(false);
+
+  useEffect(() => {
+    // Give the page a moment to hydrate, then fade out
+    const fadeTimer = setTimeout(() => setFadeOut(true), 1800);
+    const hideTimer = setTimeout(() => setVisible(false), 2400);
+
+    return () => {
+      clearTimeout(fadeTimer);
+      clearTimeout(hideTimer);
+    };
+  }, []);
+
+  if (!visible) return null;
+
+  return (
+    <div
+      className={`fixed inset-0 z-[9999] flex flex-col items-center justify-center bg-[#F8FAFC] transition-all duration-600 ${
+        fadeOut ? "opacity-0 scale-105 pointer-events-none" : "opacity-100 scale-100"
+      }`}
+      style={{ transitionDuration: "600ms" }}
+      aria-label="Loading UniLink URMS"
+      role="status"
+    >
+      {/* Ambient gradient blobs */}
+      <div className="absolute inset-0 overflow-hidden pointer-events-none">
+        <div
+          className="absolute -top-32 -left-32 w-[600px] h-[600px] rounded-full opacity-20"
+          style={{
+            background:
+              "radial-gradient(circle, #0EA5E9 0%, transparent 70%)",
+            animation: "pulse-slow 4s ease-in-out infinite",
+          }}
+        />
+        <div
+          className="absolute -bottom-32 -right-32 w-[500px] h-[500px] rounded-full opacity-15"
+          style={{
+            background:
+              "radial-gradient(circle, #0D9488 0%, transparent 70%)",
+            animation: "pulse-slow 4s ease-in-out infinite 1s",
+          }}
+        />
+        <div
+          className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] rounded-full opacity-5"
+          style={{
+            background:
+              "radial-gradient(circle, #0EA5E9 0%, #0D9488 50%, transparent 70%)",
+          }}
+        />
+      </div>
+
+      {/* Grid texture overlay */}
+      <div
+        className="absolute inset-0 opacity-[0.025]"
+        style={{
+          backgroundImage:
+            "linear-gradient(#0EA5E9 1px, transparent 1px), linear-gradient(90deg, #0EA5E9 1px, transparent 1px)",
+          backgroundSize: "48px 48px",
+        }}
+      />
+
+      {/* Main content card */}
+      <div className="relative flex flex-col items-center gap-8">
+        {/* Spinning ring behind logo */}
+        <div className="relative flex items-center justify-center">
+          {/* Outer slow ring */}
+          <div
+            className="absolute w-36 h-36 rounded-full border-2 border-transparent"
+            style={{
+              background:
+                "linear-gradient(white, white) padding-box, linear-gradient(135deg, #0EA5E9, #0D9488, #0EA5E9) border-box",
+              animation: "spin-slow 3s linear infinite",
+            }}
+          />
+          {/* Inner fast ring */}
+          <div
+            className="absolute w-28 h-28 rounded-full border-2 border-transparent"
+            style={{
+              background:
+                "linear-gradient(white, white) padding-box, linear-gradient(225deg, #0D9488, #0EA5E9, #0D9488) border-box",
+              animation: "spin-slow 1.5s linear infinite reverse",
+            }}
+          />
+          {/* Corner dots on outer ring */}
+          <div className="absolute w-36 h-36" style={{ animation: "spin-slow 3s linear infinite" }}>
+            <span className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1 w-2 h-2 rounded-full bg-[#0EA5E9] shadow-lg shadow-sky-400/60" />
+            <span className="absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-1 w-2 h-2 rounded-full bg-[#0D9488] shadow-lg shadow-teal-400/60" />
+          </div>
+
+          {/* Logo circle */}
+          <div className="relative z-10 w-20 h-20 rounded-full bg-white shadow-xl shadow-sky-200/60 flex items-center justify-center border border-[#E2E8F0]">
+            <img
+              src="/logo1.png"
+              alt="UniLink Logo"
+              className="w-14 h-14 object-contain"
+              style={{ animation: "logo-breathe 2s ease-in-out infinite" }}
+            />
+          </div>
+        </div>
+
+        {/* Brand name */}
+        <div className="flex flex-col items-center gap-1" style={{ animation: "fade-in-up 0.6s ease 0.2s both" }}>
+          <h1 className="text-2xl font-extrabold tracking-tight text-[#0F172A] leading-none">
+            Uni<span className="text-[#0EA5E9]">Link</span>
+          </h1>
+          <p className="text-[10px] font-bold uppercase tracking-[0.35em] text-[#0D9488]">
+            Resource Management
+          </p>
+        </div>
+
+        {/* Progress bar */}
+        <div
+          className="w-48 h-1 rounded-full bg-[#E2E8F0] overflow-hidden"
+          style={{ animation: "fade-in-up 0.6s ease 0.4s both" }}
+        >
+          <div
+            className="h-full rounded-full"
+            style={{
+              background: "linear-gradient(90deg, #0EA5E9, #0D9488)",
+              animation: "progress-fill 1.6s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards",
+              width: "0%",
+            }}
+          />
+        </div>
+
+        {/* Loading dots */}
+        <div className="flex items-center gap-1.5" style={{ animation: "fade-in-up 0.6s ease 0.6s both" }}>
+          {[0, 1, 2].map((i) => (
+            <span
+              key={i}
+              className="w-1.5 h-1.5 rounded-full bg-[#0EA5E9]"
+              style={{
+                animation: `dot-bounce 1.2s ease-in-out ${i * 0.2}s infinite`,
+                opacity: 0.4,
+              }}
+            />
+          ))}
+        </div>
+      </div>
+
+      {/* Keyframe styles */}
+      <style>{`
+        @keyframes spin-slow {
+          from { transform: rotate(0deg); }
+          to   { transform: rotate(360deg); }
+        }
+        @keyframes logo-breathe {
+          0%, 100% { transform: scale(1); }
+          50%       { transform: scale(1.07); }
+        }
+        @keyframes dot-bounce {
+          0%, 80%, 100% { transform: translateY(0);   opacity: 0.4; }
+          40%            { transform: translateY(-6px); opacity: 1;   }
+        }
+        @keyframes progress-fill {
+          from { width: 0%; }
+          to   { width: 100%; }
+        }
+        @keyframes fade-in-up {
+          from { opacity: 0; transform: translateY(12px); }
+          to   { opacity: 1; transform: translateY(0); }
+        }
+        @keyframes pulse-slow {
+          0%, 100% { transform: scale(1);    opacity: 0.2; }
+          50%       { transform: scale(1.08); opacity: 0.3; }
+        }
+      `}</style>
+    </div>
+  );
+}
diff --git a/components/Pagination.tsx b/components/Pagination.tsx
index 328ff4d..79ba1b6 100644
--- a/components/Pagination.tsx
+++ b/components/Pagination.tsx
@@ -42,7 +42,7 @@ export default function Pagination({
             id="pageSize-select"
             value={pageSize}
             onChange={(e) => onPageSizeChange(Number(e.target.value))}
-            className="text-xs font-semibold bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-xl px-2.5 py-1.5 focus:outline-none focus:ring-2 focus:ring-blue-500/20 text-slate-700 dark:text-foreground/80 cursor-pointer"
+            className="text-xs font-semibold bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-none px-2.5 py-1.5 focus:outline-none focus:ring-2 focus:ring-blue-500/20 text-slate-700 dark:text-foreground/80 cursor-pointer"
           >
             {sizes.map((size) => (
               <option key={size} value={size} className="bg-white dark:bg-slate-900 text-slate-900 dark:text-white">
@@ -57,7 +57,7 @@ export default function Pagination({
           <button
             onClick={() => onPageChange(currentPage - 1)}
             disabled={currentPage <= 1}
-            className="p-1.5 rounded-xl border border-slate-200 dark:border-white/10 bg-white dark:bg-white/5 text-slate-500 dark:text-foreground/50 hover:bg-slate-50 dark:hover:bg-white/10 disabled:opacity-40 disabled:hover:bg-white dark:disabled:hover:bg-white/5 active:scale-95 transition-all"
+            className="p-1.5 rounded-none border border-slate-200 dark:border-white/10 bg-white dark:bg-white/5 text-slate-500 dark:text-foreground/50 hover:bg-slate-50 dark:hover:bg-white/10 disabled:opacity-40 disabled:hover:bg-white dark:disabled:hover:bg-white/5 active:scale-95 transition-all"
             title="Previous Page"
           >
             <ChevronLeft className="w-4 h-4" />
@@ -70,7 +70,7 @@ export default function Pagination({
           <button
             onClick={() => onPageChange(currentPage + 1)}
             disabled={currentPage >= totalPages}
-            className="p-1.5 rounded-xl border border-slate-200 dark:border-white/10 bg-white dark:bg-white/5 text-slate-500 dark:text-foreground/50 hover:bg-slate-50 dark:hover:bg-white/10 disabled:opacity-40 disabled:hover:bg-white dark:disabled:hover:bg-white/5 active:scale-95 transition-all"
+            className="p-1.5 rounded-none border border-slate-200 dark:border-white/10 bg-white dark:bg-white/5 text-slate-500 dark:text-foreground/50 hover:bg-slate-50 dark:hover:bg-white/10 disabled:opacity-40 disabled:hover:bg-white dark:disabled:hover:bg-white/5 active:scale-95 transition-all"
             title="Next Page"
           >
             <ChevronRight className="w-4 h-4" />
diff --git a/components/ProtectedRoute.tsx b/components/ProtectedRoute.tsx
index aed6c9a..69ce1c7 100644
--- a/components/ProtectedRoute.tsx
+++ b/components/ProtectedRoute.tsx
@@ -4,6 +4,7 @@ import { useEffect } from "react";
 import { useRouter } from "next/navigation";
 import { useAuth } from "@/lib/auth-context";
 import SessionProvider from "./SessionProvider";
+import { Clock, XCircle, LogOut } from "lucide-react";
 
 export default function ProtectedRoute({
     children,
@@ -14,7 +15,7 @@ export default function ProtectedRoute({
     allowedRoles?: string[];
     fallbackPath?: string;
 }) {
-    const { user, profile, loading } = useAuth();
+    const { user, profile, loading, signOut } = useAuth();
     const router = useRouter();
 
     useEffect(() => {
@@ -28,7 +29,10 @@ export default function ProtectedRoute({
     useEffect(() => {
         if (!loading && user && allowedRoles && allowedRoles.length > 0) {
             const userRole = profile?.role || "student";
-            if (!allowedRoles.includes(userRole)) {
+            const approvalStatus = userRole === "student" ? "Approved" : (profile?.approval_status || "Approved");
+            
+            // Only redirect if they are approved (otherwise they stay on the approval screen)
+            if (approvalStatus === "Approved" && !allowedRoles.includes(userRole)) {
                 router.replace(fallbackPath || "/dashboard");
             }
         }
@@ -38,7 +42,7 @@ export default function ProtectedRoute({
         return (
             <div className="flex items-center justify-center min-h-screen">
                 <div className="flex flex-col items-center gap-3">
-                    <div className="w-8 h-8 border-2 border-brand-primary border-t-transparent rounded-full animate-spin" />
+                    <div className="w-8 h-8 border-2 border-brand-primary border-t-transparent rounded-none animate-spin" />
                     <span className="text-slate-500 dark:text-foreground/40 text-sm font-medium animate-pulse">
                         Loading…
                     </span>
@@ -49,6 +53,84 @@ export default function ProtectedRoute({
 
     if (!user) return null; // redirect in progress
 
+    // Intercept Pending or Rejected approval status (Students do NOT require Admin Approval)
+    const userRole = profile?.role || "student";
+    const approvalStatus = profile?.approval_status;
+    if (userRole !== "student" && approvalStatus && approvalStatus !== "Approved") {
+        const isPending = approvalStatus === "Pending";
+        
+        return (
+            <div className="min-h-screen w-full bg-slate-50 dark:bg-slate-950 text-slate-900 dark:text-slate-100 flex items-center justify-center relative p-4 overflow-hidden">
+                {/* Radial Gradient Background */}
+                <div className="absolute inset-0 z-0 bg-[radial-gradient(circle_at_center,rgba(99,102,241,0.03),transparent_70%)]" />
+                
+                {/* Card Container */}
+                <div className="relative z-10 w-full max-w-md bg-white/75 dark:bg-slate-900/70 border border-slate-200/60 dark:border-slate-800/80  rounded-[2.5rem] border-2 border-foreground shadow-[4px_4px_0_0_rgba(0,0,0,1)] dark:shadow-[4px_4px_0_0_rgba(255,255,255,0.2)] p-8 sm:p-10 text-center space-y-6">
+                    {/* Glowing status icon */}
+                    <div className="relative">
+                        <div className={`w-16 h-16 rounded-none flex items-center justify-center mx-auto border border-2 border-foreground shadow-[4px_4px_0_0_rgba(0,0,0,1)] dark:shadow-[4px_4px_0_0_rgba(255,255,255,0.2)] ${
+                            isPending 
+                                ? "bg-amber-500/10 border-amber-500/20 text-amber-500 shadow-amber-500/5 animate-pulse" 
+                                : "bg-rose-500/10 border-rose-500/20 text-rose-500 shadow-rose-500/5"
+                        }`}>
+                            {isPending ? (
+                                <Clock className="w-8 h-8" />
+                            ) : (
+                                <XCircle className="w-8 h-8" />
+                            )}
+                        </div>
+                    </div>
+
+                    {/* Headers */}
+                    <div className="space-y-2">
+                        <h2 className="text-2xl font-black tracking-tight text-slate-900 dark:text-white">
+                            {isPending ? "Pending Admin Approval" : "Registration Rejected"}
+                        </h2>
+                        <p className="text-slate-500 dark:text-slate-400 font-semibold text-sm leading-relaxed">
+                            {isPending 
+                                ? "Your registration request is currently awaiting review by the system administrator. Please ask your administrator to approve your account." 
+                                : "Your registration request for UniLink has been rejected by the administrator. Please contact your department head if you believe this is an error."
+                            }
+                        </p>
+                    </div>
+
+                    {/* User Metadata Overview */}
+                    {profile && (
+                        <div className="bg-slate-50 dark:bg-slate-950/40 border border-slate-200/50 dark:border-slate-800/60 rounded-none p-4 text-left text-xs font-semibold space-y-2.5 text-slate-600 dark:text-slate-350">
+                            <div className="flex justify-between items-center border-b border-slate-100 dark:border-slate-900 pb-1.5">
+                                <span className="text-[10px] font-black uppercase text-slate-400 tracking-wider">Name</span>
+                                <span className="font-bold text-slate-800 dark:text-foreground">{profile.name}</span>
+                            </div>
+                            <div className="flex justify-between items-center border-b border-slate-100 dark:border-slate-900 pb-1.5">
+                                <span className="text-[10px] font-black uppercase text-slate-400 tracking-wider">Email</span>
+                                <span className="font-bold text-slate-800 dark:text-foreground">{profile.email}</span>
+                            </div>
+                            <div className="flex justify-between items-center border-b border-slate-100 dark:border-slate-900 pb-1.5">
+                                <span className="text-[10px] font-black uppercase text-slate-400 tracking-wider">Requested Role</span>
+                                <span className="font-bold uppercase tracking-wider text-brand-primary text-[10px]">{profile.role}</span>
+                            </div>
+                            {profile.department && (
+                                <div className="flex justify-between items-center">
+                                    <span className="text-[10px] font-black uppercase text-slate-400 tracking-wider">Department</span>
+                                    <span className="font-bold text-slate-800 dark:text-foreground">{profile.department}</span>
+                                </div>
+                            )}
+                        </div>
+                    )}
+
+                    {/* Actions */}
+                    <button
+                        onClick={() => signOut()}
+                        className="w-full flex items-center justify-center gap-2 py-3.5 bg-slate-100/80 hover:bg-slate-200/80 dark:bg-foreground/5 dark:hover:bg-foreground/10 border border-slate-200 dark:border-border text-slate-700 dark:text-foreground/80 font-bold text-sm rounded-none transition-all active:scale-[0.98] group"
+                    >
+                        <LogOut className="w-4 h-4 group-hover:-translate-x-0.5 transition-transform" />
+                        Sign Out & Go Home
+                    </button>
+                </div>
+            </div>
+        );
+    }
+
     // Role check: if allowedRoles is specified, verify the user has one of them
     if (allowedRoles && allowedRoles.length > 0) {
         const userRole = profile?.role || "student";
diff --git a/components/ResourceCard.tsx b/components/ResourceCard.tsx
index 5670d93..7af520a 100644
--- a/components/ResourceCard.tsx
+++ b/components/ResourceCard.tsx
@@ -17,7 +17,7 @@ export default function ResourceCard({ resource, onClick }: ResourceCardProps) {
   return (
     <div
       onClick={onClick}
-      className="group bg-white dark:bg-slate-900 rounded-2xl shadow-sm hover:shadow-xl border border-slate-100 dark:border-white/[0.06] overflow-hidden cursor-pointer transition-all duration-300 transform hover:-translate-y-1 flex flex-col h-full"
+      className="group bg-white dark:bg-slate-900 rounded-none shadow-sm hover:border-2 border-foreground shadow-[4px_4px_0_0_rgba(0,0,0,1)] dark:shadow-[4px_4px_0_0_rgba(255,255,255,0.2)] border border-slate-100 dark:border-white/[0.06] overflow-hidden cursor-pointer transition-all duration-300 transform hover:-translate-y-1 flex flex-col h-full"
     >
       {/* Image Section */}
       <div className="relative h-48 w-full overflow-hidden">
@@ -28,9 +28,9 @@ export default function ResourceCard({ resource, onClick }: ResourceCardProps) {
         />
         <div className="absolute top-4 right-4">
           <span
-            className={`px-3 py-1 text-xs font-bold rounded-full border ${
+            className={`px-3 py-1 text-xs font-bold rounded-none border ${
               statusColors[resource.status]
-            } shadow-sm backdrop-blur-sm bg-white/90 dark:bg-slate-900/90`}
+            } shadow-sm  bg-white/90 dark:bg-slate-900/90`}
           >
             {resource.status}
           </span>
@@ -78,7 +78,7 @@ export default function ResourceCard({ resource, onClick }: ResourceCardProps) {
         </div>
 
         <div className="pt-4 border-t border-slate-100 dark:border-white/[0.06]">
-          <button className="w-full py-2.5 rounded-xl bg-slate-50 dark:bg-white/5 text-blue-600 dark:text-blue-400 font-semibold text-sm hover:bg-blue-600 hover:text-white dark:hover:bg-brand-primary transition-colors duration-200">
+          <button className="w-full py-2.5 rounded-none bg-slate-50 dark:bg-white/5 text-blue-600 dark:text-blue-400 font-semibold text-sm hover:bg-blue-600 hover:text-white dark:hover:bg-brand-primary transition-colors duration-200">
             View Details
           </button>
         </div>
diff --git a/components/ResourceModal.tsx b/components/ResourceModal.tsx
index d38b64f..6439022 100644
--- a/components/ResourceModal.tsx
+++ b/components/ResourceModal.tsx
@@ -31,24 +31,24 @@ export default function ResourceModal({ resource, isOpen, onClose }: ResourceMod
     <div className="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6">
       {/* Backdrop */}
       <div 
-        className="absolute inset-0 bg-slate-900/60 backdrop-blur-sm transition-opacity duration-300"
+        className="absolute inset-0 bg-slate-900/60  transition-opacity duration-300"
         onClick={onClose}
       />
 
       {/* Modal Container */}
-      <div className="relative bg-white dark:bg-slate-900 w-full max-w-4xl rounded-3xl shadow-2xl border border-slate-100 dark:border-slate-800 overflow-hidden flex flex-col max-h-[90vh] animate-in fade-in zoom-in-95 duration-200">
+      <div className="relative bg-white dark:bg-slate-900 w-full max-w-4xl rounded-none border-2 border-foreground shadow-[4px_4px_0_0_rgba(0,0,0,1)] dark:shadow-[4px_4px_0_0_rgba(255,255,255,0.2)] border border-slate-100 dark:border-slate-800 overflow-hidden flex flex-col max-h-[90vh] animate-in fade-in zoom-in-95 duration-200">
         
         {/* Header */}
         <div className="flex items-center justify-between px-6 py-4 border-b border-slate-100 dark:border-slate-800 bg-white dark:bg-slate-900 z-10 sticky top-0">
           <div className="flex items-center gap-3">
             <h2 className="text-2xl font-extrabold text-slate-800 dark:text-foreground">{resource.name}</h2>
-            <span className={`px-3 py-1 text-xs font-bold rounded-full border ${statusColors[resource.status]}`}>
+            <span className={`px-3 py-1 text-xs font-bold rounded-none border ${statusColors[resource.status]}`}>
               {resource.status}
             </span>
           </div>
           <button 
             onClick={onClose}
-            className="p-2 rounded-full text-slate-400 hover:bg-slate-100 dark:hover:bg-white/5 hover:text-slate-600 dark:hover:text-foreground transition-colors"
+            className="p-2 rounded-none text-slate-400 hover:bg-slate-100 dark:hover:bg-white/5 hover:text-slate-600 dark:hover:text-foreground transition-colors"
           >
             <X className="w-5 h-5" />
           </button>
@@ -62,14 +62,14 @@ export default function ResourceModal({ resource, isOpen, onClose }: ResourceMod
             <div className="lg:col-span-7 space-y-8">
               
               {/* Main Image */}
-              <div className="relative w-full h-64 md:h-80 rounded-2xl overflow-hidden shadow-inner border border-slate-100 dark:border-white/[0.06]">
+              <div className="relative w-full h-64 md:h-80 rounded-none overflow-hidden shadow-inner border border-slate-100 dark:border-white/[0.06]">
                 <img 
                   src={resource.image} 
                   alt={resource.name} 
                   className="w-full h-full object-cover"
                 />
                 <div className="absolute top-4 left-4">
-                  <span className="px-3 py-1.5 text-xs font-bold rounded-lg bg-white/90 dark:bg-slate-900/90 backdrop-blur-md text-blue-600 dark:text-blue-450 shadow-sm uppercase tracking-wider">
+                  <span className="px-3 py-1.5 text-xs font-bold rounded-lg bg-white/90 dark:bg-slate-900/90  text-blue-600 dark:text-blue-450 shadow-sm uppercase tracking-wider">
                     {resource.category}
                   </span>
                 </div>
@@ -85,9 +85,9 @@ export default function ResourceModal({ resource, isOpen, onClose }: ResourceMod
                   {resource.description}
                 </p>
                 
-                <div className="flex flex-wrap gap-6 mt-6 p-4 bg-slate-50 dark:bg-white/[0.03] rounded-2xl border border-slate-100 dark:border-slate-800">
+                <div className="flex flex-wrap gap-6 mt-6 p-4 bg-slate-50 dark:bg-white/[0.03] rounded-none border border-slate-100 dark:border-slate-800">
                   <div className="flex items-center gap-3">
-                    <div className="w-10 h-10 rounded-full bg-blue-100 dark:bg-blue-500/10 flex items-center justify-center text-blue-600 dark:text-blue-400">
+                    <div className="w-10 h-10 rounded-none bg-blue-100 dark:bg-blue-500/10 flex items-center justify-center text-blue-600 dark:text-blue-400">
                       <MapPin className="w-5 h-5" />
                     </div>
                     <div>
@@ -96,7 +96,7 @@ export default function ResourceModal({ resource, isOpen, onClose }: ResourceMod
                     </div>
                   </div>
                   <div className="flex items-center gap-3">
-                    <div className="w-10 h-10 rounded-full bg-blue-100 dark:bg-blue-500/10 flex items-center justify-center text-blue-600 dark:text-blue-400">
+                    <div className="w-10 h-10 rounded-none bg-blue-100 dark:bg-blue-500/10 flex items-center justify-center text-blue-600 dark:text-blue-400">
                       <Users className="w-5 h-5" />
                     </div>
                     <div>
@@ -140,7 +140,7 @@ export default function ResourceModal({ resource, isOpen, onClose }: ResourceMod
 
             {/* Right Column (Booking) */}
             <div className="lg:col-span-5">
-              <div className="bg-white dark:bg-slate-900 border text-left border-slate-200 dark:border-slate-800 shadow-xl shadow-slate-200/50 dark:shadow-none rounded-3xl p-6 sticky top-0">
+              <div className="bg-white dark:bg-slate-900 border text-left border-slate-200 dark:border-slate-800 border-2 border-foreground shadow-[4px_4px_0_0_rgba(0,0,0,1)] dark:shadow-[4px_4px_0_0_rgba(255,255,255,0.2)] shadow-slate-200/50 dark:shadow-none rounded-none p-6 sticky top-0">
                 <h3 className="text-xl font-bold text-slate-800 dark:text-foreground mb-6 flex items-center gap-2">
                   <Calendar className="w-5 h-5 text-blue-650 dark:text-brand-primary" />
                   Book Facility
@@ -153,7 +153,7 @@ export default function ResourceModal({ resource, isOpen, onClose }: ResourceMod
                     type="date" 
                     value={selectedDate}
                     onChange={(e) => setSelectedDate(e.target.value)}
-                    className="w-full px-4 py-3 bg-slate-50 dark:bg-slate-950/40 border border-slate-200 dark:border-slate-700 rounded-xl text-slate-800 dark:text-foreground focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary transition-all font-medium"
+                    className="w-full px-4 py-3 bg-slate-50 dark:bg-slate-950/40 border border-slate-200 dark:border-slate-700 rounded-none text-slate-800 dark:text-foreground focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary transition-all font-medium"
                   />
                 </div>
 
@@ -174,7 +174,7 @@ export default function ResourceModal({ resource, isOpen, onClose }: ResourceMod
                             key={i}
                             disabled={isBooked}
                             onClick={() => setSelectedSlot(slot.time)}
-                            className={`w-full flex items-center justify-between px-4 py-3 rounded-xl border text-sm font-medium transition-all ${
+                            className={`w-full flex items-center justify-between px-4 py-3 rounded-none border text-sm font-medium transition-all ${
                               isBooked 
                                 ? "bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10 text-slate-400 dark:text-foreground/30 cursor-not-allowed opacity-70" 
                                 : isSelected 
@@ -193,7 +193,7 @@ export default function ResourceModal({ resource, isOpen, onClose }: ResourceMod
                       })}
                     </div>
                   ) : (
-                    <div className="px-4 py-8 rounded-xl border-2 border-dashed border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-950/20 flex flex-col items-center justify-center text-center">
+                    <div className="px-4 py-8 rounded-none border-2 border-dashed border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-950/20 flex flex-col items-center justify-center text-center">
                       <Calendar className="w-8 h-8 text-slate-300 dark:text-slate-700 mb-2" />
                       <p className="text-sm font-medium text-slate-500 dark:text-foreground/50">Please select a date to view slots</p>
                     </div>
@@ -203,7 +203,7 @@ export default function ResourceModal({ resource, isOpen, onClose }: ResourceMod
                 {/* Action Button */}
                 <button 
                   disabled={!selectedDate || !selectedSlot || resource.status === "Maintenance"}
-                  className="w-full py-4 rounded-xl font-bold text-white bg-brand-primary hover:bg-brand-secondary active:scale-[0.98] transition-all disabled:opacity-50 disabled:active:scale-100 disabled:hover:bg-brand-primary shadow-xl shadow-brand-primary/20"
+                  className="w-full py-4 rounded-none font-bold text-white bg-brand-primary hover:bg-brand-secondary active:scale-[0.98] transition-all disabled:opacity-50 disabled:active:scale-100 disabled:hover:bg-brand-primary border-2 border-foreground shadow-[4px_4px_0_0_rgba(0,0,0,1)] dark:shadow-[4px_4px_0_0_rgba(255,255,255,0.2)] shadow-brand-primary/20"
                 >
                   {resource.status === "Maintenance" 
                     ? "Currently in Maintenance" 
diff --git a/components/SavedSearches.tsx b/components/SavedSearches.tsx
index 2cbba6a..f5dffb1 100644
--- a/components/SavedSearches.tsx
+++ b/components/SavedSearches.tsx
@@ -173,7 +173,7 @@ export default function SavedSearches({ pageKey, currentFilters, onLoadFilters }
         <button
           type="button"
           onClick={() => setIsOpen(!isOpen)}
-          className="inline-flex items-center gap-2 bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 hover:bg-slate-50 dark:hover:bg-white/10 active:scale-95 text-slate-700 dark:text-foreground/80 font-semibold px-4 py-2.5 rounded-xl shadow-sm transition-all duration-200 text-sm"
+          className="inline-flex items-center gap-2 bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 hover:bg-slate-50 dark:hover:bg-white/10 active:scale-95 text-slate-700 dark:text-foreground/80 font-semibold px-4 py-2.5 rounded-none shadow-sm transition-all duration-200 text-sm"
         >
           <Bookmark className="w-4 h-4 text-brand-primary text-blue-500" />
           <span>Saved Searches</span>
@@ -182,7 +182,7 @@ export default function SavedSearches({ pageKey, currentFilters, onLoadFilters }
       </div>
 
       {isOpen && (
-        <div className="absolute left-0 mt-2 w-72 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-white/10 shadow-xl z-50 overflow-hidden animate-in fade-in-50 slide-in-from-top-1">
+        <div className="absolute left-0 mt-2 w-72 rounded-none bg-white dark:bg-slate-900 border border-slate-200 dark:border-white/10 border-2 border-foreground shadow-[4px_4px_0_0_rgba(0,0,0,1)] dark:shadow-[4px_4px_0_0_rgba(255,255,255,0.2)] z-50 overflow-hidden animate-in fade-in-50 slide-in-">
           <div className="p-3 border-b border-slate-100 dark:border-white/5 flex items-center justify-between bg-slate-50/50 dark:bg-white/[0.01]">
             <span className="text-xs font-bold text-slate-400 uppercase tracking-widest">My Searches</span>
             <button
diff --git a/components/SessionProvider.tsx b/components/SessionProvider.tsx
index d81bee3..f50727b 100644
--- a/components/SessionProvider.tsx
+++ b/components/SessionProvider.tsx
@@ -29,11 +29,11 @@ export default function SessionProvider({ children }: { children: React.ReactNod
             {isWarning && !isIdle && (
                 <div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
                     {/* Backdrop */}
-                    <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" />
+                    <div className="absolute inset-0 bg-black/60 " />
                     
                     {/* Modal Content */}
-                    <div className="relative w-full max-w-sm bg-white dark:bg-slate-900 rounded-3xl shadow-2xl border border-amber-200 dark:border-amber-500/20 overflow-hidden animate-in fade-in zoom-in-95 p-6 text-center">
-                        <div className="w-12 h-12 rounded-full bg-amber-100 dark:bg-amber-500/20 flex items-center justify-center mx-auto mb-4">
+                    <div className="relative w-full max-w-sm bg-white dark:bg-slate-900 rounded-none border-2 border-foreground shadow-[4px_4px_0_0_rgba(0,0,0,1)] dark:shadow-[4px_4px_0_0_rgba(255,255,255,0.2)] border border-amber-200 dark:border-amber-500/20 overflow-hidden animate-in fade-in zoom-in-95 p-6 text-center">
+                        <div className="w-12 h-12 rounded-none bg-amber-100 dark:bg-amber-500/20 flex items-center justify-center mx-auto mb-4">
                             <AlertTriangle className="w-6 h-6 text-amber-600 dark:text-amber-400" />
                         </div>
                         
@@ -47,7 +47,7 @@ export default function SessionProvider({ children }: { children: React.ReactNod
                         
                         <button
                             onClick={resetTimers}
-                            className="w-full bg-brand-primary text-white font-bold py-3 rounded-xl hover:bg-brand-secondary transition-all active:scale-95 shadow-lg shadow-brand-primary/20"
+                            className="w-full bg-brand-primary text-white font-bold py-3 rounded-none hover:bg-brand-secondary transition-all active:scale-95 border-2 border-foreground shadow-[4px_4px_0_0_rgba(0,0,0,1)] dark:shadow-[4px_4px_0_0_rgba(255,255,255,0.2)] shadow-brand-primary/20"
                         >
                             Stay Logged In
                         </button>
diff --git a/components/ThemeToggle.tsx b/components/ThemeToggle.tsx
index b7fc00f..4b2d977 100644
--- a/components/ThemeToggle.tsx
+++ b/components/ThemeToggle.tsx
@@ -16,7 +16,7 @@ export function ThemeToggle() {
 
   if (!mounted) {
     return (
-      <div className="w-10 h-10 rounded-xl bg-slate-100 dark:bg-foreground/5 border border-slate-200 dark:border-border animate-pulse" />
+      <div className="w-10 h-10 rounded-none bg-slate-100 dark:bg-foreground/5 border border-slate-200 dark:border-border animate-pulse" />
     );
   }
 
@@ -27,7 +27,7 @@ export function ThemeToggle() {
       whileHover={{ scale: 1.05 }}
       whileTap={{ scale: 0.95 }}
       onClick={() => setTheme(isDark ? "light" : "dark")}
-      className="relative w-10 h-10 rounded-xl bg-slate-100 dark:bg-foreground/5 border border-slate-200 dark:border-border flex items-center justify-center overflow-hidden hover:bg-slate-200 dark:bg-foreground/10 hover:border-brand-primary/50 transition-colors group"
+      className="relative flex items-center justify-center w-10 h-10 rounded-xl bg-white dark:bg-[#0F172A] border border-[#E2E8F0] dark:border-slate-800 shadow-sm hover:shadow-md hover:border-[#0EA5E9]/40 hover:bg-[#F0F9FF] dark:hover:bg-slate-800 transition-all duration-300 group"
       aria-label="Toggle theme"
     >
       <AnimatePresence mode="wait" initial={false}>
diff --git a/components/dashboard/AdminDashboard.tsx b/components/dashboard/AdminDashboard.tsx
index b75ef56..283f6f5 100644
--- a/components/dashboard/AdminDashboard.tsx
+++ b/components/dashboard/AdminDashboard.tsx
@@ -161,7 +161,7 @@ export default function AdminDashboard() {
                     </div>
                     <Link
                         href="/admin/analytics"
-                        className="flex items-center gap-2 px-5 py-2.5 rounded-xl bg-brand-primary text-white font-bold text-sm hover:opacity-90 transition-all shadow-lg shadow-brand-primary/20"
+                        className="flex items-center gap-2 px-5 py-2.5 rounded-none bg-brand-primary text-white font-bold text-sm hover:opacity-90 transition-all border-2 border-foreground shadow-[4px_4px_0_0_rgba(0,0,0,1)] dark:shadow-[4px_4px_0_0_rgba(255,255,255,0.2)] shadow-brand-primary/20"
                     >
                         <BarChart3 className="w-4 h-4" /> View Analytics
                     </Link>
@@ -176,11 +176,11 @@ export default function AdminDashboard() {
                     { label: "Active Bookings", value: stats.activeBookings, icon: CalendarCheck, color: "emerald", trend: "+8%" },
                     { label: "Maint. Tickets", value: stats.maintenanceTickets, icon: Wrench, color: "amber", trend: "-2" },
                 ].map(({ label, value, icon: Icon, color, trend }) => (
-                    <div key={label} className="bg-card border border-slate-200 dark:border-border rounded-2xl p-5 shadow-sm hover:shadow-md transition-shadow relative overflow-hidden group">
+                    <div key={label} className="bg-card border border-slate-200 dark:border-border rounded-none p-5 shadow-sm hover:shadow-md transition-shadow relative overflow-hidden group">
                         <div className="absolute -top-4 -right-4 opacity-5 group-hover:opacity-10 transition-opacity">
                             <Icon className="w-24 h-24" />
                         </div>
-                        <div className={`w-10 h-10 rounded-xl bg-${color}-500/10 flex items-center justify-center mb-3 relative z-10`}>
+                        <div className={`w-10 h-10 rounded-none bg-${color}-500/10 flex items-center justify-center mb-3 relative z-10`}>
                             <Icon className={`w-5 h-5 text-${color}-500`} />
                         </div>
                         <p className="text-[10px] font-black text-slate-500 dark:text-foreground/40 uppercase tracking-widest relative z-10">{label}</p>
@@ -198,7 +198,7 @@ export default function AdminDashboard() {
             {/* ── Main content grid ── */}
             <motion.div variants={fadeInUp} className="grid grid-cols-1 lg:grid-cols-3 gap-6">
                 {/* Resource Utilization */}
-                <div className="lg:col-span-2 bg-card border border-slate-200 dark:border-border rounded-3xl p-6 shadow-sm">
+                <div className="lg:col-span-2 bg-card border border-slate-200 dark:border-border rounded-none p-6 shadow-sm">
                     <div className="flex items-center justify-between mb-6">
                         <h3 className="text-lg font-bold text-foreground">Resource Utilization</h3>
                         <Link href="/admin/analytics" className="text-xs font-bold text-brand-primary hover:underline">
@@ -212,12 +212,12 @@ export default function AdminDashboard() {
                                     <span className="text-sm font-semibold text-slate-600 dark:text-foreground/60">{item.name}</span>
                                     <span className="text-sm font-black text-foreground">{item.rate}%</span>
                                 </div>
-                                <div className="w-full h-2.5 bg-slate-100 dark:bg-white/5 rounded-full overflow-hidden">
+                                <div className="w-full h-2.5 bg-slate-100 dark:bg-white/5 rounded-none overflow-hidden">
                                     <motion.div
                                         initial={{ width: 0 }}
                                         animate={{ width: `${item.rate}%` }}
                                         transition={{ duration: 0.8, delay: 0.2, ease: "easeOut" }}
-                                        className={`h-full rounded-full ${item.color}`}
+                                        className={`h-full rounded-none ${item.color}`}
                                     />
                                 </div>
                             </div>
@@ -226,7 +226,7 @@ export default function AdminDashboard() {
                 </div>
 
                 {/* Recent Activity */}
-                <div className="bg-card border border-slate-200 dark:border-border rounded-3xl p-6 shadow-sm">
+                <div className="bg-card border border-slate-200 dark:border-border rounded-none p-6 shadow-sm">
                     <h3 className="text-lg font-bold text-foreground mb-5">Recent Activity</h3>
                     <div className="space-y-4">
                         {activities.map((activity, idx) => {
@@ -253,7 +253,7 @@ export default function AdminDashboard() {
             {/* ── Management Actions ── */}
             <motion.div variants={fadeInUp} className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                 {/* User Management */}
-                <div className="bg-card border border-slate-200 dark:border-border rounded-3xl p-6 shadow-sm">
+                <div className="bg-card border border-slate-200 dark:border-border rounded-none p-6 shadow-sm">
                     <div className="flex items-center justify-between mb-5">
                         <h3 className="text-lg font-bold text-foreground flex items-center gap-2">
                             <UserCog className="w-5 h-5 text-purple-500" /> User Management
@@ -269,9 +269,9 @@ export default function AdminDashboard() {
                             { role: "Maintenance", count: stats.maintenanceCount, color: "amber" },
                             { role: "Admins", count: stats.adminCount, color: "purple" },
                         ].map(item => (
-                            <div key={item.role} className="flex items-center justify-between p-3 rounded-xl bg-slate-50 dark:bg-white/[0.03] border border-slate-200 dark:border-border">
+                            <div key={item.role} className="flex items-center justify-between p-3 rounded-none bg-slate-50 dark:bg-white/[0.03] border border-slate-200 dark:border-border">
                                 <div className="flex items-center gap-3">
-                                    <div className={`w-2 h-2 rounded-full bg-${item.color}-500`} />
+                                    <div className={`w-2 h-2 rounded-none bg-${item.color}-500`} />
                                     <span className="text-sm font-semibold text-slate-600 dark:text-foreground/60">{item.role}</span>
                                 </div>
                                 <span className="text-sm font-black text-foreground">{item.count}</span>
@@ -281,7 +281,7 @@ export default function AdminDashboard() {
                 </div>
 
                 {/* Quick Management Actions */}
-                <div className="bg-card border border-slate-200 dark:border-border rounded-3xl p-6 shadow-sm">
+                <div className="bg-card border border-slate-200 dark:border-border rounded-none p-6 shadow-sm">
                     <h3 className="text-lg font-bold text-foreground mb-5 flex items-center gap-2">
                         <Settings className="w-5 h-5 text-purple-500" /> Management Actions
                     </h3>
@@ -299,7 +299,7 @@ export default function AdminDashboard() {
                                 <Link
                                     key={item.label}
                                     href={item.href}
-                                    className="flex items-center gap-3 p-3.5 rounded-xl bg-slate-50 dark:bg-white/[0.03] border border-slate-200 dark:border-border hover:bg-slate-100 dark:hover:bg-white/[0.06] hover:border-brand-primary/20 transition-all group"
+                                    className="flex items-center gap-3 p-3.5 rounded-none bg-slate-50 dark:bg-white/[0.03] border border-slate-200 dark:border-border hover:bg-slate-100 dark:hover:bg-white/[0.06] hover:border-brand-primary/20 transition-all group"
                                 >
                                     <div className={`w-8 h-8 rounded-lg bg-${item.color}-500/10 flex items-center justify-center shrink-0 group-hover:scale-105 transition-transform`}>
                                         <Icon className={`w-4 h-4 text-${item.color}-500`} />
diff --git a/components/dashboard/DashboardLayout.tsx b/components/dashboard/DashboardLayout.tsx
index 9a3098b..d83a8bf 100644
--- a/components/dashboard/DashboardLayout.tsx
+++ b/components/dashboard/DashboardLayout.tsx
@@ -57,12 +57,12 @@ export default function DashboardLayout({ children }: DashboardLayoutProps) {
             {/* ── Main content area ── */}
             <div className="flex-1 flex flex-col min-w-0 overflow-hidden">
                 {/* ── Top bar ── */}
-                <header className="sticky top-0 z-20 h-14 bg-white/80 dark:bg-[#0c0a14]/80 backdrop-blur-lg border-b border-slate-200/80 dark:border-white/[0.06] flex items-center justify-between px-4 lg:px-6 shrink-0">
+                <header className="sticky top-0 z-20 h-16 bg-white/70 dark:bg-[#0B111E]/70 backdrop-blur-md border-b border-border flex items-center justify-between px-4 lg:px-6 shrink-0 shadow-sm">
                     {/* Left: mobile menu + breadcrumb */}
                     <div className="flex items-center gap-3">
                         <button
                             onClick={() => setMobileOpen(true)}
-                            className="lg:hidden p-2 rounded-xl hover:bg-slate-100 dark:hover:bg-white/5 transition-colors"
+                            className="lg:hidden p-2 rounded-full hover:bg-slate-100 dark:hover:bg-white/5 transition-colors cursor-pointer"
                             aria-label="Open sidebar"
                         >
                             <Menu className="w-5 h-5 text-slate-600 dark:text-foreground/60" />
@@ -82,8 +82,8 @@ export default function DashboardLayout({ children }: DashboardLayoutProps) {
                                         <span
                                             className={
                                                 isLast
-                                                    ? "font-bold text-foreground"
-                                                    : "text-slate-400 dark:text-foreground/30 font-medium"
+                                                    ? "font-bold text-brand-primary"
+                                                    : "text-slate-450 dark:text-foreground/45 font-medium"
                                             }
                                         >
                                             {formatted}
@@ -97,7 +97,7 @@ export default function DashboardLayout({ children }: DashboardLayoutProps) {
                     {/* Right: actions */}
                     <div className="flex items-center gap-2">
                         <NotificationBell />
-                        <div className="w-px h-5 bg-slate-200 dark:bg-white/10 mx-1" />
+                        <div className="w-px h-5 bg-border mx-1" />
                         <ThemeToggle />
                     </div>
                 </header>
diff --git a/components/dashboard/DashboardSidebar.tsx b/components/dashboard/DashboardSidebar.tsx
index f39d458..d3b0510 100644
--- a/components/dashboard/DashboardSidebar.tsx
+++ b/components/dashboard/DashboardSidebar.tsx
@@ -31,10 +31,10 @@ import {
 
 /* ─── Role metadata ─────────────────────────────────────── */
 const roleMeta: Record<string, { label: string; color: string; accent: string; gradient: string; dot: string }> = {
-    admin:       { label: "Administrator", color: "text-purple-500",  accent: "purple", gradient: "from-purple-600 to-violet-600", dot: "bg-purple-500" },
-    lecturer:    { label: "Lecturer",      color: "text-emerald-500", accent: "emerald", gradient: "from-emerald-600 to-teal-600", dot: "bg-emerald-500" },
-    student:     { label: "Student",       color: "text-blue-500",    accent: "blue",    gradient: "from-blue-600 to-cyan-600",    dot: "bg-blue-500" },
-    maintenance: { label: "Maintenance",   color: "text-amber-500",   accent: "amber",   gradient: "from-amber-600 to-orange-600", dot: "bg-amber-500" },
+    admin:       { label: "Administrator", color: "text-brand-primary",  accent: "blue", gradient: "bg-gradient-to-br from-brand-primary to-brand-secondary", dot: "bg-brand-primary" },
+    lecturer:    { label: "Lecturer",      color: "text-brand-primary", accent: "blue", gradient: "bg-gradient-to-br from-brand-primary to-brand-secondary", dot: "bg-brand-primary" },
+    student:     { label: "Student",       color: "text-brand-primary",    accent: "blue",    gradient: "bg-gradient-to-br from-brand-primary to-brand-secondary",    dot: "bg-brand-primary" },
+    maintenance: { label: "Maintenance",   color: "text-brand-primary",   accent: "blue",   gradient: "bg-gradient-to-br from-brand-primary to-brand-secondary", dot: "bg-brand-primary" },
 };
 
 /* ─── Nav item type ─────────────────────────────────────── */
@@ -119,22 +119,35 @@ export default function DashboardSidebar({
     const SidebarContent = ({ isMobile = false }: { isMobile?: boolean }) => (
         <div className="flex flex-col h-full">
             {/* ── Header / Logo ── */}
-            <div className={`flex items-center gap-3 px-5 h-16 border-b border-slate-200/80 dark:border-white/[0.06] shrink-0 ${collapsed && !isMobile ? "justify-center px-3" : ""}`}>
+            <div className={`flex items-center gap-3 px-5 h-16 border-b border-slate-200/50 dark:border-white/[0.04] shrink-0 ${collapsed && !isMobile ? "justify-center px-3" : "justify-between"}`}>
                 {(!collapsed || isMobile) && (
-                    <Link href="/" className="flex items-center gap-2.5 group min-w-0">
-                        <div className={`w-8 h-8 rounded-xl bg-gradient-to-br ${meta.gradient} flex items-center justify-center shadow-lg shrink-0`}>
-                            <LayoutDashboard className="w-4 h-4 text-white" />
-                        </div>
-                        <div className="min-w-0">
-                            <p className="text-sm font-black text-foreground truncate leading-tight">UniLink</p>
-                            <p className={`text-[10px] font-bold ${meta.color} uppercase tracking-widest truncate`}>{meta.label}</p>
-                        </div>
-                    </Link>
+                    <>
+                        <Link href="/" className="flex items-center gap-2.5 group min-w-0">
+                            <img src="/logo1.png" alt="UniLink Logo" className="h-20 w-auto object-contain shrink-0" />
+                            <div className="min-w-0">
+                                
+                                <p className={`text-[10px] font-black ${meta.color} uppercase tracking-widest truncate`}>{meta.label}</p>
+                            </div>
+                        </Link>
+                        {!isMobile && (
+                            <button
+                                onClick={onToggle}
+                                className="p-1.5 rounded-lg hover:bg-slate-100 dark:hover:bg-white/5 text-slate-400 dark:text-foreground/30 hover:text-foreground transition-all shrink-0"
+                                title="Collapse Sidebar"
+                            >
+                                <PanelLeftClose className="w-4.5 h-4.5" />
+                            </button>
+                        )}
+                    </>
                 )}
                 {collapsed && !isMobile && (
-                    <div className={`w-9 h-9 rounded-xl bg-gradient-to-br ${meta.gradient} flex items-center justify-center shadow-lg`}>
-                        <LayoutDashboard className="w-4.5 h-4.5 text-white" />
-                    </div>
+                    <button
+                        onClick={onToggle}
+                        className="p-1.5 rounded-lg hover:bg-slate-100 dark:hover:bg-white/5 text-slate-400 dark:text-foreground/30 hover:text-foreground transition-all shrink-0"
+                        title="Expand Sidebar"
+                    >
+                        <PanelLeftOpen className="w-5 h-5" />
+                    </button>
                 )}
                 {isMobile && (
                     <button onClick={onMobileClose} className="ml-auto p-1.5 rounded-lg hover:bg-slate-100 dark:hover:bg-white/5 transition-colors">
@@ -144,9 +157,9 @@ export default function DashboardSidebar({
             </div>
 
             {/* ── Navigation ── */}
-            <nav className="flex-1 overflow-y-auto px-3 py-4 space-y-1">
+            <nav className={`flex-1 py-4 space-y-1 no-scrollbar ${collapsed && !isMobile ? "overflow-visible px-0" : "overflow-y-auto px-3"}`}>
                 {(!collapsed || isMobile) && (
-                    <p className="text-[10px] font-black text-slate-400 dark:text-foreground/30 uppercase tracking-[0.15em] px-3 mb-3">
+                    <p className="text-[10px] font-black text-slate-400 dark:text-foreground/35 uppercase tracking-[0.15em] px-3 mb-3">
                         Navigation
                     </p>
                 )}
@@ -173,14 +186,14 @@ export default function DashboardSidebar({
                             onClick={isMobile ? onMobileClose : undefined}
                             title={collapsed && !isMobile ? item.label : undefined}
                             className={`
-                                group relative flex items-center gap-3 rounded-xl transition-all duration-200
+                                group relative flex items-center gap-3 transition-all duration-200 rounded-xl
                                 ${collapsed && !isMobile
                                     ? "justify-center px-0 py-3 mx-auto w-11 h-11"
-                                    : "px-3 py-2.5"
+                                    : "px-3.5 py-3 mx-1"
                                 }
                                 ${isActive
-                                    ? `bg-gradient-to-r from-${meta.accent}-500/10 to-${meta.accent}-500/5 ${meta.color} font-black`
-                                    : "text-slate-600 dark:text-foreground/50 hover:text-foreground hover:bg-slate-50 dark:hover:bg-white/[0.04] font-semibold"
+                                    ? "bg-brand-very-light-blue dark:bg-brand-primary/10 text-brand-primary font-bold shadow-sm"
+                                    : "text-slate-600 dark:text-foreground/50 hover:text-brand-primary hover:bg-brand-very-light-blue/40 dark:hover:bg-white/[0.02] font-semibold"
                                 }
                             `}
                         >
@@ -188,24 +201,24 @@ export default function DashboardSidebar({
                             {isActive && (
                                 <motion.span
                                     layoutId={isMobile ? "mobile-active-bar" : "sidebar-active-bar"}
-                                    className={`absolute left-0 top-1/2 -translate-y-1/2 w-[3px] h-5 rounded-r-full bg-gradient-to-b ${meta.gradient}`}
+                                    className="absolute left-0 top-1/2 -translate-y-1/2 w-[3px] h-5 rounded-r-full bg-brand-primary"
                                     transition={{ type: "spring", stiffness: 400, damping: 30 }}
                                 />
                             )}
-                            <Icon className={`w-[18px] h-[18px] shrink-0 transition-colors ${isActive ? meta.color : "text-slate-400 dark:text-foreground/40 group-hover:text-foreground/70"}`} />
+                            <Icon className={`w-[18px] h-[18px] shrink-0 transition-colors ${isActive ? "text-brand-primary" : "text-slate-400 dark:text-foreground/40 group-hover:text-brand-primary"}`} />
                             {(!collapsed || isMobile) && (
                                 <span className="text-[13px] truncate">{item.label}</span>
                             )}
                             {item.badge && item.badge > 0 && (!collapsed || isMobile) && (
-                                <span className={`ml-auto text-[10px] font-black bg-${meta.accent}-500/15 ${meta.color} px-2 py-0.5 rounded-full`}>
+                                <span className="ml-auto text-[10px] font-black bg-brand-soft-blue text-brand-primary px-2.5 py-0.5 rounded-full">
                                     {item.badge}
                                 </span>
                             )}
                             {/* Tooltip for collapsed state */}
                             {collapsed && !isMobile && (
-                                <div className="absolute left-full ml-3 px-2.5 py-1.5 bg-slate-900 dark:bg-slate-700 text-white text-xs font-bold rounded-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 pointer-events-none whitespace-nowrap z-50 shadow-xl">
+                                <div className="absolute left-full ml-3 px-3 py-1.5 bg-slate-900 dark:bg-slate-800 text-white text-xs font-bold rounded-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 pointer-events-none whitespace-nowrap z-50 border border-slate-700/50 shadow-md">
                                     {item.label}
-                                    <div className="absolute right-full top-1/2 -translate-y-1/2 w-0 h-0 border-t-[5px] border-t-transparent border-b-[5px] border-b-transparent border-r-[5px] border-r-slate-900 dark:border-r-slate-700" />
+                                    <div className="absolute right-full top-1/2 -translate-y-1/2 w-0 h-0 border-t-[5px] border-t-transparent border-b-[5px] border-b-transparent border-r-[5px] border-r-slate-900 dark:border-r-slate-800" />
                                 </div>
                             )}
                         </Link>
@@ -214,10 +227,10 @@ export default function DashboardSidebar({
             </nav>
 
             {/* ── User Section ── */}
-            <div className="shrink-0 border-t border-slate-200/80 dark:border-white/[0.06] p-3 space-y-2">
+            <div className="shrink-0 border-t border-slate-200/50 dark:border-white/[0.04] p-3 space-y-2">
                 {/* User card */}
-                <div className={`flex items-center gap-3 rounded-xl p-2.5 bg-slate-50 dark:bg-white/[0.03] ${collapsed && !isMobile ? "justify-center p-2" : ""}`}>
-                    <div className={`w-8 h-8 rounded-lg bg-gradient-to-br ${meta.gradient} flex items-center justify-center text-white text-xs font-black shadow shrink-0`}>
+                <div className={`flex items-center gap-3 rounded-xl p-2.5 bg-slate-50 dark:bg-white/[0.02] border border-slate-100 dark:border-white/[0.04] ${collapsed && !isMobile ? "justify-center p-2" : ""}`}>
+                    <div className="w-8 h-8 rounded-lg bg-brand-primary flex items-center justify-center text-white text-xs font-black shadow shrink-0">
                         {initials}
                     </div>
                     {(!collapsed || isMobile) && (
@@ -238,19 +251,6 @@ export default function DashboardSidebar({
                     {(!collapsed || isMobile) && <span className="text-[13px]">Sign Out</span>}
                 </button>
             </div>
-
-            {/* ── Collapse toggle (desktop only) ── */}
-            {!isMobile && (
-                <div className="shrink-0 border-t border-slate-200/80 dark:border-white/[0.06] p-3">
-                    <button
-                        onClick={onToggle}
-                        className="w-full flex items-center justify-center gap-2 rounded-xl px-3 py-2 text-slate-400 dark:text-foreground/30 hover:text-foreground hover:bg-slate-50 dark:hover:bg-white/[0.04] transition-all"
-                    >
-                        {collapsed ? <PanelLeftOpen className="w-4 h-4" /> : <PanelLeftClose className="w-4 h-4" />}
-                        {!collapsed && <span className="text-xs font-bold">Collapse</span>}
-                    </button>
-                </div>
-            )}
         </div>
     );
 
@@ -275,7 +275,7 @@ export default function DashboardSidebar({
                             initial={{ opacity: 0 }}
                             animate={{ opacity: 1 }}
                             exit={{ opacity: 0 }}
-                            className="fixed inset-0 bg-black/40 backdrop-blur-sm z-40 lg:hidden"
+                            className="fixed inset-0 bg-black/40  z-40 lg:hidden"
                             onClick={onMobileClose}
                         />
                         {/* Drawer */}
diff --git a/components/dashboard/LecturerDashboard.tsx b/components/dashboard/LecturerDashboard.tsx
index 7c3761b..e22c6f9 100644
--- a/components/dashboard/LecturerDashboard.tsx
+++ b/components/dashboard/LecturerDashboard.tsx
@@ -168,9 +168,9 @@ export default function LecturerDashboard() {
             {/* ── Welcome Header ── */}
             <motion.header
                 variants={fadeInUp}
-                className="bg-gradient-to-r from-emerald-600/10 to-teal-600/5 dark:from-emerald-900/30 dark:to-teal-900/15 p-8 rounded-3xl border border-emerald-200 dark:border-emerald-500/20 relative overflow-hidden"
+                className="bg-card   dark: dark: p-8 rounded-none border border-emerald-200 dark:border-emerald-500/20 relative overflow-hidden"
             >
-                <div className="absolute top-0 right-0 w-64 h-64 bg-emerald-500/10 blur-3xl rounded-full" />
+                <div className="absolute top-0 right-0 w-64 h-64 bg-emerald-500/10 blur-3xl rounded-none" />
                 <h1 className="text-3xl font-black text-foreground tracking-tight relative z-10">
                     {activeTab === "approvals" ? "Approval Queue" : "Teacher Portal"}
                 </h1>
@@ -199,8 +199,8 @@ export default function LecturerDashboard() {
                             { label: "Students Active", value: studentsActiveCount, icon: Users, color: "purple" },
                         ].map(({ label, value, icon: Icon, color, link }) => {
                             const card = (
-                                <div className="bg-card border border-slate-200 dark:border-border rounded-2xl p-5 shadow-sm hover:shadow-md hover:border-emerald-500/30 transition-all h-full">
-                                    <div className={`w-10 h-10 rounded-xl bg-${color}-500/10 flex items-center justify-center mb-3`}>
+                                <div className="bg-card border border-slate-200 dark:border-border rounded-none p-5 shadow-sm hover:shadow-md hover:border-emerald-500/30 transition-all h-full">
+                                    <div className={`w-10 h-10 rounded-none bg-${color}-500/10 flex items-center justify-center mb-3`}>
                                         <Icon className={`w-5 h-5 text-${color}-500`} />
                                     </div>
                                     <p className="text-[10px] font-black text-slate-500 dark:text-foreground/45 uppercase tracking-widest">{label}</p>
@@ -220,7 +220,7 @@ export default function LecturerDashboard() {
                     {/* ── Main Content (Overview mode) ── */}
                     <motion.div variants={fadeInUp} className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                         {/* Summary Approval Card */}
-                        <div className="bg-card border border-slate-200 dark:border-border rounded-3xl p-6 shadow-sm flex flex-col justify-between">
+                        <div className="bg-card border border-slate-200 dark:border-border rounded-none p-6 shadow-sm flex flex-col justify-between">
                             <div>
                                 <h3 className="text-lg font-bold text-foreground mb-3 flex items-center gap-2">
                                     <CheckCircle2 className="w-5 h-5 text-emerald-500" /> Pending Approvals
@@ -231,14 +231,14 @@ export default function LecturerDashboard() {
                             </div>
                             <Link
                                 href="/dashboard?tab=approvals"
-                                className="w-full inline-flex items-center justify-center gap-2 py-3 px-4 rounded-xl bg-emerald-600 text-white text-sm font-bold hover:bg-emerald-500 transition-all shadow-lg shadow-emerald-600/10"
+                                className="w-full inline-flex items-center justify-center gap-2 py-3 px-4 rounded-none bg-emerald-600 text-white text-sm font-bold hover:bg-emerald-500 transition-all border-2 border-foreground shadow-[4px_4px_0_0_rgba(0,0,0,1)] dark:shadow-[4px_4px_0_0_rgba(255,255,255,0.2)] shadow-emerald-600/10"
                             >
                                 Open Approval Queue <ArrowRight className="w-4 h-4" />
                             </Link>
                         </div>
 
                         {/* Upcoming Classes */}
-                        <div className="bg-card border border-slate-200 dark:border-border rounded-3xl p-6 shadow-sm">
+                        <div className="bg-card border border-slate-200 dark:border-border rounded-none p-6 shadow-sm">
                             <h3 className="text-lg font-bold text-foreground mb-4 flex items-center gap-2">
                                 <BookOpen className="w-5 h-5 text-emerald-500" /> My Upcoming Classes
                             </h3>
@@ -248,7 +248,7 @@ export default function LecturerDashboard() {
                                     { month: "Oct", day: "14", title: "Advanced Physics Lab", location: "Lab Block C", time: "2:00 PM" },
                                     { month: "Oct", day: "16", title: "Seminar: Particle Theory", location: "Room 205", time: "11:00 AM" },
                                 ].map((cls, idx) => (
-                                    <div key={idx} className="flex items-center gap-4 p-3 rounded-xl border border-slate-200 dark:border-border bg-slate-50 dark:bg-white/[0.03]">
+                                    <div key={idx} className="flex items-center gap-4 p-3 rounded-none border border-slate-200 dark:border-border bg-slate-50 dark:bg-white/[0.03]">
                                         <div className="bg-emerald-500/15 text-emerald-600 dark:text-emerald-400 font-bold p-3 rounded-lg text-center leading-tight border border-emerald-500/20 shrink-0">
                                             <span className="block text-xs uppercase tracking-wider">{cls.month}</span>
                                             <span className="block text-xl">{cls.day}</span>
@@ -262,7 +262,7 @@ export default function LecturerDashboard() {
                             </div>
                             <Link
                                 href="/bookings?view=all"
-                                className="mt-5 w-full inline-flex items-center justify-center gap-2 py-3 px-4 rounded-xl border border-slate-200 dark:border-border bg-slate-50 dark:bg-white/[0.03] text-sm font-bold text-slate-600 dark:text-foreground/60 hover:bg-slate-100 dark:hover:bg-white/[0.06] transition-colors"
+                                className="mt-5 w-full inline-flex items-center justify-center gap-2 py-3 px-4 rounded-none border border-slate-200 dark:border-border bg-slate-50 dark:bg-white/[0.03] text-sm font-bold text-slate-600 dark:text-foreground/60 hover:bg-slate-100 dark:hover:bg-white/[0.06] transition-colors"
                             >
                                 View Full Schedule <ArrowRight className="w-4 h-4" />
                             </Link>
@@ -272,7 +272,7 @@ export default function LecturerDashboard() {
             ) : (
                 /* ── Approval Queue view (takes full width) ── */
                 <motion.div variants={fadeInUp} className="w-full">
-                    <div className="bg-card border border-slate-200 dark:border-border rounded-3xl p-6 shadow-sm flex flex-col w-full animate-in fade-in slide-in-from-bottom-4 duration-300">
+                    <div className="bg-card border border-slate-200 dark:border-border rounded-none p-6 shadow-sm flex flex-col w-full animate-in fade-in slide-in- duration-300">
                         <h3 className="text-lg font-bold text-foreground mb-4 flex items-center gap-2">
                             <CheckCircle2 className="w-5 h-5 text-emerald-500" /> Pending Requests ({pendingBookings.length})
                         </h3>
@@ -296,7 +296,7 @@ export default function LecturerDashboard() {
                                     return (
                                         <div
                                             key={booking.id}
-                                            className="p-4 border border-emerald-200 dark:border-emerald-500/20 bg-emerald-50 dark:bg-emerald-500/5 rounded-xl flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 hover:shadow-sm transition-all"
+                                            className="p-4 border border-emerald-200 dark:border-emerald-500/20 bg-emerald-50 dark:bg-emerald-500/5 rounded-none flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 hover:shadow-sm transition-all"
                                         >
                                             <div className="space-y-1">
                                                 <p className="font-bold text-foreground text-sm">{booking.resources?.name || "Resource"}</p>
@@ -341,8 +341,8 @@ export default function LecturerDashboard() {
             {/* ── Rejection Reason Modal ── */}
             {rejectingBooking && (
                 <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
-                    <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={() => setRejectingBooking(null)} />
-                    <div className="relative w-full max-w-md bg-card dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-3xl p-6 shadow-2xl overflow-hidden text-foreground">
+                    <div className="absolute inset-0 bg-black/60 " onClick={() => setRejectingBooking(null)} />
+                    <div className="relative w-full max-w-md bg-card dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-none p-6 border-2 border-foreground shadow-[4px_4px_0_0_rgba(0,0,0,1)] dark:shadow-[4px_4px_0_0_rgba(255,255,255,0.2)] overflow-hidden text-foreground">
                         <h3 className="text-xl font-black mb-2 flex items-center gap-2">
                             <ShieldAlert className="w-5 h-5 text-red-500" /> Decline Booking Request
                         </h3>
@@ -362,21 +362,21 @@ export default function LecturerDashboard() {
                                     placeholder="e.g. The lab is reserved for scheduled examinations during this hour."
                                     required
                                     rows={3}
-                                    className="w-full px-4 py-3 bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-slate-800 rounded-2xl text-sm font-semibold focus:outline-none focus:ring-4 focus:ring-red-500/10 transition-all resize-none text-foreground"
+                                    className="w-full px-4 py-3 bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-slate-800 rounded-none text-sm font-semibold focus:outline-none focus:ring-4 focus:ring-red-500/10 transition-all resize-none text-foreground"
                                 />
                             </div>
                             <div className="flex justify-end gap-3">
                                 <button
                                     type="button"
                                     onClick={() => setRejectingBooking(null)}
-                                    className="px-5 py-2.5 border border-slate-200 dark:border-slate-800 rounded-xl text-xs font-bold text-slate-600 dark:text-slate-400 hover:bg-slate-50 dark:hover:bg-white/5 transition-colors"
+                                    className="px-5 py-2.5 border border-slate-200 dark:border-slate-800 rounded-none text-xs font-bold text-slate-600 dark:text-slate-400 hover:bg-slate-50 dark:hover:bg-white/5 transition-colors"
                                 >
                                     Cancel
                                 </button>
                                 <button
                                     type="submit"
                                     disabled={actionLoading === rejectingBooking.id}
-                                    className="px-5 py-2.5 bg-red-600 hover:bg-red-500 text-white rounded-xl text-xs font-bold transition-all shadow-lg shadow-red-600/10 disabled:opacity-50"
+                                    className="px-5 py-2.5 bg-red-600 hover:bg-red-500 text-white rounded-none text-xs font-bold transition-all border-2 border-foreground shadow-[4px_4px_0_0_rgba(0,0,0,1)] dark:shadow-[4px_4px_0_0_rgba(255,255,255,0.2)] shadow-red-600/10 disabled:opacity-50"
                                 >
                                     {actionLoading === rejectingBooking.id ? "Declining..." : "Decline Booking"}
                                 </button>
diff --git a/components/dashboard/MaintenanceDashboard.tsx b/components/dashboard/MaintenanceDashboard.tsx
index d5a80dd..cef7b2f 100644
--- a/components/dashboard/MaintenanceDashboard.tsx
+++ b/components/dashboard/MaintenanceDashboard.tsx
@@ -16,17 +16,23 @@ import {
     ListTodo,
     RefreshCcw,
     Search,
+    Star,
+    ArrowRight
 } from "lucide-react";
 
 const API = process.env.NEXT_PUBLIC_API_URL || "http://localhost:5000";
 
 const fadeInUp = {
-    hidden: { opacity: 0, y: 20 },
-    visible: { opacity: 1, y: 0, transition: { duration: 0.45 } },
+    hidden: { opacity: 0, y: 24 },
+    visible: { opacity: 1, y: 0, transition: { duration: 0.5, ease: "easeOut" as const } },
 };
 const staggerContainer = {
     hidden: { opacity: 0 },
-    visible: { opacity: 1, transition: { staggerChildren: 0.1 } },
+    visible: { opacity: 1, transition: { staggerChildren: 0.08 } },
+};
+const cardVariant = {
+    hidden: { opacity: 0, y: 16 },
+    visible: { opacity: 1, y: 0, transition: { duration: 0.4 } },
 };
 
 interface MaintenanceTicket {
@@ -70,6 +76,14 @@ export default function MaintenanceDashboard() {
     const [search, setSearch] = useState("");
     const [completingTask, setCompletingTask] = useState<Task | null>(null);
     const [outcome, setOutcome] = useState<"Fixed" | "Faulty" | "Decommissioned">("Fixed");
+    const [greeting, setGreeting] = useState("Hello");
+
+    useEffect(() => {
+        const h = new Date().getHours();
+        if (h < 12) setGreeting("Good morning");
+        else if (h < 17) setGreeting("Good afternoon");
+        else setGreeting("Good evening");
+    }, []);
 
     const getToken = useCallback(async () => {
         if (user && typeof user.getIdToken === "function") return user.getIdToken();
@@ -166,185 +180,226 @@ export default function MaintenanceDashboard() {
     ];
 
     return (
-        <motion.div variants={staggerContainer} initial="hidden" animate="visible" className="space-y-8">
-            {/* ── Header ── */}
-            <motion.header
-                variants={fadeInUp}
-                className="flex flex-col sm:flex-row justify-between items-start sm:items-end gap-4"
-            >
-                <div>
-                    <h1 className="text-3xl font-black text-foreground tracking-tight flex items-center gap-3">
-                        <div className="w-10 h-10 rounded-xl bg-amber-500/10 flex items-center justify-center">
-                            <PenTool className="w-5 h-5 text-amber-500" />
+        <motion.div variants={staggerContainer} initial="hidden" animate="visible" className="space-y-6">
+
+            {/* ── Welcome Hero Banner ── */}
+            <motion.div variants={fadeInUp} className="relative overflow-hidden rounded-2xl bg-gradient-to-br from-[#0EA5E9] to-[#0284C7] p-6 md:p-8 text-white shadow-lg shadow-sky-500/20">
+                {/* Decorative circles */}
+                <div className="absolute -top-12 -right-12 w-48 h-48 rounded-full bg-white/10 pointer-events-none" />
+                <div className="absolute -bottom-8 -left-8 w-36 h-36 rounded-full bg-white/5 pointer-events-none" />
+                <div className="absolute top-4 right-32 w-20 h-20 rounded-full bg-[#0D9488]/20 pointer-events-none" />
+
+                <div className="relative z-10 flex flex-col md:flex-row md:items-center justify-between gap-4">
+                    <div>
+                        <div className="flex items-center gap-2 mb-2">
+                            <span className="inline-flex items-center gap-1.5 bg-white/20 backdrop-blur-sm px-3 py-1 rounded-full text-[11px] font-semibold uppercase tracking-wider">
+                                <PenTool className="w-3 h-3" /> Operations Hub
+                            </span>
                         </div>
-                        Operations Hub
-                    </h1>
-                    <p className="text-slate-600 dark:text-foreground/50 mt-2 font-medium">
-                        Welcome, {profile?.name || "Technician"}. {stats.highPriority > 0
-                            ? <span className="text-amber-600 dark:text-amber-400 font-bold">{stats.highPriority} high priority ticket{stats.highPriority !== 1 ? "s" : ""} need attention.</span>
-                            : <span className="text-emerald-600 dark:text-emerald-400 font-bold">All systems running smoothly.</span>
-                        }
-                    </p>
+                        <h1 className="text-2xl md:text-3xl font-bold tracking-tight">
+                            {greeting}, {profile?.name?.split(" ")[0] || "Technician"} 👋
+                        </h1>
+                        <p className="mt-1.5 text-sky-100 text-sm font-medium">
+                            {new Date().toLocaleDateString("en-US", { weekday: "long", year: "numeric", month: "long", day: "numeric" })}
+                        </p>
+                        {stats.highPriority > 0 ? (
+                            <p className="mt-2 text-sky-200 text-sm">
+                                You have <span className="text-white font-bold">{stats.highPriority} high priority ticket{stats.highPriority !== 1 ? "s" : ""}</span> to attend to.
+                            </p>
+                        ) : (
+                            <p className="mt-2 text-sky-200 text-sm font-medium">
+                                All systems are running smoothly.
+                            </p>
+                        )}
+                    </div>
+
+                    <button
+                        onClick={fetchTasks}
+                        className="bg-white/15 hover:bg-white/25 backdrop-blur-sm rounded-xl p-3 border border-white/20 flex items-center justify-center transition-colors shadow-sm"
+                        title="Refresh Tasks"
+                    >
+                        <RefreshCcw className="w-5 h-5 text-white" />
+                    </button>
                 </div>
-                <button
-                    onClick={fetchTasks}
-                    className="flex items-center gap-2 px-4 py-2.5 rounded-xl bg-amber-500/10 border border-amber-500/20 text-amber-600 dark:text-amber-400 font-bold text-sm hover:bg-amber-500/20 transition-colors"
-                >
-                    <RefreshCcw className="w-4 h-4" /> Refresh
-                </button>
-            </motion.header>
+            </motion.div>
 
             {/* ── Stat Cards ── */}
-            <motion.div variants={fadeInUp} className="grid grid-cols-2 lg:grid-cols-5 gap-4">
+            <motion.div variants={staggerContainer} className="grid grid-cols-2 lg:grid-cols-5 gap-4">
                 {[
-                    { label: "Total Tickets", value: stats.total, icon: ListTodo, color: "blue" },
-                    { label: "Open", value: stats.open, icon: AlertCircle, color: "red" },
-                    { label: "In Progress", value: stats.inProgress, icon: Activity, color: "amber" },
-                    { label: "Completed", value: stats.completed, icon: CheckCircle2, color: "emerald" },
-                    { label: "High Priority", value: stats.highPriority, icon: AlertCircle, color: "red" },
-                ].map(({ label, value, icon: Icon, color }) => (
-                    <div key={label} className="bg-card border border-slate-200 dark:border-border rounded-2xl p-5 shadow-sm hover:shadow-md transition-shadow">
-                        <div className={`w-9 h-9 rounded-xl bg-${color}-500/10 flex items-center justify-center mb-3`}>
-                            <Icon className={`w-4 h-4 text-${color}-500`} />
+                    { label: "Total Tickets", value: stats.total, icon: ListTodo, bg: "#F0F9FF", fg: "#0EA5E9" },
+                    { label: "Open", value: stats.open, icon: AlertCircle, bg: "#FFF1F2", fg: "#E11D48" },
+                    { label: "In Progress", value: stats.inProgress, icon: Activity, bg: "#FFFBEB", fg: "#D97706" },
+                    { label: "Completed", value: stats.completed, icon: CheckCircle2, bg: "#CCFBF1", fg: "#0D9488" },
+                    { label: "High Priority", value: stats.highPriority, icon: AlertCircle, bg: "#FFF1F2", fg: "#E11D48" },
+                ].map(({ label, value, icon: Icon, bg, fg }) => (
+                    <motion.div
+                        key={label}
+                        variants={cardVariant}
+                        className="bg-white dark:bg-slate-800/60 rounded-xl p-5 border border-[#E2E8F0] dark:border-slate-700 shadow-sm hover:shadow-md hover:-translate-y-0.5 transition-all duration-200"
+                    >
+                        <div className="w-10 h-10 rounded-xl flex items-center justify-center mb-3" style={{ backgroundColor: bg }}>
+                            <Icon className="w-5 h-5" style={{ color: fg }} />
                         </div>
-                        <p className="text-[10px] font-black text-slate-500 dark:text-foreground/40 uppercase tracking-widest">{label}</p>
-                        <p className="text-2xl font-black text-foreground mt-1">{loading ? "—" : value}</p>
-                    </div>
+                        <p className="text-[11px] font-semibold text-[#64748B] dark:text-slate-400 uppercase tracking-wider">{label}</p>
+                        <p className="text-3xl font-bold text-[#0F172A] dark:text-white mt-1">
+                            {loading ? <Loader2 className="w-6 h-6 animate-spin opacity-30" /> : value}
+                        </p>
+                    </motion.div>
                 ))}
             </motion.div>
 
             {/* ── Main Grid ── */}
             <motion.div variants={fadeInUp} className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                 {/* Critical Tasks */}
-                <div className="bg-card border border-red-200 dark:border-red-500/20 rounded-3xl p-6 shadow-sm">
-                    <h3 className="text-lg font-bold text-foreground mb-4 flex items-center gap-2">
-                        <AlertCircle className="w-5 h-5 text-red-500" />
-                        Critical Tasks
+                <div className="bg-white dark:bg-slate-800/60 rounded-xl border border-[#E2E8F0] dark:border-slate-700 shadow-sm overflow-hidden flex flex-col">
+                    <div className="flex items-center justify-between px-6 py-4 border-b border-[#E2E8F0] dark:border-slate-700">
+                        <h3 className="text-sm font-bold text-[#0F172A] dark:text-white flex items-center gap-2">
+                            <AlertCircle className="w-4 h-4 text-[#E11D48]" /> Critical Tasks
+                        </h3>
                         {criticalTasks.length > 0 && (
-                            <span className="ml-auto text-xs font-black bg-red-500/10 text-red-500 px-2 py-0.5 rounded-full border border-red-500/20">
-                                {criticalTasks.length}
+                            <span className="text-[11px] font-semibold bg-rose-100 text-rose-700 dark:bg-rose-500/10 dark:text-rose-400 px-2.5 py-0.5 rounded-full">
+                                {criticalTasks.length} pending
                             </span>
                         )}
-                    </h3>
-                    <div className="space-y-3">
+                    </div>
+                    
+                    <div className="p-4 flex-1">
                         {loading ? (
                             <div className="flex items-center justify-center py-8">
-                                <Loader2 className="w-5 h-5 animate-spin text-slate-400" />
+                                <Loader2 className="w-5 h-5 animate-spin text-[#0EA5E9]" />
                             </div>
                         ) : criticalTasks.length === 0 ? (
-                            <div className="text-center py-8">
-                                <CheckCircle2 className="w-10 h-10 text-emerald-300 dark:text-emerald-500/30 mx-auto mb-3" />
-                                <p className="text-sm text-slate-500 dark:text-foreground/40 font-bold">No critical tasks</p>
+                            <div className="flex flex-col items-center justify-center py-8 text-center px-4">
+                                <div className="w-14 h-14 rounded-2xl bg-emerald-50 dark:bg-emerald-500/10 flex items-center justify-center mb-3">
+                                    <CheckCircle2 className="w-7 h-7 text-emerald-500" />
+                                </div>
+                                <p className="font-semibold text-[#0F172A] dark:text-white">No critical tasks</p>
+                                <p className="text-sm text-[#64748B] dark:text-slate-400 mt-1">All high-priority issues resolved</p>
                             </div>
                         ) : (
-                            criticalTasks.slice(0, 4).map(task => (
-                                <div key={task.rawId} className="bg-red-50 dark:bg-red-500/5 p-4 rounded-xl border border-red-200 dark:border-red-500/15 flex justify-between items-center gap-3">
-                                    <div className="min-w-0">
-                                        <p className="font-bold text-foreground text-sm truncate">{task.title}</p>
-                                        <p className="text-xs text-slate-500 dark:text-foreground/40 mt-0.5">{task.resourceName}</p>
+                            <div className="space-y-3">
+                                {criticalTasks.slice(0, 4).map(task => (
+                                    <div key={task.rawId} className="bg-rose-50/50 dark:bg-rose-500/5 p-4 rounded-xl border border-rose-100 dark:border-rose-500/15 flex justify-between items-center gap-3 hover:bg-rose-50 dark:hover:bg-rose-500/10 transition-colors">
+                                        <div className="min-w-0">
+                                            <p className="font-semibold text-[#0F172A] dark:text-white text-sm truncate">{task.title}</p>
+                                            <p className="text-[11px] text-[#64748B] dark:text-slate-400 mt-1">{task.resourceName}</p>
+                                        </div>
+                                        <button
+                                            onClick={() => handleAdvanceStatus(task)}
+                                            className="shrink-0 flex items-center gap-1 text-[11px] font-semibold text-[#0EA5E9] bg-sky-50 hover:bg-sky-100 dark:bg-sky-500/10 dark:hover:bg-sky-500/20 px-3 py-1.5 rounded-lg transition-colors"
+                                        >
+                                            {task.rawStatus === "OPEN" ? "Start" : "Complete"} <ChevronRight className="w-3 h-3" />
+                                        </button>
                                     </div>
-                                    <button
-                                        onClick={() => handleAdvanceStatus(task)}
-                                        className="shrink-0 flex items-center gap-1 text-[10px] font-black uppercase tracking-widest text-amber-600 dark:text-amber-400 hover:bg-amber-500/10 px-2.5 py-1.5 rounded-lg transition-all border border-transparent hover:border-amber-500/20"
-                                    >
-                                        {task.rawStatus === "OPEN" ? "Start" : "Complete"} <ChevronRight className="w-3 h-3" />
-                                    </button>
-                                </div>
-                            ))
+                                ))}
+                            </div>
                         )}
                     </div>
                 </div>
 
                 {/* Routine Maintenance Schedule */}
-                <div className="bg-card border border-slate-200 dark:border-border rounded-3xl p-6 shadow-sm">
-                    <h3 className="text-lg font-bold text-foreground mb-4 flex items-center gap-2">
-                        <CalendarDays className="w-5 h-5 text-amber-500" />
-                        Routine Maintenance
-                    </h3>
-                    <div className="space-y-3">
-                        {routineMaintenance.map((item, idx) => (
-                            <div key={idx} className="flex items-center justify-between p-4 rounded-xl border border-slate-200 dark:border-border bg-slate-50 dark:bg-white/[0.03] gap-3">
-                                <div className="flex items-center gap-3 min-w-0">
-                                    <div className="w-9 h-9 rounded-lg bg-amber-500/10 flex items-center justify-center shrink-0">
-                                        <Wrench className="w-4 h-4 text-amber-500" />
+                <div className="bg-white dark:bg-slate-800/60 rounded-xl border border-[#E2E8F0] dark:border-slate-700 shadow-sm overflow-hidden flex flex-col">
+                    <div className="px-6 py-4 border-b border-[#E2E8F0] dark:border-slate-700">
+                        <h3 className="text-sm font-bold text-[#0F172A] dark:text-white flex items-center gap-2">
+                            <CalendarDays className="w-4 h-4 text-[#0EA5E9]" /> Routine Maintenance
+                        </h3>
+                    </div>
+                    <div className="p-4 flex-1">
+                        <div className="space-y-3">
+                            {routineMaintenance.map((item, idx) => (
+                                <div key={idx} className="flex items-center justify-between p-4 rounded-xl border border-[#E2E8F0] dark:border-slate-700 bg-slate-50/50 dark:bg-white/[0.02] gap-3">
+                                    <div className="flex items-center gap-3 min-w-0">
+                                        <div className="w-10 h-10 rounded-xl bg-[#F0F9FF] dark:bg-sky-500/10 flex items-center justify-center shrink-0">
+                                            <Wrench className="w-4.5 h-4.5 text-[#0EA5E9]" />
+                                        </div>
+                                        <div className="min-w-0">
+                                            <p className="font-semibold text-[#0F172A] dark:text-white text-sm truncate">{item.title}</p>
+                                            <p className="text-[11px] text-[#64748B] dark:text-slate-400 mt-0.5">{item.location}</p>
+                                        </div>
                                     </div>
-                                    <div className="min-w-0">
-                                        <p className="font-bold text-foreground text-sm truncate">{item.title}</p>
-                                        <p className="text-xs text-slate-500 dark:text-foreground/40">{item.location}</p>
+                                    <div className="text-right shrink-0">
+                                        <p className="text-sm font-semibold text-[#0F172A] dark:text-white">{item.due}</p>
+                                        <p className="text-[11px] font-semibold text-[#0EA5E9] mt-0.5">{item.status}</p>
                                     </div>
                                 </div>
-                                <div className="text-right shrink-0">
-                                    <p className="text-xs font-bold text-foreground">{item.due}</p>
-                                    <p className="text-[10px] font-black text-amber-600 dark:text-amber-400 uppercase tracking-widest">{item.status}</p>
-                                </div>
-                            </div>
-                        ))}
+                            ))}
+                        </div>
                     </div>
                 </div>
             </motion.div>
 
             {/* ── Active Ticket Queue ── */}
-            <motion.div variants={fadeInUp} className="bg-card border border-slate-200 dark:border-border rounded-3xl shadow-sm overflow-hidden">
-                <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 px-6 py-5 border-b border-slate-200 dark:border-border">
-                    <h3 className="text-lg font-bold text-foreground">Active Ticket Queue</h3>
+            <motion.div variants={fadeInUp} className="bg-white dark:bg-slate-800/60 rounded-xl border border-[#E2E8F0] dark:border-slate-700 shadow-sm overflow-hidden">
+                <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 px-6 py-5 border-b border-[#E2E8F0] dark:border-slate-700">
+                    <h3 className="text-sm font-bold text-[#0F172A] dark:text-white flex items-center gap-2">
+                        <ListTodo className="w-4 h-4 text-[#0EA5E9]" /> Active Ticket Queue
+                    </h3>
                     <div className="relative">
-                        <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
+                        <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[#64748B]" />
                         <input
                             value={search}
                             onChange={e => setSearch(e.target.value)}
                             placeholder="Search tickets..."
-                            className="pl-9 pr-4 py-2 bg-slate-100 dark:bg-foreground/5 border border-slate-200 dark:border-border rounded-xl text-sm font-bold text-foreground placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-amber-500/40 w-52"
+                            className="pl-9 pr-4 py-2 bg-slate-50 dark:bg-slate-800 border border-[#E2E8F0] dark:border-slate-700 rounded-lg text-sm text-[#0F172A] dark:text-white placeholder:text-[#64748B] focus:outline-none focus:ring-2 focus:ring-[#0EA5E9]/50 w-full sm:w-64 transition-all"
                         />
                     </div>
                 </div>
-                <div className="divide-y divide-slate-100 dark:divide-border/50">
+                <div className="divide-y divide-[#E2E8F0] dark:divide-slate-700">
                     {loading ? (
-                        <div className="flex items-center justify-center py-12">
-                            <Loader2 className="w-5 h-5 animate-spin text-slate-400" />
-                            <span className="ml-2 text-sm text-slate-400 font-medium">Loading tickets...</span>
+                        <div className="flex items-center justify-center py-12 text-[#64748B]">
+                            <Loader2 className="w-5 h-5 animate-spin text-[#0EA5E9]" />
+                            <span className="ml-2 text-sm font-medium">Loading tickets...</span>
                         </div>
                     ) : activeTasks.length === 0 ? (
-                        <div className="text-center py-12">
-                            <Wrench className="w-10 h-10 text-slate-300 dark:text-foreground/20 mx-auto mb-3" />
-                            <p className="text-sm font-bold text-slate-500 dark:text-foreground/40">No active tickets</p>
-                            <p className="text-xs text-slate-400 mt-1">All maintenance tasks are completed</p>
+                        <div className="text-center py-12 px-4">
+                            <div className="w-14 h-14 rounded-2xl bg-[#F0F9FF] flex items-center justify-center mx-auto mb-3">
+                                <Wrench className="w-7 h-7 text-[#0EA5E9]" />
+                            </div>
+                            <p className="font-semibold text-[#0F172A] dark:text-white">No active tickets</p>
+                            <p className="text-sm text-[#64748B] mt-1">All maintenance tasks are completed.</p>
                         </div>
                     ) : (
                         activeTasks.map(task => {
                             const priorityColors: Record<string, string> = {
-                                High: "bg-red-50 text-red-700 border-red-200 dark:bg-red-500/10 dark:text-red-400 dark:border-red-500/20",
+                                High: "bg-rose-50 text-rose-700 border-rose-200 dark:bg-rose-500/10 dark:text-rose-400 dark:border-rose-500/20",
                                 Medium: "bg-amber-50 text-amber-700 border-amber-200 dark:bg-amber-500/10 dark:text-amber-400 dark:border-amber-500/20",
-                                Low: "bg-slate-100 text-slate-600 border-slate-200 dark:bg-white/5 dark:text-foreground/50 dark:border-border",
+                                Low: "bg-slate-50 text-slate-700 border-slate-200 dark:bg-slate-500/10 dark:text-slate-300 dark:border-slate-500/20",
                             };
                             const statusColors: Record<string, string> = {
-                                "Pending": "bg-slate-100 text-slate-700 border-slate-200 dark:bg-white/5 dark:text-foreground/50 dark:border-border",
-                                "In Progress": "bg-blue-50 text-blue-700 border-blue-200 dark:bg-blue-500/10 dark:text-blue-400 dark:border-blue-500/20",
+                                "Pending": "bg-slate-50 text-slate-700 border-slate-200 dark:bg-slate-500/10 dark:text-slate-300 dark:border-slate-500/20",
+                                "In Progress": "bg-sky-50 text-sky-700 border-sky-200 dark:bg-sky-500/10 dark:text-sky-400 dark:border-sky-500/20",
                             };
                             return (
-                                <div key={task.rawId} className="flex items-center justify-between px-6 py-4 hover:bg-slate-50/50 dark:hover:bg-white/[0.02] transition-colors gap-4">
+                                <div key={task.rawId} className="flex flex-col sm:flex-row sm:items-center justify-between px-6 py-4 hover:bg-[#F8FAFC] dark:hover:bg-slate-700/30 transition-colors gap-4">
                                     <div className="flex items-center gap-4 min-w-0">
-                                        <div className="w-10 h-10 rounded-xl bg-amber-500/10 flex items-center justify-center shrink-0">
-                                            <Wrench className="w-5 h-5 text-amber-500" />
+                                        <div className="w-10 h-10 rounded-xl bg-[#F0F9FF] dark:bg-sky-500/10 flex items-center justify-center shrink-0">
+                                            <Wrench className="w-5 h-5 text-[#0EA5E9]" />
                                         </div>
                                         <div className="min-w-0">
-                                            <p className="text-sm font-bold text-foreground truncate">{task.title}</p>
-                                            <p className="text-xs text-slate-500 dark:text-foreground/40 mt-0.5">
-                                                {task.resourceName} • {task.requestedDate}
-                                            </p>
+                                            <p className="text-sm font-semibold text-[#0F172A] dark:text-white truncate">{task.title}</p>
+                                            <div className="flex items-center gap-2 mt-0.5">
+                                                <p className="text-[11px] text-[#64748B] dark:text-slate-400 truncate">
+                                                    {task.resourceName}
+                                                </p>
+                                                <span className="text-[#E2E8F0] dark:text-slate-600">·</span>
+                                                <p className="text-[11px] text-[#64748B] dark:text-slate-400 flex items-center gap-1">
+                                                    <Clock className="w-3 h-3" /> {task.requestedDate}
+                                                </p>
+                                            </div>
                                         </div>
                                     </div>
                                     <div className="flex items-center gap-2 shrink-0">
-                                        <span className={`text-[10px] font-bold px-2.5 py-1 rounded-full border ${priorityColors[task.priority]}`}>
+                                        <span className={`text-[11px] font-semibold px-2.5 py-0.5 rounded-full border ${priorityColors[task.priority]}`}>
                                             {task.priority}
                                         </span>
-                                        <span className={`text-[10px] font-bold px-2.5 py-1 rounded-full border ${statusColors[task.status]}`}>
+                                        <span className={`text-[11px] font-semibold px-2.5 py-0.5 rounded-full border ${statusColors[task.status]}`}>
                                             {task.status}
                                         </span>
                                         <button
                                             onClick={() => handleAdvanceStatus(task)}
-                                            className="flex items-center gap-1 text-[10px] font-black uppercase tracking-widest text-brand-primary hover:bg-brand-primary/10 px-2.5 py-1.5 rounded-lg transition-all border border-transparent hover:border-brand-primary/20 ml-1"
+                                            className="flex items-center gap-1 text-[11px] font-semibold text-white bg-[#0EA5E9] hover:bg-[#0284C7] px-3 py-1.5 rounded-lg transition-colors ml-2 shadow-sm shadow-sky-500/20"
                                         >
-                                            {task.rawStatus === "OPEN" ? "Start" : "Complete"} <ChevronRight className="w-3 h-3" />
+                                            {task.rawStatus === "OPEN" ? "Start" : "Complete"}
                                         </button>
                                     </div>
                                 </div>
@@ -356,23 +411,30 @@ export default function MaintenanceDashboard() {
 
             {/* Outcome Selection Modal */}
             {completingTask && (
-                <div className="fixed inset-0 bg-black/60 backdrop-blur-sm z-50 flex items-center justify-center p-4">
-                    <div className="bg-card border border-slate-200 dark:border-border rounded-3xl shadow-2xl w-full max-w-md overflow-hidden text-left">
-                        <div className="bg-slate-900 p-6 text-white relative font-sans">
-                            <h3 className="text-xl font-black">Select Maintenance Outcome</h3>
-                            <p className="text-slate-400 text-xs mt-1 font-medium">Specify resolution to update resource status</p>
+                <div className="fixed inset-0 bg-[#0F172A]/40 backdrop-blur-sm z-50 flex items-center justify-center p-4">
+                    <motion.div 
+                        initial={{ opacity: 0, scale: 0.95 }}
+                        animate={{ opacity: 1, scale: 1 }}
+                        className="bg-white dark:bg-slate-800 rounded-2xl border border-[#E2E8F0] dark:border-slate-700 shadow-xl w-full max-w-md overflow-hidden text-left"
+                    >
+                        <div className="p-6 border-b border-[#E2E8F0] dark:border-slate-700">
+                            <h3 className="text-lg font-bold text-[#0F172A] dark:text-white flex items-center gap-2">
+                                <CheckCircle2 className="w-5 h-5 text-[#0EA5E9]" />
+                                Complete Maintenance
+                            </h3>
+                            <p className="text-[#64748B] text-sm mt-1">Specify resolution to update resource status</p>
                         </div>
-                        <div className="p-6 space-y-4 font-sans">
+                        <div className="p-6 space-y-4">
                             <div className="space-y-3">
                                 {[
                                     { value: "Fixed", label: "Fixed (Available)", desc: "Set resource availability status to 'Available'" },
                                     { value: "Faulty", label: "Faulty (Under Maintenance)", desc: "Keep resource status as 'Under Maintenance'" },
                                     { value: "Decommissioned", label: "Decommissioned (Inactive)", desc: "Set resource status to 'Inactive' (retired)" }
                                 ].map(opt => (
-                                    <label key={opt.value} className={`flex items-start gap-3 p-3.5 rounded-2xl border-2 cursor-pointer transition-all ${
+                                    <label key={opt.value} className={`flex items-start gap-3 p-4 rounded-xl border cursor-pointer transition-all ${
                                         outcome === opt.value 
-                                            ? "border-amber-500 bg-amber-500/5 text-foreground" 
-                                            : "border-slate-200 dark:border-border text-foreground hover:bg-slate-50 dark:hover:bg-white/[0.02]"
+                                            ? "border-[#0EA5E9] bg-[#F0F9FF] dark:bg-sky-500/10 dark:border-sky-500/50 text-[#0F172A] dark:text-white" 
+                                            : "border-[#E2E8F0] dark:border-slate-700 text-[#0F172A] dark:text-white hover:bg-slate-50 dark:hover:bg-slate-700/50"
                                     }`}>
                                         <input 
                                             type="radio" 
@@ -380,20 +442,20 @@ export default function MaintenanceDashboard() {
                                             value={opt.value} 
                                             checked={outcome === opt.value} 
                                             onChange={() => setOutcome(opt.value as any)}
-                                            className="mt-1 accent-amber-500"
+                                            className="mt-1 accent-[#0EA5E9]"
                                         />
                                         <div>
-                                            <div className="font-bold text-sm">{opt.label}</div>
-                                            <div className="text-xs text-slate-400 dark:text-foreground/45 mt-0.5 font-medium">{opt.desc}</div>
+                                            <div className="font-semibold text-sm">{opt.label}</div>
+                                            <div className="text-[11px] text-[#64748B] dark:text-slate-400 mt-0.5">{opt.desc}</div>
                                         </div>
                                     </label>
                                 ))}
                             </div>
-                            <div className="flex gap-3 pt-2">
+                            <div className="flex gap-3 pt-4">
                                 <button 
                                     type="button" 
                                     onClick={() => setCompletingTask(null)}
-                                    className="flex-1 px-4 py-3 rounded-xl border border-slate-200 dark:border-border text-foreground font-black text-sm hover:bg-slate-50 dark:hover:bg-foreground/5 transition-all"
+                                    className="flex-1 px-4 py-2.5 rounded-xl border border-[#E2E8F0] dark:border-slate-700 text-[#0F172A] dark:text-white font-semibold text-sm hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors"
                                 >
                                     Cancel
                                 </button>
@@ -403,13 +465,13 @@ export default function MaintenanceDashboard() {
                                         await updateStatus(completingTask.rawId, "COMPLETED", outcome);
                                         setCompletingTask(null);
                                     }}
-                                    className="flex-1 px-4 py-3 rounded-xl bg-amber-500 hover:bg-amber-600 text-white font-black text-sm hover:opacity-90 transition-all flex items-center justify-center gap-2"
+                                    className="flex-1 px-4 py-2.5 rounded-xl bg-[#0EA5E9] hover:bg-[#0284C7] text-white font-semibold text-sm transition-colors flex items-center justify-center gap-2 shadow-sm shadow-sky-500/20"
                                 >
-                                    <CheckCircle2 className="w-4 h-4" /> Confirm & Complete
+                                    Confirm
                                 </button>
                             </div>
                         </div>
-                    </div>
+                    </motion.div>
                 </div>
             )}
         </motion.div>
diff --git a/components/dashboard/PersonalBookingDashboard.tsx b/components/dashboard/PersonalBookingDashboard.tsx
index 6a858be..afdfa31 100644
--- a/components/dashboard/PersonalBookingDashboard.tsx
+++ b/components/dashboard/PersonalBookingDashboard.tsx
@@ -118,18 +118,18 @@ const normalizeBookingStatus = (status: string) => {
 
 const getBookingStatusClasses = (statusLabel: string) => {
     if (statusLabel === "Confirmed") {
-        return "bg-emerald-50 dark:bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border border-emerald-100 dark:border-emerald-500/20";
+        return "bg-[#CCFBF1] text-[#0D9488] border border-teal-200 dark:bg-teal-500/10 dark:text-teal-300 dark:border-teal-500/20";
     }
     if (statusLabel === "Pending") {
-        return "bg-amber-50 dark:bg-amber-500/10 text-amber-600 dark:text-amber-400 border border-amber-100 dark:border-amber-500/20";
+        return "bg-amber-50 text-amber-700 border border-amber-200 dark:bg-amber-500/10 dark:text-amber-300 dark:border-amber-500/20";
     }
     if (statusLabel === "Cancelled") {
-        return "bg-red-50 dark:bg-red-500/10 text-red-600 dark:text-red-400 border border-red-100 dark:border-red-500/20";
+        return "bg-red-50 text-red-600 border border-red-200 dark:bg-red-500/10 dark:text-red-300 dark:border-red-500/20";
     }
     if (statusLabel === "Rejected") {
-        return "bg-rose-50 dark:bg-rose-500/10 text-rose-600 dark:text-rose-400 border border-rose-100 dark:border-rose-500/20";
+        return "bg-rose-50 text-rose-600 border border-rose-200 dark:bg-rose-500/10 dark:text-rose-300 dark:border-rose-500/20";
     }
-    return "bg-slate-100 dark:bg-white/5 text-slate-600 dark:text-foreground/60 border border-slate-200 dark:border-white/10";
+    return "bg-[#F0F9FF] text-[#0EA5E9] border border-sky-200 dark:bg-sky-500/10 dark:text-sky-300 dark:border-sky-500/20";
 };
 
 export default function PersonalBookingDashboard({
@@ -300,58 +300,58 @@ export default function PersonalBookingDashboard({
     const totalPages = Math.ceil(sortedBookings.length / pageSize) || 1;
 
     return (
-        <div className="space-y-8 text-foreground">
+        <div className="space-y-6 text-foreground">
             {/* ── Stats Cards Grid ── */}
             <div className="grid grid-cols-2 lg:grid-cols-5 gap-4">
                 {[
-                    { label: "Total Bookings", value: stats.total, icon: CalendarDays, color: "text-blue-500", bg: "bg-blue-500/10" },
-                    { label: "Active Now", value: stats.active, icon: CheckCircle2, color: "text-emerald-500", bg: "bg-emerald-500/10" },
-                    { label: "Upcoming", value: stats.upcoming, icon: ClockIcon, color: "text-amber-500", bg: "bg-amber-500/10" },
-                    { label: "Completed", value: stats.completed, icon: CheckCircle2, color: "text-purple-500", bg: "bg-purple-500/10" },
-                    { label: "Cancelled / Declined", value: stats.cancelledRejected, icon: XCircle, color: "text-rose-500", bg: "bg-rose-500/10" },
+                    { label: "Total Bookings", value: stats.total, icon: CalendarDays, bg: "#F0F9FF", fg: "#0EA5E9" },
+                    { label: "Active Now", value: stats.active, icon: CheckCircle2, bg: "#CCFBF1", fg: "#0D9488" },
+                    { label: "Upcoming", value: stats.upcoming, icon: ClockIcon, bg: "#FFFBEB", fg: "#D97706" },
+                    { label: "Completed", value: stats.completed, icon: CheckCircle2, bg: "#F5F3FF", fg: "#7C3AED" },
+                    { label: "Cancelled / Declined", value: stats.cancelledRejected, icon: XCircle, bg: "#FFF1F2", fg: "#E11D48" },
                 ].map((stat, i) => (
                     <motion.div
                         key={stat.label}
                         initial={{ opacity: 0, y: 15 }}
                         animate={{ opacity: 1, y: 0 }}
                         transition={{ duration: 0.35, delay: i * 0.05 }}
-                        className="bg-card border border-slate-200 dark:border-white/[0.06] rounded-2xl p-5 shadow-sm hover:shadow-md hover:scale-[1.02] transition-all"
+                        className="bg-white dark:bg-slate-800/60 border border-[#E2E8F0] dark:border-slate-700 rounded-xl p-5 shadow-sm hover:shadow-md hover:-translate-y-0.5 transition-all duration-200"
                     >
-                        <div className={`w-10 h-10 rounded-xl ${stat.bg} flex items-center justify-center mb-3`}>
-                            <stat.icon className={`w-5 h-5 ${stat.color}`} />
+                        <div className="w-10 h-10 rounded-xl flex items-center justify-center mb-3" style={{ backgroundColor: stat.bg }}>
+                            <stat.icon className="w-5 h-5" style={{ color: stat.fg }} />
                         </div>
-                        <p className="text-[10px] font-black text-slate-500 dark:text-foreground/40 uppercase tracking-widest leading-none mb-1">
+                        <p className="text-[11px] font-semibold text-[#64748B] dark:text-slate-400 uppercase tracking-wider leading-none mb-1">
                             {stat.label}
                         </p>
-                        <p className="text-3xl font-black text-foreground">{loadingBookings ? "—" : stat.value}</p>
+                        <p className="text-3xl font-bold text-[#0F172A] dark:text-white">{loadingBookings ? "—" : stat.value}</p>
                     </motion.div>
                 ))}
             </div>
 
             {/* ── Toolbar & Filters ── */}
-            <div className="bg-white dark:bg-slate-900/60 p-5 rounded-3xl border border-slate-100 dark:border-white/[0.06] shadow-sm space-y-4">
+            <div className="bg-white dark:bg-slate-800/60 p-5 rounded-xl border border-[#E2E8F0] dark:border-slate-700 shadow-sm space-y-4">
                 <div className="flex flex-col lg:flex-row gap-4">
                     {/* Search Input */}
                     <div className="relative flex-1 group">
-                        <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-400 group-focus-within:text-brand-primary transition-colors" />
+                        <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-4.5 h-4.5 text-[#64748B] group-focus-within:text-[#0EA5E9] transition-colors" />
                         <input
                             type="text"
                             value={searchQuery}
                             onChange={(e) => setSearchQuery(e.target.value)}
                             placeholder="Search by resource name, location, or type..."
-                            className="w-full pl-12 pr-4 py-3 bg-slate-50 dark:bg-[#0c0a14] border border-slate-200 dark:border-white/10 rounded-2xl text-sm font-semibold text-foreground focus:outline-none focus:ring-4 focus:ring-brand-primary/10 transition-all"
+                            className="w-full pl-11 pr-4 py-2.5 bg-[#F8FAFC] dark:bg-slate-900 border border-[#E2E8F0] dark:border-slate-600 rounded-lg text-sm font-medium text-[#0F172A] dark:text-white placeholder:text-[#94A3B8] focus:outline-none focus:border-[#0EA5E9] focus:ring-2 focus:ring-[#0EA5E9]/15 transition-all"
                         />
                     </div>
 
                     {/* Filter by Resource Type */}
                     <div className="flex flex-wrap sm:flex-nowrap gap-4">
                         <div className="flex items-center gap-2">
-                            <Filter className="w-4 h-4 text-slate-400 shrink-0" />
-                            <span className="text-xs font-bold text-slate-500 dark:text-foreground/45 uppercase tracking-wider whitespace-nowrap">Type:</span>
+                            <Filter className="w-4 h-4 text-[#64748B] shrink-0" />
+                            <span className="text-xs font-semibold text-[#64748B] uppercase tracking-wider whitespace-nowrap">Type:</span>
                             <select
                                 value={resourceTypeFilter}
                                 onChange={(e) => setResourceTypeFilter(e.target.value)}
-                                className="px-3 py-2 border border-slate-200 dark:border-white/10 rounded-xl text-xs font-bold text-slate-700 dark:text-foreground/80 bg-slate-50 dark:bg-[#0c0a14] focus:outline-none focus:ring-2 focus:ring-brand-primary transition-colors min-w-[120px]"
+                                className="px-3 py-2 border border-[#E2E8F0] dark:border-slate-600 rounded-lg text-xs font-semibold text-[#0F172A] dark:text-white bg-[#F8FAFC] dark:bg-slate-900 focus:outline-none focus:border-[#0EA5E9] focus:ring-2 focus:ring-[#0EA5E9]/15 transition-colors min-w-[120px]"
                             >
                                 {resourceTypes.map((type) => (
                                     <option key={type} value={type}>
@@ -363,12 +363,12 @@ export default function PersonalBookingDashboard({
 
                         {/* Sort Option */}
                         <div className="flex items-center gap-2">
-                            <ArrowUpDown className="w-4 h-4 text-slate-400 shrink-0" />
-                            <span className="text-xs font-bold text-slate-500 dark:text-foreground/45 uppercase tracking-wider whitespace-nowrap">Sort:</span>
+                            <ArrowUpDown className="w-4 h-4 text-[#64748B] shrink-0" />
+                            <span className="text-xs font-semibold text-[#64748B] uppercase tracking-wider whitespace-nowrap">Sort:</span>
                             <select
                                 value={sortOption}
                                 onChange={(e) => setSortOption(e.target.value)}
-                                className="px-3 py-2 border border-slate-200 dark:border-white/10 rounded-xl text-xs font-bold text-slate-700 dark:text-foreground/80 bg-slate-50 dark:bg-[#0c0a14] focus:outline-none focus:ring-2 focus:ring-brand-primary transition-colors min-w-[150px]"
+                                className="px-3 py-2 border border-[#E2E8F0] dark:border-slate-600 rounded-lg text-xs font-semibold text-[#0F172A] dark:text-white bg-[#F8FAFC] dark:bg-slate-900 focus:outline-none focus:border-[#0EA5E9] focus:ring-2 focus:ring-[#0EA5E9]/15 transition-colors min-w-[150px]"
                             >
                                 <option value="date-desc">Date (Newest First)</option>
                                 <option value="date-asc">Date (Oldest First)</option>
@@ -380,7 +380,7 @@ export default function PersonalBookingDashboard({
                 </div>
 
                 {/* Status Tabs */}
-                <div className="flex flex-wrap gap-2 border-t border-slate-100 dark:border-white/[0.04] pt-4">
+                <div className="flex flex-wrap gap-2 border-t border-[#E2E8F0] dark:border-slate-700 pt-4">
                     {[
                         { id: "All", label: "All Bookings" },
                         { id: "Active", label: "Active" },
@@ -393,10 +393,10 @@ export default function PersonalBookingDashboard({
                         <button
                             key={status.id}
                             onClick={() => setStatusFilter(status.id)}
-                            className={`px-4 py-2 rounded-xl text-xs font-black transition-all ${
+                            className={`px-4 py-1.5 rounded-full text-xs font-semibold transition-all ${
                                 statusFilter === status.id
-                                    ? "bg-brand-primary text-white shadow-md shadow-brand-primary/20"
-                                    : "bg-slate-50 dark:bg-white/5 text-slate-650 dark:text-foreground/60 hover:bg-slate-100 dark:hover:bg-white/10"
+                                    ? "bg-[#0EA5E9] text-white shadow-sm shadow-sky-500/20"
+                                    : "bg-[#F0F9FF] text-[#0EA5E9] hover:bg-[#E0F2FE] dark:bg-sky-500/10 dark:text-sky-300 dark:hover:bg-sky-500/20"
                             }`}
                         >
                             {status.label}
@@ -442,7 +442,7 @@ export default function PersonalBookingDashboard({
                             "my_bookings"
                         );
                     }}
-                    className="inline-flex items-center gap-2 bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 hover:bg-slate-50 dark:hover:bg-white/10 active:scale-95 text-slate-700 dark:text-foreground/80 font-semibold px-4 py-2.5 rounded-xl shadow-sm transition-all duration-200 text-sm"
+                    className="inline-flex items-center gap-2 bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 hover:bg-slate-50 dark:hover:bg-white/10 active:scale-95 text-slate-700 dark:text-foreground/80 font-semibold px-4 py-2.5 rounded-none shadow-sm transition-all duration-200 text-sm"
                 >
                     <DownloadCloud className="w-4 h-4 text-emerald-500" />
                     <span>Export CSV</span>
@@ -450,7 +450,7 @@ export default function PersonalBookingDashboard({
             </div>
 
             {/* ── Bookings Grid / Table List ── */}
-            <div className="bg-white dark:bg-slate-900/60 rounded-3xl border border-slate-100 dark:border-white/[0.06] shadow-sm overflow-hidden">
+            <div className="bg-white dark:bg-slate-900/60 rounded-none border border-slate-100 dark:border-white/[0.06] shadow-sm overflow-hidden">
                 <div className="overflow-x-auto">
                     <table className="w-full text-left">
                         <thead>
@@ -467,7 +467,7 @@ export default function PersonalBookingDashboard({
                                 <tr>
                                     <td colSpan={5} className="px-6 py-12 text-center text-sm font-semibold text-slate-400">
                                         <div className="flex items-center justify-center gap-2">
-                                            <div className="w-4 h-4 border-2 border-brand-primary border-t-transparent rounded-full animate-spin"></div>
+                                            <div className="w-4 h-4 border-2 border-brand-primary border-t-transparent rounded-none animate-spin"></div>
                                             Loading your bookings...
                                         </div>
                                     </td>
@@ -504,7 +504,7 @@ export default function PersonalBookingDashboard({
                                             {/* Resource name */}
                                             <td className="px-6 py-5">
                                                 <div className="flex items-center gap-4">
-                                                    <div className="w-10 h-10 rounded-2xl bg-brand-primary/5 flex items-center justify-center shrink-0">
+                                                    <div className="w-10 h-10 rounded-none bg-brand-primary/5 flex items-center justify-center shrink-0">
                                                         <MapPin className="w-5 h-5 text-brand-primary" />
                                                     </div>
                                                     <div className="min-w-0">
@@ -539,7 +539,7 @@ export default function PersonalBookingDashboard({
 
                                             {/* Status Badge */}
                                             <td className="px-6 py-5">
-                                                <span className={`inline-flex px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest shadow-sm ${getBookingStatusClasses(statusLabel)}`}>
+                                                <span className={`inline-flex px-3 py-1 rounded-none text-[10px] font-black uppercase tracking-widest shadow-sm ${getBookingStatusClasses(statusLabel)}`}>
                                                     {statusLabel}
                                                 </span>
                                             </td>
@@ -551,7 +551,7 @@ export default function PersonalBookingDashboard({
                                                         e.stopPropagation();
                                                         setActiveDropdown(activeDropdown === booking.id ? null : booking.id);
                                                     }}
-                                                    className="p-2 hover:bg-slate-100 dark:hover:bg-white/5 rounded-xl transition-colors text-slate-400 hover:text-slate-600 dark:hover:text-foreground"
+                                                    className="p-2 hover:bg-slate-100 dark:hover:bg-white/5 rounded-none transition-colors text-slate-400 hover:text-slate-600 dark:hover:text-foreground"
                                                 >
                                                     <MoreVertical className="w-5 h-5" />
                                                 </button>
@@ -563,7 +563,7 @@ export default function PersonalBookingDashboard({
                                                             animate={{ opacity: 1, scale: 1 }}
                                                             exit={{ opacity: 0, scale: 0.95 }}
                                                             transition={{ duration: 0.1 }}
-                                                            className="absolute right-8 top-12 z-20 w-48 bg-white dark:bg-slate-950 rounded-xl shadow-xl border border-slate-100 dark:border-white/10 overflow-hidden text-left"
+                                                            className="absolute right-8 top-12 z-20 w-48 bg-white dark:bg-slate-950 rounded-none border-2 border-foreground shadow-[4px_4px_0_0_rgba(0,0,0,1)] dark:shadow-[4px_4px_0_0_rgba(255,255,255,0.2)] border border-slate-100 dark:border-white/10 overflow-hidden text-left"
                                                         >
                                                             <div className="py-1">
                                                                 <button
@@ -643,7 +643,7 @@ export default function PersonalBookingDashboard({
                                 initial={{ opacity: 0 }}
                                 animate={{ opacity: 1 }}
                                 exit={{ opacity: 0 }}
-                                className="absolute inset-0 bg-black/50 backdrop-blur-sm"
+                                className="absolute inset-0 bg-black/50 "
                                 onClick={() => setSelectedBooking(null)}
                             />
 
@@ -652,7 +652,7 @@ export default function PersonalBookingDashboard({
                                 initial={{ opacity: 0, scale: 0.95, y: 10 }}
                                 animate={{ opacity: 1, scale: 1, y: 0 }}
                                 exit={{ opacity: 0, scale: 0.95, y: 10 }}
-                                className="relative w-full max-w-lg bg-white dark:bg-slate-900 rounded-3xl shadow-2xl border border-slate-100 dark:border-slate-800 overflow-hidden"
+                                className="relative w-full max-w-lg bg-white dark:bg-slate-900 rounded-none border-2 border-foreground shadow-[4px_4px_0_0_rgba(0,0,0,1)] dark:shadow-[4px_4px_0_0_rgba(255,255,255,0.2)] border border-slate-100 dark:border-slate-800 overflow-hidden"
                             >
                                 {/* Header */}
                                 <div className="flex items-center justify-between px-6 py-5 border-b border-slate-100 dark:border-slate-800">
@@ -662,7 +662,7 @@ export default function PersonalBookingDashboard({
                                     </div>
                                     <button
                                         onClick={() => setSelectedBooking(null)}
-                                        className="p-2 hover:bg-slate-100 dark:hover:bg-white/5 rounded-xl transition-colors text-slate-400 hover:text-slate-600 dark:hover:text-foreground"
+                                        className="p-2 hover:bg-slate-100 dark:hover:bg-white/5 rounded-none transition-colors text-slate-400 hover:text-slate-600 dark:hover:text-foreground"
                                     >
                                         <X className="w-5 h-5" />
                                     </button>
@@ -675,8 +675,8 @@ export default function PersonalBookingDashboard({
                                         <h4 className="text-[10px] font-black uppercase tracking-widest text-slate-400 dark:text-foreground/40 leading-none">
                                             Resource Information
                                         </h4>
-                                        <div className="bg-slate-50 dark:bg-white/[0.02] border border-slate-100 dark:border-white/[0.04] p-4 rounded-2xl flex items-start gap-4">
-                                            <div className="w-10 h-10 rounded-2xl bg-brand-primary/5 flex items-center justify-center shrink-0">
+                                        <div className="bg-slate-50 dark:bg-white/[0.02] border border-slate-100 dark:border-white/[0.04] p-4 rounded-none flex items-start gap-4">
+                                            <div className="w-10 h-10 rounded-none bg-brand-primary/5 flex items-center justify-center shrink-0">
                                                 <MapPin className="w-5 h-5 text-brand-primary" />
                                             </div>
                                             <div>
@@ -736,7 +736,7 @@ export default function PersonalBookingDashboard({
                                         <span className="text-[10px] font-black uppercase tracking-widest text-slate-400 dark:text-foreground/40 leading-none">
                                             Booking Purpose
                                         </span>
-                                        <div className="bg-slate-50 dark:bg-white/[0.02] border border-slate-100 dark:border-white/[0.04] p-4 rounded-2xl text-sm font-semibold text-slate-650 dark:text-foreground/70 min-h-[60px]">
+                                        <div className="bg-slate-50 dark:bg-white/[0.02] border border-slate-100 dark:border-white/[0.04] p-4 rounded-none text-sm font-semibold text-slate-650 dark:text-foreground/70 min-h-[60px]">
                                             {(selectedBooking as any).purpose || "No purpose provided."}
                                         </div>
                                     </div>
@@ -748,7 +748,7 @@ export default function PersonalBookingDashboard({
                                                 Status
                                             </span>
                                             <div className="flex items-center gap-2 mt-1">
-                                                <span className={`inline-flex px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest shadow-sm ${getBookingStatusClasses(statusLabel)}`}>
+                                                <span className={`inline-flex px-3 py-1 rounded-none text-[10px] font-black uppercase tracking-widest shadow-sm ${getBookingStatusClasses(statusLabel)}`}>
                                                     {statusLabel}
                                                 </span>
                                             </div>
@@ -772,7 +772,7 @@ export default function PersonalBookingDashboard({
                                     <button
                                         type="button"
                                         onClick={() => setSelectedBooking(null)}
-                                        className="px-5 py-2.5 border border-slate-200 dark:border-white/10 rounded-2xl text-sm font-bold text-slate-600 dark:text-foreground/60 hover:bg-slate-50 dark:hover:bg-white/5 transition-colors"
+                                        className="px-5 py-2.5 border border-slate-200 dark:border-white/10 rounded-none text-sm font-bold text-slate-600 dark:text-foreground/60 hover:bg-slate-50 dark:hover:bg-white/5 transition-colors"
                                     >
                                         Close
                                     </button>
@@ -783,7 +783,7 @@ export default function PersonalBookingDashboard({
                                                 onEditBooking(selectedBooking);
                                                 setSelectedBooking(null);
                                             }}
-                                            className="px-5 py-2.5 bg-brand-primary text-white font-bold rounded-2xl hover:bg-brand-secondary transition-all"
+                                            className="px-5 py-2.5 bg-brand-primary text-white font-bold rounded-none hover:bg-brand-secondary transition-all"
                                         >
                                             Edit
                                         </button>
@@ -797,7 +797,7 @@ export default function PersonalBookingDashboard({
                                                     setSelectedBooking(null);
                                                 }
                                             }}
-                                            className="px-5 py-2.5 bg-amber-600 text-white font-bold rounded-2xl hover:bg-amber-700 transition-all"
+                                            className="px-5 py-2.5 bg-amber-600 text-white font-bold rounded-none hover:bg-amber-700 transition-all"
                                         >
                                             Cancel Booking
                                         </button>
diff --git a/components/dashboard/StudentDashboard.tsx b/components/dashboard/StudentDashboard.tsx
index b8bac99..0aebceb 100644
--- a/components/dashboard/StudentDashboard.tsx
+++ b/components/dashboard/StudentDashboard.tsx
@@ -15,32 +15,98 @@ import {
     XCircle,
     Loader2,
     CalendarCheck,
+    Bell,
+    TrendingUp,
+    Zap,
+    Star,
+    ChevronRight,
+    MapPin,
 } from "lucide-react";
 
+/* ─── URMS Light Blue Design System ───────────────────────
+   primary     : #0EA5E9 (Sky 500)
+   primary-dark: #0284C7 (Sky 600)
+   teal        : #0D9488
+   teal-light  : #CCFBF1
+   ink-main    : #0F172A
+   ink-muted   : #64748B
+   surface     : #FFFFFF
+   bg-base     : #F8FAFC
+   border      : #E2E8F0
+──────────────────────────────────────────────────────────── */
+
 const API = process.env.NEXT_PUBLIC_API_URL || "http://localhost:5000";
 
 const fadeInUp = {
-    hidden: { opacity: 0, y: 20 },
-    visible: { opacity: 1, y: 0, transition: { duration: 0.45 } },
+    hidden: { opacity: 0, y: 24 },
+    visible: { opacity: 1, y: 0, transition: { duration: 0.5, ease: "easeOut" as const } },
 };
-const staggerContainer = {
+const stagger = {
     hidden: { opacity: 0 },
-    visible: { opacity: 1, transition: { staggerChildren: 0.1 } },
+    visible: { opacity: 1, transition: { staggerChildren: 0.08 } },
+};
+const cardVariant = {
+    hidden: { opacity: 0, y: 16 },
+    visible: { opacity: 1, y: 0, transition: { duration: 0.4 } },
 };
 
 interface Booking {
     id: string;
     resource_name?: string;
-    resources?: { name: string };
+    resources?: { name: string; type?: string; location?: string };
     start_time: string;
     end_time: string;
     status: string;
+    purpose?: string;
 }
 
+const fmt = (d: string) => {
+    try {
+        return new Date(d).toLocaleString("en-US", {
+            weekday: "short", month: "short", day: "numeric",
+            hour: "2-digit", minute: "2-digit", hour12: true,
+        });
+    } catch { return d; }
+};
+
+const fmtDate = (d: string) => {
+    try {
+        return new Date(d).toLocaleDateString("en-US", { month: "short", day: "numeric" });
+    } catch { return d; }
+};
+
+const fmtTime = (d: string) => {
+    try {
+        return new Date(d).toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit", hour12: true });
+    } catch { return d; }
+};
+
+// Status pill component
+const StatusPill = ({ status }: { status: string }) => {
+    const map: Record<string, string> = {
+        Approved: "bg-teal-50 text-teal-700 border border-teal-200 dark:bg-teal-500/10 dark:text-teal-300 dark:border-teal-500/20",
+        Pending: "bg-amber-50 text-amber-700 border border-amber-200 dark:bg-amber-500/10 dark:text-amber-300 dark:border-amber-500/20",
+        Rejected: "bg-red-50 text-red-700 border border-red-200 dark:bg-red-500/10 dark:text-red-300 dark:border-red-500/20",
+    };
+    return (
+        <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-[11px] font-semibold ${map[status] || map.Pending}`}>
+            {status}
+        </span>
+    );
+};
+
 export default function StudentDashboard() {
     const { profile, user } = useAuth();
     const [bookings, setBookings] = useState<Booking[]>([]);
     const [loading, setLoading] = useState(true);
+    const [greeting, setGreeting] = useState("Hello");
+
+    useEffect(() => {
+        const h = new Date().getHours();
+        if (h < 12) setGreeting("Good morning");
+        else if (h < 17) setGreeting("Good afternoon");
+        else setGreeting("Good evening");
+    }, []);
 
     const fetchBookings = useCallback(async () => {
         setLoading(true);
@@ -65,188 +131,211 @@ export default function StudentDashboard() {
     const pending = bookings.filter(b => b.status === "Pending");
     const approved = bookings.filter(b => b.status === "Approved");
     const rejected = bookings.filter(b => b.status === "Rejected");
-    const nextBooking = approved[0];
+    const nextBooking = approved.find(b => new Date(b.start_time) > new Date());
+    const todayCount = bookings.filter(b => {
+        const d = new Date(b.start_time);
+        const today = new Date();
+        return d.toDateString() === today.toDateString();
+    }).length;
 
-    const formatTime = (dateStr: string) => {
-        try {
-            return new Date(dateStr).toLocaleString("en-US", {
-                weekday: "short", month: "short", day: "numeric",
-                hour: "2-digit", minute: "2-digit", hour12: true,
-            });
-        } catch { return dateStr; }
-    };
+    const stats = [
+        { label: "Total Bookings", value: bookings.length, icon: CalendarCheck, color: "sky", bg: "#F0F9FF", fg: "#0EA5E9" },
+        { label: "Approved", value: approved.length, icon: CheckCircle2, color: "teal", bg: "#CCFBF1", fg: "#0D9488" },
+        { label: "Pending", value: pending.length, icon: Clock, color: "amber", bg: "#FFFBEB", fg: "#D97706" },
+        { label: "Rejected", value: rejected.length, icon: XCircle, color: "rose", bg: "#FFF1F2", fg: "#E11D48" },
+    ];
+
+    const quickActions = [
+        { href: "/resources", label: "Reserve Resource", icon: PackagePlus, color: "#0EA5E9", bg: "#F0F9FF", desc: "Book a lab or hall" },
+        { href: "/bookings?view=my", label: "My Bookings", icon: BookOpen, color: "#0D9488", bg: "#CCFBF1", desc: "View all reservations" },
+        { href: "/bookings?view=status", label: "Booking Status", icon: CalendarCheck, color: "#7C3AED", bg: "#F5F3FF", desc: "Track approvals" },
+        { href: "/notifications", label: "Notifications", icon: Bell, color: "#D97706", bg: "#FFFBEB", desc: "Updates & alerts" },
+    ];
 
     return (
-        <motion.div variants={staggerContainer} initial="hidden" animate="visible" className="space-y-8">
-            {/* ── Welcome Header ── */}
-            <motion.header variants={fadeInUp}>
-                <h1 className="text-3xl md:text-4xl font-black text-foreground tracking-tight">
-                    Student Hub
-                </h1>
-                <p className="text-slate-600 dark:text-foreground/50 mt-2 text-lg font-medium">
-                    Hi {profile?.name?.split(" ")[0] || "Student"}, ready to learn? 📚
-                </p>
-            </motion.header>
-
-            {/* ── Status Alerts ── */}
+        <motion.div variants={stagger} initial="hidden" animate="visible" className="space-y-6">
+
+            {/* ── Welcome Hero Banner ── */}
+            <motion.div variants={fadeInUp} className="relative overflow-hidden rounded-2xl bg-gradient-to-br from-[#0EA5E9] to-[#0284C7] p-6 md:p-8 text-white shadow-lg shadow-sky-500/20">
+                {/* Decorative circles */}
+                <div className="absolute -top-12 -right-12 w-48 h-48 rounded-full bg-white/10 pointer-events-none" />
+                <div className="absolute -bottom-8 -left-8 w-36 h-36 rounded-full bg-white/5 pointer-events-none" />
+                <div className="absolute top-4 right-32 w-20 h-20 rounded-full bg-[#0D9488]/20 pointer-events-none" />
+
+                <div className="relative z-10 flex flex-col md:flex-row md:items-center justify-between gap-4">
+                    <div>
+                        <div className="flex items-center gap-2 mb-2">
+                            <span className="inline-flex items-center gap-1.5 bg-white/20 backdrop-blur-sm px-3 py-1 rounded-full text-[11px] font-semibold uppercase tracking-wider">
+                                <Star className="w-3 h-3" /> Student Hub
+                            </span>
+                        </div>
+                        <h1 className="text-2xl md:text-3xl font-bold tracking-tight">
+                            {greeting}, {profile?.name?.split(" ")[0] || "Student"} 👋
+                        </h1>
+                        <p className="mt-1.5 text-sky-100 text-sm font-medium">
+                            {new Date().toLocaleDateString("en-US", { weekday: "long", year: "numeric", month: "long", day: "numeric" })}
+                        </p>
+                        {todayCount > 0 && (
+                            <p className="mt-2 text-sky-200 text-sm">
+                                You have <span className="text-white font-bold">{todayCount} booking{todayCount !== 1 ? "s" : ""}</span> today
+                            </p>
+                        )}
+                    </div>
+
+                    {/* Next Booking Preview */}
+                    {nextBooking && (
+                        <div className="bg-white/15 backdrop-blur-sm rounded-xl p-4 min-w-[220px] border border-white/20">
+                            <p className="text-[10px] font-bold uppercase tracking-widest text-sky-200 mb-1">Next Booking</p>
+                            <p className="font-bold text-white text-sm leading-tight">
+                                {nextBooking.resources?.name || nextBooking.resource_name || "Resource"}
+                            </p>
+                            <p className="text-sky-200 text-xs mt-1 flex items-center gap-1">
+                                <Calendar className="w-3 h-3" />
+                                {fmtDate(nextBooking.start_time)} · {fmtTime(nextBooking.start_time)}
+                            </p>
+                            <Link href="/bookings?view=my" className="mt-3 inline-flex items-center gap-1 text-[11px] font-semibold text-white bg-white/20 hover:bg-white/30 px-3 py-1.5 rounded-lg transition-colors">
+                                View Details <ArrowRight className="w-3 h-3" />
+                            </Link>
+                        </div>
+                    )}
+                </div>
+            </motion.div>
+
+            {/* ── Pending Alert ── */}
             {pending.length > 0 && (
-                <motion.div
-                    variants={fadeInUp}
-                    className="flex items-center gap-3 p-4 bg-amber-50 dark:bg-amber-500/10 border border-amber-200 dark:border-amber-500/20 rounded-2xl"
-                >
-                    <div className="p-2 bg-amber-100 dark:bg-amber-500/20 rounded-xl shrink-0">
-                        <AlertCircle className="w-5 h-5 text-amber-600 dark:text-amber-400" />
+                <motion.div variants={fadeInUp} className="flex items-center gap-3 p-4 bg-amber-50 dark:bg-amber-500/10 border border-amber-200 dark:border-amber-500/25 rounded-xl">
+                    <div className="w-9 h-9 rounded-lg bg-amber-100 dark:bg-amber-500/20 flex items-center justify-center shrink-0">
+                        <AlertCircle className="w-4.5 h-4.5 text-amber-600 dark:text-amber-400" />
                     </div>
-                    <div>
-                        <p className="text-sm font-bold text-amber-800 dark:text-amber-300">
-                            {pending.length} booking{pending.length !== 1 ? "s" : ""} pending approval
+                    <div className="flex-1 min-w-0">
+                        <p className="text-sm font-semibold text-amber-800 dark:text-amber-300">
+                            {pending.length} booking{pending.length !== 1 ? "s" : ""} awaiting approval
                         </p>
                         <p className="text-xs text-amber-600 dark:text-amber-400/70 mt-0.5">
-                            Waiting for lecturer/admin review
+                            Your request is being reviewed by a lecturer or admin
                         </p>
                     </div>
+                    <Link href="/bookings?view=status" className="shrink-0 text-xs font-semibold text-amber-700 dark:text-amber-400 hover:underline flex items-center gap-0.5">
+                        View <ChevronRight className="w-3.5 h-3.5" />
+                    </Link>
                 </motion.div>
             )}
 
             {/* ── Stat Cards ── */}
-            <motion.div variants={fadeInUp} className="grid grid-cols-2 lg:grid-cols-4 gap-4">
-                {[
-                    { label: "Total Bookings", value: bookings.length, icon: CalendarCheck, color: "blue" },
-                    { label: "Approved", value: approved.length, icon: CheckCircle2, color: "emerald" },
-                    { label: "Pending", value: pending.length, icon: Clock, color: "amber" },
-                    { label: "Rejected", value: rejected.length, icon: XCircle, color: "red" },
-                ].map(({ label, value, icon: Icon, color }) => (
-                    <div key={label} className="bg-card border border-slate-200 dark:border-border rounded-2xl p-5 shadow-sm hover:shadow-md transition-shadow">
-                        <div className={`w-10 h-10 rounded-xl bg-${color}-500/10 flex items-center justify-center mb-3`}>
-                            <Icon className={`w-5 h-5 text-${color}-500`} />
+            <motion.div variants={stagger} className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+                {stats.map(({ label, value, icon: Icon, bg, fg }) => (
+                    <motion.div
+                        key={label}
+                        variants={cardVariant}
+                        className="bg-white dark:bg-slate-800/60 rounded-xl p-5 border border-[#E2E8F0] dark:border-slate-700 shadow-sm hover:shadow-md hover:-translate-y-0.5 transition-all duration-200"
+                    >
+                        <div className="w-10 h-10 rounded-xl flex items-center justify-center mb-3" style={{ backgroundColor: bg }}>
+                            <Icon className="w-5 h-5" style={{ color: fg }} />
                         </div>
-                        <p className="text-[10px] font-black text-slate-500 dark:text-foreground/40 uppercase tracking-widest">{label}</p>
-                        <p className="text-3xl font-black text-foreground mt-1">{loading ? "—" : value}</p>
-                    </div>
+                        <p className="text-[11px] font-semibold text-[#64748B] dark:text-slate-400 uppercase tracking-wider">{label}</p>
+                        <p className="text-3xl font-bold text-[#0F172A] dark:text-white mt-1">
+                            {loading ? <Loader2 className="w-6 h-6 animate-spin opacity-30" /> : value}
+                        </p>
+                    </motion.div>
                 ))}
             </motion.div>
 
-            {/* ── Main content grid ── */}
-            <motion.div variants={fadeInUp} className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-                {/* Next Booking hero card */}
-                <div className="bg-gradient-to-br from-blue-600 to-cyan-600 dark:from-blue-800 dark:to-cyan-800 rounded-3xl p-8 text-white shadow-xl shadow-blue-900/20 relative overflow-hidden border border-blue-500/30">
-                    <div className="absolute -top-10 -right-10 opacity-15">
-                        <Calendar className="w-48 h-48" />
-                    </div>
-                    {nextBooking ? (
-                        <div className="relative z-10">
-                            <h3 className="text-lg font-bold mb-2 text-blue-100">Next Booking</h3>
-                            <p className="text-2xl md:text-3xl font-black mb-2 leading-tight">
-                                {nextBooking.resources?.name || nextBooking.resource_name || "Resource"}
-                            </p>
-                            <p className="text-blue-100 font-medium">{formatTime(nextBooking.start_time)}</p>
-                            <Link
-                                href="/bookings"
-                                className="mt-6 inline-flex items-center gap-2 bg-white/20 hover:bg-white/30 backdrop-blur-sm text-white px-5 py-2.5 rounded-xl font-bold text-sm transition-colors"
-                            >
-                                View Details <ArrowRight className="w-4 h-4" />
-                            </Link>
-                        </div>
-                    ) : (
-                        <div className="relative z-10">
-                            <h3 className="text-lg font-bold mb-2 text-blue-100">No Upcoming Bookings</h3>
-                            <p className="text-blue-200 font-medium">Browse resources to make your first reservation</p>
-                            <Link
-                                href="/resources"
-                                className="mt-6 inline-flex items-center gap-2 bg-white/20 hover:bg-white/30 backdrop-blur-sm text-white px-5 py-2.5 rounded-xl font-bold text-sm transition-colors"
-                            >
-                                Browse Resources <ArrowRight className="w-4 h-4" />
-                            </Link>
-                        </div>
-                    )}
+            {/* ── Quick Actions ── */}
+            <motion.div variants={fadeInUp}>
+                <div className="flex items-center justify-between mb-4">
+                    <h2 className="text-base font-bold text-[#0F172A] dark:text-white flex items-center gap-2">
+                        <Zap className="w-4 h-4 text-[#0EA5E9]" /> Quick Actions
+                    </h2>
                 </div>
-
-                {/* Quick Actions */}
-                <div className="bg-card border border-slate-200 dark:border-border rounded-3xl p-6 shadow-sm">
-                    <h3 className="text-lg font-bold text-foreground mb-5">Quick Actions</h3>
-                    <div className="grid grid-cols-2 gap-4">
-                        <Link
-                            href="/resources"
-                            className="flex flex-col items-center justify-center p-5 bg-slate-50 dark:bg-white/[0.03] rounded-2xl hover:bg-slate-100 dark:hover:bg-white/[0.06] transition-all border border-slate-200 dark:border-border group"
-                        >
-                            <PackagePlus className="w-7 h-7 text-blue-500 mb-3 group-hover:scale-110 transition-transform" />
-                            <span className="font-bold text-slate-600 dark:text-foreground/60 text-sm text-center">Reserve Resource</span>
-                        </Link>
-                        <Link
-                            href="/bookings"
-                            className="flex flex-col items-center justify-center p-5 bg-slate-50 dark:bg-white/[0.03] rounded-2xl hover:bg-slate-100 dark:hover:bg-white/[0.06] transition-all border border-slate-200 dark:border-border group"
-                        >
-                            <BookOpen className="w-7 h-7 text-emerald-500 mb-3 group-hover:scale-110 transition-transform" />
-                            <span className="font-bold text-slate-600 dark:text-foreground/60 text-sm text-center">My Bookings</span>
-                        </Link>
+                <div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
+                    {quickActions.map(({ href, label, icon: Icon, color, bg, desc }) => (
                         <Link
-                            href="/resources"
-                            className="flex flex-col items-center justify-center p-5 bg-slate-50 dark:bg-white/[0.03] rounded-2xl hover:bg-slate-100 dark:hover:bg-white/[0.06] transition-all border border-slate-200 dark:border-border group"
+                            key={label}
+                            href={href}
+                            className="group relative bg-white dark:bg-slate-800/60 rounded-xl p-5 border border-[#E2E8F0] dark:border-slate-700 shadow-sm hover:shadow-lg hover:-translate-y-1 transition-all duration-200 overflow-hidden"
                         >
-                            <Calendar className="w-7 h-7 text-purple-500 mb-3 group-hover:scale-110 transition-transform" />
-                            <span className="font-bold text-slate-600 dark:text-foreground/60 text-sm text-center">Browse Labs</span>
-                        </Link>
-                        <Link
-                            href="/notifications"
-                            className="flex flex-col items-center justify-center p-5 bg-slate-50 dark:bg-white/[0.03] rounded-2xl hover:bg-slate-100 dark:hover:bg-white/[0.06] transition-all border border-slate-200 dark:border-border group"
-                        >
-                            <Clock className="w-7 h-7 text-amber-500 mb-3 group-hover:scale-110 transition-transform" />
-                            <span className="font-bold text-slate-600 dark:text-foreground/60 text-sm text-center">Notifications</span>
+                            <div className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-200 rounded-xl" style={{ background: `radial-gradient(circle at top left, ${bg}, transparent 70%)` }} />
+                            <div className="relative z-10">
+                                <div className="w-10 h-10 rounded-xl flex items-center justify-center mb-3 transition-transform group-hover:scale-110 duration-200" style={{ backgroundColor: bg }}>
+                                    <Icon className="w-5 h-5" style={{ color }} />
+                                </div>
+                                <p className="font-semibold text-[#0F172A] dark:text-white text-sm leading-tight">{label}</p>
+                                <p className="text-[11px] text-[#64748B] dark:text-slate-400 mt-0.5">{desc}</p>
+                            </div>
+                            <ChevronRight className="absolute bottom-4 right-4 w-4 h-4 text-slate-300 group-hover:text-slate-500 dark:text-slate-600 dark:group-hover:text-slate-400 transition-colors" />
                         </Link>
-                    </div>
+                    ))}
                 </div>
             </motion.div>
 
             {/* ── Recent Bookings ── */}
-            <motion.div variants={fadeInUp} className="bg-card border border-slate-200 dark:border-border rounded-3xl shadow-sm overflow-hidden">
-                <div className="flex items-center justify-between px-6 py-5 border-b border-slate-200 dark:border-border">
-                    <h3 className="text-lg font-bold text-foreground">Recent Bookings</h3>
-                    <Link href="/bookings" className="text-sm font-bold text-brand-primary hover:underline">
-                        View All →
+            <motion.div variants={fadeInUp} className="bg-white dark:bg-slate-800/60 rounded-xl border border-[#E2E8F0] dark:border-slate-700 shadow-sm overflow-hidden">
+                <div className="flex items-center justify-between px-6 py-4 border-b border-[#E2E8F0] dark:border-slate-700">
+                    <h2 className="text-sm font-bold text-[#0F172A] dark:text-white flex items-center gap-2">
+                        <TrendingUp className="w-4 h-4 text-[#0EA5E9]" /> Recent Bookings
+                    </h2>
+                    <Link href="/bookings?view=my" className="text-xs font-semibold text-[#0EA5E9] hover:text-[#0284C7] flex items-center gap-0.5 transition-colors">
+                        View all <ArrowRight className="w-3.5 h-3.5" />
                     </Link>
                 </div>
-                <div className="divide-y divide-slate-100 dark:divide-border/50">
-                    {loading ? (
-                        <div className="flex items-center justify-center py-12">
-                            <Loader2 className="w-5 h-5 animate-spin text-slate-400" />
-                            <span className="ml-2 text-sm text-slate-400 font-medium">Loading bookings...</span>
-                        </div>
-                    ) : bookings.length === 0 ? (
-                        <div className="text-center py-12">
-                            <CalendarCheck className="w-10 h-10 text-slate-300 dark:text-foreground/20 mx-auto mb-3" />
-                            <p className="text-sm font-bold text-slate-500 dark:text-foreground/40">No bookings yet</p>
-                            <p className="text-xs text-slate-400 dark:text-foreground/30 mt-1">Reserve a resource to get started</p>
+
+                {loading ? (
+                    <div className="flex items-center justify-center gap-2 py-12 text-[#64748B]">
+                        <Loader2 className="w-5 h-5 animate-spin text-[#0EA5E9]" />
+                        <span className="text-sm font-medium">Loading bookings…</span>
+                    </div>
+                ) : bookings.length === 0 ? (
+                    <div className="flex flex-col items-center justify-center py-12 text-center px-4">
+                        <div className="w-14 h-14 rounded-2xl bg-[#F0F9FF] flex items-center justify-center mb-3">
+                            <CalendarCheck className="w-7 h-7 text-[#0EA5E9]" />
                         </div>
-                    ) : (
-                        bookings.slice(0, 5).map((booking) => {
-                            const statusColors: Record<string, string> = {
-                                Approved: "bg-emerald-50 text-emerald-700 border-emerald-200 dark:bg-emerald-500/10 dark:text-emerald-400 dark:border-emerald-500/20",
-                                Pending: "bg-amber-50 text-amber-700 border-amber-200 dark:bg-amber-500/10 dark:text-amber-400 dark:border-amber-500/20",
-                                Rejected: "bg-red-50 text-red-700 border-red-200 dark:bg-red-500/10 dark:text-red-400 dark:border-red-500/20",
-                            };
-                            return (
-                                <div key={booking.id} className="flex items-center justify-between px-6 py-4 hover:bg-slate-50/50 dark:hover:bg-white/[0.02] transition-colors">
-                                    <div className="flex items-center gap-4 min-w-0">
-                                        <div className="w-10 h-10 rounded-xl bg-blue-500/10 flex items-center justify-center shrink-0">
-                                            <BookOpen className="w-5 h-5 text-blue-500" />
-                                        </div>
-                                        <div className="min-w-0">
-                                            <p className="text-sm font-bold text-foreground truncate">
-                                                {booking.resources?.name || booking.resource_name || "Resource"}
-                                            </p>
-                                            <p className="text-xs text-slate-500 dark:text-foreground/40 mt-0.5">
-                                                {formatTime(booking.start_time)}
-                                            </p>
-                                        </div>
+                        <p className="font-semibold text-[#0F172A] dark:text-white">No bookings yet</p>
+                        <p className="text-sm text-[#64748B] dark:text-slate-400 mt-1">Reserve a resource to get started</p>
+                        <Link href="/resources" className="mt-4 inline-flex items-center gap-2 bg-[#0EA5E9] hover:bg-[#0284C7] text-white text-sm font-semibold px-4 py-2 rounded-lg transition-colors shadow-sm shadow-sky-500/20">
+                            <PackagePlus className="w-4 h-4" /> Browse Resources
+                        </Link>
+                    </div>
+                ) : (
+                    <div className="divide-y divide-[#E2E8F0] dark:divide-slate-700">
+                        {bookings.slice(0, 6).map((booking) => (
+                            <div key={booking.id} className="flex items-center gap-4 px-6 py-3.5 hover:bg-[#F8FAFC] dark:hover:bg-slate-700/30 transition-colors group">
+                                {/* Status left border */}
+                                <div className={`w-1 h-10 rounded-full shrink-0 ${booking.status === "Approved" ? "bg-[#0D9488]" : booking.status === "Pending" ? "bg-amber-400" : "bg-red-400"}`} />
+
+                                {/* Icon */}
+                                <div className="w-9 h-9 rounded-xl bg-[#F0F9FF] dark:bg-sky-500/10 flex items-center justify-center shrink-0">
+                                    <BookOpen className="w-4.5 h-4.5 text-[#0EA5E9]" />
+                                </div>
+
+                                {/* Details */}
+                                <div className="flex-1 min-w-0">
+                                    <p className="text-sm font-semibold text-[#0F172A] dark:text-white truncate">
+                                        {booking.resources?.name || booking.resource_name || "Resource"}
+                                    </p>
+                                    <div className="flex items-center gap-2 mt-0.5">
+                                        <span className="text-[11px] text-[#64748B] dark:text-slate-400 flex items-center gap-1">
+                                            <Calendar className="w-3 h-3" /> {fmtDate(booking.start_time)}
+                                        </span>
+                                        <span className="text-[#E2E8F0] dark:text-slate-600">·</span>
+                                        <span className="text-[11px] text-[#64748B] dark:text-slate-400 flex items-center gap-1">
+                                            <Clock className="w-3 h-3" /> {fmtTime(booking.start_time)}
+                                        </span>
+                                        {booking.resources?.location && (
+                                            <>
+                                                <span className="text-[#E2E8F0] dark:text-slate-600">·</span>
+                                                <span className="text-[11px] text-[#64748B] dark:text-slate-400 flex items-center gap-1">
+                                                    <MapPin className="w-3 h-3" /> {booking.resources.location}
+                                                </span>
+                                            </>
+                                        )}
                                     </div>
-                                    <span className={`text-xs font-bold px-3 py-1 rounded-full border shrink-0 ${statusColors[booking.status] || statusColors.Pending}`}>
-                                        {booking.status}
-                                    </span>
                                 </div>
-                            );
-                        })
-                    )}
-                </div>
+
+                                <StatusPill status={booking.status} />
+                            </div>
+                        ))}
+                    </div>
+                )}
             </motion.div>
         </motion.div>
     );
diff --git a/global.d.ts b/global.d.ts
new file mode 100644
index 0000000..a4a2411
--- /dev/null
+++ b/global.d.ts
@@ -0,0 +1,4 @@
+declare module 'isomorphic-dompurify' {
+  import * as DOMPurify from 'dompurify';
+  export = DOMPurify;
+}
diff --git a/hooks/useTabSession.ts b/hooks/useTabSession.ts
new file mode 100644
index 0000000..3e7848c
--- /dev/null
+++ b/hooks/useTabSession.ts
@@ -0,0 +1,132 @@
+/**
+ * useTabSession
+ * ─────────────────────────────────────────────────────────────────────────────
+ * Provides a truly tab-isolated session backed by sessionStorage.
+ *
+ * sessionStorage is cleared by the browser when the tab is closed (unlike
+ * localStorage and IndexedDB which persist across tabs and restarts). This
+ * makes it the correct storage primitive for per-tab auth sessions.
+ *
+ * Key design decisions:
+ *  - Each tab gets a unique `tabId` (UUID) generated once and written to
+ *    sessionStorage so it survives page reloads within the same tab.
+ *  - Session data (Firebase token + user profile) is stored under a key
+ *    namespaced by the tabId.
+ *  - A `reloading` flag is set in sessionStorage during `beforeunload`.
+ *    On mount, if the flag is present it means the page was reloaded (not
+ *    the tab being freshly opened), so the existing session is valid.
+ * ─────────────────────────────────────────────────────────────────────────────
+ */
+
+import { useRef, useEffect } from "react";
+import { UserProfile } from "@/lib/supabase";
+
+const TAB_ID_KEY = "urms_tab_id";
+const RELOADING_KEY = "urms_reloading";
+const SESSION_PREFIX = "urms_session_";
+
+export interface TabSessionData {
+    token: string;
+    uid: string;
+    profile: UserProfile;
+    savedAt: number; // epoch ms — used to detect expired tokens (1 hr)
+}
+
+/** Returns the tab-scoped sessionStorage key for session data. */
+function sessionKey(tabId: string): string {
+    return `${SESSION_PREFIX}${tabId}`;
+}
+
+/** Generate or retrieve the persisted tab ID from sessionStorage. */
+function getOrCreateTabId(): string {
+    let id = sessionStorage.getItem(TAB_ID_KEY);
+    if (!id) {
+        id = crypto.randomUUID();
+        sessionStorage.setItem(TAB_ID_KEY, id);
+    }
+    return id;
+}
+
+/**
+ * Returns true if this mount is a page reload (not a fresh tab open).
+ * A reload is detected by the presence of the RELOADING_KEY in sessionStorage,
+ * which is set during `beforeunload` and cleared on mount.
+ */
+function isPageReload(): boolean {
+    const flag = sessionStorage.getItem(RELOADING_KEY);
+    // Clear the flag immediately so it does not persist across genuine closures
+    if (flag) sessionStorage.removeItem(RELOADING_KEY);
+    return flag === "1";
+}
+
+// ─── Public API ───────────────────────────────────────────────────────────────
+
+export function useTabSession() {
+    // Initialised lazily on first use (SSR-safe: only runs in browser).
+    const tabIdRef = useRef<string | null>(null);
+
+    // Register the `beforeunload` listener once on mount.
+    useEffect(() => {
+        const handleBeforeUnload = () => {
+            // Set a flag so the next mount can tell it was a reload.
+            sessionStorage.setItem(RELOADING_KEY, "1");
+        };
+        window.addEventListener("beforeunload", handleBeforeUnload);
+        return () => window.removeEventListener("beforeunload", handleBeforeUnload);
+    }, []);
+
+    /** Lazily initialise and return the tab ID (only valid in the browser). */
+    function getTabId(): string {
+        if (!tabIdRef.current) {
+            tabIdRef.current = getOrCreateTabId();
+        }
+        return tabIdRef.current;
+    }
+
+    /**
+     * Save auth session data to sessionStorage.
+     * Called after a successful Firebase sign-in.
+     */
+    function saveSession(token: string, uid: string, profile: UserProfile): void {
+        const data: TabSessionData = { token, uid, profile, savedAt: Date.now() };
+        sessionStorage.setItem(sessionKey(getTabId()), JSON.stringify(data));
+    }
+
+    /**
+     * Load auth session data from sessionStorage.
+     * Returns null if no session exists or if the token is older than 55 minutes
+     * (Firebase tokens expire after 60 minutes; 55 min gives a safe margin).
+     */
+    function loadSession(): TabSessionData | null {
+        try {
+            const raw = sessionStorage.getItem(sessionKey(getTabId()));
+            if (!raw) return null;
+            const data: TabSessionData = JSON.parse(raw);
+            const ageMs = Date.now() - data.savedAt;
+            const TOKEN_TTL_MS = 55 * 60 * 1000; // 55 minutes
+            if (ageMs > TOKEN_TTL_MS) {
+                clearSession();
+                return null;
+            }
+            return data;
+        } catch {
+            return null;
+        }
+    }
+
+    /** Clear the session for this tab (on sign-out or token expiry). */
+    function clearSession(): void {
+        const id = tabIdRef.current ?? sessionStorage.getItem(TAB_ID_KEY);
+        if (id) sessionStorage.removeItem(sessionKey(id));
+    }
+
+    /**
+     * Returns true if this mount is a page reload within the same tab.
+     * Used by AuthProvider to decide whether to require a fresh login.
+     */
+    function checkIsReload(): boolean {
+        return isPageReload();
+    }
+
+    return { getTabId, saveSession, loadSession, clearSession, checkIsReload };
+}
diff --git a/lib/auth-context.tsx b/lib/auth-context.tsx
index b247b53..07a9c15 100644
--- a/lib/auth-context.tsx
+++ b/lib/auth-context.tsx
@@ -14,10 +14,13 @@ import {
     signInWithEmailAndPassword,
     createUserWithEmailAndPassword,
     signOut as firebaseSignOut,
+    setPersistence,
+    inMemoryPersistence,
 } from "firebase/auth";
 import { auth } from "./firebase";
 import { getUserProfile, UserProfile, setSupabaseAuthHeaders, clearSupabaseAuthHeaders } from "./supabase";
 import { BASE_URL } from "./apiClient";
+import { useTabSession } from "@/hooks/useTabSession";
 
 // ─── Types ────────────────────────────────────────────────────────────────────
 
@@ -42,6 +45,13 @@ export function AuthProvider({ children }: { children: ReactNode }) {
     const [profile, setProfile] = useState<UserProfile | null>(null);
     const [loading, setLoading] = useState(true);
 
+    // Tab-scoped session utilities (backed by sessionStorage)
+    const tabSession = useTabSession();
+
+    // ─── Set Firebase to in-memory persistence once on mount ────────────────
+    // inMemoryPersistence means Firebase keeps auth state only in the current
+    // JavaScript execution context (i.e. this tab's memory).  It is NOT shared
+    // via IndexedDB or localStorage, so each tab is fully isolated.
     useEffect(() => {
         if (!auth) {
             setLoading(false);
@@ -49,94 +59,182 @@ export function AuthProvider({ children }: { children: ReactNode }) {
             return;
         }
 
-        const unsubscribe = onAuthStateChanged(auth, async (firebaseUser) => {
-            setUser(firebaseUser);
-            if (firebaseUser) {
-                // Set temporary headers with UID so that Supabase RLS allows the user to query their own profile
-                setSupabaseAuthHeaders(firebaseUser.uid, "student");
-                
-                let token = "";
+        setPersistence(auth, inMemoryPersistence).catch((err) => {
+            console.error("Failed to set in-memory persistence:", err);
+        });
+    }, []);
+
+    // ─── Restore session from sessionStorage on mount ────────────────────────
+    // Because inMemoryPersistence does NOT survive page reloads, we cache the
+    // Firebase ID token + user profile in sessionStorage (which DOES survive
+    // reloads but is cleared when the tab closes).  On mount we check for a
+    // cached session and restore it so the user stays logged in after F5.
+    useEffect(() => {
+        if (!auth) return;
+
+        let unsubscribeAuth: (() => void) | null = null;
+
+        const restoreSession = async () => {
+            const isReload = tabSession.checkIsReload();
+            const cachedSession = tabSession.loadSession();
+
+            if (isReload && cachedSession) {
+                // ── Page reload in same tab: restore the existing session ──
+                // We have the cached Firebase ID token.  Re-authenticate via
+                // the /users/restore-session endpoint which exchanges the token
+                // for the user profile.  If the token is still valid we get
+                // the profile back and can set the auth state directly.
                 try {
-                    token = await firebaseUser.getIdToken();
-                    // Set cookie for middleware validation
-                    document.cookie = `firebaseToken=${token}; path=/; max-age=3600; SameSite=Lax; Secure`;
-                } catch (tokenErr) {
-                    console.error("Failed to retrieve Firebase ID token:", tokenErr);
+                    const res = await fetch(`${BASE_URL}/users/profile`, {
+                        headers: { Authorization: `Bearer ${cachedSession.token}` },
+                    });
+
+                    if (res.ok) {
+                        // Token is still valid — restore profile from cache
+                        // (the fetch was just a liveness check)
+                        const restoredProfile = cachedSession.profile;
+                        setProfile(restoredProfile);
+                        setSupabaseAuthHeaders(restoredProfile.id, restoredProfile.role);
+
+                        // Create a synthetic user object so ProtectedRoute passes
+                        const syntheticUser = {
+                            uid: cachedSession.uid,
+                            email: restoredProfile.email,
+                            getIdToken: async () => cachedSession.token,
+                        } as unknown as User;
+                        setUser(syntheticUser);
+                        setLoading(false);
+                        return; // Skip the onAuthStateChanged listener below
+                    }
+                } catch {
+                    // Backend unreachable or token expired — fall through to
+                    // fresh login flow below.
                 }
 
-                let userProfile = await getUserProfile(firebaseUser.uid);
-                
-                // If user exists in Firebase but has no profile in Supabase yet,
-                // call the backend profile endpoint which will trigger auto-sync/creation.
-                if (!userProfile && token) {
+                // If we reach here, the cached token is invalid — clear it.
+                tabSession.clearSession();
+            }
+
+            // ── Fresh tab open (or cache expired): require login ──────────
+            // Listen for Firebase auth state.  With inMemoryPersistence there
+            // will be no authenticated user here, so this immediately resolves
+            // to null and sets loading = false, causing ProtectedRoute to
+            // redirect to /login.
+            unsubscribeAuth = onAuthStateChanged(auth, async (firebaseUser) => {
+                setUser(firebaseUser);
+
+                if (firebaseUser) {
+                    let token = "";
                     try {
-                        const res = await fetch(`${BASE_URL}/users/profile`, {
-                            headers: { Authorization: `Bearer ${token}` }
-                        });
-                        if (res.ok) {
-                            // Fetch again from Supabase now that the backend has auto-synced the user
-                            userProfile = await getUserProfile(firebaseUser.uid);
+                        token = await firebaseUser.getIdToken();
+                    } catch (tokenErr) {
+                        console.error("Failed to retrieve Firebase ID token:", tokenErr);
+                    }
+
+                    // Set temporary headers so Supabase RLS can identify the user
+                    setSupabaseAuthHeaders(firebaseUser.uid, "student");
+
+                    let userProfile = await getUserProfile(firebaseUser.uid);
+
+                    // Auto-sync profile if it doesn't exist yet in Supabase
+                    if (!userProfile && token) {
+                        try {
+                            const res = await fetch(`${BASE_URL}/users/profile`, {
+                                headers: { Authorization: `Bearer ${token}` },
+                            });
+                            if (res.ok) {
+                                userProfile = await getUserProfile(firebaseUser.uid);
+                            }
+                        } catch (err) {
+                            console.error("Failed to auto-sync profile with backend:", err);
                         }
-                    } catch (err) {
-                        console.error("Failed to auto-sync profile with backend:", err);
                     }
-                }
 
-                setProfile(userProfile);
-                if (userProfile) {
-                    setSupabaseAuthHeaders(userProfile.id, userProfile.role);
+                    setProfile(userProfile);
+                    if (userProfile) {
+                        setSupabaseAuthHeaders(userProfile.id, userProfile.role);
+                        // Cache the session in sessionStorage for reload resilience
+                        tabSession.saveSession(token, firebaseUser.uid, userProfile);
+                    }
+                } else {
+                    setProfile(null);
+                    clearSupabaseAuthHeaders();
+                    tabSession.clearSession();
                 }
-            } else {
-                setProfile(null);
-                clearSupabaseAuthHeaders();
-                // Clear cookie for middleware validation
-                document.cookie = "firebaseToken=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT";
-            }
-            setLoading(false);
-        });
-        return unsubscribe;
+
+                setLoading(false);
+            });
+        };
+
+        restoreSession();
+
+        return () => {
+            if (unsubscribeAuth) unsubscribeAuth();
+        };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
-    const signIn = async (email: string, password: string) => {
+    // ─── Tab-close logout ────────────────────────────────────────────────────
+    // When the tab is closed (not reloaded — reload is detected via the
+    // RELOADING_KEY flag set by useTabSession's beforeunload listener),
+    // we clear the session so the next open of the app requires a fresh login.
+    //
+    // Note: We cannot reliably call async Firebase signOut in beforeunload
+    // because browsers terminate the page immediately.  Instead we rely on:
+    //   1. sessionStorage being cleared by the browser on tab close.
+    //   2. inMemoryPersistence ensuring Firebase state is never persisted.
+    // Both together guarantee that a new tab always starts unauthenticated.
+    //
+    // The clearSession() call in useTabSession's beforeunload does the cleanup.
+    // No extra listener is needed here.
+
+    // ─── Auth Actions ─────────────────────────────────────────────────────────
+
+    const signIn = async (email: string, password: string): Promise<void> => {
         if (!auth) throw new Error("Firebase is not initialized.");
+        // Ensure persistence is in-memory for this sign-in
+        await setPersistence(auth, inMemoryPersistence);
         await signInWithEmailAndPassword(auth, email, password);
+        // The onAuthStateChanged listener above will pick up the new user,
+        // fetch the profile and save the session to sessionStorage.
     };
 
-    const signUp = async (email: string, password: string) => {
+    const signUp = async (email: string, password: string): Promise<UserCredential> => {
         if (!auth) throw new Error("Firebase is not initialized.");
         return await createUserWithEmailAndPassword(auth, email, password);
     };
 
-    const signOut = async () => {
+    const signOut = async (): Promise<void> => {
         if (auth) {
             await firebaseSignOut(auth);
         }
         setProfile(null);
         setUser(null);
         clearSupabaseAuthHeaders();
-        document.cookie = "firebaseToken=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT";
+        tabSession.clearSession();
     };
 
-    const setMockUser = (role: UserProfile["role"]) => {
-        // This is just for UI demonstration/demo purposes
+    const setMockUser = (role: UserProfile["role"]): void => {
+        // Demo / UI development helper — not for production use
         const mockProfile: UserProfile = {
             id: `mock-${role}`,
             name: `Demo ${role.charAt(0).toUpperCase() + role.slice(1)}`,
             email: `${role}@demo.lk`,
             role: role,
-            created_at: new Date().toISOString()
+            created_at: new Date().toISOString(),
         };
         setProfile(mockProfile);
         setSupabaseAuthHeaders(mockProfile.id, mockProfile.role);
 
         const mockToken = `mock-token:${mockProfile.id}:${mockProfile.role}`;
-        document.cookie = `firebaseToken=${mockToken}; path=/; max-age=3600; SameSite=Lax; Secure`;
 
-        // We set a fake user object to pass ProtectedRoute checks
-        setUser({ 
-            uid: mockProfile.id, 
+        // Store in sessionStorage so mock sessions survive reloads within the tab
+        tabSession.saveSession(mockToken, mockProfile.id, mockProfile);
+
+        setUser({
+            uid: mockProfile.id,
             email: mockProfile.email,
-            getIdToken: async () => mockToken
+            getIdToken: async () => mockToken,
         } as unknown as User);
     };
 
diff --git a/lib/firebase.ts b/lib/firebase.ts
index 94ba037..9a92b71 100644
--- a/lib/firebase.ts
+++ b/lib/firebase.ts
@@ -22,8 +22,13 @@ if (missingEnv.length > 0) {
   );
 }
 
-const app = getApps().length === 0 ? initializeApp(firebaseConfig) : getApps()[0];
-const auth = getAuth(app);
+// Initialize the Firebase app once across the entire browser process.
+// Auth persistence is set at the AuthProvider level (inMemoryPersistence)
+// so that each browser tab maintains its own isolated auth state.
+const app: FirebaseApp =
+  getApps().length === 0 ? initializeApp(firebaseConfig) : getApps()[0];
+
+const auth: Auth = getAuth(app);
 
 export { auth };
 export default app;
diff --git a/lib/supabase.ts b/lib/supabase.ts
index 9deb57c..3e31216 100644
--- a/lib/supabase.ts
+++ b/lib/supabase.ts
@@ -34,6 +34,7 @@ export interface UserProfile {
   department?: string;
   password_hash?: string;
   phone?: string;
+  approval_status?: "Pending" | "Approved" | "Rejected";
   created_at: string;
 }
 
@@ -67,3 +68,33 @@ export async function createUserProfile(profile: Omit<UserProfile, "created_at">
     throw new Error(`Failed to create user profile: ${error.message || JSON.stringify(error)}`);
   }
 }
+
+/**
+ * Creates a user profile using an authenticated Supabase client built from the
+ * user's Firebase ID token. This satisfies the RLS `insert_users` policy which
+ * reads `get_urms_uid()` from the JWT `sub` claim.
+ */
+export async function createUserProfileAuthenticated(
+  profile: Omit<UserProfile, "created_at">,
+  firebaseIdToken: string
+) {
+  // Build a Supabase client that carries the Firebase JWT so RLS can verify uid
+  const authenticatedClient = createClient(supabaseUrl, supabaseAnonKey, {
+    global: {
+      headers: {
+        Authorization: `Bearer ${firebaseIdToken}`,
+      },
+    },
+  });
+
+  const profileData: Record<string, unknown> = { ...profile };
+  if (!profileData.password_hash) {
+    delete profileData.password_hash;
+  }
+
+  const { error } = await authenticatedClient.from("users").upsert(profileData);
+  if (error) {
+    console.error("Error creating user profile (authenticated):", JSON.stringify(error, null, 2));
+    throw new Error(`Failed to create user profile: ${error.message || JSON.stringify(error)}`);
+  }
+}
diff --git a/package-lock.json b/package-lock.json
index db57070..ec312f1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1780,9 +1780,6 @@
       "cpu": [
         "arm"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -1799,9 +1796,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -1818,9 +1812,6 @@
       "cpu": [
         "ppc64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -1837,9 +1828,6 @@
       "cpu": [
         "riscv64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -1856,9 +1844,6 @@
       "cpu": [
         "s390x"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -1875,9 +1860,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -1894,9 +1876,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -1913,9 +1892,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -1932,9 +1908,6 @@
       "cpu": [
         "arm"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -1957,9 +1930,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -1982,9 +1952,6 @@
       "cpu": [
         "ppc64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -2007,9 +1974,6 @@
       "cpu": [
         "riscv64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -2032,9 +1996,6 @@
       "cpu": [
         "s390x"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -2057,9 +2018,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -2082,9 +2040,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -2107,9 +2062,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -2835,9 +2787,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2854,9 +2803,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2873,9 +2819,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2892,9 +2835,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3437,9 +3377,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3457,9 +3394,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3477,9 +3411,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3497,9 +3428,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4396,9 +4324,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4413,9 +4338,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4430,9 +4352,6 @@
         "loong64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4447,9 +4366,6 @@
         "loong64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4464,9 +4380,6 @@
         "ppc64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4481,9 +4394,6 @@
         "riscv64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4498,9 +4408,6 @@
         "riscv64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4515,9 +4422,6 @@
         "s390x"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4532,9 +4436,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4549,9 +4450,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -10155,9 +10053,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -10179,9 +10074,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -10203,9 +10095,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -10227,9 +10116,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -11454,6 +11340,7 @@
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
       "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
       "optional": true,
diff --git a/proxy.ts b/proxy.ts
index c2eb725..23ef45b 100644
--- a/proxy.ts
+++ b/proxy.ts
@@ -2,51 +2,25 @@ import { NextResponse } from 'next/server';
 import type { NextRequest } from 'next/server';
 
 /**
- * Next.js Edge Proxy (formerly Middleware)
- * ─────────────────────────────────────────────────────────────
- * Protects routes by checking for an authentication session.
- * 
- * Note: Since Firebase Auth primarily uses IndexedDB on the client,
- * this proxy checks for a 'session' or 'firebaseToken' cookie.
- * To make this fully functional with Firebase, ensure that your
- * client-side login logic (e.g., inside auth-context.tsx) sets
- * an HttpOnly cookie containing the token.
- * ─────────────────────────────────────────────────────────────
+ * Next.js Edge Middleware
+ * ─────────────────────────────────────────────────────────────────────────────
+ * Auth is now tab-isolated via inMemoryPersistence + sessionStorage.
+ * Session tokens are NOT stored in shared cookies — they live in each tab's
+ * JavaScript memory and sessionStorage, so the middleware cannot inspect them.
+ *
+ * Route protection is handled entirely by the client-side <ProtectedRoute>
+ * component (which reads from the in-memory AuthContext). The middleware acts
+ * as a lightweight pass-through for all routes.
+ *
+ * Static assets, API routes, and Next.js internals are excluded via the
+ * matcher config below.
+ * ─────────────────────────────────────────────────────────────────────────────
  */
 export function proxy(request: NextRequest) {
-    const { pathname } = request.nextUrl;
-
-    // Define protected routes (add or remove paths as needed)
-    const protectedPaths = [
-        '/dashboard',
-        '/admin',
-        '/profile',
-        '/bookings',
-        '/resources',
-        '/maintenance',
-        '/notifications'
-    ];
-
-    const isProtectedRoute = protectedPaths.some((path) => pathname.startsWith(path));
-
-    if (isProtectedRoute) {
-        // Check for a session cookie (adjust the cookie name to match your setup)
-        const sessionCookie = request.cookies.get('session') || request.cookies.get('firebaseToken');
-
-        if (!sessionCookie) {
-            // User is not authenticated, redirect to login
-            const loginUrl = new URL('/login', request.url);
-            // Optionally, save the return URL so they can be redirected back after login
-            loginUrl.searchParams.set('callbackUrl', pathname);
-            
-            return NextResponse.redirect(loginUrl);
-        }
-    }
-
+    // Pass all requests through — client-side ProtectedRoute handles auth.
     return NextResponse.next();
 }
 
-// See "Matching Paths" below to learn more
 export const config = {
     matcher: [
         /*
diff --git a/public/favicon.ico b/public/favicon.ico
new file mode 100644
index 0000000..00458b4
Binary files /dev/null and b/public/favicon.ico differ
diff --git a/public/favicon.png b/public/favicon.png
index aa9666d..00458b4 100644
Binary files a/public/favicon.png and b/public/favicon.png differ
diff --git a/public/logo1.png b/public/logo1.png
new file mode 100644
index 0000000..00458b4
Binary files /dev/null and b/public/logo1.png differ
diff --git a/public/urms-logo.png b/public/urms-logo.png
index aa9666d..00458b4 100644
Binary files a/public/urms-logo.png and b/public/urms-logo.png differ
diff --git a/tests/e2e/auth.spec.ts b/tests/e2e/auth.spec.ts
index fe74d64..2b55fba 100644
--- a/tests/e2e/auth.spec.ts
+++ b/tests/e2e/auth.spec.ts
@@ -24,7 +24,7 @@ test.describe('Authentication Flows', () => {
     await expect(errorAlert.first()).toBeVisible();
   });
 
-  test('Quick Operator Access - Admin Badge', async ({ page }) => {
+  test('Role Access - Admin Console', async ({ page }) => {
     await clickDemoBadge(page, 'admin');
     await expect(page).toHaveURL(/.*dashboard/);
     
@@ -33,7 +33,7 @@ test.describe('Authentication Flows', () => {
     await logout(page);
   });
 
-  test('Quick Operator Access - Maintenance Badge', async ({ page }) => {
+  test('Role Access - Maintenance Console', async ({ page }) => {
     await clickDemoBadge(page, 'maintenance');
     await expect(page).toHaveURL(/.*dashboard/);
     
diff --git a/tests/e2e/helpers.ts b/tests/e2e/helpers.ts
index 7c16349..c32d474 100644
--- a/tests/e2e/helpers.ts
+++ b/tests/e2e/helpers.ts
@@ -24,18 +24,10 @@ export async function loginAs(page: Page, email: string, password = "Password123
 }
 
 export async function clickDemoBadge(page: Page, role: "admin" | "maintenance" | "lecturer" | "student") {
-  await page.goto('/login');
-  
-  // Wait for login card to appear
-  await page.waitForSelector('h1:has-text("Welcome Back")');
-  
-  // Click on the corresponding demo badge
-  // Using selector that matches the role uppercase text in button
-  await page.click(`button:has-text("${role.toUpperCase()}")`);
-  
-  // Verify redirect to dashboard
-  await page.waitForURL('**/dashboard**');
-  await page.waitForSelector('text=Sign Out');
+  // Instead of clicking the removed demo badge, log in using credentials
+  const email = `${role}@demo.lk`;
+  const password = "Password123";
+  await loginAs(page, email, password);
 }
 
 export async function logout(page: Page) {