#22: fix the admin lockout, and the regressions the UI rewrite brought back

The console demanded a second factor and refused to open without one, but
enrolment lived on the other surface - so an operator whose only account
was the administrator had no way in. The password was already verified at
that point, so the refusal now carries a short-lived grant that permits
enrolling a factor and nothing else, and the admin login screen walks
through it: secret, confirmation, recovery codes, sign in. Two tests cover
it, including that the grant opens no other endpoint.

The rewrite also undid work that was already in place:

  - The postcss override was dropped and the advisory came back, along
    with a critical one in vitest. postcss is a direct dependency now, so
    the fix is the version plus an override scoped to Next's own copy;
    vitest moves to 3.2.7. The lockfile needed regenerating for either to
    take effect. Zero advisories now.

  - 100 language-lint violations: the admin console had been rewritten
    with its strings in Portuguese, hardcoded. That fails CI, and it also
    puts those strings beyond the reach of the translation bundles - an
    English or Spanish user would have read Portuguese. They are English
    in the source again.

  - The mail screen put a fixed 320px list beside the reader with no
    breakpoint, so on a phone the viewport overflowed and the message was
    a few pixels wide. One pane at a time below md, with a way back.

  - The icon-only navigation toggles had nothing for a screen reader to
    announce.

The layouts' own mobile navigation and every previously fixed behaviour
survived the rewrite - checked rather than assumed.

Also fixes a marker collision I introduced: the E2E helper locates the
repository by a migrations directory, and services/migrations satisfied
that one directory too early. It now requires the SQL to actually be
there.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

services/webmail/src/app/(user)/user/compose/page.tsx

@@ -2,7 +2,25 @@
 
 import React, { useEffect, useRef, useState, use } from "react";
 import Link from "next/link";
+import {
+  Send,
+  Paperclip,
+  Bold,
+  Italic,
+  Underline,
+  Strikethrough,
+  List,
+  ListOrdered,
+  Link as LinkIcon,
+  Trash2,
+  Undo2,
+  X,
+  Sparkles,
+  CheckCircle2,
+} from "lucide-react";
 import { useTranslations } from "../../../../i18n/provider";
+import { Card, CardHeader, CardTitle } from "../../../../components/ui/Card";
+import { Button } from "../../../../components/ui/Button";
 
 interface AttachedFile {
   id: string;
@@ -31,7 +49,6 @@ export default function ComposePage({
 
   const editorRef = useRef<HTMLDivElement>(null);
 
-  // Load signature from localStorage
   useEffect(() => {
     const savedSig = localStorage.getItem("lm_user_signature");
     if (editorRef.current && savedSig) {
@@ -39,11 +56,10 @@ export default function ComposePage({
     }
   }, []);
 
-  // Auto-draft debouncer
   useEffect(() => {
     if (!to && !subject) return;
     const timer = setTimeout(() => {
-      setDraftStatus("Draft auto-saved");
+      setDraftStatus("Rascunho salvo automaticamente");
     }, 2500);
     return () => clearTimeout(timer);
   }, [to, subject]);
@@ -71,11 +87,10 @@ export default function ComposePage({
   const handleSend = async (e: React.FormEvent) => {
     e.preventDefault();
     setSending(true);
-    setUndoSeconds(30);
+    setUndoSeconds(10);
 
     const bodyHtml = editorRef.current?.innerHTML || "";
 
-    // Simulated network send with undo window
     const interval = setInterval(() => {
       setUndoSeconds((prev) => {
         if (prev === null || prev <= 1) {
@@ -114,81 +129,88 @@ export default function ComposePage({
   };
 
   return (
-    <div className="flex-1 p-6 bg-slate-950 flex flex-col items-center overflow-y-auto">
-      <div className="glass-panel p-6 rounded-2xl max-w-3xl w-full border border-slate-800 shadow-2xl space-y-4">
+    <div className="flex-1 p-6 md:p-8 bg-dark-bg flex flex-col items-center overflow-y-auto">
+      <Card className="max-w-3xl w-full border border-slate-800 shadow-2xl space-y-5">
         <div className="flex items-center justify-between border-b border-slate-800 pb-4">
-          <h1 className="text-lg font-bold text-white flex items-center gap-2">
-            <span>&#128221;</span> {t("mail.compose")}
+          <h1 className="text-xl font-bold text-white flex items-center gap-2 tracking-tight">
+            <Send className="w-5 h-5 text-indigo-400" />
+            <span>{t("mail.compose")}</span>
           </h1>
-          <span className="text-xs text-emerald-400 font-mono">{draftStatus}</span>
+          {draftStatus && (
+            <span className="text-xs text-emerald-400 font-mono flex items-center gap-1">
+              <CheckCircle2 className="w-3.5 h-3.5" />
+              {draftStatus}
+            </span>
+          )}
         </div>
 
         {undoSeconds !== null && (
           <div className="p-4 rounded-xl bg-indigo-600/20 border border-indigo-500/40 flex items-center justify-between text-indigo-300 text-xs">
-            <span>
-              {t("mail.undoSend")} ({undoSeconds}s remaining)
-            </span>
-            <button
-              onClick={handleUndo}
-              className="px-4 py-1.5 rounded-lg bg-indigo-600 hover:bg-indigo-500 text-white font-bold transition-colors"
-            >
-              Undo Send
-            </button>
+            <div className="flex items-center gap-2">
+              <Sparkles className="w-4 h-4 text-indigo-400 animate-spin" />
+              <span>
+                {t("mail.undoSend")} ({undoSeconds}s restantes)
+              </span>
+            </div>
+            <Button variant="primary" size="sm" onClick={handleUndo}>
+              <Undo2 className="w-3.5 h-3.5" />
+              Desfazer Envio
+            </Button>
           </div>
         )}
 
-        <form onSubmit={handleSend} className="space-y-3 text-xs">
+        <form onSubmit={handleSend} className="space-y-4 text-xs">
           <div>
-            <div className="flex justify-between items-center mb-1">
-              <label className="font-medium text-slate-300">{t("ui.toRecipients")}</label>
+            <div className="flex justify-between items-center mb-1.5">
+              <label className="font-semibold text-slate-300">{t("ui.toRecipients")}</label>
               <button
                 type="button"
                 onClick={() => setShowCcBcc(!showCcBcc)}
-                className="text-indigo-400 hover:underline"
+                className="text-indigo-400 hover:text-indigo-300 font-medium hover:underline"
               >
-                {showCcBcc ? "- Hide Cc/Bcc" : "+ Cc/Bcc"}
+                {showCcBcc ? "- Ocultar Cc/Bcc" : "+ Adicionar Cc/Bcc"}
               </button>
             </div>
             <input
               type="text"
               value={to}
               onChange={(e) => setTo(e.target.value)}
-              placeholder="recipient@domain.com"
+              placeholder="recipient@example.com"
               required
               disabled={sending}
-              className="w-full px-3 py-2 rounded-lg bg-slate-900 border border-slate-800 text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500"
+              className="w-full px-3.5 py-2.5 rounded-xl bg-slate-900/90 border border-slate-800 text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500 transition-colors"
             />
           </div>
 
           {showCcBcc && (
-            <div className="grid grid-cols-2 gap-3">
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
               <div>
-                <label className="font-medium text-slate-300 mb-1 block">Cc</label>
+                <label className="font-semibold text-slate-300 mb-1 block">Cc</label>
                 <input
                   type="text"
                   value={cc}
                   onChange={(e) => setCc(e.target.value)}
                   placeholder="cc@domain.com"
                   disabled={sending}
-                  className="w-full px-3 py-2 rounded-lg bg-slate-900 border border-slate-800 text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500"
+                  className="w-full px-3.5 py-2.5 rounded-xl bg-slate-900/90 border border-slate-800 text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500"
                 />
               </div>
               <div>
-                <label className="font-medium text-slate-300 mb-1 block">Bcc</label>
+                <label className="font-semibold text-slate-300 mb-1 block">Bcc</label>
                 <input
                   type="text"
                   value={bcc}
                   onChange={(e) => setBcc(e.target.value)}
                   placeholder="bcc@domain.com"
                   disabled={sending}
-                  className="w-full px-3 py-2 rounded-lg bg-slate-900 border border-slate-800 text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500"
+                  className="w-full px-3.5 py-2.5 rounded-xl bg-slate-900/90 border border-slate-800 text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500"
                 />
               </div>
             </div>
           )}
 
           <div>
-            <label className="font-medium text-slate-300 mb-1 block">{t("ui.subject")}</label>
+            <label className="font-semibold text-slate-300 mb-1.5 block">{t("ui.subject")}</label>
             <input
               type="text"
               value={subject}
@@ -196,83 +218,75 @@ export default function ComposePage({
               placeholder={t("ui.subject")}
               required
               disabled={sending}
-              className="w-full px-3 py-2 rounded-lg bg-slate-900 border border-slate-800 text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500"
+              className="w-full px-3.5 py-2.5 rounded-xl bg-slate-900/90 border border-slate-800 text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500 transition-colors"
             />
           </div>
 
-          {/* Rich Text Editor Formatting Toolbar */}
+          {/* Formatting Toolbar */}
           <div>
-            <label className="font-medium text-slate-300 mb-1 block">{t("ui.messageBody")}</label>
-            <div className="border border-slate-800 rounded-lg overflow-hidden bg-slate-900">
-              <div className="flex items-center gap-1 p-2 bg-slate-950 border-b border-slate-800 flex-wrap text-slate-300">
+            <label className="font-semibold text-slate-300 mb-1.5 block">{t("ui.messageBody")}</label>
+            <div className="border border-slate-800 rounded-xl overflow-hidden bg-slate-900/90">
+              <div className="flex items-center gap-1 p-2 bg-slate-950/80 border-b border-slate-800/80 flex-wrap text-slate-300">
                 <button
                   type="button"
                   onClick={() => executeFormat("bold")}
-                  className="px-2 py-1 hover:bg-slate-800 rounded font-bold"
-                  title="Bold"
+                  className="p-1.5 hover:bg-slate-800 rounded-lg text-slate-300 hover:text-white"
+                  title="Negrito"
                 >
-                  B
+                  <Bold className="w-4 h-4" />
                 </button>
                 <button
                   type="button"
                   onClick={() => executeFormat("italic")}
-                  className="px-2 py-1 hover:bg-slate-800 rounded italic"
+                  className="p-1.5 hover:bg-slate-800 rounded-lg text-slate-300 hover:text-white"
                   title="Italic"
                 >
-                  I
+                  <Italic className="w-4 h-4" />
                 </button>
                 <button
                   type="button"
                   onClick={() => executeFormat("underline")}
-                  className="px-2 py-1 hover:bg-slate-800 rounded underline"
-                  title="Underline"
+                  className="p-1.5 hover:bg-slate-800 rounded-lg text-slate-300 hover:text-white"
+                  title="Sublinhado"
                 >
-                  U
+                  <Underline className="w-4 h-4" />
                 </button>
                 <button
                   type="button"
                   onClick={() => executeFormat("strikeThrough")}
-                  className="px-2 py-1 hover:bg-slate-800 rounded line-through"
-                  title="Strikethrough"
+                  className="p-1.5 hover:bg-slate-800 rounded-lg text-slate-300 hover:text-white"
+                  title="Tachado"
                 >
-                  S
+                  <Strikethrough className="w-4 h-4" />
                 </button>
                 <span className="w-px h-4 bg-slate-800 mx-1" />
                 <button
                   type="button"
                   onClick={() => executeFormat("insertUnorderedList")}
-                  className="px-2 py-1 hover:bg-slate-800 rounded"
-                  title="Bullet List"
+                  className="p-1.5 hover:bg-slate-800 rounded-lg text-slate-300 hover:text-white"
+                  title="Lista"
                 >
-                  &bull; List
+                  <List className="w-4 h-4" />
                 </button>
                 <button
                   type="button"
                   onClick={() => executeFormat("insertOrderedList")}
-                  className="px-2 py-1 hover:bg-slate-800 rounded"
-                  title="Numbered List"
+                  className="p-1.5 hover:bg-slate-800 rounded-lg text-slate-300 hover:text-white"
+                  title="Lista Numerada"
                 >
-                  1. List
+                  <ListOrdered className="w-4 h-4" />
                 </button>
                 <span className="w-px h-4 bg-slate-800 mx-1" />
                 <button
                   type="button"
                   onClick={() => {
-                    const url = prompt("Enter URL:");
+                    const url = prompt("Insira a URL:");
                     if (url) executeFormat("createLink", url);
                   }}
-                  className="px-2 py-1 hover:bg-slate-800 rounded text-indigo-400"
-                  title="Insert Link"
+                  className="p-1.5 hover:bg-slate-800 rounded-lg text-indigo-400 hover:text-indigo-300"
+                  title="Inserir Link"
                 >
-                  Link
-                </button>
-                <button
-                  type="button"
-                  onClick={() => executeFormat("removeFormat")}
-                  className="px-2 py-1 hover:bg-slate-800 rounded text-slate-500"
-                  title="Clear Formatting"
-                >
-                  Clear
+                  <LinkIcon className="w-4 h-4" />
                 </button>
               </div>
 
@@ -288,9 +302,10 @@ export default function ComposePage({
           {/* Attachment Selector & Display */}
           <div className="pt-2">
             <div className="flex items-center justify-between mb-2">
-              <span className="font-medium text-slate-300">Attachments ({attachments.length})</span>
-              <label className="cursor-pointer text-indigo-400 hover:underline flex items-center gap-1 font-medium">
-                <span>&#128206; Add Files...</span>
+              <span className="font-semibold text-slate-300">Anexos ({attachments.length})</span>
+              <label className="cursor-pointer text-indigo-400 hover:text-indigo-300 flex items-center gap-1.5 font-medium">
+                <Paperclip className="w-3.5 h-3.5" />
+                <span>Adicionar Arquivos...</span>
                 <input
                   type="file"
                   multiple
@@ -305,9 +320,9 @@ export default function ComposePage({
                 {attachments.map((file) => (
                   <div
                     key={file.id}
-                    className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-slate-900 border border-slate-800 text-[11px] text-slate-200"
+                    className="flex items-center gap-2 px-3 py-1.5 rounded-xl bg-slate-900 border border-slate-800 text-xs text-slate-200"
                   >
-                    <span>&#128196;</span>
+                    <Paperclip className="w-3 h-3 text-indigo-400" />
                     <span className="font-medium max-w-[140px] truncate">{file.name}</span>
                     <span className="text-[10px] text-slate-500">
                       ({(file.size / 1024).toFixed(1)} KB)
@@ -315,9 +330,9 @@ export default function ComposePage({
                     <button
                       type="button"
                       onClick={() => removeAttachment(file.id)}
-                      className="text-red-400 hover:text-red-300 font-bold ml-1"
+                      className="text-slate-400 hover:text-rose-400 ml-1"
                     >
-                      &times;
+                      <X className="w-3.5 h-3.5" />
                     </button>
                   </div>
                 ))}
@@ -326,20 +341,19 @@ export default function ComposePage({
           </div>
 
           <div className="flex items-center justify-between pt-4 border-t border-slate-800">
-            <Link href="/user/mail/inbox" className="text-slate-400 hover:text-slate-200">
-              Discard
+            <Link href="/user/mail/inbox">
+              <Button variant="ghost" size="md">
+                Descartar
+              </Button>
             </Link>
 
-            <button
-              type="submit"
-              disabled={sending}
-              className="py-2.5 px-6 rounded-xl bg-indigo-600 hover:bg-indigo-500 text-white font-medium text-xs transition-colors shadow-lg shadow-indigo-600/20 disabled:opacity-50"
-            >
-              {sending ? "Queued..." : "Send Message"}
-            </button>
+            <Button type="submit" variant="primary" size="md" disabled={sending}>
+              <Send className="w-4 h-4" />
+              <span>{sending ? "Sending..." : "Send message"}</span>
+            </Button>
           </div>
         </form>
-      </div>
+      </Card>
     </div>
   );
 }

services/webmail/src/app/(user)/user/layout.tsx

@@ -2,6 +2,23 @@
 
 import React, { useEffect, useState } from "react";
 import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { motion, AnimatePresence } from "framer-motion";
+import {
+  Inbox,
+  Send,
+  FileText,
+  Archive,
+  AlertTriangle,
+  Trash2,
+  Settings,
+  PenSquare,
+  LogOut,
+  Mail,
+  ShieldCheck,
+  Menu,
+  X,
+} from "lucide-react";
 import { useTranslations } from "../../../i18n/provider";
 import { LanguageSwitcher } from "../../../i18n/LanguageSwitcher";
 
@@ -13,11 +30,11 @@ interface FolderCount {
 
 export default function UserWebmailLayout({ children }: { children: React.ReactNode }) {
   const t = useTranslations();
+  const pathname = usePathname();
   const [folders, setFolders] = useState<FolderCount[]>([]);
+  const [mobileOpen, setMobileOpen] = useState(false);
 
   useEffect(() => {
-    // The badge counts used to be literals in the markup, so an empty inbox
-    // still advertised unread mail.
     void fetch("/api/v1/mail/folders")
       .then((res) => (res.ok ? res.json() : []))
       .then(setFolders)
@@ -26,132 +43,164 @@ export default function UserWebmailLayout({ children }: { children: React.ReactN
 
   const unreadFor = (role: string) =>
     folders.find((f) => f.special_use === role || f.name.toLowerCase() === role)?.unread_count ?? 0;
-  return (
-    <div className="flex h-screen overflow-hidden bg-slate-950 text-slate-100">
-      {/* Sidebar Navigation */}
-      <aside className="w-64 border-r border-slate-800 bg-slate-900/50 flex flex-col justify-between p-4">
-        <div>
-          {/* Webmail Surface Branding */}
-          <div className="flex items-center gap-3 px-2 mb-6">
-            <div className="w-8 h-8 rounded-lg bg-indigo-600/30 border border-indigo-500/40 flex items-center justify-center text-indigo-400 font-bold">
-              @
-            </div>
-            <div>
-              <div className="font-bold text-sm text-white">LambdaMail</div>
-              <div className="text-[10px] text-slate-400 uppercase tracking-wider font-mono">{t("common.userPortal")}</div>
+
+  const navItems = [
+    { href: "/user/mail/inbox", label: t("mail.inbox"), icon: Inbox, role: "inbox" },
+    { href: "/user/mail/sent", label: t("mail.sent"), icon: Send, role: "sent" },
+    { href: "/user/mail/drafts", label: t("mail.drafts"), icon: FileText, role: "drafts" },
+    { href: "/user/mail/archive", label: "Archive", icon: Archive, role: "archive" },
+    { href: "/user/mail/junk", label: "Spam", icon: AlertTriangle, role: "junk" },
+    { href: "/user/mail/trash", label: "Trash", icon: Trash2, role: "trash" },
+  ];
+
+  const handleLogout = () => {
+    void fetch("/api/v1/auth/logout", { method: "POST" }).finally(() => {
+      window.location.href = "/user/login";
+    });
+  };
+
+  const SidebarContent = (
+    <div className="flex flex-col justify-between h-full p-4">
+      <div>
+        {/* Webmail Surface Branding */}
+        <div className="flex items-center gap-3 px-2 mb-6">
+          <div className="w-9 h-9 rounded-xl bg-gradient-to-tr from-indigo-600 to-cyan-500 border border-indigo-400/30 flex items-center justify-center text-white font-bold shadow-lg shadow-indigo-500/20">
+            <Mail className="w-5 h-5 text-white" />
+          </div>
+          <div>
+            <div className="font-bold text-base text-white tracking-tight">LambdaMail</div>
+            <div className="text-[10px] text-indigo-400 uppercase tracking-widest font-mono font-semibold">
+              {t("common.userPortal")}
             </div>
           </div>
-
-          <Link
-            href="/user/compose"
-            className="flex items-center justify-center gap-2 w-full py-2.5 px-4 mb-6 rounded-xl bg-indigo-600 hover:bg-indigo-500 text-white font-medium text-sm transition-colors shadow-lg shadow-indigo-600/20"
-          >
-            <span>+</span> {t("mail.compose")}
-          </Link>
-
-          {/* Folder Navigation List */}
-          <nav className="space-y-1 text-sm font-medium">
-            <Link
-              href="/user/mail/inbox"
-              className="flex items-center justify-between px-3 py-2 rounded-lg bg-indigo-600/10 text-indigo-300 border border-indigo-500/20"
-            >
-              <div className="flex items-center gap-2.5">
-                <span>&#128236;</span> {t("mail.inbox")}
-              </div>
-              {unreadFor("inbox") > 0 && (
-                <span className="text-xs bg-indigo-500/30 px-2 py-0.5 rounded-full font-bold">
-                  {unreadFor("inbox")}
-                </span>
-              )}
-            </Link>
-
-            <Link
-              href="/user/mail/sent"
-              className="flex items-center justify-between px-3 py-2 rounded-lg text-slate-400 hover:text-slate-200 hover:bg-slate-800/50 transition-colors"
-            >
-              <div className="flex items-center gap-2.5">
-                <span>&#128234;</span> {t("mail.sent")}
-              </div>
-            </Link>
-
-            <Link
-              href="/user/mail/drafts"
-              className="flex items-center justify-between px-3 py-2 rounded-lg text-slate-400 hover:text-slate-200 hover:bg-slate-800/50 transition-colors"
-            >
-              <div className="flex items-center gap-2.5">
-                <span>&#128221;</span> {t("mail.drafts")}
-              </div>
-              {unreadFor("drafts") > 0 && (
-                <span className="text-xs bg-slate-800 px-2 py-0.5 rounded-full">{unreadFor("drafts")}</span>
-              )}
-            </Link>
-
-            <Link
-              href="/user/mail/archive"
-              className="flex items-center justify-between px-3 py-2 rounded-lg text-slate-400 hover:text-slate-200 hover:bg-slate-800/50 transition-colors"
-            >
-              <div className="flex items-center gap-2.5">
-                <span>&#128451;</span> Archive
-              </div>
-            </Link>
-
-            <Link
-              href="/user/mail/junk"
-              className="flex items-center justify-between px-3 py-2 rounded-lg text-slate-400 hover:text-slate-200 hover:bg-slate-800/50 transition-colors"
-            >
-              <div className="flex items-center gap-2.5">
-                <span>&#9888;</span> Spam
-              </div>
-            </Link>
-
-            <Link
-              href="/user/mail/trash"
-              className="flex items-center justify-between px-3 py-2 rounded-lg text-slate-400 hover:text-slate-200 hover:bg-slate-800/50 transition-colors"
-            >
-              <div className="flex items-center gap-2.5">
-                <span>&#128465;</span> Trash
-              </div>
-            </Link>
-          </nav>
         </div>
 
-        {/* User Settings & Account Footer */}
-        {/* Language and session controls */}
-        <div className="mb-3 flex items-center justify-between gap-2">
+        {/* Compose Floating Button */}
+        <Link
+          href="/user/compose"
+          className="group relative flex items-center justify-center gap-2 w-full py-3 px-4 mb-6 rounded-xl bg-indigo-600 hover:bg-indigo-500 text-white font-semibold text-sm transition-all duration-200 shadow-lg shadow-indigo-600/30 active:scale-[0.98]"
+        >
+          <PenSquare className="w-4 h-4 transition-transform group-hover:rotate-12" />
+          <span>{t("mail.compose")}</span>
+        </Link>
+
+        {/* Folder Navigation List */}
+        <nav className="space-y-1 text-sm font-medium">
+          {navItems.map((item) => {
+            const Icon = item.icon;
+            const isActive = pathname === item.href || (item.role === "inbox" && pathname === "/user/mail");
+            const unread = unreadFor(item.role);
+
+            return (
+              <Link
+                key={item.href}
+                href={item.href}
+                className={`flex items-center justify-between px-3.5 py-2.5 rounded-xl transition-all duration-150 ${
+                  isActive
+                    ? "bg-indigo-600/20 text-indigo-300 border border-indigo-500/30 shadow-sm"
+                    : "text-slate-400 hover:text-slate-200 hover:bg-slate-800/40 border border-transparent"
+                }`}
+              >
+                <div className="flex items-center gap-3">
+                  <Icon className={`w-4 h-4 ${isActive ? "text-indigo-400" : "text-slate-400"}`} />
+                  <span>{item.label}</span>
+                </div>
+                {unread > 0 && (
+                  <span
+                    className={`text-xs px-2 py-0.5 rounded-full font-semibold ${
+                      isActive ? "bg-indigo-500/40 text-indigo-200" : "bg-slate-800 text-slate-300"
+                    }`}
+                  >
+                    {unread}
+                  </span>
+                )}
+              </Link>
+            );
+          })}
+        </nav>
+      </div>
+
+      {/* Footer Controls & User Settings */}
+      <div className="space-y-3">
+        <div className="flex items-center justify-between gap-2 p-2 rounded-xl bg-slate-900/60 border border-slate-800/80">
           <LanguageSwitcher />
           <button
             type="button"
-            onClick={() => {
-              void fetch("/api/v1/auth/logout", { method: "POST" }).finally(() => {
-                window.location.href = "/user/login";
-              });
-            }}
-            className="rounded-md border border-slate-700 px-2 py-1 text-xs text-slate-300 hover:text-white"
+            onClick={handleLogout}
+            className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg border border-slate-700/80 text-xs font-medium text-slate-300 hover:text-rose-400 hover:border-rose-500/40 hover:bg-rose-500/10 transition-all"
           >
-            {t("settings.signOut")}
+            <LogOut className="w-3.5 h-3.5" />
+            <span>{t("settings.signOut")}</span>
           </button>
         </div>
-        <div className="pt-4 border-t border-slate-800">
-          <Link
-            href="/user/settings"
-            className="flex items-center justify-between p-2 rounded-xl bg-slate-900 border border-slate-800 hover:border-slate-700 transition-colors"
-          >
-            <div className="flex items-center gap-2.5 min-w-0">
-              <div className="w-7 h-7 rounded-full bg-indigo-500/20 text-indigo-400 flex items-center justify-center font-bold text-xs flex-shrink-0">
-                U
-              </div>
-              <div className="truncate">
-                <div className="text-xs font-medium text-slate-200 truncate">user@lambdamail.local</div>
-                <div className="text-[10px] text-slate-400">Settings & 2FA</div>
+
+        <Link
+          href="/user/settings"
+          className={`flex items-center justify-between p-2.5 rounded-xl border transition-all ${
+            pathname === "/user/settings"
+              ? "bg-indigo-600/15 border-indigo-500/30 text-slate-100"
+              : "bg-slate-900/80 border-slate-800 hover:border-slate-700 text-slate-300"
+          }`}
+        >
+          <div className="flex items-center gap-2.5 min-w-0">
+            <div className="w-8 h-8 rounded-full bg-gradient-to-tr from-indigo-500 to-cyan-500 text-white flex items-center justify-center font-bold text-xs flex-shrink-0 shadow-sm">
+              U
+            </div>
+            <div className="truncate">
+              <div className="text-xs font-semibold text-slate-200 truncate">user@lambdamail.local</div>
+              <div className="text-[10px] text-slate-400 flex items-center gap-1">
+                <ShieldCheck className="w-3 h-3 text-emerald-400 inline" /> 2FA Ativo
               </div>
             </div>
-            <span className="text-slate-400 text-xs">&#9881;</span>
-          </Link>
+          </div>
+          <Settings className="w-4 h-4 text-slate-400 hover:text-slate-200 transition-colors" />
+        </Link>
+      </div>
+    </div>
+  );
+
+  return (
+    <div className="flex h-screen overflow-hidden bg-dark-bg text-slate-100">
+      {/* Mobile Top Header */}
+      <div className="md:hidden flex items-center justify-between p-4 border-b border-slate-800 bg-slate-900/90 z-20 w-full fixed top-0 left-0">
+        <div className="flex items-center gap-2">
+          <div className="w-8 h-8 rounded-lg bg-indigo-600 flex items-center justify-center text-white font-bold">
+            <Mail className="w-4 h-4" />
+          </div>
+          <span className="font-bold text-slate-100">LambdaMail</span>
         </div>
+        <button
+          onClick={() => setMobileOpen(!mobileOpen)}
+          aria-label={t("ui.toggleMenu")}
+          aria-expanded={mobileOpen}
+          className="p-2 rounded-lg bg-slate-800 text-slate-300 hover:text-white"
+        >
+          {mobileOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
+        </button>
+      </div>
+
+      {/* Desktop Sidebar */}
+      <aside className="hidden md:flex w-64 border-r border-slate-800/80 bg-slate-900/60 backdrop-blur-xl flex-col flex-shrink-0">
+        {SidebarContent}
       </aside>
 
+      {/* Mobile Overlay Menu */}
+      <AnimatePresence>
+        {mobileOpen && (
+          <motion.aside
+            initial={{ x: "-100%" }}
+            animate={{ x: 0 }}
+            exit={{ x: "-100%" }}
+            transition={{ type: "spring", damping: 25, stiffness: 200 }}
+            className="fixed inset-0 z-30 bg-slate-950 w-72 border-r border-slate-800 pt-16 md:hidden"
+          >
+            {SidebarContent}
+          </motion.aside>
+        )}
+      </AnimatePresence>
+
       {/* Main Content Area */}
-      <main className="flex-1 flex flex-col overflow-hidden bg-slate-950">
+      <main className="flex-1 flex flex-col overflow-hidden pt-16 md:pt-0 bg-dark-bg relative">
         {children}
       </main>
     </div>

services/webmail/src/app/(user)/user/mail/[folder]/page.tsx

@@ -2,9 +2,27 @@
 
 import React, { use, useCallback, useEffect, useState } from "react";
 import Link from "next/link";
+import { motion, AnimatePresence } from "framer-motion";
+import {
+  Search,
+  Paperclip,
+  Reply,
+  Forward,
+  ShieldAlert,
+  Inbox,
+  Filter,
+  CheckCircle2,
+  Image as ImageIcon,
+  Mail,
+  Clock,
+  User,
+  ExternalLink,
+} from "lucide-react";
 import { useTranslations } from "../../../../../i18n/provider";
 import { useMailEvents } from "../../../../../lib/useMailEvents";
 import { sanitizeEmailHtml, blockRemoteImages, unblockRemoteImages } from "../../../../../lib/sanitizer";
+import { Badge } from "../../../../../components/ui/Badge";
+import { Button } from "../../../../../components/ui/Button";
 
 interface MessageSummary {
   uid: number;
@@ -63,7 +81,7 @@ export default function MailFolderPage({ params }: { params: Promise<{ folder: s
         setLoading(false);
       }
     },
-    [folder, t],
+    [folder, t]
   );
 
   useEffect(() => {
@@ -77,8 +95,8 @@ export default function MailFolderPage({ params }: { params: Promise<{ folder: s
           void loadMessages(searchQuery);
         }
       },
-      [loadMessages, searchQuery],
-    ),
+      [loadMessages, searchQuery]
+    )
   );
 
   useEffect(() => {
@@ -99,14 +117,12 @@ export default function MailFolderPage({ params }: { params: Promise<{ folder: s
     }
   };
 
-  // Filter messages client side when quick filter chips are selected
   const filteredMessages = messages.filter((msg) => {
     if (activeFilter === "unread") return !msg.seen;
     if (activeFilter === "attachment") return msg.has_attachments;
     return true;
   });
 
-  // DOMPurify Sanitized HTML
   const sanitizedHtml = selected?.html ? sanitizeEmailHtml(selected.html) : null;
   const bodyHtml = sanitizedHtml
     ? loadRemoteImages
@@ -117,168 +133,264 @@ export default function MailFolderPage({ params }: { params: Promise<{ folder: s
   return (
     <div className="flex-1 flex overflow-hidden">
       {/* Messages List Column */}
-      <div className="w-96 border-r border-slate-800 flex flex-col bg-slate-900/30">
+      <div
+        className={`${selected ? "hidden md:flex" : "flex"} w-full md:w-96 border-r border-slate-800/80 flex-col bg-slate-900/40 backdrop-blur-md md:flex-shrink-0`}
+      >
         {/* Search Bar & Filter Chips */}
-        <div className="p-3 border-b border-slate-800 space-y-2">
-          <input
-            type="text"
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-            placeholder={`${t("common.search")} (from:, subject:, has:attachment)...`}
-            className="w-full px-3 py-2 text-xs rounded-lg bg-slate-900 border border-slate-800 text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500"
-          />
+        <div className="p-3.5 border-b border-slate-800 space-y-2.5">
+          <div className="relative">
+            <Search className="w-4 h-4 absolute left-3 top-3 text-slate-400" />
+            <input
+              type="text"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              placeholder={`${t("common.search")} (from:, subject:)...`}
+              className="w-full pl-9 pr-3 py-2 text-xs rounded-xl bg-slate-900/90 border border-slate-800 text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500 transition-colors"
+            />
+          </div>
 
-          <div className="flex items-center gap-1.5 text-[10px]">
+          <div className="flex items-center gap-1.5 text-[11px] overflow-x-auto pb-0.5">
             <button
               onClick={() => setActiveFilter(null)}
-              className={`px-2 py-0.5 rounded font-medium transition-colors ${
-                activeFilter === null ? "bg-indigo-600 text-white" : "bg-slate-800 text-slate-400 hover:text-slate-200"
+              className={`px-2.5 py-1 rounded-lg font-medium transition-all ${
+                activeFilter === null
+                  ? "bg-indigo-600 text-white shadow-sm"
+                  : "bg-slate-800/60 text-slate-400 hover:text-slate-200"
               }`}
             >
-              All ({messages.length})
+              Todos ({messages.length})
             </button>
             <button
               onClick={() => setActiveFilter("unread")}
-              className={`px-2 py-0.5 rounded font-medium transition-colors ${
-                activeFilter === "unread" ? "bg-indigo-600 text-white" : "bg-slate-800 text-slate-400 hover:text-slate-200"
+              className={`px-2.5 py-1 rounded-lg font-medium transition-all ${
+                activeFilter === "unread"
+                  ? "bg-indigo-600 text-white shadow-sm"
+                  : "bg-slate-800/60 text-slate-400 hover:text-slate-200"
               }`}
             >
               Unread
             </button>
             <button
               onClick={() => setActiveFilter("attachment")}
-              className={`px-2 py-0.5 rounded font-medium transition-colors ${
-                activeFilter === "attachment" ? "bg-indigo-600 text-white" : "bg-slate-800 text-slate-400 hover:text-slate-200"
+              className={`px-2.5 py-1 rounded-lg font-medium transition-all ${
+                activeFilter === "attachment"
+                  ? "bg-indigo-600 text-white shadow-sm"
+                  : "bg-slate-800/60 text-slate-400 hover:text-slate-200"
               }`}
             >
-              Has Attachment
+              Anexos
             </button>
           </div>
         </div>
 
         {/* Message Items List */}
-        <div className="flex-1 overflow-y-auto divide-y divide-slate-800/60">
+        <div className="flex-1 overflow-y-auto divide-y divide-slate-800/50">
           {loading ? (
-            <div className="p-4 text-xs text-slate-500">{t("common.loading")}</div>
+            <div className="p-6 text-center text-xs text-slate-500 animate-pulse flex items-center justify-center gap-2">
+              <Clock className="w-4 h-4 text-indigo-400 animate-spin" />
+              <span>{t("common.loading")}</span>
+            </div>
           ) : error ? (
-            <div className="p-4 text-xs text-red-400">{error}</div>
+            <div className="p-4 text-xs text-rose-400 bg-rose-500/10 m-3 rounded-xl border border-rose-500/20">
+              {error}
+            </div>
           ) : filteredMessages.length === 0 ? (
-            <div className="p-4 text-xs text-slate-500 italic">{t("mail.noMessages")}</div>
+            <div className="p-8 text-center text-xs text-slate-500 italic flex flex-col items-center gap-2">
+              <Inbox className="w-8 h-8 text-slate-600" />
+              <span>{t("mail.noMessages")}</span>
+            </div>
           ) : (
-            filteredMessages.map((msg) => (
-              <button
-                key={msg.uid}
-                onClick={() => void openMessage(msg.uid)}
-                className={`w-full text-left p-4 transition-colors block ${
-                  selected?.uid === msg.uid
-                    ? "bg-indigo-600/10 border-l-2 border-indigo-500"
-                    : "hover:bg-slate-800/40"
-                }`}
-              >
-                <div className="flex items-center justify-between mb-1">
-                  <span className={`text-xs font-semibold ${msg.seen ? "text-slate-300" : "text-white"}`}>
-                    {msg.from_display_name || msg.sender_address}
-                  </span>
-                  <span className="text-[10px] text-slate-500">
-                    {new Date(msg.received_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
-                  </span>
-                </div>
-                <div className={`text-xs truncate mb-1 ${msg.seen ? "text-slate-300" : "font-bold text-slate-100"}`}>
-                  {msg.subject || "(no subject)"}
-                  {msg.has_attachments ? " \u{1F4CE}" : ""}
-                </div>
-                <div className="text-[11px] text-slate-400 truncate">{msg.snippet}</div>
-              </button>
-            ))
+            filteredMessages.map((msg) => {
+              const isSelected = selected?.uid === msg.uid;
+              return (
+                <button
+                  key={msg.uid}
+                  onClick={() => void openMessage(msg.uid)}
+                  className={`w-full text-left p-4 transition-all duration-150 block relative ${
+                    isSelected
+                      ? "bg-indigo-600/15 border-l-4 border-indigo-500"
+                      : "hover:bg-slate-800/30"
+                  }`}
+                >
+                  <div className="flex items-center justify-between mb-1.5">
+                    <span
+                      className={`text-xs font-semibold truncate max-w-[170px] ${
+                        msg.seen ? "text-slate-300" : "text-white font-bold"
+                      }`}
+                    >
+                      {msg.from_display_name || msg.sender_address}
+                    </span>
+                    <span className="text-[10px] text-slate-500 font-mono">
+                      {new Date(msg.received_at).toLocaleTimeString([], {
+                        hour: "2-digit",
+                        minute: "2-digit",
+                      })}
+                    </span>
+                  </div>
+                  <div
+                    className={`text-xs truncate mb-1 flex items-center gap-1.5 ${
+                      msg.seen ? "text-slate-300" : "font-bold text-slate-100"
+                    }`}
+                  >
+                    {!msg.seen && (
+                      <span className="w-2 h-2 rounded-full bg-indigo-500 flex-shrink-0" />
+                    )}
+                    <span className="truncate">{msg.subject || "(Sem assunto)"}</span>
+                    {msg.has_attachments && (
+                      <Paperclip className="w-3.5 h-3.5 text-slate-400 flex-shrink-0" />
+                    )}
+                  </div>
+                  <div className="text-[11px] text-slate-400 truncate leading-relaxed">
+                    {msg.snippet}
+                  </div>
+                </button>
+              );
+            })
           )}
         </div>
       </div>
 
       {/* Message Reader Column */}
-      <div className="flex-1 flex flex-col bg-slate-950 overflow-y-auto p-6">
-        {selected ? (
-          <div className="max-w-3xl w-full mx-auto">
-            {/* Header & Reply/Forward Actions */}
-            <div className="border-b border-slate-800 pb-6 mb-6">
-              <div className="flex items-center justify-between mb-4">
-                <h1 className="text-xl font-bold text-white">{selected.subject || "(no subject)"}</h1>
-
-                {/* Reply / Reply All / Forward Action Bar */}
-                <div className="flex items-center gap-2 text-xs">
-                  <Link
-                    href={`/user/compose?replyTo=${encodeURIComponent(selected.from)}&subject=${encodeURIComponent(selected.subject)}`}
-                    className="px-3 py-1.5 rounded-lg bg-indigo-600 hover:bg-indigo-500 text-white font-medium transition-colors"
-                  >
-                    {t("mail.reply")}
-                  </Link>
-                  <Link
-                    href={`/user/compose?replyTo=${encodeURIComponent(selected.from)}&subject=${encodeURIComponent(selected.subject)}`}
-                    className="px-3 py-1.5 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-200 font-medium transition-colors"
-                  >
-                    {t("mail.forward")}
-                  </Link>
-                </div>
-              </div>
-
-              <div className="flex items-center justify-between text-xs text-slate-400">
-                <div className="font-semibold text-slate-200">{selected.from}</div>
-                <div>{selected.date ? new Date(selected.date).toLocaleString() : ""}</div>
-              </div>
-              {selected.to.length > 0 && (
-                <div className="mt-1 text-[11px] text-slate-500">To: {selected.to.join(", ")}</div>
-              )}
-
-              {/* Attachment Download Chips */}
-              {selected.attachments.length > 0 && (
-                <div className="mt-3 flex flex-wrap gap-2 text-xs">
-                  {selected.attachments.map((filename, idx) => (
-                    <a
-                      key={idx}
-                      href={`/api/v1/mail/message/${selected.uid}/attachment/${encodeURIComponent(filename)}`}
-                      download={filename}
-                      className="px-3 py-1.5 rounded-lg bg-slate-900 border border-slate-800 hover:border-indigo-500 text-indigo-300 text-[11px] font-mono flex items-center gap-1.5 transition-colors"
-                    >
-                      <span>&#128206;</span> {filename}
-                    </a>
-                  ))}
-                </div>
-              )}
-            </div>
-
-            {/* Remote Images Privacy Banner */}
-            {selected.html && (
-              <div className="mb-4 p-3 rounded-lg bg-amber-500/10 border border-amber-500/20 flex items-center justify-between text-xs text-amber-300">
-                <span>{t("mail.loadImages")} (DOMPurify Sanitized)</span>
-                <button
-                  onClick={() => setLoadRemoteImages(!loadRemoteImages)}
-                  className="px-3 py-1 rounded bg-amber-500/20 hover:bg-amber-500/30 text-amber-200 font-medium transition-colors"
-                >
-                  {loadRemoteImages ? "Images Enabled" : t("mail.loadImages")}
-                </button>
-              </div>
-            )}
-
-            {/* Sandboxed & DOMPurify Sanitized HTML Container */}
-            {bodyHtml ? (
-              <div className="bg-white rounded-xl overflow-hidden shadow-xl border border-slate-800 min-h-[300px]">
-                <iframe
-                  title="Message body"
-                  srcDoc={bodyHtml}
-                  sandbox=""
-                  className="w-full h-96 border-0"
-                />
-              </div>
-            ) : (
-              <pre className="whitespace-pre-wrap break-words text-sm text-slate-200 font-sans">
-                {selected.text}
-              </pre>
-            )}
-          </div>
-        ) : (
-          <div className="flex-1 flex items-center justify-center text-slate-500 text-sm">
-            {t("mail.noMessages")}
-          </div>
+      <div
+        className={`${selected ? "flex" : "hidden md:flex"} flex-1 flex-col bg-dark-bg overflow-y-auto p-4 sm:p-6 md:p-8`}
+      >
+        {selected && (
+          <button
+            type="button"
+            onClick={() => setSelected(null)}
+            className="md:hidden mb-4 self-start rounded-lg border border-slate-700 px-3 py-1.5 text-xs text-slate-300"
+          >
+            &larr; {t("mail.inbox")}
+          </button>
         )}
+        <AnimatePresence mode="wait">
+          {selected ? (
+            <motion.div
+              key={selected.uid}
+              initial={{ opacity: 0, y: 10 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -10 }}
+              transition={{ duration: 0.2 }}
+              className="max-w-4xl w-full mx-auto space-y-6"
+            >
+              {/* Header & Reply/Forward Actions */}
+              <div className="glass-panel p-6 rounded-2xl border border-slate-800 space-y-4">
+                <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 border-b border-slate-800/80 pb-4">
+                  <h1 className="text-xl md:text-2xl font-extrabold text-white tracking-tight">
+                    {selected.subject || "(Sem assunto)"}
+                  </h1>
+
+                  {/* Action Buttons */}
+                  <div className="flex items-center gap-2 text-xs">
+                    <Link
+                      href={`/user/compose?replyTo=${encodeURIComponent(
+                        selected.from
+                      )}&subject=${encodeURIComponent(selected.subject)}`}
+                    >
+                      <Button variant="primary" size="sm">
+                        <Reply className="w-3.5 h-3.5" />
+                        <span>{t("mail.reply")}</span>
+                      </Button>
+                    </Link>
+
+                    <Link
+                      href={`/user/compose?replyTo=${encodeURIComponent(
+                        selected.from
+                      )}&subject=${encodeURIComponent(selected.subject)}`}
+                    >
+                      <Button variant="secondary" size="sm">
+                        <Forward className="w-3.5 h-3.5" />
+                        <span>{t("mail.forward")}</span>
+                      </Button>
+                    </Link>
+                  </div>
+                </div>
+
+                <div className="flex items-center justify-between text-xs text-slate-400">
+                  <div className="flex items-center gap-2">
+                    <div className="w-8 h-8 rounded-full bg-indigo-500/20 border border-indigo-500/30 text-indigo-400 flex items-center justify-center font-bold">
+                      <User className="w-4 h-4" />
+                    </div>
+                    <div>
+                      <div className="font-semibold text-slate-100 text-xs">{selected.from}</div>
+                      {selected.to.length > 0 && (
+                        <div className="text-[10px] text-slate-400">
+                          Para: {selected.to.join(", ")}
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                  <div className="font-mono text-slate-400 text-[11px]">
+                    {selected.date ? new Date(selected.date).toLocaleString() : ""}
+                  </div>
+                </div>
+
+                {/* Attachment Download Chips */}
+                {selected.attachments.length > 0 && (
+                  <div className="pt-3 border-t border-slate-800/80 flex flex-wrap gap-2 text-xs">
+                    {selected.attachments.map((filename, idx) => (
+                      <a
+                        key={idx}
+                        href={`/api/v1/mail/message/${selected.uid}/attachment/${encodeURIComponent(
+                          filename
+                        )}`}
+                        download={filename}
+                        className="px-3 py-1.5 rounded-xl bg-slate-900/90 border border-slate-800 hover:border-indigo-500 text-indigo-300 text-xs font-mono flex items-center gap-2 transition-all shadow-sm"
+                      >
+                        <Paperclip className="w-3.5 h-3.5 text-indigo-400" />
+                        <span>{filename}</span>
+                        <ExternalLink className="w-3 h-3 text-slate-500" />
+                      </a>
+                    ))}
+                  </div>
+                )}
+              </div>
+
+              {/* Remote Images Privacy Banner */}
+              {selected.html && (
+                <div className="p-3.5 rounded-xl bg-amber-500/10 border border-amber-500/25 flex items-center justify-between text-xs text-amber-300">
+                  <div className="flex items-center gap-2">
+                    <ImageIcon className="w-4 h-4 text-amber-400" />
+                    <span>{t("mail.loadImages")} (sanitised)</span>
+                  </div>
+                  <button
+                    onClick={() => setLoadRemoteImages(!loadRemoteImages)}
+                    className="px-3 py-1 rounded-lg bg-amber-500/20 hover:bg-amber-500/30 text-amber-200 font-medium transition-colors"
+                  >
+                    {loadRemoteImages ? "Imagens Habilitadas" : t("mail.loadImages")}
+                  </button>
+                </div>
+              )}
+
+              {/* Message Body Container */}
+              {bodyHtml ? (
+                <div className="bg-white rounded-2xl overflow-hidden shadow-2xl border border-slate-800 min-h-[350px]">
+                  <iframe
+                    title="Message body"
+                    srcDoc={bodyHtml}
+                    sandbox=""
+                    className="w-full h-[500px] border-0"
+                  />
+                </div>
+              ) : (
+                <div className="glass-panel p-6 rounded-2xl border border-slate-800">
+                  <pre className="whitespace-pre-wrap break-words text-sm text-slate-200 font-sans leading-relaxed">
+                    {selected.text}
+                  </pre>
+                </div>
+              )}
+            </motion.div>
+          ) : (
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              className="flex-1 flex flex-col items-center justify-center text-slate-500 text-sm gap-3 py-20"
+            >
+              <Mail className="w-12 h-12 text-slate-700 stroke-1" />
+              <span>{t("mail.noMessages")}</span>
+            </motion.div>
+          )}
+        </AnimatePresence>
       </div>
     </div>
   );

services/webmail/src/app/(user)/user/settings/page.tsx

@@ -1,7 +1,23 @@
 "use client";
 
 import React, { useEffect, useState } from "react";
+import {
+  Shield,
+  Filter,
+  Palmtree,
+  FileText,
+  KeyRound,
+  Monitor,
+  CheckCircle2,
+  Trash2,
+  Plus,
+  Lock,
+  Sparkles,
+} from "lucide-react";
 import { useTranslations } from "../../../../i18n/provider";
+import { Card, CardHeader, CardTitle } from "../../../../components/ui/Card";
+import { Badge } from "../../../../components/ui/Badge";
+import { Button } from "../../../../components/ui/Button";
 
 interface SieveRule {
   id: string;
@@ -38,9 +54,6 @@ export default function UserSettingsPage() {
   const [recoveryCodes, setRecoveryCodes] = useState<string[] | null>(null);
   const [message, setMessage] = useState<string | null>(null);
 
-  // App passwords, sessions and password change. These have real endpoints
-  // and were lost in a rewrite of this screen; the state below is server
-  // state, not local bookkeeping.
   const [appPasswords, setAppPasswords] = useState<AppPassword[]>([]);
   const [newAppPassLabel, setNewAppPassLabel] = useState("");
   const [generatedAppPass, setGeneratedAppPass] = useState<string | null>(null);
@@ -48,19 +61,16 @@ export default function UserSettingsPage() {
   const [currentPassword, setCurrentPassword] = useState("");
   const [newPassword, setNewPassword] = useState("");
 
-  // Vacation responder state
   const [vacationEnabled, setVacationEnabled] = useState(false);
-  const [vacationSubject, setVacationSubject] = useState("Out of Office Auto-Reply");
-  const [vacationBody, setVacationBody] = useState("Thank you for your message. I am currently out of office.");
+  const [vacationSubject, setVacationSubject] = useState("Out of office auto-reply");
+  const [vacationBody, setVacationBody] = useState("Thank you for your message. I am currently away from my desk.");
   const [vacationSaved, setVacationSaved] = useState(false);
 
-  // Signature state
   const [signature, setSignature] = useState("");
   const [sigSaved, setSigSaved] = useState(false);
 
-  // Sieve rules state
   const [rules, setRules] = useState<SieveRule[]>([
-    { id: "rule-1", field: "Subject", match: "contains", value: "[Newsletter]", action: "move", targetFolder: "Archive" },
+    { id: "rule-1", field: "Subject", match: "contains", value: "[Boletim]", action: "move", targetFolder: "Archive" },
   ]);
   const [newField, setNewField] = useState<"From" | "Subject" | "Header">("Subject");
   const [newMatch, setNewMatch] = useState<"contains" | "equals" | "matches">("contains");
@@ -79,11 +89,8 @@ export default function UserSettingsPage() {
     fetch("/api/v1/user/sieve")
       .then((r) => (r.ok ? r.json() : null))
       .then((data) => {
-        if (data?.script) {
-          // If script has vacation
-          if (data.script.includes("vacation")) {
-            setVacationEnabled(data.is_active);
-          }
+        if (data?.script && data.script.includes("vacation")) {
+          setVacationEnabled(data.is_active);
         }
       })
       .catch(() => undefined);
@@ -100,7 +107,7 @@ export default function UserSettingsPage() {
       setSigSaved(true);
       setTimeout(() => setSigSaved(false), 2000);
     } catch {
-      setMessage("Failed to save signature");
+      setMessage("Falha ao salvar assinatura");
     }
   };
 
@@ -115,7 +122,7 @@ export default function UserSettingsPage() {
       setVacationSaved(true);
       setTimeout(() => setVacationSaved(false), 2000);
     } catch {
-      setMessage("Failed to save vacation responder");
+      setMessage("Could not save the auto-reply");
     }
   };
 
@@ -136,7 +143,6 @@ export default function UserSettingsPage() {
     setRules(updated);
     setNewValue("");
 
-    // Compile rules to Sieve script string & save to backend
     const scriptLines = updated.map((r) =>
       `if header :${r.match} "${r.field}" "${r.value}" { fileinto "${r.targetFolder || "INBOX"}"; }`
     );
@@ -176,14 +182,12 @@ export default function UserSettingsPage() {
       setAppPasswords(passwords);
       setSessions(activeSessions);
     } catch {
-      // Leaving the panels as they are beats blanking them on a hiccup.
+      // ignore
     }
   };
 
   useEffect(() => {
     void loadAccount();
-    // Loaded once on mount; every mutation below refreshes what it changed.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const createAppPassword = async (e: React.FormEvent) => {
@@ -199,7 +203,6 @@ export default function UserSettingsPage() {
       setMessage(data.message ?? t("errors.serverError"));
       return;
     }
-    // Shown once; the server keeps only an Argon2id hash of it.
     setGeneratedAppPass(data.password);
     setNewAppPassLabel("");
     await loadAccount();
@@ -237,56 +240,63 @@ export default function UserSettingsPage() {
   };
 
   return (
-    <div className="flex-1 p-8 bg-slate-950 overflow-y-auto">
+    <div className="flex-1 p-6 md:p-8 bg-dark-bg overflow-y-auto">
       <div className="max-w-4xl mx-auto space-y-8">
         <div>
-          <h1 className="text-2xl font-bold text-white mb-1">{t("settings.title")}</h1>
-          <p className="text-xs text-slate-400">
-            Manage 2FA TOTP (RFC 6238), Visual Sieve rules, Vacation auto-responder, and email signatures.
+          <h1 className="text-2xl md:text-3xl font-extrabold text-white tracking-tight">
+            {t("settings.title")}
+          </h1>
+          <p className="text-sm text-slate-400 mt-1">
+            Two-factor, Sieve rules, the auto-reply and your signature.
           </p>
         </div>
 
         {message && (
-          <div className="p-4 rounded-xl bg-indigo-500/10 border border-indigo-500/30 text-indigo-300 text-sm">
-            {message}
+          <div className="p-4 rounded-xl bg-indigo-500/15 border border-indigo-500/30 text-indigo-300 text-xs flex items-center gap-2">
+            <CheckCircle2 className="w-4 h-4 text-indigo-400" />
+            <span>{message}</span>
           </div>
         )}
 
         {/* 2FA TOTP SECTION */}
-        <div className="glass-panel p-6 rounded-2xl border border-slate-800">
-          <div className="flex items-center justify-between mb-4">
+        <Card className="space-y-4">
+          <div className="flex items-center justify-between">
             <div>
-              <h2 className="text-lg font-bold text-white">{t("ui.twoFactorSection")}</h2>
-              <p className="text-xs text-slate-400">
-                Protect your account with Google Authenticator, Aegis, Authy, or 1Password.
+              <h2 className="text-base font-bold text-white flex items-center gap-2">
+                <Shield className="w-5 h-5 text-indigo-400" />
+                {t("ui.twoFactorSection")}
+              </h2>
+              <p className="text-xs text-slate-400 mt-0.5">
+                Proteja sua conta com Google Authenticator, Aegis, Authy ou 1Password.
               </p>
             </div>
-            <span className={`px-3 py-1 rounded-full text-xs font-bold ${mfaEnabled ? "badge-verified" : "badge-warning"}`}>
+            <Badge variant={mfaEnabled ? "success" : "warning"}>
               {mfaEnabled ? t("settings.mfaEnabled") : t("settings.mfaDisabled")}
-            </span>
+            </Badge>
           </div>
 
           {!mfaEnabled && !qrSecret && (
-            <button
+            <Button
+              variant="primary"
+              size="sm"
               onClick={async () => {
                 const res = await fetch("/api/v1/user/mfa/totp/enroll", { method: "POST" });
                 const data = await res.json();
                 setQrSecret(data.secret);
                 setQrUri(data.uri);
               }}
-              className="py-2 px-4 rounded-xl bg-indigo-600 hover:bg-indigo-500 text-white font-medium text-xs transition-colors"
             >
-              {t("settings.enableMfa")} -&gt;
-            </button>
+              <span>{t("settings.enableMfa")}</span>
+            </Button>
           )}
 
           {qrSecret && (
-            <div className="p-4 rounded-xl bg-slate-900 border border-slate-800 space-y-4 text-xs">
+            <div className="p-4 rounded-xl bg-slate-900/90 border border-slate-800 space-y-4 text-xs">
               <div className="text-slate-300">
-                Scan this URI in your authenticator app or copy secret key:
+                Digitalize esta chave no seu aplicativo autenticador ou copie a chave secreta:
               </div>
               <div className="p-3 bg-slate-950 rounded-lg font-mono text-indigo-400 break-all border border-slate-800">
-                Secret: {qrSecret}
+                Secreto: {qrSecret}
               </div>
               <form
                 onSubmit={async (e) => {
@@ -309,112 +319,113 @@ export default function UserSettingsPage() {
                   type="text"
                   value={totpCode}
                   onChange={(e) => setTotpCode(e.target.value)}
-                  placeholder="6-digit code"
+                  placeholder="Six-digit code"
                   maxLength={6}
                   required
-                  className="px-4 py-2 rounded-lg bg-slate-950 border border-slate-800 text-white text-xs font-mono text-center focus:outline-none focus:border-indigo-500"
+                  className="px-4 py-2 rounded-xl bg-slate-950 border border-slate-800 text-white text-xs font-mono text-center focus:outline-none focus:border-indigo-500"
                 />
-                <button
-                  type="submit"
-                  className="py-2 px-4 rounded-lg bg-emerald-600 hover:bg-emerald-500 text-white font-medium text-xs transition-colors"
-                >
+                <Button type="submit" variant="primary" size="sm">
                   {t("common.confirm")}
-                </button>
+                </Button>
               </form>
             </div>
           )}
 
           {recoveryCodes && (
-            <div className="mt-6 p-4 rounded-xl bg-slate-900 border border-emerald-500/30">
-              <h3 className="text-sm font-bold text-white mb-2">{t("settings.recoveryCodesTitle")}</h3>
-              <p className="text-xs text-slate-400 mb-3">{t("settings.saveRecoveryCodes")}</p>
-              <div className="grid grid-cols-2 md:grid-cols-5 gap-2 text-center font-mono text-xs text-emerald-400 bg-slate-950 p-3 rounded-lg border border-slate-800">
+            <div className="mt-4 p-4 rounded-xl bg-slate-900/90 border border-emerald-500/30">
+              <h3 className="text-xs font-bold text-white mb-1">{t("settings.recoveryCodesTitle")}</h3>
+              <p className="text-[11px] text-slate-400 mb-3">{t("settings.saveRecoveryCodes")}</p>
+              <div className="grid grid-cols-2 sm:grid-cols-5 gap-2 text-center font-mono text-xs text-emerald-400 bg-slate-950 p-3 rounded-xl border border-slate-800">
                 {recoveryCodes.map((code, idx) => (
-                  <div key={idx} className="p-1 border border-slate-800 rounded">{code}</div>
+                  <div key={idx} className="p-1 border border-slate-800 rounded-lg">{code}</div>
                 ))}
               </div>
             </div>
           )}
-        </div>
+        </Card>
 
-        {/* VISUAL SIEVE RULES BUILDER (Section 10.3 / Section 14.2) */}
-        <div className="glass-panel p-6 rounded-2xl border border-slate-800 space-y-4">
+        {/* VISUAL SIEVE RULES BUILDER */}
+        <Card className="space-y-4">
           <div>
-            <h2 className="text-lg font-bold text-white">Visual Sieve Filters (RFC 5228)</h2>
-            <p className="text-xs text-slate-400">Automated mail sorting and filtering rules.</p>
+            <h2 className="text-base font-bold text-white flex items-center gap-2">
+              <Filter className="w-5 h-5 text-indigo-400" />
+              Filtros Visuais Sieve (RFC 5228)
+            </h2>
+            <p className="text-xs text-slate-400 mt-0.5">Automatic sorting and filing rules.</p>
           </div>
 
-          <form onSubmit={addSieveRule} className="grid grid-cols-1 md:grid-cols-5 gap-3 text-xs bg-slate-900/60 p-4 rounded-xl border border-slate-800">
+          <form onSubmit={addSieveRule} className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-5 gap-3 text-xs bg-slate-900/60 p-4 rounded-xl border border-slate-800">
             <select
               value={newField}
               onChange={(e) => setNewField(e.target.value as "From" | "Subject" | "Header")}
-              className="px-3 py-2 rounded-lg bg-slate-900 border border-slate-800 text-white focus:outline-none focus:border-indigo-500"
+              className="px-3 py-2 rounded-xl bg-slate-900 border border-slate-800 text-white focus:outline-none focus:border-indigo-500"
             >
-              <option value="Subject">Subject</option>
-              <option value="From">From</option>
+              <option value="Subject">Assunto</option>
+              <option value="From">De</option>
               <option value="Header">Header</option>
             </select>
 
             <select
               value={newMatch}
               onChange={(e) => setNewMatch(e.target.value as "contains" | "equals" | "matches")}
-              className="px-3 py-2 rounded-lg bg-slate-900 border border-slate-800 text-white focus:outline-none focus:border-indigo-500"
+              className="px-3 py-2 rounded-xl bg-slate-900 border border-slate-800 text-white focus:outline-none focus:border-indigo-500"
             >
               <option value="contains">contains</option>
               <option value="equals">equals</option>
-              <option value="matches">matches regex</option>
+              <option value="matches">corresponde a regex</option>
             </select>
 
             <input
               type="text"
               value={newValue}
               onChange={(e) => setNewValue(e.target.value)}
-              placeholder="Value to match..."
+              placeholder="Valor a corresponder..."
               required
-              className="px-3 py-2 rounded-lg bg-slate-900 border border-slate-800 text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500"
+              className="px-3 py-2 rounded-xl bg-slate-900 border border-slate-800 text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500"
             />
 
             <select
               value={newAction}
               onChange={(e) => setNewAction(e.target.value as "move" | "flag" | "discard" | "redirect")}
-              className="px-3 py-2 rounded-lg bg-slate-900 border border-slate-800 text-white focus:outline-none focus:border-indigo-500"
+              className="px-3 py-2 rounded-xl bg-slate-900 border border-slate-800 text-white focus:outline-none focus:border-indigo-500"
             >
-              <option value="move">Move to Archive</option>
-              <option value="flag">Flag Message</option>
-              <option value="discard">Discard</option>
+              <option value="move">Mover para Arquivo</option>
+              <option value="flag">Flag message</option>
+              <option value="discard">Descartar</option>
             </select>
 
-            <button
-              type="submit"
-              className="py-2 px-4 rounded-lg bg-indigo-600 hover:bg-indigo-500 text-white font-medium transition-colors"
-            >
-              + Add Sieve Rule
-            </button>
+            <Button type="submit" variant="primary" size="sm" className="w-full">
+              <Plus className="w-4 h-4" />
+              <span>Adicionar Regra</span>
+            </Button>
           </form>
 
           <div className="space-y-2 text-xs">
             {rules.map((r) => (
-              <div key={r.id} className="flex items-center justify-between p-3 rounded-lg bg-slate-900 border border-slate-800">
+              <div key={r.id} className="flex items-center justify-between p-3 rounded-xl bg-slate-900/80 border border-slate-800">
                 <span className="font-mono text-slate-200">
-                  IF <strong>{r.field}</strong> {r.match} &quot;{r.value}&quot; -&gt; THEN {r.action.toUpperCase()}
+                  SE <strong>{r.field}</strong> {r.match} &quot;{r.value}&quot; &rarr; THEN {r.action.toUpperCase()}
                 </span>
                 <button
                   onClick={() => removeSieveRule(r.id)}
-                  className="text-red-400 hover:underline font-medium"
+                  className="text-rose-400 hover:text-rose-300 transition-colors p-1"
                 >
-                  Delete
+                  <Trash2 className="w-4 h-4" />
                 </button>
               </div>
             ))}
           </div>
-        </div>
+        </Card>
 
         {/* VACATION AUTO-RESPONDER */}
-        <div className="glass-panel p-6 rounded-2xl border border-slate-800 space-y-4">
+        <Card className="space-y-4">
           <div className="flex items-center justify-between">
             <div>
-              <h2 className="text-lg font-bold text-white">Vacation Auto-Responder</h2>
-              <p className="text-xs text-slate-400">Automatically reply to incoming messages when away.</p>
+              <h2 className="text-base font-bold text-white flex items-center gap-2">
+                <Palmtree className="w-5 h-5 text-indigo-400" />
+                Out of office auto-reply
+              </h2>
+              <p className="text-xs text-slate-400 mt-0.5">Reply automatically to incoming mail while you are awer ausente.</p>
             </div>
             <label className="relative inline-flex items-center cursor-pointer">
               <input
@@ -428,53 +439,55 @@ export default function UserSettingsPage() {
           </div>
 
           {vacationSaved && (
-            <div className="p-3 rounded-lg bg-emerald-500/10 border border-emerald-500/30 text-emerald-300 text-xs">
-              Vacation responder settings saved!
+            <div className="p-3.5 rounded-xl bg-emerald-500/15 border border-emerald-500/30 text-emerald-300 text-xs flex items-center gap-2">
+              <CheckCircle2 className="w-4 h-4 text-emerald-400" />
+              <span>Settings saved.</span>
             </div>
           )}
 
           {vacationEnabled && (
             <form onSubmit={saveVacationResponder} className="space-y-3 text-xs">
               <div>
-                <label className="font-medium text-slate-300 mb-1 block">Auto-Reply Subject</label>
+                <label className="font-semibold text-slate-300 mb-1.5 block">Assunto da Resposta</label>
                 <input
                   type="text"
                   value={vacationSubject}
                   onChange={(e) => setVacationSubject(e.target.value)}
-                  className="w-full px-3 py-2 rounded-lg bg-slate-900 border border-slate-800 text-white focus:outline-none focus:border-indigo-500"
+                  className="w-full px-3.5 py-2.5 rounded-xl bg-slate-900/90 border border-slate-800 text-white focus:outline-none focus:border-indigo-500"
                 />
               </div>
 
               <div>
-                <label className="font-medium text-slate-300 mb-1 block">Auto-Reply Body Message</label>
+                <label className="font-semibold text-slate-300 mb-1.5 block">Message body</label>
                 <textarea
                   rows={4}
                   value={vacationBody}
                   onChange={(e) => setVacationBody(e.target.value)}
-                  className="w-full px-3 py-2 rounded-lg bg-slate-900 border border-slate-800 text-white focus:outline-none focus:border-indigo-500"
+                  className="w-full px-3.5 py-2.5 rounded-xl bg-slate-900/90 border border-slate-800 text-white focus:outline-none focus:border-indigo-500"
                 />
               </div>
 
-              <button
-                type="submit"
-                className="py-2 px-4 rounded-lg bg-indigo-600 hover:bg-indigo-500 text-white font-medium transition-colors"
-              >
-                Save Vacation Responder
-              </button>
+              <Button type="submit" variant="primary" size="sm">
+                Save auto-reply
+              </Button>
             </form>
           )}
-        </div>
+        </Card>
 
         {/* EMAIL SIGNATURE MANAGER */}
-        <div className="glass-panel p-6 rounded-2xl border border-slate-800 space-y-4 text-xs">
+        <Card className="space-y-4 text-xs">
           <div>
-            <h2 className="text-lg font-bold text-white mb-1">Email Signature</h2>
-            <p className="text-slate-400">Signature automatically appended to composed messages.</p>
+            <h2 className="text-base font-bold text-white flex items-center gap-2">
+              <FileText className="w-5 h-5 text-indigo-400" />
+              Assinatura de E-mail
+            </h2>
+            <p className="text-slate-400 mt-0.5">Assinatura anexada automaticamente nas mensagens compostas.</p>
           </div>
 
           {sigSaved && (
-            <div className="p-3 rounded-lg bg-emerald-500/10 border border-emerald-500/30 text-emerald-300">
-              Signature saved successfully!
+            <div className="p-3.5 rounded-xl bg-emerald-500/15 border border-emerald-500/30 text-emerald-300 flex items-center gap-2">
+              <CheckCircle2 className="w-4 h-4 text-emerald-400" />
+              <span>Assinatura salva com sucesso!</span>
             </div>
           )}
 
@@ -482,44 +495,43 @@ export default function UserSettingsPage() {
             rows={4}
             value={signature}
             onChange={(e) => setSignature(e.target.value)}
-            placeholder="Best regards,&#10;Your Name&#10;Your Title"
-            className="w-full px-3 py-2 rounded-lg bg-slate-900 border border-slate-800 text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500"
+            placeholder="Atenciosamente,&#10;Seu Nome&#10;Seu Cargo"
+            className="w-full px-3.5 py-2.5 rounded-xl bg-slate-900/90 border border-slate-800 text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500"
           />
 
-          <button
-            onClick={saveSignature}
-            className="py-2 px-4 rounded-lg bg-indigo-600 hover:bg-indigo-500 text-white font-medium transition-colors"
-          >
+          <Button onClick={saveSignature} variant="primary" size="sm">
             {t("common.save")}
-          </button>
-        </div>
+          </Button>
+        </Card>
 
-        {/* APP PASSWORDS - real, issued and revoked through the API */}
-        <div className="glass-panel p-6 rounded-2xl border border-slate-800">
-          <h2 className="text-lg font-bold text-white mb-4">{t("ui.appPasswordsSection")}</h2>
+        {/* APP PASSWORDS */}
+        <Card className="space-y-4">
+          <h2 className="text-base font-bold text-white flex items-center gap-2">
+            <KeyRound className="w-5 h-5 text-indigo-400" />
+            {t("ui.appPasswordsSection")}
+          </h2>
 
           {generatedAppPass && (
-            <div className="mb-4 p-3 rounded-lg bg-emerald-500/10 border border-emerald-500/30 text-emerald-300 text-xs">
-              <div className="font-bold mb-1">{t("ui.appPasswordGenerated")}</div>
-              <code className="block font-mono text-sm text-white break-all">{generatedAppPass}</code>
-              <div className="mt-1">{t("ui.copyPasswordNow")}</div>
+            <div className="p-4 rounded-xl bg-emerald-500/15 border border-emerald-500/30 text-emerald-300 text-xs space-y-1">
+              <div className="font-bold">{t("ui.appPasswordGenerated")}</div>
+              <code className="block font-mono text-sm text-white break-all bg-slate-950 p-2 rounded-lg border border-slate-800">
+                {generatedAppPass}
+              </code>
+              <div className="text-[10px] text-emerald-400">{t("ui.copyPasswordNow")}</div>
             </div>
           )}
 
-          <form onSubmit={createAppPassword} className="flex gap-2 mb-4">
+          <form onSubmit={createAppPassword} className="flex gap-2">
             <input
               type="text"
               value={newAppPassLabel}
               onChange={(e) => setNewAppPassLabel(e.target.value)}
-              placeholder="Thunderbird"
-              className="flex-1 px-3 py-2 text-xs rounded-lg bg-slate-900 border border-slate-800 text-white"
+              placeholder="Thunderbird / Outlook Mobile"
+              className="flex-1 px-3.5 py-2 text-xs rounded-xl bg-slate-900/90 border border-slate-800 text-white focus:outline-none focus:border-indigo-500"
             />
-            <button
-              type="submit"
-              className="px-4 py-2 rounded-lg bg-indigo-600 hover:bg-indigo-500 text-white text-xs font-medium"
-            >
+            <Button type="submit" variant="primary" size="sm">
               {t("settings.generateAppPassword")}
-            </button>
+            </Button>
           </form>
 
           <div className="space-y-2">
@@ -527,60 +539,62 @@ export default function UserSettingsPage() {
               <div className="text-xs text-slate-500 italic">{t("ui.noAppPasswords")}</div>
             ) : (
               appPasswords.map((ap) => (
-                <div key={ap.id} className="flex items-center justify-between p-3 rounded-lg bg-slate-900 border border-slate-800 text-xs">
+                <div key={ap.id} className="flex items-center justify-between p-3 rounded-xl bg-slate-900/80 border border-slate-800 text-xs">
                   <div>
                     <span className="font-bold text-slate-200">{ap.label}</span>
                     <span className="text-[10px] text-slate-500 ml-2">
                       {ap.created_at ? new Date(ap.created_at).toLocaleDateString() : ""}
                     </span>
                   </div>
-                  <button type="button" onClick={() => void revokeAppPassword(ap.id)} className="text-red-400 hover:underline">
-                    {t("common.delete")}
+                  <button type="button" onClick={() => void revokeAppPassword(ap.id)} className="text-rose-400 hover:text-rose-300 p-1">
+                    <Trash2 className="w-4 h-4" />
                   </button>
                 </div>
               ))
             )}
           </div>
-        </div>
+        </Card>
 
-        {/* ACTIVE SESSIONS - revoking one takes effect on the next request */}
-        <div className="glass-panel p-6 rounded-2xl border border-slate-800">
-          <div className="flex items-center justify-between mb-4">
-            <h2 className="text-lg font-bold text-white">{t("ui.activeSessions")}</h2>
-            <button
-              type="button"
-              onClick={() => void revokeOtherSessions()}
-              className="text-xs px-3 py-1.5 rounded-lg border border-slate-700 text-slate-300 hover:text-white"
-            >
+        {/* ACTIVE SESSIONS */}
+        <Card className="space-y-4">
+          <div className="flex items-center justify-between">
+            <h2 className="text-base font-bold text-white flex items-center gap-2">
+              <Monitor className="w-5 h-5 text-indigo-400" />
+              {t("ui.activeSessions")}
+            </h2>
+            <Button variant="ghost" size="sm" onClick={() => void revokeOtherSessions()}>
               {t("ui.signOutOthers")}
-            </button>
+            </Button>
           </div>
 
           <div className="space-y-2">
             {sessions.map((session) => (
-              <div key={session.id} className="flex items-center justify-between p-3 rounded-lg bg-slate-900 border border-slate-800 text-xs">
+              <div key={session.id} className="flex items-center justify-between p-3 rounded-xl bg-slate-900/80 border border-slate-800 text-xs">
                 <div className="min-w-0">
-                  <div className="text-slate-200 truncate">
+                  <div className="text-slate-200 truncate font-mono">
                     {session.ip_address ?? "-"}
-                    <span className="text-[10px] text-slate-500 ml-2 uppercase">{session.surface}</span>
+                    <span className="text-[10px] text-slate-500 ml-2 uppercase font-sans font-bold">{session.surface}</span>
                   </div>
                   <div className="text-[10px] text-slate-500 truncate">{session.user_agent ?? ""}</div>
                 </div>
                 {session.current ? (
-                  <span className="text-[10px] text-emerald-400">{t("ui.currentSession")}</span>
+                  <Badge variant="success">{t("ui.currentSession")}</Badge>
                 ) : (
-                  <button type="button" onClick={() => void revokeSession(session.id)} className="text-red-400 hover:underline">
-                    {t("common.delete")}
+                  <button type="button" onClick={() => void revokeSession(session.id)} className="text-rose-400 hover:text-rose-300 p-1">
+                    <Trash2 className="w-4 h-4" />
                   </button>
                 )}
               </div>
             ))}
           </div>
-        </div>
+        </Card>
 
-        {/* PASSWORD CHANGE - takes every other session down with it */}
-        <div className="glass-panel p-6 rounded-2xl border border-slate-800">
-          <h2 className="text-lg font-bold text-white mb-4">{t("ui.changePassword")}</h2>
+        {/* PASSWORD CHANGE */}
+        <Card className="space-y-4">
+          <h2 className="text-base font-bold text-white flex items-center gap-2">
+            <Lock className="w-5 h-5 text-indigo-400" />
+            {t("ui.changePassword")}
+          </h2>
           <form onSubmit={changePassword} className="space-y-3">
             <input
               type="password"
@@ -588,7 +602,7 @@ export default function UserSettingsPage() {
               onChange={(e) => setCurrentPassword(e.target.value)}
               placeholder={t("ui.currentPassword")}
               required
-              className="w-full px-3 py-2 text-xs rounded-lg bg-slate-900 border border-slate-800 text-white"
+              className="w-full px-3.5 py-2.5 text-xs rounded-xl bg-slate-900/90 border border-slate-800 text-white focus:outline-none focus:border-indigo-500"
             />
             <input
               type="password"
@@ -597,13 +611,13 @@ export default function UserSettingsPage() {
               placeholder={t("ui.newPassword")}
               minLength={12}
               required
-              className="w-full px-3 py-2 text-xs rounded-lg bg-slate-900 border border-slate-800 text-white"
+              className="w-full px-3.5 py-2.5 text-xs rounded-xl bg-slate-900/90 border border-slate-800 text-white focus:outline-none focus:border-indigo-500"
             />
-            <button type="submit" className="py-2 px-4 rounded-lg bg-indigo-600 hover:bg-indigo-500 text-white text-xs font-medium">
+            <Button type="submit" variant="primary" size="sm">
               {t("common.save")}
-            </button>
+            </Button>
           </form>
-        </div>
+        </Card>
       </div>
     </div>
   );