feat: Update sidebar navigation and enhance mail management UI with improved links and descriptions

12 files changed, 56 insertions, 37 deletions

diff --git a/templates/domains/htmx/domains.htmx.django b/templates/domains/htmx/domains.htmx.django
index bbd8a34..82a4820 100644
--- a/templates/domains/htmx/domains.htmx.django
+++ b/templates/domains/htmx/domains.htmx.django
@@ -1,5 +1,4 @@
-{% url "domains.index" as help_path %}
-<h1 id="page-title" class="text-sm font-medium text-zinc-100 flex items-center gap-2" hx-swap-oob="true">{{ PageTitle }}<a href="{{ help_path }}" hx-get="{{ help_path }}" hx-target="#content" hx-swap="innerHTML" hx-push-url="true" class="text-zinc-600 hover:text-zinc-400 transition-colors duration-150"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z" /></svg></a></h1>
+<h1 id="page-title" class="text-sm font-medium text-zinc-100" hx-swap-oob="true">{{ PageTitle }}</h1>
 <div class="slide-up space-y-6">
     <div class="glass rounded-xl glow-border">
         <div class="flex items-center justify-between px-5 py-4 border-b border-white/[0.04]">
diff --git a/templates/domains/htmx/index.htmx.django b/templates/domains/htmx/index.htmx.django
index aa96fda..8f38bd3 100644
--- a/templates/domains/htmx/index.htmx.django
+++ b/templates/domains/htmx/index.htmx.django
@@ -10,23 +10,36 @@
                 </div>
                 <h2 class="text-base font-medium text-zinc-100">Domain Manager</h2>
             </div>
-            <p class="text-sm text-zinc-400 leading-relaxed">The Domain Manager provides local DNS infrastructure for your development environment. It allows you to create custom top-level domains and register domain names that resolve locally, giving your services clean, memorable addresses without modifying your system hosts file.</p>
+            <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-2">TLDs are the root of your local domain hierarchy. Dove ships with default TLDs like <span class="text-zinc-400">local</span> and <span class="text-zinc-400">dev</span>, and you can create custom ones to match your organisation or project structure.</p>
-                <p class="text-xs text-zinc-500 leading-relaxed">Default TLDs are protected and cannot be deleted. Custom TLDs can only be removed once all domains registered under them have been deleted first.</p>
+                <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>
             </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-2">Domains are registered under a TLD and serve as the address for your local services. For example, registering <span class="text-zinc-400">myapp</span> under <span class="text-zinc-400">local</span> gives you <span class="text-zinc-400">myapp.local</span>.</p>
-                <p class="text-xs text-zinc-500 leading-relaxed">Each domain can be mapped to local services through DNS A records with port support, similar to how Cloudflare handles traffic routing. This means your services get proper domain names that resolve to the correct local ports.</p>
+                <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>
             </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">Dove runs a local DNS server that intercepts queries for your registered TLDs and returns the appropriate local addresses. External domains continue to resolve normally through your upstream DNS. No system configuration changes are required beyond pointing your DNS resolver at Dove.</p>
+                <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>
+                </div>
             </div>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/templates/domains/htmx/newdomain.htmx.django b/templates/domains/htmx/newdomain.htmx.django
index 9f0f20a..992bbd9 100644
--- a/templates/domains/htmx/newdomain.htmx.django
+++ b/templates/domains/htmx/newdomain.htmx.django
@@ -1,5 +1,4 @@
-{% url "domains.index" as help_path %}
-<h1 id="page-title" class="text-sm font-medium text-zinc-100 flex items-center gap-2" hx-swap-oob="true">{{ PageTitle }}<a href="{{ help_path }}" hx-get="{{ help_path }}" hx-target="#content" hx-swap="innerHTML" hx-push-url="true" class="text-zinc-600 hover:text-zinc-400 transition-colors duration-150"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z" /></svg></a></h1>
+<h1 id="page-title" class="text-sm font-medium text-zinc-100" hx-swap-oob="true">{{ PageTitle }}</h1>
 <div class="slide-up flex items-start justify-center pt-12">
     <div class="glass rounded-xl glow-border w-full max-w-lg">
         <div class="px-5 py-4 border-b border-white/[0.04]">
diff --git a/templates/domains/htmx/newtld.htmx.django b/templates/domains/htmx/newtld.htmx.django
index 9de64e1..9962435 100644
--- a/templates/domains/htmx/newtld.htmx.django
+++ b/templates/domains/htmx/newtld.htmx.django
@@ -1,5 +1,4 @@
-{% url "domains.index" as help_path %}
-<h1 id="page-title" class="text-sm font-medium text-zinc-100 flex items-center gap-2" hx-swap-oob="true">{{ PageTitle }}<a href="{{ help_path }}" hx-get="{{ help_path }}" hx-target="#content" hx-swap="innerHTML" hx-push-url="true" class="text-zinc-600 hover:text-zinc-400 transition-colors duration-150"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z" /></svg></a></h1>
+<h1 id="page-title" class="text-sm font-medium text-zinc-100" hx-swap-oob="true">{{ PageTitle }}</h1>
 <div class="slide-up flex items-start justify-center pt-12">
     <div class="glass rounded-xl glow-border w-full max-w-lg">
         <div class="px-5 py-4 border-b border-white/[0.04]">
diff --git a/templates/domains/htmx/tlds.htmx.django b/templates/domains/htmx/tlds.htmx.django
index 8290d41..0f4972d 100644
--- a/templates/domains/htmx/tlds.htmx.django
+++ b/templates/domains/htmx/tlds.htmx.django
@@ -1,5 +1,4 @@
-{% url "domains.index" as help_path %}
-<h1 id="page-title" class="text-sm font-medium text-zinc-100 flex items-center gap-2" hx-swap-oob="true">{{ PageTitle }}<a href="{{ help_path }}" hx-get="{{ help_path }}" hx-target="#content" hx-swap="innerHTML" hx-push-url="true" class="text-zinc-600 hover:text-zinc-400 transition-colors duration-150"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z" /></svg></a></h1>
+<h1 id="page-title" class="text-sm font-medium text-zinc-100" hx-swap-oob="true">{{ PageTitle }}</h1>
 <div class="slide-up space-y-6">
     <div class="glass rounded-xl glow-border">
         <div class="flex items-center justify-between px-5 py-4 border-b border-white/[0.04]">
diff --git a/templates/mail/htmx/index.htmx.django b/templates/mail/htmx/index.htmx.django
index abbd800..b5b4895 100644
--- a/templates/mail/htmx/index.htmx.django
+++ b/templates/mail/htmx/index.htmx.django
@@ -10,24 +10,37 @@
                 </div>
                 <h2 class="text-base font-medium text-zinc-100">Mail</h2>
             </div>
-            <p class="text-sm text-zinc-400 leading-relaxed">Dove provides a complete local mail infrastructure with full SMTP, IMAP, and POP3 support. Create users, assign mailboxes, and send and receive emails across your registered domains, all running locally with zero external dependencies.</p>
+            <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>
         </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-2">Mail users are the identities that own mailboxes and authenticate against the mail server. Each user has a username and display name, and can be assigned one or more mailboxes.</p>
-                <p class="text-xs text-zinc-500 leading-relaxed">Users authenticate via SMTP to send emails and via IMAP or POP3 to retrieve them. A single user can manage multiple mailboxes across different domains.</p>
+                <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-2">Mailboxes are email addresses assigned to users on your registered domains. For example, a user can own <span class="text-zinc-400">[email protected]</span> or <span class="text-zinc-400">[email protected]</span>.</p>
-                <p class="text-xs text-zinc-500 leading-relaxed">Each mailbox stores incoming and outgoing emails independently. Mailboxes are tied to domains managed through the Domain Manager, so you must have at least one domain registered before creating a mailbox.</p>
+                <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-2">Dove runs a full-featured SMTP server that handles both sending and receiving emails locally. Any application on your machine can connect to the SMTP server to send emails, and users can retrieve their mail through IMAP or POP3.</p>
-                <p class="text-xs text-zinc-500 leading-relaxed">All mail is stored locally in Dove's database. This gives you a complete email workflow for development and testing without relying on external mail services or sandbox APIs.</p>
+                <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>
             </div>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/templates/mail/htmx/mailbox.htmx.django b/templates/mail/htmx/mailbox.htmx.django
index 4a10b26..831a07d 100644
--- a/templates/mail/htmx/mailbox.htmx.django
+++ b/templates/mail/htmx/mailbox.htmx.django
@@ -1,5 +1,4 @@
-{% url "mail.index" as help_path %}
-<h1 id="page-title" class="text-sm font-medium text-zinc-100 flex items-center gap-2" hx-swap-oob="true">{{ PageTitle }}<a href="{{ help_path }}" hx-get="{{ help_path }}" hx-target="#content" hx-swap="innerHTML" hx-push-url="true" class="text-zinc-600 hover:text-zinc-400 transition-colors duration-150"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z" /></svg></a></h1>
+<h1 id="page-title" class="text-sm font-medium text-zinc-100" hx-swap-oob="true">{{ PageTitle }}</h1>
 <div class="slide-up space-y-6">
     <div class="glass rounded-xl glow-border">
         <div class="flex items-center justify-between px-5 py-4 border-b border-white/[0.04]">
diff --git a/templates/mail/htmx/mailboxes.htmx.django b/templates/mail/htmx/mailboxes.htmx.django
index e2488c4..96094f3 100644
--- a/templates/mail/htmx/mailboxes.htmx.django
+++ b/templates/mail/htmx/mailboxes.htmx.django
@@ -1,5 +1,4 @@
-{% url "mail.index" as help_path %}
-<h1 id="page-title" class="text-sm font-medium text-zinc-100 flex items-center gap-2" hx-swap-oob="true">{{ PageTitle }}<a href="{{ help_path }}" hx-get="{{ help_path }}" hx-target="#content" hx-swap="innerHTML" hx-push-url="true" class="text-zinc-600 hover:text-zinc-400 transition-colors duration-150"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z" /></svg></a></h1>
+<h1 id="page-title" class="text-sm font-medium text-zinc-100" hx-swap-oob="true">{{ PageTitle }}</h1>
 <div class="slide-up space-y-6">
     <div class="glass rounded-xl glow-border">
         <div class="flex items-center justify-between px-5 py-4 border-b border-white/[0.04]">
diff --git a/templates/mail/htmx/newmailbox.htmx.django b/templates/mail/htmx/newmailbox.htmx.django
index ed886a4..b8a8ed7 100644
--- a/templates/mail/htmx/newmailbox.htmx.django
+++ b/templates/mail/htmx/newmailbox.htmx.django
@@ -1,5 +1,4 @@
-{% url "mail.index" as help_path %}
-<h1 id="page-title" class="text-sm font-medium text-zinc-100 flex items-center gap-2" hx-swap-oob="true">{{ PageTitle }}<a href="{{ help_path }}" hx-get="{{ help_path }}" hx-target="#content" hx-swap="innerHTML" hx-push-url="true" class="text-zinc-600 hover:text-zinc-400 transition-colors duration-150"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z" /></svg></a></h1>
+<h1 id="page-title" class="text-sm font-medium text-zinc-100" hx-swap-oob="true">{{ PageTitle }}</h1>
 <div class="slide-up flex items-start justify-center pt-12">
     <div class="glass rounded-xl glow-border w-full max-w-lg">
         <div class="px-5 py-4 border-b border-white/[0.04]">
diff --git a/templates/mail/htmx/newuser.htmx.django b/templates/mail/htmx/newuser.htmx.django
index ab9764d..c6d4d10 100644
--- a/templates/mail/htmx/newuser.htmx.django
+++ b/templates/mail/htmx/newuser.htmx.django
@@ -1,5 +1,4 @@
-{% url "mail.index" as help_path %}
-<h1 id="page-title" class="text-sm font-medium text-zinc-100 flex items-center gap-2" hx-swap-oob="true">{{ PageTitle }}<a href="{{ help_path }}" hx-get="{{ help_path }}" hx-target="#content" hx-swap="innerHTML" hx-push-url="true" class="text-zinc-600 hover:text-zinc-400 transition-colors duration-150"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z" /></svg></a></h1>
+<h1 id="page-title" class="text-sm font-medium text-zinc-100" hx-swap-oob="true">{{ PageTitle }}</h1>
 <div class="slide-up flex items-start justify-center pt-12">
     <div class="glass rounded-xl glow-border w-full max-w-lg">
         <div class="px-5 py-4 border-b border-white/[0.04]">
diff --git a/templates/mail/htmx/users.htmx.django b/templates/mail/htmx/users.htmx.django
index 9724391..7ec040c 100644
--- a/templates/mail/htmx/users.htmx.django
+++ b/templates/mail/htmx/users.htmx.django
@@ -1,5 +1,4 @@
-{% url "mail.index" as help_path %}
-<h1 id="page-title" class="text-sm font-medium text-zinc-100 flex items-center gap-2" hx-swap-oob="true">{{ PageTitle }}<a href="{{ help_path }}" hx-get="{{ help_path }}" hx-target="#content" hx-swap="innerHTML" hx-push-url="true" class="text-zinc-600 hover:text-zinc-400 transition-colors duration-150"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z" /></svg></a></h1>
+<h1 id="page-title" class="text-sm font-medium text-zinc-100" hx-swap-oob="true">{{ PageTitle }}</h1>
 <div class="slide-up space-y-6">
     <div class="glass rounded-xl glow-border">
         <div class="flex items-center justify-between px-5 py-4 border-b border-white/[0.04]">
diff --git a/templates/partials/sidebar.django b/templates/partials/sidebar.django
index adf0b28..1a6ab8c 100644
--- a/templates/partials/sidebar.django
+++ b/templates/partials/sidebar.django
@@ -10,8 +10,10 @@
 
     <nav class="flex flex-col gap-0.5 p-3" id="sidebar-nav" hx-target="#content" hx-swap="innerHTML" hx-push-url="true">
         {% url "dashboard.index" as overview_path %}
+        {% url "domains.index" as domains_path %}
         {% url "domains.tlds" as tlds_path %}
         {% url "domains.manage" as manage_path %}
+        {% url "mail.index" as mail_path %}
         {% url "mail.users" as users_path %}
         {% url "mail.mailboxes" as mailboxes_path %}
 
@@ -23,7 +25,7 @@
         </a>
 
         <div data-sidebar-section data-section-prefix="/domains">
-            <button data-sidebar-trigger class="nav-link flex items-center justify-between w-full px-3 py-2 rounded-lg text-sm transition-colors duration-150">
+            <a href="{{ domains_path }}" hx-get="{{ domains_path }}" data-sidebar-trigger class="nav-link flex items-center justify-between w-full px-3 py-2 rounded-lg text-sm transition-colors duration-150">
                 <span class="flex items-center gap-3">
                     <svg class="w-4 h-4" 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" />
@@ -33,7 +35,7 @@
                 <svg class="w-3.5 h-3.5 text-zinc-600 transition-transform duration-150" data-sidebar-chevron fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
                     <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
                 </svg>
-            </button>
+            </a>
             <div data-sidebar-children class="mt-0.5 flex flex-col gap-0.5 pl-3 hidden">
                 <a href="{{ tlds_path }}" hx-get="{{ tlds_path }}" class="nav-link flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-colors duration-150">
                     <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
@@ -51,7 +53,7 @@
         </div>
 
         <div data-sidebar-section data-section-prefix="/mail">
-            <button data-sidebar-trigger class="nav-link flex items-center justify-between w-full px-3 py-2 rounded-lg text-sm transition-colors duration-150">
+            <a href="{{ mail_path }}" hx-get="{{ mail_path }}" data-sidebar-trigger class="nav-link flex items-center justify-between w-full px-3 py-2 rounded-lg text-sm transition-colors duration-150">
                 <span class="flex items-center gap-3">
                     <svg class="w-4 h-4" 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" />
@@ -61,7 +63,7 @@
                 <svg class="w-3.5 h-3.5 text-zinc-600 transition-transform duration-150" data-sidebar-chevron fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
                     <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
                 </svg>
-            </button>
+            </a>
             <div data-sidebar-children class="mt-0.5 flex flex-col gap-0.5 pl-3 hidden">
                 <a href="{{ users_path }}" hx-get="{{ users_path }}" class="nav-link flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-colors duration-150">
                     <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">