diff --git a/src/components/CreateConversationModal.tsx b/src/components/CreateConversationModal.tsx
index 4d91a607..b5ccce31 100644
--- a/src/components/CreateConversationModal.tsx
+++ b/src/components/CreateConversationModal.tsx
@@ -1,10 +1,10 @@
 import { useState, useEffect } from 'react';
 import { useCreateConversation } from '../hooks/useMessaging';
-import { supabase } from '../supabase-client';
+import { supabase, isBackendAvailable } from '../supabase-client';
 import { useAuth } from '../hooks/useAuth';
 import { X, Search, Users, MessageCircle, Check } from 'lucide-react';
 import type { Conversation } from '../types/messaging';
-import { showSuccess,showError } from '../utils/toast';
+import { showSuccess, showError } from '../utils/toast';
 
 
 interface CreateConversationModalProps {
@@ -39,15 +39,39 @@ const CreateConversationModal = ({ onClose, onConversationCreated }: CreateConve
   // Fetch users for selection
   useEffect(() => {
     const fetchUsers = async () => {
+      if (!isBackendAvailable || !supabase) {
+        console.warn('Backend unavailable - cannot fetch users');
+        setUsers([]);
+        return;
+      }
+
       try {
-        const { data, error } = await supabase.auth.admin.listUsers();
+        // ✅ SECURE: Query profiles table with RLS instead of admin API
+        let query = supabase
+          .from('Profiles')
+          .select('id, full_name, avatar_url');
+
+        if (currentUser?.id) {
+          query = query.neq('id', currentUser.id);
+        }
+
+        const { data, error } = await query;
         if (error) throw error;
-        
-        // Filter out current user
-        const filteredUsers = data.users.filter(u => u.id !== currentUser?.id);
-        setUsers(filteredUsers as User[]);
+
+        // Map profiles to User format
+        const mappedUsers = (data || []).map(profile => ({
+          id: profile.id,
+          email: '', // Email not exposed for privacy
+          user_metadata: {
+            full_name: profile.full_name,
+            avatar_url: profile.avatar_url,
+          },
+        }));
+
+        setUsers(mappedUsers as User[]);
       } catch (error) {
         console.error('Failed to fetch users:', error);
+        showError('Failed to load users');
       }
     };
 
@@ -60,10 +84,10 @@ const CreateConversationModal = ({ onClose, onConversationCreated }: CreateConve
     const fullName = user.user_metadata?.full_name?.toLowerCase() || '';
     const userName = user.user_metadata?.user_name?.toLowerCase() || '';
     const email = user.email.toLowerCase();
-    
-    return fullName.includes(searchLower) || 
-           userName.includes(searchLower) || 
-           email.includes(searchLower);
+
+    return fullName.includes(searchLower) ||
+      userName.includes(searchLower) ||
+      email.includes(searchLower);
   });
 
   const handleUserSelect = (user: User) => {
@@ -83,14 +107,14 @@ const CreateConversationModal = ({ onClose, onConversationCreated }: CreateConve
 
   const handleCreate = async () => {
     if (selectedUsers.length === 0) return;
-    
+
     if (conversationType === 'group' && !groupName.trim()) {
       showError('Please enter a group name');
       return;
     }
 
     setIsLoading(true);
-    
+
     try {
       const conversationData = {
         type: conversationType,
@@ -101,12 +125,12 @@ const CreateConversationModal = ({ onClose, onConversationCreated }: CreateConve
       };
 
       const conversation = await createConversation.mutateAsync(conversationData);
-     
+
       showSuccess(
-         conversationType === 'group'
+        conversationType === 'group'
           ? "Group conversation created"
-           : "Conversation started"
-        );
+          : "Conversation started"
+      );
 
       onConversationCreated(conversation);
 
@@ -119,9 +143,9 @@ const CreateConversationModal = ({ onClose, onConversationCreated }: CreateConve
   };
 
   const getUserDisplayName = (user: User) => {
-    return user.user_metadata?.full_name || 
-           user.user_metadata?.user_name || 
-           user.email;
+    return user.user_metadata?.full_name ||
+      user.user_metadata?.user_name ||
+      user.email;
   };
 
   return (
@@ -196,7 +220,7 @@ const CreateConversationModal = ({ onClose, onConversationCreated }: CreateConve
                   className="w-full px-3 py-2 bg-slate-800/50 border border-slate-700 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-cyan-400/50 focus:ring-1 focus:ring-cyan-400/50"
                 />
               </div>
-              
+
               <div>
                 <label className="block text-sm font-medium text-gray-300 mb-1">
                   Description (optional)
@@ -209,7 +233,7 @@ const CreateConversationModal = ({ onClose, onConversationCreated }: CreateConve
                   className="w-full px-3 py-2 bg-slate-800/50 border border-slate-700 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-cyan-400/50 focus:ring-1 focus:ring-cyan-400/50 resize-none"
                 />
               </div>
-              
+
               <div className="flex items-center gap-2">
                 <input
                   type="checkbox"
@@ -279,7 +303,7 @@ const CreateConversationModal = ({ onClose, onConversationCreated }: CreateConve
             <div className="max-h-48 overflow-y-auto space-y-1">
               {filteredUsers.map(user => {
                 const isSelected = selectedUsers.some(u => u.id === user.id);
-                
+
                 return (
                   <div
                     key={user.id}
@@ -305,21 +329,21 @@ const CreateConversationModal = ({ onClose, onConversationCreated }: CreateConve
                         </span>
                       </div>
                     )}
-                    
+
                     <div className="flex-1">
                       <p className="text-white font-medium">
                         {getUserDisplayName(user)}
                       </p>
                       <p className="text-sm text-gray-400">{user.email}</p>
                     </div>
-                    
+
                     {isSelected && (
                       <Check className="w-5 h-5 text-cyan-400" />
                     )}
                   </div>
                 );
               })}
-              
+
               {filteredUsers.length === 0 && (
                 <div className="text-center py-4 text-gray-400">
                   No users found
diff --git a/src/pages/LoginPage.tsx b/src/pages/LoginPage.tsx
index 5381b914..d14192a0 100644
--- a/src/pages/LoginPage.tsx
+++ b/src/pages/LoginPage.tsx
@@ -11,7 +11,7 @@ export default function LoginPage() {
   const [showPassword, setShowPassword] = useState(false);
   const [isSuccess, setIsSuccess] = useState(false);
   const [theme, setTheme] = useState<'light' | 'dark'>('dark');
-  const [particles, setParticles] = useState<Array<{x: number, y: number, size: number, speed: number}>>([]);
+  const [particles, setParticles] = useState<Array<{ x: number, y: number, size: number, speed: number }>>([]);
   const { signInWithEmail, signInWithGithub } = useAuth();
   const navigate = useNavigate();
 
@@ -20,14 +20,14 @@ export default function LoginPage() {
     // Check for saved theme preference or system preference
     const savedTheme = localStorage.getItem('theme') as 'light' | 'dark' | null;
     const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-    
+
     let initialTheme = 'dark';
     if (savedTheme) {
       initialTheme = savedTheme;
     } else if (!systemPrefersDark) {
       initialTheme = 'light';
     }
-    
+
     setTheme(initialTheme as 'light' | 'dark');
     document.documentElement.classList.remove('light', 'dark');
     document.documentElement.classList.add(initialTheme);
@@ -48,7 +48,7 @@ export default function LoginPage() {
     };
 
     window.addEventListener('themeChanged', handleThemeChange as EventListener);
-    
+
     return () => {
       window.removeEventListener('themeChanged', handleThemeChange as EventListener);
     };
@@ -100,7 +100,7 @@ export default function LoginPage() {
 
   // Theme-based classes (aligned with footer)
   const isDark = theme === 'dark';
-  
+
   const themeClasses = {
     light: {
       background: 'from-blue-50 via-gray-50 to-purple-50',
@@ -154,7 +154,7 @@ export default function LoginPage() {
 
   return (
     <div className={`min-h-screen flex items-center justify-center px-4 py-8 relative overflow-hidden transition-all duration-500 ${isDark ? 'dark' : ''}`}>
-      
+
       {/* Animated Background */}
       <div className={`absolute inset-0 bg-gradient-to-br ${t.background} transition-all duration-500`}>
         {/* Animated Particles */}
@@ -172,14 +172,12 @@ export default function LoginPage() {
             }}
           />
         ))}
-        
+
         {/* Floating Orbs */}
-        <div className={`absolute top-1/4 left-1/4 w-64 h-64 ${
-          isDark ? 'bg-cyan-500/5' : 'bg-blue-400/10'
-        } rounded-full blur-3xl animate-pulse`}></div>
-        <div className={`absolute bottom-1/4 right-1/4 w-64 h-64 ${
-          isDark ? 'bg-blue-500/5' : 'bg-indigo-400/10'
-        } rounded-full blur-3xl animate-pulse delay-1000`}></div>
+        <div className={`absolute top-1/4 left-1/4 w-64 h-64 ${isDark ? 'bg-cyan-500/5' : 'bg-blue-400/10'
+          } rounded-full blur-3xl animate-pulse`}></div>
+        <div className={`absolute bottom-1/4 right-1/4 w-64 h-64 ${isDark ? 'bg-blue-500/5' : 'bg-indigo-400/10'
+          } rounded-full blur-3xl animate-pulse delay-1000`}></div>
 
         {/* Animated Grid */}
         <div className="absolute inset-0 opacity-[0.03]" style={{
@@ -190,40 +188,38 @@ export default function LoginPage() {
         }}></div>
       </div>
 
-    
+
       {/* Main Content */}
       <div className="relative w-full max-w-md z-10">
         {/* Glass Container */}
         <div className="relative group">
           {/* Outer Glow */}
           <div className={`absolute -inset-0.5 bg-gradient-to-r ${t.glow} rounded-2xl blur opacity-50 group-hover:opacity-70 transition-all duration-500`}></div>
-          
+
           {/* Glass Card */}
-          <div 
+          <div
             className={`relative ${t.card} border ${t.border} rounded-2xl shadow-2xl`}
             onMouseEnter={() => setHoveredCard('main')}
             onMouseLeave={() => setHoveredCard(null)}
           >
             {/* Animated Top Border */}
-            <div className={`absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent ${
-              isDark ? 'via-cyan-500/30' : 'via-blue-500/50'
-            } to-transparent animate-border`}></div>
-            
+            <div className={`absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent ${isDark ? 'via-cyan-500/30' : 'via-blue-500/50'
+              } to-transparent animate-border`}></div>
+
             {/* Cross Button - Positioned inside container at top-right */}
             <div className="absolute top-3 right-3 z-10">
               <button
                 onClick={handleClose}
-                className={`p-2 rounded-lg backdrop-blur-sm border transition-all duration-300 hover:scale-110 active:scale-95 group ${
-                  isDark 
-                    ? 'bg-gray-900/40 border-white/10 hover:bg-red-500/20 hover:border-red-500/30 text-gray-300 hover:text-white' 
+                className={`p-2 rounded-lg backdrop-blur-sm border transition-all duration-300 hover:scale-110 active:scale-95 group ${isDark
+                    ? 'bg-gray-900/40 border-white/10 hover:bg-red-500/20 hover:border-red-500/30 text-gray-300 hover:text-white'
                     : 'bg-white/60 border-gray-300 hover:bg-red-50 hover:border-red-300 text-gray-500 hover:text-gray-700'
-                }`}
+                  }`}
                 aria-label="Close"
               >
                 <X className="w-4 h-4 group-hover:rotate-90 transition-transform duration-300" />
               </button>
             </div>
-            
+
             <div className="p-6">
               {/* Header */}
               <div className="text-center mb-6">
@@ -241,17 +237,14 @@ export default function LoginPage() {
                 <div className="animate-fade-in mb-4">
                   <div className={`rounded-xl ${t.success} border p-4`}>
                     <div className="flex items-center space-x-2">
-                      <div className={`w-8 h-8 ${
-                        isDark ? 'bg-emerald-500/20' : 'bg-emerald-100'
-                      } rounded-full flex items-center justify-center animate-pulse`}>
-                        <ArrowRight className={`w-4 h-4 ${
-                          isDark ? 'text-emerald-400' : 'text-emerald-600'
-                        }`} />
+                      <div className={`w-8 h-8 ${isDark ? 'bg-emerald-500/20' : 'bg-emerald-100'
+                        } rounded-full flex items-center justify-center animate-pulse`}>
+                        <ArrowRight className={`w-4 h-4 ${isDark ? 'text-emerald-400' : 'text-emerald-600'
+                          }`} />
                       </div>
                       <div>
-                        <p className={`font-medium ${
-                          isDark ? 'text-emerald-400' : 'text-emerald-700'
-                        } text-sm`}>Success! Redirecting...</p>
+                        <p className={`font-medium ${isDark ? 'text-emerald-400' : 'text-emerald-700'
+                          } text-sm`}>Success! Redirecting...</p>
                       </div>
                     </div>
                   </div>
@@ -265,19 +258,16 @@ export default function LoginPage() {
                     onClick={handleGithubLogin}
                     onMouseEnter={() => setHoveredCard('github')}
                     onMouseLeave={() => setHoveredCard(null)}
-                    className={`w-full group relative ${t.socialButton} backdrop-blur-sm border rounded-xl p-3 transition-all duration-300 hover:scale-[1.02] ${
-                      isDark ? 'hover:border-cyan-500/30' : 'hover:border-blue-500/30'
-                    }`}
+                    className={`w-full group relative ${t.socialButton} backdrop-blur-sm border rounded-xl p-3 transition-all duration-300 hover:scale-[1.02] ${isDark ? 'hover:border-cyan-500/30' : 'hover:border-blue-500/30'
+                      }`}
                   >
                     <div className="flex items-center justify-center space-x-3">
-                      <div className={`w-8 h-8 rounded-lg flex items-center justify-center ${
-                        isDark ? 'bg-gray-800' : 'bg-gray-100'
-                      } group-hover:bg-gray-700 transition-colors`}>
+                      <div className={`w-8 h-8 rounded-lg flex items-center justify-center ${isDark ? 'bg-gray-800 group-hover:bg-gray-700' : 'bg-gray-100 group-hover:bg-gray-300'
+                        } transition-colors`}>
                         <Github className={`w-4 h-4 ${isDark ? 'text-gray-300' : 'text-gray-600'}`} />
                       </div>
-                      <span className={`${t.socialText} font-medium group-hover:${
-                        isDark ? 'text-white' : 'text-gray-900'
-                      } transition-colors`}>Continue with GitHub</span>
+                      <span className={`${t.socialText} font-medium group-hover:${isDark ? 'text-white' : 'text-gray-900'
+                        } transition-colors`}>Continue with GitHub</span>
                     </div>
                   </button>
 
@@ -286,15 +276,13 @@ export default function LoginPage() {
                     className={`w-full group relative ${t.socialButton} backdrop-blur-sm border rounded-xl p-3 opacity-60 cursor-not-allowed`}
                   >
                     <div className="flex items-center justify-center space-x-3">
-                      <div className={`w-8 h-8 rounded-lg flex items-center justify-center ${
-                        isDark ? 'bg-gray-800' : 'bg-gray-100'
-                      }`}>
+                      <div className={`w-8 h-8 rounded-lg flex items-center justify-center ${isDark ? 'bg-gray-800' : 'bg-gray-100'
+                        }`}>
                         <Mail className={`w-4 h-4 ${isDark ? 'text-gray-400' : 'text-gray-500'}`} />
                       </div>
                       <span className={`${t.socialText} font-medium`}>Continue with Google</span>
-                      <span className={`text-xs ${
-                        isDark ? 'bg-gray-800 text-gray-400' : 'bg-gray-200 text-gray-600'
-                      } px-2 py-1 rounded-full`}>Soon</span>
+                      <span className={`text-xs ${isDark ? 'bg-gray-800 text-gray-400' : 'bg-gray-200 text-gray-600'
+                        } px-2 py-1 rounded-full`}>Soon</span>
                     </div>
                   </button>
                 </div>
@@ -305,9 +293,8 @@ export default function LoginPage() {
                     <div className={`w-full border-t ${t.border}`}></div>
                   </div>
                   <div className="relative flex justify-center">
-                    <span className={`px-3 ${
-                      isDark ? 'bg-gray-900/30' : 'bg-white/50'
-                    } ${t.subtext} text-xs font-medium`}>
+                    <span className={`px-3 ${isDark ? 'bg-gray-900/30' : 'bg-white/50'
+                      } ${t.subtext} text-xs font-medium`}>
                       Or with email
                     </span>
                   </div>
@@ -317,12 +304,10 @@ export default function LoginPage() {
                 {error && (
                   <div className={`animate-shake rounded-xl ${t.error} border p-3`}>
                     <div className="flex items-center space-x-2">
-                      <div className={`w-5 h-5 ${
-                        isDark ? 'bg-red-500/20' : 'bg-red-100'
-                      } rounded-full flex items-center justify-center`}>
-                        <div className={`w-2 h-2 ${
-                          isDark ? 'bg-red-500' : 'bg-red-600'
-                        } rounded-full`}></div>
+                      <div className={`w-5 h-5 ${isDark ? 'bg-red-500/20' : 'bg-red-100'
+                        } rounded-full flex items-center justify-center`}>
+                        <div className={`w-2 h-2 ${isDark ? 'bg-red-500' : 'bg-red-600'
+                          } rounded-full`}></div>
                       </div>
                       <p className="text-sm">{error}</p>
                     </div>
@@ -344,9 +329,8 @@ export default function LoginPage() {
                           required
                           value={email}
                           onChange={(e) => setEmail(e.target.value)}
-                          className={`w-full pl-10 pr-4 py-2.5 ${t.input} rounded-xl ${t.inputText} placeholder-gray-500 focus:outline-none focus:border-blue-500/50 focus:ring-1 ${
-                            isDark ? 'focus:ring-blue-500/30' : 'focus:ring-blue-400/30'
-                          } transition-all duration-300`}
+                          className={`w-full pl-10 pr-4 py-2.5 ${t.input} rounded-xl ${t.inputText} placeholder-gray-500 focus:outline-none focus:border-blue-500/50 focus:ring-1 ${isDark ? 'focus:ring-blue-500/30' : 'focus:ring-blue-400/30'
+                            } transition-all duration-300`}
                           placeholder="you@example.com"
                         />
                       </div>
@@ -360,9 +344,8 @@ export default function LoginPage() {
                         </label>
                         <Link
                           to="/forgot-password"
-                          className={`text-xs ${
-                            isDark ? 'text-cyan-400 hover:text-cyan-300' : 'text-blue-600 hover:text-blue-700'
-                          } transition-colors`}
+                          className={`text-xs ${isDark ? 'text-cyan-400 hover:text-cyan-300' : 'text-blue-600 hover:text-blue-700'
+                            } transition-colors`}
                         >
                           Forgot?
                         </Link>
@@ -374,9 +357,8 @@ export default function LoginPage() {
                           required
                           value={password}
                           onChange={(e) => setPassword(e.target.value)}
-                          className={`w-full pl-10 pr-10 py-2.5 ${t.input} rounded-xl ${t.inputText} placeholder-gray-500 focus:outline-none focus:border-blue-500/50 focus:ring-1 ${
-                            isDark ? 'focus:ring-blue-500/30' : 'focus:ring-blue-400/30'
-                          } transition-all duration-300`}
+                          className={`w-full pl-10 pr-10 py-2.5 ${t.input} rounded-xl ${t.inputText} placeholder-gray-500 focus:outline-none focus:border-blue-500/50 focus:ring-1 ${isDark ? 'focus:ring-blue-500/30' : 'focus:ring-blue-400/30'
+                            } transition-all duration-300`}
                           placeholder="••••••••"
                         />
                         <button
@@ -385,13 +367,11 @@ export default function LoginPage() {
                           className="absolute right-3 top-1/2 transform -translate-y-1/2"
                         >
                           {showPassword ? (
-                            <EyeOff className={`w-4 h-4 ${t.textColor} hover:${
-                              isDark ? 'text-cyan-400' : 'text-blue-600'
-                            } transition-colors`} />
+                            <EyeOff className={`w-4 h-4 ${t.textColor} hover:${isDark ? 'text-cyan-400' : 'text-blue-600'
+                              } transition-colors`} />
                           ) : (
-                            <Eye className={`w-4 h-4 ${t.textColor} hover:${
-                              isDark ? 'text-cyan-400' : 'text-blue-600'
-                            } transition-colors`} />
+                            <Eye className={`w-4 h-4 ${t.textColor} hover:${isDark ? 'text-cyan-400' : 'text-blue-600'
+                              } transition-colors`} />
                           )}
                         </button>
                       </div>
@@ -402,11 +382,9 @@ export default function LoginPage() {
                       <input
                         id="remember-me"
                         type="checkbox"
-                        className={`h-3.5 w-3.5 rounded ${
-                          isDark ? 'bg-gray-800 border-white/10 text-cyan-500' : 'bg-white border-gray-300 text-blue-600'
-                        } focus:${
-                          isDark ? 'ring-cyan-500/20' : 'ring-blue-400/30'
-                        }`}
+                        className={`h-3.5 w-3.5 rounded ${isDark ? 'bg-gray-800 border-white/10 text-cyan-500' : 'bg-white border-gray-300 text-blue-600'
+                          } focus:${isDark ? 'ring-cyan-500/20' : 'ring-blue-400/30'
+                          }`}
                       />
                       <label htmlFor="remember-me" className={`ml-2 text-sm ${t.subtext}`}>
                         Keep me signed in
@@ -422,7 +400,7 @@ export default function LoginPage() {
                   >
                     {/* Shine Effect */}
                     <div className="absolute inset-0 -translate-x-full group-hover:translate-x-full transition-transform duration-700 bg-gradient-to-r from-transparent via-white/10 to-transparent"></div>
-                    
+
                     <div className="relative flex items-center justify-center space-x-2">
                       {loading ? (
                         <>
@@ -445,9 +423,8 @@ export default function LoginPage() {
                     Don't have an account?{" "}
                     <Link
                       to="/register"
-                      className={`font-medium ${
-                        isDark ? 'text-cyan-400 hover:text-cyan-300' : 'text-blue-600 hover:text-blue-700'
-                      } transition-colors`}
+                      className={`font-medium ${isDark ? 'text-cyan-400 hover:text-cyan-300' : 'text-blue-600 hover:text-blue-700'
+                        } transition-colors`}
                     >
                       Sign up
                     </Link>
@@ -462,15 +439,13 @@ export default function LoginPage() {
         <div className="mt-6 text-center">
           <p className={`text-xs ${t.subtext}`}>
             By signing in, you agree to our{" "}
-            <Link to="/terms" className={`hover:${
-              isDark ? 'text-gray-300' : 'text-gray-600'
-            } transition-colors`}>
+            <Link to="/terms" className={`hover:${isDark ? 'text-gray-300' : 'text-gray-600'
+              } transition-colors`}>
               Terms
             </Link>{" "}
             and{" "}
-            <Link to="/privacy" className={`hover:${
-              isDark ? 'text-gray-300' : 'text-gray-600'
-            } transition-colors`}>
+            <Link to="/privacy" className={`hover:${isDark ? 'text-gray-300' : 'text-gray-600'
+              } transition-colors`}>
               Privacy
             </Link>
           </p>
diff --git a/src/pages/RegisterPage.tsx b/src/pages/RegisterPage.tsx
index 0810de1d..3e7467ba 100644
--- a/src/pages/RegisterPage.tsx
+++ b/src/pages/RegisterPage.tsx
@@ -14,7 +14,7 @@ export default function RegisterPage() {
   const [showPassword, setShowPassword] = useState(false);
   const [showConfirmPassword, setShowConfirmPassword] = useState(false);
   const [theme, setTheme] = useState<'light' | 'dark'>('dark');
-  const [particles, setParticles] = useState<Array<{x: number, y: number, size: number, speed: number}>>([]);
+  const [particles, setParticles] = useState<Array<{ x: number, y: number, size: number, speed: number }>>([]);
   const { signUpWithEmail, signInWithGithub } = useAuth();
   const navigate = useNavigate();
 
@@ -22,14 +22,14 @@ export default function RegisterPage() {
   useEffect(() => {
     const savedTheme = localStorage.getItem('theme') as 'light' | 'dark' | null;
     const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-    
+
     let initialTheme = 'dark';
     if (savedTheme) {
       initialTheme = savedTheme;
     } else if (!systemPrefersDark) {
       initialTheme = 'light';
     }
-    
+
     setTheme(initialTheme as 'light' | 'dark');
     document.documentElement.classList.remove('light', 'dark');
     document.documentElement.classList.add(initialTheme);
@@ -48,7 +48,7 @@ export default function RegisterPage() {
     };
 
     window.addEventListener('themeChanged', handleThemeChange as EventListener);
-    
+
     return () => {
       window.removeEventListener('themeChanged', handleThemeChange as EventListener);
     };
@@ -111,7 +111,7 @@ export default function RegisterPage() {
 
   // Theme-based classes
   const isDark = theme === 'dark';
-  
+
   const themeClasses = {
     light: {
       background: 'from-blue-50 via-gray-50 to-purple-50',
@@ -167,7 +167,7 @@ export default function RegisterPage() {
 
   return (
     <div className={`min-h-screen flex items-center justify-center px-4 py-8 relative overflow-hidden transition-all duration-500 ${isDark ? 'dark' : ''}`}>
-      
+
       {/* Animated Background */}
       <div className={`absolute inset-0 bg-gradient-to-br ${t.background} transition-all duration-500`}>
         {/* Animated Particles */}
@@ -185,14 +185,12 @@ export default function RegisterPage() {
             }}
           />
         ))}
-        
+
         {/* Floating Orbs */}
-        <div className={`absolute top-1/4 left-1/4 w-64 h-64 ${
-          isDark ? 'bg-cyan-500/5' : 'bg-blue-400/10'
-        } rounded-full blur-3xl animate-pulse`}></div>
-        <div className={`absolute bottom-1/4 right-1/4 w-64 h-64 ${
-          isDark ? 'bg-blue-500/5' : 'bg-indigo-400/10'
-        } rounded-full blur-3xl animate-pulse delay-1000`}></div>
+        <div className={`absolute top-1/4 left-1/4 w-64 h-64 ${isDark ? 'bg-cyan-500/5' : 'bg-blue-400/10'
+          } rounded-full blur-3xl animate-pulse`}></div>
+        <div className={`absolute bottom-1/4 right-1/4 w-64 h-64 ${isDark ? 'bg-blue-500/5' : 'bg-indigo-400/10'
+          } rounded-full blur-3xl animate-pulse delay-1000`}></div>
 
         {/* Animated Grid */}
         <div className="absolute inset-0 opacity-[0.03]" style={{
@@ -209,33 +207,31 @@ export default function RegisterPage() {
         <div className="relative group">
           {/* Outer Glow */}
           <div className={`absolute -inset-0.5 bg-gradient-to-r ${t.glow} rounded-2xl blur opacity-50 group-hover:opacity-70 transition-all duration-500`}></div>
-          
+
           {/* Glass Card */}
-          <div 
+          <div
             className={`relative ${t.card} border ${t.border} rounded-2xl shadow-2xl`}
             onMouseEnter={() => setHoveredCard('main')}
             onMouseLeave={() => setHoveredCard(null)}
           >
             {/* Animated Top Border */}
-            <div className={`absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent ${
-              isDark ? 'via-cyan-500/30' : 'via-blue-500/50'
-            } to-transparent animate-border`}></div>
-            
+            <div className={`absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent ${isDark ? 'via-cyan-500/30' : 'via-blue-500/50'
+              } to-transparent animate-border`}></div>
+
             {/* Cross Button - Positioned inside container at top-right */}
             <div className="absolute top-3 right-3 z-10">
               <button
                 onClick={handleClose}
-                className={`p-2 rounded-lg backdrop-blur-sm border transition-all duration-300 hover:scale-110 active:scale-95 group ${
-                  isDark 
-                    ? 'bg-gray-900/40 border-white/10 hover:bg-red-500/20 hover:border-red-500/30 text-gray-300 hover:text-white' 
+                className={`p-2 rounded-lg backdrop-blur-sm border transition-all duration-300 hover:scale-110 active:scale-95 group ${isDark
+                    ? 'bg-gray-900/40 border-white/10 hover:bg-red-500/20 hover:border-red-500/30 text-gray-300 hover:text-white'
                     : 'bg-white/60 border-gray-300 hover:bg-red-50 hover:border-red-300 text-gray-500 hover:text-gray-700'
-                }`}
+                  }`}
                 aria-label="Close"
               >
                 <X className="w-4 h-4 group-hover:rotate-90 transition-transform duration-300" />
               </button>
             </div>
-            
+
             <div className="p-6">
               {/* Header */}
               <div className="text-center mb-6">
@@ -256,20 +252,16 @@ export default function RegisterPage() {
                     <div className={`absolute -inset-0.5 bg-gradient-to-r ${t.successGlow} rounded-xl blur opacity-50`}></div>
                     <div className="relative">
                       <div className="flex items-center space-x-2">
-                        <div className={`w-8 h-8 ${
-                          isDark ? 'bg-emerald-500/20' : 'bg-emerald-100'
-                        } rounded-full flex items-center justify-center animate-pulse`}>
-                          <CheckCircle className={`w-4 h-4 ${
-                            isDark ? 'text-emerald-400' : 'text-emerald-600'
-                          }`} />
+                        <div className={`w-8 h-8 ${isDark ? 'bg-emerald-500/20' : 'bg-emerald-100'
+                          } rounded-full flex items-center justify-center animate-pulse`}>
+                          <CheckCircle className={`w-4 h-4 ${isDark ? 'text-emerald-400' : 'text-emerald-600'
+                            }`} />
                         </div>
                         <div>
-                          <p className={`font-medium ${
-                            isDark ? 'text-emerald-400' : 'text-emerald-700'
-                          } text-sm`}>Account Created Successfully!</p>
-                          <p className={`text-xs ${
-                            isDark ? 'text-emerald-500/80' : 'text-emerald-600/80'
-                          } mt-1`}>Redirecting to login page...</p>
+                          <p className={`font-medium ${isDark ? 'text-emerald-400' : 'text-emerald-700'
+                            } text-sm`}>Account Created Successfully!</p>
+                          <p className={`text-xs ${isDark ? 'text-emerald-500/80' : 'text-emerald-600/80'
+                            } mt-1`}>Redirecting to login page...</p>
                         </div>
                       </div>
                     </div>
@@ -284,19 +276,16 @@ export default function RegisterPage() {
                     onClick={handleGithubSignup}
                     onMouseEnter={() => setHoveredCard('github')}
                     onMouseLeave={() => setHoveredCard(null)}
-                    className={`w-full group relative ${t.socialButton} backdrop-blur-sm border rounded-xl p-3 transition-all duration-300 hover:scale-[1.02] ${
-                      isDark ? 'hover:border-cyan-500/30' : 'hover:border-blue-500/30'
-                    }`}
+                    className={`w-full group relative ${t.socialButton} backdrop-blur-sm border rounded-xl p-3 transition-all duration-300 hover:scale-[1.02] ${isDark ? 'hover:border-cyan-500/30' : 'hover:border-blue-500/30'
+                      }`}
                   >
                     <div className="flex items-center justify-center space-x-3">
-                      <div className={`w-8 h-8 rounded-lg flex items-center justify-center ${
-                        isDark ? 'bg-gray-800' : 'bg-gray-100'
-                      } group-hover:bg-gray-700 transition-colors`}>
+                      <div className={`w-8 h-8 rounded-lg flex items-center justify-center ${isDark ? 'bg-gray-800 group-hover:bg-gray-700' : 'bg-gray-100 group-hover:bg-gray-300'
+                        } transition-colors`}>
                         <Github className={`w-4 h-4 ${isDark ? 'text-gray-300' : 'text-gray-600'}`} />
                       </div>
-                      <span className={`${t.socialText} font-medium group-hover:${
-                        isDark ? 'text-white' : 'text-gray-900'
-                      } transition-colors`}>Continue with GitHub</span>
+                      <span className={`${t.socialText} font-medium group-hover:${isDark ? 'text-white' : 'text-gray-900'
+                        } transition-colors`}>Continue with GitHub</span>
                     </div>
                   </button>
 
@@ -305,15 +294,13 @@ export default function RegisterPage() {
                     className={`w-full group relative ${t.socialButton} backdrop-blur-sm border rounded-xl p-3 opacity-60 cursor-not-allowed`}
                   >
                     <div className="flex items-center justify-center space-x-3">
-                      <div className={`w-8 h-8 rounded-lg flex items-center justify-center ${
-                        isDark ? 'bg-gray-800' : 'bg-gray-100'
-                      }`}>
+                      <div className={`w-8 h-8 rounded-lg flex items-center justify-center ${isDark ? 'bg-gray-800' : 'bg-gray-100'
+                        }`}>
                         <Mail className={`w-4 h-4 ${isDark ? 'text-gray-400' : 'text-gray-500'}`} />
                       </div>
                       <span className={`${t.socialText} font-medium`}>Continue with Google</span>
-                      <span className={`text-xs ${
-                        isDark ? 'bg-gray-800 text-gray-400' : 'bg-gray-200 text-gray-600'
-                      } px-2 py-1 rounded-full`}>Soon</span>
+                      <span className={`text-xs ${isDark ? 'bg-gray-800 text-gray-400' : 'bg-gray-200 text-gray-600'
+                        } px-2 py-1 rounded-full`}>Soon</span>
                     </div>
                   </button>
                 </div>
@@ -324,9 +311,8 @@ export default function RegisterPage() {
                     <div className={`w-full border-t ${t.border}`}></div>
                   </div>
                   <div className="relative flex justify-center">
-                    <span className={`px-3 ${
-                      isDark ? 'bg-gray-900/30' : 'bg-white/50'
-                    } ${t.subtext} text-xs font-medium`}>
+                    <span className={`px-3 ${isDark ? 'bg-gray-900/30' : 'bg-white/50'
+                      } ${t.subtext} text-xs font-medium`}>
                       Or with email
                     </span>
                   </div>
@@ -336,12 +322,10 @@ export default function RegisterPage() {
                 {error && (
                   <div className={`animate-shake rounded-xl ${t.error} border p-3`}>
                     <div className="flex items-center space-x-2">
-                      <div className={`w-5 h-5 ${
-                        isDark ? 'bg-red-500/20' : 'bg-red-100'
-                      } rounded-full flex items-center justify-center`}>
-                        <div className={`w-2 h-2 ${
-                          isDark ? 'bg-red-500' : 'bg-red-600'
-                        } rounded-full`}></div>
+                      <div className={`w-5 h-5 ${isDark ? 'bg-red-500/20' : 'bg-red-100'
+                        } rounded-full flex items-center justify-center`}>
+                        <div className={`w-2 h-2 ${isDark ? 'bg-red-500' : 'bg-red-600'
+                          } rounded-full`}></div>
                       </div>
                       <p className="text-sm">{error}</p>
                     </div>
@@ -363,9 +347,8 @@ export default function RegisterPage() {
                           required
                           value={fullName}
                           onChange={(e) => setFullName(e.target.value)}
-                          className={`w-full pl-10 pr-4 py-2.5 ${t.input} rounded-xl ${t.inputText} placeholder-gray-500 focus:outline-none focus:border-blue-500/50 focus:ring-1 ${
-                            isDark ? 'focus:ring-blue-500/30' : 'focus:ring-blue-400/30'
-                          } transition-all duration-300`}
+                          className={`w-full pl-10 pr-4 py-2.5 ${t.input} rounded-xl ${t.inputText} placeholder-gray-500 focus:outline-none focus:border-blue-500/50 focus:ring-1 ${isDark ? 'focus:ring-blue-500/30' : 'focus:ring-blue-400/30'
+                            } transition-all duration-300`}
                           placeholder="John Doe"
                         />
                       </div>
@@ -383,9 +366,8 @@ export default function RegisterPage() {
                           required
                           value={email}
                           onChange={(e) => setEmail(e.target.value)}
-                          className={`w-full pl-10 pr-4 py-2.5 ${t.input} rounded-xl ${t.inputText} placeholder-gray-500 focus:outline-none focus:border-blue-500/50 focus:ring-1 ${
-                            isDark ? 'focus:ring-blue-500/30' : 'focus:ring-blue-400/30'
-                          } transition-all duration-300`}
+                          className={`w-full pl-10 pr-4 py-2.5 ${t.input} rounded-xl ${t.inputText} placeholder-gray-500 focus:outline-none focus:border-blue-500/50 focus:ring-1 ${isDark ? 'focus:ring-blue-500/30' : 'focus:ring-blue-400/30'
+                            } transition-all duration-300`}
                           placeholder="you@example.com"
                         />
                       </div>
@@ -403,9 +385,8 @@ export default function RegisterPage() {
                           required
                           value={password}
                           onChange={(e) => setPassword(e.target.value)}
-                          className={`w-full pl-10 pr-10 py-2.5 ${t.input} rounded-xl ${t.inputText} placeholder-gray-500 focus:outline-none focus:border-blue-500/50 focus:ring-1 ${
-                            isDark ? 'focus:ring-blue-500/30' : 'focus:ring-blue-400/30'
-                          } transition-all duration-300`}
+                          className={`w-full pl-10 pr-10 py-2.5 ${t.input} rounded-xl ${t.inputText} placeholder-gray-500 focus:outline-none focus:border-blue-500/50 focus:ring-1 ${isDark ? 'focus:ring-blue-500/30' : 'focus:ring-blue-400/30'
+                            } transition-all duration-300`}
                           placeholder="••••••••"
                         />
                         <button
@@ -414,13 +395,11 @@ export default function RegisterPage() {
                           className="absolute right-3 top-1/2 transform -translate-y-1/2"
                         >
                           {showPassword ? (
-                            <EyeOff className={`w-4 h-4 ${t.textColor} hover:${
-                              isDark ? 'text-cyan-400' : 'text-blue-600'
-                            } transition-colors`} />
+                            <EyeOff className={`w-4 h-4 ${t.textColor} hover:${isDark ? 'text-cyan-400' : 'text-blue-600'
+                              } transition-colors`} />
                           ) : (
-                            <Eye className={`w-4 h-4 ${t.textColor} hover:${
-                              isDark ? 'text-cyan-400' : 'text-blue-600'
-                            } transition-colors`} />
+                            <Eye className={`w-4 h-4 ${t.textColor} hover:${isDark ? 'text-cyan-400' : 'text-blue-600'
+                              } transition-colors`} />
                           )}
                         </button>
                       </div>
@@ -441,9 +420,8 @@ export default function RegisterPage() {
                           required
                           value={confirmPassword}
                           onChange={(e) => setConfirmPassword(e.target.value)}
-                          className={`w-full pl-10 pr-10 py-2.5 ${t.input} rounded-xl ${t.inputText} placeholder-gray-500 focus:outline-none focus:border-blue-500/50 focus:ring-1 ${
-                            isDark ? 'focus:ring-blue-500/30' : 'focus:ring-blue-400/30'
-                          } transition-all duration-300`}
+                          className={`w-full pl-10 pr-10 py-2.5 ${t.input} rounded-xl ${t.inputText} placeholder-gray-500 focus:outline-none focus:border-blue-500/50 focus:ring-1 ${isDark ? 'focus:ring-blue-500/30' : 'focus:ring-blue-400/30'
+                            } transition-all duration-300`}
                           placeholder="••••••••"
                         />
                         <button
@@ -452,20 +430,17 @@ export default function RegisterPage() {
                           className="absolute right-3 top-1/2 transform -translate-y-1/2"
                         >
                           {showConfirmPassword ? (
-                            <EyeOff className={`w-4 h-4 ${t.textColor} hover:${
-                              isDark ? 'text-cyan-400' : 'text-blue-600'
-                            } transition-colors`} />
+                            <EyeOff className={`w-4 h-4 ${t.textColor} hover:${isDark ? 'text-cyan-400' : 'text-blue-600'
+                              } transition-colors`} />
                           ) : (
-                            <Eye className={`w-4 h-4 ${t.textColor} hover:${
-                              isDark ? 'text-cyan-400' : 'text-blue-600'
-                            } transition-colors`} />
+                            <Eye className={`w-4 h-4 ${t.textColor} hover:${isDark ? 'text-cyan-400' : 'text-blue-600'
+                              } transition-colors`} />
                           )}
                         </button>
                       </div>
                       {password && confirmPassword && password === confirmPassword && (
-                        <p className={`text-xs mt-1 ${
-                          isDark ? 'text-emerald-400' : 'text-emerald-600'
-                        }`}>
+                        <p className={`text-xs mt-1 ${isDark ? 'text-emerald-400' : 'text-emerald-600'
+                          }`}>
                           ✓ Passwords match
                         </p>
                       )}
@@ -477,23 +452,19 @@ export default function RegisterPage() {
                         id="terms"
                         type="checkbox"
                         required
-                        className={`h-3.5 w-3.5 mt-0.5 rounded ${
-                          isDark ? 'bg-gray-800 border-white/10 text-cyan-500' : 'bg-white border-gray-300 text-blue-600'
-                        } focus:${
-                          isDark ? 'ring-cyan-500/20' : 'ring-blue-400/30'
-                        }`}
+                        className={`h-3.5 w-3.5 mt-0.5 rounded ${isDark ? 'bg-gray-800 border-white/10 text-cyan-500' : 'bg-white border-gray-300 text-blue-600'
+                          } focus:${isDark ? 'ring-cyan-500/20' : 'ring-blue-400/30'
+                          }`}
                       />
                       <label htmlFor="terms" className={`text-xs ${t.subtext}`}>
                         I agree to the{" "}
-                        <Link to="/terms" className={`font-medium ${
-                          isDark ? 'text-cyan-400 hover:text-cyan-300' : 'text-blue-600 hover:text-blue-700'
-                        } transition-colors`}>
+                        <Link to="/terms" className={`font-medium ${isDark ? 'text-cyan-400 hover:text-cyan-300' : 'text-blue-600 hover:text-blue-700'
+                          } transition-colors`}>
                           Terms of Service
                         </Link>{" "}
                         and{" "}
-                        <Link to="/privacy" className={`font-medium ${
-                          isDark ? 'text-cyan-400 hover:text-cyan-300' : 'text-blue-600 hover:text-blue-700'
-                        } transition-colors`}>
+                        <Link to="/privacy" className={`font-medium ${isDark ? 'text-cyan-400 hover:text-cyan-300' : 'text-blue-600 hover:text-blue-700'
+                          } transition-colors`}>
                           Privacy Policy
                         </Link>
                       </label>
@@ -508,7 +479,7 @@ export default function RegisterPage() {
                   >
                     {/* Shine Effect */}
                     <div className="absolute inset-0 -translate-x-full group-hover:translate-x-full transition-transform duration-700 bg-gradient-to-r from-transparent via-white/10 to-transparent"></div>
-                    
+
                     <div className="relative flex items-center justify-center space-x-2">
                       {loading ? (
                         <>
@@ -531,9 +502,8 @@ export default function RegisterPage() {
                     Already have an account?{" "}
                     <Link
                       to="/login"
-                      className={`font-medium ${
-                        isDark ? 'text-cyan-400 hover:text-cyan-300' : 'text-blue-600 hover:text-blue-700'
-                      } transition-colors`}
+                      className={`font-medium ${isDark ? 'text-cyan-400 hover:text-cyan-300' : 'text-blue-600 hover:text-blue-700'
+                        } transition-colors`}
                     >
                       Sign in
                     </Link>