diff --git a/.gitignore b/.gitignore
index 0ab7464..87581f9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -35,4 +35,6 @@ target/
 
 # Tauri autogenerated files
 packages/app/src-tauri/plugins/*/permissions/autogenerated/
-packages/app/src-tauri/plugins/*/permissions/schemas/
\ No newline at end of file
+packages/app/src-tauri/plugins/*/permissions/schemas/
+
+.serena
\ No newline at end of file
diff --git a/packages/app/src-tauri/Cargo.lock b/packages/app/src-tauri/Cargo.lock
index dd41d73..f4c6ed5 100644
--- a/packages/app/src-tauri/Cargo.lock
+++ b/packages/app/src-tauri/Cargo.lock
@@ -7,6 +7,7 @@ name = "SageRead"
 version = "0.1.0"
 dependencies = [
  "chrono",
+ "fontdb",
  "futures-util",
  "jan-utils",
  "log",
@@ -1694,6 +1695,17 @@ version = "0.1.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "d9c4f5dac5e15c24eb999c26181a6ca40b39fe946cbe4c263c7209467bc83af2"
 
+[[package]]
+name = "fontdb"
+version = "0.11.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "652aa0009b1406e40114685c96ea2c01069e1c035ad6c340999fa08213fad4c5"
+dependencies = [
+ "log",
+ "memmap2",
+ "ttf-parser",
+]
+
 [[package]]
 name = "foreign-types"
 version = "0.3.2"
@@ -3325,6 +3337,15 @@ version = "2.7.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "32a282da65faaf38286cf3be983213fcf1d2e2a58700e808f83f4ea9a4804bc0"
 
+[[package]]
+name = "memmap2"
+version = "0.5.10"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "83faa42c0a078c393f6b29d5db232d8be22776a891f8f56e5284faee4a20b327"
+dependencies = [
+ "libc",
+]
+
 [[package]]
 name = "memoffset"
 version = "0.9.1"
@@ -7061,6 +7082,12 @@ version = "0.2.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "e421abadd41a4225275504ea4d6566923418b7f05506fbc9c0fe86ba7396114b"
 
+[[package]]
+name = "ttf-parser"
+version = "0.18.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0609f771ad9c6155384897e1df4d948e692667cc0588548b68eb44d052b27633"
+
 [[package]]
 name = "tungstenite"
 version = "0.26.2"
diff --git a/packages/app/src-tauri/Cargo.toml b/packages/app/src-tauri/Cargo.toml
index 5de4382..6e34518 100644
--- a/packages/app/src-tauri/Cargo.toml
+++ b/packages/app/src-tauri/Cargo.toml
@@ -40,6 +40,7 @@ futures-util = "0.3"
 tauri-plugin-os = "2"
 tauri-plugin-shell = "2"
 tauri-plugin-updater = "2"
+fontdb = "0.11"
 
 [target.'cfg(not(any(target_os = "android", target_os = "ios")))'.dependencies]
 tauri-plugin-global-shortcut = "2"
diff --git a/packages/app/src-tauri/src/core/fonts/commands.rs b/packages/app/src-tauri/src/core/fonts/commands.rs
index 2487a6b..4aeda81 100644
--- a/packages/app/src-tauri/src/core/fonts/commands.rs
+++ b/packages/app/src-tauri/src/core/fonts/commands.rs
@@ -1,9 +1,17 @@
 use serde::{Deserialize, Serialize};
+use std::collections::BTreeMap;
 use std::fs;
 use std::path::PathBuf;
 use tauri::{AppHandle, Emitter, Manager};
 use tauri_plugin_shell::ShellExt;
 
+#[derive(Debug, Serialize, Deserialize, Clone)]
+pub struct SystemFontInfo {
+    pub family: String,
+    pub is_monospace: bool,
+    pub sources: Vec<String>,
+}
+
 #[derive(Debug, Serialize, Deserialize, Clone)]
 pub struct FontInfo {
     pub name: String,
@@ -177,3 +185,52 @@ pub async fn upload_font_data(
     
     Ok(result)
 }
+
+fn map_font_source(source: &fontdb::Source) -> Option<String> {
+    #[allow(unreachable_patterns)]
+    match source {
+        fontdb::Source::File(path) => Some(path.to_string_lossy().to_string()),
+        fontdb::Source::SharedFile(path, _) => Some(path.to_string_lossy().to_string()),
+        _ => None,
+    }
+}
+
+#[tauri::command]
+pub async fn list_system_fonts() -> Result<Vec<SystemFontInfo>, String> {
+    tauri::async_runtime::spawn_blocking(|| {
+        let mut db = fontdb::Database::new();
+        db.load_system_fonts();
+
+        let mut families: BTreeMap<String, SystemFontInfo> = BTreeMap::new();
+
+        for face in db.faces() {
+            let is_monospace = face.monospaced;
+            let source_path = map_font_source(&face.source);
+
+            for (name, _) in &face.families {
+                let entry = families.entry(name.to_string()).or_insert_with(|| SystemFontInfo {
+                    family: name.to_string(),
+                    is_monospace,
+                    sources: Vec::new(),
+                });
+
+                if is_monospace {
+                    entry.is_monospace = true;
+                }
+
+                if let Some(path) = &source_path {
+                    if !entry.sources.contains(path) {
+                        entry.sources.push(path.clone());
+                    }
+                }
+            }
+        }
+
+        let mut fonts: Vec<SystemFontInfo> = families.into_values().collect();
+        fonts.sort_by(|a, b| a.family.to_lowercase().cmp(&b.family.to_lowercase()));
+
+        Ok(fonts)
+    })
+    .await
+    .map_err(|e| format!("获取系统字体失败: {e}"))?
+}
diff --git a/packages/app/src-tauri/src/lib.rs b/packages/app/src-tauri/src/lib.rs
index e5d23b4..b722ce6 100644
--- a/packages/app/src-tauri/src/lib.rs
+++ b/packages/app/src-tauri/src/lib.rs
@@ -24,7 +24,7 @@ use crate::core::{
         update_reading_session,
     },
     database,
-    fonts::commands::{upload_and_convert_font, upload_font_data},
+    fonts::commands::{list_system_fonts, upload_and_convert_font, upload_font_data},
     llama::commands::{
         delete_local_model, download_llama_server, download_model_file,
         ensure_llamacpp_directories, get_app_data_dir, get_llamacpp_backend_path, greet,
@@ -165,6 +165,7 @@ pub fn run() {
             // fonts
             upload_and_convert_font,
             upload_font_data,
+            list_system_fonts,
             // llama
             greet,
             get_app_data_dir,
diff --git a/packages/app/src/components/notepad/hooks/use-notepad.ts b/packages/app/src/components/notepad/hooks/use-notepad.ts
index ca4e52b..e9fba7a 100644
--- a/packages/app/src/components/notepad/hooks/use-notepad.ts
+++ b/packages/app/src/components/notepad/hooks/use-notepad.ts
@@ -113,7 +113,7 @@ export const useNotepad = ({ bookId }: UseNotepadProps = {}) => {
   const transformNoteForDisplay = useCallback(
     (note: Note) => ({
       id: note.id,
-      preview: note.content || "",
+      preview: note.content || note.title || "",
       createdAt: new Date(note.createdAt),
     }),
     [],
diff --git a/packages/app/src/components/notepad/note-detail-dialog.tsx b/packages/app/src/components/notepad/note-detail-dialog.tsx
index 07d8ebc..45e7eef 100644
--- a/packages/app/src/components/notepad/note-detail-dialog.tsx
+++ b/packages/app/src/components/notepad/note-detail-dialog.tsx
@@ -1,25 +1,78 @@
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { QuoteBlock } from "@/components/ui/quote-block";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
 import { ScrollArea } from "@/components/ui/scroll-area";
+import { Textarea } from "@/components/ui/textarea";
+import { useNotepad } from "./hooks";
 import type { Note } from "@/types/note";
 import dayjs from "dayjs";
+import { useEffect, useMemo, useState } from "react";
 
 interface NoteDetailDialogProps {
   note: Note | null;
   open: boolean;
   onOpenChange: (open: boolean) => void;
+  onNoteUpdated?: (note: Note) => void;
 }
 
-export function NoteDetailDialog({ note, open, onOpenChange }: NoteDetailDialogProps) {
+export function NoteDetailDialog({
+  note,
+  open,
+  onOpenChange,
+  onNoteUpdated,
+}: NoteDetailDialogProps) {
+  const { handleUpdateNote } = useNotepad({ bookId: note?.bookId });
+  const [noteValue, setNoteValue] = useState(note?.content ?? "");
+  const [saving, setSaving] = useState(false);
+
+  useEffect(() => {
+    if (!note || !open) return;
+    setNoteValue(note.content ?? "");
+  }, [note, open]);
+
+  const hasChanges = useMemo(() => {
+    if (!note) return false;
+    const originalNote = note.content ?? "";
+    return noteValue !== originalNote;
+  }, [note, noteValue]);
+
+  const handleSave = async () => {
+    if (!note || !hasChanges) return;
+    try {
+      setSaving(true);
+      const updatedNote = await handleUpdateNote({
+        id: note.id,
+        content: noteValue.trim().length > 0 ? noteValue.trim() : null,
+      });
+
+      if (updatedNote) {
+        onNoteUpdated?.(updatedNote);
+      }
+      onOpenChange(false);
+    } catch (error) {
+      console.error("更新笔记失败:", error);
+    } finally {
+      setSaving(false);
+    }
+  };
+
   if (!note) return null;
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="max-w-2xl">
         <DialogHeader>
-          <DialogTitle>{note.title || "无标题"}</DialogTitle>
+          <DialogTitle>笔记详情</DialogTitle>
         </DialogHeader>
         <DialogDescription>
-          <div className="mt-2 flex flex-col gap-1 text-mutedx text-sm">
+          <div className="mt-2 flex flex-col gap-1 text-muted-foreground text-sm">
             <div className="flex items-center gap-1">
               <div>{dayjs(note.createdAt).format("YYYY-MM-DD HH:mm:ss")}</div>
             </div>
@@ -33,10 +86,48 @@ export function NoteDetailDialog({ note, open, onOpenChange }: NoteDetailDialogP
           </div>
         </DialogDescription>
         <ScrollArea className="max-h-[60vh] min-h-[200px] px-4 py-2">
-          <div className="whitespace-pre-wrap break-words text-neutral-900 dark:text-neutral-300">
-            {note.content || "暂无内容"}
+          <div className="flex flex-col gap-4 pr-2">
+            {note.title && (
+              <div className="space-y-2">
+                <span className="font-medium text-neutral-600 text-sm dark:text-neutral-300">
+                  引用内容
+                </span>
+                <QuoteBlock className="bg-neutral-200/60 px-3 py-2 text-neutral-700 dark:bg-neutral-800/70 dark:text-neutral-200">
+                  {note.title}
+                </QuoteBlock>
+              </div>
+            )}
+            <div className="space-y-2">
+              <span className="font-medium text-neutral-600 text-sm dark:text-neutral-300">
+                我的想法
+              </span>
+              <Textarea
+                id="note-content"
+                value={noteValue}
+                onChange={(event) => setNoteValue(event.target.value)}
+                placeholder="写下你的思考、问题或感受"
+                className="min-h-28"
+              />
+            </div>
           </div>
         </ScrollArea>
+        <DialogFooter>
+          <Button
+            type="button"
+            variant="ghost"
+            onClick={() => onOpenChange(false)}
+            disabled={saving}
+          >
+            取消
+          </Button>
+          <Button
+            type="button"
+            onClick={handleSave}
+            disabled={!hasChanges || saving}
+          >
+            {saving ? "保存中..." : "保存修改"}
+          </Button>
+        </DialogFooter>
       </DialogContent>
     </Dialog>
   );
diff --git a/packages/app/src/components/notepad/note-item.tsx b/packages/app/src/components/notepad/note-item.tsx
index 79d62d6..9a6f3b7 100644
--- a/packages/app/src/components/notepad/note-item.tsx
+++ b/packages/app/src/components/notepad/note-item.tsx
@@ -1,9 +1,10 @@
+import { QuoteBlock } from "@/components/ui/quote-block";
 import type { Note } from "@/types/note";
 import { Menu } from "@tauri-apps/api/menu";
 import { LogicalPosition } from "@tauri-apps/api/window";
 import { ask } from "@tauri-apps/plugin-dialog";
 import dayjs from "dayjs";
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { useNotepad } from "./hooks";
 import { NoteDetailDialog } from "./note-detail-dialog";
 
@@ -14,10 +15,15 @@ interface NoteItemProps {
 export const NoteItem = ({ note }: NoteItemProps) => {
   const { handleDeleteNote } = useNotepad();
   const [showDetail, setShowDetail] = useState(false);
+  const [currentNote, setCurrentNote] = useState(note);
+
+  useEffect(() => {
+    setCurrentNote(note);
+  }, [note]);
 
   const handleNativeDelete = useCallback(async () => {
     try {
-      const preview = note.content || "";
+      const preview = currentNote.content || "";
       const confirmed = await ask(
         `确定要删除这条笔记吗？\n\n"${preview.length > 50 ? `${preview.substring(0, 50)}...` : preview}"\n\n此操作无法撤销。`,
         {
@@ -27,12 +33,12 @@ export const NoteItem = ({ note }: NoteItemProps) => {
       );
 
       if (confirmed) {
-        await handleDeleteNote(note.id);
+        await handleDeleteNote(currentNote.id);
       }
     } catch (error) {
       console.error("删除笔记失败:", error);
     }
-  }, [note, handleDeleteNote]);
+  }, [currentNote, handleDeleteNote]);
 
   const handleClick = useCallback(() => {
     setShowDetail(true);
@@ -72,19 +78,39 @@ export const NoteItem = ({ note }: NoteItemProps) => {
         onContextMenu={handleMenuClick}
       >
         <div className="flex items-start gap-3">
-          <div className="min-w-0 flex-1">
-            <p className="line-clamp-3 select-auto text-neutral-700 text-sm dark:text-neutral-200">
-              {note.content || "暂无内容"}
-            </p>
+          <div className="min-w-0 flex-1 space-y-2">
+            {currentNote.title && (
+              <QuoteBlock
+                className="bg-neutral-200/60 px-3 py-2 text-neutral-700 dark:bg-neutral-800/80 dark:text-neutral-200"
+                contentClassName="line-clamp-3"
+              >
+                {currentNote.title}
+              </QuoteBlock>
+            )}
+
+            {currentNote.content && (
+              <p className="line-clamp-3 select-auto text-neutral-700 text-sm leading-5 dark:text-neutral-200">
+                {currentNote.content}
+              </p>
+            )}
+
+            {!currentNote.title && !currentNote.content && (
+              <p className="select-auto text-neutral-500 text-sm">暂无内容</p>
+            )}
 
-            <div className="mt-1 text-neutral-800 text-xs dark:text-neutral-500">
-              {dayjs(note.createdAt).format("YYYY-MM-DD HH:mm:ss")}
+            <div className="text-neutral-800 text-xs dark:text-neutral-500">
+              {dayjs(currentNote.createdAt).format("YYYY-MM-DD HH:mm:ss")}
             </div>
           </div>
         </div>
       </div>
 
-      <NoteDetailDialog note={note} open={showDetail} onOpenChange={setShowDetail} />
+      <NoteDetailDialog
+        note={currentNote}
+        open={showDetail}
+        onOpenChange={setShowDetail}
+        onNoteUpdated={setCurrentNote}
+      />
     </>
   );
 };
diff --git a/packages/app/src/components/settings/font-manager.tsx b/packages/app/src/components/settings/font-manager.tsx
index f073b7b..fced299 100644
--- a/packages/app/src/components/settings/font-manager.tsx
+++ b/packages/app/src/components/settings/font-manager.tsx
@@ -1,23 +1,66 @@
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import { useFontUpload } from "@/hooks/use-font-upload";
-import { type FontInfo, deleteFont, downloadFont, setFontMetadata } from "@/services/font-service";
+import { DEFAULT_BOOK_FONT } from "@/services/constants";
+import { type FontInfo, type SystemFontInfo, deleteFont, downloadFont, setFontMetadata } from "@/services/font-service";
+import { useAppSettingsStore } from "@/store/app-settings-store";
 import { useFontStore } from "@/store/font-store";
+import { applyUiFont } from "@/utils/font";
 import clsx from "clsx";
 import { Loader2, SquarePen, Trash2, Upload } from "lucide-react";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { toast } from "sonner";
 
+const SYSTEM_DEFAULT_VALUE = "__system__";
+const FONT_WEIGHT_OPTIONS = [300, 400, 500, 600, 700];
+const FONT_WEIGHT_LABELS: Record<number, string> = {
+  300: "Light",
+  400: "Regular",
+  500: "Medium",
+  600: "SemiBold",
+  700: "Bold",
+};
+const UI_FONT_SIZE_OPTIONS = [12, 14, 16, 18, 20];
+const READER_FONT_SIZE_OPTIONS = [12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32];
+
+const getWeightLabel = (weight: number) => FONT_WEIGHT_LABELS[weight] ?? String(weight);
+
+const formatPreviewStyle = (family: string) => ({
+  fontFamily: family,
+});
+
+interface FontOption {
+  id: string;
+  label: string;
+  family: string;
+  source: "system" | "custom";
+  info?: SystemFontInfo | FontInfo;
+}
+
 export default function FontManager() {
-  const { fonts, isLoading, loadFonts, refreshFonts } = useFontStore();
+  const { settings, setSettings } = useAppSettingsStore();
+  const { fonts, systemFonts, isLoading, isSystemLoading, loadFonts, refreshFonts, loadSystemFonts } = useFontStore();
   const [downloadUrl, setDownloadUrl] = useState("");
   const [isDownloading, setIsDownloading] = useState(false);
   const [editingFont, setEditingFont] = useState<string | null>(null);
   const [editDisplayName, setEditDisplayName] = useState("");
+  const [uiFontQuery, setUiFontQuery] = useState("");
+  const [readerFontQuery, setReaderFontQuery] = useState("");
 
   useEffect(() => {
     loadFonts();
-  }, [loadFonts]);
+    loadSystemFonts();
+  }, [loadFonts, loadSystemFonts]);
 
   const { isDragOver, isUploading, handleDragOver, handleDragLeave, handleDrop, triggerFileSelect } =
     useFontUpload(refreshFonts);
@@ -78,60 +121,419 @@ export default function FontManager() {
     setEditDisplayName("");
   };
 
+  const systemFontOptions = useMemo<FontOption[]>(
+    () =>
+      systemFonts.map((font) => ({
+        id: `system-${font.family}`,
+        label: font.family,
+        family: font.family,
+        source: "system" as const,
+        info: font,
+      })),
+    [systemFonts],
+  );
+
+  const customFontOptions = useMemo<FontOption[]>(
+    () =>
+      fonts.map((font) => {
+        const family = font.fontFamily || font.name;
+        return {
+          id: `custom-${font.filename}`,
+          label: font.displayName || font.name,
+          family,
+          source: "custom" as const,
+          info: font,
+        };
+      }),
+    [fonts],
+  );
+
+  const readerFontOptions = useMemo(
+    () => [...systemFontOptions, ...customFontOptions],
+    [systemFontOptions, customFontOptions],
+  );
+
+  const filteredSystemFonts = useMemo(() => {
+    if (!uiFontQuery.trim()) return systemFontOptions;
+    const lowered = uiFontQuery.trim().toLowerCase();
+    return systemFontOptions.filter((font) => font.label.toLowerCase().includes(lowered));
+  }, [systemFontOptions, uiFontQuery]);
+
+  const readerFilteredSystemFonts = useMemo(() => {
+    if (!readerFontQuery.trim()) return systemFontOptions;
+    const lowered = readerFontQuery.trim().toLowerCase();
+    return systemFontOptions.filter((font) => font.label.toLowerCase().includes(lowered));
+  }, [systemFontOptions, readerFontQuery]);
+
+  const readerFilteredCustomFonts = useMemo(() => {
+    if (!readerFontQuery.trim()) return customFontOptions;
+    const lowered = readerFontQuery.trim().toLowerCase();
+    return customFontOptions.filter((font) => font.label.toLowerCase().includes(lowered));
+  }, [customFontOptions, readerFontQuery]);
+
+  const uiFontValue = settings.uiFontFamily?.trim() || SYSTEM_DEFAULT_VALUE;
+  const uiFontSize = settings.uiFontSize ?? 14;
+  const uiFontWeight = settings.uiFontWeight ?? 400;
+
+  const currentReaderFont = settings.globalViewSettings?.serifFont?.trim();
+  const readerFontValue =
+    readerFontOptions.find((opt) => opt.family === currentReaderFont)?.family || SYSTEM_DEFAULT_VALUE;
+  const readerFontSize = settings.globalViewSettings?.defaultFontSize ?? DEFAULT_BOOK_FONT.defaultFontSize;
+  const readerFontWeight = settings.globalViewSettings?.fontWeight ?? DEFAULT_BOOK_FONT.fontWeight;
+  const effectiveUiFontSizes = useMemo(() => {
+    if (UI_FONT_SIZE_OPTIONS.includes(uiFontSize)) {
+      return UI_FONT_SIZE_OPTIONS;
+    }
+    return Array.from(new Set([...UI_FONT_SIZE_OPTIONS, uiFontSize])).sort((a, b) => a - b);
+  }, [uiFontSize]);
+  const effectiveReaderFontSizes = useMemo(() => {
+    if (READER_FONT_SIZE_OPTIONS.includes(readerFontSize)) {
+      return READER_FONT_SIZE_OPTIONS;
+    }
+    return Array.from(new Set([...READER_FONT_SIZE_OPTIONS, readerFontSize])).sort((a, b) => a - b);
+  }, [readerFontSize]);
+  const effectiveFontWeights = useMemo(() => {
+    const weights = new Set(FONT_WEIGHT_OPTIONS);
+    weights.add(uiFontWeight);
+    weights.add(readerFontWeight);
+    return Array.from(weights).sort((a, b) => a - b);
+  }, [uiFontWeight, readerFontWeight]);
+
+  const updateSettings = (updater: (current: typeof settings) => typeof settings) => {
+    const { settings: currentSettings } = useAppSettingsStore.getState();
+    const updated = updater(currentSettings);
+    setSettings(updated);
+    return updated;
+  };
+
+  const handleUiFontChange = (value: string) => {
+    const selectedFont = value === SYSTEM_DEFAULT_VALUE ? "" : value;
+    setUiFontQuery("");
+    const updated = updateSettings((current) => ({
+      ...current,
+      uiFontFamily: selectedFont,
+    }));
+    applyUiFont(updated.uiFontFamily, updated.uiFontSize, updated.uiFontWeight);
+  };
+
+  const handleReaderFontChange = (value: string) => {
+    const targetFont =
+      value === SYSTEM_DEFAULT_VALUE
+        ? DEFAULT_BOOK_FONT.serifFont
+        : readerFontOptions.find((opt) => opt.family === value)?.family || DEFAULT_BOOK_FONT.serifFont;
+    setReaderFontQuery("");
+
+    const updated = updateSettings((current) => ({
+      ...current,
+      globalViewSettings: {
+        ...current.globalViewSettings,
+        serifFont: targetFont,
+        sansSerifFont: targetFont,
+        monospaceFont: targetFont,
+        defaultCJKFont: targetFont,
+      },
+    }));
+
+    if (updated.globalViewSettings.overrideFont) {
+      toast.success(`阅读字体已切换为 ${targetFont}`);
+    }
+  };
+
+  const handleUiFontSizeSelect = (value: string) => {
+    const numeric = Number.parseInt(value, 10);
+    if (Number.isNaN(numeric)) return;
+    const updated = updateSettings((current) => ({
+      ...current,
+      uiFontSize: numeric,
+    }));
+    applyUiFont(updated.uiFontFamily, updated.uiFontSize, updated.uiFontWeight);
+  };
+
+  const handleUiFontWeightSelect = (value: string) => {
+    const numeric = Number.parseInt(value, 10);
+    if (Number.isNaN(numeric)) return;
+    const updated = updateSettings((current) => ({
+      ...current,
+      uiFontWeight: numeric,
+    }));
+    applyUiFont(updated.uiFontFamily, updated.uiFontSize, updated.uiFontWeight);
+  };
+
+  const handleReaderFontSizeSelect = (value: string) => {
+    const numeric = Number.parseInt(value, 10);
+    if (Number.isNaN(numeric)) return;
+    updateSettings((current) => ({
+      ...current,
+      globalViewSettings: {
+        ...current.globalViewSettings,
+        defaultFontSize: numeric,
+      },
+    }));
+  };
+
+  const handleReaderFontWeightSelect = (value: string) => {
+    const numeric = Number.parseInt(value, 10);
+    if (Number.isNaN(numeric)) return;
+    updateSettings((current) => ({
+      ...current,
+      globalViewSettings: {
+        ...current.globalViewSettings,
+        fontWeight: numeric,
+      },
+    }));
+  };
+
   return (
     <div className="space-y-6 p-4 pt-3">
-      <section className="rounded-lg bg-muted/80 p-4 pt-3">
+      <section className="space-y-4 rounded-lg bg-muted/80 p-4 pt-3">
         <h2 className="text mb-4 dark:text-neutral-200">字体管理</h2>
 
-        <div
-          className={clsx(
-            "mb-4 flex flex-col items-center justify-center rounded-lg border-2 border-dashed p-8 transition-colors",
-            isDragOver ? "border-primary bg-primary/10" : "border-neutral-300 dark:border-neutral-700",
+        <div className="space-y-3 rounded-md border border-neutral-200/70 bg-background p-3 dark:border-neutral-800 dark:bg-neutral-900/40">
+          <div>
+            <p className="font-medium text-neutral-800 text-sm dark:text-neutral-100">应用字体</p>
+            <p className="text-neutral-500 text-xs dark:text-neutral-400">选择界面和系统使用的字体</p>
+          </div>
+          {isSystemLoading ? (
+            <div className="flex items-center justify-center py-6">
+              <Loader2 className="h-5 w-5 animate-spin text-neutral-400" />
+            </div>
+          ) : (
+            <Select value={uiFontValue} onValueChange={handleUiFontChange}>
+              <SelectTrigger className="h-9">
+                <SelectValue placeholder="系统默认">
+                  {uiFontValue === SYSTEM_DEFAULT_VALUE ? "系统默认" : uiFontValue}
+                </SelectValue>
+              </SelectTrigger>
+              <SelectContent className="max-h-72 overflow-y-auto">
+                <div className="sticky top-0 z-10 bg-popover p-2">
+                  <Input
+                    value={uiFontQuery}
+                    onChange={(event) => setUiFontQuery(event.target.value)}
+                    placeholder="搜索字体..."
+                    className="h-8"
+                    onKeyDown={(event) => event.stopPropagation()}
+                    onPointerDown={(event) => event.stopPropagation()}
+                  />
+                </div>
+                <SelectGroup>
+                  <SelectItem value={SYSTEM_DEFAULT_VALUE}>系统默认</SelectItem>
+                  {filteredSystemFonts.length > 0 ? (
+                    filteredSystemFonts.map((font) => (
+                      <SelectItem key={font.id} value={font.family}>
+                        <span className="truncate" style={formatPreviewStyle(font.family)}>
+                          {font.label}
+                        </span>
+                      </SelectItem>
+                    ))
+                  ) : (
+                    <div className="py-6 text-center text-neutral-500 text-sm dark:text-neutral-400">
+                      未找到匹配字体
+                    </div>
+                  )}
+                </SelectGroup>
+              </SelectContent>
+            </Select>
+          )}
+          <div className="grid gap-3 sm:grid-cols-2">
+            <div className="space-y-1">
+              <p className="font-medium text-neutral-600 text-xs dark:text-neutral-400">字体大小</p>
+              <Select value={String(uiFontSize)} onValueChange={handleUiFontSizeSelect}>
+                <SelectTrigger className="h-9">
+                  <SelectValue placeholder="选择字号" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectGroup>
+                    {effectiveUiFontSizes.map((size) => (
+                      <SelectItem key={size} value={String(size)}>
+                        {size}px
+                      </SelectItem>
+                    ))}
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-1">
+              <p className="font-medium text-neutral-600 text-xs dark:text-neutral-400">字体粗细</p>
+              <Select value={String(uiFontWeight)} onValueChange={handleUiFontWeightSelect}>
+                <SelectTrigger className="h-9">
+                  <SelectValue placeholder="选择粗细" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectGroup>
+                    {effectiveFontWeights.map((weight) => (
+                      <SelectItem key={weight} value={String(weight)}>
+                        {weight} · {getWeightLabel(weight)}
+                      </SelectItem>
+                    ))}
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+        </div>
+
+        <div className="space-y-3 rounded-md border border-neutral-200/70 bg-background p-3 dark:border-neutral-800 dark:bg-neutral-900/40">
+          <div>
+            <p className="font-medium text-neutral-800 text-sm dark:text-neutral-100">阅读默认字体</p>
+            <p className="text-neutral-500 text-xs dark:text-neutral-400">设置阅读器使用的默认字体</p>
+          </div>
+          {isSystemLoading && readerFontOptions.length === 0 ? (
+            <div className="flex items-center justify-center py-6">
+              <Loader2 className="h-5 w-5 animate-spin text-neutral-400" />
+            </div>
+          ) : (
+            <Select value={readerFontValue} onValueChange={handleReaderFontChange}>
+              <SelectTrigger className="h-9">
+                <SelectValue placeholder="系统默认">
+                  {readerFontValue === SYSTEM_DEFAULT_VALUE ? "系统默认" : readerFontValue}
+                </SelectValue>
+              </SelectTrigger>
+              <SelectContent className="max-h-80 overflow-y-auto">
+                <div className="sticky top-0 z-10 bg-popover p-2">
+                  <Input
+                    value={readerFontQuery}
+                    onChange={(event) => setReaderFontQuery(event.target.value)}
+                    placeholder="搜索字体..."
+                    className="h-8"
+                    onKeyDown={(event) => event.stopPropagation()}
+                    onPointerDown={(event) => event.stopPropagation()}
+                  />
+                </div>
+                <SelectGroup>
+                  <SelectItem value={SYSTEM_DEFAULT_VALUE}>系统默认</SelectItem>
+                  {readerFilteredSystemFonts.length > 0 ? (
+                    <>
+                      <SelectLabel className="mt-1 text-neutral-500 text-xs dark:text-neutral-400">
+                        系统字体
+                      </SelectLabel>
+                      {readerFilteredSystemFonts.map((font) => (
+                        <SelectItem key={font.id} value={font.family}>
+                          <span className="truncate" style={formatPreviewStyle(font.family)}>
+                            {font.label}
+                          </span>
+                        </SelectItem>
+                      ))}
+                    </>
+                  ) : null}
+                  {readerFilteredCustomFonts.length > 0 && readerFilteredSystemFonts.length > 0 ? (
+                    <SelectSeparator />
+                  ) : null}
+                  {readerFilteredCustomFonts.length > 0 ? (
+                    <>
+                      <SelectLabel className="mt-2 text-neutral-500 text-xs dark:text-neutral-400">
+                        已安装字体
+                      </SelectLabel>
+                      {readerFilteredCustomFonts.map((font) => (
+                        <SelectItem key={font.id} value={font.family}>
+                          <span className="truncate" style={formatPreviewStyle(font.family)}>
+                            {font.label}
+                          </span>
+                        </SelectItem>
+                      ))}
+                    </>
+                  ) : null}
+                  {readerFilteredSystemFonts.length === 0 && readerFilteredCustomFonts.length === 0 ? (
+                    <div className="py-6 text-center text-neutral-500 text-sm dark:text-neutral-400">
+                      未找到匹配字体
+                    </div>
+                  ) : null}
+                </SelectGroup>
+              </SelectContent>
+            </Select>
           )}
-          onDragOver={handleDragOver}
-          onDragLeave={handleDragLeave}
-          onDrop={handleDrop}
-        >
-          <Upload className="mb-2 h-8 w-8 text-neutral-400" />
-          <p className="mb-2 text-neutral-600 text-sm dark:text-neutral-400">拖拽 .woff2 或 .ttf 字体文件到此处</p>
-          <Button size="xs" onClick={triggerFileSelect} disabled={isUploading}>
-            {isUploading && <Loader2 className="h-4 w-4 animate-spin" />}
-            <span>{isUploading ? "处理中..." : "选择文件"}</span>
-          </Button>
+          <div className="grid gap-3 sm:grid-cols-2">
+            <div className="space-y-1">
+              <p className="font-medium text-neutral-600 text-xs dark:text-neutral-400">字体大小</p>
+              <Select value={String(readerFontSize)} onValueChange={handleReaderFontSizeSelect}>
+                <SelectTrigger className="h-9">
+                  <SelectValue placeholder="选择字号" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectGroup>
+                    {effectiveReaderFontSizes.map((size) => (
+                      <SelectItem key={size} value={String(size)}>
+                        {size}px
+                      </SelectItem>
+                    ))}
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-1">
+              <p className="font-medium text-neutral-600 text-xs dark:text-neutral-400">字体粗细</p>
+              <Select value={String(readerFontWeight)} onValueChange={handleReaderFontWeightSelect}>
+                <SelectTrigger className="h-9">
+                  <SelectValue placeholder="选择粗细" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectGroup>
+                    {effectiveFontWeights.map((weight) => (
+                      <SelectItem key={weight} value={String(weight)}>
+                        {weight} · {getWeightLabel(weight)}
+                      </SelectItem>
+                    ))}
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
         </div>
 
-        <div className="mb-4 flex gap-2 border-b pb-4">
-          <Input
-            placeholder="输入字体 URL (支持 .woff2 或 .ttf 格式)"
-            value={downloadUrl}
-            className="h-8"
-            onChange={(e) => setDownloadUrl(e.target.value)}
-            onKeyDown={(e) => {
-              if (e.key === "Enter") {
-                handleDownload();
-              }
-            }}
-          />
-          <Button variant="soft" onClick={handleDownload} disabled={isDownloading} className="h-8">
-            {isDownloading ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : null}
-            {isDownloading ? "下载中..." : "下载"}
-          </Button>
+        <div className="space-y-4 rounded-md border border-neutral-200/70 bg-background p-3 dark:border-neutral-800 dark:bg-neutral-900/40">
+          <div>
+            <p className="font-medium text-neutral-800 text-sm dark:text-neutral-100">安装自定义字体</p>
+            <p className="text-neutral-500 text-xs dark:text-neutral-400">拖拽或粘贴字体文件，支持 .woff2 / .ttf</p>
+          </div>
+          <div
+            className={clsx(
+              "flex flex-col items-center justify-center rounded-md border-2 border-dashed p-5 transition-colors",
+              isDragOver ? "border-primary bg-primary/10" : "border-neutral-300 dark:border-neutral-700",
+            )}
+            onDragOver={handleDragOver}
+            onDragLeave={handleDragLeave}
+            onDrop={handleDrop}
+          >
+            <Upload className="mb-2 h-6 w-6 text-neutral-400" />
+            <p className="mb-2 text-neutral-600 text-xs dark:text-neutral-400">拖拽 .woff2 或 .ttf 字体文件到此处</p>
+            <Button size="xs" onClick={triggerFileSelect} disabled={isUploading}>
+              {isUploading && <Loader2 className="h-4 w-4 animate-spin" />}
+              <span>{isUploading ? "处理中..." : "选择文件"}</span>
+            </Button>
+          </div>
+
+          <div className="flex gap-2">
+            <Input
+              placeholder="输入字体 URL (支持 .woff2 或 .ttf 格式)"
+              value={downloadUrl}
+              className="h-8"
+              onChange={(e) => setDownloadUrl(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") {
+                  handleDownload();
+                }
+              }}
+            />
+            <Button variant="soft" onClick={handleDownload} disabled={isDownloading} className="h-8">
+              {isDownloading ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : null}
+              {isDownloading ? "下载中..." : "下载"}
+            </Button>
+          </div>
         </div>
 
         <div className="space-y-2">
           <h3 className="font-medium text-neutral-700 text-sm dark:text-neutral-300">已安装的字体</h3>
           {isLoading ? (
-            <div className="flex items-center justify-center py-8">
+            <div className="flex items-center justify-center py-6">
               <Loader2 className="h-6 w-6 animate-spin text-neutral-400" />
             </div>
           ) : fonts.length === 0 ? (
-            <div className="rounded-md bg-neutral-100 p-4 text-center text-neutral-500 text-sm dark:bg-neutral-800 dark:text-neutral-400">
+            <div className="rounded-md bg-neutral-100 p-3 text-center text-neutral-500 text-sm dark:bg-neutral-800 dark:text-neutral-400">
               暂无已安装的字体
             </div>
           ) : (
-            <div className="space-y-3">
+            <div className="space-y-2">
               {fonts.map((font) => (
-                <div key={font.filename} className="flex h-[48px] items-center justify-between border-b px-0 py-4">
+                <div key={font.filename} className="flex items-center justify-between rounded-md border px-3 py-2">
                   {editingFont === font.filename ? (
                     <div className="flex flex-1 items-center gap-2">
                       <Input
@@ -149,25 +551,27 @@ export default function FontManager() {
                     </div>
                   ) : (
                     <>
-                      <div className="flex-1 py-2">
-                        <p className="font-medium text-sm dark:text-neutral-200">{font.name}</p>
+                      <div className="flex-1 py-1">
+                        <p className="font-medium text-sm dark:text-neutral-200">{font.displayName || font.name}</p>
                         <p className="text-neutral-500 text-xs dark:text-neutral-400">
                           {font.fontFamily ? `Font Family: ${font.fontFamily}` : ""}
                         </p>
                       </div>
-                      <div className="flex">
-                        <div
-                          className="flex size-7 cursor-pointer items-center justify-center rounded-full hover:bg-neutral-200 dark:hover:bg-neutral-700"
+                      <div className="flex gap-1">
+                        <button
+                          className="flex size-7 items-center justify-center rounded-full hover:bg-neutral-200 dark:hover:bg-neutral-700"
                           onClick={() => handleEditClick(font)}
+                          title="编辑名称"
                         >
                           <SquarePen className="h-4 w-4" />
-                        </div>
-                        <div
-                          className="flex size-7 cursor-pointer items-center justify-center rounded-full hover:bg-neutral-200 dark:hover:bg-neutral-700"
+                        </button>
+                        <button
+                          className="flex size-7 items-center justify-center rounded-full hover:bg-neutral-200 dark:hover:bg-neutral-700"
                           onClick={() => handleDelete(font.filename)}
+                          title="删除字体"
                         >
                           <Trash2 className="h-4 w-4" />
-                        </div>
+                        </button>
                       </div>
                     </>
                   )}
diff --git a/packages/app/src/components/settings/settings-dialog.tsx b/packages/app/src/components/settings/settings-dialog.tsx
index 8de5414..45614be 100644
--- a/packages/app/src/components/settings/settings-dialog.tsx
+++ b/packages/app/src/components/settings/settings-dialog.tsx
@@ -76,7 +76,7 @@ export default function SettingsDialog({ open, onOpenChange }: SettingsDialogPro
         label: provider.name,
       })),
     },
-    // { key: "shortcuts", label: "快捷键" },
+    { key: "shortcuts", label: "快捷键" },
   ];
 
   const getProviderStatus = (providerId: string) => {
diff --git a/packages/app/src/components/settings/shortcuts.tsx b/packages/app/src/components/settings/shortcuts.tsx
index ad5821e..7138304 100644
--- a/packages/app/src/components/settings/shortcuts.tsx
+++ b/packages/app/src/components/settings/shortcuts.tsx
@@ -1,6 +1,144 @@
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { DEFAULT_READER_SHORTCUTS } from "@/services/constants";
+import { useAppSettingsStore } from "@/store/app-settings-store";
+import type { ReaderShortcutAction } from "@/types/settings";
+import type React from "react";
+import { useMemo } from "react";
+
+const floatingMenuShortcuts: Array<{
+  action: ReaderShortcutAction;
+  label: string;
+  description: string;
+}> = [
+  {
+    action: "copy",
+    label: "复制",
+    description: "在浮动菜单打开时按下快捷键，快速复制选中文本。",
+  },
+  {
+    action: "explain",
+    label: "解释",
+    description: "为当前选中文本生成解释。",
+  },
+  {
+    action: "askAI",
+    label: "询问 AI",
+    description: "将选中文本发送到 AI 对话。",
+  },
+  {
+    action: "toggleHighlight",
+    label: "高亮 / 取消高亮",
+    description: "为选中文本添加或移除高亮标注。",
+  },
+  {
+    action: "addNote",
+    label: "添加笔记",
+    description: "将选中文本保存到笔记。",
+  },
+];
+
+const formatShortcutKey = (key: string | undefined) => key?.toUpperCase() ?? "";
+
 export default function ShortcutsSettings() {
+  const { settings, setSettings } = useAppSettingsStore();
+  const readerShortcuts = useMemo(
+    () => ({ ...DEFAULT_READER_SHORTCUTS, ...(settings.readerShortcuts ?? {}) }),
+    [settings.readerShortcuts],
+  );
+
+  const updateShortcut = (action: ReaderShortcutAction, value: string) => {
+    const nextShortcuts = { ...readerShortcuts, [action]: value };
+    setSettings({ ...settings, readerShortcuts: nextShortcuts });
+  };
+
+  const resetAll = () => {
+    setSettings({ ...settings, readerShortcuts: { ...DEFAULT_READER_SHORTCUTS } });
+  };
+
+  const handleKeyDown = (action: ReaderShortcutAction, event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === "Tab") {
+      return;
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
+
+    if (event.key === "Backspace" || event.key === "Delete") {
+      updateShortcut(action, "");
+      return;
+    }
+
+    if (event.altKey || event.ctrlKey || event.metaKey) {
+      return;
+    }
+
+    if (event.key.length === 1) {
+      updateShortcut(action, event.key.toLowerCase());
+    }
+  };
+
   return (
     <div className="space-y-8 p-4 pt-3">
+      <section className="space-y-4">
+        <div className="flex items-center justify-between gap-4">
+          <div>
+            <h2 className="font-semibold text-lg text-neutral-800 dark:text-neutral-100">阅读器浮动菜单</h2>
+            <p className="text-neutral-600 text-sm dark:text-neutral-400">
+              快捷键仅在浮动菜单打开时生效。按 Backspace 可清除对应快捷键。
+            </p>
+          </div>
+          <Button variant="outline" size="sm" onClick={resetAll}>
+            恢复默认
+          </Button>
+        </div>
+
+        <div className="space-y-4">
+          {floatingMenuShortcuts.map((item) => {
+            const currentValue = readerShortcuts[item.action] ?? "";
+            const isOverridden = currentValue !== DEFAULT_READER_SHORTCUTS[item.action];
+            return (
+              <div
+                className="flex flex-col gap-3 rounded-lg border border-neutral-200 p-3 dark:border-neutral-800 dark:bg-neutral-900"
+                key={item.action}
+              >
+                <div className="flex flex-wrap items-center justify-between gap-3">
+                  <div className="min-w-0">
+                    <h3 className="font-medium text-neutral-800 dark:text-neutral-100">{item.label}</h3>
+                    <p className="text-neutral-600 text-sm dark:text-neutral-400">{item.description}</p>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <div>
+                      <Label htmlFor={`shortcut-${item.action}`} className="sr-only">
+                        {item.label}
+                      </Label>
+                      <Input
+                        id={`shortcut-${item.action}`}
+                        className="w-20 text-center uppercase"
+                        placeholder="未设置"
+                        readOnly
+                        value={formatShortcutKey(currentValue)}
+                        onKeyDown={(event) => handleKeyDown(item.action, event)}
+                      />
+                    </div>
+                    {isOverridden && (
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => updateShortcut(item.action, DEFAULT_READER_SHORTCUTS[item.action])}
+                      >
+                        重置
+                      </Button>
+                    )}
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </section>
+
       <section>
         <h2 className="mb-4 font-semibold text-lg text-neutral-800 dark:text-neutral-100">Application</h2>
         <div className="space-y-4">
diff --git a/packages/app/src/components/side-chat/chat-messages.tsx b/packages/app/src/components/side-chat/chat-messages.tsx
index d4f7aa0..f9971a9 100644
--- a/packages/app/src/components/side-chat/chat-messages.tsx
+++ b/packages/app/src/components/side-chat/chat-messages.tsx
@@ -3,6 +3,7 @@ import { Message, MessageAction, MessageActions, MessageContent } from "@/compon
 import { Reasoning, ReasoningContent, ReasoningTrigger } from "@/components/prompt-kit/reasoning";
 import { Tool } from "@/components/prompt-kit/tool";
 import { Button } from "@/components/ui/button";
+import { QuoteBlock } from "@/components/ui/quote-block";
 import { useIsChatPage } from "@/hooks/use-is-chat-page";
 import { type ReasoningTimes, useReasoningTimer } from "@/hooks/use-reasoning-timer";
 import { useTextSelection } from "@/hooks/use-text-selection";
@@ -12,7 +13,7 @@ import { useTTSStore } from "@/store/tts-store";
 import { getReasoningTimes } from "@/types/message";
 import type { UIMessage, UIMessagePart } from "ai";
 import dayjs from "dayjs";
-import { Brain, Check, Copy, Loader2, Pause, Quote, RefreshCw, Volume2 } from "lucide-react";
+import { Brain, Check, Copy, Loader2, Pause, RefreshCw, Volume2 } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
 import { useStickToBottomContext } from "use-stick-to-bottom";
@@ -263,15 +264,9 @@ export function ChatMessages({
       if (type === "quote") {
         flushText();
         elements.push(
-          <div
-            key={`quote-${i}`}
-            className="flex max-w-full items-start gap-1 rounded-lg text-muted-foreground text-sm leading-4.5"
-          >
-            <span className="mt-0.5 flex-nowrap">
-              <Quote className="size-3" />
-            </span>
-            <span className="flex-1 whitespace-pre-wrap break-words text-left">{part.text}</span>
-          </div>,
+          <QuoteBlock key={`quote-${i}`} className="leading-[18px]">
+            {part.text}
+          </QuoteBlock>,
         );
         continue;
       }
diff --git a/packages/app/src/components/side-chat/chat-selection-popup.tsx b/packages/app/src/components/side-chat/chat-selection-popup.tsx
index 091afe4..a4bbeb3 100644
--- a/packages/app/src/components/side-chat/chat-selection-popup.tsx
+++ b/packages/app/src/components/side-chat/chat-selection-popup.tsx
@@ -52,22 +52,20 @@ export const ChatSelectionPopup = ({ selectedText, position, onClose, onAskAi, p
       if (!selectedText.trim()) return;
 
       try {
-        const content = selectedText.trim();
-        const title = content.length > 50 ? `${content.substring(0, 50)}...` : content;
+        const quote = selectedText.trim();
 
         let bookMeta = undefined;
         if (bookData?.book) {
           bookMeta = {
             title: bookData.book.title,
-            author: bookData.book.author,
+            author: bookData.book.author ?? "",
           };
         }
 
         await handleCreateNote({
           bookId: bookData?.id || undefined,
           bookMeta,
-          title,
-          content,
+          title: quote,
         });
         onClose();
       } catch (error) {
diff --git a/packages/app/src/components/ui/quote-block.tsx b/packages/app/src/components/ui/quote-block.tsx
new file mode 100644
index 0000000..83f5c5c
--- /dev/null
+++ b/packages/app/src/components/ui/quote-block.tsx
@@ -0,0 +1,27 @@
+import { cn } from "@/lib/utils";
+import { Quote } from "lucide-react";
+import type React from "react";
+
+interface QuoteBlockProps extends React.HTMLAttributes<HTMLDivElement> {
+  iconClassName?: string;
+  contentClassName?: string;
+  children: React.ReactNode;
+}
+
+export const QuoteBlock: React.FC<QuoteBlockProps> = ({
+  children,
+  className,
+  iconClassName,
+  contentClassName,
+  ...props
+}) => {
+  return (
+    <div
+      className={cn("flex max-w-full items-start gap-1 rounded-lg text-muted-foreground text-sm leading-5", className)}
+      {...props}
+    >
+      <Quote className={cn("mt-0.5 size-3 shrink-0", iconClassName)} />
+      <span className={cn("flex-1 whitespace-pre-wrap break-words text-left", contentClassName)}>{children}</span>
+    </div>
+  );
+};
diff --git a/packages/app/src/index.css b/packages/app/src/index.css
index 98dbf53..f74c623 100644
--- a/packages/app/src/index.css
+++ b/packages/app/src/index.css
@@ -124,7 +124,9 @@ foliate-view {
     -webkit-text-size-adjust: 100%;
     font-feature-settings: normal;
     -webkit-tap-highlight-color: transparent;
-    font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
+    font-family: var(--font-sans);
+    font-size: var(--app-font-size, 14px);
+    font-weight: var(--app-font-weight, 400);
     font-variation-settings: normal;
   }
 
@@ -340,4 +342,4 @@ foliate-view {
       0 0 3px 0 rgba(0, 0, 0, 0.10),
       1px 1px 3px 0 rgba(0, 0, 0, 0.15);
   }
-}
\ No newline at end of file
+}
diff --git a/packages/app/src/pages/reader/components/annotator/annotation-popup.tsx b/packages/app/src/pages/reader/components/annotator/annotation-popup.tsx
index 7197871..4177401 100644
--- a/packages/app/src/pages/reader/components/annotator/annotation-popup.tsx
+++ b/packages/app/src/pages/reader/components/annotator/annotation-popup.tsx
@@ -7,10 +7,18 @@ import React, { useEffect, useMemo, useState } from "react";
 import HighlightOptions from "./highlight-options";
 import PopupButton from "./popup-button";
 
+interface AnnotationMenuButton {
+  label?: string;
+  tooltip?: string;
+  Icon: React.ElementType;
+  onClick: () => void;
+  shortcut?: string;
+}
+
 interface AnnotationPopupProps {
   dir: "ltr" | "rtl";
   isVertical: boolean;
-  buttons: Array<{ label: string | undefined; Icon: React.ElementType; onClick: () => void }>;
+  buttons: AnnotationMenuButton[];
   position: Position;
   trianglePosition: Position;
   highlightOptionsVisible: boolean;
@@ -166,7 +174,14 @@ const AnnotationPopup: React.FC<AnnotationPopupProps> = ({
         >
           {buttons.map((button, index) => (
             <React.Fragment key={index}>
-              <PopupButton label={button.label} Icon={button.Icon} onClick={button.onClick} isVertical={isVertical} />
+              <PopupButton
+                label={button.label}
+                tooltip={button.tooltip}
+                Icon={button.Icon}
+                onClick={button.onClick}
+                isVertical={isVertical}
+                shortcutKey={button.shortcut?.toUpperCase()}
+              />
               {index === 2 && (
                 <Separator
                   orientation={isVertical ? "horizontal" : "vertical"}
diff --git a/packages/app/src/pages/reader/components/annotator/create-note-dialog.tsx b/packages/app/src/pages/reader/components/annotator/create-note-dialog.tsx
new file mode 100644
index 0000000..d657d5e
--- /dev/null
+++ b/packages/app/src/pages/reader/components/annotator/create-note-dialog.tsx
@@ -0,0 +1,70 @@
+import { Button } from "@/components/ui/button";
+import { QuoteBlock } from "@/components/ui/quote-block";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import type React from "react";
+
+interface CreateNoteDialogProps {
+  open: boolean;
+  quote: string;
+  note: string;
+  isSubmitting?: boolean;
+  onNoteChange: (value: string) => void;
+  onOpenChange: (open: boolean) => void;
+  onSubmit: () => void;
+}
+
+export const CreateNoteDialog: React.FC<CreateNoteDialogProps> = ({
+  open,
+  quote,
+  note,
+  isSubmitting = false,
+  onNoteChange,
+  onOpenChange,
+  onSubmit,
+}) => {
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    onSubmit();
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-lg p-0">
+        <DialogHeader className="px-4 py-4">
+          <DialogTitle>创建笔记</DialogTitle>
+        </DialogHeader>
+        <form onSubmit={handleSubmit} className="space-y-4 px-4 pb-4">
+          <QuoteBlock className="bg-muted px-3 py-2 text-left text-sm leading-5 text-neutral-700 dark:bg-neutral-900 dark:text-neutral-200">
+            {quote}
+          </QuoteBlock>
+          <div className="space-y-2">
+            <Label htmlFor="note-thoughts">我的想法（可选）</Label>
+            <Textarea
+              id="note-thoughts"
+              value={note}
+              onChange={(event) => onNoteChange(event.target.value)}
+              placeholder="写下你的思考、问题或感受"
+              className="min-h-28"
+            />
+          </div>
+          <DialogFooter className="px-0">
+            <Button type="button" variant="ghost" onClick={() => onOpenChange(false)} disabled={isSubmitting}>
+              取消
+            </Button>
+            <Button type="submit" disabled={isSubmitting || !quote.trim()}>
+              {isSubmitting ? "保存中..." : "保存笔记"}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+};
diff --git a/packages/app/src/pages/reader/components/annotator/index.tsx b/packages/app/src/pages/reader/components/annotator/index.tsx
index 26caf3c..0e8b24c 100644
--- a/packages/app/src/pages/reader/components/annotator/index.tsx
+++ b/packages/app/src/pages/reader/components/annotator/index.tsx
@@ -1,10 +1,11 @@
-import { HIGHLIGHT_COLOR_HEX } from "@/services/constants";
+import { useNotepad } from "@/components/notepad/hooks";
+import { DEFAULT_READER_SHORTCUTS, HIGHLIGHT_COLOR_HEX } from "@/services/constants";
 import { useAppSettingsStore } from "@/store/app-settings-store";
 import type { BookNote } from "@/types/book";
 import { Overlayer } from "foliate-js/overlayer.js";
 import { NotebookPen } from "lucide-react";
 import type React from "react";
-import { useEffect } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { FiCopy, FiHelpCircle, FiMessageCircle } from "react-icons/fi";
 import { PiHighlighterFill } from "react-icons/pi";
 import { RiDeleteBinLine } from "react-icons/ri";
@@ -14,13 +15,15 @@ import { useTextSelector } from "../../hooks/use-text-selector";
 import { useReaderStore, useReaderStoreApi } from "../reader-provider";
 import AnnotationPopup from "./annotation-popup";
 import AskAIPopup from "./ask-ai-popup";
+import { CreateNoteDialog } from "./create-note-dialog";
 
 const Annotator: React.FC = () => {
-  const { settings } = useAppSettingsStore();
-  const store = useReaderStoreApi();
-
   const bookId = useReaderStore((state) => state.bookId)!;
   const view = useReaderStore((state) => state.view);
+  const bookData = useReaderStore((state) => state.bookData);
+  const { settings } = useAppSettingsStore();
+  const store = useReaderStoreApi();
+  const { handleCreateNote } = useNotepad({ bookId });
   const globalViewSettings = settings.globalViewSettings;
 
   // 使用 use-annotator hook
@@ -42,7 +45,6 @@ const Annotator: React.FC = () => {
     handleDismissPopup,
     handleCopy,
     handleHighlight,
-    addNote,
     handleExplain,
     handleAskAI,
     handleCloseAskAI,
@@ -112,17 +114,153 @@ const Annotator: React.FC = () => {
   }, [showAnnotPopup, showAskAIPopup]);
 
   const selectionAnnotated = selection?.annotated;
-  const buttons = [
-    { label: "复制", Icon: FiCopy, onClick: handleCopy },
-    { label: "解释", Icon: FiHelpCircle, onClick: handleExplain },
-    { label: "询问AI", Icon: FiMessageCircle, onClick: handleAskAI },
-    {
-      label: undefined,
-      Icon: selectionAnnotated ? RiDeleteBinLine : PiHighlighterFill,
-      onClick: handleHighlight,
+  const [noteDialogOpen, setNoteDialogOpen] = useState(false);
+  const [noteQuote, setNoteQuote] = useState("");
+  const [noteThoughts, setNoteThoughts] = useState("");
+  const [savingNote, setSavingNote] = useState(false);
+
+  const handleOpenNoteDialog = useCallback(() => {
+    const text = selection?.text?.trim();
+    if (!text) return;
+
+    setNoteQuote(text);
+    setNoteThoughts("");
+    setNoteDialogOpen(true);
+    handleDismissPopup();
+  }, [selection?.text, handleDismissPopup]);
+
+  const handleCloseNoteDialog = useCallback(
+    (open: boolean) => {
+      if (!open) {
+        setNoteDialogOpen(false);
+        setNoteThoughts("");
+      } else {
+        setNoteDialogOpen(true);
+      }
     },
-    { label: undefined, Icon: NotebookPen, onClick: addNote },
-  ];
+    [],
+  );
+
+  const handleSaveNote = useCallback(async () => {
+    const quote = noteQuote.trim();
+    if (!quote) return;
+
+    try {
+      setSavingNote(true);
+      const bookMeta =
+        bookData?.book && bookData.book.title
+          ? {
+              title: bookData.book.title,
+              author: bookData.book.author ?? "",
+            }
+          : undefined;
+
+      await handleCreateNote({
+        bookId,
+        bookMeta,
+        title: quote,
+        content: noteThoughts.trim() || undefined,
+      });
+
+      handleCloseNoteDialog(false);
+      handleDismissPopup();
+    } catch (error) {
+      // 错误提示由 handleCreateNote 处理
+    } finally {
+      setSavingNote(false);
+    }
+  }, [noteQuote, noteThoughts, handleCreateNote, bookId, bookData, handleCloseNoteDialog, handleDismissPopup]);
+
+  const readerShortcuts = useMemo(
+    () => ({ ...DEFAULT_READER_SHORTCUTS, ...(settings.readerShortcuts ?? {}) }),
+    [settings.readerShortcuts],
+  );
+
+  const buttons = useMemo(
+    () => [
+      { label: "复制", tooltip: "复制", Icon: FiCopy, onClick: handleCopy, shortcut: readerShortcuts.copy },
+      { label: "解释", tooltip: "解释", Icon: FiHelpCircle, onClick: handleExplain, shortcut: readerShortcuts.explain },
+      { label: "询问AI", tooltip: "询问 AI", Icon: FiMessageCircle, onClick: handleAskAI, shortcut: readerShortcuts.askAI },
+      {
+        label: selectionAnnotated ? "取消高亮" : "高亮",
+        tooltip: selectionAnnotated ? "取消高亮" : "高亮",
+        Icon: selectionAnnotated ? RiDeleteBinLine : PiHighlighterFill,
+        onClick: handleHighlight,
+        shortcut: readerShortcuts.toggleHighlight,
+      },
+      { label: "创建笔记", tooltip: "创建笔记", Icon: NotebookPen, onClick: handleOpenNoteDialog, shortcut: readerShortcuts.addNote },
+    ],
+    [
+      readerShortcuts.copy,
+      readerShortcuts.explain,
+      readerShortcuts.askAI,
+      readerShortcuts.toggleHighlight,
+      readerShortcuts.addNote,
+      handleCopy,
+      handleExplain,
+      handleAskAI,
+      handleHighlight,
+      handleOpenNoteDialog,
+      selectionAnnotated,
+    ],
+  );
+
+  useEffect(() => {
+    if (!showAnnotPopup || showAskAIPopup) return;
+    if (!buttons.some((button) => button.shortcut)) return;
+
+    const handleShortcut = (event: KeyboardEvent) => {
+      if (event.defaultPrevented) return;
+      if (event.altKey || event.ctrlKey || event.metaKey) return;
+
+      const eventTarget = event.target as Node | null;
+      const activeDocument = eventTarget?.ownerDocument ?? document;
+      const activeElement = activeDocument.activeElement as HTMLElement | null;
+      if (activeElement) {
+        const tagName = activeElement.tagName;
+        if (
+          tagName === "INPUT" ||
+          tagName === "TEXTAREA" ||
+          tagName === "SELECT" ||
+          activeElement.isContentEditable
+        ) {
+          return;
+        }
+      }
+
+      const key = event.key.toLowerCase();
+      const matchedButton = buttons.find(
+        (button) => button.shortcut && button.shortcut.toLowerCase() === key,
+      );
+
+      if (!matchedButton) return;
+
+      event.preventDefault();
+      matchedButton.onClick();
+    };
+
+    const listeners: Array<() => void> = [];
+    const attachedTargets = new Set<Window | Document>();
+    const addListener = (target: Window | Document | null | undefined) => {
+      if (!target || attachedTargets.has(target)) return;
+      attachedTargets.add(target);
+      target.addEventListener("keydown", handleShortcut);
+      listeners.push(() => target.removeEventListener("keydown", handleShortcut));
+    };
+
+    addListener(window);
+    addListener(document);
+
+    const ownerDocument = selection?.range?.startContainer?.ownerDocument ?? null;
+    addListener(ownerDocument);
+    if (ownerDocument?.defaultView && ownerDocument.defaultView !== window) {
+      addListener(ownerDocument.defaultView);
+    }
+
+    return () => {
+      listeners.forEach((dispose) => dispose());
+    };
+  }, [buttons, selection?.range, showAnnotPopup, showAskAIPopup]);
 
   return (
     <div>
@@ -153,6 +291,15 @@ const Annotator: React.FC = () => {
           onSendQuery={handleSendAIQuery}
         />
       )}
+      <CreateNoteDialog
+        open={noteDialogOpen}
+        quote={noteQuote}
+        note={noteThoughts}
+        onNoteChange={setNoteThoughts}
+        onOpenChange={handleCloseNoteDialog}
+        onSubmit={handleSaveNote}
+        isSubmitting={savingNote}
+      />
     </div>
   );
 };
diff --git a/packages/app/src/pages/reader/components/annotator/popup-button.tsx b/packages/app/src/pages/reader/components/annotator/popup-button.tsx
index 49db033..a7be444 100644
--- a/packages/app/src/pages/reader/components/annotator/popup-button.tsx
+++ b/packages/app/src/pages/reader/components/annotator/popup-button.tsx
@@ -1,30 +1,64 @@
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import type React from "react";
 
 interface PopupButtonProps {
-  label: string | undefined;
+  label?: string;
+  tooltip?: string;
   Icon: React.ElementType;
   onClick: () => void;
   isVertical?: boolean;
+  shortcutKey?: string;
 }
 
-const PopupButton: React.FC<PopupButtonProps> = ({ label, Icon, onClick, isVertical = false }) => {
+const PopupButton: React.FC<PopupButtonProps> = ({
+  label,
+  tooltip,
+  Icon,
+  onClick,
+  isVertical = false,
+  shortcutKey,
+}) => {
   const handleClick = () => {
     onClick();
   };
 
-  return (
+  const tooltipLabel = tooltip ?? label;
+  const ariaLabel = tooltipLabel ?? shortcutKey ?? "annotation action";
+
+  const button = (
     <div className="flex items-center justify-center">
       <button
         onClick={handleClick}
+        type="button"
+        aria-label={ariaLabel}
+        title={tooltipLabel}
         className={`flex cursor-pointer items-center justify-center gap-1 rounded p-0 transition-colors duration-200 hover:bg-neutral-100 dark:hover:bg-neutral-700 ${
           isVertical ? "h-auto w-6 flex-col px-0 py-1" : "h-6 min-w-6 px-1"
         }`}
       >
         <Icon size={16} />
-        {label && <span className="text-sm">{label}</span>}
+        {shortcutKey && (
+          <span className={`text-[10px] font-medium uppercase text-neutral-500 dark:text-neutral-400 ${isVertical ? "" : "leading-none"}`}>
+            {shortcutKey}
+          </span>
+        )}
       </button>
     </div>
   );
+
+  if (!tooltipLabel) {
+    return button;
+  }
+
+  return (
+    <Tooltip delayDuration={200}>
+      <TooltipTrigger asChild>{button}</TooltipTrigger>
+      <TooltipContent side={isVertical ? "right" : "top"}>
+        {tooltipLabel}
+        {shortcutKey ? ` (${shortcutKey})` : ""}
+      </TooltipContent>
+    </Tooltip>
+  );
 };
 
 export default PopupButton;
diff --git a/packages/app/src/pages/reader/components/settings-dropdown.tsx b/packages/app/src/pages/reader/components/settings-dropdown.tsx
index 518fccb..d7d59dd 100644
--- a/packages/app/src/pages/reader/components/settings-dropdown.tsx
+++ b/packages/app/src/pages/reader/components/settings-dropdown.tsx
@@ -24,7 +24,7 @@ const SettingsDropdown = () => {
   const { settings, setSettings } = useAppSettingsStore();
   const openDropdown = useReaderStore((state) => state.openDropdown);
   const setOpenDropdown = useReaderStore((state) => state.setOpenDropdown)!;
-  const { fonts: customFontList, loadFonts } = useFontStore();
+  const { fonts: customFontList, systemFonts, loadFonts, loadSystemFonts } = useFontStore();
 
   const globalViewSettings = settings.globalViewSettings;
   const view = store.getState().view;
@@ -45,11 +45,24 @@ const SettingsDropdown = () => {
     [customFontList],
   );
 
-  const allFonts = useMemo(() => [...CURATED_FONTS, ...customFonts], [customFonts]);
+  const systemFontOptions = useMemo(
+    () =>
+      systemFonts.map((font) => ({
+        id: `system-${font.family}`,
+        name: font.family,
+        serif: font.family,
+        sansSerif: font.family,
+        cjk: font.family,
+      })),
+    [systemFonts],
+  );
+
+  const allFonts = useMemo(() => [...CURATED_FONTS, ...systemFontOptions, ...customFonts], [customFonts, systemFontOptions]);
 
   useEffect(() => {
     loadFonts();
-  }, [loadFonts]);
+    loadSystemFonts();
+  }, [loadFonts, loadSystemFonts]);
 
   useEffect(() => {
     const currentFontExists = allFonts.some(
diff --git a/packages/app/src/pages/reader/hooks/use-annotator.ts b/packages/app/src/pages/reader/hooks/use-annotator.ts
index 7b6ea1b..93f6afe 100644
--- a/packages/app/src/pages/reader/hooks/use-annotator.ts
+++ b/packages/app/src/pages/reader/hooks/use-annotator.ts
@@ -1,9 +1,7 @@
-import { useNotepad } from "@/components/notepad/hooks";
 import { createBookNote, deleteBookNote, updateBookNote } from "@/services/book-note-service";
 import { iframeService } from "@/services/iframe-service";
 import { useAppSettingsStore } from "@/store/app-settings-store";
 import type { HighlightColor, HighlightStyle } from "@/types/book";
-import type { BookMeta } from "@/types/note";
 import { type Position, type TextSelection, getPopupPosition, getPosition } from "@/utils/sel";
 import { useQueryClient } from "@tanstack/react-query";
 import * as CFI from "foliate-js/epubcfi.js";
@@ -42,9 +40,7 @@ export const useAnnotator = ({ bookId }: UseAnnotatorProps) => {
   const config = useReaderStore((state) => state.config)!;
   const progress = useReaderStore((state) => state.progress)!;
   const view = useReaderStore((state) => state.view);
-  const bookData = useReaderStore((state) => state.bookData);
   const store = useReaderStoreApi();
-  const { handleCreateNote } = useNotepad();
   const queryClient = useQueryClient();
   const globalViewSettings = settings.globalViewSettings;
 
@@ -63,7 +59,8 @@ export const useAnnotator = ({ bookId }: UseAnnotatorProps) => {
   );
 
   const popupPadding = 10;
-  const annotPopupWidth = Math.min(globalViewSettings?.vertical ? 320 : 280, window.innerWidth - 2 * popupPadding);
+  const basePopupWidth = globalViewSettings?.vertical ? 240 : 220;
+  const annotPopupWidth = Math.min(basePopupWidth, window.innerWidth - 2 * popupPadding);
   const annotPopupHeight = 36;
 
   // Popup 相关函数
@@ -173,35 +170,6 @@ export const useAnnotator = ({ bookId }: UseAnnotatorProps) => {
     [selection, config, view, settings, bookId, store, queryClient],
   );
 
-  const addNote = useCallback(async () => {
-    if (!selection || !selection.text) return;
-
-    try {
-      const content = selection.text.trim();
-      const title = content.length > 50 ? `${content.substring(0, 50)}...` : content;
-
-      if (!bookData?.book) {
-        toast.error("无法获取书籍信息");
-        return;
-      }
-
-      const bookMeta: BookMeta = {
-        title: bookData.book.title,
-        author: bookData.book.author,
-      };
-
-      await handleCreateNote({
-        bookId,
-        bookMeta,
-        title,
-        content,
-      });
-      toast.success("笔记已创建");
-    } catch (error) {
-      toast.error("创建笔记失败");
-    }
-  }, [selection, bookData, bookId, handleCreateNote]);
-
   const handleExplain = useCallback(() => {
     if (!selection || !selection.text) return;
     setShowAnnotPopup(false);
@@ -331,7 +299,6 @@ export const useAnnotator = ({ bookId }: UseAnnotatorProps) => {
     handleDismissPopupAndSelection,
     handleCopy,
     handleHighlight,
-    addNote,
     handleExplain,
     handleAskAI,
     handleCloseAskAI,
diff --git a/packages/app/src/pages/reader/hooks/use-foliate-viewer/foliate-viewer-manager.ts b/packages/app/src/pages/reader/hooks/use-foliate-viewer/foliate-viewer-manager.ts
index 096bc5f..8c88200 100644
--- a/packages/app/src/pages/reader/hooks/use-foliate-viewer/foliate-viewer-manager.ts
+++ b/packages/app/src/pages/reader/hooks/use-foliate-viewer/foliate-viewer-manager.ts
@@ -344,8 +344,13 @@ export class FoliateViewerManager {
 
   // Public API methods
   updateViewSettings(settings: Partial<ViewSettings>): void {
+    this.config.globalViewSettings = {
+      ...this.config.globalViewSettings,
+      ...settings,
+    };
+
     if (this.styleManager) {
-      this.styleManager.updateSettings(settings);
+      this.styleManager.updateSettings(this.config.globalViewSettings);
     }
   }
 
diff --git a/packages/app/src/pages/reader/hooks/use-foliate-viewer/index.ts b/packages/app/src/pages/reader/hooks/use-foliate-viewer/index.ts
index fc25358..36a0f2b 100644
--- a/packages/app/src/pages/reader/hooks/use-foliate-viewer/index.ts
+++ b/packages/app/src/pages/reader/hooks/use-foliate-viewer/index.ts
@@ -62,8 +62,9 @@ export const useFoliateViewer = (bookId: string, bookDoc: BookDoc, config: BookC
     });
 
     manager.setViewSettingsCallback((updatedSettings: ViewSettings) => {
+      const { settings: currentSettings } = useAppSettingsStore.getState();
       setSettings({
-        ...settings,
+        ...currentSettings,
         globalViewSettings: updatedSettings,
       });
     });
@@ -91,8 +92,16 @@ export const useFoliateViewer = (bookId: string, bookDoc: BookDoc, config: BookC
 
   // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
   useEffect(() => {
-    const view = managerRef.current?.getView();
-    if (view?.renderer && isInitialized.current) {
+    if (!isInitialized.current) return;
+
+    const manager = managerRef.current;
+    const view = manager?.getView();
+
+    if (manager) {
+      manager.updateViewSettings(settings.globalViewSettings);
+    }
+
+    if (view?.renderer) {
       const styles = getStyles(settings.globalViewSettings, themeCode);
       view.renderer.setStyles?.(styles);
 
diff --git a/packages/app/src/services/constants.ts b/packages/app/src/services/constants.ts
index 4483118..515b5c4 100644
--- a/packages/app/src/services/constants.ts
+++ b/packages/app/src/services/constants.ts
@@ -10,7 +10,7 @@ import type {
   ViewConfig,
   ViewSettings,
 } from "@/types/book";
-import type { ReadSettings, SystemSettings } from "@/types/settings";
+import type { ReadSettings, ReaderShortcutConfig, SystemSettings } from "@/types/settings";
 import type { UserDailyTranslationQuota, UserStorageQuota } from "@/types/user";
 import { getDefaultMaxBlockSize, getDefaultMaxInlineSize } from "@/utils/config";
 import { stubTranslation as _ } from "@/utils/misc";
@@ -27,6 +27,14 @@ export const BOOK_UNGROUPED_ID = "";
 export const SUPPORTED_IMAGE_EXTS = ["png", "jpg", "jpeg"];
 export const IMAGE_ACCEPT_FORMATS = SUPPORTED_IMAGE_EXTS.map((ext) => `.${ext}`).join(", ");
 
+export const DEFAULT_READER_SHORTCUTS: ReaderShortcutConfig = {
+  copy: "c",
+  explain: "e",
+  askAI: "a",
+  toggleHighlight: "h",
+  addNote: "n",
+};
+
 export const DEFAULT_SYSTEM_SETTINGS: Partial<SystemSettings> = {
   keepLogin: false,
   autoUpload: true,
@@ -47,6 +55,10 @@ export const DEFAULT_SYSTEM_SETTINGS: Partial<SystemSettings> = {
   lastSyncedAtBooks: 0,
   lastSyncedAtConfigs: 0,
   lastSyncedAtNotes: 0,
+  uiFontFamily: "",
+  uiFontSize: 14,
+  uiFontWeight: 400,
+  readerShortcuts: { ...DEFAULT_READER_SHORTCUTS },
 };
 
 export const DEFAULT_READSETTINGS: ReadSettings = {
diff --git a/packages/app/src/services/font-service.ts b/packages/app/src/services/font-service.ts
index 36604a5..c95fc3d 100644
--- a/packages/app/src/services/font-service.ts
+++ b/packages/app/src/services/font-service.ts
@@ -22,6 +22,12 @@ export interface FontMetadata {
 
 type FontMetadataMap = Record<string, FontMetadata>;
 
+export interface SystemFontInfo {
+  family: string;
+  isMonospace: boolean;
+  sources: string[];
+}
+
 const FONTS_DIR = "fonts";
 const FONTS_META_FILE = "fonts-meta.json";
 
@@ -250,3 +256,13 @@ export async function uploadFontData(file: File): Promise<FontInfo> {
     throw error;
   }
 }
+
+export async function listSystemFonts(): Promise<SystemFontInfo[]> {
+  try {
+    const fonts = await invoke<SystemFontInfo[]>("list_system_fonts");
+    return fonts;
+  } catch (error) {
+    console.error("[FontService] Failed to list system fonts:", error);
+    return [];
+  }
+}
diff --git a/packages/app/src/store/app-settings-store.ts b/packages/app/src/store/app-settings-store.ts
index efaa904..65e5043 100644
--- a/packages/app/src/store/app-settings-store.ts
+++ b/packages/app/src/store/app-settings-store.ts
@@ -5,6 +5,7 @@ import {
   DEFAULT_BOOK_LAYOUT,
   DEFAULT_BOOK_STYLE,
   DEFAULT_CJK_VIEW_SETTINGS,
+  DEFAULT_READER_SHORTCUTS,
   DEFAULT_READSETTINGS,
   DEFAULT_SYSTEM_SETTINGS,
   DEFAULT_VIEW_CONFIG,
@@ -38,9 +39,16 @@ export const useAppSettingsStore = create<AppSettingsState>()(
             ...(isCJKEnv() ? DEFAULT_CJK_VIEW_SETTINGS : {}),
             ...DEFAULT_VIEW_CONFIG,
           },
+          readerShortcuts: { ...DEFAULT_READER_SHORTCUTS },
         } as SystemSettings,
         toggleSettingsDialog: () => set((state) => ({ isSettingsDialogOpen: !state.isSettingsDialogOpen })),
-        setSettings: (settings: SystemSettings) => set({ settings }),
+        setSettings: (settings: SystemSettings) =>
+          set({
+            settings: {
+              ...settings,
+              readerShortcuts: { ...DEFAULT_READER_SHORTCUTS, ...(settings.readerShortcuts ?? {}) },
+            },
+          }),
       }),
       {
         name: tauriStorageKey.appSettings,
diff --git a/packages/app/src/store/font-store.ts b/packages/app/src/store/font-store.ts
index ad56666..d11a903 100644
--- a/packages/app/src/store/font-store.ts
+++ b/packages/app/src/store/font-store.ts
@@ -1,16 +1,21 @@
-import { type FontInfo, listFonts } from "@/services/font-service";
+import { type FontInfo, type SystemFontInfo, listFonts, listSystemFonts } from "@/services/font-service";
 import { create } from "zustand";
 
 interface FontStoreState {
   fonts: FontInfo[];
+  systemFonts: SystemFontInfo[];
   isLoading: boolean;
+  isSystemLoading: boolean;
   loadFonts: () => Promise<void>;
   refreshFonts: () => Promise<void>;
+  loadSystemFonts: () => Promise<void>;
 }
 
 export const useFontStore = create<FontStoreState>((set) => ({
   fonts: [],
+  systemFonts: [],
   isLoading: false,
+  isSystemLoading: false,
 
   loadFonts: async () => {
     set({ isLoading: true });
@@ -27,4 +32,15 @@ export const useFontStore = create<FontStoreState>((set) => ({
     const fontList = await listFonts();
     set({ fonts: fontList });
   },
+
+  loadSystemFonts: async () => {
+    set({ isSystemLoading: true });
+    try {
+      const systemFonts = await listSystemFonts();
+      set({ systemFonts, isSystemLoading: false });
+    } catch (error) {
+      console.error("[FontStore] Failed to load system fonts:", error);
+      set({ systemFonts: [], isSystemLoading: false });
+    }
+  },
 }));
diff --git a/packages/app/src/themes/default.css b/packages/app/src/themes/default.css
index ca022d9..c6d41d8 100644
--- a/packages/app/src/themes/default.css
+++ b/packages/app/src/themes/default.css
@@ -34,6 +34,8 @@
   --font-sans: 'Geist', 'Geist Fallback', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
   --font-serif: "Geist", "Geist Fallback", ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
   --font-mono: "Geist Mono", "Geist Mono Fallback", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --app-font-size: 14px;
+  --app-font-weight: 400;
 
   --radius: 0.625rem;
   
@@ -90,4 +92,3 @@
   --shadow-xl: 0 1px 3px 0px oklch(0.00 0 0 / 0.10), 0 8px 10px -1px oklch(0.00 0 0 / 0.10);
   --shadow-2xl: 0 1px 3px 0px oklch(0.00 0 0 / 0.25);
 }
-
diff --git a/packages/app/src/types/settings.ts b/packages/app/src/types/settings.ts
index 80592b6..0f9532e 100644
--- a/packages/app/src/types/settings.ts
+++ b/packages/app/src/types/settings.ts
@@ -1,6 +1,10 @@
 import type { CustomTheme } from "@/styles/themes";
 import type { HighlightColor, HighlightStyle, ViewSettings } from "./book";
 
+export type ReaderShortcutAction = "copy" | "explain" | "askAI" | "toggleHighlight" | "addNote";
+
+export type ReaderShortcutConfig = Record<ReaderShortcutAction, string>;
+
 export type LibraryViewModeType = "grid" | "list";
 export type LibrarySortByType = "title" | "author" | "updated" | "created" | "size" | "format";
 export type LibraryCoverFitType = "crop" | "fit";
@@ -45,4 +49,8 @@ export interface SystemSettings {
 
   globalReadSettings: ReadSettings;
   globalViewSettings: ViewSettings;
+  readerShortcuts: ReaderShortcutConfig;
+  uiFontFamily?: string;
+  uiFontSize?: number;
+  uiFontWeight?: number;
 }
diff --git a/packages/app/src/utils/font.ts b/packages/app/src/utils/font.ts
index 93267d6..2ccdb12 100644
--- a/packages/app/src/utils/font.ts
+++ b/packages/app/src/utils/font.ts
@@ -1,9 +1,104 @@
 import { listFonts } from "@/services/font-service";
+import { useAppSettingsStore } from "@/store/app-settings-store";
 import { convertFileSrc } from "@tauri-apps/api/core";
 import { appDataDir, resourceDir } from "@tauri-apps/api/path";
 import { isCJKEnv } from "./misc";
 
 let cachedBuiltInFontUrl: string | null = null;
+const SYSTEM_FONT_FALLBACK =
+  'system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"';
+const DEFAULT_SERIF_FALLBACK = '"Geist", "Geist Fallback", ui-serif, Georgia, Cambria, "Times New Roman", Times, serif';
+
+const quoteIfNeeded = (font: string) => {
+  if (!font) return font;
+  return /\s/.test(font) && !/^".*"$/.test(font) ? `"${font}"` : font;
+};
+
+const normalizeFontSize = (value?: number | null) => {
+  if (typeof value !== "number" || Number.isNaN(value) || value <= 0) {
+    return null;
+  }
+  return `${value}px`;
+};
+
+const normalizeFontWeight = (value?: number | null) => {
+  if (typeof value !== "number" || Number.isNaN(value) || value <= 0) {
+    return null;
+  }
+  return `${Math.round(value)}`;
+};
+
+export const applyUiFont = (fontFamily?: string | null, fontSize?: number | null, fontWeight?: number | null) => {
+  if (typeof document === "undefined") return;
+  const root = document.documentElement;
+  const sanitized = fontFamily?.trim();
+  const fallbackSans = SYSTEM_FONT_FALLBACK;
+  const fallbackSerif = DEFAULT_SERIF_FALLBACK;
+  const cssFont = sanitized ? quoteIfNeeded(sanitized) : "";
+  const resolvedSans = cssFont ? `${cssFont}, ${fallbackSans}` : fallbackSans;
+  const resolvedSerif = cssFont ? `${cssFont}, ${fallbackSerif}` : fallbackSerif;
+
+  root.style.setProperty("--font-sans", resolvedSans);
+  root.style.setProperty("--font-serif", resolvedSerif);
+
+  const normalizedSize = normalizeFontSize(fontSize);
+  const normalizedWeight = normalizeFontWeight(fontWeight);
+
+  if (normalizedSize) {
+    root.style.setProperty("--app-font-size", normalizedSize);
+    root.style.fontSize = normalizedSize;
+    if (document.body) {
+      document.body.style.fontSize = normalizedSize;
+    }
+  } else {
+    root.style.removeProperty("--app-font-size");
+    root.style.removeProperty("font-size");
+    if (document.body) {
+      document.body.style.removeProperty("font-size");
+    }
+  }
+
+  if (normalizedWeight) {
+    root.style.setProperty("--app-font-weight", normalizedWeight);
+    root.style.fontWeight = normalizedWeight;
+    if (document.body) {
+      document.body.style.fontWeight = normalizedWeight;
+    }
+  } else {
+    root.style.removeProperty("--app-font-weight");
+    root.style.removeProperty("font-weight");
+    if (document.body) {
+      document.body.style.removeProperty("font-weight");
+    }
+  }
+
+  root.style.fontFamily = resolvedSans;
+  if (document.body) {
+    document.body.style.fontFamily = resolvedSans;
+  }
+};
+
+export const applyUiFontFromSettings = () => {
+  try {
+    const { settings } = useAppSettingsStore.getState();
+    applyUiFont(settings.uiFontFamily, settings.uiFontSize, settings.uiFontWeight);
+  } catch (error) {
+    console.error("[Font] Failed to apply UI font from settings:", error);
+  }
+};
+
+if (typeof window !== "undefined") {
+  useAppSettingsStore.subscribe(
+    (state) => ({
+      fontFamily: state.settings.uiFontFamily,
+      fontSize: state.settings.uiFontSize,
+      fontWeight: state.settings.uiFontWeight,
+    }),
+    ({ fontFamily, fontSize, fontWeight }) => {
+      applyUiFont(fontFamily, fontSize, fontWeight);
+    },
+  );
+}
 
 const getBuiltInFontUrl = async (): Promise<string> => {
   if (cachedBuiltInFontUrl) {
@@ -110,6 +205,8 @@ export const mountFontsToMainApp = async () => {
       style.textContent = builtInFontFaces;
       document.head.appendChild(style);
     }
+
+    applyUiFontFromSettings();
   } catch (error) {
     console.error("[Font] Failed to load fonts to main app:", error);
   }
diff --git a/packages/app/src/utils/style.ts b/packages/app/src/utils/style.ts
index 30b46f4..b4942c6 100644
--- a/packages/app/src/utils/style.ts
+++ b/packages/app/src/utils/style.ts
@@ -224,6 +224,21 @@ const getLayoutStyles = (
   }
   h1, h2, h3, h4, h5, h6 {
     text-align: initial;
+    padding-bottom: 0.35em ${overrideLayout ? "!important" : ""};
+  }
+
+  :is(h1, h2, h3, h4, h5, h6, header, hgroup):has(+ :is(hr, [role="separator"], [class*="divider" i], [class*="separator" i], [class*="line" i])) {
+    padding-bottom: 0.6em ${overrideLayout ? "!important" : ""};
+  }
+
+  :is(h1, h2, h3, h4, h5, h6, header, hgroup)
+    + :is(hr, [role="separator"], [class*="divider" i], [class*="separator" i], [class*="line" i]) {
+    margin-top: 1.6em ${overrideLayout ? "!important" : ""};
+  }
+
+  :is(h1, h2, h3, h4, h5, h6, header, hgroup)
+    + :is(div, p, section, header, hgroup):has(> :is(hr, [role="separator"], [class*="divider" i], [class*="separator" i], [class*="line" i])) {
+    margin-top: 1.6em ${overrideLayout ? "!important" : ""};
   }
 
   :lang(zh), :lang(ja), :lang(ko) {
diff --git a/packages/app/vite.config.ts b/packages/app/vite.config.ts
index 42ed285..89aacaf 100644
--- a/packages/app/vite.config.ts
+++ b/packages/app/vite.config.ts
@@ -3,7 +3,7 @@ import tailwindcss from "@tailwindcss/vite";
 import react from "@vitejs/plugin-react";
 import { defineConfig } from "vite";
 
-const host = process.env.TAURI_DEV_HOST;
+const host = process.env.TAURI_DEV_HOST || "127.0.0.1";
 
 // https://vite.dev/config/
 export default defineConfig(async () => ({
@@ -24,14 +24,12 @@ export default defineConfig(async () => ({
   server: {
     port: 1420,
     strictPort: true,
-    host: host || false,
-    hmr: host
-      ? {
-          protocol: "ws",
-          host,
-          port: 1421,
-        }
-      : undefined,
+    host,
+    hmr: {
+      protocol: "ws",
+      host,
+      port: 1421,
+    },
     watch: {
       // 3. tell Vite to ignore watching `src-tauri`
       ignored: ["**/src-tauri/**"],