diff --git a/modules/nixos/mail-server/mobileconfig.nix b/modules/nixos/mail-server/mobileconfig.nix
index 4172703..3ee989f 100644
--- a/modules/nixos/mail-server/mobileconfig.nix
+++ b/modules/nixos/mail-server/mobileconfig.nix
@@ -257,15 +257,93 @@ lib.mkIf hasMailDiscoveryConfig (
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>{escape(DOMAIN)} Apple Profile</title>
+    <style>
+      body {{
+        font-family: system-ui, sans-serif;
+        max-width: 420px;
+        margin: 3rem auto;
+        padding: 0 1.5rem;
+        color: #1a1a1a;
+        background: #f5f5f7;
+      }}
+      h1 {{ font-size: 1.4rem; margin-bottom: 0.25rem; }}
+      p {{ color: #555; font-size: 0.9rem; line-height: 1.5; }}
+      form {{
+        background: #fff;
+        border-radius: 12px;
+        padding: 1.5rem;
+        margin: 1.5rem 0;
+        box-shadow: 0 1px 4px rgba(0,0,0,.08);
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+      }}
+      label {{
+        display: block;
+        font-size: 0.8rem;
+        font-weight: 600;
+        color: #555;
+        margin-bottom: 0.3rem;
+        text-transform: uppercase;
+        letter-spacing: .04em;
+      }}
+      .input-row {{
+        display: flex;
+        align-items: center;
+        border: 1px solid #d1d1d6;
+        border-radius: 8px;
+        overflow: hidden;
+        background: #fff;
+      }}
+      .input-row:focus-within {{ outline: 2px solid #0071e3; outline-offset: -1px; }}
+      .input-row input {{
+        border: none;
+        outline: none;
+        padding: 0.55rem 0.75rem;
+        font-size: 1rem;
+        flex: 1;
+        min-width: 0;
+        background: transparent;
+      }}
+      .input-row span {{
+        padding: 0.55rem 0.75rem 0.55rem 0;
+        font-size: 1rem;
+        color: #888;
+        white-space: nowrap;
+      }}
+      input[type="text"] {{
+        border: 1px solid #d1d1d6;
+        border-radius: 8px;
+        padding: 0.55rem 0.75rem;
+        font-size: 1rem;
+        width: 100%;
+        box-sizing: border-box;
+      }}
+      input[type="text"]:focus {{ outline: 2px solid #0071e3; outline-offset: -1px; border-color: transparent; }}
+      button {{
+        background: #0071e3;
+        color: #fff;
+        border: none;
+        border-radius: 8px;
+        padding: 0.65rem 1.25rem;
+        font-size: 1rem;
+        font-weight: 500;
+        cursor: pointer;
+        align-self: flex-start;
+      }}
+      button:hover {{ background: #005bbf; }}
+    </style>
   </head>
   <body>
     <h1>{escape(DOMAIN)} Apple Profile</h1>
-    <p>Open this page in Safari on iPhone, iPad, or macOS. Enter your username and optionally your full name to download the configuration profile.</p>
+    <p>Open this page in Safari on iPhone, iPad, or macOS. Enter your email address and optionally your full name to download the configuration profile.</p>
     <form method="get" action="/mobileconfig/">
       <div>
         <label for="username">Email address</label>
-        <input id="username" name="username" type="text" autocomplete="username" pattern="[A-Za-z0-9._+-]+" required>
-        <span>@{escape(DOMAIN)}</span>
+        <div class="input-row">
+          <input id="username" name="username" type="text" autocomplete="username" pattern="[A-Za-z0-9._+-]+" required>
+          <span>@{escape(DOMAIN)}</span>
+        </div>
       </div>
       <div>
         <label for="full_name">Fullname</label>
