diff --git a/internal/web/handlers/mail.go b/internal/web/handlers/mail.go
index bf7475b..a26c1be 100644
--- a/internal/web/handlers/mail.go
+++ b/internal/web/handlers/mail.go
@@ -56,6 +56,14 @@ func NewMailHandler(stores *store.Stores, attStorage *storage.AttachmentStorage,
 	return &MailHandler{stores: stores, storage: attStorage, outbound: ob}
 }
 
+// folderCounts returns sidebar badge counts for the current user.
+func (h *MailHandler) folderCounts(userID uint) (inboxUnread, draftsTotal, sentTotal int64) {
+	inboxUnread, _ = h.stores.Mails.CountUnread(userID, "INBOX")
+	draftsTotal, _ = h.stores.Mails.CountByUserAndFolder(userID, "Drafts")
+	sentTotal, _ = h.stores.Mails.CountByUserAndFolder(userID, "Sent")
+	return
+}
+
 // Inbox renders the inbox page showing all messages in the user's INBOX folder.
 func (h *MailHandler) Inbox(c *gin.Context) {
 	userID := c.GetUint("userID")
@@ -67,7 +75,7 @@ func (h *MailHandler) Inbox(c *gin.Context) {
 		return
 	}
 
-	unreadCount, _ := h.stores.Mails.CountUnread(userID, "INBOX")
+	inboxUnread, draftsTotal, sentTotal := h.folderCounts(userID)
 
 	currentUser, _ := c.Get("currentUser")
 
@@ -83,12 +91,14 @@ func (h *MailHandler) Inbox(c *gin.Context) {
 		"currentUser":  currentUser,
 		"messages":     messages,
 		"total":        total,
-		"unreadCount":  unreadCount,
 		"page":         page,
 		"pageSize":     20,
 		"totalPages":   totalPages,
 		"folder":       "INBOX",
 		"activeFolder": "inbox",
+		"inboxUnread":  inboxUnread,
+		"draftsTotal":  draftsTotal,
+		"sentTotal":    sentTotal,
 	})
 }
 
@@ -123,12 +133,16 @@ func (h *MailHandler) View(c *gin.Context) {
 	}
 
 	currentUser, _ := c.Get("currentUser")
+	inboxUnread, draftsTotal, sentTotal := h.folderCounts(userID)
 
 	c.HTML(200, "view", gin.H{
 		"currentUser":  currentUser,
 		"message":      msg,
 		"attachments":  attachments,
 		"activeFolder": resolveActiveFolder(msg.Folder),
+		"inboxUnread":  inboxUnread,
+		"draftsTotal":  draftsTotal,
+		"sentTotal":    sentTotal,
 	})
 }
 
@@ -146,6 +160,8 @@ func (h *MailHandler) Compose(c *gin.Context) {
 		quotaBytes = user.QuotaBytes
 	}
 
+	inboxUnread, draftsTotal, sentTotal := h.folderCounts(userID)
+
 	c.HTML(200, "compose", gin.H{
 		"currentUser":  currentUser,
 		"activeFolder": "compose",
@@ -155,6 +171,9 @@ func (h *MailHandler) Compose(c *gin.Context) {
 		"bodyContent":  "",
 		"usedBytes":    usedBytes,
 		"quotaBytes":   quotaBytes,
+		"inboxUnread":  inboxUnread,
+		"draftsTotal":  draftsTotal,
+		"sentTotal":    sentTotal,
 	})
 }
 
@@ -495,6 +514,7 @@ func (h *MailHandler) Sent(c *gin.Context) {
 	}
 
 	currentUser, _ := c.Get("currentUser")
+	inboxUnread, draftsTotal, sentTotal := h.folderCounts(userID)
 
 	totalPages := int(total) / 20
 	if int(total)%20 > 0 {
@@ -513,6 +533,9 @@ func (h *MailHandler) Sent(c *gin.Context) {
 		"totalPages":   totalPages,
 		"folder":       "Sent",
 		"activeFolder": "sent",
+		"inboxUnread":  inboxUnread,
+		"draftsTotal":  draftsTotal,
+		"sentTotal":    sentTotal,
 	})
 }
 
@@ -630,6 +653,7 @@ func (h *MailHandler) Drafts(c *gin.Context) {
 	}
 
 	currentUser, _ := c.Get("currentUser")
+	inboxUnread, draftsTotal, sentTotal := h.folderCounts(userID)
 
 	totalPages := int(total) / 20
 	if int(total)%20 > 0 {
@@ -648,17 +672,25 @@ func (h *MailHandler) Drafts(c *gin.Context) {
 		"totalPages":   totalPages,
 		"folder":       "Drafts",
 		"activeFolder": "drafts",
+		"inboxUnread":  inboxUnread,
+		"draftsTotal":  draftsTotal,
+		"sentTotal":    sentTotal,
 	})
 }
 
 // Settings renders the user settings page.
 func (h *MailHandler) Settings(c *gin.Context) {
 	currentUser, _ := c.Get("currentUser")
+	userID := c.GetUint("userID")
+	inboxUnread, draftsTotal, sentTotal := h.folderCounts(userID)
 	c.HTML(200, "settings", gin.H{
 		"currentUser":  currentUser,
 		"activeFolder": "settings",
 		"error":        "",
 		"success":      "",
+		"inboxUnread":  inboxUnread,
+		"draftsTotal":  draftsTotal,
+		"sentTotal":    sentTotal,
 	})
 }
 
diff --git a/internal/web/render_test.go b/internal/web/render_test.go
new file mode 100644
index 0000000..6f1b6c8
--- /dev/null
+++ b/internal/web/render_test.go
@@ -0,0 +1,92 @@
+package web
+
+// Temporary render test used to validate the rewritten frontend templates.
+// Renders every page template with realistic dummy data and writes the
+// output to /tmp/mailgo_preview for visual verification.
+
+import (
+	"html/template"
+	"os"
+	"path/filepath"
+	"strings"
+	"testing"
+	"time"
+
+	"mail_go/internal/db"
+)
+
+func TestRenderAllPages(t *testing.T) {
+	wd, err := os.Getwd()
+	if err != nil {
+		t.Fatal(err)
+	}
+	tmpl := template.Must(template.New("").Funcs(templateFuncs()).ParseGlob(filepath.Join(wd, "templates", "*.html")))
+	template.Must(tmpl.ParseGlob(filepath.Join(wd, "templates", "admin", "*.html")))
+
+	now := time.Now()
+	user := &db.User{
+		ID:         1,
+		Username:   "admin",
+		IsAdmin:    true,
+		Domain:     db.Domain{Name: "lmve.net"},
+		UsedBytes:  5 * 1024 * 1024,
+		QuotaBytes: 5 * 1024 * 1024 * 1024,
+	}
+
+	messages := []db.Message{
+		{ID: 1, Folder: "INBOX", FromAddr: "=?UTF-8?B?5byg5LiJ?= <zhangsan@lmve.net>", ToAddr: "admin@lmve.net", Subject: "邮件系统部署完成通知", TextBody: "您好！您的 MailGo 邮件系统已成功部署，本邮件为测试邮件。", Date: now, IsRead: false},
+		{ID: 2, Folder: "INBOX", FromAddr: "alice@example.com", ToAddr: "admin@lmve.net", Subject: "Re: 项目进度同步", TextBody: "好的，我们下周一上午十点开会同步一下进度。", Date: now.Add(-3 * time.Hour), IsRead: true},
+		{ID: 3, Folder: "INBOX", FromAddr: "=?UTF-8?B?6ZmI5rKz?= <wangwu@lmve.net>", ToAddr: "admin@lmve.net", Subject: "服务器巡检报告（8 月）", TextBody: "本月巡检完成，磁盘使用率 62%，内存使用正常。", Date: now.Add(-48 * time.Hour), IsRead: false},
+		{ID: 4, Folder: "INBOX", FromAddr: "bob@other.com", ToAddr: "admin@lmve.net", Subject: "Newsletter #42", TextBody: "这是本周的资讯摘要，共 5 篇文章。", Date: now.Add(-10 * 24 * time.Hour), IsRead: true},
+		{ID: 5, Folder: "INBOX", FromAddr: "=?UTF-8?B?6ZmI5rKz?= <wangwu@lmve.net>", ToAddr: "admin@lmve.net", Subject: "DNS 记录更新", TextBody: "已按文档更新 SPF 与 DKIM 记录，请验证。", Date: now.Add(-100 * 24 * time.Hour), IsRead: true},
+	}
+
+	attachments := []db.Attachment{
+		{ID: 1, FileName: "部署文档.pdf", FileSize: 1024 * 1024},
+		{ID: 2, FileName: "logo.png", FileSize: 128 * 1024},
+	}
+
+	cases := []struct {
+		name string
+		data ginH
+	}{
+		{"login", ginH{"error": ""}},
+		{"banned", ginH{"entry": &db.BanEntry{IPAddress: "1.2.3.4", Reason: "登录失败次数过多", FailCount: 8, ExpiresAt: now.Add(20 * time.Minute)}}},
+		{"inbox", ginH{"currentUser": user, "messages": messages, "total": 5, "page": 1, "totalPages": 1, "activeFolder": "inbox", "inboxUnread": int64(2), "draftsTotal": int64(1), "sentTotal": int64(3)}},
+		{"drafts", ginH{"currentUser": user, "messages": messages, "total": 1, "page": 1, "totalPages": 1, "activeFolder": "drafts", "inboxUnread": int64(2), "draftsTotal": int64(1), "sentTotal": int64(3)}},
+		{"sent", ginH{"currentUser": user, "messages": messages, "total": 3, "page": 1, "totalPages": 1, "activeFolder": "sent", "inboxUnread": int64(2), "draftsTotal": int64(1), "sentTotal": int64(3)}},
+		{"view", ginH{
+			"currentUser": user, "activeFolder": "inbox",
+			"message":     &db.Message{ID: 1, Folder: "INBOX", FromAddr: "=?UTF-8?B?5byg5LiJ?= <zhangsan@lmve.net>", ToAddr: "admin@lmve.net", Subject: "邮件系统部署完成通知", TextBody: "您好！您的 MailGo 邮件系统已成功部署。", HtmlBody: "", Date: now, IsRead: false},
+			"attachments": attachments, "inboxUnread": int64(2), "draftsTotal": int64(1), "sentTotal": int64(3),
+		}},
+		{"compose", ginH{
+			"currentUser": user, "activeFolder": "compose", "error": "",
+			"to": "zhangsan@lmve.net", "subject": "Re: 邮件系统部署完成通知", "bodyContent": "",
+			"usedBytes": int64(5 * 1024 * 1024), "quotaBytes": int64(5 * 1024 * 1024 * 1024),
+			"inboxUnread": int64(2), "draftsTotal": int64(1), "sentTotal": int64(3),
+		}},
+		{"settings", ginH{"currentUser": user, "activeFolder": "settings", "error": "", "success": "", "inboxUnread": int64(2), "draftsTotal": int64(1), "sentTotal": int64(3)}},
+		{"admin_dashboard", ginH{"currentUser": user, "activeFolder": "admin", "domainCount": 2, "userCount": 5, "totalMails": 100, "banCount": 1, "inboxCount": 50, "sentCount": 30, "draftsCount": 10, "trashCount": 5, "inboxSize": int64(1024), "sentSize": int64(512), "totalSize": int64(2048), "todayReceived": 3, "todaySent": 2, "weekReceived": 20, "weekSent": 15}},
+	}
+
+	outDir := os.Getenv("MAILGO_PREVIEW_DIR")
+	if outDir == "" {
+		outDir = filepath.Join(os.TempDir(), "mailgo_preview")
+	}
+	os.MkdirAll(outDir, 0755)
+
+	for _, tc := range cases {
+		t.Run(tc.name, func(t *testing.T) {
+			var buf strings.Builder
+			if err := tmpl.ExecuteTemplate(&buf, tc.name, tc.data); err != nil {
+				t.Fatalf("render %s: %v", tc.name, err)
+			}
+			os.WriteFile(filepath.Join(outDir, tc.name+".html"), []byte(buf.String()), 0644)
+			t.Logf("%s -> %d bytes", tc.name, buf.Len())
+		})
+	}
+}
+
+// ginH mimics gin.H so the test does not need the gin dependency surface.
+type ginH map[string]interface{}
diff --git a/internal/web/server.go b/internal/web/server.go
index c76c6d8..c538f06 100644
--- a/internal/web/server.go
+++ b/internal/web/server.go
@@ -8,6 +8,8 @@ import (
 	"os"
 	"path/filepath"
 	"strings"
+	"time"
+	"unicode/utf8"
 
 	"mail_go/config"
 	"mail_go/internal/mailutil"
@@ -80,9 +82,88 @@ func templateFuncs() template.FuncMap {
 		"decodeHeader": func(s string) string {
 			return mailutil.DecodeRFC2047(s)
 		},
+		// mailName 从 "Name <addr>" 中提取显示名；无显示名时退回邮箱地址。
+		"mailName": mailName,
+		// mailEmail 从 "Name <addr>" 中提取邮箱地址部分。
+		"mailEmail": mailEmail,
+		// initial 返回字符串的首字符（用于头像占位）。
+		"initial": initial,
+		// truncate 折叠空白并截断到 n 个字符（用于列表摘要）。
+		"truncate": truncate,
+		// shortDate 按 QQ 邮箱习惯格式化：今天显示 HH:mm，今年显示 MM-DD，更早显示 YYYY-MM-DD。
+		"shortDate": shortDate,
+		// avatarStyle 根据字符串哈希生成头像背景/前景色。
+		"avatarStyle": avatarStyle,
 	}
 }
 
+// mailName extracts the display name from an RFC 5322 address.
+func mailName(s string) string {
+	s = strings.TrimSpace(s)
+	if i := strings.IndexByte(s, '<'); i >= 0 {
+		name := strings.Trim(strings.TrimSpace(s[:i]), `"' `)
+		if name != "" {
+			return name
+		}
+		if j := strings.IndexByte(s, '>'); j > i {
+			return s[i+1 : j]
+		}
+	}
+	return s
+}
+
+// mailEmail extracts the bare email address from an RFC 5322 address.
+func mailEmail(s string) string {
+	if i := strings.IndexByte(s, '<'); i >= 0 {
+		if j := strings.IndexByte(s, '>'); j > i {
+			return s[i+1 : j]
+		}
+	}
+	return strings.TrimSpace(s)
+}
+
+// initial returns the first rune of a string, upper-cased.
+func initial(s string) string {
+	s = strings.TrimSpace(s)
+	if s == "" {
+		return "?"
+	}
+	r, _ := utf8.DecodeRuneInString(s)
+	return strings.ToUpper(string(r))
+}
+
+// truncate collapses whitespace and cuts the string to n runes.
+func truncate(s string, n int) string {
+	s = strings.Join(strings.Fields(s), " ")
+	r := []rune(s)
+	if len(r) <= n {
+		return s
+	}
+	return string(r[:n]) + "…"
+}
+
+// shortDate formats a time like QQ Mail does: today -> HH:mm,
+// this year -> MM-DD, otherwise -> YYYY-MM-DD.
+func shortDate(t time.Time) string {
+	now := time.Now()
+	if t.Year() == now.Year() && t.YearDay() == now.YearDay() {
+		return t.Format("15:04")
+	}
+	if t.Year() == now.Year() {
+		return t.Format("01-02")
+	}
+	return t.Format("2006-01-02")
+}
+
+// avatarStyle returns inline CSS colors derived from a string hash.
+func avatarStyle(s string) string {
+	h := 0
+	for _, r := range s {
+		h = (h*31 + int(r)) % 360
+	}
+	return fmt.Sprintf("background:hsl(%d,78%%,92%%);color:hsl(%d,72%%,36%%)", h, h)
+}
+
 // NewWebServer creates a new WebServer, initializes the Gin engine,
 // configures sessions, middleware, and registers all routes.
 func NewWebServer(cfg config.WebConfig, stores *store.Stores, attStorage *storage.AttachmentStorage, storageCfg config.StorageConfig, authCfg config.AuthConfig, banCfg config.BanConfig, caddyCfg config.CaddyConfig, ob *outbound.Manager) *WebServer {
diff --git a/internal/web/templates/banned.html b/internal/web/templates/banned.html
index 10745fb..06ab231 100644
--- a/internal/web/templates/banned.html
+++ b/internal/web/templates/banned.html
@@ -7,17 +7,36 @@
     <title>访问被禁止 - MailGo</title>
     <style>
         * { margin: 0; padding: 0; box-sizing: border-box; }
-        body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #f5f5f5; color: #333; display: flex; justify-content: center; align-items: center; min-height: 100vh; }
-        .banned-card { background: #fff; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); padding: 48px; text-align: center; max-width: 480px; width: 100%; }
-        .banned-icon { font-size: 64px; margin-bottom: 16px; }
-        h1 { font-size: 24px; color: #c0392b; margin-bottom: 12px; }
-        p { color: #7f8c8d; line-height: 1.6; margin-bottom: 8px; }
-        .detail { background: #f8f9fa; border-radius: 6px; padding: 16px; margin: 16px 0; text-align: left; }
-        .detail-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid #eee; }
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
+                "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
+            background: linear-gradient(165deg, #fdecec 0%, #f6f8fc 55%, #eaf2ff 100%);
+            color: #1f2329; display: flex; justify-content: center; align-items: center; min-height: 100vh;
+        }
+        .banned-card {
+            background: #fff; border-radius: 14px;
+            box-shadow: 0 10px 40px rgba(227, 77, 89, 0.10);
+            padding: 48px; text-align: center; max-width: 480px; width: 100%;
+        }
+        .banned-icon {
+            width: 72px; height: 72px; margin: 0 auto 18px; border-radius: 50%;
+            background: #fde8e8; display: flex; align-items: center; justify-content: center;
+            font-size: 34px;
+        }
+        h1 { font-size: 22px; color: #e34d59; margin-bottom: 12px; }
+        p { color: #646a73; line-height: 1.7; margin-bottom: 8px; font-size: 14px; }
+        .detail {
+            background: #f8f9fb; border-radius: 10px; padding: 16px 18px;
+            margin: 18px 0; text-align: left;
+        }
+        .detail-row { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid #f0f1f3; }
         .detail-row:last-child { border-bottom: none; }
-        .detail-label { color: #7f8c8d; font-size: 13px; }
-        .detail-value { color: #2c3e50; font-weight: 600; font-size: 13px; }
-        .back-link { display: inline-block; margin-top: 20px; color: #3498db; text-decoration: none; }
+        .detail-label { color: #8f959e; font-size: 13px; }
+        .detail-value { color: #1f2329; font-weight: 600; font-size: 13px; }
+        .back-link {
+            display: inline-block; margin-top: 22px; color: #1677ff;
+            text-decoration: none; font-size: 14px;
+        }
         .back-link:hover { text-decoration: underline; }
     </style>
 </head>
diff --git a/internal/web/templates/base.html b/internal/web/templates/base.html
index 5e892f4..d8a7a1d 100644
--- a/internal/web/templates/base.html
+++ b/internal/web/templates/base.html
@@ -1,66 +1,391 @@
 {{define "styles"}}
 <style>
-    * { margin:0; padding:0; box-sizing:border-box; }
-    body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background:#f5f5f5; color:#333; }
-    .navbar { background:#2c3e50; padding:0 20px; height:50px; display:flex; align-items:center; }
-    .navbar a { color:#ecf0f1; text-decoration:none; margin-right:20px; font-size:14px; }
-    .navbar a:hover { color:#3498db; }
-    .navbar .right { margin-left:auto; }
-    .container { max-width:1200px; margin:20px auto; padding:0 20px; }
-    .card { background:#fff; border-radius:8px; box-shadow:0 2px 4px rgba(0,0,0,0.1); padding:20px; margin-bottom:20px; }
-    table { width:100%; border-collapse:collapse; }
-    th, td { padding:10px 12px; text-align:left; border-bottom:1px solid #eee; }
-    th { background:#f8f9fa; font-weight:600; }
-    .btn { display:inline-block; padding:8px 16px; border-radius:4px; text-decoration:none; font-size:14px; cursor:pointer; border:none; }
-    .btn-primary { background:#3498db; color:#fff; }
-    .btn-primary:hover { background:#2980b9; }
-    .btn-danger { background:#e74c3c; color:#fff; }
-    .btn-danger:hover { background:#c0392b; }
-    .btn-sm { padding:4px 10px; font-size:12px; }
-    .alert { padding:12px 16px; border-radius:4px; margin-bottom:16px; }
-    .alert-error { background:#fde8e8; color:#c0392b; }
-    .alert-success { background:#e8fde8; color:#27ae60; }
-    .form-group { margin-bottom:16px; }
-    .form-group label { display:block; margin-bottom:6px; font-weight:600; }
-    .form-group input, .form-group textarea, .form-group select { width:100%; padding:8px 12px; border:1px solid #ddd; border-radius:4px; font-size:14px; }
-    .form-group input[type="checkbox"] { width:auto; }
-    .unread { font-weight:bold; }
-    .message-subject { color:#2c3e50; text-decoration:none; }
-    .message-subject:hover { color:#3498db; }
-    .sidebar { width:200px; float:left; }
-    .sidebar a { display:block; padding:10px 15px; color:#2c3e50; text-decoration:none; border-radius:4px; margin-bottom:2px; }
-    .sidebar a:hover, .sidebar a.active { background:#3498db; color:#fff; }
-    .content { margin-left:220px; }
-    .pagination { margin-top:16px; text-align:center; }
-    .pagination a, .pagination span { display:inline-block; padding:6px 12px; margin:0 2px; border:1px solid #ddd; border-radius:4px; text-decoration:none; color:#333; }
-    .pagination .current { background:#3498db; color:#fff; border-color:#3498db; }
-    .mail-meta { color:#7f8c8d; font-size:13px; margin-bottom:8px; }
-    .mail-body { line-height:1.6; margin-top:16px; padding-top:16px; border-top:1px solid #eee; }
-    .attachment-list { margin-top:16px; padding-top:16px; border-top:1px solid #eee; }
-    .attachment-item { display:inline-block; margin-right:12px; margin-bottom:8px; padding:6px 12px; background:#ecf0f1; border-radius:4px; font-size:13px; }
-    .attachment-item a { color:#2c3e50; text-decoration:none; }
-    .attachment-item a:hover { color:#3498db; }
-    .badge { display:inline-block; padding:2px 8px; border-radius:10px; font-size:11px; font-weight:bold; }
-    .badge-unread { background:#e74c3c; color:#fff; }
-    .stat-card { display:inline-block; width:200px; padding:20px; margin-right:20px; background:#fff; border-radius:8px; box-shadow:0 2px 4px rgba(0,0,0,0.1); text-align:center; }
-    .stat-card h3 { font-size:32px; color:#2c3e50; margin-bottom:4px; }
-    .stat-card p { color:#7f8c8d; font-size:14px; }
-    .dns-record { background:#f8f9fa; padding:12px 16px; border-radius:4px; margin-bottom:12px; font-family:monospace; font-size:13px; white-space:pre-wrap; }
-    .clearfix::after { content:""; display:table; clear:both; }
+    /* ===== MailGo 设计系统（参考 QQ 邮箱布局） ===== */
+    :root {
+        --primary: #1677ff;
+        --primary-hover: #0e5fd8;
+        --primary-soft: #e8f1ff;
+        --orange: #ff9500;
+        --orange-hover: #f08800;
+        --danger: #e34d59;
+        --danger-soft: #fde8e8;
+        --success: #34a853;
+        --success-soft: #e6f7ec;
+        --sidebar-bg: #f6f8fc;
+        --topbar-h: 56px;
+        --border: #e5e6eb;
+        --border-light: #f0f1f3;
+        --text: #1f2329;
+        --text-2: #646a73;
+        --text-3: #8f959e;
+        --radius: 8px;
+    }
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body {
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
+            "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
+        background: #f6f8fc; color: var(--text); font-size: 14px;
+    }
+    a { text-decoration: none; color: inherit; }
+    ul { list-style: none; }
+    input, textarea, select, button { font-family: inherit; }
+    input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--primary); cursor: pointer; flex-shrink: 0; }
+    svg { flex-shrink: 0; }
+
+    /* ---------- 顶部导航栏 ---------- */
+    .topbar {
+        position: fixed; top: 0; left: 0; right: 0; height: var(--topbar-h);
+        background: #fff; border-bottom: 1px solid var(--border);
+        display: flex; align-items: center; gap: 28px; padding: 0 20px; z-index: 100;
+    }
+    .logo { display: flex; align-items: center; gap: 9px; }
+    .logo-icon {
+        width: 34px; height: 34px; border-radius: 9px; color: #fff; font-size: 17px;
+        background: linear-gradient(135deg, #1677ff, #4aa3ff);
+        display: inline-flex; align-items: center; justify-content: center;
+        box-shadow: 0 2px 6px rgba(22, 119, 255, 0.35);
+    }
+    .logo-text { font-size: 19px; font-weight: 700; color: var(--primary); letter-spacing: 0.5px; }
+    .logo-text em { font-style: normal; font-weight: 400; font-size: 13px; color: var(--text-2); margin-left: 3px; }
+    .topbar-search {
+        flex: 0 1 340px; height: 34px; display: none; align-items: center; gap: 8px;
+        background: #f2f3f5; border: 1px solid transparent; border-radius: 17px;
+        padding: 0 14px; color: var(--text-3);
+    }
+    body.page-list .topbar-search { display: flex; }
+    .topbar-search:focus-within { background: #fff; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.12); }
+    .topbar-search input { border: none; outline: none; background: transparent; flex: 1; font-size: 13px; color: var(--text); }
+    .topbar-search input::placeholder { color: var(--text-3); }
+    .topbar-right { margin-left: auto; display: flex; align-items: center; gap: 18px; }
+    .topbar-link { color: var(--text-2); font-size: 13.5px; }
+    .topbar-link:hover { color: var(--primary); }
+    .user-chip { display: flex; align-items: center; gap: 8px; }
+    .user-email { font-size: 13px; color: var(--text-2); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .logout-form { display: inline-flex; }
+    .icon-btn {
+        display: inline-flex; align-items: center; justify-content: center;
+        width: 30px; height: 30px; border: 1px solid var(--border); border-radius: 6px;
+        background: #fff; color: var(--text-2); cursor: pointer;
+    }
+    .icon-btn:hover { color: var(--danger); border-color: var(--danger); }
+
+    /* ---------- 头像 ---------- */
+    .avatar {
+        width: 36px; height: 36px; border-radius: 50%;
+        display: inline-flex; align-items: center; justify-content: center;
+        font-size: 15px; font-weight: 600; flex-shrink: 0; user-select: none;
+    }
+    .avatar-sm { width: 28px; height: 28px; font-size: 12.5px; }
+
+    /* ---------- 整体布局 ---------- */
+    .app-body { display: flex; min-height: 100vh; padding-top: var(--topbar-h); }
+
+    /* ---------- 左侧文件夹导航 ---------- */
+    .mail-sidebar {
+        width: 200px; flex-shrink: 0;
+        background: var(--sidebar-bg); border-right: 1px solid var(--border);
+        padding: 16px 12px; display: flex; flex-direction: column; gap: 14px;
+        position: sticky; top: var(--topbar-h); height: calc(100vh - var(--topbar-h));
+    }
+    .compose-btn {
+        display: flex; align-items: center; justify-content: center; gap: 7px;
+        height: 38px; border-radius: 19px; color: #fff; font-size: 14.5px; font-weight: 600;
+        background: linear-gradient(135deg, #ffa940, #ff9500);
+        box-shadow: 0 2px 8px rgba(255, 149, 0, 0.35);
+        transition: transform 0.1s, box-shadow 0.1s;
+    }
+    .compose-btn:hover { background: linear-gradient(135deg, #ff9d2e, #f08800); box-shadow: 0 3px 10px rgba(255, 149, 0, 0.45); transform: translateY(-1px); }
+    .folder-nav { display: flex; flex-direction: column; gap: 3px; }
+    .folder {
+        display: flex; align-items: center; gap: 10px;
+        height: 36px; padding: 0 10px; border-radius: 7px;
+        color: var(--text-2); font-size: 13.5px; position: relative;
+    }
+    .folder:hover { background: #eef1f6; color: var(--text); }
+    .folder.active { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
+    .folder.active::before {
+        content: ""; position: absolute; left: -12px; top: 9px; bottom: 9px;
+        width: 3px; border-radius: 2px; background: var(--primary);
+    }
+    .folder .badge {
+        margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px;
+        border-radius: 10px; background: #ff4d4f; color: #fff;
+        font-size: 11px; line-height: 20px; text-align: center; font-weight: 600;
+    }
+    .folder .count { margin-left: auto; color: var(--text-3); font-size: 12px; }
+    .sidebar-footer { margin-top: auto; border-top: 1px solid var(--border-light); padding-top: 12px; display: flex; flex-direction: column; gap: 3px; }
+
+    /* ---------- 主内容区 ---------- */
+    .mail-main { flex: 1; min-width: 0; background: #fff; display: flex; flex-direction: column; }
+
+    /* ---------- 列表工具条 ---------- */
+    .list-toolbar {
+        display: flex; align-items: center; gap: 10px;
+        padding: 10px 18px; border-bottom: 1px solid var(--border-light); background: #fff;
+    }
+    .tb-btn {
+        display: inline-flex; align-items: center; gap: 6px;
+        height: 30px; padding: 0 11px; border: 1px solid var(--border); border-radius: 6px;
+        background: #fff; color: var(--text-2); font-size: 13px; cursor: pointer;
+    }
+    .tb-btn:hover { color: var(--primary); border-color: var(--primary); }
+    .tb-btn.danger:hover { color: var(--danger); border-color: var(--danger); }
+    .check-all { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); cursor: pointer; user-select: none; }
+    .toolbar-spacer { flex: 1; }
+    .page-info { font-size: 13px; color: var(--text-3); }
+
+    /* ---------- 邮件列表 ---------- */
+    .mail-list { flex: 1; overflow-y: auto; }
+    .mail-row {
+        display: flex; align-items: center; gap: 10px;
+        padding: 0 18px; height: 54px; border-bottom: 1px solid var(--border-light);
+        cursor: pointer; transition: background 0.08s;
+        background: #fff;
+    }
+    .mail-row:not(.unread) { background: #fbfcfe; }
+    .mail-row:hover { background: #f2f6ff; }
+    .mail-row.selected { background: var(--primary-soft); }
+    .cell-check { display: flex; align-items: center; }
+    .cell-avatar { flex: 0 0 auto; }
+    .cell-from {
+        width: 150px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+        font-size: 13.5px; color: var(--text-2);
+    }
+    .mail-row.unread .cell-from { color: var(--text); font-weight: 600; }
+    .cell-subject-wrap { display: flex; align-items: center; gap: 7px; flex: 0 1 36%; min-width: 150px; }
+    .unread-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); flex-shrink: 0; }
+    .cell-subject {
+        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+        font-size: 13.5px; color: var(--text-2);
+    }
+    .mail-row.unread .cell-subject { color: var(--text); font-weight: 600; }
+    .cell-snippet {
+        flex: 1; min-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+        font-size: 12.5px; color: var(--text-3);
+    }
+    .cell-date {
+        width: 78px; flex-shrink: 0; text-align: right;
+        font-size: 12.5px; color: var(--text-3);
+    }
+    .mail-row.unread .cell-date { color: var(--text-2); }
+    .row-del { opacity: 0; transition: opacity 0.12s; }
+    .mail-row:hover .row-del { opacity: 1; }
+    .empty-tip { padding: 90px 0; text-align: center; color: var(--text-3); font-size: 14px; }
+    .empty-tip .empty-icon { font-size: 46px; display: block; margin-bottom: 14px; opacity: 0.5; }
+
+    /* ---------- 列表底部分页 ---------- */
+    .list-footer {
+        display: flex; align-items: center; gap: 12px;
+        padding: 10px 18px; border-top: 1px solid var(--border-light);
+        font-size: 13px; color: var(--text-3); background: #fff;
+    }
+    .pager { margin-left: auto; display: flex; align-items: center; gap: 6px; }
+    .page-btn {
+        height: 28px; padding: 0 11px; border: 1px solid var(--border); border-radius: 6px;
+        background: #fff; color: var(--text-2); font-size: 13px;
+        display: inline-flex; align-items: center; gap: 4px;
+    }
+    .page-btn:hover:not(.disabled) { color: var(--primary); border-color: var(--primary); }
+    .page-btn.disabled { opacity: 0.45; cursor: not-allowed; }
+    .page-num { font-size: 13px; }
+
+    /* ---------- 邮件阅读页 ---------- */
+    .view-toolbar { display: flex; align-items: center; gap: 10px; padding: 10px 18px; border-bottom: 1px solid var(--border-light); }
+    .mail-head { padding: 22px 28px 0; }
+    .mail-title { font-size: 20px; font-weight: 600; line-height: 1.45; word-break: break-word; }
+    .mail-from-row { display: flex; align-items: center; gap: 12px; margin: 16px 0 18px; }
+    .mail-from-name { font-size: 14.5px; font-weight: 600; }
+    .mail-from-addr { color: var(--text-3); font-size: 12.5px; }
+    .mail-date { color: var(--text-3); font-size: 12.5px; margin-left: auto; }
+    .mail-body-wrap { padding: 22px 28px; flex: 1; overflow: auto; }
+    .mail-body { line-height: 1.7; font-size: 14.5px; }
+    .mail-body pre { white-space: pre-wrap; font-family: inherit; }
+    .mail-body-iframe {
+        width: 100%; min-height: 340px; border: 1px solid var(--border-light);
+        border-radius: 8px; background: #fff;
+    }
+    .attachment-list { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border-light); }
+    .attachment-item {
+        display: inline-flex; align-items: center; gap: 7px;
+        margin: 0 12px 10px 0; padding: 7px 13px;
+        background: #f2f3f5; border-radius: 7px; font-size: 13px; color: var(--text);
+    }
+    .attachment-item a { color: var(--text); }
+    .attachment-item a:hover { color: var(--primary); }
+    .view-actions { display: flex; align-items: center; gap: 10px; padding: 18px 28px 24px; }
+
+    /* ---------- 写信页 ---------- */
+    .compose-toolbar { display: flex; align-items: center; gap: 10px; padding: 10px 18px; border-bottom: 1px solid var(--border-light); }
+    .compose-form { flex: 1; display: flex; flex-direction: column; min-height: 0; }
+    .compose-field { display: flex; align-items: center; gap: 12px; padding: 9px 22px; border-bottom: 1px solid var(--border-light); }
+    .compose-field label { width: 54px; color: var(--text-2); font-size: 13.5px; flex-shrink: 0; }
+    .compose-field input { border: none; outline: none; flex: 1; font-size: 14px; color: var(--text); background: transparent; }
+    .editor-wrap { flex: 1; display: flex; flex-direction: column; min-height: 0; }
+    .editor-wrap .ql-toolbar { border-left: none; border-right: none; border-top: none; }
+    .editor-wrap .ql-container { border: none; flex: 1; font-size: 14.5px; }
+    #editor { height: 100%; }
+    .attach-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 22px; border-bottom: 1px solid var(--border-light); }
+    .attach-chip {
+        display: inline-flex; align-items: center; gap: 7px;
+        padding: 5px 11px; background: #f2f3f5; border-radius: 15px;
+        font-size: 12.5px; color: var(--text-2);
+    }
+    .attach-chip .chip-del { cursor: pointer; color: var(--text-3); border: none; background: none; font-size: 13px; line-height: 1; }
+    .attach-chip .chip-del:hover { color: var(--danger); }
+    .compose-footer {
+        display: flex; align-items: center; gap: 14px;
+        padding: 12px 22px; border-top: 1px solid var(--border-light);
+        font-size: 12.5px; color: var(--text-3); background: #fafbfc;
+    }
+    .quota-bar { width: 200px; height: 6px; background: #eceef1; border-radius: 3px; overflow: hidden; }
+    .quota-bar i { display: block; height: 100%; background: linear-gradient(90deg, #4aa3ff, var(--primary)); border-radius: 3px; }
+    .quota-bar.warn i { background: linear-gradient(90deg, #ffc53d, var(--orange)); }
+    .quota-bar.over i { background: var(--danger); }
+
+    /* ---------- 登录页 ---------- */
+    .login-page {
+        min-height: 100vh; display: flex; align-items: center; justify-content: center;
+        background: linear-gradient(165deg, #eaf2ff 0%, #f6f8fc 55%, #f0f6ff 100%);
+    }
+    .login-card {
+        width: 400px; max-width: calc(100vw - 32px);
+        background: #fff; border-radius: 14px;
+        box-shadow: 0 10px 40px rgba(22, 119, 255, 0.10);
+        padding: 42px 38px 36px;
+    }
+    .login-logo { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 8px; }
+    .login-title { text-align: center; font-size: 21px; font-weight: 700; color: var(--text); margin-bottom: 26px; }
+    .login-sub { text-align: center; color: var(--text-3); font-size: 13px; margin-bottom: 26px; }
+    .divider { display: flex; align-items: center; gap: 10px; color: var(--text-3); font-size: 12.5px; margin: 18px 0; }
+    .divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--border-light); }
+
+    /* ---------- 通用组件（兼容管理后台） ---------- */
+    .container { max-width: 1400px; margin: 20px auto; padding: 0 20px; }
+    .card {
+        background: #fff; border: 1px solid var(--border-light); border-radius: var(--radius);
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); padding: 20px; margin-bottom: 16px;
+    }
+    .btn {
+        display: inline-block; padding: 8px 16px; border-radius: 6px; border: 1px solid transparent;
+        text-decoration: none; font-size: 14px; cursor: pointer; text-align: center;
+        background: #f2f3f5; color: var(--text); line-height: 1.4;
+    }
+    .btn-primary { background: var(--primary); color: #fff; }
+    .btn-primary:hover { background: var(--primary-hover); }
+    .btn-danger { background: var(--danger); color: #fff; }
+    .btn-danger:hover { background: #d23b47; }
+    .btn-sm { padding: 4px 10px; font-size: 12px; border-radius: 5px; }
+    .alert { padding: 12px 16px; border-radius: 7px; margin-bottom: 16px; font-size: 13.5px; }
+    .alert-error { background: var(--danger-soft); color: #c0392b; }
+    .alert-success { background: var(--success-soft); color: #2e9e4f; }
+    .form-group { margin-bottom: 16px; }
+    .form-group label { display: block; margin-bottom: 7px; font-weight: 600; font-size: 13.5px; }
+    .form-group input, .form-group textarea, .form-group select {
+        width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px;
+        font-size: 14px; outline: none; background: #fff; color: var(--text);
+    }
+    .form-group input:focus, .form-group textarea:focus, .form-group select:focus {
+        border-color: var(--primary); box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.12);
+    }
+    .form-group input[type="checkbox"] { width: auto; }
+    table { width: 100%; border-collapse: collapse; }
+    th, td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border-light); font-size: 13.5px; }
+    th { background: #f8f9fb; font-weight: 600; color: var(--text-2); }
+    tbody tr:hover td { background: #fafbfc; }
+    .unread { font-weight: bold; }
+    .message-subject { color: var(--text); }
+    .message-subject:hover { color: var(--primary); }
+    .mail-meta { color: var(--text-2); font-size: 13px; margin-bottom: 10px; line-height: 1.9; }
+    .pagination { margin-top: 16px; text-align: center; }
+    .pagination a, .pagination span {
+        display: inline-block; padding: 6px 12px; margin: 0 2px;
+        border: 1px solid var(--border); border-radius: 6px; text-decoration: none;
+        color: var(--text-2); font-size: 13px;
+    }
+    .pagination .current { background: var(--primary); color: #fff; border-color: var(--primary); }
+    .badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: bold; }
+    .badge-unread { background: #ff4d4f; color: #fff; }
+    .stat-card {
+        display: inline-block; width: 200px; padding: 20px; margin: 0 20px 16px 0;
+        background: #fff; border: 1px solid var(--border-light); border-radius: var(--radius);
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); text-align: center;
+    }
+    .stat-card h3 { font-size: 30px; color: var(--primary); margin-bottom: 4px; }
+    .stat-card p { color: var(--text-2); font-size: 13.5px; }
+    .dns-record {
+        background: #f8f9fb; padding: 12px 16px; border-radius: 6px; margin-bottom: 12px;
+        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+        font-size: 12.5px; white-space: pre-wrap;
+    }
+    .clearfix::after { content: ""; display: table; clear: both; }
+    /* 管理后台左侧导航兼容 */
+    .sidebar { width: 200px; float: left; background: #fff; border: 1px solid var(--border-light); border-radius: var(--radius); padding: 8px; }
+    .sidebar a { display: block; padding: 9px 14px; color: var(--text-2); text-decoration: none; border-radius: 6px; margin-bottom: 2px; font-size: 13.5px; }
+    .sidebar a:hover, .sidebar a.active { background: var(--primary-soft); color: var(--primary); }
+    .content { margin-left: 220px; }
 </style>
 {{end}}
 
 {{define "navbar"}}
 {{if .currentUser}}
-<nav class="navbar">
-    <a href="/inbox">MailGo</a>
-    {{if .currentUser.IsAdmin}}<a href="/admin">管理后台</a>{{end}}
-    <div class="right">
-        <span style="color:#ecf0f1;font-size:13px;">{{.currentUser.Username}}@{{.currentUser.Domain.Name}}</span>
-        <form method="POST" action="/logout" style="display:inline;">
-            <a href="#" onclick="this.parentElement.submit(); return false;">退出</a>
+<header class="topbar">
+    <div class="topbar-left">
+        <a class="logo" href="/inbox">
+            <span class="logo-icon">✉</span>
+            <span class="logo-text">MailGo<em>邮箱</em></span>
+        </a>
+    </div>
+    <div class="topbar-search">
+        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
+        <input id="mail-search" type="text" placeholder="搜索邮件（发件人 / 主题）" autocomplete="off">
+    </div>
+    <div class="topbar-right">
+        {{if .currentUser.IsAdmin}}<a class="topbar-link" href="/admin">管理后台</a>{{end}}
+        <a class="topbar-link" href="/settings">设置</a>
+        <span class="user-chip">
+            <span class="avatar avatar-sm" style="{{avatarStyle .currentUser.Username}}">{{initial .currentUser.Username}}</span>
+            <span class="user-email" title="{{.currentUser.Username}}@{{.currentUser.Domain.Name}}">{{.currentUser.Username}}@{{.currentUser.Domain.Name}}</span>
+        </span>
+        <form method="POST" action="/logout" class="logout-form">
+            <button type="submit" class="icon-btn" title="退出登录">
+                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
+            </button>
         </form>
     </div>
-</nav>
+</header>
 {{end}}
 {{end}}
+
+{{define "sidebar"}}
+<aside class="mail-sidebar">
+    <a href="/compose" class="compose-btn">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
+        写信
+    </a>
+    <nav class="folder-nav">
+        <a class="folder {{if eq .activeFolder `inbox`}}active{{end}}" href="/inbox">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12"/><path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/></svg>
+            收件箱
+            {{if .inboxUnread}}<span class="badge">{{.inboxUnread}}</span>{{end}}
+        </a>
+        <a class="folder {{if eq .activeFolder `drafts`}}active{{end}}" href="/drafts">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
+            草稿箱
+            {{if .draftsTotal}}<span class="count">{{.draftsTotal}}</span>{{end}}
+        </a>
+        <a class="folder {{if eq .activeFolder `sent`}}active{{end}}" href="/sent">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
+            已发送
+            {{if .sentTotal}}<span class="count">{{.sentTotal}}</span>{{end}}
+        </a>
+    </nav>
+    <div class="sidebar-footer">
+        {{if .currentUser.IsAdmin}}
+        <a class="folder" href="/admin">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
+            管理后台
+        </a>
+        {{end}}
+    </div>
+</aside>
+{{end}}
diff --git a/internal/web/templates/compose.html b/internal/web/templates/compose.html
index 30c12cd..10ce25a 100644
--- a/internal/web/templates/compose.html
+++ b/internal/web/templates/compose.html
@@ -4,63 +4,67 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>撰写邮件 - MailGo</title>
+    <title>写信 - MailGo</title>
     <link href="https://cdn.quilljs.com/1.3.7/quill.snow.css" rel="stylesheet">
     {{template "styles" .}}
 </head>
-<body>
+<body class="page-compose">
     {{template "navbar" .}}
-    <div class="container">
-        <div class="clearfix">
-            <div class="sidebar">
-                <a href="/inbox" class="{{if eq .activeFolder `inbox`}}active{{end}}">收件箱</a>
-                <a href="/drafts" class="{{if eq .activeFolder `drafts`}}active{{end}}">草稿箱</a>
-                <a href="/sent" class="{{if eq .activeFolder `sent`}}active{{end}}">发件箱</a>
-                <a href="/compose" class="{{if eq .activeFolder `compose`}}active{{end}}">撰写邮件</a>
-                <a href="/settings" class="{{if eq .activeFolder `settings`}}active{{end}}">设置</a>
+    <div class="app-body">
+        {{template "sidebar" .}}
+        <main class="mail-main">
+            <div class="compose-toolbar">
+                <button type="submit" form="compose-form" class="btn btn-primary">
+                    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px;margin-right:4px;"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
+                    发送
+                </button>
+                <label class="tb-btn" style="cursor:pointer;">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>
+                    附件
+                    <input type="file" name="attachments" id="attach-input" multiple style="display:none;">
+                </label>
+                <a href="/inbox" class="tb-btn">取消</a>
+                <div class="toolbar-spacer"></div>
+                <span class="page-info">撰写新邮件</span>
             </div>
-            <div class="content">
-                <div class="card">
-                    <h2 style="margin-bottom:16px;">撰写邮件</h2>
-                    {{if .error}}<div class="alert alert-error">{{.error}}</div>{{end}}
-                    <form method="POST" action="/compose" enctype="multipart/form-data">
-                        <div class="form-group">
-                            <label>收件人</label>
-                            <input type="email" name="to" required value="{{.to}}" placeholder="user@example.com">
-                        </div>
-                        <div class="form-group">
-                            <label>抄送（可选）</label>
-                            <input type="text" name="cc" value="{{.cc}}" placeholder="cc@example.com">
-                        </div>
-                        <div class="form-group">
-                            <label>主题</label>
-                            <input type="text" name="subject" value="{{.subject}}" placeholder="邮件主题">
-                        </div>
-                        <div class="form-group">
-                            <label>正文</label>
-                            <div id="editor" style="height:300px;"></div>
-                            <input type="hidden" name="body" id="body-hidden">
-                            <input type="hidden" name="html_body" id="html-body-hidden">
-                        </div>
-                        <div class="form-group">
-                            <label>附件</label>
-                            <input type="file" name="attachments" multiple>
-                        </div>
-                        <div class="form-group" style="color:#7f8c8d;font-size:12px;">
-                            配额: {{formatBytes .usedBytes}} / {{formatBytes .quotaBytes}}
-                        </div>
-                        <button type="submit" class="btn btn-primary">发送邮件</button>
-                        <a href="/inbox" class="btn" style="margin-left:8px;">取消</a>
-                    </form>
+
+            {{if .error}}<div class="alert alert-error" style="margin:12px 18px 0;">{{.error}}</div>{{end}}
+
+            <form id="compose-form" class="compose-form" method="POST" action="/compose" enctype="multipart/form-data">
+                <div class="compose-field">
+                    <label>收件人</label>
+                    <input type="email" name="to" required value="{{.to}}" placeholder="输入收件人邮箱地址">
                 </div>
-            </div>
-        </div>
+                <div class="compose-field">
+                    <label>抄送</label>
+                    <input type="text" name="cc" value="{{.cc}}" placeholder="多个地址用逗号分隔（可选）">
+                </div>
+                <div class="compose-field">
+                    <label>主题</label>
+                    <input type="text" name="subject" value="{{.subject}}" placeholder="输入邮件主题">
+                </div>
+
+                <div id="attach-chips" class="attach-chips" style="{{if not .attachments}}display:none;{{end}}"></div>
+
+                <div class="editor-wrap">
+                    <div id="editor" data-placeholder="请输入邮件内容..."></div>
+                    <input type="hidden" name="body" id="body-hidden">
+                    <input type="hidden" name="html_body" id="html-body-hidden">
+                </div>
+
+                <div class="compose-footer">
+                    <span>附件配额</span>
+                    <span class="quota-bar" id="quota-bar" data-used="{{.usedBytes}}" data-quota="{{.quotaBytes}}"><i></i></span>
+                    <span id="quota-text">{{formatBytes .usedBytes}} / {{formatBytes .quotaBytes}}</span>
+                </div>
+            </form>
+        </main>
     </div>
     <script src="https://cdn.quilljs.com/1.3.7/quill.min.js"></script>
     <script>
     var quill = new Quill('#editor', {
         theme: 'snow',
-        placeholder: '请输入邮件内容...',
+        placeholder: document.getElementById('editor').dataset.placeholder || '请输入邮件内容...',
         modules: {
             toolbar: [
                 [{ 'header': [1, 2, 3, false] }],
@@ -72,13 +76,54 @@
             ]
         }
     });
-    document.querySelector('form').addEventListener('submit', function() {
-        document.getElementById('body-hidden').value = quill.getText();
-        document.getElementById('html-body-hidden').value = quill.root.innerHTML;
-    });
     {{if .bodyContent}}
     quill.root.innerHTML = {{.bodyContent | safeJS}};
     {{end}}
+
+    document.getElementById('compose-form').addEventListener('submit', function () {
+        document.getElementById('body-hidden').value = quill.getText();
+        document.getElementById('html-body-hidden').value = quill.root.innerHTML;
+    });
+
+    // 附件选择预览
+    var attachInput = document.getElementById('attach-input');
+    var chipsBox = document.getElementById('attach-chips');
+    var files = [];
+    function renderChips() {
+        chipsBox.innerHTML = '';
+        chipsBox.style.display = files.length ? 'flex' : 'none';
+        files.forEach(function (f, i) {
+            var chip = document.createElement('span');
+            chip.className = 'attach-chip';
+            chip.innerHTML = '📎 ' + f.name + ' (' + (f.size / 1024).toFixed(1) + ' KB)' +
+                '<button type="button" class="chip-del" data-i="' + i + '" title="移除">✕</button>';
+            chipsBox.appendChild(chip);
+        });
+    }
+    attachInput.addEventListener('change', function () {
+        files = Array.prototype.slice.call(attachInput.files);
+        renderChips();
+    });
+    chipsBox.addEventListener('click', function (e) {
+        var del = e.target.closest('.chip-del');
+        if (!del) return;
+        files.splice(parseInt(del.dataset.i, 10), 1);
+        var dt = new DataTransfer();
+        files.forEach(function (f) { dt.items.add(f); });
+        attachInput.files = dt.files;
+        renderChips();
+    });
+
+    // 配额进度条
+    var bar = document.getElementById('quota-bar');
+    if (bar) {
+        var used = parseInt(bar.dataset.used, 10) || 0;
+        var quota = parseInt(bar.dataset.quota, 10) || 1;
+        var pct = Math.min(100, Math.round(used / quota * 100));
+        bar.querySelector('i').style.width = pct + '%';
+        if (pct >= 90) bar.classList.add('warn');
+        if (pct >= 100) bar.classList.add('over');
+    }
     </script>
 </body>
 </html>
diff --git a/internal/web/templates/drafts.html b/internal/web/templates/drafts.html
index 4737a47..8c1c9b3 100644
--- a/internal/web/templates/drafts.html
+++ b/internal/web/templates/drafts.html
@@ -7,68 +7,148 @@
     <title>草稿箱 - MailGo</title>
     {{template "styles" .}}
 </head>
-<body>
+<body class="page-list">
     {{template "navbar" .}}
-    <div class="container">
-        <div class="clearfix">
-            <div class="sidebar">
-                <a href="/inbox" class="{{if eq .activeFolder `inbox`}}active{{end}}">收件箱</a>
-                <a href="/drafts" class="{{if eq .activeFolder `drafts`}}active{{end}}">草稿箱</a>
-                <a href="/sent" class="{{if eq .activeFolder `sent`}}active{{end}}">发件箱</a>
-                <a href="/compose" class="{{if eq .activeFolder `compose`}}active{{end}}">撰写邮件</a>
-                <a href="/settings" class="{{if eq .activeFolder `settings`}}active{{end}}">设置</a>
+    <div class="app-body">
+        {{template "sidebar" .}}
+        <main class="mail-main">
+            <div class="list-toolbar">
+                <label class="check-all" title="全选/取消全选">
+                    <input type="checkbox" id="select-all">
+                    全选
+                </label>
+                <button type="button" class="tb-btn" id="btn-refresh" title="刷新">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg>
+                    刷新
+                </button>
+                <button type="button" class="tb-btn danger" id="btn-delete" disabled>
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
+                    删除
+                </button>
+                <div class="toolbar-spacer"></div>
+                <span class="page-info">共 {{.total}} 封</span>
             </div>
-            <div class="content">
-                <div class="card">
-                    <h2 style="margin-bottom:16px;">草稿箱</h2>
-                    {{if not .messages}}
-                    <p style="color:#7f8c8d;text-align:center;padding:40px 0;">暂无草稿邮件</p>
-                    {{else}}
-                    <table>
-                        <thead>
-                            <tr>
-                                <th style="width:25%;">发件人/收件人</th>
-                                <th style="width:45%;">主题</th>
-                                <th style="width:20%;">时间</th>
-                                <th style="width:10%;">操作</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                        {{range .messages}}
-                            <tr>
-                                <td>{{.ToAddr}}</td>
-                                <td>
-                                    <a href="/drafts/{{.ID}}" class="message-subject">
-                                        {{if .Subject}}{{.Subject}}{{else}}(无主题){{end}}
-                                    </a>
-                                </td>
-                                <td>{{.Date.Format "2006-01-02 15:04"}}</td>
-                                <td>
-                                    <form method="POST" action="/mail/delete/{{.ID}}" style="display:inline;"
-                                          onsubmit="return confirm('确定要删除这封邮件吗？');">
-                                        <button type="submit" class="btn btn-danger btn-sm">删除</button>
-                                    </form>
-                                </td>
-                            </tr>
-                        {{end}}
-                        </tbody>
-                    </table>
-                    {{end}}
-                </div>
-                {{if .totalPages}}
-                <div class="pagination">
-                    {{if gt .page 1}}
-                    <a href="/drafts?page={{sub .page 1}}">上一页</a>
-                    {{end}}
-                    <span>第 {{.page}} / {{.totalPages}} 页</span>
-                    {{if lt .page .totalPages}}
-                    <a href="/drafts?page={{add .page 1}}">下一页</a>
-                    {{end}}
-                </div>
+
+            {{if not .messages}}
+            <div class="mail-list">
+                <div class="empty-tip"><span class="empty-icon">📝</span>草稿箱暂无邮件</div>
+            </div>
+            {{else}}
+            <ul class="mail-list">
+                {{range .messages}}
+                <li class="mail-row" data-id="{{.ID}}">
+                    <label class="cell-check" onclick="event.stopPropagation()">
+                        <input type="checkbox" class="row-check" data-id="{{.ID}}">
+                    </label>
+                    <span class="cell-avatar">
+                        <span class="avatar" style="{{avatarStyle .ToAddr}}">{{initial (mailName .ToAddr)}}</span>
+                    </span>
+                    <span class="cell-from" title="收件人：{{.ToAddr}}">致：{{mailName .ToAddr}}</span>
+                    <span class="cell-subject-wrap">
+                        <a class="cell-subject" href="/drafts/{{.ID}}">
+                            {{if .Subject}}{{.Subject}}{{else}}(无主题){{end}}
+                        </a>
+                    </span>
+                    <span class="cell-snippet">
+                        {{if .TextBody}}{{truncate .TextBody 80}}{{else if .HtmlBody}}[HTML 邮件]{{end}}
+                    </span>
+                    <span class="cell-date">{{shortDate .Date}}</span>
+                    <form method="POST" action="/mail/delete/{{.ID}}" class="row-del"
+                          onsubmit="return confirm('确定要删除这封草稿吗？');">
+                        <button type="submit" class="icon-btn" title="删除">
+                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
+                        </button>
+                    </form>
+                </li>
                 {{end}}
+            </ul>
+            {{end}}
+
+            <div class="list-footer">
+                <span class="page-num">第 {{.page}} / {{if .totalPages}}{{.totalPages}}{{else}}1{{end}} 页</span>
+                <div class="pager">
+                    {{if gt .page 1}}
+                    <a class="page-btn" href="/drafts?page={{sub .page 1}}">
+                        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
+                        上一页
+                    </a>
+                    {{else}}
+                    <span class="page-btn disabled">上一页</span>
+                    {{end}}
+                    {{if lt .page .totalPages}}
+                    <a class="page-btn" href="/drafts?page={{add .page 1}}">
+                        下一页
+                        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
+                    </a>
+                    {{else}}
+                    <span class="page-btn disabled">下一页</span>
+                    {{end}}
+                </div>
             </div>
-        </div>
+        </main>
     </div>
+    <script>
+    (function () {
+        var searchInput = document.getElementById('mail-search');
+        var rows = Array.prototype.slice.call(document.querySelectorAll('.mail-row'));
+        var selectAll = document.getElementById('select-all');
+        var btnDelete = document.getElementById('btn-delete');
+
+        rows.forEach(function (row) {
+            row.addEventListener('click', function (e) {
+                if (e.target.closest('.cell-check') || e.target.closest('.row-del')) return;
+                window.location.href = row.querySelector('.cell-subject').getAttribute('href');
+            });
+        });
+
+        selectAll && selectAll.addEventListener('change', function () {
+            rows.forEach(function (row) {
+                var cb = row.querySelector('.row-check');
+                cb.checked = selectAll.checked;
+                row.classList.toggle('selected', cb.checked);
+            });
+            updateDeleteState();
+        });
+        rows.forEach(function (row) {
+            var cb = row.querySelector('.row-check');
+            cb.addEventListener('change', function () {
+                row.classList.toggle('selected', cb.checked);
+                if (!cb.checked && selectAll) selectAll.checked = false;
+                updateDeleteState();
+            });
+        });
+
+        function updateDeleteState() {
+            if (!btnDelete) return;
+            var n = rows.filter(function (r) { return r.querySelector('.row-check').checked; }).length;
+            btnDelete.disabled = n === 0;
+        }
+
+        btnDelete && btnDelete.addEventListener('click', function () {
+            var ids = rows.filter(function (r) { return r.querySelector('.row-check').checked; })
+                          .map(function (r) { return r.dataset.id; });
+            if (!ids.length) return;
+            if (!confirm('确定要删除选中的 ' + ids.length + ' 封邮件吗？')) return;
+            var done = 0;
+            ids.forEach(function (id) {
+                fetch('/mail/delete/' + id, { method: 'POST', body: new FormData() })
+                    .then(function () { if (++done === ids.length) window.location.reload(); })
+                    .catch(function () { if (++done === ids.length) window.location.reload(); });
+            });
+        });
+
+        var btnRefresh = document.getElementById('btn-refresh');
+        btnRefresh && btnRefresh.addEventListener('click', function () { window.location.reload(); });
+
+        searchInput && searchInput.addEventListener('input', function () {
+            var q = searchInput.value.trim().toLowerCase();
+            rows.forEach(function (row) {
+                var text = row.textContent.toLowerCase();
+                row.style.display = (!q || text.indexOf(q) !== -1) ? '' : 'none';
+            });
+        });
+    })();
+    </script>
 </body>
 </html>
 {{end}}
diff --git a/internal/web/templates/inbox.html b/internal/web/templates/inbox.html
index 0d83ef0..a05c908 100644
--- a/internal/web/templates/inbox.html
+++ b/internal/web/templates/inbox.html
@@ -7,69 +7,150 @@
     <title>收件箱 - MailGo</title>
     {{template "styles" .}}
 </head>
-<body>
+<body class="page-list">
     {{template "navbar" .}}
-    <div class="container">
-        <div class="clearfix">
-            <div class="sidebar">
-                <a href="/inbox" class="{{if eq .activeFolder `inbox`}}active{{end}}">收件箱</a>
-                <a href="/drafts" class="{{if eq .activeFolder `drafts`}}active{{end}}">草稿箱</a>
-                <a href="/sent" class="{{if eq .activeFolder `sent`}}active{{end}}">发件箱</a>
-                <a href="/compose" class="{{if eq .activeFolder `compose`}}active{{end}}">撰写邮件</a>
-                <a href="/settings" class="{{if eq .activeFolder `settings`}}active{{end}}">设置</a>
+    <div class="app-body">
+        {{template "sidebar" .}}
+        <main class="mail-main">
+            <div class="list-toolbar">
+                <label class="check-all" title="全选/取消全选">
+                    <input type="checkbox" id="select-all">
+                    全选
+                </label>
+                <button type="button" class="tb-btn" id="btn-refresh" title="刷新">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg>
+                    刷新
+                </button>
+                <button type="button" class="tb-btn danger" id="btn-delete" disabled>
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
+                    删除
+                </button>
+                <div class="toolbar-spacer"></div>
+                <span class="page-info">共 {{.total}} 封</span>
             </div>
-            <div class="content">
-                <div class="card">
-                    <h2 style="margin-bottom:16px;">收件箱</h2>
-                    {{if not .messages}}
-                    <p style="color:#7f8c8d;text-align:center;padding:40px 0;">暂无邮件</p>
-                    {{else}}
-                    <table>
-                        <thead>
-                            <tr>
-                                <th style="width:25%;">发件人</th>
-                                <th style="width:45%;">主题</th>
-                                <th style="width:20%;">时间</th>
-                                <th style="width:10%;">操作</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                        {{range .messages}}
-                            <tr class="{{if not .IsRead}}unread{{end}}">
-                                <td>{{decodeHeader .FromAddr}}</td>
-                                <td>
-                                    <a href="/inbox/{{.ID}}" class="message-subject">
-                                        {{if .Subject}}{{.Subject}}{{else}}(无主题){{end}}
-                                    </a>
-                                </td>
-                                <td>{{.Date.Format "2006-01-02 15:04"}}</td>
-                                <td>
-                                    {{if not .IsRead}}
-                                    <form method="POST" action="/mail/read/{{.ID}}" style="display:inline;">
-                                        <button type="submit" class="btn btn-primary btn-sm">已读</button>
-                                    </form>
-                                    {{end}}
-                                </td>
-                            </tr>
-                        {{end}}
-                        </tbody>
-                    </table>
-                    {{end}}
-                </div>
-                {{if .totalPages}}
-                <div class="pagination">
-                    {{if gt .page 1}}
-                    <a href="/inbox?page={{sub .page 1}}">上一页</a>
-                    {{end}}
-                    <span>第 {{.page}} / {{.totalPages}} 页</span>
-                    {{if lt .page .totalPages}}
-                    <a href="/inbox?page={{add .page 1}}">下一页</a>
-                    {{end}}
-                </div>
+
+            {{if not .messages}}
+            <div class="mail-list">
+                <div class="empty-tip"><span class="empty-icon">📭</span>收件箱暂无邮件</div>
+            </div>
+            {{else}}
+            <ul class="mail-list">
+                {{range .messages}}
+                <li class="mail-row {{if not .IsRead}}unread{{end}}" data-id="{{.ID}}">
+                    <label class="cell-check" onclick="event.stopPropagation()">
+                        <input type="checkbox" class="row-check" data-id="{{.ID}}">
+                    </label>
+                    <span class="cell-avatar">
+                        <span class="avatar" style="{{avatarStyle .FromAddr}}">{{initial (mailName (decodeHeader .FromAddr))}}</span>
+                    </span>
+                    <span class="cell-from" title="{{decodeHeader .FromAddr}}">{{mailName (decodeHeader .FromAddr)}}</span>
+                    <span class="cell-subject-wrap">
+                        {{if not .IsRead}}<span class="unread-dot"></span>{{end}}
+                        <a class="cell-subject" href="/inbox/{{.ID}}">
+                            {{if .Subject}}{{.Subject}}{{else}}(无主题){{end}}
+                        </a>
+                    </span>
+                    <span class="cell-snippet">
+                        {{if .TextBody}}{{truncate .TextBody 80}}{{else if .HtmlBody}}[HTML 邮件]{{end}}
+                    </span>
+                    <span class="cell-date">{{shortDate .Date}}</span>
+                </li>
                 {{end}}
+            </ul>
+            {{end}}
+
+            <div class="list-footer">
+                <span class="page-num">第 {{.page}} / {{if .totalPages}}{{.totalPages}}{{else}}1{{end}} 页</span>
+                <div class="pager">
+                    {{if gt .page 1}}
+                    <a class="page-btn" href="/inbox?page={{sub .page 1}}">
+                        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
+                        上一页
+                    </a>
+                    {{else}}
+                    <span class="page-btn disabled">上一页</span>
+                    {{end}}
+                    {{if lt .page .totalPages}}
+                    <a class="page-btn" href="/inbox?page={{add .page 1}}">
+                        下一页
+                        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
+                    </a>
+                    {{else}}
+                    <span class="page-btn disabled">下一页</span>
+                    {{end}}
+                </div>
             </div>
-        </div>
+        </main>
     </div>
+    <script>
+    (function () {
+        var searchInput = document.getElementById('mail-search');
+        var rows = Array.prototype.slice.call(document.querySelectorAll('.mail-row'));
+        var selectAll = document.getElementById('select-all');
+        var btnDelete = document.getElementById('btn-delete');
+
+        // 行点击跳转（复选框除外）
+        rows.forEach(function (row) {
+            row.addEventListener('click', function (e) {
+                if (e.target.closest('.cell-check')) return;
+                window.location.href = row.querySelector('.cell-subject').getAttribute('href');
+            });
+        });
+
+        // 全选
+        selectAll && selectAll.addEventListener('change', function () {
+            rows.forEach(function (row) {
+                var cb = row.querySelector('.row-check');
+                cb.checked = selectAll.checked;
+                row.classList.toggle('selected', cb.checked);
+            });
+            updateDeleteState();
+        });
+        rows.forEach(function (row) {
+            var cb = row.querySelector('.row-check');
+            cb.addEventListener('change', function () {
+                row.classList.toggle('selected', cb.checked);
+                if (!cb.checked && selectAll) selectAll.checked = false;
+                updateDeleteState();
+            });
+        });
+
+        function updateDeleteState() {
+            if (!btnDelete) return;
+            var n = rows.filter(function (r) { return r.querySelector('.row-check').checked; }).length;
+            btnDelete.disabled = n === 0;
+        }
+
+        // 批量删除
+        btnDelete && btnDelete.addEventListener('click', function () {
+            var ids = rows.filter(function (r) { return r.querySelector('.row-check').checked; })
+                          .map(function (r) { return r.dataset.id; });
+            if (!ids.length) return;
+            if (!confirm('确定要删除选中的 ' + ids.length + ' 封邮件吗？')) return;
+            var done = 0;
+            ids.forEach(function (id) {
+                var fd = new FormData();
+                fd.append('_method', 'DELETE');
+                fetch('/mail/delete/' + id, { method: 'POST', body: fd })
+                    .then(function () { if (++done === ids.length) window.location.reload(); })
+                    .catch(function () { if (++done === ids.length) window.location.reload(); });
+            });
+        });
+
+        // 刷新
+        var btnRefresh = document.getElementById('btn-refresh');
+        btnRefresh && btnRefresh.addEventListener('click', function () { window.location.reload(); });
+
+        // 搜索过滤（发件人 / 主题 / 摘要）
+        searchInput && searchInput.addEventListener('input', function () {
+            var q = searchInput.value.trim().toLowerCase();
+            rows.forEach(function (row) {
+                var text = row.textContent.toLowerCase();
+                row.style.display = (!q || text.indexOf(q) !== -1) ? '' : 'none';
+            });
+        });
+    })();
+    </script>
 </body>
 </html>
 {{end}}
diff --git a/internal/web/templates/login.html b/internal/web/templates/login.html
index d3c78b2..9645de9 100644
--- a/internal/web/templates/login.html
+++ b/internal/web/templates/login.html
@@ -4,53 +4,54 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>登录 - MailGo</title>
+    <title>登录 - MailGo 邮箱</title>
     {{template "styles" .}}
 </head>
-<body>
-    {{template "navbar" .}}
-    <div class="container">
-        <div style="max-width:400px;margin:80px auto;">
-            <div class="card">
-                <h2 style="text-align:center;margin-bottom:24px;">MailGo 登录</h2>
-                {{if .error}}<div class="alert alert-error">{{.error}}</div>{{end}}
-                <form method="POST" action="/login">
-                    <div class="form-group">
-                        <label>邮箱地址</label>
-                        <input type="email" name="email" required autofocus placeholder="admin@example.com">
-                    </div>
-                    <div class="form-group">
-                        <label>密码</label>
-                        <input type="password" name="password" required placeholder="请输入密码">
-                    </div>
-                    <button type="submit" class="btn btn-primary" style="width:100%;">登录</button>
-                </form>
-
-                {{if or .oauth2Enabled .ldapEnabled}}
-                <div style="text-align:center;margin:16px 0;color:#7f8c8d;">─── 或 ───</div>
-                {{end}}
-
-                {{if .ldapEnabled}}
-                <form method="POST" action="/login/ldap">
-                    <div class="form-group">
-                        <label>LDAP 用户名</label>
-                        <input type="text" name="username" placeholder="LDAP 用户名">
-                    </div>
-                    <div class="form-group">
-                        <label>LDAP 密码</label>
-                        <input type="password" name="password" placeholder="LDAP 密码">
-                    </div>
-                    <button type="submit" class="btn" style="width:100%;background:#8e44ad;color:#fff;">LDAP 登录</button>
-                </form>
-                {{end}}
-
-                {{if .oauth2Enabled}}
-                <a href="/auth/oauth2" class="btn" style="width:100%;background:#3498db;color:#fff;text-align:center;display:block;margin-top:8px;">
-                    {{if eq .oauth2Provider "google"}}Google{{else if eq .oauth2Provider "github"}}GitHub{{else}}OAuth2{{end}} 登录
-                </a>
-                {{end}}
-            </div>
+<body class="login-page">
+    <div class="login-card">
+        <div class="login-logo">
+            <span class="logo-icon" style="width:44px;height:44px;font-size:22px;border-radius:12px;">✉</span>
+            <span style="font-size:26px;font-weight:700;color:var(--primary);">MailGo<em style="font-style:normal;font-weight:400;font-size:15px;color:var(--text-2);margin-left:4px;">邮箱</em></span>
         </div>
+        <div class="login-sub">登录您的邮箱账户</div>
+
+        {{if .error}}<div class="alert alert-error">{{.error}}</div>{{end}}
+
+        <form method="POST" action="/login">
+            <div class="form-group">
+                <label>邮箱地址</label>
+                <input type="email" name="email" required autofocus placeholder="user@example.com" style="padding:11px 14px;border-radius:8px;">
+            </div>
+            <div class="form-group">
+                <label>密码</label>
+                <input type="password" name="password" required placeholder="请输入密码" style="padding:11px 14px;border-radius:8px;">
+            </div>
+            <button type="submit" class="btn btn-primary" style="width:100%;padding:11px 16px;font-size:15px;border-radius:8px;">登 录</button>
+        </form>
+
+        {{if or .oauth2Enabled .ldapEnabled}}
+        <div class="divider">或</div>
+        {{end}}
+
+        {{if .ldapEnabled}}
+        <form method="POST" action="/login/ldap" style="margin-bottom:10px;">
+            <div class="form-group">
+                <label>LDAP 用户名</label>
+                <input type="text" name="username" placeholder="LDAP 用户名">
+            </div>
+            <div class="form-group">
+                <label>LDAP 密码</label>
+                <input type="password" name="password" placeholder="LDAP 密码">
+            </div>
+            <button type="submit" class="btn" style="width:100%;background:#7b5cd6;color:#fff;">LDAP 登录</button>
+        </form>
+        {{end}}
+
+        {{if .oauth2Enabled}}
+        <a href="/auth/oauth2" class="btn btn-primary" style="width:100%;text-align:center;display:block;margin-top:4px;">
+            {{if eq .oauth2Provider "google"}}Google{{else if eq .oauth2Provider "github"}}GitHub{{else}}OAuth2{{end}} 登录
+        </a>
+        {{end}}
     </div>
 </body>
 </html>
diff --git a/internal/web/templates/sent.html b/internal/web/templates/sent.html
index dfff69d..5c2d4db 100644
--- a/internal/web/templates/sent.html
+++ b/internal/web/templates/sent.html
@@ -4,71 +4,151 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>发件箱 - MailGo</title>
+    <title>已发送 - MailGo</title>
     {{template "styles" .}}
 </head>
-<body>
+<body class="page-list">
     {{template "navbar" .}}
-    <div class="container">
-        <div class="clearfix">
-            <div class="sidebar">
-                <a href="/inbox" class="{{if eq .activeFolder `inbox`}}active{{end}}">收件箱</a>
-                <a href="/drafts" class="{{if eq .activeFolder `drafts`}}active{{end}}">草稿箱</a>
-                <a href="/sent" class="{{if eq .activeFolder `sent`}}active{{end}}">发件箱</a>
-                <a href="/compose" class="{{if eq .activeFolder `compose`}}active{{end}}">撰写邮件</a>
-                <a href="/settings" class="{{if eq .activeFolder `settings`}}active{{end}}">设置</a>
+    <div class="app-body">
+        {{template "sidebar" .}}
+        <main class="mail-main">
+            <div class="list-toolbar">
+                <label class="check-all" title="全选/取消全选">
+                    <input type="checkbox" id="select-all">
+                    全选
+                </label>
+                <button type="button" class="tb-btn" id="btn-refresh" title="刷新">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg>
+                    刷新
+                </button>
+                <button type="button" class="tb-btn danger" id="btn-delete" disabled>
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
+                    删除
+                </button>
+                <div class="toolbar-spacer"></div>
+                <span class="page-info">共 {{.total}} 封</span>
             </div>
-            <div class="content">
-                <div class="card">
-                    <h2 style="margin-bottom:16px;">发件箱</h2>
-                    {{if not .messages}}
-                    <p style="color:#7f8c8d;text-align:center;padding:40px 0;">暂无已发送邮件</p>
-                    {{else}}
-                    <table>
-                        <thead>
-                            <tr>
-                                <th style="width:25%;">收件人</th>
-                                <th style="width:45%;">主题</th>
-                                <th style="width:20%;">时间</th>
-                                <th style="width:10%;">操作</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                        {{range .messages}}
-                            <tr>
-                                <td>{{.ToAddr}}</td>
-                                <td>
-                                    <a href="/sent/{{.ID}}" class="message-subject">
-                                        {{if .Subject}}{{.Subject}}{{else}}(无主题){{end}}
-                                    </a>
-                                </td>
-                                <td>{{.Date.Format "2006-01-02 15:04"}}</td>
-                                <td>
-                                    <form method="POST" action="/mail/delete/{{.ID}}" style="display:inline;"
-                                          onsubmit="return confirm('确定要删除这封邮件吗？');">
-                                        <button type="submit" class="btn btn-danger btn-sm">删除</button>
-                                    </form>
-                                </td>
-                            </tr>
-                        {{end}}
-                        </tbody>
-                    </table>
-                    {{end}}
-                </div>
-                {{if .totalPages}}
-                <div class="pagination">
-                    {{if gt .page 1}}
-                    <a href="/sent?page={{sub .page 1}}">上一页</a>
-                    {{end}}
-                    <span>第 {{.page}} / {{.totalPages}} 页</span>
-                    {{if lt .page .totalPages}}
-                    <a href="/sent?page={{add .page 1}}">下一页</a>
-                    {{end}}
-                </div>
+
+            {{if not .messages}}
+            <div class="mail-list">
+                <div class="empty-tip"><span class="empty-icon">📤</span>已发送暂无邮件</div>
+            </div>
+            {{else}}
+            <ul class="mail-list">
+                {{range .messages}}
+                <li class="mail-row" data-id="{{.ID}}">
+                    <label class="cell-check" onclick="event.stopPropagation()">
+                        <input type="checkbox" class="row-check" data-id="{{.ID}}">
+                    </label>
+                    <span class="cell-avatar">
+                        <span class="avatar" style="{{avatarStyle .ToAddr}}">{{initial (mailName .ToAddr)}}</span>
+                    </span>
+                    <span class="cell-from" title="收件人：{{.ToAddr}}">{{mailName .ToAddr}}</span>
+                    <span class="cell-subject-wrap">
+                        <a class="cell-subject" href="/sent/{{.ID}}">
+                            {{if .Subject}}{{.Subject}}{{else}}(无主题){{end}}
+                        </a>
+                    </span>
+                    <span class="cell-snippet">
+                        {{if .TextBody}}{{truncate .TextBody 80}}{{else if .HtmlBody}}[HTML 邮件]{{end}}
+                    </span>
+                    <span class="cell-date">{{shortDate .Date}}</span>
+                    <form method="POST" action="/mail/delete/{{.ID}}" class="row-del"
+                          onsubmit="return confirm('确定要删除这封邮件吗？');">
+                        <button type="submit" class="icon-btn" title="删除">
+                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
+                        </button>
+                    </form>
+                </li>
                 {{end}}
+            </ul>
+            {{end}}
+
+            <div class="list-footer">
+                <span class="page-num">第 {{.page}} / {{if .totalPages}}{{.totalPages}}{{else}}1{{end}} 页</span>
+                <div class="pager">
+                    {{if gt .page 1}}
+                    <a class="page-btn" href="/sent?page={{sub .page 1}}">
+                        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
+                        上一页
+                    </a>
+                    {{else}}
+                    <span class="page-btn disabled">上一页</span>
+                    {{end}}
+                    {{if lt .page .totalPages}}
+                    <a class="page-btn" href="/sent?page={{add .page 1}}">
+                        下一页
+                        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
+                    </a>
+                    {{else}}
+                    <span class="page-btn disabled">下一页</span>
+                    {{end}}
+                </div>
             </div>
-        </div>
+        </main>
     </div>
+    <script>
+    (function () {
+        var searchInput = document.getElementById('mail-search');
+        var rows = Array.prototype.slice.call(document.querySelectorAll('.mail-row'));
+        var selectAll = document.getElementById('select-all');
+        var btnDelete = document.getElementById('btn-delete');
+
+        rows.forEach(function (row) {
+            row.addEventListener('click', function (e) {
+                if (e.target.closest('.cell-check') || e.target.closest('.row-del')) return;
+                window.location.href = row.querySelector('.cell-subject').getAttribute('href');
+            });
+        });
+
+        selectAll && selectAll.addEventListener('change', function () {
+            rows.forEach(function (row) {
+                var cb = row.querySelector('.row-check');
+                cb.checked = selectAll.checked;
+                row.classList.toggle('selected', cb.checked);
+            });
+            updateDeleteState();
+        });
+        rows.forEach(function (row) {
+            var cb = row.querySelector('.row-check');
+            cb.addEventListener('change', function () {
+                row.classList.toggle('selected', cb.checked);
+                if (!cb.checked && selectAll) selectAll.checked = false;
+                updateDeleteState();
+            });
+        });
+
+        function updateDeleteState() {
+            if (!btnDelete) return;
+            var n = rows.filter(function (r) { return r.querySelector('.row-check').checked; }).length;
+            btnDelete.disabled = n === 0;
+        }
+
+        btnDelete && btnDelete.addEventListener('click', function () {
+            var ids = rows.filter(function (r) { return r.querySelector('.row-check').checked; })
+                          .map(function (r) { return r.dataset.id; });
+            if (!ids.length) return;
+            if (!confirm('确定要删除选中的 ' + ids.length + ' 封邮件吗？')) return;
+            var done = 0;
+            ids.forEach(function (id) {
+                fetch('/mail/delete/' + id, { method: 'POST', body: new FormData() })
+                    .then(function () { if (++done === ids.length) window.location.reload(); })
+                    .catch(function () { if (++done === ids.length) window.location.reload(); });
+            });
+        });
+
+        var btnRefresh = document.getElementById('btn-refresh');
+        btnRefresh && btnRefresh.addEventListener('click', function () { window.location.reload(); });
+
+        searchInput && searchInput.addEventListener('input', function () {
+            var q = searchInput.value.trim().toLowerCase();
+            rows.forEach(function (row) {
+                var text = row.textContent.toLowerCase();
+                row.style.display = (!q || text.indexOf(q) !== -1) ? '' : 'none';
+            });
+        });
+    })();
+    </script>
 </body>
 </html>
 {{end}}
diff --git a/internal/web/templates/settings.html b/internal/web/templates/settings.html
index 4562115..8881fc0 100644
--- a/internal/web/templates/settings.html
+++ b/internal/web/templates/settings.html
@@ -7,42 +7,74 @@
     <title>设置 - MailGo</title>
     {{template "styles" .}}
 </head>
-<body>
+<body class="page-settings">
     {{template "navbar" .}}
-    <div class="container">
-        <div class="clearfix">
-            <div class="sidebar">
-                <a href="/inbox" class="{{if eq .activeFolder `inbox`}}active{{end}}">收件箱</a>
-                <a href="/drafts" class="{{if eq .activeFolder `drafts`}}active{{end}}">草稿箱</a>
-                <a href="/sent" class="{{if eq .activeFolder `sent`}}active{{end}}">发件箱</a>
-                <a href="/compose" class="{{if eq .activeFolder `compose`}}active{{end}}">撰写邮件</a>
-                <a href="/settings" class="{{if eq .activeFolder `settings`}}active{{end}}">设置</a>
-            </div>
-            <div class="content">
-                <div class="card">
-                    <h2 style="margin-bottom:16px;">设置</h2>
-                    {{if .error}}<div class="alert alert-error">{{.error}}</div>{{end}}
-                    {{if .success}}<div class="alert alert-success">{{.success}}</div>{{end}}
-                    <h3 style="margin-bottom:12px;">修改密码</h3>
-                    <form method="POST" action="/settings">
-                        <div class="form-group">
-                            <label>当前密码</label>
-                            <input type="password" name="old_password" required placeholder="请输入当前密码">
+    <div class="app-body">
+        {{template "sidebar" .}}
+        <main class="mail-main" style="padding:24px;background:#f6f8fc;">
+            {{if .error}}<div class="alert alert-error">{{.error}}</div>{{end}}
+            {{if .success}}<div class="alert alert-success">{{.success}}</div>{{end}}
+
+            <div class="card" style="max-width:720px;">
+                <h2 style="font-size:17px;margin-bottom:18px;display:flex;align-items:center;gap:10px;">
+                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#1677ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
+                    账号信息
+                </h2>
+                <div style="display:flex;align-items:center;gap:14px;margin-bottom:20px;">
+                    <span class="avatar" style="width:52px;height:52px;font-size:22px;{{avatarStyle .currentUser.Username}}">{{initial .currentUser.Username}}</span>
+                    <div>
+                        <div style="font-size:16px;font-weight:600;">{{.currentUser.Username}}@{{.currentUser.Domain.Name}}</div>
+                        <div style="color:var(--text-3);font-size:12.5px;margin-top:3px;">
+                            已用 {{formatBytes .currentUser.UsedBytes}} / 配额 {{formatBytes .currentUser.QuotaBytes}}
+                            {{if .currentUser.IsAdmin}} · 管理员{{end}}
                         </div>
-                        <div class="form-group">
-                            <label>新密码</label>
-                            <input type="password" name="new_password" required placeholder="请输入新密码">
-                        </div>
-                        <div class="form-group">
-                            <label>确认新密码</label>
-                            <input type="password" name="confirm_password" required placeholder="请再次输入新密码">
-                        </div>
-                        <button type="submit" class="btn btn-primary">修改密码</button>
-                    </form>
+                    </div>
                 </div>
+                <div class="quota-bar" style="width:100%;" data-used="{{.currentUser.UsedBytes}}" data-quota="{{.currentUser.QuotaBytes}}"><i></i></div>
             </div>
-        </div>
+
+            <div class="card" style="max-width:720px;">
+                <h2 style="font-size:17px;margin-bottom:18px;">修改密码</h2>
+                <form method="POST" action="/settings" style="max-width:420px;">
+                    <div class="form-group">
+                        <label>当前密码</label>
+                        <input type="password" name="old_password" required placeholder="请输入当前密码" autocomplete="current-password">
+                    </div>
+                    <div class="form-group">
+                        <label>新密码</label>
+                        <input type="password" name="new_password" required placeholder="请输入新密码" autocomplete="new-password">
+                    </div>
+                    <div class="form-group">
+                        <label>确认新密码</label>
+                        <input type="password" name="confirm_password" required placeholder="请再次输入新密码" autocomplete="new-password">
+                    </div>
+                    <button type="submit" class="btn btn-primary">修改密码</button>
+                </form>
+            </div>
+
+            <div class="card" style="max-width:720px;">
+                <h2 style="font-size:17px;margin-bottom:10px;">帮助</h2>
+                <p style="color:var(--text-2);font-size:13.5px;line-height:1.9;">
+                    客户端收发信（IMAP / SMTP）配置：<br>
+                    IMAP 服务器：{{.currentUser.Domain.Name}} 端口 143 / SSL 993<br>
+                    SMTP 服务器：{{.currentUser.Domain.Name}} 端口 587（提交）/ SSL 465
+                </p>
+            </div>
+        </main>
     </div>
+    <script>
+    (function () {
+        var bar = document.querySelector('.quota-bar[data-quota]');
+        if (bar) {
+            var used = parseInt(bar.dataset.used, 10) || 0;
+            var quota = parseInt(bar.dataset.quota, 10) || 1;
+            var pct = Math.min(100, Math.round(used / quota * 100));
+            bar.querySelector('i').style.width = pct + '%';
+            if (pct >= 90) bar.classList.add('warn');
+            if (pct >= 100) bar.classList.add('over');
+        }
+    })();
+    </script>
 </body>
 </html>
 {{end}}
diff --git a/internal/web/templates/view.html b/internal/web/templates/view.html
index a46ab9c..dfc4fc6 100644
--- a/internal/web/templates/view.html
+++ b/internal/web/templates/view.html
@@ -6,67 +6,83 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>查看邮件 - MailGo</title>
     {{template "styles" .}}
-    <style>
-        .mail-body-iframe {
-            width: 100%;
-            min-height: 300px;
-            border: 1px solid #e0e0e0;
-            border-radius: 4px;
-            background: #fff;
-        }
-    </style>
 </head>
-<body>
+<body class="page-view">
     {{template "navbar" .}}
-    <div class="container">
-        <div class="clearfix">
-            <div class="sidebar">
-                <a href="/inbox" class="{{if eq .activeFolder `inbox`}}active{{end}}">收件箱</a>
-                <a href="/drafts" class="{{if eq .activeFolder `drafts`}}active{{end}}">草稿箱</a>
-                <a href="/sent" class="{{if eq .activeFolder `sent`}}active{{end}}">发件箱</a>
-                <a href="/compose" class="{{if eq .activeFolder `compose`}}active{{end}}">撰写邮件</a>
-                <a href="/settings" class="{{if eq .activeFolder `settings`}}active{{end}}">设置</a>
+    <div class="app-body">
+        {{template "sidebar" .}}
+        <main class="mail-main">
+            <div class="view-toolbar">
+                <a href="javascript:history.back()" class="tb-btn">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg>
+                    返回
+                </a>
+                <a href="/compose?to={{mailEmail .message.FromAddr}}&subject={{if .message.Subject}}Re: {{.message.Subject}}{{end}}" class="tb-btn">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 17 4 12 9 7"/><path d="M20 18v-2a4 4 0 0 0-4-4H4"/></svg>
+                    回复
+                </a>
+                <form method="POST" action="/mail/delete/{{.message.ID}}" style="display:inline;"
+                      onsubmit="return confirm('确定要删除这封邮件吗？');">
+                    <button type="submit" class="tb-btn danger">
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
+                        删除
+                    </button>
+                </form>
             </div>
-            <div class="content">
-                <div class="card">
-                    <div style="margin-bottom:16px;">
-                        <a href="javascript:history.back()" class="btn" style="background:#bdc3c7;color:#fff;">返回</a>
-                    </div>
-                    <h2>{{if .message.Subject}}{{.message.Subject}}{{else}}(无主题){{end}}</h2>
-                    <div class="mail-meta" style="margin-top:12px;">
-                        <p><strong>发件人:</strong> {{decodeHeader .message.FromAddr}}</p>
-                        <p><strong>收件人:</strong> {{.message.ToAddr}}</p>
-                        {{if .message.CcAddr}}<p><strong>抄送:</strong> {{.message.CcAddr}}</p>{{end}}
-                        <p><strong>时间:</strong> {{.message.Date.Format "2006-01-02 15:04:05"}}</p>
-                    </div>
-                    <div class="mail-body">
-                        {{if .message.HtmlBody}}
-                        <iframe class="mail-body-iframe" srcdoc="{{.message.HtmlBody | safeJS}}" sandbox="allow-same-origin" onload="this.style.height=this.contentDocument.body.scrollHeight+20+'px'"></iframe>
-                        {{else}}
-                        <pre style="white-space:pre-wrap;font-family:inherit;">{{.message.TextBody}}</pre>
-                        {{end}}
-                    </div>
-                    {{if .attachments}}
-                    <div class="attachment-list">
-                        <h4 style="margin-bottom:8px;">附件</h4>
-                        {{range .attachments}}
-                        <div class="attachment-item">
-                            📎 <a href="/attachment/{{.ID}}">{{.FileName}}</a>
-                            <span style="color:#7f8c8d;font-size:12px;">({{formatBytes .FileSize}})</span>
-                        </div>
-                        {{end}}
-                    </div>
-                    {{end}}
-                    <div style="margin-top:20px;padding-top:16px;border-top:1px solid #eee;">
-                        <form method="POST" action="/mail/delete/{{.message.ID}}" style="display:inline;"
-                              onsubmit="return confirm('确定要删除这封邮件吗？');">
-                            <button type="submit" class="btn btn-danger">删除邮件</button>
-                        </form>
-                        <a href="/compose?to={{decodeHeader .message.FromAddr}}&subject={{if .message.Subject}}Re: {{.message.Subject}}{{end}}" class="btn btn-primary" style="margin-left:8px;">回复</a>
+
+            <div class="mail-head">
+                <h1 class="mail-title">{{if .message.Subject}}{{.message.Subject}}{{else}}(无主题){{end}}</h1>
+                <div class="mail-from-row">
+                    <span class="avatar" style="{{avatarStyle .message.FromAddr}}">{{initial (mailName (decodeHeader .message.FromAddr))}}</span>
+                    <div>
+                        <div class="mail-from-name">{{mailName (decodeHeader .message.FromAddr)}}</div>
+                        <div class="mail-from-addr" title="{{decodeHeader .message.FromAddr}}">{{mailEmail .message.FromAddr}}</div>
                     </div>
+                    <span class="mail-date">{{.message.Date.Format "2006-01-02 15:04:05"}}</span>
                 </div>
+                {{if .message.CcAddr}}
+                <div class="mail-from-addr" style="margin:-8px 0 16px 48px;">
+                    抄送：{{.message.CcAddr}}
+                </div>
+                {{end}}
             </div>
-        </div>
+
+            <div class="mail-body-wrap">
+                <div class="mail-body">
+                    {{if .message.HtmlBody}}
+                    <iframe class="mail-body-iframe" srcdoc="{{.message.HtmlBody | safeJS}}" sandbox="allow-same-origin" onload="this.style.height=this.contentDocument.body.scrollHeight+20+'px'"></iframe>
+                    {{else}}
+                    <pre>{{.message.TextBody}}</pre>
+                    {{end}}
+                </div>
+
+                {{if .attachments}}
+                <div class="attachment-list">
+                    {{range .attachments}}
+                    <span class="attachment-item">
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>
+                        <a href="/attachment/{{.ID}}">{{.FileName}}</a>
+                        <span style="color:var(--text-3);font-size:12px;">({{formatBytes .FileSize}})</span>
+                    </span>
+                    {{end}}
+                </div>
+                {{end}}
+            </div>
+
+            <div class="view-actions">
+                <a href="/compose?to={{mailEmail .message.FromAddr}}&subject={{if .message.Subject}}Re: {{.message.Subject}}{{end}}" class="btn btn-primary">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px;margin-right:4px;"><polyline points="9 17 4 12 9 7"/><path d="M20 18v-2a4 4 0 0 0-4-4H4"/></svg>
+                    回复
+                </a>
+                <form method="POST" action="/mail/delete/{{.message.ID}}" style="display:inline;"
+                      onsubmit="return confirm('确定要删除这封邮件吗？');">
+                    <button type="submit" class="btn btn-danger">
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px;margin-right:4px;"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
+                        删除邮件
+                    </button>
+                </form>
+            </div>
+        </main>
     </div>
 </body>
 </html>