diff --git a/frontend/src/Pages/Authentication/forms.tsx b/frontend/src/Pages/Authentication/forms.tsx
index 221257f9..759c8294 100644
--- a/frontend/src/Pages/Authentication/forms.tsx
+++ b/frontend/src/Pages/Authentication/forms.tsx
@@ -1,7 +1,6 @@
-
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
-import { useContext, useState, useEffect } from 'react';
+import { useContext, useState, useEffect, useRef } from 'react';
 import { AuthContext } from '../../context/authContext';
 import { useCallback } from "react";
 
@@ -10,6 +9,110 @@ interface LoginFormProps {
   infoMessage?: string;
 }
 
+// Email autocomplete component
+interface EmailInputWithSuggestionsProps {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  className?: string;
+}
+
+const EmailInputWithSuggestions: React.FC<EmailInputWithSuggestionsProps> = ({
+  value,
+  onChange,
+  placeholder = "name@example.com",
+  className = ""
+}) => {
+  const [showSuggestions, setShowSuggestions] = useState(false);
+  const [activeSuggestionIndex, setActiveSuggestionIndex] = useState(-1);
+  const wrapperRef = useRef<HTMLDivElement>(null);
+
+  const emailDomains = ['@gmail.com', '@yahoo.com', '@outlook.com', '@hotmail.com'];
+
+  const getEmailSuggestions = (email: string) => {
+    if (!email || email.includes('@')) return [];
+    return emailDomains.map(domain => email + domain);
+  };
+
+  const suggestions = getEmailSuggestions(value);
+
+  const handleInputChange = (newValue: string) => {
+    onChange(newValue);
+    if (newValue && !newValue.includes('@')) {
+      setShowSuggestions(true);
+      setActiveSuggestionIndex(-1);
+    } else {
+      setShowSuggestions(false);
+    }
+  };
+
+  const handleSuggestionClick = (suggestion: string) => {
+    onChange(suggestion);
+    setShowSuggestions(false);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (!showSuggestions || suggestions.length === 0) return;
+
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      setActiveSuggestionIndex(prev =>
+        prev < suggestions.length - 1 ? prev + 1 : prev
+      );
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      setActiveSuggestionIndex(prev => prev > 0 ? prev - 1 : -1);
+    } else if (e.key === 'Enter' && activeSuggestionIndex >= 0) {
+      e.preventDefault();
+      handleSuggestionClick(suggestions[activeSuggestionIndex]);
+    } else if (e.key === 'Escape') {
+      setShowSuggestions(false);
+    }
+  };
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (wrapperRef.current && !wrapperRef.current.contains(event.target as Node)) {
+        setShowSuggestions(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  return (
+    <div ref={wrapperRef} className="relative w-full">
+      <Input
+        type="text"
+        value={value}
+        onChange={(e) => handleInputChange(e.target.value)}
+        onKeyDown={handleKeyDown}
+        onFocus={() => value && !value.includes('@') && setShowSuggestions(true)}
+        placeholder={placeholder}
+        className={className}
+      />
+      {showSuggestions && suggestions.length > 0 && (
+        <div className="absolute z-10 w-full mt-1 bg-white dark:bg-slate-800 border border-gray-300 dark:border-white rounded-md shadow-lg max-h-48 overflow-auto">
+          {suggestions.map((suggestion, index) => (
+            <div
+              key={suggestion}
+              onClick={() => handleSuggestionClick(suggestion)}
+              className={`px-4 py-2 cursor-pointer ${
+                index === activeSuggestionIndex
+                  ? 'bg-gray-100 dark:bg-slate-700'
+                  : 'hover:bg-gray-100 dark:hover:bg-slate-700'
+              }`}
+            >
+              {suggestion}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
 export const LoginForm: React.FC<LoginFormProps> = ({ startForgotPassword, infoMessage }) => {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
@@ -24,28 +127,50 @@ export const LoginForm: React.FC<LoginFormProps> = ({ startForgotPassword, infoM
 
   const [localError, setLocalError] = useState<string | null>(null);
 
+  const MIN_PASSWORD_LENGTH = 8;
 
-const MIN_PASSWORD_LENGTH = 8;
-const handleSubmit = async (e: React.FormEvent) => {
-  e.preventDefault();
-  if (password.length < MIN_PASSWORD_LENGTH) {
-    setLocalError(`Password must be at least ${MIN_PASSWORD_LENGTH} characters`);
-    return;
-  }
-  setLocalError(null);
-  await login(email, password);
-};
+  const validateEmail = (email: string) => {
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return emailRegex.test(email);
+  };
 
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLocalError(null);
 
+    // Validate email
+    if (!email.trim()) {
+      setLocalError('Please enter your email address');
+      return;
+    }
 
+    if (!validateEmail(email)) {
+      setLocalError('Please enter a valid email address');
+      return;
+    }
+
+    // Validate password
+    if (!password) {
+      setLocalError('Please enter your password');
+      return;
+    }
+
+    if (password.length < MIN_PASSWORD_LENGTH) {
+      setLocalError(`Password must be at least ${MIN_PASSWORD_LENGTH} characters`);
+      return;
+    }
+
+    await login(email, password);
+  };
+
+  const handleGoogleLogin = useCallback(
+    (response: { credential: string; select_by: string }) => {
+      const idToken = response.credential;
+      googleLogin(idToken);
+    },
+    [googleLogin]
+  );
 
-const handleGoogleLogin = useCallback(
-  (response: { credential: string; select_by: string }) => {
-    const idToken = response.credential;
-    googleLogin(idToken);
-  },
-  [googleLogin]
-);
   useEffect(() => {
     const google = window.google;
     if (!google?.accounts) {
@@ -75,11 +200,10 @@ const handleGoogleLogin = useCallback(
   return (
     <form className="w-full" onSubmit={handleSubmit}>
       {infoMessage && <p className="text-sm text-green-500 mb-2">{infoMessage}</p>}
-      <Input
-        type="email"
-        placeholder="name@example.com"
+      <EmailInputWithSuggestions
         value={email}
-        onChange={(e) => setEmail(e.target.value)}
+        onChange={setEmail}
+        placeholder="name@example.com"
         className="mb-2 dark:border-white"
       />
       <Input
@@ -90,10 +214,10 @@ const handleGoogleLogin = useCallback(
         className="mb-1 dark:border-white"
       />
       {localError && (
-        <p className="text-red-500 text-sm mt-2">
+        <p className="text-red-500 text-sm mt-2 mb-2">
           {localError}
         </p>
-)}
+      )}
       <div className='w-full flex justify-start items-center pl-1'>
         <div className='w-4'>
           <Input
@@ -137,11 +261,49 @@ export const SignUpForm: React.FC<SignUpFormProps> = ({ startOtpVerification })
 
   const { signup, googleLogin, error, loading } = authContext;
 
+  const [localError, setLocalError] = useState<string | null>(null);
+
+  const MIN_PASSWORD_LENGTH = 8;
+
+  const validateEmail = (email: string) => {
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return emailRegex.test(email);
+  };
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
+    setLocalError(null);
+
+    // Validate email
+    if (!email.trim()) {
+      setLocalError('Please enter your email address');
+      return;
+    }
+
+    if (!validateEmail(email)) {
+      setLocalError('Please enter a valid email address');
+      return;
+    }
+
+    // Validate password
+    if (!password) {
+      setLocalError('Please enter a password');
+      return;
+    }
+
+    if (password.length < MIN_PASSWORD_LENGTH) {
+      setLocalError(`Password must be at least ${MIN_PASSWORD_LENGTH} characters`);
+      return;
+    }
+
+    // Validate confirm password
+    if (!confirmPassword) {
+      setLocalError('Please confirm your password');
+      return;
+    }
 
     if (password !== confirmPassword) {
-      authContext.handleError('Passwords do not match');
+      setLocalError('Passwords do not match');
       return;
     }
 
@@ -149,14 +311,13 @@ export const SignUpForm: React.FC<SignUpFormProps> = ({ startOtpVerification })
     startOtpVerification(email);
   };
 
- const handleGoogleLogin = useCallback(
-  (response: { credential: string; select_by: string }) => {
-    const idToken = response.credential;
-    googleLogin(idToken);
-  },
-  [googleLogin]
-);
-
+  const handleGoogleLogin = useCallback(
+    (response: { credential: string; select_by: string }) => {
+      const idToken = response.credential;
+      googleLogin(idToken);
+    },
+    [googleLogin]
+  );
 
   useEffect(() => {
     const google = window.google;
@@ -186,11 +347,10 @@ export const SignUpForm: React.FC<SignUpFormProps> = ({ startOtpVerification })
 
   return (
     <form className="w-full" onSubmit={handleSubmit}>
-      <Input
-        type="email"
-        placeholder="name@example.com"
+      <EmailInputWithSuggestions
         value={email}
-        onChange={(e) => setEmail(e.target.value)}
+        onChange={setEmail}
+        placeholder="name@example.com"
         className="mb-2 dark:border-white"
       />
       <Input
@@ -218,6 +378,7 @@ export const SignUpForm: React.FC<SignUpFormProps> = ({ startOtpVerification })
         </div>
         <div className='pl-2'>show password</div>
       </div>
+      {localError && <p className="text-sm text-red-500 mb-2">{localError}</p>}
       {error && <p className="text-sm text-red-500 mb-2">{error}</p>}
       <Button type="submit" className="w-full mb-2 border dark:border-white" disabled={loading}>
         {loading ? 'Creating Account...' : 'Sign Up With Email'}
@@ -308,10 +469,9 @@ export const ForgotPasswordForm: React.FC<ForgotPasswordFormProps> = ({
       <h3 className="text-2xl font-medium my-4">Reset Password</h3>
       <p className="mb-4">Enter your email to receive a password reset code.</p>
       <form onSubmit={handleSubmit} className="w-full">
-        <Input
-          type="email"
+        <EmailInputWithSuggestions
           value={email}
-          onChange={(e) => setEmail(e.target.value)}
+          onChange={setEmail}
           placeholder="name@example.com"
           className="w-full mb-4 dark:border-white"
         />
diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
index 7a331488..24b19cfd 100644
--- a/frontend/src/components/Header.tsx
+++ b/frontend/src/components/Header.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useContext, useEffect } from "react";
 import { NavLink, useLocation, useNavigate } from "react-router-dom";
-import { Bell, Menu, X, Home, BarChart, User, Info, LogOut, Check } from "lucide-react";
+import { Bell, Menu, X, Home, BarChart, User, Info, LogOut } from "lucide-react";
 import { useAtom } from "jotai";
 import { userAtom } from "@/state/userAtom";
 import { AuthContext } from "@/context/authContext";
@@ -45,7 +45,6 @@ function Header() {
 
   useEffect(() => {
     fetchNotifications();
-    // Poll for notifications every minute
     const interval = setInterval(fetchNotifications, 60000);
     return () => clearInterval(interval);
   }, [user]);
@@ -53,12 +52,11 @@ function Header() {
   const handleNotificationClick = async (notification: Notification) => {
     if (!notification.isRead) {
       await markNotificationAsRead(notification.id);
-      setNotifications(prev => 
+      setNotifications(prev =>
         prev.map(n => n.id === notification.id ? { ...n, isRead: true } : n)
       );
       setUnreadCount(prev => Math.max(0, prev - 1));
     }
-    
     if (notification.link) {
       navigate(notification.link);
       setIsNotificationsOpen(false);
@@ -69,7 +67,6 @@ function Header() {
     e.stopPropagation();
     await deleteNotification(id);
     setNotifications(prev => prev.filter(n => n.id !== id));
-    // Update unread count if the deleted notification was unread
     const notification = notifications.find(n => n.id === id);
     if (notification && !notification.isRead) {
       setUnreadCount(prev => Math.max(0, prev - 1));
@@ -121,62 +118,73 @@ function Header() {
 
   return (
     <>
-      <header className="flex items-center justify-between h-16 px-4 border-b border-gray-200">
+      <header className="flex items-center justify-between h-16 px-4 border-b border-border bg-background">
         <div className="text-lg font-semibold">{getBreadcrumbs()}</div>
         <div className="flex items-center gap-4">
+
+          {/* Notification Bell */}
           <Popover open={isNotificationsOpen} onOpenChange={setIsNotificationsOpen}>
             <PopoverTrigger asChild>
               <button className="relative focus:outline-none">
-                <Bell className="w-5 h-5 text-gray-600" />
+                <Bell className="w-5 h-5 text-muted-foreground hover:text-foreground transition-colors" />
                 {unreadCount > 0 && (
                   <span className="absolute -top-1 -right-1 block h-2 w-2 rounded-full bg-red-500" />
                 )}
               </button>
             </PopoverTrigger>
-            <PopoverContent className="w-80 p-0" align="end">
-              <div className="flex items-center justify-between p-4 border-b border-gray-100">
-                <h4 className="font-semibold text-gray-900">Notifications</h4>
+            <PopoverContent className="w-80 p-0 bg-popover border border-border shadow-lg" align="end">
+              {/* Header */}
+              <div className="flex items-center justify-between p-4 border-b border-border">
+                <h4 className="font-semibold text-popover-foreground">Notifications</h4>
                 {unreadCount > 0 && (
-                  <Button 
-                    variant="ghost" 
-                    size="sm" 
-                    className="text-xs h-8 px-2 text-blue-600 hover:text-blue-800"
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="text-xs h-8 px-2 text-blue-500 hover:text-blue-400 hover:bg-accent"
                     onClick={handleMarkAllRead}
                   >
                     Mark all read
                   </Button>
                 )}
               </div>
+
+              {/* Notification List */}
               <ScrollArea className="h-[300px]">
                 {notifications.length === 0 ? (
-                  <div className="p-8 text-center text-gray-500 text-sm">
+                  <div className="p-8 text-center text-muted-foreground text-sm">
                     No notifications yet
                   </div>
                 ) : (
-                  <div className="divide-y divide-gray-100">
+                  <div className="divide-y divide-border">
                     {notifications.map((notification) => (
-                      <div 
+                      <div
                         key={notification.id}
-                        className={`p-4 hover:bg-gray-50 cursor-pointer transition-colors relative group ${!notification.isRead ? 'bg-blue-50/50' : ''}`}
+                        className={`p-4 cursor-pointer transition-colors relative group
+                          hover:bg-accent
+                          ${!notification.isRead ? 'bg-blue-500/10' : 'bg-popover'}
+                        `}
                         onClick={() => handleNotificationClick(notification)}
                       >
+                        {/* Delete button */}
                         <button
                           onClick={(e) => handleDeleteNotification(e, notification.id)}
-                          className="absolute top-2 right-2 p-1 text-gray-400 hover:text-red-500 opacity-0 group-hover:opacity-100 transition-opacity"
+                          className="absolute top-2 right-2 p-1 text-muted-foreground hover:text-red-500 opacity-0 group-hover:opacity-100 transition-opacity"
                           title="Delete notification"
                         >
                           <X className="w-3 h-3" />
                         </button>
+
                         <div className="flex gap-3">
+                          {/* Unread dot */}
                           <div className={`mt-1 h-2 w-2 rounded-full flex-shrink-0 ${!notification.isRead ? 'bg-blue-500' : 'bg-transparent'}`} />
                           <div className="flex-1 space-y-1 pr-4">
-                            <p className="text-sm font-medium leading-none text-gray-900">
+                            <p className="text-sm font-medium leading-none text-popover-foreground">
                               {notification.title}
                             </p>
-                            <p className="text-sm text-gray-500 line-clamp-2">
+                            <p className="text-sm text-muted-foreground line-clamp-2">
                               {notification.message}
                             </p>
-                            <p className="text-xs text-gray-400">
+                            <p className="text-xs text-muted-foreground/70">
                               {new Date(notification.createdAt).toLocaleDateString()}
                             </p>
                           </div>
@@ -188,47 +196,48 @@ function Header() {
               </ScrollArea>
             </PopoverContent>
           </Popover>
-          
+
+          {/* Avatar / Profile */}
           <Popover>
             <PopoverTrigger asChild>
               <button className="focus:outline-none">
                 <img
                   src={user?.avatarUrl || avatarImage}
                   alt="User avatar"
-                  className="w-8 h-8 rounded-full border-2 border-gray-300 object-cover cursor-pointer hover:opacity-80 transition-opacity"
+                  className="w-8 h-8 rounded-full border-2 border-border object-cover cursor-pointer hover:opacity-80 transition-opacity"
                 />
               </button>
             </PopoverTrigger>
-            <PopoverContent className="w-80 p-0" align="end">
-              <div className="p-4 border-b border-gray-100">
+            <PopoverContent className="w-80 p-0 bg-popover border border-border shadow-lg" align="end">
+              <div className="p-4 border-b border-border">
                 <div className="flex items-center gap-3 mb-3">
                   <img
                     src={user?.avatarUrl || avatarImage}
                     alt="User avatar"
-                    className="w-12 h-12 rounded-full border-2 border-gray-200 object-cover"
+                    className="w-12 h-12 rounded-full border-2 border-border object-cover"
                   />
                   <div className="overflow-hidden">
-                    <h4 className="font-semibold text-gray-900 truncate">{user?.displayName || "User"}</h4>
-                    <p className="text-sm text-gray-500 truncate">{user?.email || "No email"}</p>
+                    <h4 className="font-semibold text-popover-foreground truncate">{user?.displayName || "User"}</h4>
+                    <p className="text-sm text-muted-foreground truncate">{user?.email || "No email"}</p>
                   </div>
                 </div>
                 <div className="space-y-2">
                   <div className="flex justify-between text-sm">
-                    <span className="text-gray-500">User ID</span>
-                    <span className="font-mono text-xs bg-gray-100 px-2 py-0.5 rounded text-gray-700 truncate max-w-[150px]" title={user?.id}>
+                    <span className="text-muted-foreground">User ID</span>
+                    <span className="font-mono text-xs bg-muted px-2 py-0.5 rounded text-muted-foreground truncate max-w-[150px]" title={user?.id}>
                       {user?.id || "N/A"}
                     </span>
                   </div>
                   <div className="flex justify-between text-sm">
-                    <span className="text-gray-500">Rating</span>
-                    <span className="font-medium text-blue-600">{user?.rating ? Math.round(user.rating) : 1500}</span>
+                    <span className="text-muted-foreground">Rating</span>
+                    <span className="font-medium text-blue-500">{user?.rating ? Math.round(user.rating) : 1500}</span>
                   </div>
                 </div>
               </div>
               <div className="p-2">
                 <button
                   onClick={() => auth?.logout()}
-                  className="w-full flex items-center gap-2 px-3 py-2 text-sm text-red-600 hover:bg-red-50 rounded-md transition-colors"
+                  className="w-full flex items-center gap-2 px-3 py-2 text-sm text-red-500 hover:bg-red-500/10 rounded-md transition-colors"
                 >
                   <LogOut className="w-4 h-4" />
                   Sign out
@@ -237,9 +246,10 @@ function Header() {
             </PopoverContent>
           </Popover>
 
+          {/* Mobile menu button */}
           <button
             onClick={toggleDrawer}
-            className="md:hidden p-2 rounded-md text-gray-600 hover:bg-gray-100"
+            className="md:hidden p-2 rounded-md text-muted-foreground hover:bg-accent hover:text-foreground"
             aria-label="Open menu"
           >
             <Menu className="h-6 w-6" />
@@ -247,18 +257,17 @@ function Header() {
         </div>
       </header>
 
+      {/* Mobile Drawer */}
       {isDrawerOpen && (
         <div className="fixed inset-0 z-[1000] md:hidden">
           <div
-            className="absolute inset-0 bg-black bg-opacity-50"
+            className="absolute inset-0 bg-black/50"
             onClick={toggleDrawer}
-          ></div>
-          <div className="relative w-64 h-full bg-white shadow-lg transform transition-transform duration-300 ease-in-out translate-x-0 ml-auto">
-            <div className="flex items-center justify-between h-16 px-4 border-b border-gray-200">
+          />
+          <div className="relative w-64 h-full bg-background shadow-lg transform transition-transform duration-300 ease-in-out translate-x-0 ml-auto">
+            <div className="flex items-center justify-between h-16 px-4 border-b border-border">
               <div className="flex items-center gap-2">
-                <span className="text-xl font-bold text-gray-900">
-                  DebateAI by
-                </span>
+                <span className="text-xl font-bold text-foreground">DebateAI by</span>
                 <img
                   src={debateAiLogo}
                   alt="DebateAI Logo"
@@ -267,37 +276,17 @@ function Header() {
               </div>
               <button
                 onClick={toggleDrawer}
-                className="p-2 text-gray-600 hover:text-gray-900"
+                className="p-2 text-muted-foreground hover:text-foreground"
                 aria-label="Close menu"
               >
                 <X className="h-6 w-6" />
               </button>
             </div>
             <nav className="flex-1 px-2 py-4 space-y-2">
-              <NavItem
-                to="/startDebate"
-                label="Home"
-                icon={<Home className="mr-3 h-4 w-4" />}
-                onClick={toggleDrawer}
-              />
-              <NavItem
-                to="/leaderboard"
-                label="Leaderboard"
-                icon={<BarChart className="mr-3 h-4 w-4" />}
-                onClick={toggleDrawer}
-              />
-              <NavItem
-                to="/profile"
-                label="Profile"
-                icon={<User className="mr-3 h-4 w-4" />}
-                onClick={toggleDrawer}
-              />
-              <NavItem
-                to="/about"
-                label="About"
-                icon={<Info className="mr-3 h-4 w-4" />}
-                onClick={toggleDrawer}
-              />
+              <NavItem to="/startDebate" label="Home" icon={<Home className="mr-3 h-4 w-4" />} onClick={toggleDrawer} />
+              <NavItem to="/leaderboard" label="Leaderboard" icon={<BarChart className="mr-3 h-4 w-4" />} onClick={toggleDrawer} />
+              <NavItem to="/profile" label="Profile" icon={<User className="mr-3 h-4 w-4" />} onClick={toggleDrawer} />
+              <NavItem to="/about" label="About" icon={<Info className="mr-3 h-4 w-4" />} onClick={toggleDrawer} />
             </nav>
           </div>
         </div>
@@ -319,10 +308,10 @@ function NavItem({ to, label, icon, onClick }: NavItemProps) {
       to={to}
       onClick={onClick}
       className={({ isActive }) =>
-        `group flex items-center px-2 py-2 text-sm font-medium rounded-md ${
+        `group flex items-center px-2 py-2 text-sm font-medium rounded-md transition-colors ${
           isActive
-            ? "bg-gray-200 text-gray-900"
-            : "text-gray-600 hover:bg-gray-100 hover:text-gray-900"
+            ? "bg-accent text-accent-foreground"
+            : "text-muted-foreground hover:bg-accent hover:text-foreground"
         }`
       }
     >
@@ -332,4 +321,4 @@ function NavItem({ to, label, icon, onClick }: NavItemProps) {
   );
 }
 
-export default Header;
+export default Header;
\ No newline at end of file