changes

app/domains/page.tsx

@@ -32,16 +32,23 @@ export default function Domains() {
   if (error) return <div className="min-h-screen flex items-center justify-center bg-gray-100 text-red-500">{error}</div>;
 
   return (
-    <div className="min-h-screen bg-gray-100 p-8">
-      <h1 className="text-3xl font-bold mb-6 text-center">Domains</h1>
-      <ul className="max-w-md mx-auto bg-white rounded-lg shadow-md divide-y divide-gray-200">
+    <div className="min-h-screen bg-gradient-to-b from-blue-50 to-gray-100 p-8">
+      <nav className="max-w-4xl mx-auto mb-6 bg-white p-4 rounded-lg shadow-sm">
+        <ol className="flex flex-wrap space-x-2 text-sm text-gray-500">
+          <li><Link href="/" className="hover:text-blue-600">Home</Link></li>
+          <li className="mx-1">/</li>
+          <li className="font-semibold text-gray-700">Domains</li>
+        </ol>
+      </nav>
+      <h1 className="text-4xl font-bold mb-8 text-center text-gray-800">Domains</h1>
+      <ul className="max-w-md mx-auto grid gap-4">
         {domains.length === 0 ? (
-          <li className="p-4 text-center text-gray-500">No domains found</li>
+          <li className="p-6 text-center text-gray-500 bg-white rounded-lg shadow-md">No domains found</li>
         ) : (
           domains.map((d: any) => (
-            <li key={d.bucket} className="p-4 hover:bg-gray-50 transition">
-              <Link href={`/mailboxes?bucket=${d.bucket}`} className="text-blue-500 hover:underline">
-                {d.domain}
+            <li key={d.bucket}>
+              <Link href={`/mailboxes?bucket=${d.bucket}`} className="block p-6 bg-white rounded-lg shadow-md hover:shadow-lg transition hover:bg-blue-50">
+                <span className="text-lg font-medium text-blue-600">{d.domain}</span>
               </Link>
             </li>
           ))