diff --git a/app/api/mail/test-connection/route.ts b/app/api/mail/test-connection/route.ts
index 99bb7f6..9f9487b 100644
--- a/app/api/mail/test-connection/route.ts
+++ b/app/api/mail/test-connection/route.ts
@@ -4,27 +4,34 @@ import Imap from 'imap';
 export async function POST(request: Request) {
   try {
     const { email, password, host, port } = await request.json();
+    
+    // Ensure port is a valid number
+    const portNumber = parseInt(port, 10);
+    if (isNaN(portNumber) || portNumber < 0 || portNumber > 65535) {
+      throw new Error('Invalid port number');
+    }
 
-    // IMAP configuration
-    const imapConfig: Imap.Config = {
+    const imapConfig = {
       user: email,
       password: password,
       host: host,
-      port: parseInt(port, 10),
+      port: portNumber,
       tls: true,
-      tlsOptions: { 
-        rejectUnauthorized: false,
-        servername: host
-      },
       authTimeout: 10000,
-      connTimeout: 10000
+      connTimeout: 10000,
+      debug: console.log
     };
 
-    // Create a promise-based IMAP connection
+    console.log('Attempting IMAP connection with config:', {
+      ...imapConfig,
+      password: '[REDACTED]'
+    });
+
     const imap = new Imap(imapConfig);
 
     return new Promise((resolve, reject) => {
       imap.once('ready', () => {
+        console.log('IMAP connection successful');
         imap.end();
         resolve(NextResponse.json({ success: true }));
       });
@@ -32,19 +39,18 @@ export async function POST(request: Request) {
       imap.once('error', (err: Error) => {
         console.error('IMAP connection error:', err);
         reject(NextResponse.json({ 
-          error: 'Failed to connect to email server',
-          details: err.message
-        }, { status: 401 }));
+          error: 'IMAP connection failed', 
+          details: err.message 
+        }, { status: 500 }));
       });
 
       imap.connect();
     });
-
   } catch (error) {
-    console.error('Error in test connection:', error);
+    console.error('Error in test-connection:', error);
     return NextResponse.json({ 
-      error: 'Failed to test connection',
-      details: error instanceof Error ? error.message : 'Unknown error'
+      error: 'Failed to test connection', 
+      details: error instanceof Error ? error.message : 'Unknown error' 
     }, { status: 500 });
   }
 } 
\ No newline at end of file
diff --git a/app/mail/login/page.tsx b/app/mail/login/page.tsx
index 18e269b..94ccae4 100644
--- a/app/mail/login/page.tsx
+++ b/app/mail/login/page.tsx
@@ -50,18 +50,18 @@ export default function EmailLoginPage() {
   };
 
   return (
-    <div className="flex min-h-screen items-center justify-center bg-gray-50">
-      <Card className="w-full max-w-md">
+    <div className="flex min-h-screen items-center justify-center bg-white">
+      <Card className="w-full max-w-md shadow-lg">
         <CardHeader>
-          <CardTitle>Email Login</CardTitle>
-          <CardDescription>
+          <CardTitle className="text-2xl font-bold text-gray-900">Email Login</CardTitle>
+          <CardDescription className="text-gray-600">
             Enter your email credentials to access your mailbox
           </CardDescription>
         </CardHeader>
         <CardContent>
           <form onSubmit={handleSubmit} className="space-y-4">
             <div className="space-y-2">
-              <Label htmlFor="email">Email Address</Label>
+              <Label htmlFor="email" className="text-gray-700">Email Address</Label>
               <Input
                 id="email"
                 type="email"
@@ -69,39 +69,47 @@ export default function EmailLoginPage() {
                 value={credentials.email}
                 onChange={(e) => setCredentials({ ...credentials, email: e.target.value })}
                 required
+                className="border-gray-300 focus:border-blue-500 focus:ring-blue-500"
               />
             </div>
             <div className="space-y-2">
-              <Label htmlFor="password">Password</Label>
+              <Label htmlFor="password" className="text-gray-700">Password</Label>
               <Input
                 id="password"
                 type="password"
                 value={credentials.password}
                 onChange={(e) => setCredentials({ ...credentials, password: e.target.value })}
                 required
+                className="border-gray-300 focus:border-blue-500 focus:ring-blue-500"
               />
             </div>
             <div className="space-y-2">
-              <Label htmlFor="host">IMAP Host</Label>
+              <Label htmlFor="host" className="text-gray-700">IMAP Host</Label>
               <Input
                 id="host"
                 type="text"
                 value={credentials.host}
                 onChange={(e) => setCredentials({ ...credentials, host: e.target.value })}
                 required
+                className="border-gray-300 focus:border-blue-500 focus:ring-blue-500"
               />
             </div>
             <div className="space-y-2">
-              <Label htmlFor="port">IMAP Port</Label>
+              <Label htmlFor="port" className="text-gray-700">IMAP Port</Label>
               <Input
                 id="port"
                 type="text"
                 value={credentials.port}
                 onChange={(e) => setCredentials({ ...credentials, port: e.target.value })}
                 required
+                className="border-gray-300 focus:border-blue-500 focus:ring-blue-500"
               />
             </div>
-            <Button type="submit" className="w-full" disabled={loading}>
+            <Button 
+              type="submit" 
+              className="w-full bg-blue-600 hover:bg-blue-700 text-white" 
+              disabled={loading}
+            >
               {loading ? 'Connecting...' : 'Connect'}
             </Button>
           </form>