feat(dns): Implement DNS record management and query handling

- Added models for various DNS record types: A, AAAA, CNAME, MX, SRV, and TXT.
- Created repository functions for CRUD operations on DNS records.
- Developed DNS server functionality to handle incoming queries and forward them to upstream servers.
- Implemented local resolution for DNS queries, including support for A, AAAA, CNAME, MX, TXT, and SRV records.
- Enhanced SMTP server to support TLS and STARTTLS configurations.
- Improved email session handling with local delivery and error logging.
- Added new log messages for better traceability of DNS operations and SMTP actions.

2 files changed, 187 insertions, 65 deletions

diff --git a/templates/domains/htmx/index.htmx.django b/templates/domains/htmx/index.htmx.django
index 0efaf45..3b2ef96 100644
--- a/templates/domains/htmx/index.htmx.django
+++ b/templates/domains/htmx/index.htmx.django
@@ -1,44 +1,84 @@
 <div class="slide-up space-y-6">
     <div class="glass rounded-xl glow-border">
-        <div class="px-6 py-5 border-b border-white/[0.04]">
-            <div class="flex items-center gap-3 mb-4">
-                <div class="flex items-center justify-center w-10 h-10 rounded-xl bg-accent-500/10">
-                    <svg class="w-5 h-5 text-accent-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
+        <div class="flex items-center justify-between px-5 py-4 border-b border-white/[0.04]">
+            <h2 class="text-sm font-medium text-zinc-200">Domain Manager</h2>
+        </div>
+        <div class="px-5 py-4">
+            <p class="text-xs text-zinc-500 leading-relaxed">Dove runs a local DNS server that resolves your registered TLDs and domains. Each domain gets DNS records (A, AAAA, CNAME, MX, TXT, SRV) with port mapping support, so you can route <span class="text-zinc-400">myapp.dove</span> to <span class="text-zinc-400">127.0.0.1:3000</span>. Queries for unregistered domains are forwarded to your system's upstream DNS, so your regular internet browsing is not disrupted. Point your system's DNS resolver at Dove's DNS address to start resolving local domains.</p>
+        </div>
+    </div>
+
+    <div class="grid grid-cols-2 gap-4">
+        {% url "domains.tlds" as tlds_path %}
+        <a href="{{ tlds_path }}" hx-get="{{ tlds_path }}" hx-target="#content" hx-swap="innerHTML" hx-push-url="true" class="glass rounded-xl p-5 glow-border hover:bg-white/[0.02] transition-colors duration-150 group">
+            <div class="flex items-center gap-3 mb-3">
+                <div class="flex items-center justify-center w-9 h-9 rounded-lg bg-accent-500/10">
+                    <svg class="w-4.5 h-4.5 text-accent-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
                         <path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 0 1 3 12c0-1.605.42-3.113 1.157-4.418" />
                     </svg>
                 </div>
-                <h2 class="text-base font-medium text-zinc-100">Domain Manager</h2>
+                <h3 class="text-sm font-medium text-zinc-200 group-hover:text-zinc-100">Top-Level Domains</h3>
             </div>
-            <p class="text-sm text-zinc-400 leading-relaxed">Dove includes a built-in DNS server that provides local name resolution for your development environment. The Domain Manager lets you create custom top-level domains and register domain names that resolve entirely on your machine, without touching your system hosts file or relying on external DNS providers.</p>
-        </div>
-        <div class="px-6 py-5 space-y-6">
-            <div>
-                <h3 class="text-sm font-medium text-zinc-200 mb-2">Top-Level Domains (TLDs)</h3>
-                <p class="text-xs text-zinc-500 leading-relaxed mb-3">TLDs sit at the root of the domain hierarchy. Dove ships with built-in TLDs like <span class="text-zinc-400 font-medium">.local</span> and <span class="text-zinc-400 font-medium">.dev</span> that are ready to use immediately. You can also create custom TLDs to organise domains by team, project, or environment.</p>
-                <div class="rounded-lg bg-surface-900/50 border border-white/[0.04] px-4 py-3 space-y-2">
-                    <p class="text-xs text-zinc-400"><span class="text-zinc-300 font-medium">Built-in TLDs</span> are created during initial setup and cannot be deleted. They provide a stable foundation for common development patterns.</p>
-                    <p class="text-xs text-zinc-400"><span class="text-zinc-300 font-medium">Custom TLDs</span> can be created and deleted freely. A TLD can only be removed after all domains registered under it have been deleted first.</p>
-                </div>
-                <p class="text-xs text-zinc-500 leading-relaxed mt-3">TLD names must be valid DNS labels: lowercase letters, numbers, and hyphens only, between 1 and 63 characters, and cannot start or end with a hyphen.</p>
+            <p class="text-xs text-zinc-500 leading-relaxed">Dove ships with .dove, .local, .nest, and .test. Create additional TLDs to organise domains by team, project, or environment.</p>
+        </a>
+
+        {% url "domains.manage" as manage_path %}
+        <a href="{{ manage_path }}" hx-get="{{ manage_path }}" hx-target="#content" hx-swap="innerHTML" hx-push-url="true" class="glass rounded-xl p-5 glow-border hover:bg-white/[0.02] transition-colors duration-150 group">
+            <div class="flex items-center gap-3 mb-3">
+                <div class="flex items-center justify-center w-9 h-9 rounded-lg bg-accent-500/10">
+                    <svg class="w-4.5 h-4.5 text-accent-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M5.25 14.25h13.5m-13.5 0a3 3 0 0 1-3-3m3 3a3 3 0 1 0 0 6h13.5a3 3 0 1 0 0-6m-16.5-3a3 3 0 0 1 3-3h13.5a3 3 0 0 1 3 3m-19.5 0a4.5 4.5 0 0 1 .9-2.7L5.737 5.1a3.375 3.375 0 0 1 2.7-1.35h7.126c1.062 0 2.062.5 2.7 1.35l2.587 3.45a4.5 4.5 0 0 1 .9 2.7m0 0a3 3 0 0 1-3 3m0 3h.008v.008h-.008v-.008Zm0-6h.008v.008h-.008v-.008Zm-3 6h.008v.008h-.008v-.008Zm0-6h.008v.008h-.008v-.008Z" />
+                    </svg>
+                </div>
+                <h3 class="text-sm font-medium text-zinc-200 group-hover:text-zinc-100">Domains</h3>
             </div>
-            <div class="border-t border-white/[0.04] pt-5">
-                <h3 class="text-sm font-medium text-zinc-200 mb-2">Domains</h3>
-                <p class="text-xs text-zinc-500 leading-relaxed mb-3">Domains are registered under a TLD and provide the address for your local services. Registering <span class="text-zinc-400 font-medium">myapp</span> under <span class="text-zinc-400 font-medium">.local</span> creates <span class="text-zinc-400 font-medium">myapp.local</span>, which immediately resolves on your machine.</p>
-                <div class="rounded-lg bg-surface-900/50 border border-white/[0.04] px-4 py-3 space-y-2">
-                    <p class="text-xs text-zinc-400"><span class="text-zinc-300 font-medium">Service routing</span> &mdash; Each domain can be mapped to local services through DNS records with port support, similar to how Cloudflare handles traffic routing. Your services get proper domain names that resolve to the correct local ports.</p>
-                    <p class="text-xs text-zinc-400"><span class="text-zinc-300 font-medium">Mail integration</span> &mdash; Registered domains are automatically available for creating mailboxes. A domain like <span class="text-zinc-400">myapp.local</span> lets you create addresses such as <span class="text-zinc-400">[email protected]</span>.</p>
-                </div>
-                <p class="text-xs text-zinc-500 leading-relaxed mt-3">Domain names follow the same validation rules as TLDs. Each domain must be unique within its TLD &mdash; you cannot register the same name twice under the same TLD, but <span class="text-zinc-400">myapp.local</span> and <span class="text-zinc-400">myapp.dev</span> can coexist.</p>
+            <p class="text-xs text-zinc-500 leading-relaxed">Register domains under your TLDs. Each domain resolves locally and can be used for mail, service routing, and DNS records.</p>
+        </a>
+
+        <div class="glass rounded-xl p-5 glow-border opacity-60">
+            <div class="flex items-center gap-3 mb-3">
+                <div class="flex items-center justify-center w-9 h-9 rounded-lg bg-zinc-500/10">
+                    <svg class="w-4.5 h-4.5 text-zinc-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 12h16.5m-16.5 3.75h16.5M3.75 19.5h16.5M5.625 4.5h12.75a1.875 1.875 0 0 1 0 3.75H5.625a1.875 1.875 0 0 1 0-3.75Z" />
+                    </svg>
+                </div>
+                <div class="flex items-center gap-2">
+                    <h3 class="text-sm font-medium text-zinc-400">DNS Records</h3>
+                    <span class="text-[10px] text-zinc-600 bg-surface-800 px-1.5 py-0.5 rounded">Coming soon</span>
+                </div>
             </div>
-            <div class="border-t border-white/[0.04] pt-5">
-                <h3 class="text-sm font-medium text-zinc-200 mb-2">How It Works</h3>
-                <p class="text-xs text-zinc-500 leading-relaxed mb-3">Dove runs a DNS server that intercepts queries for your registered TLDs and returns the appropriate local addresses. Queries for unregistered domains are forwarded to your system's upstream DNS resolver, so internet connectivity is unaffected.</p>
-                <div class="rounded-lg bg-surface-900/50 border border-white/[0.04] px-4 py-3 space-y-2">
-                    <p class="text-xs text-zinc-400"><span class="text-zinc-300 font-medium">Configuration</span> &mdash; The DNS server listens on the host and port defined in your <span class="text-zinc-400">config.toml</span> under the <span class="text-zinc-400">[dns]</span> section. Point your machine's DNS resolver at this address to start resolving local domains.</p>
-                    <p class="text-xs text-zinc-400"><span class="text-zinc-300 font-medium">TTL</span> &mdash; All DNS responses use the <span class="text-zinc-400">default_ttl</span> value from your configuration. Since everything is local, a low TTL ensures changes propagate immediately.</p>
-                    <p class="text-xs text-zinc-400"><span class="text-zinc-300 font-medium">No system changes</span> &mdash; Dove does not modify <span class="text-zinc-400">/etc/hosts</span> or any system files. It operates entirely as a standalone DNS server that you opt into by configuring your resolver.</p>
+            <p class="text-xs text-zinc-600 leading-relaxed">Manage A, AAAA, CNAME, MX, TXT, and SRV records per domain. A records support port mapping for routing domains to local services. Wildcard subdomain records for multi-tenant apps.</p>
+        </div>
+
+        <div class="glass rounded-xl p-5 glow-border opacity-60">
+            <div class="flex items-center gap-3 mb-3">
+                <div class="flex items-center justify-center w-9 h-9 rounded-lg bg-zinc-500/10">
+                    <svg class="w-4.5 h-4.5 text-zinc-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m5.231 13.481L15 17.25m-4.5-15H5.625c-.621 0-1.125.504-1.125 1.125v16.5c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Zm3.75 11.625a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z" />
+                    </svg>
+                </div>
+                <div class="flex items-center gap-2">
+                    <h3 class="text-sm font-medium text-zinc-400">Query Log</h3>
+                    <span class="text-[10px] text-zinc-600 bg-surface-800 px-1.5 py-0.5 rounded">Coming soon</span>
+                </div>
+            </div>
+            <p class="text-xs text-zinc-600 leading-relaxed">Log every DNS query with timestamp, source, record type, and answer. Debug service discovery issues and see which domains your applications are resolving.</p>
+        </div>
+
+        <div class="glass rounded-xl p-5 glow-border opacity-60">
+            <div class="flex items-center gap-3 mb-3">
+                <div class="flex items-center justify-center w-9 h-9 rounded-lg bg-zinc-500/10">
+                    <svg class="w-4.5 h-4.5 text-zinc-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75m-3-7.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285Z" />
+                    </svg>
+                </div>
+                <div class="flex items-center gap-2">
+                    <h3 class="text-sm font-medium text-zinc-400">Local CA &amp; TLS</h3>
+                    <span class="text-[10px] text-zinc-600 bg-surface-800 px-1.5 py-0.5 rounded">Coming soon</span>
                 </div>
             </div>
+            <p class="text-xs text-zinc-600 leading-relaxed">Auto-generated root CA with per-domain TLS certificates. Install the CA once into your system or browser, and every registered domain gets automatic HTTPS with subdomain SSL support.</p>
         </div>
+
     </div>
 </div>
diff --git a/templates/mail/htmx/index.htmx.django b/templates/mail/htmx/index.htmx.django
index 802d047..0125c5e 100644
--- a/templates/mail/htmx/index.htmx.django
+++ b/templates/mail/htmx/index.htmx.django
@@ -1,45 +1,127 @@
 <div class="slide-up space-y-6">
     <div class="glass rounded-xl glow-border">
-        <div class="px-6 py-5 border-b border-white/[0.04]">
-            <div class="flex items-center gap-3 mb-4">
-                <div class="flex items-center justify-center w-10 h-10 rounded-xl bg-accent-500/10">
-                    <svg class="w-5 h-5 text-accent-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75" />
+        <div class="flex items-center justify-between px-5 py-4 border-b border-white/[0.04]">
+            <h2 class="text-sm font-medium text-zinc-200">Mail</h2>
+        </div>
+        <div class="px-5 py-4">
+            <p class="text-xs text-zinc-500 leading-relaxed">Dove runs a full local mail server stack with SMTP, IMAP, and POP3. Applications connect to the SMTP server to send emails, and mail clients like Thunderbird or Apple Mail connect via IMAP or POP3 to retrieve them. MX records are automatically created when mailboxes are added to a domain. Incoming emails are parsed for headers, content, attachments, and spam scoring. All mail stays on your machine.</p>
+        </div>
+    </div>
+
+    <div class="grid grid-cols-2 gap-4">
+        {% url "mail.users" as users_path %}
+        <a href="{{ users_path }}" hx-get="{{ users_path }}" hx-target="#content" hx-swap="innerHTML" hx-push-url="true" class="glass rounded-xl p-5 glow-border hover:bg-white/[0.02] transition-colors duration-150 group">
+            <div class="flex items-center gap-3 mb-3">
+                <div class="flex items-center justify-center w-9 h-9 rounded-lg bg-accent-500/10">
+                    <svg class="w-4.5 h-4.5 text-accent-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z" />
+                    </svg>
+                </div>
+                <h3 class="text-sm font-medium text-zinc-200 group-hover:text-zinc-100">Users</h3>
+            </div>
+            <p class="text-xs text-zinc-500 leading-relaxed">Create and manage mail users. Each user can own multiple mailboxes across different domains and authenticate against the mail server.</p>
+        </a>
+
+        {% url "mail.mailboxes" as mailboxes_path %}
+        <a href="{{ mailboxes_path }}" hx-get="{{ mailboxes_path }}" hx-target="#content" hx-swap="innerHTML" hx-push-url="true" class="glass rounded-xl p-5 glow-border hover:bg-white/[0.02] transition-colors duration-150 group">
+            <div class="flex items-center gap-3 mb-3">
+                <div class="flex items-center justify-center w-9 h-9 rounded-lg bg-accent-500/10">
+                    <svg class="w-4.5 h-4.5 text-accent-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 13.5h3.86a2.25 2.25 0 0 1 2.012 1.244l.256.512a2.25 2.25 0 0 0 2.013 1.244h2.21a2.25 2.25 0 0 0 2.013-1.244l.256-.512a2.25 2.25 0 0 1 2.013-1.244h3.859m-19.5.338V18a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18v-4.162c0-.224-.034-.447-.1-.661L19.24 5.338a2.25 2.25 0 0 0-2.15-1.588H6.911a2.25 2.25 0 0 0-2.15 1.588L2.35 13.177a2.25 2.25 0 0 0-.1.661Z" />
+                    </svg>
+                </div>
+                <h3 class="text-sm font-medium text-zinc-200 group-hover:text-zinc-100">Mailboxes</h3>
+            </div>
+            <p class="text-xs text-zinc-500 leading-relaxed">Create email addresses tied to your registered domains. Each mailbox gets its own folders, storage, and supports aliases for receiving mail at multiple addresses.</p>
+        </a>
+
+        {% url "mail.webmail" as webmail_path %}
+        <a href="{{ webmail_path }}" hx-get="{{ webmail_path }}" hx-target="#content" hx-swap="innerHTML" hx-push-url="true" class="glass rounded-xl p-5 glow-border hover:bg-white/[0.02] transition-colors duration-150 group">
+            <div class="flex items-center gap-3 mb-3">
+                <div class="flex items-center justify-center w-9 h-9 rounded-lg bg-accent-500/10">
+                    <svg class="w-4.5 h-4.5 text-accent-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M9 3.75H6.912a2.25 2.25 0 0 0-2.15 1.588L2.35 13.177a2.25 2.25 0 0 0-.1.661V18a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18v-4.162c0-.224-.034-.447-.1-.661L19.24 5.338a2.25 2.25 0 0 0-2.15-1.588H15M2.25 13.5h3.86a2.25 2.25 0 0 1 2.012 1.244l.256.512a2.25 2.25 0 0 0 2.013 1.244h2.21a2.25 2.25 0 0 0 2.013-1.244l.256-.512a2.25 2.25 0 0 1 2.013-1.244h3.859M12 3v8.25m0 0-3-3m3 3 3-3" />
+                    </svg>
+                </div>
+                <h3 class="text-sm font-medium text-zinc-200 group-hover:text-zinc-100">WebMail</h3>
+            </div>
+            <p class="text-xs text-zinc-500 leading-relaxed">Full browser-based mail client. Compose with rich text editor, reply, reply all, forward, and attach files with drag-and-drop. Manage folders, search and filter messages, tag and star emails. Inspect complete headers, raw MIME source, and HTML rendering per message.</p>
+        </a>
+
+        <div class="glass rounded-xl p-5 glow-border opacity-60">
+            <div class="flex items-center gap-3 mb-3">
+                <div class="flex items-center justify-center w-9 h-9 rounded-lg bg-zinc-500/10">
+                    <svg class="w-4.5 h-4.5 text-zinc-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M18.364 18.364A9 9 0 0 0 5.636 5.636m12.728 12.728A9 9 0 0 1 5.636 5.636m12.728 12.728L5.636 5.636" />
+                    </svg>
+                </div>
+                <div class="flex items-center gap-2">
+                    <h3 class="text-sm font-medium text-zinc-400">No-Reply Addresses</h3>
+                    <span class="text-[10px] text-zinc-600 bg-surface-800 px-1.5 py-0.5 rounded">Coming soon</span>
+                </div>
+            </div>
+            <p class="text-xs text-zinc-600 leading-relaxed">Create send-only addresses with no inbox. Useful for transactional emails, notifications, and automated messages that should not receive replies.</p>
+        </div>
+
+        <div class="glass rounded-xl p-5 glow-border opacity-60">
+            <div class="flex items-center gap-3 mb-3">
+                <div class="flex items-center justify-center w-9 h-9 rounded-lg bg-zinc-500/10">
+                    <svg class="w-4.5 h-4.5 text-zinc-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z" />
+                    </svg>
+                </div>
+                <div class="flex items-center gap-2">
+                    <h3 class="text-sm font-medium text-zinc-400">Bounce Capture</h3>
+                    <span class="text-[10px] text-zinc-600 bg-surface-800 px-1.5 py-0.5 rounded">Coming soon</span>
+                </div>
+            </div>
+            <p class="text-xs text-zinc-600 leading-relaxed">Track and inspect bounced emails. Messages sent to non-existent mailboxes on registered domains are captured with sender, recipient, and reason for analysis.</p>
+        </div>
+
+        <div class="glass rounded-xl p-5 glow-border opacity-60">
+            <div class="flex items-center gap-3 mb-3">
+                <div class="flex items-center justify-center w-9 h-9 rounded-lg bg-zinc-500/10">
+                    <svg class="w-4.5 h-4.5 text-zinc-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M9.75 3.104v5.714a2.25 2.25 0 0 1-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 0 1 4.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0 1 12 15a9.065 9.065 0 0 0-6.23.693L5 14.5m14.8.8 1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.309 48.309 0 0 1 12 21c-2.773 0-5.491-.235-8.135-.687-1.718-.293-2.3-2.379-1.067-3.61L5 14.5" />
                     </svg>
                 </div>
-                <h2 class="text-base font-medium text-zinc-100">Mail</h2>
+                <div class="flex items-center gap-2">
+                    <h3 class="text-sm font-medium text-zinc-400">Spam Scoring</h3>
+                    <span class="text-[10px] text-zinc-600 bg-surface-800 px-1.5 py-0.5 rounded">Coming soon</span>
+                </div>
             </div>
-            <p class="text-sm text-zinc-400 leading-relaxed">Dove provides a complete local mail infrastructure with SMTP, IMAP, and POP3 support. Create users, assign mailboxes across your registered domains, and send and receive emails entirely on your machine with zero external dependencies.</p>
+            <p class="text-xs text-zinc-600 leading-relaxed">Analyse incoming emails for spam indicators. Check SPF, DKIM, and DMARC alignment, score deliverability, and flag suspicious messages automatically.</p>
         </div>
-        <div class="px-6 py-5 space-y-6">
-            <div>
-                <h3 class="text-sm font-medium text-zinc-200 mb-2">Users</h3>
-                <p class="text-xs text-zinc-500 leading-relaxed mb-3">Users are the identities that own mailboxes and authenticate against the mail server. Each user has a unique username and a display name that appears on outgoing messages.</p>
-                <div class="rounded-lg bg-surface-900/50 border border-white/[0.04] px-4 py-3 space-y-2">
-                    <p class="text-xs text-zinc-400"><span class="text-zinc-300 font-medium">Authentication</span> &mdash; Users authenticate via SMTP to send emails and via IMAP or POP3 to retrieve them. Credentials are managed through the Dove dashboard.</p>
-                    <p class="text-xs text-zinc-400"><span class="text-zinc-300 font-medium">Multiple mailboxes</span> &mdash; A single user can own mailboxes across different domains. For example, one user might manage both <span class="text-zinc-400">[email protected]</span> and <span class="text-zinc-400">[email protected]</span>.</p>
-                </div>
-                <p class="text-xs text-zinc-500 leading-relaxed mt-3">Usernames must be unique across the system. The display name is used as the sender name in email headers and can contain any characters.</p>
-            </div>
-            <div class="border-t border-white/[0.04] pt-5">
-                <h3 class="text-sm font-medium text-zinc-200 mb-2">Mailboxes</h3>
-                <p class="text-xs text-zinc-500 leading-relaxed mb-3">A mailbox is an email address tied to a user and a domain. The address is composed of a local part and a domain: <span class="text-zinc-400 font-medium">local-part</span><span class="text-zinc-500">@</span><span class="text-zinc-400 font-medium">domain.tld</span>.</p>
-                <div class="rounded-lg bg-surface-900/50 border border-white/[0.04] px-4 py-3 space-y-2">
-                    <p class="text-xs text-zinc-400"><span class="text-zinc-300 font-medium">Domain requirement</span> &mdash; Mailboxes are linked to domains managed through the Domain Manager. You must register at least one domain before creating a mailbox.</p>
-                    <p class="text-xs text-zinc-400"><span class="text-zinc-300 font-medium">Unique addresses</span> &mdash; Each email address must be unique across the system. The same local part can exist on different domains (<span class="text-zinc-400">[email protected]</span> and <span class="text-zinc-400">[email protected]</span> are distinct mailboxes).</p>
-                    <p class="text-xs text-zinc-400"><span class="text-zinc-300 font-medium">Storage</span> &mdash; Each mailbox stores incoming and outgoing emails independently in Dove's local database.</p>
-                </div>
-                <p class="text-xs text-zinc-500 leading-relaxed mt-3">The local part of the address must contain only lowercase letters, numbers, dots, hyphens, and underscores. It cannot start or end with a special character.</p>
-            </div>
-            <div class="border-t border-white/[0.04] pt-5">
-                <h3 class="text-sm font-medium text-zinc-200 mb-2">How It Works</h3>
-                <p class="text-xs text-zinc-500 leading-relaxed mb-3">Dove runs a full mail server stack locally. Any application on your machine can connect to the SMTP server to send emails, and mail clients can connect via IMAP or POP3 to read them.</p>
-                <div class="rounded-lg bg-surface-900/50 border border-white/[0.04] px-4 py-3 space-y-2">
-                    <p class="text-xs text-zinc-400"><span class="text-zinc-300 font-medium">SMTP</span> &mdash; Handles both sending and receiving. Configure your application or mail client to use <span class="text-zinc-400">localhost</span> on the port defined in <span class="text-zinc-400">[smtp]</span> of your <span class="text-zinc-400">config.toml</span>.</p>
-                    <p class="text-xs text-zinc-400"><span class="text-zinc-300 font-medium">IMAP / POP3</span> &mdash; Retrieval protocols for reading mail. Connect any standard mail client (Thunderbird, Apple Mail, etc.) using the ports defined in <span class="text-zinc-400">[imap]</span> and <span class="text-zinc-400">[pop3]</span>.</p>
-                    <p class="text-xs text-zinc-400"><span class="text-zinc-300 font-medium">Local only</span> &mdash; All mail stays on your machine. This gives you a complete email workflow for development and testing without relying on external mail services, sandbox APIs, or third-party tools.</p>
+
+        <div class="glass rounded-xl p-5 glow-border opacity-60">
+            <div class="flex items-center gap-3 mb-3">
+                <div class="flex items-center justify-center w-9 h-9 rounded-lg bg-zinc-500/10">
+                    <svg class="w-4.5 h-4.5 text-zinc-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 3c2.755 0 5.455.232 8.083.678.533.09.917.556.917 1.096v1.044a2.25 2.25 0 0 1-.659 1.591l-5.432 5.432a2.25 2.25 0 0 0-.659 1.591v2.927a2.25 2.25 0 0 1-1.244 2.013L9.75 21v-6.568a2.25 2.25 0 0 0-.659-1.591L3.659 7.409A2.25 2.25 0 0 1 3 5.818V4.774c0-.54.384-1.006.917-1.096A48.32 48.32 0 0 1 12 3Z" />
+                    </svg>
+                </div>
+                <div class="flex items-center gap-2">
+                    <h3 class="text-sm font-medium text-zinc-400">Mail Rules</h3>
+                    <span class="text-[10px] text-zinc-600 bg-surface-800 px-1.5 py-0.5 rounded">Coming soon</span>
+                </div>
+            </div>
+            <p class="text-xs text-zinc-600 leading-relaxed">Server-side mail filters for automatic organisation. Define conditions and actions to move, tag, forward, or auto-respond to incoming messages.</p>
+        </div>
+
+        <div class="glass rounded-xl p-5 glow-border opacity-60">
+            <div class="flex items-center gap-3 mb-3">
+                <div class="flex items-center justify-center w-9 h-9 rounded-lg bg-zinc-500/10">
+                    <svg class="w-4.5 h-4.5 text-zinc-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 1.5H8.25A2.25 2.25 0 0 0 6 3.75v16.5a2.25 2.25 0 0 0 2.25 2.25h7.5A2.25 2.25 0 0 0 18 20.25V3.75a2.25 2.25 0 0 0-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 18.75h3" />
+                    </svg>
+                </div>
+                <div class="flex items-center gap-2">
+                    <h3 class="text-sm font-medium text-zinc-400">IMAP &amp; POP3</h3>
+                    <span class="text-[10px] text-zinc-600 bg-surface-800 px-1.5 py-0.5 rounded">Coming soon</span>
                 </div>
             </div>
+            <p class="text-xs text-zinc-600 leading-relaxed">Connect desktop and mobile mail clients like Thunderbird, Apple Mail, or Outlook directly to Dove. Retrieve emails over IMAP for synced access or POP3 for download.</p>
         </div>
+
     </div>
 </div>