diff --git a/app/mail/page.tsx b/app/mail/page.tsx
index 895fd94..7850ae8 100644
--- a/app/mail/page.tsx
+++ b/app/mail/page.tsx
@@ -1055,16 +1055,14 @@ export default function MailPage() {
       {/* Email list header */}
       <div className="p-4 border-b border-gray-100">
         <div className="flex items-center justify-between">
-          <div className="flex items-center gap-4">
-            <h2 className="text-lg font-semibold text-gray-800">
-              {currentView === 'INBOX' ? 'Inbox' :
-               currentView === 'starred' ? 'Starred' :
-               currentView.charAt(0).toUpperCase() + currentView.slice(1)}
-            </h2>
-          </div>
-          <div className="text-sm text-gray-500">
+          <h2 className="text-xl font-semibold text-gray-900">
+            {currentView === 'INBOX' ? 'Inbox' :
+             currentView === 'starred' ? 'Starred' :
+             currentView.charAt(0).toUpperCase() + currentView.slice(1).toLowerCase()}
+          </h2>
+          <span className="text-sm text-gray-500">
             {emails.length} emails
-          </div>
+          </span>
         </div>
       </div>
 
@@ -1080,77 +1078,60 @@ export default function MailPage() {
         ) : emails.length === 0 ? (
           <div className="flex flex-col items-center justify-center h-64">
             <Mail className="h-8 w-8 text-gray-400 mb-2" />
-            <p className="text-gray-500 text-sm">
-              {currentView === 'INBOX' && 'No emails in inbox'}
-              {currentView === 'starred' && 'No starred emails'}
-              {currentView === 'Sent' && 'No sent emails'}
-              {currentView === 'Trash' && 'No emails in trash'}
-              {currentView === 'Drafts' && 'No drafts'}
-              {currentView === 'Spam' && 'No spam emails'}
-              {(currentView === 'Archives' || currentView === 'Archive') && 'No archived emails'}
-            </p>
+            <p className="text-gray-500 text-sm">No emails in this folder</p>
           </div>
         ) : (
           <div className="divide-y divide-gray-100">
             {sortedEmails.map((email) => (
               <div
                 key={email.id}
-                className={`flex flex-col p-3 hover:bg-gray-50 cursor-pointer ${
-                  selectedEmail?.id === email.id ? 'bg-blue-50' : ''
+                className={`flex items-start gap-3 p-3 hover:bg-gray-50/80 cursor-pointer ${
+                  selectedEmail?.id === email.id ? 'bg-blue-50/50' : ''
                 } ${!email.read ? 'bg-blue-50/20' : ''}`}
                 onClick={() => handleEmailSelect(email.id)}
               >
-                <div className="flex items-center justify-between mb-1">
-                  <div className="flex items-center gap-3">
-                    <Checkbox
-                      checked={selectedEmails.includes(email.id.toString())}
-                      onClick={(e) => e.stopPropagation()}
-                      onCheckedChange={(checked) => {
-                        if (checked) {
-                          setSelectedEmails([...selectedEmails, email.id.toString()]);
-                        } else {
-                          setSelectedEmails(selectedEmails.filter(id => id !== email.id.toString()));
-                        }
-                      }}
-                    />
-                    <span className="text-sm font-medium text-gray-900">
-                      {currentView === 'Sent' ? email.to : (email.fromName || email.from)}
-                    </span>
-                  </div>
-                  <div className="flex items-center gap-2">
-                    <span className="text-xs text-gray-500">
-                      {formatDate(email.date)}
-                    </span>
-                    {/* Show folder badge if it doesn't match current view */}
-                    {email.folder !== currentView && currentView === 'starred' && (
-                      <span className="text-xs bg-gray-100 text-gray-600 px-2 py-0.5 rounded">
-                        {email.folder}
+                <Checkbox
+                  checked={selectedEmails.includes(email.id.toString())}
+                  onClick={(e) => e.stopPropagation()}
+                  onCheckedChange={(checked) => {
+                    if (checked) {
+                      setSelectedEmails([...selectedEmails, email.id.toString()]);
+                    } else {
+                      setSelectedEmails(selectedEmails.filter(id => id !== email.id.toString()));
+                    }
+                  }}
+                  className="mt-1"
+                />
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center justify-between gap-2 mb-1">
+                    <div className="flex items-center gap-2 min-w-0">
+                      <span className={`text-sm truncate ${!email.read ? 'font-semibold text-gray-900' : 'text-gray-600'}`}>
+                        {currentView === 'Sent' ? email.to : (email.fromName || email.from)}
                       </span>
-                    )}
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="text-gray-400 hover:text-yellow-400"
-                      onClick={(e) => toggleStarred(email.id, e)}
-                    >
-                      <Star className={`h-4 w-4 ${email.starred ? 'fill-yellow-400 text-yellow-400' : ''}`} />
-                    </Button>
+                    </div>
+                    <div className="flex items-center gap-2 flex-shrink-0">
+                      <span className="text-xs text-gray-500 whitespace-nowrap">
+                        {formatDate(email.date)}
+                      </span>
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="h-6 w-6 text-gray-400 hover:text-yellow-400"
+                        onClick={(e) => toggleStarred(email.id, e)}
+                      >
+                        <Star className={`h-4 w-4 ${email.starred ? 'fill-yellow-400 text-yellow-400' : ''}`} />
+                      </Button>
+                    </div>
                   </div>
-                </div>
-                <div className="ml-8">
-                  <h3 className={`text-sm ${!email.read ? 'font-semibold' : ''} text-gray-900 mb-0.5`}>
+                  <h3 className={`text-sm mb-0.5 truncate ${!email.read ? 'font-medium text-gray-900' : 'text-gray-700'}`}>
                     {email.subject || '(No subject)'}
                   </h3>
-                  <p className="text-xs text-gray-500 line-clamp-1">
-                    {email.body.replace(/<[^>]*>/g, '').substring(0, 100)}...
-                  </p>
-                </div>
-                {/* Debug info - only in development */}
-                {process.env.NODE_ENV === 'development' && (
-                  <div className="ml-8 mt-1 text-xs text-gray-400">
-                    Folder: {email.folder}
+                  <div className="flex items-center gap-2 text-xs text-gray-500">
+                    <span className="truncate">
+                      {email.folder === 'INBOX' && 'Folder: INBOX'}
+                    </span>
                   </div>
-                )}
+                </div>
               </div>
             ))}
             {isLoadingMore && (