diff --git a/app/emails/page.tsx b/app/emails/page.tsx
index b5652a9..8d88895 100644
--- a/app/emails/page.tsx
+++ b/app/emails/page.tsx
@@ -9,7 +9,7 @@ interface Email {
   subject: string;
   date: string;
   processed: string;
-  processedAt: string | null;
+  processedAt: string | null; // Wird nicht mehr angezeigt, aber im Interface belassen
   processedBy: string | null;
   queuedTo: string | null;
   status: string | null;
@@ -51,100 +51,122 @@ export default function Emails() {
       .finally(() => setLoading(false));
   }, [bucket, mailbox]);
 
-  if (loading) return <div className="min-h-screen flex items-center justify-center bg-gray-100">Loading...</div>;
-  if (error) return <div className="min-h-screen flex items-center justify-center bg-gray-100 text-red-500">{error}</div>;
+  if (loading) return <div className="min-h-screen flex items-center justify-center bg-gray-50">Loading...</div>;
+  if (error) return <div className="min-h-screen flex items-center justify-center bg-gray-50 text-red-500">{error}</div>;
 
   const formatDate = (dateStr: string | null) => {
-    if (!dateStr) return 'N/A';
+    if (!dateStr) return '';
     const date = new Date(dateStr);
-    return date.toLocaleString('en-US', { year: '2-digit', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', hour12: false });
+    // Kompaktes Datum formatieren
+    return date.toLocaleString('en-US', { month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', hour12: false });
   };
 
+  // DEFINITION DES GRID LAYOUTS
+  // 1fr = Subject (nimmt den Rest)
+  // auto = Passt sich exakt der Breite des Inhalts an (für Key, Date, etc.)
+  const gridLayoutClass = "grid grid-cols-[1fr_auto_auto_auto_auto_auto_auto_auto] gap-x-4 items-center";
+
   return (
-    // 1. "w-full" statt fixer max-width, um den ganzen Schirm zu nutzen
-    <div className="min-h-screen bg-gradient-to-b from-blue-50 to-gray-100 p-4 md:p-8">
-      <nav className="w-full mx-auto mb-6 bg-white p-4 rounded-lg shadow-sm">
+    <div className="min-h-screen bg-gray-50 p-4">
+      <nav className="w-full mb-6 bg-white p-3 rounded shadow-sm border border-gray-100">
         <ol className="flex flex-wrap space-x-2 text-sm text-gray-500">
+           {/* Breadcrumbs verkürzt für Übersichtlichkeit */}
           <li><Link href="/" className="hover:text-blue-600">Home</Link></li>
           <li className="mx-1">/</li>
-          <li><Link href="/domains" className="hover:text-blue-600">Domains</Link></li>
-          <li className="mx-1">/</li>
           <li><Link href={`/mailboxes?bucket=${bucket}`} className="hover:text-blue-600">Mailboxes</Link></li>
           <li className="mx-1">/</li>
           <li className="font-semibold text-gray-700">Emails</li>
         </ol>
       </nav>
-      <h1 className="text-3xl font-bold mb-8 text-center text-gray-800">Emails for {mailbox} in {bucket}</h1>
       
-      {/* Container für die Tabelle */}
-      <div className="w-full bg-white rounded-lg shadow-md overflow-hidden">
-        
-        {/* 2. "table-fixed": Zwingt die Tabelle, die definierten Breiten einzuhalten 
-               und Texte abzuschneiden, statt die Tabelle zu verbreitern.
-        */}
-        <table className="w-full table-fixed divide-y divide-gray-200 text-xs md:text-sm">
-          <thead className="bg-blue-50">
-            <tr>
-              {/* Subject bekommt keine feste Breite -> nimmt den verfügbaren Platz */}
-              <th className="px-2 py-3 text-left font-medium text-gray-700 uppercase tracking-wider w-auto">Subject</th>
-              
-              {/* Anderen Spalten geben wir feste Breiten (w-...), damit sie gut aussehen */}
-              <th className="px-2 py-3 text-left font-medium text-gray-700 uppercase tracking-wider w-24 md:w-32">Date</th>
-              <th className="px-2 py-3 text-left font-medium text-gray-700 uppercase tracking-wider w-20 md:w-24">Key</th>
-              <th className="px-2 py-3 text-left font-medium text-gray-700 uppercase tracking-wider w-16">Proc.</th>
-              <th className="px-2 py-3 text-left font-medium text-gray-700 uppercase tracking-wider w-24 md:w-32">Proc. At</th>
-              <th className="px-2 py-3 text-left font-medium text-gray-700 uppercase tracking-wider w-20">Proc. By</th>
-              <th className="px-2 py-3 text-left font-medium text-gray-700 uppercase tracking-wider w-20">Queued</th>
-              <th className="px-2 py-3 text-left font-medium text-gray-700 uppercase tracking-wider w-20">Status</th>
-              <th className="px-2 py-3 text-left font-medium text-gray-700 uppercase tracking-wider w-16">Act</th>
-            </tr>
-          </thead>
-          <tbody className="bg-white divide-y divide-gray-200">
-            {emails.length === 0 ? (
-              <tr>
-                <td colSpan={9} className="px-4 py-8 text-center text-gray-500">No emails found</td>
-              </tr>
-            ) : emails.map((e: Email) => (
-              <tr key={e.key} className="hover:bg-blue-50 transition">
-                
-                {/* 3. Subject Cell: 
-                    "truncate" macht "..." wenn der Text zu lang ist.
-                    "title" zeigt den vollen Text beim Hovern an.
-                */}
-                <td className="px-2 py-3 text-gray-900 truncate" title={e.subject}>
-                  {e.subject}
-                </td>
+      <h1 className="text-2xl font-bold mb-6 text-gray-800 break-all">
+        {mailbox} <span className="text-gray-400 font-normal text-lg">in {bucket}</span>
+      </h1>
+      
+      {/* Container - overflow-x-auto erlaubt Scrollen nur wenn der Key GIGANTISCH ist und den Bildschirm sprengt */}
+      <div className="w-full bg-white rounded shadow-sm border border-gray-200 overflow-x-auto">
+        <div className="min-w-fit">
+          
+          {/* HEADER */}
+          <div className={`${gridLayoutClass} px-4 py-3 bg-gray-100 border-b border-gray-200 text-xs font-semibold text-gray-600 uppercase tracking-wider`}>
+            <div>Subject</div>
+            <div className="whitespace-nowrap">Date</div>
+            <div>Key</div>
+            <div className="text-center">Proc.</div>
+            {/* Proc At entfernt */}
+            <div>Proc. By</div>
+            <div>Queued</div>
+            <div>Status</div>
+            <div className="text-right">Action</div>
+          </div>
 
-                <td className="px-2 py-3 text-gray-500 truncate">{formatDate(e.date)}</td>
-                <td className="px-2 py-3 text-gray-900 truncate" title={e.key}>{e.key}</td>
-                <td className="px-2 py-3">
-                  <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${e.processed === 'true' ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800'}`}>
+          {/* ROWS */}
+          <div className="divide-y divide-gray-100">
+            {emails.length === 0 ? (
+              <div className="p-8 text-center text-gray-500">No emails found</div>
+            ) : emails.map((e: Email) => (
+              <div key={e.key} className={`${gridLayoutClass} px-4 py-2 hover:bg-blue-50 transition-colors text-sm`}>
+                
+                {/* 1. Subject: truncate sorgt für "..." am Ende, min-w-0 ist wichtig für Grid Truncation */}
+                <div className="font-medium text-gray-900 truncate min-w-0 pr-4" title={e.subject}>
+                  {e.subject}
+                </div>
+
+                {/* 2. Date: Fixed width content via whitespace-nowrap */}
+                <div className="whitespace-nowrap text-gray-500 text-xs">
+                  {formatDate(e.date)}
+                </div>
+
+                {/* 3. Key: Monospace Font, volle Sichtbarkeit, selektierbar */}
+                <div className="font-mono text-xs text-gray-600 select-all">
+                  {e.key}
+                </div>
+
+                {/* 4. Processed: Kurz */}
+                <div className="text-center">
+                   <span className={`inline-flex items-center justify-center px-2 py-0.5 rounded text-xs font-medium ${
+                    e.processed === 'true' ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-600'
+                  }`}>
                     {e.processed === 'true' ? 'Y' : 'N'}
                   </span>
-                </td>
-                <td className="px-2 py-3 text-gray-500 truncate">{formatDate(e.processedAt)}</td>
-                <td className="px-2 py-3 text-gray-500 truncate" title={e.processedBy || ''}>{e.processedBy || '-'}</td>
-                <td className="px-2 py-3 text-gray-500 truncate" title={e.queuedTo || ''}>{e.queuedTo || '-'}</td>
-                <td className="px-2 py-3 truncate">
+                </div>
+
+                {/* Proc At entfernt */}
+
+                {/* 5. Processed By: Auto width */}
+                <div className="text-gray-500 text-xs truncate max-w-[150px]" title={e.processedBy || ''}>
+                  {e.processedBy ? e.processedBy.split('@')[0] : '-'}
+                </div>
+
+                {/* 6. Queued: Auto width */}
+                <div className="text-gray-500 text-xs truncate max-w-[150px]" title={e.queuedTo || ''}>
+                   {e.queuedTo || '-'}
+                </div>
+
+                {/* 7. Status */}
+                <div className="whitespace-nowrap">
                   {e.status ? (
-                    <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${
-                      e.status === 'delivered' ? 'bg-green-100 text-green-800' : 
-                      e.status === 'failed' ? 'bg-red-100 text-red-800' : 
-                      'bg-gray-100 text-gray-800'
+                    <span className={`text-xs ${
+                      e.status === 'delivered' ? 'text-green-600' : 
+                      e.status === 'failed' ? 'text-red-600' : 
+                      'text-gray-500'
                     }`}>
                       {e.status}
                     </span>
-                  ) : '-'}
-                </td>
-                <td className="px-2 py-3 font-medium text-center">
-                  <Link href={`/email?bucket=${bucket}&key=${e.key}&mailbox=${encodeURIComponent(mailbox || '')}`} className="text-blue-600 hover:text-blue-900">
+                  ) : <span className="text-gray-300">-</span>}
+                </div>
+
+                {/* 8. Action: Rechtsbündig aligned mit Header */}
+                <div className="text-right font-medium">
+                  <Link href={`/email?bucket=${bucket}&key=${e.key}&mailbox=${encodeURIComponent(mailbox || '')}`} className="text-blue-600 hover:text-blue-800 hover:underline">
                     View
                   </Link>
-                </td>
-              </tr>
+                </div>
+
+              </div>
             ))}
-          </tbody>
-        </table>
+          </div>
+        </div>
       </div>
     </div>
   );