diff --git a/apps/ui/public/apple-touch-icon.png b/apps/ui/public/apple-touch-icon.png
index ca9f0c05d..1adf380a8 100644
Binary files a/apps/ui/public/apple-touch-icon.png and b/apps/ui/public/apple-touch-icon.png differ
diff --git a/apps/ui/public/favicon.ico b/apps/ui/public/favicon.ico
index 1802a1e76..1ec871126 100644
Binary files a/apps/ui/public/favicon.ico and b/apps/ui/public/favicon.ico differ
diff --git a/apps/ui/public/icon-192-maskable.png b/apps/ui/public/icon-192-maskable.png
index 77f8b4e16..dee3d8ee8 100644
Binary files a/apps/ui/public/icon-192-maskable.png and b/apps/ui/public/icon-192-maskable.png differ
diff --git a/apps/ui/public/icon-192.png b/apps/ui/public/icon-192.png
index d93cce677..4348003a5 100644
Binary files a/apps/ui/public/icon-192.png and b/apps/ui/public/icon-192.png differ
diff --git a/apps/ui/public/icon-512-maskable.png b/apps/ui/public/icon-512-maskable.png
index 6ebd1afa6..e4a984849 100644
Binary files a/apps/ui/public/icon-512-maskable.png and b/apps/ui/public/icon-512-maskable.png differ
diff --git a/apps/ui/public/icon-512.png b/apps/ui/public/icon-512.png
index c92cd0d4e..68e0da972 100644
Binary files a/apps/ui/public/icon-512.png and b/apps/ui/public/icon-512.png differ
diff --git a/apps/ui/public/manifest.json b/apps/ui/public/manifest.json
index b1a10000e..714189383 100644
--- a/apps/ui/public/manifest.json
+++ b/apps/ui/public/manifest.json
@@ -32,6 +32,6 @@
   ],
   "start_url": "/",
   "display": "standalone",
-  "background_color": "#ffffff",
-  "theme_color": "#000000"
+  "background_color": "#f3f3f7",
+  "theme_color": "#5b5bf5"
 }
diff --git a/apps/ui/src/App.tsx b/apps/ui/src/App.tsx
index 0f888b117..17709c9d8 100644
--- a/apps/ui/src/App.tsx
+++ b/apps/ui/src/App.tsx
@@ -26,7 +26,7 @@ import { usePlatform } from "./hooks/use-platform";
 import { setupHttp } from "./utils/http";
 import { getConfig } from "./api/config";
 import { initGoEvents, onConfigChanged } from "./api/events";
-import { DownloadFilter } from "@mediago/shared-common";
+import { AppTheme, DownloadFilter } from "@mediago/shared-common";
 import { useAuth } from "./hooks/use-auth";
 import type { Locale } from "antd/es/locale";
 
@@ -37,6 +37,7 @@ const SettingPage = lazy(() => import("./pages/setting-page"));
 const ConverterPage = lazy(() => import("./pages/converter-page"));
 const SigninPage = lazy(() => import("./pages/signin-page"));
 const OverlayDialog = lazy(() => import("./pages/overlay-dialog"));
+const ShareRoute = lazy(() => import("./pages/share"));
 
 function getAlgorithm(appTheme: "dark" | "light") {
   return appTheme === "dark"
@@ -65,7 +66,9 @@ const App: FC = () => {
     useShallow(updateSelector),
   );
   const { setAppStore } = useAppStore(useShallow(setAppStoreSelector));
-  const { language } = useAppStore(useShallow(appStoreSelector));
+  const { language, theme: appTheme } = useAppStore(
+    useShallow(appStoreSelector),
+  );
   const { setBrowserStore } = useBrowserStore(useShallow(setBrowserSelector));
   const { theme, setTheme } = useSessionStore(useShallow(themeSelector));
   const [appLocale, setAppLocale] = useState<Locale>();
@@ -75,14 +78,6 @@ const App: FC = () => {
     setAppLocale(getAntdLocale(resolveAppLanguage(language)));
   }, [language]);
 
-  const themeChange = useMemoizedFn((event: MediaQueryListEvent) => {
-    if (event.matches) {
-      setTheme("dark");
-    } else {
-      setTheme("light");
-    }
-  });
-
   // 监听config变化
   const handleConfigChanged = useMemoizedFn(
     (_event: unknown, data: { key: string; value: unknown }) => {
@@ -179,20 +174,25 @@ const App: FC = () => {
     }
   }, []);
 
+  // Resolve theme (system/light/dark) -> Tailwind `.dark` class + AntD algorithm.
   useEffect(() => {
-    const isDarkTheme = matchMedia("(prefers-color-scheme: dark)");
-    isDarkTheme.addEventListener("change", themeChange);
-
-    if (isDarkTheme.matches) {
-      setTheme("dark");
-    } else {
-      setTheme("light");
-    }
-
-    return () => {
-      isDarkTheme.removeEventListener("change", themeChange);
+    const mq = matchMedia("(prefers-color-scheme: dark)");
+    const apply = () => {
+      const resolved =
+        appTheme === AppTheme.System
+          ? mq.matches
+            ? "dark"
+            : "light"
+          : appTheme === AppTheme.Dark
+            ? "dark"
+            : "light";
+      setTheme(resolved);
+      document.documentElement.classList.toggle("dark", resolved === "dark");
     };
-  }, []);
+    apply();
+    mq.addEventListener("change", apply);
+    return () => mq.removeEventListener("change", apply);
+  }, [appTheme, setTheme]);
 
   if (!adapterReady) {
     return <Loading />;
@@ -202,7 +202,15 @@ const App: FC = () => {
     <ConfigProvider
       locale={appLocale}
       componentSize={isWeb ? undefined : "small"}
-      theme={{ algorithm: getAlgorithm(theme) }}
+      theme={{
+        algorithm: getAlgorithm(theme),
+        token: {
+          colorPrimary: theme === "dark" ? "#7c7cff" : "#5b5bf5",
+          borderRadius: 10,
+          fontFamily:
+            "'Plus Jakarta Sans', system-ui, -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif",
+        },
+      }}
     >
       <AntdApp className="size-full overflow-hidden">
         <Routes>
@@ -254,6 +262,14 @@ const App: FC = () => {
                 </Suspense>
               }
             />
+            <Route
+              path="share"
+              element={
+                <Suspense fallback={<Loading />}>
+                  <ShareRoute />
+                </Suspense>
+              }
+            />
 
             <Route path="*" element={<div>404</div>} />
           </Route>
diff --git a/apps/ui/src/components/download-form.tsx b/apps/ui/src/components/download-form.tsx
index c5a559581..14a948166 100644
--- a/apps/ui/src/components/download-form.tsx
+++ b/apps/ui/src/components/download-form.tsx
@@ -251,7 +251,8 @@ export default forwardRef<DownloadFormRef, DownloadFormProps>(
         open={modalOpen}
         key={isEdit ? "edit" : "new"}
         title={isEdit ? t("editDownload") : t("newDownload")}
-        width={500}
+        width="min(500px, calc(100vw - 24px))"
+        className="mediago-download-modal"
         onCancel={() => setModalOpen(false)}
         afterOpenChange={afterOpenChange}
         destroyOnHidden={destroyOnClose}
@@ -288,9 +289,11 @@ export default forwardRef<DownloadFormRef, DownloadFormProps>(
         <Form
           form={form}
           autoFocus
-          labelCol={{ span: 5 }}
+          labelCol={{ xs: { span: 24 }, sm: { span: 5 } }}
+          wrapperCol={{ xs: { span: 24 }, sm: { span: 19 } }}
           layout="horizontal"
           colon={false}
+          labelWrap
           onValuesChange={handleValuesChange}
         >
           <Form.Item name="id" hidden>
diff --git a/apps/ui/src/components/download-modal.tsx b/apps/ui/src/components/download-modal.tsx
new file mode 100644
index 000000000..e9c50f7a7
--- /dev/null
+++ b/apps/ui/src/components/download-modal.tsx
@@ -0,0 +1,539 @@
+import { type DownloadTask, DownloadType } from "@mediago/shared-common";
+import { useAsyncEffect, useMemoizedFn } from "ahooks";
+import { App } from "antd";
+import { CircleAlert, Download, Folder, X } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useSWRConfig } from "swr";
+import { useShallow } from "zustand/react/shallow";
+import {
+  createDownloadTasks,
+  editDownloadTask,
+  getDownloadFolders,
+  startDownload,
+} from "@/api/download-task";
+import { MgButton, MgIconButton, MgSegment } from "@/components/mg";
+import { useDockerApi } from "@/hooks/use-docker-api";
+import { usePlatform } from "@/hooks/use-platform";
+import { appStoreSelector, useAppStore } from "@/store/app";
+import { downloadFormSelector, useConfigStore } from "@/store/config";
+import { useUiStore } from "@/store/ui";
+import { type MgType, typeMeta } from "@/theme/mg";
+import { cn, isWeb } from "@/utils";
+
+const URL_RE = /^(file|https?|magnet):\/\/.+/i;
+
+const TYPE_OPTIONS: { ui: MgType; value: DownloadType }[] = [
+  { ui: "m3u8", value: DownloadType.m3u8 },
+  { ui: "bilibili", value: DownloadType.bilibili },
+  { ui: "youtube", value: DownloadType.youtube },
+  { ui: "mp4", value: DownloadType.direct },
+  { ui: "mediago", value: DownloadType.mediago },
+];
+
+interface BatchRow {
+  idx: number;
+  url: string;
+  name: string;
+  folder: string;
+  valid: boolean;
+}
+
+function parseBatch(text: string, defaultFolder: string): BatchRow[] {
+  return text
+    .split("\n")
+    .map((l) => l.trim())
+    .filter(Boolean)
+    .map((line, i) => {
+      const [url, name = "", folder = ""] = line.split(/\s+/);
+      return {
+        idx: i + 1,
+        url,
+        name,
+        folder: folder || defaultFolder,
+        valid: URL_RE.test(url),
+      };
+    });
+}
+
+const inputCls =
+  "w-full rounded-[12px] border-[1.5px] border-mg-line bg-mg-surface2 px-3.5 text-mg-fg outline-none transition-colors focus:border-mg-primary focus:bg-mg-surface";
+
+export function DownloadModal() {
+  const { t } = useTranslation();
+  const { message } = App.useApp();
+  const { mutate } = useSWRConfig();
+  const { dialog } = usePlatform();
+  const { addVideosToDocker } = useDockerApi();
+  const { enableDocker, local } = useAppStore(useShallow(appStoreSelector));
+  const {
+    lastIsBatch,
+    lastDownloadTypes,
+    setLastIsBatch,
+    setLastDownloadTypes,
+  } = useConfigStore(useShallow(downloadFormSelector));
+
+  const { open, mode, editTask, prefill, close } = useUiStore(
+    useShallow((s) => ({
+      open: s.downloadModalOpen,
+      mode: s.downloadModalMode,
+      editTask: s.editTask,
+      prefill: s.prefill,
+      close: s.closeDownloadModal,
+    })),
+  );
+  const isEdit = mode === "edit";
+
+  const [type, setType] = useState<DownloadType>(DownloadType.m3u8);
+  const [batch, setBatch] = useState(false);
+  const [name, setName] = useState("");
+  const [url, setUrl] = useState("");
+  const [folder, setFolder] = useState("");
+  const [headers, setHeaders] = useState("");
+  const [batchText, setBatchText] = useState("");
+  const [urlTouched, setUrlTouched] = useState(false);
+  const [folders, setFolders] = useState<string[]>([]);
+  const [submitting, setSubmitting] = useState(false);
+
+  // initialize when opened
+  useEffect(() => {
+    if (!open) return;
+    setUrlTouched(false);
+    if (isEdit && editTask) {
+      setType(editTask.type ?? DownloadType.m3u8);
+      setBatch(false);
+      setName(editTask.name ?? "");
+      setUrl(editTask.url ?? "");
+      setFolder(editTask.folder ?? "");
+      setHeaders(editTask.headers ?? "");
+      setBatchText("");
+    } else {
+      setType(prefill?.type ?? lastDownloadTypes ?? DownloadType.m3u8);
+      setBatch(prefill?.batch ?? lastIsBatch ?? false);
+      setName(prefill?.name ?? "");
+      setUrl(prefill?.url ?? "");
+      setFolder(prefill?.folder ?? "");
+      setHeaders(prefill?.headers ?? "");
+      setBatchText(prefill?.batchList ?? "");
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open]);
+
+  useAsyncEffect(async () => {
+    if (!open) return;
+    try {
+      const f = await getDownloadFolders();
+      if (Array.isArray(f)) setFolders(f);
+    } catch {
+      // Go Core may not be ready
+    }
+  }, [open]);
+
+  const pickType = useMemoizedFn((v: DownloadType) => {
+    setType(v);
+    setLastDownloadTypes(v);
+  });
+  const pickBatch = useMemoizedFn((v: boolean) => {
+    setBatch(v);
+    setLastIsBatch(v);
+  });
+
+  const browseFolder = useMemoizedFn(async () => {
+    try {
+      const res = await dialog.open({ type: "directory" });
+      if (Array.isArray(res) && res[0]) setFolder(res[0]);
+    } catch {
+      // ignore
+    }
+  });
+
+  const urlError = urlTouched && url.trim() !== "" && !URL_RE.test(url);
+  // `folder` is a subdirectory under the download dir (empty = root). Do NOT
+  // default it to the absolute `local` dir — the Go core does
+  // filepath.Join(localDir, folder), so an absolute folder double-nests
+  // (e.g. /app/mediago/downloads/app/mediago/downloads).
+  const batchRows = batch ? parseBatch(batchText, folder) : [];
+  const validCount = batchRows.filter((r) => r.valid).length;
+  const invalidCount = batchRows.length - validCount;
+
+  const buildTasks = (): Omit<DownloadTask, "id">[] | null => {
+    if (batch) {
+      const tasks = batchRows
+        .filter((r) => r.valid)
+        .map((r) => ({
+          url: r.url,
+          name: r.name || undefined,
+          headers: headers || undefined,
+          type,
+          folder: r.folder || undefined,
+        }));
+      return tasks.length ? tasks : null;
+    }
+    if (!URL_RE.test(url)) return null;
+    return [
+      {
+        name: name || undefined,
+        url,
+        headers: headers || undefined,
+        type,
+        folder: folder || undefined,
+      },
+    ];
+  };
+
+  const refresh = () =>
+    mutate(
+      (key) =>
+        typeof key === "object" &&
+        key !== null &&
+        (key as { key?: string }).key === "api/tasks",
+    );
+
+  const submit = useMemoizedFn(async (now: boolean) => {
+    setUrlTouched(true);
+    const tasks = buildTasks();
+    if (!tasks) {
+      message.error(t("pleaseEnterCorrectFormInfo"));
+      return;
+    }
+    setSubmitting(true);
+    try {
+      if (isEdit && editTask) {
+        await editDownloadTask(editTask.id, tasks[0]);
+        if (now) await startDownload(editTask.id);
+      } else {
+        await createDownloadTasks(tasks, now);
+      }
+      close();
+      refresh();
+      message.success(t("addTaskSuccess"));
+    } catch (e) {
+      message.error((e as Error)?.message || t("pleaseEnterCorrectFormInfo"));
+    } finally {
+      setSubmitting(false);
+    }
+  });
+
+  const addToDocker = useMemoizedFn(async () => {
+    const tasks = buildTasks();
+    if (!tasks) {
+      message.error(t("pleaseEnterCorrectFormInfo"));
+      return;
+    }
+    try {
+      await addVideosToDocker({ items: tasks });
+      message.success(t("addToDockerSuccess"));
+    } catch (e) {
+      message.error((e as Error)?.message || t("pleaseEnterCorrectFormInfo"));
+    }
+  });
+
+  if (!open) return null;
+
+  return (
+    <div
+      onClick={close}
+      className="fixed inset-0 z-50 flex items-end justify-center bg-[rgba(15,15,30,.5)] backdrop-blur-[4px] [animation:mgfade_.18s_ease]"
+    >
+      <div
+        onClick={(e) => e.stopPropagation()}
+        className="flex max-h-[92vh] w-[min(620px,100%)] flex-col overflow-hidden rounded-t-[24px] bg-mg-surface [animation:mgpop_.22s_cubic-bezier(.2,.9,.3,1)]"
+      >
+        {/* header */}
+        <div className="flex items-start gap-3.5 border-b border-mg-line px-[22px] pb-3.5 pt-5">
+          <div className="flex size-[42px] shrink-0 items-center justify-center rounded-[13px] bg-mg-primary-weak">
+            <Download size={22} className="text-mg-primary" strokeWidth={2.2} />
+          </div>
+          <div className="min-w-0 flex-1">
+            <h2 className="text-[18px] font-extrabold tracking-[-0.02em] text-mg-fg">
+              {isEdit ? t("editDownload") : t("newDownload")}
+            </h2>
+            <p className="mt-0.5 text-[12.5px] text-mg-fg2">{t("modalSub")}</p>
+          </div>
+          <MgIconButton variant="soft" onClick={close} title={t("cancel")}>
+            <X size={17} strokeWidth={2.4} />
+          </MgIconButton>
+        </div>
+
+        {/* single / batch tabs */}
+        {!isEdit && (
+          <div className="px-[22px] pt-4">
+            <MgSegment
+              variant="card"
+              className="flex w-full"
+              itemClassName="flex-1"
+              value={batch ? "batch" : "single"}
+              onChange={(v) => pickBatch(v === "batch")}
+              options={[
+                { value: "single", label: t("singleDownload") },
+                { value: "batch", label: t("batchDownload") },
+              ]}
+            />
+          </div>
+        )}
+
+        {/* body */}
+        <div className="flex flex-col gap-4 overflow-y-auto px-[22px] py-[18px]">
+          {/* type picker */}
+          <div>
+            <label className="mb-2 block text-[12.5px] font-bold text-mg-fg2">
+              {t("videoType")}
+            </label>
+            <div className="grid grid-cols-[repeat(auto-fit,minmax(96px,1fr))] gap-2">
+              {TYPE_OPTIONS.map((o) => {
+                const meta = typeMeta(o.ui);
+                const on = type === o.value;
+                return (
+                  <button
+                    key={o.ui}
+                    type="button"
+                    onClick={() => pickType(o.value)}
+                    className={cn(
+                      "flex h-16 flex-col items-center justify-center gap-1.5 rounded-[13px] border-[1.5px] transition-colors",
+                      on
+                        ? "border-mg-primary bg-mg-primary-weak"
+                        : "border-mg-line bg-mg-surface2",
+                    )}
+                  >
+                    <span className="text-[18px]">{meta.glyph}</span>
+                    <span
+                      style={{ color: on ? "var(--mg-primary)" : meta.color }}
+                      className="text-[11.5px] font-bold"
+                    >
+                      {meta.label}
+                    </span>
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+
+          {!batch ? (
+            <>
+              <Field label={t("videoName")}>
+                <input
+                  className={cn(inputCls, "h-11 text-[14px]")}
+                  value={name}
+                  placeholder={t("pleaseEnterVideoName")}
+                  onChange={(e) => setName(e.target.value)}
+                />
+              </Field>
+              <Field label={t("videoLink")}>
+                <input
+                  className={cn(
+                    inputCls,
+                    "h-11 font-mono text-[12.5px]",
+                    urlError && "border-[#f43f5e]",
+                  )}
+                  value={url}
+                  placeholder={t("pleaseEnterOnlineVideoUrl")}
+                  onChange={(e) => setUrl(e.target.value)}
+                  onBlur={() => setUrlTouched(true)}
+                />
+                {urlError && (
+                  <div className="mt-1.5 flex items-center gap-1.5 text-[11.5px] text-[#f43f5e]">
+                    <CircleAlert size={13} strokeWidth={2.2} />
+                    {t("pleaseEnterCorrectVideoLink")}
+                  </div>
+                )}
+              </Field>
+              <Field label={t("folder")}>
+                <div className="flex gap-2">
+                  <input
+                    className={cn(
+                      inputCls,
+                      "h-11 flex-1 font-mono text-[12.5px]",
+                    )}
+                    value={folder}
+                    list="mg-folders"
+                    placeholder={local || t("pleaseInputVideoFolder")}
+                    onChange={(e) => setFolder(e.target.value)}
+                  />
+                  <datalist id="mg-folders">
+                    {folders.map((f) => (
+                      <option key={f} value={f} />
+                    ))}
+                  </datalist>
+                  {!isWeb && (
+                    <MgIconButton
+                      variant="soft"
+                      size="lg"
+                      className="size-11"
+                      onClick={browseFolder}
+                      title={t("selectFolder")}
+                    >
+                      <Folder size={18} strokeWidth={2} />
+                    </MgIconButton>
+                  )}
+                </div>
+              </Field>
+              <Field
+                label={
+                  <>
+                    {t("additionalHeaders")}{" "}
+                    <span className="font-medium text-mg-fg3">
+                      {t("optional")}
+                    </span>
+                  </>
+                }
+              >
+                <textarea
+                  className={cn(
+                    inputCls,
+                    "h-[70px] resize-y py-2.5 font-mono text-[12px] leading-relaxed",
+                  )}
+                  value={headers}
+                  placeholder={"Referer: https://...\nUser-Agent: ..."}
+                  onChange={(e) => setHeaders(e.target.value)}
+                />
+              </Field>
+            </>
+          ) : (
+            <>
+              <Field
+                label={
+                  <div className="flex items-center justify-between">
+                    <span>{t("videoLink")}</span>
+                    <span className="font-mono text-[11px] font-normal text-mg-fg3">
+                      url [name] [folder]
+                    </span>
+                  </div>
+                }
+              >
+                <textarea
+                  className={cn(
+                    inputCls,
+                    "h-[120px] resize-y py-3 font-mono text-[12px] leading-[1.7]",
+                  )}
+                  value={batchText}
+                  placeholder={t("videoLikeDescription")}
+                  onChange={(e) => setBatchText(e.target.value)}
+                />
+              </Field>
+              <div>
+                <div className="mb-2.5 flex items-center gap-2">
+                  <span className="text-[12.5px] font-bold text-mg-fg2">
+                    {t("parsePreview")}
+                  </span>
+                  <span className="rounded-md bg-mg-primary-weak px-2 py-0.5 text-[11px] font-bold text-mg-primary">
+                    {t("validCount", { count: validCount })}
+                  </span>
+                  {invalidCount > 0 && (
+                    <span className="rounded-md bg-[rgba(245,158,11,.14)] px-2 py-0.5 text-[11px] font-bold text-[#d97706]">
+                      {t("invalidCount", { count: invalidCount })}
+                    </span>
+                  )}
+                </div>
+                {batchRows.length === 0 ? (
+                  <div className="rounded-[12px] border-[1.5px] border-dashed border-mg-line p-[26px] text-center text-[12.5px] text-mg-fg3">
+                    {t("batchEmptyHint")}
+                  </div>
+                ) : (
+                  <div className="max-h-[200px] overflow-y-auto rounded-[12px] border border-mg-line">
+                    {batchRows.map((r) => (
+                      <div
+                        key={r.idx}
+                        className={cn(
+                          "flex items-center gap-2.5 border-b border-mg-line px-3.5 py-2.5 last:border-b-0",
+                          !r.valid && "bg-[rgba(245,158,11,.06)]",
+                        )}
+                      >
+                        <span
+                          className={cn(
+                            "flex size-[22px] shrink-0 items-center justify-center rounded-[7px] text-[11px] font-extrabold",
+                            r.valid
+                              ? "bg-mg-primary-weak text-mg-primary"
+                              : "bg-[rgba(245,158,11,.16)] text-[#d97706]",
+                          )}
+                        >
+                          {r.idx}
+                        </span>
+                        <div className="min-w-0 flex-1">
+                          <div
+                            className={cn(
+                              "truncate text-[13px] font-bold",
+                              r.valid ? "text-mg-fg" : "text-mg-fg2",
+                            )}
+                          >
+                            {r.name || r.url}
+                          </div>
+                          <div className="truncate font-mono text-[11px] text-mg-fg3">
+                            {r.url}
+                          </div>
+                        </div>
+                        {r.valid ? (
+                          <span className="text-[#10b981]">✓</span>
+                        ) : (
+                          <CircleAlert
+                            size={17}
+                            className="text-[#d97706]"
+                            strokeWidth={2.2}
+                          />
+                        )}
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+              <Field label={t("sharedHeaders")}>
+                <textarea
+                  className={cn(
+                    inputCls,
+                    "h-14 resize-y py-2.5 font-mono text-[12px] leading-relaxed",
+                  )}
+                  value={headers}
+                  placeholder={"Referer: https://..."}
+                  onChange={(e) => setHeaders(e.target.value)}
+                />
+              </Field>
+            </>
+          )}
+        </div>
+
+        {/* footer */}
+        <div className="flex items-center gap-2.5 border-t border-mg-line px-[22px] py-3.5">
+          {enableDocker && (
+            <MgButton variant="surface" size="lg" onClick={addToDocker}>
+              {t("addToDocker")}
+            </MgButton>
+          )}
+          <div className="flex-1" />
+          <MgButton
+            variant="surface"
+            size="lg"
+            disabled={submitting}
+            onClick={() => submit(false)}
+          >
+            {t("addToList")}
+          </MgButton>
+          <MgButton
+            variant="primary"
+            size="lg"
+            disabled={submitting}
+            onClick={() => submit(true)}
+          >
+            <Download size={16} strokeWidth={2.2} />
+            {t("downloadNow")}
+          </MgButton>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Field({
+  label,
+  children,
+}: {
+  label: React.ReactNode;
+  children: React.ReactNode;
+}) {
+  return (
+    <div>
+      <label className="mb-1.5 block text-[12.5px] font-bold text-mg-fg2">
+        {label}
+      </label>
+      {children}
+    </div>
+  );
+}
diff --git a/apps/ui/src/components/loading.tsx b/apps/ui/src/components/loading.tsx
index 516a0dd7b..66e9267a1 100644
--- a/apps/ui/src/components/loading.tsx
+++ b/apps/ui/src/components/loading.tsx
@@ -1,12 +1,13 @@
-import { Spin } from "antd";
 import type { FC } from "react";
 
+/**
+ * Route/Suspense fallback. Deliberately a blank panel in the app background
+ * color (no spinner, no white/dark box) so switching tabs / loading a route
+ * chunk does NOT flash a mismatched-color box. The chunks are small and load
+ * fast; a same-color blank for a few ms is imperceptible.
+ */
 const Loading: FC = () => {
-  return (
-    <div className="flex h-full w-full items-center justify-center bg-white dark:bg-[#1F2024]">
-      <Spin />
-    </div>
-  );
+  return <div className="size-full bg-mg-bg" />;
 };
 
 export default Loading;
diff --git a/apps/ui/src/components/mg/button.tsx b/apps/ui/src/components/mg/button.tsx
new file mode 100644
index 000000000..247a7b7a6
--- /dev/null
+++ b/apps/ui/src/components/mg/button.tsx
@@ -0,0 +1,91 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import { type ButtonHTMLAttributes, forwardRef } from "react";
+import { cn } from "@/utils";
+
+/** Text button — matches the redesign's button language (MediaGo.dc.html). */
+export const mgButton = cva(
+  "inline-flex select-none cursor-pointer items-center justify-center gap-2 font-bold outline-none transition-[filter,background-color,border-color,color] disabled:cursor-not-allowed disabled:opacity-60",
+  {
+    variants: {
+      variant: {
+        primary:
+          "border border-transparent bg-mg-primary text-mg-primary-fg shadow-[0_6px_16px_-5px_rgba(91,91,245,.55)] hover:brightness-[1.06]",
+        surface:
+          "border border-mg-line bg-mg-surface text-mg-fg hover:border-mg-line2",
+        soft: "border border-mg-line bg-mg-surface2 text-mg-fg",
+        ghost:
+          "border border-transparent bg-transparent text-mg-fg2 hover:bg-mg-surface2",
+        dashed:
+          "border border-dashed border-mg-line2 bg-transparent text-mg-fg3 hover:text-mg-fg2",
+        danger:
+          "border border-transparent bg-[#f43f5e] text-white hover:brightness-[1.06]",
+        dangerSoft:
+          "border border-transparent bg-[rgba(244,63,94,.1)] text-[#f43f5e]",
+      },
+      size: {
+        sm: "h-[34px] rounded-[9px] px-3 text-[12.5px]",
+        md: "h-10 rounded-[11px] px-4 text-[13.5px]",
+        lg: "h-11 rounded-xl px-5 text-[13.5px]",
+      },
+    },
+    defaultVariants: { variant: "surface", size: "md" },
+  },
+);
+
+export interface MgButtonProps
+  extends
+    ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof mgButton> {}
+
+export const MgButton = forwardRef<HTMLButtonElement, MgButtonProps>(
+  ({ className, variant, size, type = "button", ...props }, ref) => (
+    <button
+      ref={ref}
+      type={type}
+      className={cn(mgButton({ variant, size }), className)}
+      {...props}
+    />
+  ),
+);
+MgButton.displayName = "MgButton";
+
+/** Square icon button. */
+export const mgIconButton = cva(
+  "inline-flex shrink-0 cursor-pointer items-center justify-center outline-none transition-colors disabled:cursor-not-allowed disabled:opacity-60",
+  {
+    variants: {
+      variant: {
+        primary: "border border-transparent bg-mg-primary text-white",
+        surface:
+          "border border-mg-line bg-mg-surface text-mg-fg2 hover:text-mg-fg",
+        soft: "border border-transparent bg-mg-surface2 text-mg-fg2",
+        ghost:
+          "border border-transparent bg-transparent text-mg-fg2 hover:bg-mg-surface2",
+        danger: "border border-transparent bg-[#f43f5e] text-white",
+      },
+      size: {
+        sm: "size-[34px] rounded-[9px]",
+        md: "size-9 rounded-[10px]",
+        lg: "size-[38px] rounded-[11px]",
+      },
+    },
+    defaultVariants: { variant: "surface", size: "sm" },
+  },
+);
+
+export interface MgIconButtonProps
+  extends
+    ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof mgIconButton> {}
+
+export const MgIconButton = forwardRef<HTMLButtonElement, MgIconButtonProps>(
+  ({ className, variant, size, type = "button", ...props }, ref) => (
+    <button
+      ref={ref}
+      type={type}
+      className={cn(mgIconButton({ variant, size }), className)}
+      {...props}
+    />
+  ),
+);
+MgIconButton.displayName = "MgIconButton";
diff --git a/apps/ui/src/components/mg/card.tsx b/apps/ui/src/components/mg/card.tsx
new file mode 100644
index 000000000..16a005d36
--- /dev/null
+++ b/apps/ui/src/components/mg/card.tsx
@@ -0,0 +1,52 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import { cn } from "@/utils";
+
+/** Surface card — bg-surface, 1px line border, 16px radius by default. */
+export function MgCard({
+  className,
+  children,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn(
+        "rounded-[16px] border border-mg-line bg-mg-surface",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+/**
+ * Small colored badge/pill (status pill, type tag, count chip).
+ * Colors come from the status/type meta tables, applied inline.
+ */
+export function MgPill({
+  color,
+  bg,
+  children,
+  className,
+  title,
+}: {
+  color?: string;
+  bg?: string;
+  children: ReactNode;
+  className?: string;
+  title?: string;
+}) {
+  return (
+    <span
+      title={title}
+      style={{ color, background: bg }}
+      className={cn(
+        "inline-flex items-center gap-1 whitespace-nowrap rounded-md px-[7px] py-[2px] text-[10.5px] font-bold",
+        className,
+      )}
+    >
+      {children}
+    </span>
+  );
+}
diff --git a/apps/ui/src/components/mg/controls.tsx b/apps/ui/src/components/mg/controls.tsx
new file mode 100644
index 000000000..73f75274a
--- /dev/null
+++ b/apps/ui/src/components/mg/controls.tsx
@@ -0,0 +1,138 @@
+import type { ReactNode } from "react";
+import { cn } from "@/utils";
+
+/** Pill switch — 44x26 track, 22px knob (MediaGo.dc.html settings toggle). */
+export function MgToggle({
+  checked,
+  onChange,
+  disabled,
+  className,
+}: {
+  checked: boolean;
+  onChange?: (v: boolean) => void;
+  disabled?: boolean;
+  className?: string;
+}) {
+  return (
+    <button
+      type="button"
+      role="switch"
+      aria-checked={checked}
+      disabled={disabled}
+      onClick={() => !disabled && onChange?.(!checked)}
+      className={cn(
+        "relative h-[26px] w-11 shrink-0 cursor-pointer rounded-full p-0 transition-colors disabled:cursor-not-allowed disabled:opacity-60",
+        checked ? "bg-mg-primary" : "bg-mg-line2",
+        className,
+      )}
+    >
+      <span
+        className="absolute top-[2px] size-[22px] rounded-full bg-white shadow-[0_2px_5px_rgba(0,0,0,.25)] transition-transform"
+        style={{ transform: `translateX(${checked ? "20px" : "2px"})` }}
+      />
+    </button>
+  );
+}
+
+export interface MgSegmentOption<T> {
+  value: T;
+  label: ReactNode;
+}
+
+/**
+ * Segmented control.
+ * - "solid" (default): active = primary fill / white text (settings, quality)
+ * - "card": active = surface card + shadow (modal single/batch tabs)
+ */
+export function MgSegment<T extends string | number>({
+  value,
+  onChange,
+  options,
+  variant = "solid",
+  className,
+  itemClassName,
+}: {
+  value: T;
+  onChange: (v: T) => void;
+  options: MgSegmentOption<T>[];
+  variant?: "solid" | "card";
+  className?: string;
+  itemClassName?: string;
+}) {
+  return (
+    <div
+      className={cn(
+        "inline-flex gap-[3px] rounded-[10px] bg-mg-surface2 p-[3px]",
+        className,
+      )}
+    >
+      {options.map((opt) => {
+        const on = opt.value === value;
+        return (
+          <button
+            key={String(opt.value)}
+            type="button"
+            onClick={() => onChange(opt.value)}
+            className={cn(
+              "h-[30px] cursor-pointer rounded-lg px-3 text-[12px] font-bold transition-colors",
+              on
+                ? variant === "card"
+                  ? "bg-mg-surface text-mg-fg shadow-[0_2px_6px_-2px_rgba(20,20,40,.18)]"
+                  : "bg-mg-primary text-white"
+                : variant === "card"
+                  ? "bg-transparent text-mg-fg3"
+                  : "bg-transparent text-mg-fg2",
+              itemClassName,
+            )}
+          >
+            {opt.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+/** Numeric stepper (−  value  +). */
+export function MgStepper({
+  value,
+  onChange,
+  min = 1,
+  max = 99,
+  className,
+}: {
+  value: number;
+  onChange: (v: number) => void;
+  min?: number;
+  max?: number;
+  className?: string;
+}) {
+  return (
+    <div
+      className={cn(
+        "inline-flex items-center overflow-hidden rounded-[10px] border border-mg-line",
+        className,
+      )}
+    >
+      <button
+        type="button"
+        aria-label="decrease"
+        onClick={() => onChange(Math.max(min, value - 1))}
+        className="flex size-[34px] cursor-pointer items-center justify-center bg-mg-surface2 text-[18px] font-bold text-mg-fg"
+      >
+        −
+      </button>
+      <span className="min-w-[38px] text-center text-[14px] font-extrabold tabular-nums">
+        {value}
+      </span>
+      <button
+        type="button"
+        aria-label="increase"
+        onClick={() => onChange(Math.min(max, value + 1))}
+        className="flex size-[34px] cursor-pointer items-center justify-center bg-mg-surface2 text-[18px] font-bold text-mg-fg"
+      >
+        +
+      </button>
+    </div>
+  );
+}
diff --git a/apps/ui/src/components/mg/index.ts b/apps/ui/src/components/mg/index.ts
new file mode 100644
index 000000000..4cf28c293
--- /dev/null
+++ b/apps/ui/src/components/mg/index.ts
@@ -0,0 +1,5 @@
+export { MgButton, MgIconButton, mgButton, mgIconButton } from "./button";
+export type { MgButtonProps, MgIconButtonProps } from "./button";
+export { MgToggle, MgSegment, MgStepper } from "./controls";
+export type { MgSegmentOption } from "./controls";
+export { MgCard, MgPill } from "./card";
diff --git a/apps/ui/src/components/page-container.tsx b/apps/ui/src/components/page-container.tsx
index 1964a3865..8e380c08e 100644
--- a/apps/ui/src/components/page-container.tsx
+++ b/apps/ui/src/components/page-container.tsx
@@ -20,20 +20,33 @@ const PageContainer: FC<PageContainerProps> = ({
   wrapperClassName,
 }) => {
   return (
-    <div className={cn("flex h-full flex-col gap-3 p-3", wrapperClassName)}>
+    <div
+      className={cn(
+        "mediago-page-container flex h-full flex-col gap-3 p-3",
+        wrapperClassName,
+      )}
+    >
       {title && (
-        <div className="flex flex-row items-center justify-between rounded-lg bg-white p-3 dark:bg-[#1F2024]">
-          <div className="flex flex-row gap-3">
-            <div className="text-sm text-[#343434] dark:text-white">
+        <div className="mediago-page-titlebar flex flex-col gap-2 rounded-lg bg-white p-3 sm:flex-row sm:items-center sm:justify-between dark:bg-[#1F2024]">
+          <div className="flex min-w-0 flex-row gap-3">
+            <div className="min-w-0 truncate text-sm text-[#343434] dark:text-white">
               {title}
             </div>
             {titleExtra && <div>{titleExtra}</div>}
           </div>
-          {rightExtra && <div>{rightExtra}</div>}
+          {rightExtra && (
+            <div className="mediago-page-title-actions w-full sm:w-auto">
+              {rightExtra}
+            </div>
+          )}
         </div>
       )}
 
-      <div className={cn("flex-1 overflow-auto", className)}>{children}</div>
+      <div
+        className={cn("mediago-page-content flex-1 overflow-auto", className)}
+      >
+        {children}
+      </div>
     </div>
   );
 };
diff --git a/apps/ui/src/components/task-context-menu.tsx b/apps/ui/src/components/task-context-menu.tsx
new file mode 100644
index 000000000..d266cd3cf
--- /dev/null
+++ b/apps/ui/src/components/task-context-menu.tsx
@@ -0,0 +1,89 @@
+import { ArrowDownToLine, RotateCw, SquareCheck, Trash2 } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { useShallow } from "zustand/react/shallow";
+import { useUiStore } from "@/store/ui";
+import { cn } from "@/utils";
+
+interface Props {
+  onSelect: (id: number) => void;
+  onDownload: (id: number) => void;
+  onRefresh: () => void;
+  onDelete: (id: number) => void;
+}
+
+/** Custom task right-click menu (design lines 498-513). State lives in useUiStore. */
+export function TaskContextMenu({
+  onSelect,
+  onDownload,
+  onRefresh,
+  onDelete,
+}: Props) {
+  const { t } = useTranslation();
+  const { ctx, closeContextMenu } = useUiStore(
+    useShallow((s) => ({ ctx: s.ctx, closeContextMenu: s.closeContextMenu })),
+  );
+
+  if (!ctx.open || ctx.taskId === null || ctx.taskId === undefined) return null;
+  const id = ctx.taskId;
+
+  const run = (fn: () => void) => () => {
+    fn();
+    closeContextMenu();
+  };
+
+  const items = [
+    {
+      key: "select",
+      label: t("select"),
+      Icon: SquareCheck,
+      danger: false,
+      act: run(() => onSelect(id)),
+    },
+    {
+      key: "download",
+      label: t("download"),
+      Icon: ArrowDownToLine,
+      danger: false,
+      act: run(() => onDownload(id)),
+    },
+    {
+      key: "refresh",
+      label: t("refresh"),
+      Icon: RotateCw,
+      danger: false,
+      act: run(() => onRefresh()),
+    },
+    {
+      key: "delete",
+      label: t("delete"),
+      Icon: Trash2,
+      danger: true,
+      act: run(() => onDelete(id)),
+    },
+  ];
+
+  return (
+    <div className="fixed inset-0 z-40" onClick={closeContextMenu}>
+      <div
+        onClick={(e) => e.stopPropagation()}
+        style={{ left: ctx.x, top: ctx.y }}
+        className="absolute w-[182px] rounded-[13px] border border-mg-line bg-mg-surface p-1.5 shadow-[0_18px_50px_-12px_rgba(20,20,40,.4)] [animation:mgpop_.14s_ease]"
+      >
+        {items.map(({ key, label, Icon, danger, act }) => (
+          <button
+            key={key}
+            type="button"
+            onClick={act}
+            className={cn(
+              "flex h-[38px] w-full items-center gap-[11px] rounded-[9px] px-[11px] text-left text-[13px] font-semibold transition-colors hover:bg-mg-surface2",
+              danger ? "text-[#f43f5e]" : "text-mg-fg",
+            )}
+          >
+            <Icon size={16} strokeWidth={2.2} />
+            {label}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/ui/src/globals.css b/apps/ui/src/globals.css
index 01bd20a85..0582a8808 100644
--- a/apps/ui/src/globals.css
+++ b/apps/ui/src/globals.css
@@ -1,7 +1,9 @@
+@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap");
 @import "tailwindcss";
 @import "tw-animate-css";
 
-/* @custom-variant dark (&:is(.dark *)); */
+/* Class-based dark mode (driven by .dark on <html> from the resolved theme). */
+@custom-variant dark (&:is(.dark *));
 
 html,
 body {
@@ -14,10 +16,11 @@ body {
   width: 100vw;
 }
 
+/* ---- MediaGo redesign: scrollbar ---- */
 * {
   &::-webkit-scrollbar {
-    height: 8px;
-    width: 8px;
+    height: 10px;
+    width: 10px;
   }
 
   &::-webkit-scrollbar-track {
@@ -25,59 +28,66 @@ body {
   }
 
   &::-webkit-scrollbar-thumb {
-    background: rgba(0 0 0 / 15%);
+    background: var(--mg-line2);
+    border: 3px solid transparent;
+    background-clip: content-box;
+    border-radius: 8px;
   }
 
-  @media (prefers-color-scheme: dark) {
-    &::-webkit-scrollbar-thumb {
-      background: rgba(255 255 255 / 15%);
-    }
+  &::-webkit-scrollbar-thumb:hover {
+    background: var(--mg-fg3);
+    background-clip: content-box;
   }
 }
 
-.ant-modal-content {
-  &:before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 100px;
-    background-image: linear-gradient(#89d4ff 0%, rgba(255, 255, 255, 0) 100%);
-    border-radius: 8px 8px 0 0;
-    z-index: 1;
-  }
-  &:after {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 100px;
-    background-image: url("./assets/images/modal-bg.png");
-    background-size: contain;
-    background-repeat: no-repeat;
-    background-position: 80% 0;
-    border-radius: 0 0 8px 8px;
-    z-index: 1;
-  }
-  @media (prefers-color-scheme: dark) {
-    &:before {
-      filter: invert(100%) hue-rotate(180deg);
-    }
-  }
-  @media (prefers-color-scheme: dark) {
-    &:after {
-      filter: invert(100%) hue-rotate(180deg) contrast(100%);
-    }
-  }
-
-  .ant-modal-header,
-  .ant-modal-body,
-  .ant-modal-footer {
-    position: relative;
-    z-index: 2;
-    background: transparent;
+/* ---- MediaGo redesign: animations (from MediaGo.dc.html) ---- */
+@keyframes mgspin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes mgpulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.35;
+  }
+}
+@keyframes mgbar {
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: 28px 0;
+  }
+}
+@keyframes mgpop {
+  0% {
+    transform: scale(0.96) translateY(8px);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(1) translateY(0);
+    opacity: 1;
+  }
+}
+@keyframes mgfade {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes mgblink {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
   }
 }
 
@@ -118,6 +128,38 @@ body {
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
+
+  /* MediaGo design tokens -> Tailwind color utilities (bg-mg-surface, text-mg-fg2, ...) */
+  --color-mg-bg: var(--mg-bg);
+  --color-mg-surface: var(--mg-surface);
+  --color-mg-surface2: var(--mg-surface2);
+  --color-mg-elev: var(--mg-elev);
+  --color-mg-fg: var(--mg-fg);
+  --color-mg-fg2: var(--mg-fg2);
+  --color-mg-fg3: var(--mg-fg3);
+  --color-mg-line: var(--mg-line);
+  --color-mg-line2: var(--mg-line2);
+  --color-mg-primary: var(--mg-primary);
+  --color-mg-primary-weak: var(--mg-primary-weak);
+  --color-mg-primary-fg: var(--mg-primary-fg);
+
+  /* status + type accent colors (used as utilities where convenient) */
+  --color-mg-waiting: #94a3b8;
+  --color-mg-preparing: #8b5cf6;
+  --color-mg-downloading: #3b82f6;
+  --color-mg-paused: #f59e0b;
+  --color-mg-success: #10b981;
+  --color-mg-failed: #f43f5e;
+
+  /* fonts */
+  --font-sans:
+    "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto,
+    "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
+  --font-mono: "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;
+
+  /* design breakpoints: mobile <720, tablet <1080, desktop >=1080 */
+  --breakpoint-mg-tablet: 720px;
+  --breakpoint-mg-desktop: 1080px;
 }
 
 :root {
@@ -153,6 +195,21 @@ body {
   --sidebar-accent-foreground: oklch(0.205 0 0);
   --sidebar-border: oklch(0.922 0 0);
   --sidebar-ring: oklch(0.708 0 0);
+
+  /* ---- MediaGo light tokens (from MediaGo.dc.html _tokens()) ---- */
+  --mg-bg: #f3f3f7;
+  --mg-surface: #ffffff;
+  --mg-surface2: #f5f5f9;
+  --mg-elev: #ffffff;
+  --mg-fg: #16162a;
+  --mg-fg2: #5c5c72;
+  --mg-fg3: #9696aa;
+  --mg-line: #ececf1;
+  --mg-line2: #e0e0e8;
+  --mg-primary: #5b5bf5;
+  --mg-primary-weak: #eeeefe;
+  --mg-primary-fg: #ffffff;
+  --mg-shadow: rgba(20, 20, 40, 0.12);
 }
 
 .dark {
@@ -187,13 +244,36 @@ body {
   --sidebar-accent-foreground: oklch(0.985 0 0);
   --sidebar-border: oklch(1 0 0 / 10%);
   --sidebar-ring: oklch(0.556 0 0);
+
+  /* ---- MediaGo dark tokens ---- */
+  --mg-bg: #0d0d15;
+  --mg-surface: #16161f;
+  --mg-surface2: #1e1e29;
+  --mg-elev: #1a1a23;
+  --mg-fg: #f0f0f6;
+  --mg-fg2: #a2a2b8;
+  --mg-fg3: #6c6c82;
+  --mg-line: #262631;
+  --mg-line2: #33333f;
+  --mg-primary: #7c7cff;
+  --mg-primary-weak: rgba(124, 124, 255, 0.16);
+  --mg-primary-fg: #ffffff;
+  --mg-shadow: rgba(0, 0, 0, 0.5);
 }
 
 @layer base {
   * {
     @apply border-border outline-ring/50;
+    /* Kill the mobile tap-highlight box that flashes on every tap
+       (bottom nav, links, etc.). Custom :active / active states replace it. */
+    -webkit-tap-highlight-color: transparent;
   }
   body {
-    @apply bg-background text-foreground;
+    background: var(--mg-bg);
+    color: var(--mg-fg);
+    font-family: var(--font-sans);
+    font-size: 14px;
+    letter-spacing: -0.01em;
+    -webkit-font-smoothing: antialiased;
   }
 }
diff --git a/apps/ui/src/hooks/use-breakpoint.ts b/apps/ui/src/hooks/use-breakpoint.ts
new file mode 100644
index 000000000..b25e750c8
--- /dev/null
+++ b/apps/ui/src/hooks/use-breakpoint.ts
@@ -0,0 +1,48 @@
+import { useEffect, useState } from "react";
+
+/**
+ * Responsive breakpoints from the source design (MediaGo.dc.html `bp()`):
+ *   mobile  < 720px   — no sidebar; top bar + bottom nav + FAB
+ *   tablet  < 1080px  — icon-only sidebar rail (74px)
+ *   desktop >= 1080px — full sidebar (244px), collapsible to rail
+ */
+export type Breakpoint = "mobile" | "tablet" | "desktop";
+
+export const MG_TABLET = 720;
+export const MG_DESKTOP = 1080;
+
+function resolve(width: number): Breakpoint {
+  if (width < MG_TABLET) return "mobile";
+  if (width < MG_DESKTOP) return "tablet";
+  return "desktop";
+}
+
+export interface BreakpointState {
+  width: number;
+  bp: Breakpoint;
+  isMobile: boolean;
+  isTablet: boolean;
+  isDesktop: boolean;
+}
+
+export function useBreakpoint(): BreakpointState {
+  const [width, setWidth] = useState<number>(() =>
+    typeof window === "undefined" ? MG_DESKTOP + 200 : window.innerWidth,
+  );
+
+  useEffect(() => {
+    const onResize = () => setWidth(window.innerWidth);
+    window.addEventListener("resize", onResize);
+    onResize();
+    return () => window.removeEventListener("resize", onResize);
+  }, []);
+
+  const bp = resolve(width);
+  return {
+    width,
+    bp,
+    isMobile: bp === "mobile",
+    isTablet: bp === "tablet",
+    isDesktop: bp === "desktop",
+  };
+}
diff --git a/apps/ui/src/hooks/use-tasks.ts b/apps/ui/src/hooks/use-tasks.ts
index 1f6ea8ba0..5c78c54d3 100644
--- a/apps/ui/src/hooks/use-tasks.ts
+++ b/apps/ui/src/hooks/use-tasks.ts
@@ -59,6 +59,9 @@ export function useTasks(filter: DownloadFilter = DownloadFilter.list) {
     ({ args }) => {
       return fetchDownloadTasks(args);
     },
+    // Keep showing the current list while the next filter/page loads, so
+    // switching Downloads <-> Completed doesn't flash the loading skeleton.
+    { keepPreviousData: true },
   );
 
   const detail: DownloadTaskDetails[] = useMemo(() => {
diff --git a/apps/ui/src/layout/app-bottom-nav.tsx b/apps/ui/src/layout/app-bottom-nav.tsx
new file mode 100644
index 000000000..bce584095
--- /dev/null
+++ b/apps/ui/src/layout/app-bottom-nav.tsx
@@ -0,0 +1,27 @@
+import { Link } from "react-router-dom";
+import { cn } from "@/utils";
+import { useNavItems } from "./nav";
+
+/** Mobile bottom navigation (replaces the sidebar below 720px). */
+export function AppBottomNav() {
+  const items = useNavItems();
+  return (
+    <nav className="z-20 flex h-16 shrink-0 select-none items-stretch border-t border-mg-line bg-mg-surface px-[6px]">
+      {items.map(({ key, to, label, Icon, active }) => (
+        <Link
+          key={key}
+          to={to}
+          className={cn(
+            "flex flex-1 flex-col items-center justify-center gap-[3px] transition-colors",
+            active ? "text-mg-primary" : "text-mg-fg3",
+          )}
+        >
+          <Icon size={22} strokeWidth={2} />
+          <span className="max-w-full truncate px-1 text-[10px] font-bold">
+            {label}
+          </span>
+        </Link>
+      ))}
+    </nav>
+  );
+}
diff --git a/apps/ui/src/layout/app-header.tsx b/apps/ui/src/layout/app-header.tsx
index 87fed34ce..77c3b3eec 100644
--- a/apps/ui/src/layout/app-header.tsx
+++ b/apps/ui/src/layout/app-header.tsx
@@ -1,54 +1,137 @@
+import { AppLanguage, AppTheme } from "@mediago/shared-common";
 import { useMemoizedFn } from "ahooks";
-import { useTranslation } from "react-i18next";
-import { HelpIcon } from "@/assets/svg";
-import { cn } from "@/utils";
-import LogoImg from "../assets/images/logo.png";
-import { usePlatform } from "@/hooks/use-platform";
+import { Globe, Menu, Moon, Sun } from "lucide-react";
+import { useNavigate } from "react-router-dom";
+import { useShallow } from "zustand/react/shallow";
+import { useBreakpoint } from "@/hooks/use-breakpoint";
+import {
+  appStoreSelector,
+  setAppStoreSelector,
+  useAppStore,
+} from "@/store/app";
+import { themeSelector, useSessionStore } from "@/store/session";
+import { useUiStore } from "@/store/ui";
+import { cn, resolveAppLanguage } from "@/utils";
+import { MgIconButton } from "@/components/mg";
 
 interface Props {
   className?: string;
 }
 
 export function AppHeader({ className }: Props) {
-  const { shell } = usePlatform();
-  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { isMobile } = useBreakpoint();
+  const toggleSidebar = useUiStore((s) => s.toggleSidebar);
+  const { language, theme: _appTheme } = useAppStore(
+    useShallow(appStoreSelector),
+  );
+  const { setAppStore } = useAppStore(useShallow(setAppStoreSelector));
+  const { theme } = useSessionStore(useShallow(themeSelector));
+
+  const lang = resolveAppLanguage(language);
+  const isDark = theme === "dark";
+  const langLabel = lang === "zh" ? "中文" : lang.toUpperCase();
 
-  const openHelpUrl = useMemoizedFn(() => {
-    const url = "https://downloader.caorushizi.cn/guides.html?form=client";
-    shell.open(url);
-  });
+  // Hamburger only exists on tablet/desktop (mobile uses the bottom nav),
+  // so it always toggles the sidebar.
+  const onMenu = useMemoizedFn(() => toggleSidebar());
+  const toggleLang = useMemoizedFn(() =>
+    setAppStore({ language: lang === "zh" ? AppLanguage.EN : AppLanguage.ZH }),
+  );
+  const toggleTheme = useMemoizedFn(() =>
+    setAppStore({ theme: isDark ? AppTheme.Light : AppTheme.Dark }),
+  );
 
   return (
-    <div
+    <header
       className={cn(
-        "flex h-16 w-full select-none flex-row justify-between bg-[#F9FBFC] dark:bg-[#1F2024]",
+        "z-20 flex h-[60px] shrink-0 select-none items-center gap-[14px] border-b border-mg-line bg-mg-surface px-[18px]",
         className,
       )}
     >
-      <div className="h-full rounded-br-full bg-[#EBF3FB] pr-2 dark:bg-[#3B3C41]">
-        <div className="relative flex h-full min-w-[299px] flex-row items-center rounded-br-full bg-white pl-3 pr-2 dark:bg-[#2C2E33]">
-          <img className="m-3 h-8 w-8" src={LogoImg} alt="" />
-          <span className="text-lg dark:text-white">Media Go</span>
-          <span className="ml-[30px] block text-sm text-[#666] dark:text-white">
-            v{import.meta.env.APP_VERSION}
-          </span>
-          <div className="absolute bottom-0 h-px w-[136px] bg-[#EFF7FF] dark:bg-[#606167]" />
-          <div className="absolute bottom-0 h-[2px] w-[45px] bg-[#127AF3]" />
+      {!isMobile && (
+        <MgIconButton variant="ghost" size="lg" title="menu" onClick={onMenu}>
+          <Menu size={20} strokeWidth={2.2} />
+        </MgIconButton>
+      )}
+
+      <div className="flex items-center gap-[11px]">
+        <div className="size-[34px] overflow-hidden rounded-[10px] shadow-[0_4px_12px_-2px_rgba(91,91,245,.5)]">
+          <svg
+            viewBox="0 0 1024 1024"
+            className="size-full"
+            aria-label="MediaGo"
+          >
+            <defs>
+              <linearGradient id="mgLogo" x1="0" y1="0" x2="1" y2="1">
+                <stop offset="0" stopColor="#5b5bf5" />
+                <stop offset="1" stopColor="#9b6bff" />
+              </linearGradient>
+            </defs>
+            <rect width="1024" height="1024" fill="url(#mgLogo)" />
+            <rect
+              x="304"
+              y="406"
+              width="40"
+              height="212"
+              rx="20"
+              fill="#c9b8ff"
+              opacity="0.3"
+            />
+            <rect
+              x="378"
+              y="374"
+              width="48"
+              height="276"
+              rx="24"
+              fill="#c9b8ff"
+              opacity="0.6"
+            />
+            <path
+              d="M470 348 Q470 322 493 336 L744 494 Q768 510 744 526 L493 688 Q470 702 470 676 Z"
+              fill="#ffffff"
+            />
+          </svg>
         </div>
+        <span className="text-[16px] font-extrabold leading-none tracking-[-0.02em] text-mg-fg">
+          MediaGo
+        </span>
       </div>
-      {/* help */}
-      <div className="flex flex-row items-center gap-3 pr-3">
-        <button
-          type="button"
-          className="flex flex-row items-center gap-2 cursor-pointer"
-          onClick={openHelpUrl}
-        >
-          <HelpIcon height={18} width={18} />
-          <span className="text-sm text-[#137BF4] dark:text-white">
-            {t("help")}
-          </span>
-        </button>
-      </div>
-    </div>
+
+      <div className="flex-1" />
+
+      <button
+        type="button"
+        onClick={toggleLang}
+        className="flex h-9 cursor-pointer items-center gap-[7px] rounded-[10px] border border-mg-line bg-mg-surface px-3 text-[12.5px] font-semibold text-mg-fg2 transition-colors hover:border-mg-line2 hover:text-mg-fg"
+      >
+        <Globe size={16} strokeWidth={2} />
+        <span>{langLabel}</span>
+      </button>
+
+      <MgIconButton
+        variant="surface"
+        size="md"
+        title="theme"
+        onClick={toggleTheme}
+      >
+        {isDark ? (
+          <Sun size={17} strokeWidth={2} />
+        ) : (
+          <Moon size={17} strokeWidth={2} />
+        )}
+      </MgIconButton>
+
+      <div className="h-6 w-px bg-mg-line" />
+
+      <button
+        type="button"
+        title="account"
+        onClick={() => navigate("/signin")}
+        className="flex size-9 cursor-pointer items-center justify-center rounded-full bg-[linear-gradient(135deg,#ff8a5b,#ff5b9b)] text-[13px] font-bold text-white"
+      >
+        M
+      </button>
+    </header>
   );
 }
diff --git a/apps/ui/src/layout/app-layout.tsx b/apps/ui/src/layout/app-layout.tsx
index d8369d17e..5d8013ce1 100644
--- a/apps/ui/src/layout/app-layout.tsx
+++ b/apps/ui/src/layout/app-layout.tsx
@@ -1,17 +1,24 @@
 import { useAsyncEffect } from "ahooks";
+import { Plus } from "lucide-react";
 import { type FC, useEffect } from "react";
 import { Outlet, useLocation } from "react-router-dom";
 import { useShallow } from "zustand/react/shallow";
+import { getConfig } from "@/api/config";
+import { DownloadModal } from "@/components/download-modal";
 import { CHANGE_PAGE } from "@/const";
+import { useBreakpoint } from "@/hooks/use-breakpoint";
 import { setAppStoreSelector, useAppStore } from "@/store/app";
-import { tdApp } from "@/utils";
+import { useUiStore } from "@/store/ui";
+import { cn, tdApp } from "@/utils";
+import { AppBottomNav } from "./app-bottom-nav";
 import { AppHeader } from "./app-header";
 import { AppSideBar } from "./app-side-bar";
-import { getConfig } from "@/api/config";
 
-const App: FC = () => {
+const AppLayout: FC = () => {
   const location = useLocation();
+  const { isMobile } = useBreakpoint();
   const { setAppStore } = useAppStore(useShallow(setAppStoreSelector));
+  const openNewDownload = useUiStore((s) => s.openNewDownload);
 
   useAsyncEffect(async () => {
     try {
@@ -26,17 +33,40 @@ const App: FC = () => {
     tdApp.onEvent(CHANGE_PAGE, { page: location.pathname });
   }, [location.pathname]);
 
+  // FAB shows on the list views only; fade/scale (not mount/unmount) so it
+  // doesn't pop a box in/out when switching the bottom nav.
+  const onListView = location.pathname === "/" || location.pathname === "/done";
+
   return (
-    <div className="flex h-full w-full flex-col overflow-hidden">
-      <AppHeader className="shrink-0" />
-      <div className="flex flex-1 flex-col overflow-hidden bg-[#F4F7FA] sm:flex-row dark:bg-[#141415]">
-        <AppSideBar />
-        <div className="flex-1 overflow-auto">
+    <div className="flex h-full w-full flex-col overflow-hidden bg-mg-bg text-mg-fg">
+      <AppHeader />
+      <div className="flex min-h-0 flex-1">
+        {!isMobile && <AppSideBar />}
+        <main className="relative min-w-0 flex-1 overflow-y-auto overflow-x-hidden">
           <Outlet />
-        </div>
+        </main>
       </div>
+      {isMobile && <AppBottomNav />}
+
+      {isMobile && (
+        <button
+          type="button"
+          title="new download"
+          onClick={openNewDownload}
+          className={cn(
+            "fixed bottom-20 right-[18px] z-30 flex size-14 items-center justify-center rounded-[18px] bg-mg-primary text-white shadow-[0_10px_26px_-8px_rgba(91,91,245,.7)] transition-[opacity,transform] duration-200",
+            onListView
+              ? "scale-100 opacity-100"
+              : "pointer-events-none scale-90 opacity-0",
+          )}
+        >
+          <Plus size={26} strokeWidth={2.6} />
+        </button>
+      )}
+
+      <DownloadModal />
     </div>
   );
 };
 
-export default App;
+export default AppLayout;
diff --git a/apps/ui/src/layout/app-side-bar.tsx b/apps/ui/src/layout/app-side-bar.tsx
index 945a3dba7..ef3c8beaf 100644
--- a/apps/ui/src/layout/app-side-bar.tsx
+++ b/apps/ui/src/layout/app-side-bar.tsx
@@ -1,253 +1,82 @@
 import { useMemoizedFn } from "ahooks";
-import { Badge } from "antd";
-import {
-  cloneElement,
-  type PropsWithChildren,
-  type ReactElement,
-  useMemo,
-} from "react";
 import { useTranslation } from "react-i18next";
-import { Link, useLocation, useNavigate } from "react-router-dom";
+import { Link } from "react-router-dom";
 import { useShallow } from "zustand/react/shallow";
-import siderBg from "@/assets/images/sider-bg.png";
-import {
-  ConverterIcon,
-  DoneIcon,
-  ExtractIcon,
-  ListIcon,
-  SettingsIcon,
-  ShareIcon,
-} from "@/assets/svg";
-import {
-  appStoreSelector,
-  setAppStoreSelector,
-  useAppStore,
-} from "@/store/app";
+import { appStoreSelector, useAppStore } from "@/store/app";
 import { downloadStoreSelector, useDownloadStore } from "@/store/download";
-import { updateSelector, useSessionStore } from "@/store/session";
-import { cn, isWeb } from "@/utils";
-import { usePlatform } from "@/hooks/use-platform";
+import { useUiStore } from "@/store/ui";
+import { cn } from "@/utils";
+import { useNavItems } from "./nav";
 
-function processLocation(pathname: string) {
-  let name = pathname;
-  if (pathname === "/") {
-    name = "/home";
-  }
-  return name.substring(1);
-}
-
-type MenuItem = {
-  label: ReactElement;
-  key: string;
-};
-
-interface AppMenuItemProps extends PropsWithChildren {
-  onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
-  link: string;
-  activeKey: string;
-  className?: string;
-  icon?: ReactElement;
-}
-
-function AppMenuItem({
-  children,
-  onClick,
-  link,
-  activeKey,
-  className,
-  icon,
-}: AppMenuItemProps) {
-  const isActive = useMemo(() => {
-    return activeKey === processLocation(link);
-  }, [activeKey, link]);
-
-  return (
-    <Link discover="render" to={link} onClick={onClick}>
-      <div
-        className={cn(
-          "flex h-10 flex-row items-center gap-1 rounded-lg bg-[#FAFCFF] px-3 text-sm text-[#636D7E] hover:bg-[#E1F0FF] hover:text-[#636D7E] dark:bg-[#2C2E33] dark:text-[rgba(255,255,255,0.85)] dark:hover:bg-[#3B3C41] dark:hover:text-[rgba(255,255,255,0.85)]",
-          {
-            "bg-linear-to-r from-[#127AF3] to-[#06D5FB] text-white hover:text-white dark:text-white":
-              isActive,
-          },
-          className,
-        )}
-      >
-        {icon &&
-          cloneElement(icon as React.ReactElement, {
-            fill: isActive ? "#fff" : "#AAB5CB",
-          })}
-        {children}
-      </div>
-    </Link>
-  );
-}
-
-interface Props {
-  className?: string;
-}
-
-export function AppSideBar({ className }: Props) {
-  const { app } = usePlatform();
+export function AppSideBar() {
   const { t } = useTranslation();
-  const location = useLocation();
-  const navigate = useNavigate();
+  const items = useNavItems();
+  const collapsed = useUiStore((s) => s.sidebarCollapsed);
   const { count, clearCount } = useDownloadStore(
     useShallow(downloadStoreSelector),
   );
-  const appStore = useAppStore(useShallow(appStoreSelector));
-  const { setAppStore } = useAppStore(useShallow(setAppStoreSelector));
-  const { updateAvailable } = useSessionStore(useShallow(updateSelector));
+  const { maxRunner } = useAppStore(useShallow(appStoreSelector));
 
-  const activeKey = useMemo(
-    () => processLocation(location.pathname),
-    [location.pathname],
-  );
-
-  const handleExternalLink = useMemoizedFn(
-    async (e: React.MouseEvent<HTMLDivElement>) => {
-      e.stopPropagation();
-      e.preventDefault();
+  // The sidebar only renders on tablet + desktop (mobile uses bottom nav),
+  // so the hamburger's collapse flag drives the width at every width here.
+  const expanded = !collapsed;
+  const width = expanded ? 244 : 74;
 
-      if (appStore.openInNewWindow) {
-        setAppStore({ openInNewWindow: false });
-        navigate("/source");
-        await app.combineToHomePage({
-          url: "",
-          sourceList: [],
-        });
-      } else {
-        setAppStore({ openInNewWindow: true });
-        if (location.pathname === "/source") {
-          navigate("/");
-        }
-        await app.showBrowserWindow();
-      }
-    },
-  );
+  const onHome = useMemoizedFn(() => clearCount());
 
-  const handleClearCount = useMemoizedFn(() => {
-    clearCount();
-  });
-
-  const handleExtractPage = useMemoizedFn(
-    (e: React.MouseEvent<HTMLAnchorElement>) => {
-      if (appStore.openInNewWindow) {
-        e.preventDefault();
-        e.stopPropagation();
-        app.showBrowserWindow();
-      }
-    },
-  );
-
-  const items1: MenuItem[] = useMemo(() => {
-    return [
-      {
-        label: (
-          <AppMenuItem
-            link="/"
-            onClick={handleClearCount}
-            activeKey={activeKey}
-            icon={<ListIcon />}
-          >
-            <span>{t("downloadList")}</span>
-            {count > 0 && (
-              <Badge count={count} offset={[5, 1]} size="small"></Badge>
+  return (
+    <aside
+      style={{ width }}
+      className="flex shrink-0 select-none flex-col gap-1 overflow-hidden border-r border-mg-line bg-mg-surface px-3 py-[14px] transition-[width] duration-200"
+    >
+      <nav className="flex flex-col gap-1">
+        {items.map(({ key, to, label, Icon, active, showCount }) => (
+          <Link
+            key={key}
+            to={to}
+            title={label}
+            onClick={key === "home" ? onHome : undefined}
+            className={cn(
+              "flex h-11 items-center gap-[13px] whitespace-nowrap rounded-[12px] px-3 text-[14px] font-semibold transition-colors",
+              active
+                ? "bg-mg-primary-weak text-mg-primary"
+                : "text-mg-fg2 hover:bg-mg-surface2",
+              !expanded && "justify-center px-0",
             )}
-          </AppMenuItem>
-        ),
-        key: "home",
-      },
-      {
-        label: (
-          <AppMenuItem link="/done" activeKey={activeKey} icon={<DoneIcon />}>
-            <span>{t("downloadComplete")}</span>
-          </AppMenuItem>
-        ),
-        key: "done",
-      },
-      {
-        label: (
-          <AppMenuItem
-            link="/converter"
-            activeKey={activeKey}
-            icon={<ConverterIcon />}
-          >
-            <span>{t("converter")}</span>
-          </AppMenuItem>
-        ),
-        key: "converter",
-      },
-      {
-        label: (
-          <AppMenuItem
-            link="/source"
-            activeKey={activeKey}
-            className="group"
-            icon={<ExtractIcon />}
-            onClick={handleExtractPage}
           >
-            <span className="flex flex-1">{t("materialExtraction")}</span>
-            <div
-              title={t("openInNewWindow")}
-              className="hidden hover:opacity-70 group-hover:block"
-              onClick={handleExternalLink}
-            >
-              <ShareIcon
-                className={cn({ "rotate-180": appStore.openInNewWindow })}
-                fill={"/source" === location.pathname ? "#fff" : "#AAB5CB"}
-              />
-            </div>
-          </AppMenuItem>
-        ),
-        key: "source",
-      },
-      {
-        label: (
-          <AppMenuItem
-            link="/settings"
-            activeKey={activeKey}
-            icon={<SettingsIcon />}
-          >
-            <span>{t("setting")}</span>
-            <Badge dot={updateAvailable} offset={[-13, -3]} />
-          </AppMenuItem>
-        ),
-        key: "settings",
-      },
-    ];
-  }, [
-    activeKey,
-    count,
-    handleExternalLink,
-    location.pathname,
-    t,
-    updateAvailable,
-    handleClearCount,
-  ]);
-
-  const finalItems = useMemo(() => {
-    return items1.filter((i) =>
-      isWeb ? i.key !== "source" && i.key !== "converter" : true,
-    );
-  }, [items1]);
-
-  return (
-    <div
-      className={cn(
-        "relative select-none bg-white p-3 dark:bg-[#1F2024]",
-        className,
+            <Icon size={20} strokeWidth={2} className="shrink-0" />
+            {expanded && <span className="flex-1">{label}</span>}
+            {expanded && showCount && count > 0 && (
+              <span
+                className={cn(
+                  "ml-auto min-w-5 rounded-[9px] px-[7px] py-[2px] text-center text-[11.5px] font-bold",
+                  active
+                    ? "bg-mg-primary text-white"
+                    : "bg-mg-surface2 text-mg-fg3",
+                )}
+              >
+                {count}
+              </span>
+            )}
+          </Link>
+        ))}
+      </nav>
+
+      <div className="flex-1" />
+
+      {expanded && (
+        <div className="mx-1 mb-1 mt-2 rounded-[14px] border border-mg-line bg-[linear-gradient(135deg,var(--mg-primary-weak),transparent)] p-[14px]">
+          <div className="mb-[7px] flex items-center gap-2">
+            <span className="size-2 rounded-full bg-[#10b981] shadow-[0_0_0_3px_rgba(16,185,129,.18)]" />
+            <span className="text-[12.5px] font-bold text-mg-fg">
+              {t("engineRunning")}
+            </span>
+          </div>
+          <div className="text-[11.5px] leading-relaxed text-mg-fg2">
+            {t("maxRunner")}: {maxRunner}
+          </div>
+        </div>
       )}
-    >
-      <div className="relative z-10 flex flex-row gap-3 sm:w-[180px] sm:flex-col">
-        {finalItems.map((item) => cloneElement(item.label, { key: item.key }))}
-      </div>
-
-      <img
-        src={siderBg}
-        alt=""
-        className="pointer-events-none absolute bottom-0 left-0 right-0 w-full select-none"
-      />
-    </div>
+    </aside>
   );
 }
diff --git a/apps/ui/src/layout/nav.tsx b/apps/ui/src/layout/nav.tsx
new file mode 100644
index 000000000..0f1ee438f
--- /dev/null
+++ b/apps/ui/src/layout/nav.tsx
@@ -0,0 +1,72 @@
+import {
+  AppWindow,
+  ArrowDownUp,
+  CircleCheckBig,
+  Download,
+  type LucideIcon,
+  Settings,
+} from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { useLocation } from "react-router-dom";
+import { isWeb } from "@/utils";
+
+export interface NavItem {
+  key: string;
+  to: string;
+  label: string;
+  Icon: LucideIcon;
+  active: boolean;
+  /** Hidden in the web/server build (electron-only feature). */
+  webHidden?: boolean;
+  /** Show the download-count badge. */
+  showCount?: boolean;
+}
+
+/** Shared nav definition for the sidebar and the mobile bottom nav. */
+export function useNavItems(): NavItem[] {
+  const { t } = useTranslation();
+  const { pathname } = useLocation();
+
+  const items: NavItem[] = [
+    {
+      key: "home",
+      to: "/",
+      label: t("downloadList"),
+      Icon: Download,
+      active: pathname === "/",
+      showCount: true,
+    },
+    {
+      key: "done",
+      to: "/done",
+      label: t("downloadComplete"),
+      Icon: CircleCheckBig,
+      active: pathname === "/done",
+    },
+    {
+      key: "source",
+      to: "/source",
+      label: t("materialExtraction"),
+      Icon: AppWindow,
+      active: pathname === "/source",
+      webHidden: true,
+    },
+    {
+      key: "converter",
+      to: "/converter",
+      label: t("converter"),
+      Icon: ArrowDownUp,
+      active: pathname === "/converter",
+      webHidden: true,
+    },
+    {
+      key: "settings",
+      to: "/settings",
+      label: t("setting"),
+      Icon: Settings,
+      active: pathname === "/settings",
+    },
+  ];
+
+  return items.filter((i) => (isWeb ? !i.webHidden : true));
+}
diff --git a/apps/ui/src/pages/converter-page/index.tsx b/apps/ui/src/pages/converter-page/index.tsx
index f04d8f4bf..1fd3d8a68 100644
--- a/apps/ui/src/pages/converter-page/index.tsx
+++ b/apps/ui/src/pages/converter-page/index.tsx
@@ -1,68 +1,59 @@
-import {
-  DeleteOutlined,
-  FolderOpenOutlined,
-  CaretRightOutlined,
-  PauseOutlined,
-} from "@ant-design/icons";
 import { type Conversion } from "@mediago/shared-common";
 import { useMemoizedFn } from "ahooks";
+import { App, Pagination } from "antd";
 import {
-  App,
-  Badge,
-  Empty,
-  Form,
-  Input,
-  Modal,
-  Pagination,
-  Progress,
-  Select,
-  Space,
-  Button as AntButton,
-} from "antd";
+  FolderOpen,
+  Music2,
+  Pause,
+  Play,
+  Trash2,
+  UploadCloud,
+} from "lucide-react";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { IconButton } from "@/components/icon-button";
-import PageContainer from "@/components/page-container";
-import { Button } from "@/components/ui/button";
+import {
+  MgButton,
+  MgCard,
+  MgIconButton,
+  MgPill,
+  MgSegment,
+} from "@/components/mg";
+import Loading from "@/components/loading";
 import { ADD_CONVERT_TASK, DELETE_CONVERT, START_CONVERT } from "@/const";
-import { tdApp } from "@/utils";
 import { useConversions } from "@/hooks/use-conversions";
 import { usePlatform } from "@/hooks/use-platform";
-import Loading from "@/components/loading";
+import { isWeb, tdApp } from "@/utils";
 
-const FORMAT_OPTIONS = [
-  // {
-  //   label: "Video",
-  //   options: [
-  //     { label: "MP4", value: "mp4" },
-  //     { label: "MKV", value: "mkv" },
-  //     { label: "WebM", value: "webm" },
-  //   ],
-  // },
-  {
-    label: "Audio",
-    options: [
-      { label: "MP3", value: "mp3" },
-      // { label: "AAC", value: "aac" },
-      // { label: "FLAC", value: "flac" },
-      // { label: "WAV", value: "wav" },
-    ],
-  },
-];
+const OUTPUT_FORMAT = "mp3";
 
-const QUALITY_OPTIONS = [
-  { label: "High", value: "high" },
-  { label: "Medium", value: "medium" },
-  { label: "Low", value: "low" },
-];
+type Quality = "high" | "medium" | "low";
 
-const STATUS_COLORS: Record<string, string> = {
-  pending: "default",
-  converting: "processing",
-  done: "success",
-  failed: "error",
+/**
+ * Status meta — colors lifted from the source design (MediaGo.dc.html
+ * `cstMeta`, lines 926-932). Each entry also carries the i18n key used for
+ * its pill label. `pending` reuses the existing key; the other three use
+ * dedicated convert-status keys (see report for proposed additions).
+ */
+const STATUS_META: Record<
+  string,
+  { color: string; bg: string; labelKey: string }
+> = {
+  pending: {
+    color: "#94a3b8",
+    bg: "rgba(148,163,184,.14)",
+    labelKey: "pending",
+  },
+  converting: {
+    color: "#3b82f6",
+    bg: "rgba(59,130,246,.14)",
+    labelKey: "converting",
+  },
+  done: { color: "#10b981", bg: "rgba(16,185,129,.14)", labelKey: "done" },
+  failed: { color: "#f43f5e", bg: "rgba(244,63,94,.13)", labelKey: "failed" },
 };
 
+const FALLBACK_META = STATUS_META.pending;
+
 const Converter = () => {
   const { t } = useTranslation();
   const [page, setPage] = useState(1);
@@ -78,12 +69,11 @@ const Converter = () => {
   } = useConversions({ current: page, pageSize });
   const { dialog, shell } = usePlatform();
   const { message } = App.useApp();
-  const [outputFormat, setOutputFormat] = useState("mp3");
-  const [quality, setQuality] = useState("medium");
+  const [quality, setQuality] = useState<Quality>("medium");
   const [filePath, setFilePath] = useState("");
-  const [addModalOpen, setAddModalOpen] = useState(false);
 
   const handleBrowseFile = useMemoizedFn(async () => {
+    if (isWeb) return;
     try {
       const paths = await dialog.open({ type: "file" });
       const file = paths?.[0];
@@ -93,12 +83,7 @@ const Converter = () => {
     }
   });
 
-  const handleOpenModal = useMemoizedFn(() => {
-    setFilePath("");
-    setAddModalOpen(true);
-  });
-
-  const doAddConversion = useMemoizedFn(async (startImmediately: boolean) => {
+  const handleAdd = useMemoizedFn(async (startImmediately: boolean) => {
     if (!filePath) {
       message.warning(t("pleaseSelectFile"));
       return;
@@ -108,14 +93,14 @@ const Converter = () => {
       const conv = await addConversion({
         name,
         path: filePath,
-        outputFormat,
+        outputFormat: OUTPUT_FORMAT,
         quality,
       });
       tdApp.onEvent(ADD_CONVERT_TASK);
-      if (startImmediately && (conv as Record<string, unknown>)?.id) {
-        await startConversion((conv as Record<string, unknown>).id);
+      if (startImmediately && conv?.id !== undefined && conv?.id !== null) {
+        await startConversion(conv.id);
       }
-      setAddModalOpen(false);
+      setFilePath("");
     } catch (e: unknown) {
       message.error((e as Error).message);
     }
@@ -145,205 +130,253 @@ const Converter = () => {
 
   const handleOpenFolder = useMemoizedFn(async (targetPath: string) => {
     try {
-      const dir =
-        targetPath.substring(0, targetPath.lastIndexOf("/")) ||
-        targetPath.substring(0, targetPath.lastIndexOf("\\"));
-      await shell.open(dir || targetPath);
+      const sep = Math.max(
+        targetPath.lastIndexOf("/"),
+        targetPath.lastIndexOf("\\"),
+      );
+      const dir = sep > 0 ? targetPath.slice(0, sep) : targetPath;
+      await shell.open(dir);
     } catch {
-      // ignore
+      // ignore — folder may have been removed
     }
   });
 
   const handleConvertAll = useMemoizedFn(async () => {
-    if (!data?.list) return;
-    const pending = data.list.filter(
-      (item: Conversion) =>
-        item.status === "pending" || item.status === "failed",
+    // If a file is staged, add it first, then start everything pending/failed.
+    if (filePath) {
+      await handleAdd(false);
+    }
+    const pending = (data?.list ?? []).filter(
+      (item) => item.status === "pending" || item.status === "failed",
     );
+    if (!pending.length) return;
+    tdApp.onEvent(START_CONVERT);
     await Promise.allSettled(pending.map((item) => startConversion(item.id)));
     mutate();
   });
 
-  const renderActions = useMemoizedFn((item: Conversion) => {
-    switch (item.status) {
-      case "converting":
-        return (
-          <div title={t("stop")} onClick={() => handleStop(item.id)}>
-            <IconButton icon={<PauseOutlined />} />
-          </div>
-        );
-      case "done":
-        return (
-          <>
-            {item.outputPath && (
-              <div
-                title={t("openFolder")}
-                onClick={() => handleOpenFolder(item.outputPath)}
-              >
-                <IconButton icon={<FolderOpenOutlined />} />
-              </div>
-            )}
-            <div title={t("delete")} onClick={() => handleDelete(item.id)}>
-              <IconButton icon={<DeleteOutlined />} />
+  const list = data?.list ?? [];
+  const showEmpty = !isLoading && list.length === 0;
+
+  const renderActions = (item: Conversion) => {
+    const startBtn = (
+      <MgIconButton
+        variant="primary"
+        title={t("start")}
+        onClick={() => handleStart(item.id)}
+      >
+        <Play size={15} strokeWidth={2.4} />
+      </MgIconButton>
+    );
+    return (
+      <div className="flex gap-[6px]">
+        {item.status === "pending" && startBtn}
+        {item.status === "failed" && startBtn}
+        {item.status === "converting" && (
+          <MgIconButton title={t("stop")} onClick={() => handleStop(item.id)}>
+            <Pause size={15} strokeWidth={2.2} />
+          </MgIconButton>
+        )}
+        {item.status === "done" && item.outputPath && (
+          <MgIconButton
+            title={t("openFolder")}
+            onClick={() => handleOpenFolder(item.outputPath)}
+          >
+            <FolderOpen size={15} strokeWidth={2.2} />
+          </MgIconButton>
+        )}
+        <MgIconButton
+          title={t("delete")}
+          className="text-mg-fg3"
+          onClick={() => handleDelete(item.id)}
+        >
+          <Trash2 size={14} strokeWidth={2.2} />
+        </MgIconButton>
+      </div>
+    );
+  };
+
+  return (
+    <div className="h-full overflow-auto bg-mg-bg">
+      <div className="mx-auto max-w-[980px] px-[clamp(16px,3vw,34px)] pb-[90px] pt-6">
+        {/* heading */}
+        <div className="mb-5">
+          <h1 className="m-0 text-[clamp(22px,2.4vw,28px)] font-extrabold tracking-[-0.03em] text-mg-fg">
+            {t("converter")}
+          </h1>
+          <p className="mt-[5px] text-[13.5px] text-mg-fg2">
+            {t("convertSubtitle")}
+          </p>
+        </div>
+
+        {/* add panel */}
+        <MgCard className="mb-5 flex flex-col gap-[15px] rounded-[18px] p-[18px]">
+          <button
+            type="button"
+            onClick={handleBrowseFile}
+            disabled={isWeb}
+            className="flex h-[90px] cursor-pointer flex-col items-center justify-center gap-[9px] rounded-[14px] border-[1.5px] border-dashed border-mg-line2 bg-mg-surface2 text-mg-fg2 transition-colors hover:border-mg-primary disabled:cursor-not-allowed disabled:opacity-60"
+          >
+            <UploadCloud
+              size={26}
+              strokeWidth={2}
+              className="text-mg-primary"
+            />
+            <span className="text-[13.5px] font-bold text-mg-fg">
+              {t("browse")}
+            </span>
+          </button>
+
+          {filePath && (
+            <div className="-mt-1 truncate font-mono text-[11.5px] text-mg-fg3">
+              {filePath}
             </div>
-          </>
-        );
-      default:
-        return (
-          <>
-            <div title={t("start")} onClick={() => handleStart(item.id)}>
-              <IconButton icon={<CaretRightOutlined />} />
+          )}
+
+          <div className="flex flex-wrap items-end gap-4">
+            <div>
+              <div className="mb-[7px] text-[12px] font-bold text-mg-fg2">
+                {t("outputFormat")}
+              </div>
+              <div className="flex h-[38px] items-center gap-2 rounded-[10px] bg-mg-primary-weak px-4 text-[13px] font-extrabold text-mg-primary">
+                <Music2 size={15} strokeWidth={2} />
+                MP3
+              </div>
             </div>
-            <div title={t("delete")} onClick={() => handleDelete(item.id)}>
-              <IconButton icon={<DeleteOutlined />} />
+
+            <div>
+              <div className="mb-[7px] text-[12px] font-bold text-mg-fg2">
+                {t("quality")}
+              </div>
+              <MgSegment<Quality>
+                value={quality}
+                onChange={setQuality}
+                options={[
+                  { value: "high", label: t("qualityHigh") },
+                  { value: "medium", label: t("qualityMedium") },
+                  { value: "low", label: t("qualityLow") },
+                ]}
+              />
             </div>
-          </>
-        );
-    }
-  });
 
-  const hasPending =
-    data?.list?.some(
-      (item: Conversion) =>
-        item.status === "pending" || item.status === "failed",
-    ) ?? false;
+            <div className="flex-1" />
 
-  return (
-    <PageContainer
-      title={t("converter")}
-      rightExtra={
-        <Space>
-          {hasPending && (
-            <Button variant="outline" onClick={handleConvertAll}>
-              {t("convertAll")}
-            </Button>
-          )}
-          <Button onClick={handleOpenModal}>{t("addFile")}</Button>
-        </Space>
-      }
-      className="rounded-lg bg-white dark:bg-[#1F2024] flex flex-col flex-1 h-full gap-3 p-3"
-    >
-      <Modal
-        title={t("addFile")}
-        open={addModalOpen}
-        onCancel={() => setAddModalOpen(false)}
-        footer={
-          <Space>
-            <Button
-              key="add"
-              variant="outline"
-              onClick={() => doAddConversion(false)}
+            <MgButton
+              variant="surface"
+              size="md"
+              onClick={() => handleAdd(false)}
             >
               {t("addToList")}
-            </Button>
-            <Button key="convert" onClick={() => doAddConversion(true)}>
-              {t("convertNow")}
-            </Button>
-          </Space>
-        }
-      >
-        <Form layout="vertical" className="mt-4">
-          <Form.Item label={t("filePath")}>
-            <Space.Compact style={{ width: "100%" }}>
-              <Input
-                value={filePath}
-                readOnly
-                placeholder={t("pleaseSelectFile")}
-              />
-              <AntButton onClick={handleBrowseFile}>{t("browse")}</AntButton>
-            </Space.Compact>
-          </Form.Item>
-          <Form.Item label={t("outputFormat")}>
-            <Select
-              value={outputFormat}
-              onChange={setOutputFormat}
-              options={FORMAT_OPTIONS}
-            />
-          </Form.Item>
-          <Form.Item label={t("quality")}>
-            <Select
-              value={quality}
-              onChange={setQuality}
-              options={QUALITY_OPTIONS}
-            />
-          </Form.Item>
-        </Form>
-      </Modal>
+            </MgButton>
+            <MgButton variant="primary" size="md" onClick={handleConvertAll}>
+              {t("convertAll")}
+            </MgButton>
+          </div>
+        </MgCard>
 
-      <div className="flex flex-col gap-3 flex-1 overflow-auto">
+        {/* task list */}
         {isLoading && <Loading />}
-        {!isLoading && data?.list?.length === 0 && (
-          <div className="flex h-full flex-1 flex-row items-center justify-center rounded-lg bg-white dark:bg-[#1F2024]">
-            <Empty description={t("noData")} />
-          </div>
+
+        {showEmpty && (
+          <MgCard className="flex flex-col items-center justify-center gap-2 rounded-[18px] py-16">
+            <Music2 size={30} strokeWidth={1.6} className="text-mg-fg3" />
+            <span className="text-[13.5px] text-mg-fg3">{t("noData")}</span>
+          </MgCard>
         )}
-        {!isLoading &&
-          Array.isArray(data?.list) &&
-          data.list.length > 0 &&
-          data.list.map((item: Conversion) => (
-            <div
-              key={item.id}
-              className="flex flex-col gap-2 rounded-lg bg-[#FAFCFF] p-3 dark:bg-[#27292F]"
-            >
-              <div className="flex flex-row items-center justify-between">
-                <div className="flex flex-row items-center gap-2">
-                  <span className="text-sm text-[#343434] dark:text-[#B4B4B4]">
-                    {item.name}
-                  </span>
-                  <Badge
-                    status={
-                      STATUS_COLORS[item.status] as
-                        | "default"
-                        | "processing"
-                        | "success"
-                        | "error"
-                    }
-                    text={
-                      <span className="text-xs">
-                        {item.status === "converting"
-                          ? `${item.progress}%`
-                          : item.status}
-                      </span>
-                    }
-                  />
-                  {item.outputFormat && (
-                    <span className="text-xs text-[#AAB5CB]">
-                      → .{item.outputFormat}
-                    </span>
-                  )}
-                </div>
-                <div className="flex flex-row gap-3">{renderActions(item)}</div>
-              </div>
-              {item.status === "converting" && (
-                <Progress
-                  percent={item.progress}
-                  size="small"
-                  showInfo={false}
-                />
-              )}
-              <div className="text-xs text-[#AAB5CB]">
-                {item.status === "done" && item.outputPath
+
+        {!isLoading && list.length > 0 && (
+          <div className="flex flex-col gap-[11px]">
+            {list.map((item) => {
+              const meta = STATUS_META[item.status] ?? FALLBACK_META;
+              const showBar =
+                item.status === "converting" || item.status === "failed";
+              const sourcePath =
+                item.status === "done" && item.outputPath
                   ? item.outputPath
-                  : item.path}
-              </div>
-              {item.status === "failed" && item.error && (
-                <div className="text-xs text-red-500">{item.error}</div>
-              )}
-            </div>
-          ))}
-      </div>
+                  : item.path;
+              return (
+                <MgCard
+                  key={item.id}
+                  className="flex flex-wrap items-center gap-[14px] rounded-[15px] p-[15px_17px]"
+                >
+                  {/* icon chip */}
+                  <div
+                    style={{ color: meta.color, background: meta.bg }}
+                    className="flex size-[46px] flex-none items-center justify-center rounded-[12px]"
+                  >
+                    <Music2 size={22} strokeWidth={2} />
+                  </div>
 
-      <Pagination
-        className="flex justify-end"
-        current={page}
-        pageSize={pageSize}
-        onChange={(p, ps) => {
-          setPage(p);
-          setPageSize(ps);
-        }}
-        total={data?.total ?? 0}
-      />
-    </PageContainer>
+                  {/* body */}
+                  <div className="min-w-[200px] flex-1">
+                    <div className="mb-1 flex items-center gap-2">
+                      <span className="max-w-[300px] truncate text-[14px] font-bold text-mg-fg">
+                        {item.name}
+                      </span>
+                      <MgPill className="bg-mg-surface2 text-mg-fg3 text-[10px]">
+                        {(item.quality || quality).toUpperCase()}
+                      </MgPill>
+                    </div>
+                    <div className="mb-2 truncate font-mono text-[11.5px] text-mg-fg3">
+                      {sourcePath}
+                    </div>
+                    {showBar && (
+                      <div className="flex items-center gap-[10px]">
+                        <div className="h-[7px] flex-1 overflow-hidden rounded-[5px] bg-mg-surface2">
+                          <div
+                            style={{
+                              width: `${item.progress ?? 0}%`,
+                              background: meta.color,
+                            }}
+                            className="h-full rounded-[5px] transition-[width]"
+                          />
+                        </div>
+                        <span
+                          style={{ color: meta.color }}
+                          className="min-w-[38px] text-right text-[12px] font-bold"
+                        >
+                          {item.progress ?? 0}%
+                        </span>
+                      </div>
+                    )}
+                    {item.status === "failed" && item.error && (
+                      <div className="mt-[5px] text-[11.5px] text-[#f43f5e]">
+                        {item.error}
+                      </div>
+                    )}
+                  </div>
+
+                  {/* status + actions */}
+                  <div className="flex flex-col items-end gap-[9px]">
+                    <MgPill
+                      color={meta.color}
+                      bg={meta.bg}
+                      className="px-[10px] py-1 text-[11.5px]"
+                    >
+                      {t(meta.labelKey)}
+                    </MgPill>
+                    {renderActions(item)}
+                  </div>
+                </MgCard>
+              );
+            })}
+          </div>
+        )}
+
+        {!isLoading && (data?.total ?? 0) > pageSize && (
+          <Pagination
+            className="mt-4 flex justify-end"
+            current={page}
+            pageSize={pageSize}
+            onChange={(p, ps) => {
+              setPage(p);
+              setPageSize(ps);
+            }}
+            total={data?.total ?? 0}
+          />
+        )}
+      </div>
+    </div>
   );
 };
 
diff --git a/apps/ui/src/pages/home-page/components/download-item.tsx b/apps/ui/src/pages/home-page/components/download-item.tsx
index 5c1fdfd76..e1b12e581 100644
--- a/apps/ui/src/pages/home-page/components/download-item.tsx
+++ b/apps/ui/src/pages/home-page/components/download-item.tsx
@@ -1,345 +1,312 @@
 import {
-  FileTextOutlined,
-  PauseCircleOutlined,
-  PlayCircleOutlined,
-} from "@ant-design/icons";
-import {
-  DownloadProgress,
   DownloadStatus,
-  type DownloadTask,
   type DownloadTaskWithFile,
 } from "@mediago/shared-common";
 import { useMemoizedFn } from "ahooks";
-import { Progress } from "antd";
-import { memo, type ReactNode, useMemo } from "react";
-import { useTranslation } from "react-i18next";
-import { useShallow } from "zustand/react/shallow";
-import selectedBg from "@/assets/images/select-item-bg.png";
-import {
-  DownloadIcon,
-  DownloadListIcon,
-  EditIcon,
-  FailedIcon,
-  PauseIcon,
-} from "@/assets/svg";
-import { DownloadTag } from "@/components/download-tag";
-import { IconButton } from "@/components/icon-button";
-import { Checkbox } from "@/components/ui/checkbox";
 import {
-  CONTINUE_DOWNLOAD,
-  DOWNLOAD_NOW,
-  PLAY_VIDEO,
-  RESTART_DOWNLOAD,
-  STOP_DOWNLOAD,
-} from "@/const";
+  ArrowDownToLine,
+  Check,
+  CircleAlert,
+  Clock,
+  Folder,
+  Loader2,
+  MoreHorizontal,
+  Pause,
+  Pencil,
+  Play,
+  RotateCw,
+} from "lucide-react";
+import { memo } from "react";
+import { useTranslation } from "react-i18next";
+import { MgIconButton, MgPill } from "@/components/mg";
+import { useEnvPath } from "@/hooks/use-config";
+import { usePlatform } from "@/hooks/use-platform";
 import type { DownloadTaskDetails } from "@/hooks/use-tasks";
-import { appStoreSelector, useAppStore } from "@/store/app";
+import { useUiStore } from "@/store/ui";
+import { statusMeta, typeMeta } from "@/theme/mg";
+import { mapStatus, mapType, statusLabelKey } from "@/theme/mg-map";
 import { cn, fromatDateTime, tdApp } from "@/utils";
+import { PLAY_VIDEO } from "@/const";
 import { TerminalDialog } from "./terminal-dialog";
-import { usePlatform } from "@/hooks/use-platform";
-import { useEnvPath } from "@/hooks/use-config";
 
 interface Props {
   task: DownloadTaskDetails;
-  onSelectChange: (id: number) => void;
   selected: boolean;
-  onStartDownload: (id: number) => void;
-  onStopDownload: (taskId: number) => void;
-  onContextMenu: (taskId: number) => void;
-  progress?: DownloadProgress;
-  onShowEditForm?: (value: DownloadTask) => void;
-  downloadStatus?: DownloadStatus;
+  onSelectChange: (id: number) => void;
+  onStart: (id: number) => void;
+  onStop: (id: number) => void;
+  onEdit: (task: DownloadTaskWithFile) => void;
+}
+
+function StatusGlyph({ status, color }: { status: string; color: string }) {
+  const common = { size: 24, color, strokeWidth: 2.4 } as const;
+  switch (status) {
+    case "downloading":
+    case "preparing":
+      return <Loader2 {...common} className="animate-spin" />;
+    case "paused":
+      return <Pause size={22} color={color} fill={color} strokeWidth={0} />;
+    case "success":
+      return <Check {...common} />;
+    case "failed":
+      return <CircleAlert size={22} color={color} strokeWidth={2.4} />;
+    default:
+      return <Clock size={22} color={color} strokeWidth={2.2} />;
+  }
 }
 
 export const DownloadTaskItem = memo(function DownloadTaskItem({
   task,
-  onSelectChange,
   selected,
-  onStartDownload,
-  onStopDownload,
-  onContextMenu,
-  onShowEditForm,
+  onSelectChange,
+  onStart,
+  onStop,
+  onEdit,
 }: Props) {
-  const appStore = useAppStore(useShallow(appStoreSelector));
   const { t } = useTranslation();
   const { shell } = usePlatform();
   const { envPath } = useEnvPath();
+  const openContextMenu = useUiStore((s) => s.openContextMenu);
+
+  const mg = mapStatus(task.status);
+  const sm = statusMeta(mg);
+  const tm = typeMeta(mapType(task.type));
+
+  const status = task.status;
+  const isDownloading = status === DownloadStatus.Downloading;
+  const isSuccess = status === DownloadStatus.Success;
+  const isFailed = status === DownloadStatus.Failed;
+  const exists = task.exists !== false;
+
+  const percent = Math.min(
+    100,
+    Math.max(0, Math.round(Number(task.percent) || 0)),
+  );
+  const showProgress = !isSuccess && !isFailed;
+  const statusLabel = t(statusLabelKey[mg]);
 
-  // Handlers
   const handlePlay = useMemoizedFn(() => {
     tdApp.onEvent(PLAY_VIDEO);
-    if (envPath?.playerUrl) {
-      shell.open(`${envPath.playerUrl}?id=${task.id}`);
-    }
+    if (envPath?.playerUrl) shell.open(`${envPath.playerUrl}?id=${task.id}`);
   });
 
-  const startWithEvent = useMemoizedFn((eventName: string) => {
-    onStartDownload(task.id);
-    tdApp.onEvent(eventName);
-  });
-
-  const handleStop = useMemoizedFn(() => {
-    onStopDownload(task.id);
-    tdApp.onEvent(STOP_DOWNLOAD);
+  const handleRowCtx = useMemoizedFn((e: React.MouseEvent) => {
+    e.preventDefault();
+    openContextMenu(
+      task.id,
+      Math.min(e.clientX, window.innerWidth - 195),
+      Math.min(e.clientY, window.innerHeight - 185),
+    );
   });
 
-  // Action buttons by status (consolidated for clarity)
-  const actionButtons = useMemo<ReactNode[]>(() => {
-    const buttons: ReactNode[] = [];
-
-    const terminalBtn = appStore.showTerminal ? (
-      <TerminalDialog
-        key="terminal"
-        trigger={
-          <IconButton
-            key="terminal"
-            title={t("terminal")}
-            icon={<FileTextOutlined />}
-          />
-        }
-        title={task.name}
-        id={task.id}
-      />
-    ) : null;
-
-    const editBtn = (
-      <IconButton
-        key="edit"
-        title={t("edit")}
-        icon={<EditIcon />}
-        onClick={() => onShowEditForm?.(task)}
-      />
+  const handleMore = useMemoizedFn((e: React.MouseEvent<HTMLButtonElement>) => {
+    const r = e.currentTarget.getBoundingClientRect();
+    openContextMenu(
+      task.id,
+      Math.min(r.left - 150, window.innerWidth - 195),
+      r.bottom + 6,
     );
+  });
 
-    switch (task.status) {
-      case DownloadStatus.Ready:
-        if (terminalBtn) buttons.push(terminalBtn);
-        buttons.push(editBtn);
-        buttons.push(
-          <IconButton
-            key="download"
-            icon={<DownloadListIcon />}
-            title={t("download")}
-            onClick={() => startWithEvent(DOWNLOAD_NOW)}
-          />,
-        );
-        break;
-      case DownloadStatus.Downloading:
-        if (terminalBtn) buttons.push(terminalBtn);
-        buttons.push(
-          <IconButton
-            key="stop"
-            title={t("pause")}
-            icon={<PauseCircleOutlined />}
-            onClick={handleStop}
-          />,
-        );
-        break;
-      case DownloadStatus.Failed:
-        if (terminalBtn) buttons.push(terminalBtn);
-        buttons.push(editBtn);
-        buttons.push(
-          <IconButton
-            key="redownload"
-            title={t("redownload")}
-            icon={<DownloadListIcon />}
-            onClick={() => startWithEvent(RESTART_DOWNLOAD)}
-          />,
-        );
-        break;
-      case DownloadStatus.Pending:
-        buttons.push(<span key="pending">{t("pending")}</span>);
-        break;
-      case DownloadStatus.Stopped:
-        if (terminalBtn) buttons.push(terminalBtn);
-        buttons.push(editBtn);
-        buttons.push(
-          <IconButton
-            key="restart"
-            icon={<DownloadListIcon />}
-            title={t("continueDownload")}
-            onClick={() => startWithEvent(CONTINUE_DOWNLOAD)}
-          />,
-        );
-        break;
-      default:
-        // Success
-        buttons.push(
-          <IconButton
-            key="play"
-            icon={<PlayCircleOutlined />}
-            title={t("playVideo")}
-            disabled={!task.exists}
-            onClick={handlePlay}
-          />,
-        );
-        break;
-    }
-
-    return buttons;
-  }, [
-    appStore.showTerminal,
-    handlePlay,
-    handleStop,
-    task,
-    onShowEditForm,
-    startWithEvent,
-    t,
-  ]);
+  return (
+    <div
+      onContextMenu={handleRowCtx}
+      className={cn(
+        "flex items-start gap-[15px] rounded-[16px] border bg-mg-surface p-[16px_18px] transition-[border-color,box-shadow] hover:shadow-[0_8px_24px_-14px_rgba(20,20,40,.3)]",
+        selected ? "border-mg-primary" : "border-mg-line",
+        isSuccess && !exists && "opacity-70",
+      )}
+    >
+      {/* checkbox */}
+      <button
+        type="button"
+        aria-label="select"
+        onClick={() => onSelectChange(task.id)}
+        className={cn(
+          "mt-0.5 flex size-[21px] shrink-0 items-center justify-center rounded-[6px] border-2 transition-colors",
+          selected
+            ? "border-mg-primary bg-mg-primary"
+            : "border-mg-line2 bg-transparent",
+        )}
+      >
+        {selected && <Check size={12} color="#fff" strokeWidth={3.5} />}
+      </button>
 
-  const renderTitle = useMemoizedFn((task: DownloadTaskWithFile): ReactNode => {
-    return (
+      {/* status chip */}
       <div
-        className={cn("truncate text-sm dark:text-[#B4B4B4]", {
-          "text-[#127af3]": selected,
-        })}
-        title={task.name}
+        style={{ background: sm.bg }}
+        className="flex size-[52px] shrink-0 items-center justify-center rounded-[13px]"
       >
-        {task.folder ? `${task.folder}/` : task.folder}
-        {task.name}
+        <StatusGlyph status={mg} color={sm.color} />
       </div>
-    );
-  });
 
-  const tags = useMemo<ReactNode[]>(() => {
-    const list: ReactNode[] = [];
-    if (task.isLive)
-      list.push(
-        <DownloadTag key="live" text={t("liveResource")} color="#9abbe2" />,
-      );
+      {/* body */}
+      <div className="min-w-0 flex-1">
+        <div className="mb-1 flex flex-wrap items-center gap-2">
+          <span
+            className="max-w-full truncate text-[15px] font-bold tracking-[-0.01em] text-mg-fg"
+            title={task.name}
+          >
+            {task.name}
+          </span>
+          <MgPill
+            color={tm.color}
+            bg={tm.bg}
+            className="uppercase tracking-[.03em]"
+          >
+            {tm.label}
+          </MgPill>
+          {task.isLive && (
+            <MgPill color="#f43f5e" bg="rgba(244,63,94,.13)">
+              <span className="size-1.5 animate-[mgpulse_1.2s_infinite] rounded-full bg-[#f43f5e]" />
+              {t("live")}
+            </MgPill>
+          )}
+          {isSuccess && !exists && (
+            <MgPill color="var(--mg-fg3)" bg="rgba(148,163,184,.16)">
+              {t("fileNotExist")}
+            </MgPill>
+          )}
+        </div>
 
-    switch (task.status) {
-      case DownloadStatus.Downloading:
-        list.push(
-          <DownloadTag
-            key="downloading"
-            icon={<DownloadIcon fill="#fff" width={14} height={14} />}
-            text={t("downloading")}
-            color="#127af3"
-          />,
-        );
-        break;
-      case DownloadStatus.Success:
-        list.push(
-          <DownloadTag
-            key="success"
-            text={t("downloadSuccess")}
-            color="#09ce87"
-          />,
-        );
-        if (!task.exists) {
-          list.push(
-            <DownloadTag
-              key="notExists"
-              text={t("fileNotExist")}
-              color="#9abbe2"
-            />,
-          );
-        }
-        break;
-      case DownloadStatus.Failed:
-        list.push(
+        <div className="mb-2.5 flex flex-wrap items-center gap-x-3.5 gap-y-1 text-[12px] text-mg-fg3">
+          {task.folder && (
+            <span className="inline-flex max-w-[240px] items-center gap-1.5 truncate">
+              <Folder size={13} strokeWidth={2} className="shrink-0" />
+              <span className="truncate">{task.folder}</span>
+            </span>
+          )}
+          <span className="inline-flex items-center gap-1.5">
+            <Clock size={13} strokeWidth={2} className="shrink-0" />
+            {fromatDateTime(task.createdDate)}
+          </span>
+        </div>
+
+        {showProgress && (
+          <div className="flex items-center gap-3">
+            <div className="relative h-2 flex-1 overflow-hidden rounded-md bg-mg-surface2">
+              <div
+                className="h-full rounded-md"
+                style={{
+                  width: `${percent}%`,
+                  background: sm.bar,
+                  ...(isDownloading
+                    ? {
+                        backgroundSize: "28px 100%",
+                        animation: "mgbar .8s linear infinite",
+                      }
+                    : {}),
+                }}
+              />
+            </div>
+            <span
+              style={{ color: sm.color }}
+              className="min-w-[42px] text-right text-[12.5px] font-bold tabular-nums"
+            >
+              {percent}%
+            </span>
+            {isDownloading && (
+              <span className="min-w-16 text-right text-[11.5px] font-semibold text-mg-fg2 tabular-nums">
+                {task.speed}
+              </span>
+            )}
+          </div>
+        )}
+
+        {isFailed && (
           <TerminalDialog
-            key="failed"
+            asChild
             trigger={
-              <DownloadTag
-                icon={<FailedIcon />}
-                text={t("downloadFailed")}
-                color="#ff7373"
-                className="cursor-pointer"
-              />
+              <button
+                type="button"
+                className="inline-flex max-w-full items-center gap-1.5 rounded-[10px] bg-[rgba(244,63,94,.1)] px-[11px] py-2 text-left text-[12px] font-semibold text-[#f43f5e]"
+              >
+                <CircleAlert size={14} strokeWidth={2.2} className="shrink-0" />
+                <span className="truncate">{t("failReason")}</span>
+              </button>
             }
             title={task.name}
             id={task.id}
-          />,
-        );
-        break;
-      case DownloadStatus.Stopped:
-        list.push(
-          <DownloadTag
-            key="pause"
-            icon={<PauseIcon />}
-            text={t("downloadPause")}
-            color="#9abbe2"
-          />,
-        );
-        break;
-    }
-    return list;
-  }, [task, t]);
-
-  const renderDescription = useMemoizedFn(
-    (task: DownloadTaskDetails): ReactNode => {
-      if (task.percent && task.status === DownloadStatus.Downloading) {
-        const val = Math.round(Number(task.percent));
+          />
+        )}
+      </div>
 
-        return (
-          <div className="flex flex-row items-center gap-2 text-xs text-[rgba(0,0,0,0.88)] dark:text-[rgba(255,255,255,0.85)]">
-            <Progress percent={val} strokeLinecap="butt" showInfo={false} />
-            <div className="min-w-5 shrink-0">{val}%</div>
-            <div className="min-w-20 shrink-0">{task.speed}</div>
-          </div>
-        );
-      }
-      return (
-        <div
-          className="relative flex flex-col gap-1 text-xs text-[#B3B3B3] dark:text-[#515257]"
-          title={task.url}
+      {/* right: status pill + actions */}
+      <div className="flex shrink-0 flex-col items-end gap-2.5">
+        <MgPill
+          color={sm.color}
+          bg={sm.bg}
+          className="px-2.5 py-1 text-[11.5px]"
         >
-          <div className="truncate">{task.url}</div>
-          <div className="truncate">
-            {t("createdAt")} {fromatDateTime(task.createdDate)}
-          </div>
-          {task.status === DownloadStatus.Failed && (
-            <TerminalDialog
-              asChild
-              trigger={
-                <div className="cursor-pointer truncate text-[#ff7373] dark:text-[rgba(255,115,115,0.6)]">
-                  {t("failReason")}: ...
-                </div>
-              }
-              title={task.name}
-              id={task.id}
-            />
+          {statusLabel}
+        </MgPill>
+        <div className="flex gap-1.5">
+          {isSuccess && (
+            <MgIconButton
+              variant={exists ? "primary" : "soft"}
+              disabled={!exists}
+              title={t("playVideo")}
+              onClick={handlePlay}
+            >
+              <Play size={15} fill="currentColor" strokeWidth={0} />
+            </MgIconButton>
           )}
+          {status === DownloadStatus.Stopped && (
+            <MgIconButton
+              variant="primary"
+              title={t("continueDownload")}
+              onClick={() => onStart(task.id)}
+            >
+              <Play size={15} fill="currentColor" strokeWidth={0} />
+            </MgIconButton>
+          )}
+          {status === DownloadStatus.Ready && (
+            <MgIconButton
+              variant="primary"
+              title={t("download")}
+              onClick={() => onStart(task.id)}
+            >
+              <ArrowDownToLine size={15} strokeWidth={2.4} />
+            </MgIconButton>
+          )}
+          {isDownloading && (
+            <MgIconButton
+              variant="surface"
+              title={t("pause")}
+              onClick={() => onStop(task.id)}
+            >
+              <Pause size={14} fill="currentColor" strokeWidth={0} />
+            </MgIconButton>
+          )}
+          {isFailed && (
+            <MgIconButton
+              variant="danger"
+              title={t("redownload")}
+              onClick={() => onStart(task.id)}
+            >
+              <RotateCw size={15} strokeWidth={2.2} />
+            </MgIconButton>
+          )}
+          {(status === DownloadStatus.Ready ||
+            status === DownloadStatus.Pending ||
+            status === DownloadStatus.Stopped ||
+            isFailed) && (
+            <MgIconButton
+              variant="surface"
+              title={t("edit")}
+              onClick={() => onEdit(task)}
+            >
+              <Pencil size={14} strokeWidth={2} />
+            </MgIconButton>
+          )}
+          <MgIconButton
+            variant="surface"
+            title={t("more")}
+            onClick={handleMore}
+          >
+            <MoreHorizontal size={16} strokeWidth={2} />
+          </MgIconButton>
         </div>
-      );
-    },
-  );
-
-  return (
-    <div
-      className={cn(
-        "relative flex flex-row gap-3 rounded-lg bg-[#FAFCFF] px-3 pb-3.5 pt-2 dark:bg-[#27292F]",
-        {
-          "bg-linear-to-r from-[#D0E8FF] to-[#F2F7FF] dark:from-[#27292F] dark:to-[#00244E]":
-            selected,
-          "opacity-70": task.status === DownloadStatus.Success && !task.exists,
-        },
-      )}
-      onContextMenu={() => onContextMenu(task.id)}
-    >
-      <Checkbox
-        className="mt-2"
-        checked={selected}
-        onCheckedChange={() => onSelectChange(task.id)}
-      />
-      <div className={cn("flex flex-1 flex-col gap-1 overflow-hidden")}>
-        {selected && (
-          <img
-            alt=""
-            src={selectedBg}
-            className="absolute bottom-0 right-[126px] top-0 block h-full select-none"
-          />
-        )}
-        <div className="relative flex flex-row items-center gap-2">
-          {renderTitle(task)}
-          <div className="flex shrink-0 grow flex-row gap-2">{tags}</div>
-          <div className="flex flex-row items-center gap-3 rounded-md bg-[#eff4fa] px-1.5 py-1.5 dark:bg-[#3B3F48]">
-            {actionButtons}
-          </div>
-        </div>
-        {renderDescription(task)}
       </div>
     </div>
   );
diff --git a/apps/ui/src/pages/home-page/components/download-list.tsx b/apps/ui/src/pages/home-page/components/download-list.tsx
index 966e19e68..a3f1b2a3f 100644
--- a/apps/ui/src/pages/home-page/components/download-list.tsx
+++ b/apps/ui/src/pages/home-page/components/download-list.tsx
@@ -1,201 +1,164 @@
-import type { DownloadFilter, DownloadTask } from "@mediago/shared-common";
+import {
+  DownloadFilter,
+  type DownloadTaskWithFile,
+} from "@mediago/shared-common";
 import { useMemoizedFn } from "ahooks";
-import { App, Empty } from "antd";
-import { produce } from "immer";
-import { useEffect, useId, useMemo, useRef, useState } from "react";
+import { App } from "antd";
+import { Download } from "lucide-react";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import DownloadForm, { type DownloadFormRef } from "@/components/download-form";
-import Loading from "@/components/loading";
-import { EDIT_DOWNLOAD } from "@/const";
-import { usePlatform } from "@/hooks/use-platform";
 import {
+  deleteDownloadTask,
   startDownload,
   stopDownload,
-  deleteDownloadTask,
 } from "@/api/download-task";
+import { MgButton } from "@/components/mg";
+import { TaskContextMenu } from "@/components/task-context-menu";
 import { useTasks } from "@/hooks/use-tasks";
-import { cn, tdApp } from "@/utils";
+import { useUiStore } from "@/store/ui";
 import { DownloadTaskItem } from "./download-item";
+import { DownloadLogPanel } from "./download-log-panel";
 import { ListHeader } from "./list-header";
 
 interface Props {
   filter: DownloadFilter;
 }
 
+function Skeletons() {
+  return (
+    <div className="flex flex-col gap-3">
+      {[0, 1, 2, 3].map((i) => (
+        <div
+          key={i}
+          className="flex h-24 items-center gap-4 rounded-[16px] border border-mg-line bg-mg-surface p-[18px] [animation:mgpulse_1.4s_ease-in-out_infinite]"
+        >
+          <div className="size-[54px] shrink-0 rounded-[13px] bg-mg-surface2" />
+          <div className="flex flex-1 flex-col gap-2.5">
+            <div className="h-[13px] w-2/5 rounded-md bg-mg-surface2" />
+            <div className="h-2.5 w-3/5 rounded-md bg-mg-surface2" />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
 export function DownloadTaskList({ filter }: Props) {
-  const [selected, setSelected] = useState<number[]>([]);
-  const { contextMenu } = usePlatform();
-  const { message } = App.useApp();
   const { t } = useTranslation();
-  const editFormRef = useRef<DownloadFormRef>(null);
-  const refreshTimeoutRef = useRef<NodeJS.Timeout | null>(null);
-  const downloadListId = useId();
-  const { mutate, isLoading, data } = useTasks(filter);
-
-  useEffect(() => {
-    return () => {
-      // Clean up any pending refresh timers
-      if (refreshTimeoutRef.current) {
-        clearTimeout(refreshTimeoutRef.current);
-        refreshTimeoutRef.current = null;
-      }
-    };
-  }, [mutate]);
-
-  const handleItemSelectChange = useMemoizedFn((id: number) => {
-    setSelected(
-      produce((draft) => {
-        const index = draft.indexOf(id);
-        if (index !== -1) {
-          draft.splice(index, 1);
-        } else {
-          draft.push(id);
-        }
-      }),
-    );
-  });
+  const { message } = App.useApp();
+  const { data, isLoading, mutate } = useTasks(filter);
+  const openEditDownload = useUiStore((s) => s.openEditDownload);
+  const openNewDownload = useUiStore((s) => s.openNewDownload);
+  const [selected, setSelected] = useState<number[]>([]);
+  const [logOpen, setLogOpen] = useState(false);
 
-  const handleSelectAll = useMemoizedFn(() => {
-    setSelected(
-      produce((draft) => {
-        if (draft.length) {
-          draft.splice(0, draft.length);
-        } else {
-          draft.push(...data.map((task) => task.id));
-        }
-      }),
-    );
-  });
+  const isList = filter === DownloadFilter.list;
+  const anySelected = selected.length > 0;
 
-  const listChecked = useMemo(() => {
-    if (selected.length === 0) {
-      return false;
-    }
-    if (selected.length === data.length) {
-      return true;
-    }
-    return "indeterminate";
-  }, [selected, data.length]);
+  const toggleSelect = useMemoizedFn((id: number) =>
+    setSelected((prev) =>
+      prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id],
+    ),
+  );
+  const addSelect = useMemoizedFn((id: number) =>
+    setSelected((prev) => (prev.includes(id) ? prev : [...prev, id])),
+  );
+  const selectAll = useMemoizedFn(() =>
+    setSelected((prev) => (prev.length ? [] : data.map((x) => x.id))),
+  );
 
-  const onStartDownload = useMemoizedFn(async (id: number) => {
+  const onStart = useMemoizedFn(async (id: number) => {
     await startDownload(id);
-
-    message.success(t("addTaskSuccess"));
+    message.success(t("downloadStarted"));
     mutate();
   });
-
-  const onStopDownload = useMemoizedFn(async (id: number) => {
+  const onStop = useMemoizedFn(async (id: number) => {
     await stopDownload(id);
-
-    setTimeout(() => {
-      mutate();
-    }, 500);
+    setTimeout(() => mutate(), 500);
   });
-
-  const handleFormConfirm = useMemoizedFn(async () => {
+  const onEdit = useMemoizedFn((task: DownloadTaskWithFile) =>
+    openEditDownload(task),
+  );
+  const onDelete = useMemoizedFn(async (id: number) => {
+    await deleteDownloadTask(id);
     mutate();
   });
 
-  const handleContext = useMemoizedFn(async (id: number) => {
-    const action = await contextMenu.show([
-      { key: "select", label: t("select") },
-      { key: "download", label: t("download") },
-      { key: "refresh", label: t("refresh") },
-      { key: "separator", label: "", type: "separator" },
-      { key: "delete", label: t("delete") },
-    ]);
-    if (action === "select") {
-      setSelected((keys) => [...keys, id]);
-    } else if (action === "download") {
-      onStartDownload(id);
-    } else if (action === "refresh") {
-      mutate();
-    } else if (action === "delete") {
-      await deleteDownloadTask(id);
-      mutate();
-    }
-  });
-
-  const onDeleteItems = useMemoizedFn(async (ids: number[]) => {
-    await Promise.allSettled(ids.map((id) => deleteDownloadTask(Number(id))));
+  const onBatchStart = useMemoizedFn(async () => {
+    await Promise.allSettled(selected.map((id) => startDownload(id)));
+    message.success(t("downloadStarted"));
     setSelected([]);
     mutate();
   });
-
-  const onDownloadItems = useMemoizedFn(async (ids: number[]) => {
-    await Promise.allSettled(ids.map((id) => startDownload(Number(id))));
-
-    message.success(t("addTaskSuccess"));
-    mutate();
+  const onBatchDelete = useMemoizedFn(async () => {
+    await Promise.allSettled(selected.map((id) => deleteDownloadTask(id)));
     setSelected([]);
-  });
-
-  const onCancelItems = useMemoizedFn(async () => {
-    setSelected([]);
-  });
-
-  const handleShowDownloadForm = useMemoizedFn((task: DownloadTask) => {
-    tdApp.onEvent(EDIT_DOWNLOAD);
-    const { id, name, url, headers, type, folder } = task;
-    const values = {
-      batch: false,
-      id,
-      name,
-      url,
-      headers,
-      type,
-      folder,
-    };
-    editFormRef.current?.openModal(values);
+    mutate();
   });
 
   return (
-    <div className="flex flex-col flex-1 overflow-auto">
+    <div className="flex flex-1 flex-col">
       <ListHeader
-        selected={selected}
-        checked={listChecked}
-        onSelectAll={handleSelectAll}
-        onDeleteItems={onDeleteItems}
-        onDownloadItems={onDownloadItems}
-        onCancelItems={onCancelItems}
+        anySelected={anySelected}
+        selectedCount={selected.length}
+        totalCount={data.length}
+        onSelectAll={selectAll}
+        onBatchStart={onBatchStart}
+        onBatchDelete={onBatchDelete}
+        onToggleLog={() => setLogOpen((v) => !v)}
+        logOpen={logOpen}
         filter={filter}
       />
-      <div
-        className={cn(
-          "flex w-full flex-1 shrink-0 flex-col gap-3 overflow-auto",
-        )}
-      >
-        {isLoading && <Loading />}
-        {data.length === 0 && !isLoading && (
-          <div className="flex h-full flex-1 flex-row items-center justify-center rounded-lg bg-white dark:bg-[#1F2024]">
-            <Empty description={t("noData")} />
+
+      {logOpen && <DownloadLogPanel tasks={data} />}
+
+      {isLoading ? (
+        <Skeletons />
+      ) : data.length === 0 ? (
+        <div className="py-[70px] text-center">
+          <div className="mx-auto mb-[22px] flex size-[90px] items-center justify-center rounded-[26px] bg-mg-primary-weak">
+            <Download size={42} className="text-mg-primary" strokeWidth={1.7} />
           </div>
-        )}
-        {data.length > 0 &&
-          data.map((task) => {
-            return (
-              <DownloadTaskItem
-                key={task.id}
-                task={task}
-                selected={selected.includes(task.id)}
-                onSelectChange={handleItemSelectChange}
-                onStartDownload={onStartDownload}
-                onStopDownload={onStopDownload}
-                onContextMenu={handleContext}
-                onShowEditForm={handleShowDownloadForm}
-              />
-            );
-          })}
-      </div>
-      <DownloadForm
-        id={downloadListId}
-        ref={editFormRef}
-        isEdit
-        onConfirm={handleFormConfirm}
+          <h3 className="mb-2 text-[18px] font-bold text-mg-fg">
+            {isList ? t("emptyDownloadsTitle") : t("emptyCompletedTitle")}
+          </h3>
+          <p className="mb-[22px] text-[13.5px] text-mg-fg2">
+            {isList ? t("emptyDownloadsSub") : t("emptyCompletedSub")}
+          </p>
+          {isList && (
+            <MgButton
+              variant="primary"
+              size="lg"
+              onClick={() => openNewDownload()}
+            >
+              {t("newDownload")}
+            </MgButton>
+          )}
+        </div>
+      ) : (
+        <div className="flex flex-col gap-3">
+          {data.map((task) => (
+            <DownloadTaskItem
+              key={task.id}
+              task={task}
+              selected={selected.includes(task.id)}
+              onSelectChange={toggleSelect}
+              onStart={onStart}
+              onStop={onStop}
+              onEdit={onEdit}
+            />
+          ))}
+        </div>
+      )}
+
+      <TaskContextMenu
+        onSelect={addSelect}
+        onDownload={onStart}
+        onRefresh={() => mutate()}
+        onDelete={onDelete}
       />
     </div>
   );
 }
 
-// Legacy export for backward compatibility
 export const DownloadList = DownloadTaskList;
diff --git a/apps/ui/src/pages/home-page/components/download-log-panel.tsx b/apps/ui/src/pages/home-page/components/download-log-panel.tsx
new file mode 100644
index 000000000..47fd82526
--- /dev/null
+++ b/apps/ui/src/pages/home-page/components/download-log-panel.tsx
@@ -0,0 +1,69 @@
+import { DownloadStatus } from "@mediago/shared-common";
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { getDownloadLog } from "@/api/download-task";
+import type { DownloadTaskDetails } from "@/hooks/use-tasks";
+
+/**
+ * Collapsible terminal-styled log panel (design lines 145-156).
+ * Tails the active (downloading) task's real log via getDownloadLog.
+ */
+export function DownloadLogPanel({ tasks }: { tasks: DownloadTaskDetails[] }) {
+  const { t } = useTranslation();
+  const active =
+    tasks.find((x) => x.status === DownloadStatus.Downloading) ?? tasks[0];
+  const activeId = active?.id;
+  const [log, setLog] = useState("");
+
+  useEffect(() => {
+    if (activeId === null || activeId === undefined) {
+      setLog("");
+      return;
+    }
+    let alive = true;
+    const fetchLog = async () => {
+      try {
+        const res = await getDownloadLog(activeId);
+        if (alive) setLog(res?.log || "");
+      } catch {
+        // ignore
+      }
+    };
+    fetchLog();
+    const id = setInterval(fetchLog, 1500);
+    return () => {
+      alive = false;
+      clearInterval(id);
+    };
+  }, [activeId]);
+
+  const lines = log ? log.split("\n").slice(-200) : [];
+
+  return (
+    <div className="mb-4 overflow-hidden rounded-[14px] border border-[#1f1f2e] bg-[#0c0c14] font-mono [animation:mgfade_.2s_ease]">
+      <div className="flex items-center gap-[7px] border-b border-[#1f1f2e] bg-[#13131e] px-[14px] py-[9px]">
+        <span className="size-[11px] rounded-full bg-[#ff5f57]" />
+        <span className="size-[11px] rounded-full bg-[#febc2e]" />
+        <span className="size-[11px] rounded-full bg-[#28c840]" />
+        <span className="ml-2 text-[11.5px] text-[#8a8aa0]">
+          mediago · download.log
+        </span>
+      </div>
+      <div className="max-h-[180px] overflow-auto px-4 py-3.5 text-[12px] leading-[1.8] text-[#a9b7c6]">
+        {lines.length === 0 ? (
+          <div className="text-[#5b6b7c]">{t("noData")}</div>
+        ) : (
+          lines.map((ln, i) => (
+            <div key={i} className="whitespace-pre-wrap">
+              {ln}
+            </div>
+          ))
+        )}
+        <div className="text-[#5b6b7c]">
+          ▍
+          <span className="ml-px inline-block h-[13px] w-[7px] translate-y-[2px] bg-[#34d399] [animation:mgblink_1s_step-end_infinite]" />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/ui/src/pages/home-page/components/list-header.tsx b/apps/ui/src/pages/home-page/components/list-header.tsx
index 3316e96b7..9ca053263 100644
--- a/apps/ui/src/pages/home-page/components/list-header.tsx
+++ b/apps/ui/src/pages/home-page/components/list-header.tsx
@@ -1,110 +1,92 @@
-import { useMemoizedFn } from "ahooks";
-import { App, Button, Dropdown, type MenuProps } from "antd";
-import { useMemo } from "react";
-import { Trans, useTranslation } from "react-i18next";
-import { Checkbox } from "@/components/ui/checkbox";
-import { usePlatform } from "@/hooks/use-platform";
-import { isWeb } from "@/utils";
 import { DownloadFilter } from "@mediago/shared-common";
+import { Check, Play, ScrollText, Trash2 } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { MgButton, MgIconButton } from "@/components/mg";
+import { cn } from "@/utils";
 
 interface Props {
-  onSelectAll: (checked: boolean) => void;
-  checked: boolean | "indeterminate";
-  selected: number[];
-  onDeleteItems: (id: number[]) => void;
-  onDownloadItems: (id: number[]) => void;
-  onCancelItems: () => void;
+  anySelected: boolean;
+  selectedCount: number;
+  totalCount: number;
+  onSelectAll: () => void;
+  onBatchStart: () => void;
+  onBatchDelete: () => void;
+  onToggleLog: () => void;
+  logOpen: boolean;
   filter: DownloadFilter;
 }
 
 export function ListHeader({
+  anySelected,
+  selectedCount,
+  totalCount,
   onSelectAll,
-  checked,
-  selected,
-  onDeleteItems,
-  onDownloadItems,
-  onCancelItems,
+  onBatchStart,
+  onBatchDelete,
+  onToggleLog,
+  logOpen,
   filter,
 }: Props) {
-  const { message } = App.useApp();
   const { t } = useTranslation();
-  const disabled = useMemo(() => selected.length === 0, [selected.length]);
-  const { dialog } = usePlatform();
-  const items: MenuProps["items"] = useMemo(() => {
-    return [
-      {
-        key: "exportDownloadList",
-        label: t("exportDownloadList"),
-      },
-    ];
-  }, [t]);
-
-  const onMenuClick: MenuProps["onClick"] = useMemoizedFn(async (e) => {
-    const { key } = e;
-    if (key === "exportDownloadList") {
-      try {
-        const { exportDownloadList } = await import("@/api/download-task");
-        const content = await exportDownloadList();
-        await dialog.save({
-          content:
-            typeof content === "string" ? content : JSON.stringify(content),
-          defaultPath: "downloads.txt",
-          filters: [{ name: "Text", extensions: ["txt"] }],
-        });
-      } catch {
-        message.error(t("exportDownloadListFailed"));
-      }
-    }
-  });
 
   return (
-    <div className="flex flex-row items-center justify-between pb-2 pl-3">
-      <div className="flex flex-row items-center gap-3">
-        <Checkbox checked={checked} onCheckedChange={onSelectAll} />
+    <div className="mb-4 flex flex-wrap items-center gap-2.5 rounded-[14px] border border-mg-line bg-mg-surface p-[10px_12px]">
+      <button
+        type="button"
+        onClick={onSelectAll}
+        className="flex h-[34px] items-center gap-2 rounded-[9px] border border-mg-line bg-mg-surface2 px-3 text-[12.5px] font-semibold text-mg-fg"
+      >
         <span
-          className="cursor-pointer text-sm text-[#343434] dark:text-white"
-          onClick={() => onSelectAll(true)}
+          className={cn(
+            "flex size-[17px] items-center justify-center rounded-[5px] border-2",
+            anySelected ? "border-mg-primary bg-mg-primary" : "border-mg-line2",
+          )}
         >
-          {t("selectAll")}
+          {anySelected && <Check size={11} color="#fff" strokeWidth={3.5} />}
         </span>
-        {!!selected.length && (
-          <span className="text-xs text-[#A4A4A4]">
-            <Trans
-              i18nKey="selectedItems"
-              values={{ count: selected.length }}
-            />
-          </span>
-        )}
-      </div>
-      <div className="flex flex-row items-center gap-3">
-        <Button
-          disabled={disabled}
-          onClick={async () => onDeleteItems(selected)}
+        {t("selectAll")}
+      </button>
+
+      <span className="text-[12.5px] font-semibold text-mg-fg2">
+        {t("selectedItems", { count: selectedCount })}
+        {totalCount > 0 ? ` / ${totalCount}` : ""}
+      </span>
+
+      <div className="flex-1" />
+
+      {filter === DownloadFilter.list && (
+        <MgButton
+          variant="surface"
+          size="sm"
+          disabled={!anySelected}
+          onClick={onBatchStart}
+          className={cn(anySelected && "border-mg-primary text-mg-primary")}
         >
-          {t("delete")}
-        </Button>
-        <Button disabled={disabled} onClick={() => onCancelItems()}>
-          {t("cancel")}
-        </Button>
-        {filter === DownloadFilter.list && (
-          <Button
-            disabled={disabled}
-            type="primary"
-            onClick={() => onDownloadItems(selected)}
-          >
-            {t("download")}
-          </Button>
-        )}
-        {!isWeb && (
-          <Dropdown
-            menu={{ items, onClick: onMenuClick }}
-            placement="bottomRight"
-            trigger={["click"]}
-          >
-            <Button type="primary">{t("more")}</Button>
-          </Dropdown>
-        )}
-      </div>
+          <Play size={14} strokeWidth={2.2} fill="currentColor" />
+          {t("batchStart")}
+        </MgButton>
+      )}
+
+      <MgButton
+        variant="surface"
+        size="sm"
+        disabled={!anySelected}
+        onClick={onBatchDelete}
+        className={cn(anySelected && "border-[#f43f5e] text-[#f43f5e]")}
+      >
+        <Trash2 size={14} strokeWidth={2.2} />
+        {t("delete")}
+      </MgButton>
+
+      <MgIconButton
+        variant="surface"
+        size="sm"
+        title="log"
+        onClick={onToggleLog}
+        className={cn(logOpen && "border-mg-primary text-mg-primary")}
+      >
+        <ScrollText size={15} strokeWidth={2} />
+      </MgIconButton>
     </div>
   );
 }
diff --git a/apps/ui/src/pages/home-page/index.tsx b/apps/ui/src/pages/home-page/index.tsx
index ad0902426..a33b6e96d 100644
--- a/apps/ui/src/pages/home-page/index.tsx
+++ b/apps/ui/src/pages/home-page/index.tsx
@@ -2,128 +2,125 @@ import { QrcodeOutlined } from "@ant-design/icons";
 import { DownloadFilter } from "@mediago/shared-common";
 import { useMemoizedFn } from "ahooks";
 import { Pagination, Popover, QRCode } from "antd";
-import { type FC, useId, useRef } from "react";
+import { FolderOpen, Plus } from "lucide-react";
+import { type FC, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { useShallow } from "zustand/react/shallow";
-import { FolderIcon } from "@/assets/svg";
-import DownloadForm, {
-  type DownloadFormItem,
-  type DownloadFormRef,
-} from "@/components/download-form";
-import { HomeDownloadButton } from "@/components/home-download-button";
-import PageContainer from "@/components/page-container";
-import { Button } from "@/components/ui/button";
+import type { DownloadFormItem } from "@/components/download-form";
+import { MgButton } from "@/components/mg";
 import { CLICK_DOWNLOAD } from "@/const";
-import { usePlatform } from "@/hooks/use-platform";
 import { useEnvPath } from "@/hooks/use-config";
+import { usePlatform } from "@/hooks/use-platform";
 import { useTasks } from "@/hooks/use-tasks";
+import { useUrlInvoke } from "@/hooks/use-url-invoke";
 import { appStoreSelector, useAppStore } from "@/store/app";
-import { downloadFormSelector, useConfigStore } from "@/store/config";
+import { useUiStore } from "@/store/ui";
 import { isWeb, tdApp } from "@/utils";
 import { DownloadList } from "./components/download-list";
-import { useUrlInvoke } from "@/hooks/use-url-invoke";
 
 interface Props {
   filter?: DownloadFilter;
 }
 
 const HomePage: FC<Props> = ({ filter = DownloadFilter.list }) => {
+  const { t } = useTranslation();
   const { shell } = usePlatform();
   const appStore = useAppStore(useShallow(appStoreSelector));
-  const { t } = useTranslation();
-  const newFormRef = useRef<DownloadFormRef>(null);
-  const homeId = useId();
-  const { lastIsBatch, lastDownloadTypes } = useConfigStore(
-    useShallow(downloadFormSelector),
-  );
-
-  const { pagination, total, mutate, setPage, setPageSize } = useTasks(filter);
   const { envPath } = useEnvPath();
+  const openNewDownload = useUiStore((s) => s.openNewDownload);
+  const { pagination, total, mutate, setPage, setPageSize } = useTasks(filter);
+
+  const isList = filter === DownloadFilter.list;
+
+  // The page state is shared between Downloads (/) and Completed (/done);
+  // reset to page 1 on filter switch so a deep page can't strand the list
+  // on an empty result with the pagination control hidden.
+  useEffect(() => {
+    setPage(1);
+  }, [filter, setPage]);
 
   useUrlInvoke({
     onOpenForm: (item: DownloadFormItem) => {
-      newFormRef.current?.openModal(item);
-    },
-    refresh: () => {
-      mutate();
+      openNewDownload({
+        url: item.url,
+        name: item.name,
+        type: item.type,
+        headers: item.headers,
+        folder: item.folder,
+        batch: item.batch,
+        batchList: item.batchList,
+      });
     },
+    refresh: () => mutate(),
   });
 
-  const handleChangePage = useMemoizedFn((page: number, pageSize: number) => {
-    setPage(page);
-    setPageSize(pageSize);
-  });
-
-  const handleOpenForm = useMemoizedFn(() => {
+  const handleNew = useMemoizedFn(() => {
     tdApp.onEvent(CLICK_DOWNLOAD);
-    const item: DownloadFormItem = {
-      batch: lastIsBatch,
-      type: lastDownloadTypes,
-    };
-    newFormRef.current?.openModal(item);
-  });
-
-  const handleConfirm = useMemoizedFn(async () => {
-    mutate();
+    openNewDownload();
   });
 
   return (
-    <PageContainer
-      title={
-        filter === DownloadFilter.list
-          ? t("downloadList")
-          : t("downloadComplete")
-      }
-      rightExtra={
-        <div className="flex flex-row gap-2">
+    <div className="mx-auto max-w-[1180px] px-[clamp(16px,3vw,34px)] pb-[90px] pt-6">
+      <div className="mb-5 flex flex-wrap items-end gap-4">
+        <div className="min-w-0">
+          <h1 className="text-[clamp(22px,2.4vw,28px)] font-extrabold tracking-[-0.03em] text-mg-fg">
+            {isList ? t("downloadList") : t("downloadComplete")}
+          </h1>
+          <p className="mt-1.5 text-[13.5px] text-mg-fg2">
+            {isList ? t("manageAllTasks") : t("completedTasksDesc")}
+          </p>
+        </div>
+        <div className="flex-1" />
+        <div className="flex items-center gap-2.5">
           {!isWeb && (
-            <Button onClick={() => shell.open(appStore.local)}>
-              <FolderIcon />
+            <MgButton
+              variant="surface"
+              onClick={() => shell.open(appStore.local)}
+            >
+              <FolderOpen size={16} strokeWidth={2} />
               {t("openFolder")}
-            </Button>
+            </MgButton>
+          )}
+          {!isList && !isWeb && appStore.enableMobilePlayer && (
+            <Popover
+              placement="bottomRight"
+              content={
+                <div className="flex flex-col items-center gap-1">
+                  <QRCode value={envPath?.playerUrl || ""} />
+                  <div className="text-xs">{t("scanToWatch")}</div>
+                </div>
+              }
+            >
+              <MgButton variant="surface">
+                <QrcodeOutlined />
+                {t("playOnMobile")}
+              </MgButton>
+            </Popover>
           )}
-          {filter === DownloadFilter.done &&
-            !isWeb &&
-            appStore.enableMobilePlayer && (
-              <Popover
-                content={
-                  <div>
-                    <QRCode value={envPath?.playerUrl || ""} />
-                    <div className="text-xs">{t("scanToWatch")}</div>
-                  </div>
-                }
-                placement="bottomRight"
-              >
-                <Button>
-                  <QrcodeOutlined />
-                  {t("playOnMobile")}
-                </Button>
-              </Popover>
-            )}
-          {filter === DownloadFilter.list && (
-            <HomeDownloadButton onClick={handleOpenForm} />
+          {isList && (
+            <MgButton variant="primary" onClick={handleNew}>
+              <Plus size={17} strokeWidth={2.4} />
+              {t("newDownload")}
+            </MgButton>
           )}
         </div>
-      }
-      className="bg-white p-3 dark:bg-[#1F2024] flex flex-col flex-1 h-full rounded-lg gap-3"
-    >
-      <DownloadList filter={filter} />
+      </div>
 
-      <Pagination
-        className="flex justify-end"
-        current={pagination.page}
-        pageSize={pagination.pageSize}
-        onChange={handleChangePage}
-        total={total}
-      />
+      <DownloadList filter={filter} />
 
-      <DownloadForm
-        id={homeId}
-        ref={newFormRef}
-        destroyOnClose
-        onConfirm={handleConfirm}
-      />
-    </PageContainer>
+      {total > pagination.pageSize && (
+        <Pagination
+          className="mt-6 flex justify-center"
+          current={pagination.page}
+          pageSize={pagination.pageSize}
+          total={total}
+          onChange={(page, pageSize) => {
+            setPage(page);
+            setPageSize(pageSize);
+          }}
+        />
+      )}
+    </div>
   );
 };
 
diff --git a/apps/ui/src/pages/setting-page/index.tsx b/apps/ui/src/pages/setting-page/index.tsx
index bfd424668..775d5a583 100644
--- a/apps/ui/src/pages/setting-page/index.tsx
+++ b/apps/ui/src/pages/setting-page/index.tsx
@@ -1,55 +1,126 @@
-import {
-  ClearOutlined,
-  CopyOutlined,
-  DownloadOutlined,
-  FolderOpenOutlined,
-  UploadOutlined,
-} from "@ant-design/icons";
 import { useMemoizedFn } from "ahooks";
-import {
-  App,
-  Badge,
-  Button,
-  Card,
-  Form,
-  type FormInstance,
-  Input,
-  InputNumber,
-  Modal,
-  Progress,
-  Radio,
-  Select,
-  Space,
-  Switch,
-} from "antd";
-import React, { useEffect, useMemo, useRef, useState } from "react";
+import { App, Badge, Modal, Progress } from "antd";
+import { Copy, Download, FolderOpen, Upload } from "lucide-react";
+import { type ReactNode, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useShallow } from "zustand/react/shallow";
-import PageContainer from "@/components/page-container";
-import { CHECK_UPDATE } from "@/const";
-import { usePlatform } from "@/hooks/use-platform";
-import { useEnvPath } from "@/hooks/use-config";
 import { setConfigValue } from "@/api/config";
 import {
   exportFavorites as exportFavoritesApi,
   importFavorites,
 } from "@/api/favorite";
+import {
+  MgButton,
+  MgCard,
+  MgIconButton,
+  MgPill,
+  MgSegment,
+  type MgSegmentOption,
+  MgStepper,
+  MgToggle,
+} from "@/components/mg";
+import { CHECK_UPDATE } from "@/const";
+import { useEnvPath } from "@/hooks/use-config";
+import { usePlatform } from "@/hooks/use-platform";
 import {
   appStoreSelector,
   setAppStoreSelector,
   useAppStore,
 } from "@/store/app";
 import { updateSelector, useSessionStore } from "@/store/session";
-import { isWeb, tdApp } from "@/utils";
-import { AppLanguage, AppStore, AppTheme } from "@mediago/shared-common";
+import { cn, isWeb, tdApp } from "@/utils";
+import { AppLanguage, type AppStore, AppTheme } from "@mediago/shared-common";
 
 const version = import.meta.env.APP_VERSION;
 
+/**
+ * A single settings row: label (+ optional description) on the left, the
+ * control on the right. `flex-wrap` makes the control drop below the label
+ * on narrow widths, matching MediaGo.dc.html (settings rows, lines 276-280).
+ */
+function SettingRow({
+  label,
+  desc,
+  control,
+  last,
+}: {
+  label: ReactNode;
+  desc?: ReactNode;
+  control: ReactNode;
+  last?: boolean;
+}) {
+  return (
+    <div
+      className={cn(
+        "flex flex-wrap items-center gap-[14px] px-[18px] py-[13px]",
+        !last && "border-b border-mg-line",
+      )}
+    >
+      <div className="min-w-[160px] flex-1">
+        <div className="text-[13.5px] font-semibold text-mg-fg">{label}</div>
+        {desc && (
+          <div className="mt-[2px] text-[11.5px] text-mg-fg3">{desc}</div>
+        )}
+      </div>
+      <div className="flex-none">{control}</div>
+    </div>
+  );
+}
+
+/** A settings group card: header (title + optional desktop badge) + rows. */
+function SettingSection({
+  title,
+  desktop,
+  badgeLabel,
+  children,
+}: {
+  title: ReactNode;
+  desktop?: boolean;
+  badgeLabel: string;
+  children: ReactNode;
+}) {
+  return (
+    <MgCard className="overflow-hidden">
+      <div className="flex items-center gap-[9px] border-b border-mg-line px-[18px] pb-[13px] pt-[15px]">
+        <span className="text-[13.5px] font-extrabold tracking-[-0.01em] text-mg-fg">
+          {title}
+        </span>
+        {desktop && (
+          <MgPill className="bg-mg-surface2 text-mg-fg3">{badgeLabel}</MgPill>
+        )}
+      </div>
+      <div>{children}</div>
+    </MgCard>
+  );
+}
+
+/** Mono text input used for paths / URLs / API keys. */
+function MonoInput({
+  value,
+  onChange,
+  placeholder,
+  type = "text",
+}: {
+  value: string;
+  onChange?: (v: string) => void;
+  placeholder?: string;
+  type?: string;
+}) {
+  return (
+    <input
+      type={type}
+      value={value}
+      placeholder={placeholder}
+      readOnly={!onChange}
+      onChange={(e) => onChange?.(e.target.value)}
+      className="h-[38px] min-w-0 flex-1 rounded-[10px] border-[1.5px] border-mg-line bg-mg-surface2 px-3 font-mono text-[12px] text-mg-fg outline-none transition-colors focus:border-mg-primary focus:bg-mg-surface"
+    />
+  );
+}
+
 const SettingPage: React.FC = () => {
-  const { dialog, shell, browser, contextMenu, update, on, off, app } =
-    usePlatform();
+  const { dialog, shell, browser, update, on, off, app } = usePlatform();
   const { t } = useTranslation();
-  const formRef = useRef<FormInstance<AppStore>>(null);
   const settings = useAppStore(useShallow(appStoreSelector));
   const { setAppStore } = useAppStore(useShallow(setAppStoreSelector));
   const { envPath } = useEnvPath();
@@ -61,71 +132,54 @@ const SettingPage: React.FC = () => {
   const [downloadProgress, setDownloadProgress] = useState(0);
   const [updateDownloaded, setUpdateDownloaded] = useState(false);
 
-  // Mounting all 6 cards + ~25 Form.Items in one render produces a
-  // ~300ms long task on navigation (dominated by Ant Design Form.Item
-  // registration + cssinjs). Render one card per animation frame so the
-  // longest task is just a single card (~50ms) — no individual frame is
-  // long enough to feel janky.
-  const [visibleCount, setVisibleCount] = useState(1);
-
-  const isFirstSync = useRef(true);
-  useEffect(() => {
-    // initialValues already seeds the form on mount; the extra
-    // setFieldsValue here would force Ant Form to diff every Form.Item
-    // again right after mount, which is a meaningful slice of the jank.
-    if (isFirstSync.current) {
-      isFirstSync.current = false;
-      return;
-    }
-    formRef.current?.setFieldsValue(settings);
-  }, [settings]);
+  // Persist a single key the same way the AntD form did: push to Go Core,
+  // then mirror into the Zustand store (which also drives app-wide theme /
+  // language switches via setAppStore).
+  const commit = useMemoizedFn(
+    async <K extends keyof AppStore>(key: K, value: AppStore[K]) => {
+      try {
+        await setConfigValue(key as string, value);
+        setAppStore({ [key]: value } as Partial<AppStore>);
+      } catch (e: unknown) {
+        message.error((e as Error).message);
+      }
+    },
+  );
 
-  // Mount remaining cards one per animation frame, so each task stays
-  // short enough to avoid a visible freeze.
   useEffect(() => {
-    if (visibleCount >= 6) return;
-    const raf = requestAnimationFrame(() => {
-      setVisibleCount((c) => c + 1);
-    });
-    return () => cancelAnimationFrame(raf);
-  }, [visibleCount]);
+    const onDownloadProgress = (
+      _event: unknown,
+      progress: { percent: number },
+    ) => {
+      setDownloadProgress(progress.percent);
+    };
+    const onDownloaded = () => {
+      setUpdateDownloaded(true);
+    };
+    on("update:downloadProgress", onDownloadProgress);
+    on("update:downloaded", onDownloaded);
+    return () => {
+      off("update:downloadProgress", onDownloadProgress);
+      off("update:downloaded", onDownloaded);
+    };
+  }, [on, off]);
 
   const onSelectDir = useMemoizedFn(async () => {
     const paths = await dialog.open({ type: "directory" });
     const local = paths?.[0];
-    if (local) {
-      await setConfigValue("local", local);
-      setAppStore({ local });
-      formRef.current?.setFieldValue("local", local);
-    }
-  });
-
-  const renderButtonLabel = useMemoizedFn(() => {
-    if (isWeb) {
-      return t("localDir");
-    }
-
-    return (
-      <Button onClick={onSelectDir} icon={<FolderOpenOutlined />}>
-        {t("selectFolder")}
-      </Button>
-    );
+    if (local) await commit("local", local);
   });
 
-  const onFormValueChange = useMemoizedFn(async (values: Partial<AppStore>) => {
+  const handleClearWebviewCache = useMemoizedFn(async () => {
     try {
-      await Promise.all(
-        Object.entries(values)
-          .filter(([, value]) => value !== undefined && value !== null)
-          .map(([key, value]) => setConfigValue(key, value)),
-      );
-      setAppStore(values);
-    } catch (e: unknown) {
-      message.error((e as Error).message);
+      await browser.clearCache();
+      message.success(t("clearCacheSuccess"));
+    } catch {
+      message.error(t("clearCacheFailed"));
     }
   });
 
-  const onMenuClick = useMemoizedFn(async (_) => {
+  const handleImportFavorite = useMemoizedFn(async () => {
     try {
       const contents = await dialog.open({
         type: "file",
@@ -134,9 +188,7 @@ const SettingPage: React.FC = () => {
       });
       if (!contents?.length) return;
       const favorites = JSON.parse(contents[0]);
-      if (Array.isArray(favorites)) {
-        await importFavorites(favorites);
-      }
+      if (Array.isArray(favorites)) await importFavorites(favorites);
       message.success(t("importFavoriteSuccess"));
     } catch {
       message.error(t("importFavoriteFailed"));
@@ -166,503 +218,519 @@ const SettingPage: React.FC = () => {
     await update.check();
   });
 
-  const handleHiddenUpdateModal = useMemoizedFn(() => {
-    setOpenUpdateModal(false);
+  const copy = useMemoizedFn((text: string) => {
+    navigator.clipboard.writeText(text);
+    message.success(t("skillsCopied"));
   });
 
-  const handleUpdate = useMemoizedFn(() => {
-    update.startDownload();
+  const openFolder = useMemoizedFn((target?: string) => {
+    if (target) shell.open(target);
   });
 
-  const handleInstallUpdate = useMemoizedFn(() => {
-    update.install();
+  const openExtensionDir = useMemoizedFn(async () => {
+    const dir = await app.getExtensionDir();
+    if (dir) shell.open(dir);
   });
 
-  useEffect(() => {
-    const onDownloadProgress = (
-      _event: unknown,
-      progress: { percent: number },
-    ) => {
-      setDownloadProgress(progress.percent);
-    };
-    const onDownloaded = () => {
-      setUpdateDownloaded(true);
-    };
-    on("update:downloadProgress", onDownloadProgress);
-    on("update:downloaded", onDownloaded);
+  // ---- Segment option sets ----
+  const themeOptions: MgSegmentOption<AppTheme>[] = [
+    { value: AppTheme.System, label: t("followSystem") },
+    { value: AppTheme.Dark, label: t("dark") },
+    { value: AppTheme.Light, label: t("light") },
+  ];
+  const langOptions: MgSegmentOption<AppLanguage>[] = [
+    { value: AppLanguage.System, label: t("followSystem") },
+    { value: AppLanguage.ZH, label: t("chinese") },
+    { value: AppLanguage.EN, label: t("english") },
+    { value: AppLanguage.IT, label: t("italian") },
+  ];
+  // closeMainWindow: true = quit on close, false = minimize to tray.
+  const closeOptions: MgSegmentOption<"minimize" | "close">[] = [
+    { value: "minimize", label: t("minimizeToTray") },
+    { value: "close", label: t("close") },
+  ];
 
-    return () => {
-      off("update:downloadProgress", onDownloadProgress);
-      off("update:downloaded", onDownloaded);
-    };
-  }, []);
+  // ---- Skills commands (reuse the existing wiring) ----
+  const coreUrl = envPath?.playerUrl
+    ? envPath.playerUrl.replace(/\/player\/$/, "")
+    : "";
+  const installCmd = t("skillsInstallCmd");
+  let setupCmd: string;
+  if (isWeb) {
+    const url = coreUrl || "http://localhost:8899";
+    setupCmd = settings.apiKey
+      ? `Set mediago url to ${url}, api key to ${settings.apiKey}`
+      : `Set mediago url to ${url}`;
+  } else {
+    setupCmd = coreUrl
+      ? `Set mediago url to ${coreUrl}`
+      : "Set mediago url to http://localhost:39719";
+  }
 
-  const handleClearWebviewCache = useMemoizedFn(async () => {
-    try {
-      await browser.clearCache();
-      message.success(t("clearCacheSuccess"));
-    } catch {
-      message.error(t("clearCacheFailed"));
-    }
-  });
+  const badge = t("desktopBadge");
+
+  return (
+    <div className="mediago-settings-scroll h-full overflow-auto bg-mg-bg">
+      <div
+        className="mx-auto max-w-[780px]"
+        style={{ padding: "24px clamp(16px,3vw,34px) 90px" }}
+      >
+        <div className="mb-[22px]">
+          <h1 className="m-0 text-[clamp(22px,2.4vw,28px)] font-extrabold tracking-[-0.03em] text-mg-fg">
+            {t("setting")}
+          </h1>
+          <p className="mt-[5px] text-[13.5px] text-mg-fg2">
+            {t("personalizeExperience")}
+          </p>
+        </div>
 
-  const cardSections: Array<{
-    key: string;
-    title: string;
-    hidden?: boolean;
-    children: React.ReactNode;
-  }> = useMemo<
-    Array<{
-      key: string;
-      title: string;
-      hidden?: boolean;
-      children: React.ReactNode;
-    }>
-  >(
-    () =>
-      [
-        {
-          key: "1",
-          title: t("basicSetting"),
-          children: (
-            <>
-              <Form.Item name="local" label={renderButtonLabel()}>
-                <Input disabled placeholder={t("pleaseSelectDownloadDir")} />
-              </Form.Item>
-              <Form.Item
-                hidden={isWeb}
-                name="theme"
+        <div className="flex flex-col gap-[18px]">
+          {/* ---------- General ---------- */}
+          <SettingSection title={t("basicSetting")} badgeLabel={badge}>
+            <SettingRow
+              label={t("localDir")}
+              control={
+                <div className="flex w-[min(320px,100%)] gap-2">
+                  <MonoInput
+                    value={settings.local}
+                    placeholder={t("pleaseSelectDownloadDir")}
+                  />
+                  {!isWeb && (
+                    <MgIconButton
+                      size="lg"
+                      title={t("selectFolder")}
+                      onClick={onSelectDir}
+                    >
+                      <FolderOpen size={16} strokeWidth={2} />
+                    </MgIconButton>
+                  )}
+                </div>
+              }
+            />
+            {!isWeb && (
+              <SettingRow
                 label={t("downloaderTheme")}
-              >
-                <Select
-                  options={[
-                    { label: t("followSystem"), value: AppTheme.System },
-                    { label: t("dark"), value: AppTheme.Dark },
-                    { label: t("light"), value: AppTheme.Light },
-                  ]}
-                  placeholder={t("pleaseSelectTheme")}
-                  allowClear={false}
+                control={
+                  <MgSegment
+                    value={settings.theme}
+                    onChange={(v) => commit("theme", v)}
+                    options={themeOptions}
+                  />
+                }
+              />
+            )}
+            <SettingRow
+              label={t("displayLanguage")}
+              control={
+                <MgSegment
+                  value={settings.language}
+                  onChange={(v) => commit("language", v)}
+                  options={langOptions}
                 />
-              </Form.Item>
-              <Form.Item name="language" label={t("displayLanguage")}>
-                <Select
-                  options={[
-                    { label: t("followSystem"), value: AppLanguage.System },
-                    { label: t("chinese"), value: AppLanguage.ZH },
-                    { label: t("english"), value: AppLanguage.EN },
-                    { label: t("italian"), value: AppLanguage.IT },
-                  ]}
-                  placeholder={t("pleaseSelectLanguage")}
-                  allowClear={false}
-                />
-              </Form.Item>
-              <Form.Item
-                hidden={isWeb}
+              }
+            />
+            {!isWeb && (
+              <SettingRow
                 label={t("downloadPrompt")}
-                name="promptTone"
-              >
-                <Switch />
-              </Form.Item>
-              <Form.Item label={t("showTerminal")} name="showTerminal">
-                <Switch />
-              </Form.Item>
-              <Form.Item
-                hidden={isWeb}
+                control={
+                  <MgToggle
+                    checked={settings.promptTone}
+                    onChange={(v) => commit("promptTone", v)}
+                  />
+                }
+              />
+            )}
+            <SettingRow
+              label={t("showTerminal")}
+              control={
+                <MgToggle
+                  checked={settings.showTerminal}
+                  onChange={(v) => commit("showTerminal", v)}
+                />
+              }
+            />
+            {!isWeb && (
+              <SettingRow
                 label={t("autoUpgrade")}
-                tooltip={t("autoUpgradeTooltip")}
-                name="autoUpgrade"
-              >
-                <Switch />
-              </Form.Item>
-              <Form.Item
-                hidden={isWeb}
+                control={
+                  <MgToggle
+                    checked={settings.autoUpgrade}
+                    onChange={(v) => commit("autoUpgrade", v)}
+                  />
+                }
+              />
+            )}
+            {!isWeb && (
+              <SettingRow
                 label={t("allowBetaVersion")}
-                name="allowBeta"
-              >
-                <Switch />
-              </Form.Item>
-              <Form.Item
-                hidden={isWeb}
+                control={
+                  <MgToggle
+                    checked={settings.allowBeta}
+                    onChange={(v) => commit("allowBeta", v)}
+                  />
+                }
+              />
+            )}
+            {!isWeb && (
+              <SettingRow
                 label={t("closeMainWindow")}
-                name="closeMainWindow"
-              >
-                <Radio.Group>
-                  <Radio value={true}>{t("close")}</Radio>
-                  <Radio value={false}>{t("minimizeToTray")}</Radio>
-                </Radio.Group>
-              </Form.Item>
-              <Form.Item
+                control={
+                  <MgSegment
+                    value={settings.closeMainWindow ? "close" : "minimize"}
+                    onChange={(v) => commit("closeMainWindow", v === "close")}
+                    options={closeOptions}
+                  />
+                }
+              />
+            )}
+            {!isWeb && (
+              <SettingRow
                 label={t("enableMobilePlayer")}
-                name="enableMobilePlayer"
-                hidden={isWeb}
-              >
-                <Switch />
-              </Form.Item>
-            </>
-          ),
-        },
-        {
-          key: "2",
-          hidden: isWeb,
-          title: t("browserSetting"),
-          children: !isWeb && (
-            <>
-              <Form.Item label={t("audioMuted")} name="audioMuted">
-                <Switch />
-              </Form.Item>
-              <Form.Item label={t("openInNewWindow")} name="openInNewWindow">
-                <Switch />
-              </Form.Item>
-              <Form.Item name="proxy" label={t("proxySetting")}>
-                <Input
-                  placeholder={t("pleaseEnterProxy")}
-                  onContextMenu={() =>
-                    contextMenu.show([
-                      { key: "copy", label: t("copy") },
-                      { key: "paste", label: t("paste") },
-                    ])
-                  }
-                />
-              </Form.Item>
-              <Form.Item
-                name="useProxy"
-                label={t("proxySwitch")}
-                rules={[
-                  {
-                    validator(rules, value) {
-                      if (
-                        value &&
-                        formRef.current?.getFieldValue("proxy") === ""
-                      ) {
-                        return Promise.reject(t("pleaseEnterProxyFirst"));
-                      }
-                      return Promise.resolve();
-                    },
-                  },
-                ]}
-              >
-                <Switch />
-              </Form.Item>
-              <Form.Item label={t("blockAds")} name="blockAds">
-                <Switch />
-              </Form.Item>
-              <Form.Item label={t("enterMobileMode")} name="isMobile">
-                <Switch />
-              </Form.Item>
-              <Form.Item
+                last
+                control={
+                  <MgToggle
+                    checked={settings.enableMobilePlayer}
+                    onChange={(v) => commit("enableMobilePlayer", v)}
+                  />
+                }
+              />
+            )}
+          </SettingSection>
+
+          {/* ---------- Browser (desktop only) ---------- */}
+          {!isWeb && (
+            <SettingSection
+              title={t("browserSetting")}
+              desktop
+              badgeLabel={badge}
+            >
+              <SettingRow
+                label={t("audioMuted")}
+                control={
+                  <MgToggle
+                    checked={settings.audioMuted}
+                    onChange={(v) => commit("audioMuted", v)}
+                  />
+                }
+              />
+              <SettingRow
+                label={t("openInNewWindow")}
+                control={
+                  <MgToggle
+                    checked={settings.openInNewWindow}
+                    onChange={(v) => commit("openInNewWindow", v)}
+                  />
+                }
+              />
+              <SettingRow
+                label={t("blockAds")}
+                control={
+                  <MgToggle
+                    checked={settings.blockAds}
+                    onChange={(v) => commit("blockAds", v)}
+                  />
+                }
+              />
+              <SettingRow
+                label={t("enterMobileMode")}
+                control={
+                  <MgToggle
+                    checked={settings.isMobile}
+                    onChange={(v) => commit("isMobile", v)}
+                  />
+                }
+              />
+              <SettingRow
                 label={t("useImmersiveSniffing")}
-                tooltip={t("immersiveSniffingDescription")}
-                name="useExtension"
-              >
-                <Switch />
-              </Form.Item>
-              <Form.Item
+                desc={t("immersiveSniffingDescription")}
+                control={
+                  <MgToggle
+                    checked={settings.useExtension}
+                    onChange={(v) => commit("useExtension", v)}
+                  />
+                }
+              />
+              <SettingRow
                 label={t("privacy")}
-                tooltip={t("privacyTooltip")}
-                name="privacy"
-              >
-                <Switch />
-              </Form.Item>
-              <Form.Item label={t("moreAction")}>
-                <Space wrap>
-                  <Button
-                    onClick={handleClearWebviewCache}
-                    icon={<ClearOutlined />}
-                  >
-                    {t("clearCache")}
-                  </Button>
-                  <Button onClick={handleExportFavorite}>
-                    <DownloadOutlined />
-                    {t("exportFavorite")}
-                  </Button>
+                control={
+                  <MgToggle
+                    checked={settings.privacy}
+                    onChange={(v) => commit("privacy", v)}
+                  />
+                }
+              />
+              <SettingRow
+                label={t("moreAction")}
+                last
+                control={
+                  <div className="flex flex-wrap gap-[7px]">
+                    <MgButton size="sm" onClick={handleClearWebviewCache}>
+                      {t("clearCache")}
+                    </MgButton>
+                    <MgButton size="sm" onClick={handleImportFavorite}>
+                      <Upload size={15} strokeWidth={2} />
+                      {t("importFavorite")}
+                    </MgButton>
+                    <MgButton size="sm" onClick={handleExportFavorite}>
+                      <Download size={15} strokeWidth={2} />
+                      {t("exportFavorite")}
+                    </MgButton>
+                  </div>
+                }
+              />
+            </SettingSection>
+          )}
 
-                  <Button onClick={onMenuClick}>
-                    <UploadOutlined />
-                    {t("importFavorite")}
-                  </Button>
-                </Space>
-              </Form.Item>
-            </>
-          ),
-        },
-        {
-          key: "3",
-          title: t("downloadSetting"),
-          children: (
-            <>
-              <Form.Item hidden={!isWeb} name="proxy" label={t("proxySetting")}>
-                <Input
-                  placeholder={t("pleaseEnterProxy")}
-                  onContextMenu={() =>
-                    contextMenu.show([
-                      { key: "copy", label: t("copy") },
-                      { key: "paste", label: t("paste") },
-                    ])
-                  }
+          {/* ---------- Download ---------- */}
+          <SettingSection title={t("downloadSetting")} badgeLabel={badge}>
+            <SettingRow
+              label={t("proxySetting")}
+              control={
+                <div className="flex w-[min(320px,100%)]">
+                  <MonoInput
+                    value={settings.proxy}
+                    placeholder={t("pleaseEnterProxy")}
+                    onChange={(v) => commit("proxy", v)}
+                  />
+                </div>
+              }
+            />
+            <SettingRow
+              label={t("downloadProxySwitch")}
+              control={
+                <MgToggle
+                  checked={settings.downloadProxySwitch}
+                  onChange={(v) => {
+                    if (v && !settings.proxy) {
+                      message.error(t("pleaseEnterProxyFirst"));
+                      return;
+                    }
+                    commit("downloadProxySwitch", v);
+                  }}
                 />
-              </Form.Item>
-              <Form.Item
-                name="downloadProxySwitch"
-                label={t("downloadProxySwitch")}
-                rules={[
-                  {
-                    validator(rules, value) {
-                      if (
-                        value &&
-                        formRef.current?.getFieldValue("proxy") === ""
-                      ) {
-                        return Promise.reject(t("pleaseEnterProxyFirst"));
-                      }
-                      return Promise.resolve();
-                    },
-                  },
-                ]}
-              >
-                <Switch />
-              </Form.Item>
-              <Form.Item label={t("deleteSegments")} name="deleteSegments">
-                <Switch />
-              </Form.Item>
-              <Form.Item
-                label={t("maxRunner")}
-                tooltip={t("maxRunnerDescription")}
-                name="maxRunner"
-              >
-                <InputNumber min={1} max={50} precision={0} />
-              </Form.Item>
-            </>
-          ),
-        },
-        {
-          key: "4",
-          title: t("dockerSetting"),
-          hidden: isWeb,
-          children: (
-            <>
-              <Form.Item name="apiKey" label={t("apiKey")}>
-                <Input
-                  placeholder={t("pleaseEnterApiKey")}
-                  onContextMenu={() =>
-                    contextMenu.show([
-                      { key: "copy", label: t("copy") },
-                      { key: "paste", label: t("paste") },
-                    ])
-                  }
+              }
+            />
+            <SettingRow
+              label={t("deleteSegments")}
+              control={
+                <MgToggle
+                  checked={settings.deleteSegments}
+                  onChange={(v) => commit("deleteSegments", v)}
                 />
-              </Form.Item>
-              <Form.Item name="dockerUrl" label={t("dockerUrl")}>
-                <Input
-                  placeholder={t("pleaseEnterDockerUrl")}
-                  onContextMenu={() =>
-                    contextMenu.show([
-                      { key: "copy", label: t("copy") },
-                      { key: "paste", label: t("paste") },
-                    ])
-                  }
+              }
+            />
+            <SettingRow
+              label={t("maxRunner")}
+              desc={t("maxRunnerDescription")}
+              last
+              control={
+                <MgStepper
+                  value={settings.maxRunner}
+                  onChange={(v) => commit("maxRunner", v)}
+                  min={1}
+                  max={50}
                 />
-              </Form.Item>
-              <Form.Item label={t("enableDocker")} name="enableDocker">
-                <Switch />
-              </Form.Item>
-            </>
-          ),
-        },
-        {
-          key: "5",
-          title: t("skillsSetting"),
-          children: (() => {
-            const coreUrl = envPath?.playerUrl
-              ? envPath.playerUrl.replace(/\/player\/$/, "")
-              : "";
-            const apiKey = settings.apiKey || "";
-            let setupCmd: string;
-            if (isWeb) {
-              // Server/Docker mode: need both URL and API key
-              const url = coreUrl || "http://localhost:8899";
-              setupCmd = apiKey
-                ? `Set mediago url to ${url}, api key to ${apiKey}`
-                : `Set mediago url to ${url}`;
-            } else {
-              // Electron mode: only need URL
-              setupCmd = coreUrl
-                ? `Set mediago url to ${coreUrl}`
-                : "Set mediago url to http://localhost:39719";
-            }
-            const installCmd = t("skillsInstallCmd");
-            return (
-              <>
-                <Form.Item
-                  label={t("skillsInstall")}
-                  tooltip={t("skillsInstallTooltip")}
-                >
-                  <Space.Compact className="w-full">
-                    <Input value={installCmd} readOnly className="font-mono" />
-                    <Button
-                      icon={<CopyOutlined />}
-                      onClick={() => {
-                        navigator.clipboard.writeText(installCmd);
-                        message.success(t("skillsCopied"));
-                      }}
-                    >
-                      {t("skillsCopy")}
-                    </Button>
-                  </Space.Compact>
-                </Form.Item>
-                <Form.Item
-                  label={t("skillsInit")}
-                  tooltip={t("skillsInitTooltip")}
-                >
-                  <Space.Compact className="w-full">
-                    <Input value={setupCmd} readOnly className="font-mono" />
-                    <Button
-                      icon={<CopyOutlined />}
-                      onClick={() => {
-                        navigator.clipboard.writeText(setupCmd);
-                        message.success(t("skillsCopied"));
-                      }}
-                    >
-                      {t("skillsCopy")}
-                    </Button>
-                  </Space.Compact>
-                </Form.Item>
-              </>
-            );
-          })(),
-        },
-        {
-          key: "6",
-          title: t("moreSettings"),
-          children: (
-            <>
-              <Form.Item hidden={!isWeb} name="apiKey" label={t("apiKey")}>
-                <Input disabled />
-              </Form.Item>
-              <Form.Item hidden={isWeb} label={t("moreAction")}>
-                <Space wrap>
-                  <Button
-                    onClick={() =>
-                      envPath?.configDir && shell.open(envPath.configDir)
-                    }
-                    icon={<FolderOpenOutlined />}
-                  >
-                    {t("configDir")}
-                  </Button>
-                  <Button
-                    onClick={() =>
-                      envPath?.binDir && shell.open(envPath.binDir)
-                    }
-                    icon={<FolderOpenOutlined />}
-                  >
-                    {t("binPath")}
-                  </Button>
-                  <Button
-                    onClick={() => settings.local && shell.open(settings.local)}
-                    icon={<FolderOpenOutlined />}
+              }
+            />
+          </SettingSection>
+
+          {/* ---------- Docker (desktop only) ---------- */}
+          {!isWeb && (
+            <SettingSection
+              title={t("dockerSetting")}
+              desktop
+              badgeLabel={badge}
+            >
+              <SettingRow
+                label={t("enableDocker")}
+                control={
+                  <MgToggle
+                    checked={settings.enableDocker}
+                    onChange={(v) => commit("enableDocker", v)}
+                  />
+                }
+              />
+              <SettingRow
+                label={t("dockerUrl")}
+                control={
+                  <div className="flex w-[min(320px,100%)]">
+                    <MonoInput
+                      value={settings.dockerUrl}
+                      placeholder={t("pleaseEnterDockerUrl")}
+                      onChange={(v) => commit("dockerUrl", v)}
+                    />
+                  </div>
+                }
+              />
+              <SettingRow
+                label={t("apiKey")}
+                last
+                control={
+                  <div className="flex w-[min(320px,100%)]">
+                    <MonoInput
+                      value={settings.apiKey}
+                      placeholder={t("pleaseEnterApiKey")}
+                      onChange={(v) => commit("apiKey", v)}
+                    />
+                  </div>
+                }
+              />
+            </SettingSection>
+          )}
+
+          {/* ---------- Skills ---------- */}
+          <SettingSection title={t("skillsSetting")} badgeLabel={badge}>
+            <SettingRow
+              label={t("skillsInstall")}
+              control={
+                <div className="flex w-[min(360px,100%)] gap-2">
+                  <MonoInput value={installCmd} />
+                  <MgButton
+                    size="sm"
+                    className="h-[38px]"
+                    onClick={() => copy(installCmd)}
                   >
-                    {t("localDir")}
-                  </Button>
-                  <Button
-                    onClick={async () => {
-                      const dir = await app.getExtensionDir();
-                      if (dir) shell.open(dir);
-                    }}
-                    icon={<FolderOpenOutlined />}
+                    <Copy size={15} strokeWidth={2} />
+                    {t("skillsCopy")}
+                  </MgButton>
+                </div>
+              }
+            />
+            <SettingRow
+              label={t("skillsInit")}
+              last
+              control={
+                <div className="flex w-[min(360px,100%)] gap-2">
+                  <MonoInput value={setupCmd} />
+                  <MgButton
+                    size="sm"
+                    className="h-[38px]"
+                    onClick={() => copy(setupCmd)}
                   >
-                    {t("extensionDir")}
-                  </Button>
-                </Space>
-              </Form.Item>
-              <Form.Item label={t("currentVersion")}>
-                <Space wrap>
-                  <div>{version}</div>
-                  {!isWeb && (
-                    <Badge dot={updateAvailable}>
-                      <Button type="text" onClick={handleCheckUpdate}>
-                        {t("checkUpdate")}
-                      </Button>
-                    </Badge>
-                  )}
-                </Space>
-              </Form.Item>
-            </>
-          ),
-        },
-      ].filter((item) => !item.hidden),
-    [
-      // Form.Items subscribe to the form store by name, so we don't need
-      // the full settings object here — only the two fields that are read
-      // directly inside the JSX (skillsSetting IIFE and the "open local"
-      // button). Keeping the dep list narrow lets the memo survive most
-      // SSE config-changed updates.
-      t,
-      settings.apiKey,
-      settings.local,
-      envPath,
-      updateAvailable,
-      renderButtonLabel,
-      onMenuClick,
-      handleExportFavorite,
-      handleClearWebviewCache,
-      handleCheckUpdate,
-      contextMenu,
-      shell,
-      message,
-    ],
-  );
+                    <Copy size={15} strokeWidth={2} />
+                    {t("skillsCopy")}
+                  </MgButton>
+                </div>
+              }
+            />
+          </SettingSection>
 
-  return (
-    <PageContainer title={t("setting")}>
-      <div className="h-full overflow-auto px-1 py-2">
-        <Form<AppStore>
-          ref={formRef}
-          layout="horizontal"
-          labelAlign="left"
-          labelCol={{ flex: "140px" }}
-          wrapperCol={{ flex: "1 1 auto" }}
-          colon={false}
-          initialValues={settings}
-          onValuesChange={onFormValueChange}
-        >
-          <div className="gap-4 md:columns-2">
-            {cardSections.slice(0, visibleCount).map((section) => (
-              <div key={section.key} className="mb-4 block break-inside-avoid">
-                <Card title={section.title} size="small" variant="borderless">
-                  {section.children}
-                </Card>
-              </div>
-            ))}
-          </div>
-        </Form>
+          {/* ---------- More ---------- */}
+          <SettingSection title={t("moreSettings")} badgeLabel={badge}>
+            {isWeb && (
+              <SettingRow
+                label={t("apiKey")}
+                control={
+                  <div className="flex w-[min(320px,100%)]">
+                    <MonoInput value={settings.apiKey} />
+                  </div>
+                }
+              />
+            )}
+            {!isWeb && (
+              <SettingRow
+                label={t("moreAction")}
+                control={
+                  <div className="flex flex-wrap gap-[7px]">
+                    <MgButton
+                      size="sm"
+                      onClick={() => openFolder(envPath?.configDir)}
+                    >
+                      <FolderOpen size={15} strokeWidth={2} />
+                      {t("configDir")}
+                    </MgButton>
+                    <MgButton
+                      size="sm"
+                      onClick={() => openFolder(envPath?.binDir)}
+                    >
+                      <FolderOpen size={15} strokeWidth={2} />
+                      {t("binPath")}
+                    </MgButton>
+                    <MgButton
+                      size="sm"
+                      onClick={() => openFolder(settings.local)}
+                    >
+                      <FolderOpen size={15} strokeWidth={2} />
+                      {t("localDir")}
+                    </MgButton>
+                    <MgButton size="sm" onClick={openExtensionDir}>
+                      <FolderOpen size={15} strokeWidth={2} />
+                      {t("extensionDir")}
+                    </MgButton>
+                  </div>
+                }
+              />
+            )}
+            <SettingRow
+              label={t("currentVersion")}
+              desc={`MediaGo ${version}`}
+              last
+              control={
+                isWeb ? (
+                  <span className="font-mono text-[12px] text-mg-fg2">
+                    {version}
+                  </span>
+                ) : (
+                  <Badge dot={updateAvailable}>
+                    <MgButton
+                      variant="primary"
+                      size="sm"
+                      onClick={handleCheckUpdate}
+                    >
+                      {t("checkUpdate")}
+                    </MgButton>
+                  </Badge>
+                )
+              }
+            />
+          </SettingSection>
+        </div>
       </div>
 
       <Modal
         title={t("updateModal")}
         open={openUpdateModal}
-        onCancel={handleHiddenUpdateModal}
+        onCancel={() => setOpenUpdateModal(false)}
         footer={
           updateAvailable
             ? [
-                <Button key="hidden" onClick={handleHiddenUpdateModal}>
+                <MgButton
+                  key="hidden"
+                  size="sm"
+                  onClick={() => setOpenUpdateModal(false)}
+                >
                   {t("close")}
-                </Button>,
+                </MgButton>,
                 updateDownloaded ? (
-                  <Button
+                  <MgButton
                     key="install"
-                    type="primary"
-                    onClick={handleInstallUpdate}
+                    variant="primary"
+                    size="sm"
+                    className="ml-2"
+                    onClick={() => update.install()}
                   >
                     {t("install")}
-                  </Button>
+                  </MgButton>
                 ) : (
-                  <Button key="update" type="primary" onClick={handleUpdate}>
+                  <MgButton
+                    key="update"
+                    variant="primary"
+                    size="sm"
+                    className="ml-2"
+                    onClick={() => update.startDownload()}
+                  >
                     {t("update")}
-                  </Button>
+                  </MgButton>
                 ),
               ]
             : [
-                <Button key="hidden" onClick={handleHiddenUpdateModal}>
+                <MgButton
+                  key="hidden"
+                  size="sm"
+                  onClick={() => setOpenUpdateModal(false)}
+                >
                   {t("close")}
-                </Button>,
+                </MgButton>,
               ]
         }
       >
@@ -677,7 +745,7 @@ const SettingPage: React.FC = () => {
           )}
         </div>
       </Modal>
-    </PageContainer>
+    </div>
   );
 };
 
diff --git a/apps/ui/src/pages/share/index.tsx b/apps/ui/src/pages/share/index.tsx
new file mode 100644
index 000000000..9fe2e265a
--- /dev/null
+++ b/apps/ui/src/pages/share/index.tsx
@@ -0,0 +1,64 @@
+import { DownloadType } from "@mediago/shared-common";
+import { useEffect } from "react";
+import { useNavigate, useSearchParams } from "react-router-dom";
+import { useUiStore } from "@/store/ui";
+
+const KNOWN_TYPES: Record<string, DownloadType> = {
+  m3u8: DownloadType.m3u8,
+  bilibili: DownloadType.bilibili,
+  youtube: DownloadType.youtube,
+  direct: DownloadType.direct,
+  mediago: DownloadType.mediago,
+};
+
+// Best-effort source type from the URL (an explicit ?type= wins), so a shared
+// Bilibili / YouTube / .m3u8 / direct-file link pre-selects the right tab.
+function guessType(url: string): DownloadType | undefined {
+  const u = url.toLowerCase();
+  if (u.includes("bilibili.com") || u.includes("b23.tv")) {
+    return DownloadType.bilibili;
+  }
+  if (u.includes("youtube.com") || u.includes("youtu.be")) {
+    return DownloadType.youtube;
+  }
+  if (u.includes(".m3u8")) return DownloadType.m3u8;
+  if (/\.(mp4|mkv|mov|flv|ts|webm)(\?|#|$)/.test(u)) return DownloadType.direct;
+  return undefined;
+}
+
+/**
+ * Deep-link entry for "share a link into MediaGo":
+ *   /share?url=<link>&name=<title>&type=<m3u8|bilibili|youtube|direct|mediago>&folder=<sub>
+ *
+ * Opens the prefilled New Download modal, then redirects to the list so the
+ * modal sits over the normal UI and the address bar stays clean. Lets a
+ * browser bookmarklet / extension — and, if the LazyCat mobile client can
+ * route a system share to an app URL, the share sheet — create a download in
+ * one tap.
+ */
+export default function ShareRoute() {
+  const [params] = useSearchParams();
+  const navigate = useNavigate();
+  const openNewDownload = useUiStore((s) => s.openNewDownload);
+
+  useEffect(() => {
+    const url = (params.get("url") ?? params.get("u") ?? "").trim();
+    const name = (params.get("name") ?? params.get("title") ?? "").trim();
+    const folder = (params.get("folder") ?? "").trim();
+    const typeParam = params.get("type");
+    const type =
+      (typeParam ? KNOWN_TYPES[typeParam] : undefined) ??
+      (url ? guessType(url) : undefined);
+
+    openNewDownload(
+      url
+        ? { url, name: name || undefined, type, folder: folder || undefined }
+        : undefined,
+    );
+    navigate("/", { replace: true });
+    // Consume the query params once, open the modal, then clean the URL.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return null;
+}
diff --git a/apps/ui/src/pages/signin-page/index.tsx b/apps/ui/src/pages/signin-page/index.tsx
index d60825e85..d8200962f 100644
--- a/apps/ui/src/pages/signin-page/index.tsx
+++ b/apps/ui/src/pages/signin-page/index.tsx
@@ -1,5 +1,9 @@
-import signinBG from "@/assets/images/signin-bg.png";
+import { useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
+import { useMemoizedFn } from "ahooks";
+import { useNavigate } from "react-router-dom";
+import { Download } from "lucide-react";
+import { useShallow } from "zustand/react/shallow";
 import {
   Dialog,
   DialogContent,
@@ -7,11 +11,16 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
+import { MgButton, MgCard } from "@/components/mg";
 import { useAuthApi } from "@/hooks/use-auth-api";
-import { useMemoizedFn } from "ahooks";
-import { useNavigate } from "react-router-dom";
 import { setAppStoreSelector, useAppStore } from "@/store/app";
-import { useShallow } from "zustand/react/shallow";
+
+type Mode = "init" | "signin";
+
+const inputClassName =
+  "h-[46px] w-full rounded-[12px] border-[1.5px] border-mg-line bg-mg-surface2 px-[14px] text-[15px] tracking-[0.1em] text-mg-fg outline-none transition-colors placeholder:tracking-[0.1em] placeholder:text-mg-fg3 focus:border-mg-primary focus:bg-mg-surface";
+
+const labelClassName = "mb-[7px] block text-[12.5px] font-bold text-mg-fg2";
 
 export default function SigninPage() {
   const { isSetuped, setupAuth, signin } = useAuthApi();
@@ -19,138 +28,157 @@ export default function SigninPage() {
   const { t } = useTranslation();
   const navigate = useNavigate();
 
+  // Local mode seeded from server status, toggleable via the footer link.
+  const [mode, setMode] = useState<Mode>(isSetuped ? "signin" : "init");
+  const [error, setError] = useState("");
+
+  // Keep mode in sync once the server status resolves (unless the user already
+  // toggled away — we only re-seed while no error/interaction has happened).
+  useEffect(() => {
+    setMode(isSetuped ? "signin" : "init");
+  }, [isSetuped]);
+
+  const isInit = mode === "init";
+
+  const copy = useMemo(
+    () => ({
+      title: isInit ? t("initializeMediaGoServer") : t("signinMediaGoServer"),
+      subtitle: isInit ? t("settingUpAdminPassword") : t("adminPassword"),
+      submit: isInit ? t("setup") : t("signin"),
+      switch: isInit ? t("signin") : t("setup"),
+    }),
+    [isInit, t],
+  );
+
+  const toggleMode = useMemoizedFn(() => {
+    setError("");
+    setMode((m) => (m === "init" ? "signin" : "init"));
+  });
+
   const handleSubmit = useMemoizedFn(
     async (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
+      setError("");
 
-      try {
-        const formData = new FormData(e.currentTarget);
-        const password = formData.get("password") as string;
+      const formData = new FormData(e.currentTarget);
+      const password = formData.get("password") as string;
 
+      try {
         let apiKey: string;
-        if (isSetuped) {
-          apiKey = await signin(password);
-        } else {
+        if (isInit) {
           const repeatPassword = formData.get("repeat-password") as string;
-
           if (password !== repeatPassword) {
-            alert(t("passwordNotMatch"));
+            setError(t("passwordNotMatch"));
             return;
           }
-
           apiKey = await setupAuth(password);
+        } else {
+          apiKey = await signin(password);
         }
 
         setAppStore({ apiKey });
-
         navigate("/");
       } catch {
-        alert(t("signinFailed"));
+        setError(t("signinFailed"));
       }
     },
   );
 
   return (
-    <div className="flex min-h-full">
-      <div className="flex flex-1 flex-col justify-center px-4 py-12 sm:px-6 lg:flex-none lg:px-20 xl:px-24">
-        <div className="mx-auto w-full max-w-sm lg:w-96">
-          <div>
-            <h2 className="mt-8 text-2xl/9 font-bold tracking-tight text-gray-900 dark:text-white">
-              {isSetuped
-                ? t("signinMediaGoServer")
-                : t("initializeMediaGoServer")}
-            </h2>
+    <div className="flex min-h-screen w-full items-center justify-center overflow-auto bg-mg-bg p-6">
+      <div className="w-[min(420px,100%)]">
+        <div className="mb-[26px] flex flex-col items-center">
+          <div className="mb-4 flex size-[62px] items-center justify-center rounded-[20px] bg-[linear-gradient(135deg,var(--mg-primary),#9b6bff)] shadow-[0_12px_30px_-8px_rgba(91,91,245,.6)]">
+            <Download size={32} strokeWidth={2.4} className="text-white" />
           </div>
+          <h1 className="m-0 text-[23px] font-extrabold tracking-[-0.02em] text-mg-fg">
+            {copy.title}
+          </h1>
+          <p className="mt-[7px] text-center text-[13.5px] text-mg-fg2">
+            {copy.subtitle}
+          </p>
+        </div>
 
-          <div className="mt-10">
+        <MgCard className="rounded-[20px] p-6 shadow-[0_18px_50px_-22px_var(--mg-shadow)]">
+          <form className="flex flex-col gap-[15px]" onSubmit={handleSubmit}>
             <div>
-              <form
-                action="#"
-                method="POST"
-                className="space-y-6"
-                onSubmit={handleSubmit}
+              <label htmlFor="password" className={labelClassName}>
+                {t("adminPassword")}
+              </label>
+              <input
+                id="password"
+                name="password"
+                type="password"
+                minLength={6}
+                required
+                autoComplete={isInit ? "new-password" : "current-password"}
+                placeholder="••••••••"
+                className={inputClassName}
+              />
+            </div>
+
+            {isInit && (
+              <div>
+                <label htmlFor="repeat-password" className={labelClassName}>
+                  {t("repeatPassword")}
+                </label>
+                <input
+                  id="repeat-password"
+                  name="repeat-password"
+                  type="password"
+                  minLength={6}
+                  required
+                  autoComplete="new-password"
+                  placeholder="••••••••"
+                  className={inputClassName}
+                />
+              </div>
+            )}
+
+            {error && (
+              <p className="m-0 text-[12.5px] font-semibold text-mg-failed">
+                {error}
+              </p>
+            )}
+
+            <MgButton
+              type="submit"
+              variant="primary"
+              className="mt-1 h-[48px] w-full rounded-[13px] text-[15px]"
+            >
+              {copy.submit}
+            </MgButton>
+
+            <div className="flex items-center justify-between text-[12px]">
+              <button
+                type="button"
+                onClick={toggleMode}
+                className="cursor-pointer border-none bg-transparent p-0 font-semibold text-mg-primary"
               >
-                <div>
-                  <label
-                    htmlFor="password"
-                    className="block text-sm/6 font-medium text-gray-900 dark:text-gray-100"
-                  >
-                    {isSetuped
-                      ? t("adminPassword")
-                      : t("settingUpAdminPassword")}
-                  </label>
-                  <div className="mt-2">
-                    <input
-                      id="password"
-                      name="password"
-                      type="password"
-                      minLength={6}
-                      required
-                      className="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:placeholder:text-gray-500 dark:focus:outline-blue-500"
-                    />
-                  </div>
-                </div>
-
-                {!isSetuped && (
-                  <div>
-                    <label
-                      htmlFor="repeat-password"
-                      className="block text-sm/6 font-medium text-gray-900 dark:text-gray-100"
-                    >
-                      {t("repeatPassword")}
-                    </label>
-                    <div className="mt-2">
-                      <input
-                        id="repeat-password"
-                        name="repeat-password"
-                        type="password"
-                        minLength={6}
-                        required
-                        className="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:placeholder:text-gray-500 dark:focus:outline-blue-500"
-                      />
-                    </div>
-                  </div>
-                )}
-
-                {isSetuped && (
-                  <div className="flex items-center justify-end">
-                    <div className="text-sm/6">
-                      <Dialog>
-                        <DialogTrigger asChild>
-                          <a>{t("forgotPassword")}</a>
-                        </DialogTrigger>
-                        <DialogContent className="w-sm">
-                          <DialogHeader>
-                            <DialogTitle>{t("forgotPassword")}</DialogTitle>
-                          </DialogHeader>
-                          <div className="text-gray-600 text-sm whitespace-pre-line dark:text-gray-300 leading-6">
-                            {t("forgetPasswordDescription")}
-                          </div>
-                        </DialogContent>
-                      </Dialog>
-                    </div>
-                  </div>
-                )}
+                {copy.switch}
+              </button>
 
-                <div>
+              <Dialog>
+                <DialogTrigger asChild>
                   <button
-                    type="submit"
-                    className="flex w-full justify-center rounded-md bg-blue-600 px-3 py-1.5 text-sm/6 font-semibold text-white shadow-xs hover:bg-blue-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 dark:bg-blue-500 dark:shadow-none dark:hover:bg-blue-400 dark:focus-visible:outline-blue-500"
+                    type="button"
+                    className="cursor-pointer border-none bg-transparent p-0 text-mg-fg3 transition-colors hover:text-mg-fg2"
                   >
-                    {isSetuped ? t("signin") : t("setup")}
+                    {t("forgotPassword")}
                   </button>
-                </div>
-              </form>
+                </DialogTrigger>
+                <DialogContent className="w-sm">
+                  <DialogHeader>
+                    <DialogTitle>{t("forgotPassword")}</DialogTitle>
+                  </DialogHeader>
+                  <div className="whitespace-pre-line text-[13px] leading-6 text-mg-fg2">
+                    {t("forgetPasswordDescription")}
+                  </div>
+                </DialogContent>
+              </Dialog>
             </div>
-          </div>
-        </div>
-      </div>
-      <div className="relative hidden w-0 flex-1 lg:block">
-        <img
-          alt=""
-          src={signinBG}
-          className="absolute inset-0 size-full object-cover"
-        />
+          </form>
+        </MgCard>
       </div>
     </div>
   );
diff --git a/apps/ui/src/pages/source-extract/components/browser-view-panel.tsx b/apps/ui/src/pages/source-extract/components/browser-view-panel.tsx
index 05c3da5c4..2a349c135 100644
--- a/apps/ui/src/pages/source-extract/components/browser-view-panel.tsx
+++ b/apps/ui/src/pages/source-extract/components/browser-view-panel.tsx
@@ -1,14 +1,11 @@
-import {
-  DeleteOutlined,
-  DockerOutlined,
-  EditOutlined,
-} from "@ant-design/icons";
 import { useMemoizedFn } from "ahooks";
-import { Button as AntdButton, App } from "antd";
+import { App } from "antd";
+import { DownloadType, type DownloadTask } from "@mediago/shared-common";
+import { Container, Download, Pencil, Radio, Trash2 } from "lucide-react";
 import { memo } from "react";
 import { useTranslation } from "react-i18next";
 import { useShallow } from "zustand/react/shallow";
-import { Button } from "@/components/ui/button";
+import { MgButton, MgPill } from "@/components/mg";
 import { appStoreSelector, useAppStore } from "@/store/app";
 import {
   browserSourcesSelector,
@@ -18,7 +15,46 @@ import {
 } from "@/store/browser";
 import { usePlatform } from "@/hooks/use-platform";
 import { createDownloadTasks } from "@/api/download-task";
-import { DownloadTask } from "@mediago/shared-common";
+
+/** Short type tag + color, mirroring the redesign's HLS-blue / MP4-green split. */
+const TYPE_META: Record<string, { label: string; color: string; bg: string }> =
+  {
+    [DownloadType.m3u8]: {
+      label: "HLS",
+      color: "#3b82f6",
+      bg: "rgba(59,130,246,.13)",
+    },
+    [DownloadType.bilibili]: {
+      label: "B站",
+      color: "#fb7299",
+      bg: "rgba(251,114,153,.13)",
+    },
+    [DownloadType.youtube]: {
+      label: "YT",
+      color: "#f43f5e",
+      bg: "rgba(244,63,94,.13)",
+    },
+    [DownloadType.direct]: {
+      label: "MP4",
+      color: "#10b981",
+      bg: "rgba(16,185,129,.13)",
+    },
+    [DownloadType.mediago]: {
+      label: "MG",
+      color: "#8b5cf6",
+      bg: "rgba(139,92,246,.13)",
+    },
+  };
+
+function typeMeta(type: DownloadType) {
+  return (
+    TYPE_META[type] ?? {
+      label: String(type).toUpperCase(),
+      color: "#10b981",
+      bg: "rgba(16,185,129,.13)",
+    }
+  );
+}
 
 interface SourceItemProps {
   item: SourceData;
@@ -36,51 +72,64 @@ const SourceItem = memo(function SourceItem({
   onDownload,
 }: SourceItemProps) {
   const { t } = useTranslation();
+  const meta = typeMeta(item.type);
 
   return (
-    <div className="flex flex-col gap-2 rounded-lg bg-[#FAFCFF] p-2 dark:bg-[#27292F]">
-      <span
-        className="line-clamp-2 cursor-default break-words text-sm text-[#343434] dark:text-[#B4B4B4]"
-        title={item.name}
-      >
-        {item.name}
-      </span>
-      <span
-        className="line-clamp-2 cursor-default break-words text-xs dark:text-[#515257]"
+    <div className="rounded-[13px] border border-mg-line bg-mg-surface2 p-[12px_13px]">
+      <div className="mb-[7px] flex items-center gap-2">
+        <MgPill color={meta.color} bg={meta.bg} className="text-[10px]">
+          {meta.label}
+        </MgPill>
+        <span
+          className="min-w-0 flex-1 truncate text-[12.5px] font-bold text-mg-fg"
+          title={item.name}
+        >
+          {item.name}
+        </span>
+      </div>
+      <div
+        className="mb-[10px] truncate font-mono text-[10.5px] text-mg-fg3"
         title={item.url}
       >
         {item.url}
-      </span>
-      <div className="flex flex-row items-center justify-between gap-3">
-        <div className="flex flex-row items-center gap-2">
-          <AntdButton
-            icon={<DeleteOutlined />}
-            type="text"
-            size="small"
-            onClick={() => onDelete(item.url)}
-            title={t("delete")}
-            danger
-          />
-          <AntdButton
-            icon={<EditOutlined />}
-            type="text"
-            size="small"
+      </div>
+      <div className="flex items-center gap-[10px]">
+        <div className="flex-1" />
+        <button
+          type="button"
+          title={t("delete")}
+          onClick={() => onDelete(item.url)}
+          className="flex size-[30px] cursor-pointer items-center justify-center rounded-lg border border-mg-line bg-mg-surface text-mg-fg2 transition-colors hover:text-[#f43f5e]"
+        >
+          <Trash2 size={13} strokeWidth={2} />
+        </button>
+        {enableDocker && (
+          <button
+            type="button"
             title={t("edit")}
             onClick={() => onEdit([item])}
-          />
-          {enableDocker && (
-            <AntdButton
-              icon={<DockerOutlined />}
-              type="text"
-              size="small"
-              title={t("edit")}
-              onClick={() => onEdit([item])}
-            />
-          )}
-        </div>
-        <Button size="sm" onClick={() => onDownload(item)}>
-          {t("downloadNow")}
-        </Button>
+            className="flex size-[30px] cursor-pointer items-center justify-center rounded-lg border border-mg-line bg-mg-surface text-mg-fg2 transition-colors hover:text-mg-fg"
+          >
+            <Container size={13} strokeWidth={2} />
+          </button>
+        )}
+        <button
+          type="button"
+          title={t("edit")}
+          onClick={() => onEdit([item])}
+          className="flex size-[30px] cursor-pointer items-center justify-center rounded-lg border border-mg-line bg-mg-surface text-mg-fg2 transition-colors hover:text-mg-fg"
+        >
+          <Pencil size={13} strokeWidth={2} />
+        </button>
+        <MgButton
+          variant="primary"
+          size="sm"
+          className="h-[30px] rounded-lg px-3 text-[11.5px]"
+          onClick={() => onDownload(item)}
+        >
+          <Download size={13} strokeWidth={2.4} />
+          {t("download")}
+        </MgButton>
       </div>
     </div>
   );
@@ -122,22 +171,45 @@ export function BrowserViewPanel() {
   });
 
   return (
-    <div className="flex h-full flex-col gap-3 overflow-y-auto bg-white p-3 dark:bg-[#1F2024]">
-      <div>
-        <AntdButton size="small" danger onClick={handleClear}>
+    <div className="flex h-full flex-col bg-mg-surface">
+      {/* sniffer header */}
+      <div className="flex flex-none items-center gap-[9px] border-b border-mg-line p-[14px_16px]">
+        <span className="size-[9px] rounded-full bg-[#10b981] shadow-[0_0_0_3px_rgba(16,185,129,.18)]" />
+        <span className="flex items-center gap-[7px] text-[13.5px] font-extrabold text-mg-fg">
+          <Radio size={15} strokeWidth={2} className="text-mg-fg2" />
+          {t("materialExtraction")}
+        </span>
+        <MgPill
+          color="var(--mg-primary)"
+          bg="var(--mg-primary-weak)"
+          className="text-[11px]"
+        >
+          {sources.length}
+        </MgPill>
+        <div className="flex-1" />
+        <button
+          type="button"
+          title={t("clear")}
+          onClick={handleClear}
+          className="flex h-[30px] cursor-pointer items-center rounded-lg border border-mg-line bg-transparent px-[11px] text-[11.5px] font-semibold text-mg-fg3 transition-colors hover:text-mg-fg2"
+        >
           {t("clear")}
-        </AntdButton>
+        </button>
+      </div>
+
+      {/* resource list */}
+      <div className="flex flex-1 flex-col gap-2 overflow-y-auto p-[10px]">
+        {sources.map((item) => (
+          <SourceItem
+            key={item.id}
+            item={item}
+            enableDocker={enableDocker}
+            onDelete={deleteSource}
+            onEdit={handleEdit}
+            onDownload={handleDownloadNow}
+          />
+        ))}
       </div>
-      {sources.map((item) => (
-        <SourceItem
-          key={item.id}
-          item={item}
-          enableDocker={enableDocker}
-          onDelete={deleteSource}
-          onEdit={handleEdit}
-          onDownload={handleDownloadNow}
-        />
-      ))}
     </div>
   );
 }
diff --git a/apps/ui/src/pages/source-extract/components/browser-view.tsx b/apps/ui/src/pages/source-extract/components/browser-view.tsx
index 7979ed28e..44bc42dec 100644
--- a/apps/ui/src/pages/source-extract/components/browser-view.tsx
+++ b/apps/ui/src/pages/source-extract/components/browser-view.tsx
@@ -3,7 +3,7 @@ import { Empty, Space, Spin, Splitter } from "antd";
 import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { useShallow } from "zustand/react/shallow";
-import { Button } from "@/components/ui/button";
+import { MgButton } from "@/components/mg";
 import WebView from "@/components/web-view";
 import { useBrowserActions } from "@/hooks/use-browser-actions";
 import { usePlatform } from "@/hooks/use-platform";
@@ -44,10 +44,10 @@ export function BrowserView() {
     // Loading or Loaded: show the WebView so the native WebContentsView is visible
     if (status === BrowserStatus.Loading || status === BrowserStatus.Loaded) {
       return (
-        <div className="relative h-full w-full flex-1">
+        <div className="relative h-full w-full flex-1 bg-mg-bg">
           <WebView className="h-full w-full flex-1" />
           {status === BrowserStatus.Loading && (
-            <div className="absolute inset-0 flex items-center justify-center bg-white/60 dark:bg-black/40">
+            <div className="absolute inset-0 flex items-center justify-center bg-mg-bg/60">
               <Spin />
             </div>
           )}
@@ -58,11 +58,15 @@ export function BrowserView() {
     // Load failure
     if (status === BrowserStatus.Failed) {
       return (
-        <div className="flex h-full w-full flex-row items-center justify-center">
+        <div className="flex h-full w-full flex-row items-center justify-center bg-mg-bg">
           <Empty description={`${errMsg || t("loadFailed")} (${errCode})`}>
             <Space>
-              <Button onClick={goHome}>{t("backToHome")}</Button>
-              <Button onClick={() => goto(url)}>{t("refresh")}</Button>
+              <MgButton variant="surface" size="sm" onClick={goHome}>
+                {t("backToHome")}
+              </MgButton>
+              <MgButton variant="primary" size="sm" onClick={() => goto(url)}>
+                {t("refresh")}
+              </MgButton>
             </Space>
           </Empty>
         </div>
@@ -77,9 +81,9 @@ export function BrowserView() {
       {!sources.length ? (
         renderContent()
       ) : (
-        <Splitter className="flex h-full flex-1 gap-2">
+        <Splitter className="flex h-full flex-1">
           <Splitter.Panel>{renderContent()}</Splitter.Panel>
-          <Splitter.Panel min="20%" max="70%" defaultSize={240}>
+          <Splitter.Panel min="20%" max="70%" defaultSize={320}>
             <BrowserViewPanel />
           </Splitter.Panel>
         </Splitter>
diff --git a/apps/ui/src/pages/source-extract/components/fav-item.tsx b/apps/ui/src/pages/source-extract/components/fav-item.tsx
index bf34be238..c43356d02 100644
--- a/apps/ui/src/pages/source-extract/components/fav-item.tsx
+++ b/apps/ui/src/pages/source-extract/components/fav-item.tsx
@@ -1,15 +1,45 @@
-import { LinkOutlined } from "@ant-design/icons";
-import { Avatar } from "antd";
-import { type ReactElement } from "react";
-import { CloseIcon } from "@/assets/svg";
+import { type ReactElement, useState } from "react";
+import { X } from "lucide-react";
+import { cn } from "@/utils";
+
+/** Bookmark tile palette from the redesign (MediaGo.dc.html `bmColors`). */
+const BM_COLORS = [
+  "#5b5bf5",
+  "#f43f5e",
+  "#10b981",
+  "#f59e0b",
+  "#8b5cf6",
+  "#06b6d4",
+];
+
+function hostOf(url?: string): string {
+  if (!url) return "";
+  try {
+    return new URL(url).host.replace(/^www\./, "");
+  } catch {
+    return url.replace(/^https?:\/\//, "").split("/")[0] ?? "";
+  }
+}
+
+/** Stable color pick from the title so a bookmark keeps its tile color. */
+function colorOf(seed: string): string {
+  let hash = 0;
+  for (let i = 0; i < seed.length; i += 1) {
+    hash = (hash * 31 + seed.charCodeAt(i)) >>> 0;
+  }
+  return BM_COLORS[hash % BM_COLORS.length];
+}
 
 interface Props {
   onContextMenu?: () => void;
   onClick?: () => void;
   onClose?: () => void;
   src?: string;
+  url?: string;
   icon?: ReactElement;
   title?: string;
+  /** Dashed "add" affordance instead of a bookmark tile. */
+  add?: boolean;
 }
 
 export function FavItem({
@@ -17,42 +47,74 @@ export function FavItem({
   onClick,
   onClose,
   src,
+  url,
   icon,
   title,
+  add,
 }: Props) {
+  const [imgFailed, setImgFailed] = useState(false);
+  const showFavicon = !!src && !imgFailed;
+  const letter = (title || hostOf(url) || "?").trim().charAt(0).toUpperCase();
+  const tileColor = colorOf(title || url || "");
+
+  if (add) {
+    return (
+      <button
+        type="button"
+        onClick={onClick}
+        className="flex min-h-[120px] cursor-pointer flex-col items-center justify-center gap-2 rounded-[15px] border border-dashed border-mg-line2 bg-transparent p-[16px_12px] text-mg-fg3 transition-colors hover:text-mg-fg2"
+      >
+        {icon}
+        <span className="text-[12px] font-semibold">{title}</span>
+      </button>
+    );
+  }
+
   return (
-    <div
-      className="group relative flex min-h-28 w-28 cursor-pointer flex-col items-center justify-center gap-2 overflow-hidden"
+    <button
+      type="button"
       onContextMenu={onContextMenu}
       onClick={onClick}
+      className="group relative flex cursor-pointer flex-col items-center gap-[10px] rounded-[15px] border border-mg-line bg-mg-surface p-[16px_12px] transition-[border-color,box-shadow] hover:border-mg-primary hover:shadow-[0_8px_20px_-12px_var(--mg-shadow)]"
     >
       {onClose && (
-        <div
-          className="absolute right-1 top-1 hidden group-hover:block"
+        <span
+          role="button"
+          tabIndex={-1}
+          title="remove"
           onClick={(e) => {
             e.stopPropagation();
             e.preventDefault();
             onClose();
           }}
+          className="absolute right-[6px] top-[6px] hidden size-5 items-center justify-center rounded-md bg-mg-surface2 text-mg-fg3 hover:text-mg-fg group-hover:flex"
         >
-          <CloseIcon width={15} height={15} />
-        </div>
+          <X size={13} strokeWidth={2.4} />
+        </span>
       )}
-      <div className="flex h-14 w-14 flex-row items-center justify-center rounded-lg bg-white dark:bg-[#27292F]">
-        <Avatar
-          size={35}
-          src={src}
-          shape="square"
-          icon={icon || <LinkOutlined size={35} />}
-          className="bg-white text-[#27292F] dark:bg-[#27292F] dark:text-white"
-        />
-      </div>
-      <div
-        className="w-full truncate text-center text-sm text-[#636D7E]"
-        title={title}
+      <span
+        className={cn(
+          "flex size-[46px] items-center justify-center overflow-hidden rounded-[14px] text-[19px] font-extrabold text-white",
+        )}
+        style={showFavicon ? undefined : { background: tileColor }}
       >
+        {showFavicon ? (
+          <img
+            src={src}
+            alt=""
+            className="size-full object-cover"
+            onError={() => setImgFailed(true)}
+          />
+        ) : (
+          letter
+        )}
+      </span>
+      <span className="max-w-full truncate text-[13px] font-bold text-mg-fg">
         {title}
-      </div>
-    </div>
+      </span>
+      <span className="max-w-full truncate font-mono text-[10.5px] text-mg-fg3">
+        {hostOf(url)}
+      </span>
+    </button>
   );
 }
diff --git a/apps/ui/src/pages/source-extract/components/favorite-list.tsx b/apps/ui/src/pages/source-extract/components/favorite-list.tsx
index 34f15d936..241b77a26 100644
--- a/apps/ui/src/pages/source-extract/components/favorite-list.tsx
+++ b/apps/ui/src/pages/source-extract/components/favorite-list.tsx
@@ -1,6 +1,6 @@
-import { PlusOutlined } from "@ant-design/icons";
 import { useMemoizedFn } from "ahooks";
 import { App, Form, Input, Modal, Spin } from "antd";
+import { Plus } from "lucide-react";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { ADD_FAVORITE, OPEN_FAVORITE } from "@/const";
@@ -101,15 +101,18 @@ export function FavoriteList() {
 
   if (error) {
     return (
-      <div className="flex h-full w-full items-center justify-center text-red-500">
+      <div className="flex h-full w-full items-center justify-center text-[#f43f5e]">
         {t("loadFailed")}
       </div>
     );
   }
 
   return (
-    <div className="h-full w-full py-4">
-      <div className="grid grid-cols-4 place-items-center gap-4 overflow-auto md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-9">
+    <div className="h-full w-full overflow-y-auto bg-mg-bg px-[clamp(14px,2vw,26px)] py-[22px]">
+      <div className="mb-[13px] text-[12.5px] font-bold uppercase tracking-[0.02em] text-mg-fg3">
+        {t("materialExtraction")}
+      </div>
+      <div className="grid grid-cols-[repeat(auto-fill,minmax(118px,1fr))] gap-3">
         {favoriteList.map((item) => (
           <FavItem
             key={item.id}
@@ -117,13 +120,15 @@ export function FavoriteList() {
             onClick={() => onClickLoadItem(item)}
             onClose={() => handleRemoveFavorite(item.id)}
             src={item.icon}
+            url={item.url}
             title={item.title}
           />
         ))}
         <FavItem
-          key={"add"}
+          key="add"
+          add
           onClick={showModal}
-          icon={<PlusOutlined />}
+          icon={<Plus size={24} strokeWidth={2} />}
           title={t("addFavorite")}
         />
       </div>
diff --git a/apps/ui/src/pages/source-extract/components/tool-bar.tsx b/apps/ui/src/pages/source-extract/components/tool-bar.tsx
index ae6a33b1c..26a3f2649 100644
--- a/apps/ui/src/pages/source-extract/components/tool-bar.tsx
+++ b/apps/ui/src/pages/source-extract/components/tool-bar.tsx
@@ -1,22 +1,22 @@
-import { EyeInvisibleOutlined } from "@ant-design/icons";
 import { useMemoizedFn } from "ahooks";
 import { Input, Tooltip } from "antd";
+import {
+  ChevronLeft,
+  EyeOff,
+  House,
+  Lock,
+  Monitor,
+  RotateCw,
+  Send,
+  Share2,
+  Smartphone,
+  Star,
+  X,
+} from "lucide-react";
 import { type KeyboardEvent, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { useShallow } from "zustand/react/shallow";
-import {
-  BackIcon,
-  CloseIcon,
-  FavFillIcon,
-  FavIcon,
-  HomeIcon,
-  PCIcon,
-  PhoneIcon,
-  RefreshIcon,
-  SendIcon,
-  ShareIcon,
-} from "@/assets/svg";
-import { IconButton } from "@/components/icon-button";
+import { MgIconButton } from "@/components/mg";
 import {
   appStoreSelector,
   setAppStoreSelector,
@@ -29,7 +29,6 @@ import {
   setBrowserSelector,
   useBrowserStore,
 } from "@/store/browser";
-import { themeSelector, useSessionStore } from "@/store/session";
 import { cn, getFavIcon } from "@/utils";
 import { useBrowserActions } from "@/hooks/use-browser-actions";
 import { useFavorites } from "@/hooks/use-favorites";
@@ -43,7 +42,6 @@ export function ToolBar({ page }: Props) {
   const { data: favoriteList, addFavorite, removeFavorite } = useFavorites();
   const { browser, app, contextMenu } = usePlatform();
   const { goto, goHome } = useBrowserActions();
-  const { theme } = useSessionStore(useShallow(themeSelector));
   const store = useBrowserStore(useShallow(browserNavSelector));
   const { setBrowserStore } = useBrowserStore(useShallow(setBrowserSelector));
   const appStore = useAppStore(useShallow(appStoreSelector));
@@ -52,6 +50,8 @@ export function ToolBar({ page }: Props) {
 
   const disabled =
     store.status !== BrowserStatus.Loaded || store.mode !== PageMode.Browser;
+  const isLoading =
+    store.mode === PageMode.Browser && store.status === BrowserStatus.Loading;
 
   // Set default UA
   const onSetDefaultUA = useMemoizedFn(() => {
@@ -112,103 +112,139 @@ export function ToolBar({ page }: Props) {
     });
   });
 
-  const iconColor = theme === "dark" ? "white" : "black";
+  // UA toggle label. `mobile`/`desktop` are not yet in the i18n resources,
+  // so we render with a default value until the keys are added.
+  const uaLabel = appStore.isMobile
+    ? t("mobile", { defaultValue: "手机" })
+    : t("desktop", { defaultValue: "桌面" });
 
   return (
     <div
       className={cn(
-        "flex flex-row items-center gap-2 bg-white px-3 py-2 dark:bg-[#1F2024]",
-        {
-          "rounded-lg": !page,
-        },
+        "flex flex-none flex-wrap items-center gap-2 border-b border-mg-line bg-mg-surface px-[clamp(14px,2vw,22px)] py-[13px]",
+        { "rounded-lg": !page },
       )}
     >
-      <IconButton
-        title={t("switchToMobileMode")}
-        onClick={onSetDefaultUA}
-        icon={
-          appStore.isMobile ? (
-            <PhoneIcon fill={iconColor} />
-          ) : (
-            <PCIcon fill={iconColor} />
-          )
-        }
-      />
-      <IconButton
-        disabled={disabled}
-        title={t("home")}
-        onClick={goHome}
-        icon={<HomeIcon fill={iconColor} />}
-      />
-      <IconButton
-        disabled={store.mode === PageMode.Default}
-        title={t("back")}
-        onClick={onClickGoBack}
-        icon={<BackIcon fill={iconColor} />}
-      />
-      {store.mode === PageMode.Browser &&
-      store.status === BrowserStatus.Loading ? (
-        <IconButton
-          title={t("cancle")}
-          onClick={goHome}
-          icon={<CloseIcon fill={iconColor} />}
-        />
-      ) : (
-        <IconButton
+      {/* nav button group */}
+      <div className="flex gap-[3px]">
+        <MgIconButton
+          variant="soft"
+          size="lg"
+          title={t("back")}
+          disabled={store.mode === PageMode.Default}
+          onClick={onClickGoBack}
+        >
+          <ChevronLeft size={17} strokeWidth={2.2} />
+        </MgIconButton>
+        {isLoading ? (
+          <MgIconButton
+            variant="soft"
+            size="lg"
+            title={t("cancle")}
+            onClick={goHome}
+          >
+            <X size={16} strokeWidth={2.2} />
+          </MgIconButton>
+        ) : (
+          <MgIconButton
+            variant="soft"
+            size="lg"
+            title={t("refresh")}
+            disabled={disabled}
+            onClick={() => goto(store.url)}
+          >
+            <RotateCw size={16} strokeWidth={2.2} />
+          </MgIconButton>
+        )}
+        <MgIconButton
+          variant="soft"
+          size="lg"
+          title={t("home")}
           disabled={disabled}
-          title={t("refresh")}
-          onClick={() => goto(store.url)}
-          icon={<RefreshIcon fill={iconColor} />}
+          onClick={goHome}
+        >
+          <House size={16} strokeWidth={2.2} />
+        </MgIconButton>
+      </div>
+
+      {/* address bar */}
+      <div className="flex h-[38px] min-w-[180px] flex-1 items-center gap-[9px] rounded-[11px] border-[1.5px] border-mg-line bg-mg-surface2 px-[13px]">
+        <Lock size={14} strokeWidth={2.2} className="shrink-0 text-[#10b981]" />
+        <Input
+          key="url-input"
+          variant="borderless"
+          value={store.url}
+          onChange={(e) => {
+            const url = e.target.value;
+            setBrowserStore({ url });
+          }}
+          onFocus={(e) => {
+            e.target.select();
+          }}
+          onKeyDown={onInputKeyDown}
+          onContextMenu={onInputContextMenu}
+          placeholder={t("pleaseEnterUrl")}
+          className="min-w-0 flex-1 !bg-transparent !px-0 font-mono !text-[12.5px] !text-mg-fg"
+          prefix={
+            appStore.privacy ? (
+              <Tooltip placement="top" title={t("privacy")}>
+                <EyeOff size={14} className="text-mg-fg3" />
+              </Tooltip>
+            ) : undefined
+          }
+          suffix={
+            <button
+              type="button"
+              title={t("visit")}
+              disabled={!store.url}
+              onClick={onClickEnter}
+              className="flex cursor-pointer items-center justify-center text-mg-fg3 transition-colors hover:text-mg-primary disabled:cursor-not-allowed disabled:opacity-50"
+            >
+              <Send size={14} strokeWidth={2.2} />
+            </button>
+          }
         />
-      )}
-      <IconButton
+      </div>
+
+      {/* UA toggle pill */}
+      <button
+        type="button"
+        title={t("switchToMobileMode")}
+        onClick={onSetDefaultUA}
+        className="flex h-[38px] cursor-pointer items-center gap-[7px] rounded-[11px] border border-mg-line bg-mg-surface px-[13px] text-[12.5px] font-semibold text-mg-fg2 transition-colors hover:text-mg-fg"
+      >
+        {appStore.isMobile ? (
+          <Smartphone size={15} strokeWidth={2} />
+        ) : (
+          <Monitor size={15} strokeWidth={2} />
+        )}
+        {uaLabel}
+      </button>
+
+      {/* bookmark */}
+      <button
+        type="button"
         title={curIsFavorite ? t("cancelFavorite") : t("favorite")}
         onClick={onClickAddFavorite}
         disabled={disabled}
-        icon={
-          curIsFavorite ? (
-            <FavFillIcon fill={iconColor} />
-          ) : (
-            <FavIcon
-              fill={iconColor}
-              stroke={theme === "dark" ? "#B4B4B4" : "#020817"}
-            />
-          )
-        }
-      />
-      <Input
-        key="url-input"
-        value={store.url}
-        onChange={(e) => {
-          const url = e.target.value;
-          setBrowserStore({ url });
-        }}
-        onFocus={(e) => {
-          e.target.select();
-        }}
-        onKeyDown={onInputKeyDown}
-        onContextMenu={onInputContextMenu}
-        placeholder={t("pleaseEnterUrl")}
-        prefix={
-          appStore.privacy ? (
-            <Tooltip placement="top" title={t("privacy")}>
-              <EyeInvisibleOutlined />
-            </Tooltip>
-          ) : undefined
-        }
-      />
-      <IconButton
-        title={t("visit")}
-        onClick={onClickEnter}
-        disabled={!store.url}
-        icon={<SendIcon fill={iconColor} />}
-      />
+        className="flex size-[38px] cursor-pointer items-center justify-center rounded-[11px] border border-mg-line bg-mg-surface text-[#f59e0b] transition-[border-color,filter] hover:border-mg-line2 disabled:cursor-not-allowed disabled:opacity-50"
+      >
+        <Star
+          size={17}
+          strokeWidth={1.5}
+          fill={curIsFavorite ? "#f59e0b" : "none"}
+        />
+      </button>
+
       {page && (
-        <IconButton
+        <button
+          type="button"
           title={t("mergeToMainWindow")}
           onClick={onCombineToHome}
-          icon={<ShareIcon className="rotate-180" fill={iconColor} />}
-        />
+          className="flex size-[38px] cursor-pointer items-center justify-center rounded-[11px] border border-mg-line bg-mg-surface text-mg-fg2 transition-colors hover:text-mg-fg"
+        >
+          <Share2 size={16} strokeWidth={2} className="rotate-180" />
+        </button>
       )}
     </div>
   );
diff --git a/apps/ui/src/pages/source-extract/index.tsx b/apps/ui/src/pages/source-extract/index.tsx
index 105a61442..8b1d2683b 100644
--- a/apps/ui/src/pages/source-extract/index.tsx
+++ b/apps/ui/src/pages/source-extract/index.tsx
@@ -74,8 +74,8 @@ const SourceExtract: FC<SourceExtractProps> = ({ page = false }) => {
     };
   }, []);
 
-  const setPageInfo = useMemoizedFn(({ url, title }: UrlDetail) => {
-    setBrowserStore({ url, title });
+  const setPageInfo = useMemoizedFn(({ url, title: pageTitle }: UrlDetail) => {
+    setBrowserStore({ url, title: pageTitle });
   });
 
   const onDomReady = useMemoizedFn((...args: unknown[]) => {
@@ -110,7 +110,7 @@ const SourceExtract: FC<SourceExtractProps> = ({ page = false }) => {
   return (
     <PageContainer
       className={cn("flex flex-col p-0", { "gap-2": !page })}
-      wrapperClassName={cn({ "p-0 bg-[#EBF0F5] dark:bg-[#141415]": page })}
+      wrapperClassName={cn("bg-mg-bg", { "p-0": page })}
     >
       <ToolBar page={page} />
       <div className="flex flex-1 overflow-hidden">
diff --git a/apps/ui/src/store/download.ts b/apps/ui/src/store/download.ts
index 26f6855d8..2cf0d4373 100644
--- a/apps/ui/src/store/download.ts
+++ b/apps/ui/src/store/download.ts
@@ -5,11 +5,13 @@ import { enableMapSet } from "immer";
 // Allow Immer to work with Map in state
 enableMapSet();
 
-// Normalize percent input (supports 0-1 ratio or 0-100 value); returns null for invalid numbers
+// Normalize percent input. Go Core reports percent on a 0-100 scale (e.g. 1 == 1%),
+// so just clamp to [0,100]. Do NOT treat small values as a 0-1 ratio — that turned a
+// real 1% into 100% (`1 * 100`), and Math.max() in setEvents then pinned it at 100.
 const normalizePercent = (value: string | number | undefined) => {
   const num = Number.parseFloat(String(value ?? ""));
   if (!Number.isFinite(num) || num < 0) return null;
-  return num <= 1 ? num * 100 : num;
+  return Math.min(100, num);
 };
 interface DownloadEvent {
   percent: string;
diff --git a/apps/ui/src/store/home.ts b/apps/ui/src/store/home.ts
index 0ec062839..cbb721c43 100644
--- a/apps/ui/src/store/home.ts
+++ b/apps/ui/src/store/home.ts
@@ -13,7 +13,8 @@ type Actions = {
 
 export const useHomeStore = create<State & Actions>()(
   immer((set) => ({
-    page: 0,
+    // 1-indexed: AntD Pagination is 1-based; Go core also coerces <=0 to 1.
+    page: 1,
     pageSize: 20,
     setPage: (page) => {
       set((state) => {
diff --git a/apps/ui/src/store/ui.ts b/apps/ui/src/store/ui.ts
new file mode 100644
index 000000000..1be23b26a
--- /dev/null
+++ b/apps/ui/src/store/ui.ts
@@ -0,0 +1,98 @@
+import type {
+  DownloadTaskWithFile,
+  DownloadType,
+} from "@mediago/shared-common";
+import { create } from "zustand";
+
+export interface NewDownloadPrefill {
+  url?: string;
+  name?: string;
+  type?: DownloadType;
+  headers?: string;
+  folder?: string;
+  batch?: boolean;
+  batchList?: string;
+}
+
+/**
+ * Transient UI state for the redesign's global overlays + shell chrome:
+ * the New/Edit download modal, the task right-click context menu, and the
+ * desktop sidebar collapse. Kept out of the data stores on purpose.
+ */
+type DownloadModalMode = "new" | "edit";
+
+interface ContextMenuState {
+  open: boolean;
+  x: number;
+  y: number;
+  taskId: number | null;
+}
+
+const COLLAPSE_KEY = "mediago-sidebar-collapsed";
+
+function readCollapsed(): boolean {
+  if (typeof window === "undefined") return false;
+  try {
+    return window.localStorage.getItem(COLLAPSE_KEY) === "true";
+  } catch {
+    return false;
+  }
+}
+
+interface UiState {
+  // sidebar
+  sidebarCollapsed: boolean;
+  toggleSidebar: () => void;
+
+  // new / edit download modal
+  downloadModalOpen: boolean;
+  downloadModalMode: DownloadModalMode;
+  editTask: DownloadTaskWithFile | null;
+  prefill: NewDownloadPrefill | null;
+  openNewDownload: (prefill?: NewDownloadPrefill) => void;
+  openEditDownload: (task: DownloadTaskWithFile) => void;
+  closeDownloadModal: () => void;
+
+  // task context menu
+  ctx: ContextMenuState;
+  openContextMenu: (taskId: number, x: number, y: number) => void;
+  closeContextMenu: () => void;
+}
+
+export const useUiStore = create<UiState>((set) => ({
+  sidebarCollapsed: readCollapsed(),
+  toggleSidebar: () =>
+    set((s) => {
+      const next = !s.sidebarCollapsed;
+      try {
+        window.localStorage.setItem(COLLAPSE_KEY, String(next));
+      } catch {
+        // ignore
+      }
+      return { sidebarCollapsed: next };
+    }),
+
+  downloadModalOpen: false,
+  downloadModalMode: "new",
+  editTask: null,
+  prefill: null,
+  openNewDownload: (prefill) =>
+    set({
+      downloadModalOpen: true,
+      downloadModalMode: "new",
+      editTask: null,
+      prefill: prefill ?? null,
+    }),
+  openEditDownload: (task) =>
+    set({
+      downloadModalOpen: true,
+      downloadModalMode: "edit",
+      editTask: task,
+      prefill: null,
+    }),
+  closeDownloadModal: () => set({ downloadModalOpen: false }),
+
+  ctx: { open: false, x: 0, y: 0, taskId: null },
+  openContextMenu: (taskId, x, y) => set({ ctx: { open: true, x, y, taskId } }),
+  closeContextMenu: () => set((s) => ({ ctx: { ...s.ctx, open: false } })),
+}));
diff --git a/apps/ui/src/theme/mg-map.ts b/apps/ui/src/theme/mg-map.ts
new file mode 100644
index 000000000..567775120
--- /dev/null
+++ b/apps/ui/src/theme/mg-map.ts
@@ -0,0 +1,48 @@
+import { DownloadStatus, DownloadType } from "@mediago/shared-common";
+import type { MgStatus, MgType } from "./mg";
+
+/** Map real backend DownloadStatus -> the design's status vocabulary. */
+export function mapStatus(s?: DownloadStatus): MgStatus {
+  switch (s) {
+    case DownloadStatus.Ready:
+      return "waiting";
+    case DownloadStatus.Pending:
+      return "preparing";
+    case DownloadStatus.Downloading:
+      return "downloading";
+    case DownloadStatus.Stopped:
+      return "paused";
+    case DownloadStatus.Success:
+      return "success";
+    case DownloadStatus.Failed:
+      return "failed";
+    default:
+      return "waiting";
+  }
+}
+
+/** Map real backend DownloadType -> the design's type vocabulary. */
+export function mapType(t?: DownloadType): MgType {
+  switch (t) {
+    case DownloadType.bilibili:
+      return "bilibili";
+    case DownloadType.youtube:
+      return "youtube";
+    case DownloadType.mediago:
+      return "mediago";
+    case DownloadType.direct:
+      return "mp4";
+    default:
+      return "m3u8";
+  }
+}
+
+/** MgStatus -> existing i18n key for the status label. */
+export const statusLabelKey: Record<MgStatus, string> = {
+  waiting: "pending",
+  preparing: "preparing",
+  downloading: "downloading",
+  paused: "downloadPause",
+  success: "downloadSuccess",
+  failed: "downloadFailed",
+};
diff --git a/apps/ui/src/theme/mg.ts b/apps/ui/src/theme/mg.ts
new file mode 100644
index 000000000..850173a6f
--- /dev/null
+++ b/apps/ui/src/theme/mg.ts
@@ -0,0 +1,88 @@
+/**
+ * MediaGo redesign — status / type accent metadata.
+ * Mirrors `_statusMeta()` and `_typeMeta()` in the source design (MediaGo.dc.html).
+ *
+ * Keys use the design's own vocabulary. Real backend enums
+ * (DownloadStatus / download type) are mapped onto these in the components,
+ * so this module stays a pure presentation table.
+ */
+
+export type MgStatus =
+  | "waiting"
+  | "preparing"
+  | "downloading"
+  | "paused"
+  | "success"
+  | "failed";
+
+export interface StatusMeta {
+  /** foreground / icon color */
+  color: string;
+  /** soft background tint (icon chip, status pill) */
+  bg: string;
+  /** progress-bar fill (solid or gradient) */
+  bar: string;
+}
+
+export const MG_STATUS: Record<MgStatus, StatusMeta> = {
+  waiting: { color: "#94a3b8", bg: "rgba(148,163,184,.14)", bar: "#94a3b8" },
+  preparing: { color: "#8b5cf6", bg: "rgba(139,92,246,.14)", bar: "#8b5cf6" },
+  downloading: {
+    color: "#3b82f6",
+    bg: "rgba(59,130,246,.14)",
+    bar: "linear-gradient(90deg,#3b82f6,#60a5fa)",
+  },
+  paused: { color: "#f59e0b", bg: "rgba(245,158,11,.15)", bar: "#f59e0b" },
+  success: { color: "#10b981", bg: "rgba(16,185,129,.14)", bar: "#10b981" },
+  failed: { color: "#f43f5e", bg: "rgba(244,63,94,.13)", bar: "#f43f5e" },
+};
+
+export function statusMeta(s: MgStatus | string): StatusMeta {
+  return MG_STATUS[s as MgStatus] ?? MG_STATUS.waiting;
+}
+
+export type MgType = "m3u8" | "bilibili" | "youtube" | "mp4" | "mediago";
+
+export interface TypeMeta {
+  label: string;
+  glyph: string;
+  color: string;
+  bg: string;
+}
+
+export const MG_TYPE: Record<MgType, TypeMeta> = {
+  m3u8: {
+    label: "M3U8",
+    glyph: "🎬",
+    color: "#3b82f6",
+    bg: "rgba(59,130,246,.13)",
+  },
+  bilibili: {
+    label: "B站",
+    glyph: "📺",
+    color: "#fb7299",
+    bg: "rgba(251,114,153,.14)",
+  },
+  youtube: {
+    label: "YT",
+    glyph: "▶️",
+    color: "#f43f5e",
+    bg: "rgba(244,63,94,.12)",
+  },
+  mp4: {
+    label: "MP4",
+    glyph: "🎞️",
+    color: "#10b981",
+    bg: "rgba(16,185,129,.13)",
+  },
+  mediago: {
+    label: "MG",
+    glyph: "⚡",
+    color: "#8b5cf6",
+    bg: "rgba(139,92,246,.14)",
+  },
+};
+
+export function typeMeta(t: MgType | string): TypeMeta {
+  return MG_TYPE[t as MgType] ?? MG_TYPE.m3u8;
+}
diff --git a/assets/mediago-light.png b/assets/mediago-light.png
index 36366a57a..68e0da972 100644
Binary files a/assets/mediago-light.png and b/assets/mediago-light.png differ
diff --git a/assets/mediago.png b/assets/mediago.png
index ce81656fb..68e0da972 100644
Binary files a/assets/mediago.png and b/assets/mediago.png differ
diff --git a/assets/mediago.svg b/assets/mediago.svg
index 8e98d529d..0bcc02509 100644
--- a/assets/mediago.svg
+++ b/assets/mediago.svg
@@ -1,14 +1,12 @@
-<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="512.000000" height="512.000000" fill="none" clip-path="url(#clipPath_0)" customFrame="url(#clipPath_0)">
-	<defs>
-		<clipPath id="clipPath_0">
-			<rect width="512.000000" height="512.000000" x="0.000000" y="0.000000" rx="2.000000" fill="rgb(255,255,255)" />
-		</clipPath>
-		<linearGradient id="paint_linear_0" x1="0" x2="189.279037" y1="395.916992" y2="395.916992" gradientUnits="userSpaceOnUse">
-			<stop stop-color="rgb(19,123,243)" offset="0" stop-opacity="1" />
-			<stop stop-color="rgb(0,227,254)" offset="1" stop-opacity="1" />
-		</linearGradient>
-	</defs>
-	<rect id="qqq 1" width="512.000000" height="512.000000" x="0.000000" y="0.000000" rx="2.000000" />
-	<path id="矢量 1" d="M24.9596 0.457617L28.9206 -2.21282e-06L30.9425 -1.60187e-06C33.9521 -1.60187e-06 38.5793 0.518744 41.3445 1.70667C43.3536 2.56974 47.0622 3.85024 49.7088 5.07523C53.6656 6.90675 56.3581 8.61388 56.3581 8.61389C56.3581 8.61389 191.463 95.7687 258.64 139.958C262.289 138.263 271.536 131.521 275.641 128.815L312.733 104.491L424.488 31.2859L447.449 16.1645C453.746 11.9876 463.037 5.20189 469.872 2.56C473.544 1.14002 477.431 0.113752 482.498 -2.08616e-06C487.542 -0.113224 492.602 1.60689 496.338 3.05896C501.797 5.18106 506.42 9.92905 508.926 15.3393C511.253 20.3454 512 26.0689 512 31.5892L512 278.608C507.066 276.734 496.706 268.538 491.512 265.399C466.918 250.543 442.996 232.826 418.469 217.871C411.992 221.443 405.751 226.256 398.827 230.121C405.316 234.83 414.103 240.04 421.004 244.542L469.872 276.239C512.041 303.491 510.828 300.091 510.844 351.321L510.857 405.412L510.857 456.397C510.857 466.125 511.06 476.015 510.513 485.551C509.85 497.144 506.325 505.933 495.377 510.562C491.36 512.25 486.415 511.846 482.068 511.566L480.207 511.445C477.149 511.248 474.15 510.467 471.266 509.433C469.194 508.69 467.061 507.926 465.311 506.88C455.237 500.868 445.225 494.908 435.37 488.525L382.505 454.383L249.536 368.277L88.9699 264.51L43.7482 235.3C39.6234 232.676 35.0831 229.958 31.1729 227.244C21.5063 220.535 9.46975 215.489 3.64256 204.666C2.79442 203.091 1.74961 201.604 1.18132 199.907C1.08962 199.634 0.976762 199.285 0.828485 198.827C0.2785 196.758 0 194.627 0 192.487L0 33.952C0 28.4411 1.11654 22.9874 3.28222 17.92L5.58338 13.9947C7.36986 10.9474 9.68804 8.24485 12.428 6.01537L13.1264 5.44704C14.7246 4.14666 16.4908 3.06775 18.3773 2.23947C20.4702 1.32055 22.6889 0.719952 24.9596 0.457617Z" fill="rgb(19,123,243)" fill-rule="nonzero" />
-	<path id="矢量 2" d="M1.40685 297.998C1.63141 297.014 1.87225 296.046 2.25266 295.139C7.75962 281.996 23.4577 276.599 35.6808 283.33C43.2143 287.479 50.4668 292.764 57.7707 297.466L103.362 326.706L150.734 357.152C157.388 361.362 164.06 365.402 170.624 369.789C178.098 374.784 184.574 377.87 187.797 387.227C190.071 393.723 189.717 400.887 186.812 407.112C182.75 415.639 169.565 422.279 161.823 427.298L121.458 453.12L60.6956 492.109C51.8752 497.728 43.554 503.748 34.2883 508.664C26.9497 512.555 21.1689 512.179 13.8082 508.344C8.37924 505.472 3.09337 500.032 1.51377 493.764C0.814501 490.819 0 487.769 0 484.741L0 307.383C0 304.224 0.704263 301.077 1.40685 297.998Z" fill="url(#paint_linear_0)" fill-rule="nonzero" />
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1024" height="1024" role="img" aria-label="MediaGo">
+  <defs>
+    <linearGradient id="mg" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#5b5bf5"></stop>
+      <stop offset="1" stop-color="#9b6bff"></stop>
+    </linearGradient>
+  </defs>
+  <rect width="1024" height="1024" rx="230" fill="url(#mg)"></rect>
+  <rect x="304" y="406" width="40" height="212" rx="20" fill="#c9b8ff" opacity="0.30"></rect>
+  <rect x="378" y="374" width="48" height="276" rx="24" fill="#c9b8ff" opacity="0.60"></rect>
+  <path d="M470 348 Q470 322 493 336 L744 494 Q768 510 744 526 L493 688 Q470 702 470 676 Z" fill="#ffffff"></path>
+</svg>
diff --git a/packages/shared/common/src/i18n/resources/en.ts b/packages/shared/common/src/i18n/resources/en.ts
index 5b2891794..069f409e2 100644
--- a/packages/shared/common/src/i18n/resources/en.ts
+++ b/packages/shared/common/src/i18n/resources/en.ts
@@ -249,4 +249,36 @@ export const en = {
   apiKey: "API key",
   pleaseEnterApiKey: "Enter your API key",
   confirm: "Confirm",
+  // --- redesign additions ---
+  preparing: "Preparing",
+  live: "LIVE",
+  engineRunning: "Download engine running",
+  manageAllTasks: "Manage all your download tasks",
+  completedTasksDesc: "Finished downloads — play or clean up",
+  personalizeExperience: "Personalize your download experience",
+  desktopBadge: "Desktop",
+  batchStart: "Start selected",
+  emptyDownloadsTitle: "No download tasks yet",
+  emptyDownloadsSub: "Click new and paste a link to start",
+  emptyCompletedTitle: "Nothing completed yet",
+  emptyCompletedSub: "Finished downloads show up here",
+  singleDownload: "Single",
+  modalSub: "Paste a link, choose where to save",
+  optional: "(optional)",
+  parsePreview: "Parsed preview",
+  validCount: "{{count}} valid",
+  invalidCount: "{{count}} to fix",
+  batchEmptyHint: "Paste links above — parsed rows appear here live",
+  sharedHeaders: "Shared headers (applied to all)",
+  convertSubtitle: "Convert downloaded videos to audio",
+  converting: "Converting",
+  done: "Done",
+  failed: "Failed",
+  qualityHigh: "High",
+  qualityMedium: "Medium",
+  qualityLow: "Low",
+  mobile: "Mobile",
+  desktop: "Desktop",
+  sniffResource: "Resource sniffing",
+  downloadStarted: "Download started",
 };
diff --git a/packages/shared/common/src/i18n/resources/it.ts b/packages/shared/common/src/i18n/resources/it.ts
index f080d0cb0..3b38e1455 100644
--- a/packages/shared/common/src/i18n/resources/it.ts
+++ b/packages/shared/common/src/i18n/resources/it.ts
@@ -1,252 +1,287 @@
-export const it = {
-  downloadList: "Download",
-  downloadComplete: "Download completato",
-  materialExtraction: "Estrazione",
-  setting: "Impostazioni",
-  refresh: "Aggiorna",
-  newDownload: "Nuovo download",
-  selectAll: "Seleziona tutto",
-  playOnMobile: "Riproduci su mobile",
-  openFolder: "Cartella download",
-  fileNotExist: "File non trovato",
-  downloadSuccess: "Download completato",
-  downloadFailed: "Download non riuscito",
-  downloadPause: "Download in pausa",
-  downloading: "Download",
-  liveResource: "Stream live",
-  more: "Altro",
-  convertToAudio: "Converti in audio",
-  edit: "Modifica",
-  convertSuccess: "Conversione completata",
-  addTaskSuccess: "Attività aggiunta",
-  download: "Download",
-  pause: "Pausa",
-  redownload: "Nuovo download",
-  pending: "In attesa",
-  continueDownload: "Riprendi",
-  playVideo: "Riproduci video",
-  scanToWatch: "Scansione per guardare (è richiesto lo stesso Wi-Fi)",
-  delete: "Elimina",
-  cancel: "Annulla",
-  selectedItems: "{{count}} selezionato",
-  help: "Aiuto",
-  openInNewWindow: "Apri in una nuova finestra",
-  switchToMobileMode: "Passa al modo mobile",
-  home: "Home",
-  back: "Indietro",
-  favorite: "Preferito",
-  cancelFavorite: "Rimuovi preferito",
-  pleaseEnterUrl: "Inserisci URL",
-  visit: "Vai",
-  mergeToMainWindow: "Unisci nella finestra principale",
-  loadFailed: "Impossibile caricare",
-  backToHome: "Torna a Home",
-  addShortcut: "Aggiungi scorciatoia",
-  siteName: "Nome sito",
-  pleaseEnterSiteName: "Inserisci nome sito",
-  siteUrl: "URL sito",
-  pleaseEnterSiteUrl: "Inserisci URL sito",
-  pleaseEnterCorrectUrl: "Inserisci una URL valida",
-  basicSetting: "Generale",
-  pleaseSelectDownloadDir: "Seleziona cartella download",
-  downloaderTheme: "Tema",
-  followSystem: "Sistema",
-  dark: "Scuro",
-  light: "Chiaro",
-  pleaseSelectTheme: "Seleziona tema",
-  displayLanguage: "Lingua",
-  chinese: "中文",
-  english: "English",
-  italian: "Italiano",
-  pleaseSelectLanguage: "Seleziona lingua interfaccia",
-  downloadPrompt: "Prompt download",
-  browserSetting: "Browser",
-  pleaseEnterProxy: "Inserisci l'indirizzo completo, es. http://127.0.0.1:8000",
-  proxySetting: "Proxy",
-  pleaseEnterProxyFirst: "Prima inserisci l'indirizzo proxy",
-  dockerUrl: "URL Docker",
-  pleaseEnterDockerUrl: "Inserisci la URL Docker",
-  blockAds: "Blocca pubblicità",
-  enterMobileMode: "Modo mobile",
-  downloadSetting: "Download",
-  dockerSetting: "Docker",
-  skillsSetting: "Skill",
-  skillsInstall: "Installa skill",
-  skillsInstallTooltip:
-    "Esegui questo comando nel terminale per installare la skill mediago da ClawHub",
-  skillsInstallCmd: "npx clawhub@latest install mediago",
-  skillsInit: "Inizializza",
-  skillsInitTooltip:
-    "Dopo l'installazione, per completare l'installazione, incolla questo comando nel codice Claude",
-  skillsCopy: "Copia",
-  skillsCopied: "Copiato negli appunti",
-  moreSettings: "Avanzate",
-  deleteSegments: "Dopo il download elimina segmenti",
-  moreAction: "Altre azioni",
-  configDir: "Cartella impostazioni",
-  clear: "Azzera",
-  clearCache: "Svuota cache",
-  clearCacheSuccess: "Cache azzerata",
-  clearCacheFailed: "Impossibile azzerare la cache",
-  binPath: "Percorso esecuzione",
-  localDir: "Cartella download",
-  extensionDir: "Cartella estensione browser",
-  currentVersion: "Versione",
-  selectFolder: "Seleziona cartella",
-  selectFile: "Seleziona file",
-  proxySwitch: "Proxy",
-  downloadProxySwitch: "Usa proxy per download",
-  proxyDescription:
-    "Il proxy si applica sia al browser integrato che ai download",
-  useImmersiveSniffing: "Sniffing immersivo",
-  immersiveSniffingDescription:
-    "Se abilitato, le risorse rilevate non verranno visualizzate direttamente nell'elenco dei download: tutto lo sniffing è gestito dall'estensione del browser",
-  maxRunner: "Download simultanei max",
-  maxRunnerDescription:
-    "Le registrazioni live non contano ai fini del limite download simultanei",
-  expand: "Espandi",
-  collapse: "Riduci",
-  editDownload: "Modifica download",
-  batchDownload: "Download batch",
-  videoLink: "Collegamento video",
-  pleaseEnterVideoLink: "Inserisci un collegamento video",
-  videoName: "Nome video",
-  pleaseEnterVideoName: "Inserisci un nome per il video",
-  pleaseEnterCorrectFormInfo: "Compila correttamente tutti i campi obbligatori",
-  additionalHeaders: "Intestazioni personalizzate",
-  pleaseEnterOnlineVideoUrl: "Inserisci URL video",
-  pleaseEnterCorrectVideoLink: "Inserisci una URL valida",
-  pleaseEnterOnlineVideoUrlOrDragM3U8Here: "Inserisci URL video",
-  videoLikeDescription:
-    "Inserisci i collegamenti video, uno per riga.\nFormato: nome URL (facoltativo) cartella (facoltativo)\n\nEsempi:\nhttp://eempio.com/xxx.m3u8 cartella film1\nhttp://esempio.com/xxx.m3u8 cartella film2\nhttp://esempio.com/xxx.m3u8",
-  additionalHeadersDescription:
-    "Inserisci intestazioni personalizzate, una per riga.\n\nEsempi:\nDSorgente: http://www.esempio.com\nRiferimento: http://www.esempio.com",
-  cancle: "Annulla",
-  terminal: "Apri terminale",
-  close: "Chiudi",
-  exportLog: "Esporta registro",
-  showTerminal: "Visualizza registro download",
-  autoUpgrade: "Aggiornamento automatico",
-  autoUpgradeTooltip: "Ha effetto alla prossima esecuzione",
-  consoleOutput: "Console",
-  downloadNow: "Download",
-  addToDownloadList: "Aggiungi a elenco",
-  videoType: "Tipo download",
-  pleaseSelectVideoType: "Seleziona tipo download",
-  numberOfEpisodes: "Episodi",
-  showNumberOfEpisodes: "Visualizza n. episodio",
-  canUseMouseWheelToAdjust: "Per modificare sua la rotellina del mouse",
-  audioMuted: "Audio OFF",
-  openBrowser: "Apri browser",
-  privacy: "Navigazione in incognito",
-  privacyTooltip: "Quando abilitato, il browser non salverà alcun dato di navigazione",
-  converter: "Conversione",
-  addFile: "Aggiungi file",
-  convertAll: "Converti tutto",
-  outputFormat: "Formato",
-  quality: "Qualità",
-  start: "Avvia",
-  stop: "Stop",
-  addFavorite: "Aggiungi preferito",
-  importFavorite: "Importa preferiti",
-  exportFavorite: "Esporta preferiti",
-  exportFavoriteSuccess: "Preferiti esportati",
-  exportFavoriteFailed: "Impossibile esportare i preferiti",
-  importFavoriteSuccess: "Preferiti importati",
-  importFavoriteFailed: "Impossibile importare i preferiti",
-  addFavoriteFailed: "Impossibile aggiungere i preferiti",
-  failToFetchVideoList: "Impossibile ottenere elenco video",
-  playList: "Playlist",
-  pleaseEnterCorrectBatchList: "Inserisci un elenco batch valido",
-  streamMedia: "Stream media (m3u8)",
-  bilibiliMedia: "Bilibili",
-  mediagoMedia: "MediaGo download",
-  youtubeMedia: "YouTube (yt-dlp)",
-  checkUpdate: "Controlla aggiornamenti",
-  allowBetaVersion: "Includi controllo versioni beta",
-  updateModal: "Aggiorna",
-  update: "Aggiorna",
-  install: "Installa",
-  checkingForUpdates: "Controllo aggiornamenti…",
-  updateAvailable: "È disponibile un aggiornamento",
-  updateNotAvailable: "Questa versione è aggiornata",
-  closeMainWindow: "Chiudi finestra",
-  minimizeToTray: "Minimizza nella barra sistema",
-  failReason: "Motivo errore",
-  viewDetails: "Visualizza dettagli",
-  exportDownloadList: "Esporta elenco download",
-  exportDownloadListFailed: "Impossibile esportare elenco download",
-  folder: "Cartella",
-  pleaseInputVideoFolder: "Inserisci nome cartella",
-  confirmChange: "Conferma",
-  createdAt: "Creato",
-  direct: "Download diretto (MP4)",
-  enableDocker: "Abilita Docker",
-  addToDocker: "Aggiungi a Docker",
-  addToDockerSuccess: "Aggiunto a Docker",
-  save: "Salva",
-  downloadLog: "Registro download",
-  processIPC: "Evento errore elaborazione IPC [{{channel}}]: ",
-  open: "Apri",
-  noMainWindow: "Finestra principale non trovata",
-  copyLinkAddress: "Copia indirizzo collegamento",
-  select: "Seleziona",
-  openFile: "Apri file",
-  noFileFound: "File non trovato",
-  exportFavorites: "Esporta preferiti",
-  copy: "Copia",
-  paste: "Incolla",
-  noTaskFound: "Nessuna attività trovata",
-  urlExist: "Questa URL esiste già",
-  videoExistsPleaseChangeName:
-    "Esiste già un video con questo nome: scegli un nome diverso",
-  videoNotExists: "Video non trovato",
-  unknownError: "Errore sconosciuto",
-  unsupportedDownloadType: "Tipo download non supportato",
-  captureVideoLinkInWindow: "Collegamento video catturato nella finestra: {{url}}",
-  browserViewNotFound: "Vista browser non trovata",
-  currentWindowNotFound: "Finestra attuale non trovata",
-  proxyNotAllowEmpty: "[Proxy] L'indirizzo non può essere vuoto",
-  enableProxy: "[Proxy] abilitato ({{proxy}})",
-  disableProxy: "[Proxy] disabilitato",
-  adBlockerEnableFailed: "[Blocco pubblicità] impossibile abilitare",
-  enableADBlocker: "[Blocco pubblicità] abilitato",
-  adBlockerDisableFailed: "[Blocco pubblicità] impossibile disabilitare",
-  disableADBlocker: "[Blocco pubblicità] disabilitato",
-  ua: '[UA] User-Agent: "{{ua}}"',
-  session: "[Sessione] modo {{mode}}",
-  currentEnvironmentIsDevelopment:
-    "Rilevato ambiente di sviluppo: caricamento strumenti di sviluppo",
-  loadDevToolsSuccess: "Strumenti di sviluppo caricati",
-  loadDevToolsFailed: "Impossibile caricare strumenti di sviluppo",
-  autoUpdateSuccess: "Aggiornamento scaricato",
-  nextTimeWillAutoInstall: "Verrà installato automaticamente al prossimo avvio",
-  videoDownloadSuccess: "{{name}} scaricato",
-  videoDownloadFailed: "{{name}} download fallito",
-  showMainWindow: "Visualizza finestra principale MediaGo",
-  exitApp: "Esci",
-  untitled: "Senza titolo",
-  noData: "Nessun dato",
-  addToList: "Aggiungi a elenco",
-  convertNow: "Converti",
-  filePath: "File",
-  pleaseSelectFile: "Seleziona file",
-  browse: "Sfoglia",
-  enableMobilePlayer: "Abilita riproduttore mobile",
-  adminPassword: "Password amministratore",
-  forgotPassword: "Password dimenticata?",
-  forgetPasswordDescription: "Se hai dimenticato la password dell'amministratore, puoi reimpostarla:\n1. Trova la cartella di archiviazione di MediaGo.\n2. Apri la cartella '.store' e modifica 'config.json'.\n3. Cancella il valore del campo apiKey.",
-  signin: "Accedi",
-  signinMediaGoServer: "Accedi al server MediaGo",
-  initializeMediaGoServer: "Imposta server MediaGo",
-  settingUpAdminPassword: "Crea password amministratore",
-  repeatPassword: "Conferma password",
-  pleaseEnterPassword: "Inserisci password",
-  passwordNotMatch: "Le password non corrispondono",
-  signinFailed: "Accesso fallito",
-  unauthorized: "Non autorizzato",
-  setup: "Impostazione",
-  apiKey: "Chiave API",
-  pleaseEnterApiKey: "Inserisci chiave API",
-  confirm: "Conferma",
+export const it = {
+  downloadList: "Download",
+  downloadComplete: "Download completato",
+  materialExtraction: "Estrazione",
+  setting: "Impostazioni",
+  refresh: "Aggiorna",
+  newDownload: "Nuovo download",
+  selectAll: "Seleziona tutto",
+  playOnMobile: "Riproduci su mobile",
+  openFolder: "Cartella download",
+  fileNotExist: "File non trovato",
+  downloadSuccess: "Download completato",
+  downloadFailed: "Download non riuscito",
+  downloadPause: "Download in pausa",
+  downloading: "Download",
+  liveResource: "Stream live",
+  more: "Altro",
+  convertToAudio: "Converti in audio",
+  edit: "Modifica",
+  convertSuccess: "Conversione completata",
+  addTaskSuccess: "Attività aggiunta",
+  download: "Download",
+  pause: "Pausa",
+  redownload: "Nuovo download",
+  pending: "In attesa",
+  continueDownload: "Riprendi",
+  playVideo: "Riproduci video",
+  scanToWatch: "Scansione per guardare (è richiesto lo stesso Wi-Fi)",
+  delete: "Elimina",
+  cancel: "Annulla",
+  selectedItems: "{{count}} selezionato",
+  help: "Aiuto",
+  openInNewWindow: "Apri in una nuova finestra",
+  switchToMobileMode: "Passa al modo mobile",
+  home: "Home",
+  back: "Indietro",
+  favorite: "Preferito",
+  cancelFavorite: "Rimuovi preferito",
+  pleaseEnterUrl: "Inserisci URL",
+  visit: "Vai",
+  mergeToMainWindow: "Unisci nella finestra principale",
+  loadFailed: "Impossibile caricare",
+  backToHome: "Torna a Home",
+  addShortcut: "Aggiungi scorciatoia",
+  siteName: "Nome sito",
+  pleaseEnterSiteName: "Inserisci nome sito",
+  siteUrl: "URL sito",
+  pleaseEnterSiteUrl: "Inserisci URL sito",
+  pleaseEnterCorrectUrl: "Inserisci una URL valida",
+  basicSetting: "Generale",
+  pleaseSelectDownloadDir: "Seleziona cartella download",
+  downloaderTheme: "Tema",
+  followSystem: "Sistema",
+  dark: "Scuro",
+  light: "Chiaro",
+  pleaseSelectTheme: "Seleziona tema",
+  displayLanguage: "Lingua",
+  chinese: "中文",
+  english: "English",
+  italian: "Italiano",
+  pleaseSelectLanguage: "Seleziona lingua interfaccia",
+  downloadPrompt: "Prompt download",
+  browserSetting: "Browser",
+  pleaseEnterProxy: "Inserisci l'indirizzo completo, es. http://127.0.0.1:8000",
+  proxySetting: "Proxy",
+  pleaseEnterProxyFirst: "Prima inserisci l'indirizzo proxy",
+  dockerUrl: "URL Docker",
+  pleaseEnterDockerUrl: "Inserisci la URL Docker",
+  blockAds: "Blocca pubblicità",
+  enterMobileMode: "Modo mobile",
+  downloadSetting: "Download",
+  dockerSetting: "Docker",
+  skillsSetting: "Skill",
+  skillsInstall: "Installa skill",
+  skillsInstallTooltip:
+    "Esegui questo comando nel terminale per installare la skill mediago da ClawHub",
+  skillsInstallCmd: "npx clawhub@latest install mediago",
+  skillsInit: "Inizializza",
+  skillsInitTooltip:
+    "Dopo l'installazione, per completare l'installazione, incolla questo comando nel codice Claude",
+  skillsCopy: "Copia",
+  skillsCopied: "Copiato negli appunti",
+  moreSettings: "Avanzate",
+  deleteSegments: "Dopo il download elimina segmenti",
+  moreAction: "Altre azioni",
+  configDir: "Cartella impostazioni",
+  clear: "Azzera",
+  clearCache: "Svuota cache",
+  clearCacheSuccess: "Cache azzerata",
+  clearCacheFailed: "Impossibile azzerare la cache",
+  binPath: "Percorso esecuzione",
+  localDir: "Cartella download",
+  extensionDir: "Cartella estensione browser",
+  currentVersion: "Versione",
+  selectFolder: "Seleziona cartella",
+  selectFile: "Seleziona file",
+  proxySwitch: "Proxy",
+  downloadProxySwitch: "Usa proxy per download",
+  proxyDescription:
+    "Il proxy si applica sia al browser integrato che ai download",
+  useImmersiveSniffing: "Sniffing immersivo",
+  immersiveSniffingDescription:
+    "Se abilitato, le risorse rilevate non verranno visualizzate direttamente nell'elenco dei download: tutto lo sniffing è gestito dall'estensione del browser",
+  maxRunner: "Download simultanei max",
+  maxRunnerDescription:
+    "Le registrazioni live non contano ai fini del limite download simultanei",
+  expand: "Espandi",
+  collapse: "Riduci",
+  editDownload: "Modifica download",
+  batchDownload: "Download batch",
+  videoLink: "Collegamento video",
+  pleaseEnterVideoLink: "Inserisci un collegamento video",
+  videoName: "Nome video",
+  pleaseEnterVideoName: "Inserisci un nome per il video",
+  pleaseEnterCorrectFormInfo: "Compila correttamente tutti i campi obbligatori",
+  additionalHeaders: "Intestazioni personalizzate",
+  pleaseEnterOnlineVideoUrl: "Inserisci URL video",
+  pleaseEnterCorrectVideoLink: "Inserisci una URL valida",
+  pleaseEnterOnlineVideoUrlOrDragM3U8Here: "Inserisci URL video",
+  videoLikeDescription:
+    "Inserisci i collegamenti video, uno per riga.\nFormato: nome URL (facoltativo) cartella (facoltativo)\n\nEsempi:\nhttp://eempio.com/xxx.m3u8 cartella film1\nhttp://esempio.com/xxx.m3u8 cartella film2\nhttp://esempio.com/xxx.m3u8",
+  additionalHeadersDescription:
+    "Inserisci intestazioni personalizzate, una per riga.\n\nEsempi:\nDSorgente: http://www.esempio.com\nRiferimento: http://www.esempio.com",
+  cancle: "Annulla",
+  terminal: "Apri terminale",
+  close: "Chiudi",
+  exportLog: "Esporta registro",
+  showTerminal: "Visualizza registro download",
+  autoUpgrade: "Aggiornamento automatico",
+  autoUpgradeTooltip: "Ha effetto alla prossima esecuzione",
+  consoleOutput: "Console",
+  downloadNow: "Download",
+  addToDownloadList: "Aggiungi a elenco",
+  videoType: "Tipo download",
+  pleaseSelectVideoType: "Seleziona tipo download",
+  numberOfEpisodes: "Episodi",
+  showNumberOfEpisodes: "Visualizza n. episodio",
+  canUseMouseWheelToAdjust: "Per modificare sua la rotellina del mouse",
+  audioMuted: "Audio OFF",
+  openBrowser: "Apri browser",
+  privacy: "Navigazione in incognito",
+  privacyTooltip:
+    "Quando abilitato, il browser non salverà alcun dato di navigazione",
+  converter: "Conversione",
+  addFile: "Aggiungi file",
+  convertAll: "Converti tutto",
+  outputFormat: "Formato",
+  quality: "Qualità",
+  start: "Avvia",
+  stop: "Stop",
+  addFavorite: "Aggiungi preferito",
+  importFavorite: "Importa preferiti",
+  exportFavorite: "Esporta preferiti",
+  exportFavoriteSuccess: "Preferiti esportati",
+  exportFavoriteFailed: "Impossibile esportare i preferiti",
+  importFavoriteSuccess: "Preferiti importati",
+  importFavoriteFailed: "Impossibile importare i preferiti",
+  addFavoriteFailed: "Impossibile aggiungere i preferiti",
+  failToFetchVideoList: "Impossibile ottenere elenco video",
+  playList: "Playlist",
+  pleaseEnterCorrectBatchList: "Inserisci un elenco batch valido",
+  streamMedia: "Stream media (m3u8)",
+  bilibiliMedia: "Bilibili",
+  mediagoMedia: "MediaGo download",
+  youtubeMedia: "YouTube (yt-dlp)",
+  checkUpdate: "Controlla aggiornamenti",
+  allowBetaVersion: "Includi controllo versioni beta",
+  updateModal: "Aggiorna",
+  update: "Aggiorna",
+  install: "Installa",
+  checkingForUpdates: "Controllo aggiornamenti…",
+  updateAvailable: "È disponibile un aggiornamento",
+  updateNotAvailable: "Questa versione è aggiornata",
+  closeMainWindow: "Chiudi finestra",
+  minimizeToTray: "Minimizza nella barra sistema",
+  failReason: "Motivo errore",
+  viewDetails: "Visualizza dettagli",
+  exportDownloadList: "Esporta elenco download",
+  exportDownloadListFailed: "Impossibile esportare elenco download",
+  folder: "Cartella",
+  pleaseInputVideoFolder: "Inserisci nome cartella",
+  confirmChange: "Conferma",
+  createdAt: "Creato",
+  direct: "Download diretto (MP4)",
+  enableDocker: "Abilita Docker",
+  addToDocker: "Aggiungi a Docker",
+  addToDockerSuccess: "Aggiunto a Docker",
+  save: "Salva",
+  downloadLog: "Registro download",
+  processIPC: "Evento errore elaborazione IPC [{{channel}}]: ",
+  open: "Apri",
+  noMainWindow: "Finestra principale non trovata",
+  copyLinkAddress: "Copia indirizzo collegamento",
+  select: "Seleziona",
+  openFile: "Apri file",
+  noFileFound: "File non trovato",
+  exportFavorites: "Esporta preferiti",
+  copy: "Copia",
+  paste: "Incolla",
+  noTaskFound: "Nessuna attività trovata",
+  urlExist: "Questa URL esiste già",
+  videoExistsPleaseChangeName:
+    "Esiste già un video con questo nome: scegli un nome diverso",
+  videoNotExists: "Video non trovato",
+  unknownError: "Errore sconosciuto",
+  unsupportedDownloadType: "Tipo download non supportato",
+  captureVideoLinkInWindow:
+    "Collegamento video catturato nella finestra: {{url}}",
+  browserViewNotFound: "Vista browser non trovata",
+  currentWindowNotFound: "Finestra attuale non trovata",
+  proxyNotAllowEmpty: "[Proxy] L'indirizzo non può essere vuoto",
+  enableProxy: "[Proxy] abilitato ({{proxy}})",
+  disableProxy: "[Proxy] disabilitato",
+  adBlockerEnableFailed: "[Blocco pubblicità] impossibile abilitare",
+  enableADBlocker: "[Blocco pubblicità] abilitato",
+  adBlockerDisableFailed: "[Blocco pubblicità] impossibile disabilitare",
+  disableADBlocker: "[Blocco pubblicità] disabilitato",
+  ua: '[UA] User-Agent: "{{ua}}"',
+  session: "[Sessione] modo {{mode}}",
+  currentEnvironmentIsDevelopment:
+    "Rilevato ambiente di sviluppo: caricamento strumenti di sviluppo",
+  loadDevToolsSuccess: "Strumenti di sviluppo caricati",
+  loadDevToolsFailed: "Impossibile caricare strumenti di sviluppo",
+  autoUpdateSuccess: "Aggiornamento scaricato",
+  nextTimeWillAutoInstall: "Verrà installato automaticamente al prossimo avvio",
+  videoDownloadSuccess: "{{name}} scaricato",
+  videoDownloadFailed: "{{name}} download fallito",
+  showMainWindow: "Visualizza finestra principale MediaGo",
+  exitApp: "Esci",
+  untitled: "Senza titolo",
+  noData: "Nessun dato",
+  addToList: "Aggiungi a elenco",
+  convertNow: "Converti",
+  filePath: "File",
+  pleaseSelectFile: "Seleziona file",
+  browse: "Sfoglia",
+  enableMobilePlayer: "Abilita riproduttore mobile",
+  adminPassword: "Password amministratore",
+  forgotPassword: "Password dimenticata?",
+  forgetPasswordDescription:
+    "Se hai dimenticato la password dell'amministratore, puoi reimpostarla:\n1. Trova la cartella di archiviazione di MediaGo.\n2. Apri la cartella '.store' e modifica 'config.json'.\n3. Cancella il valore del campo apiKey.",
+  signin: "Accedi",
+  signinMediaGoServer: "Accedi al server MediaGo",
+  initializeMediaGoServer: "Imposta server MediaGo",
+  settingUpAdminPassword: "Crea password amministratore",
+  repeatPassword: "Conferma password",
+  pleaseEnterPassword: "Inserisci password",
+  passwordNotMatch: "Le password non corrispondono",
+  signinFailed: "Accesso fallito",
+  unauthorized: "Non autorizzato",
+  setup: "Impostazione",
+  apiKey: "Chiave API",
+  pleaseEnterApiKey: "Inserisci chiave API",
+  confirm: "Conferma",
+  // --- redesign additions ---
+  preparing: "In preparazione",
+  live: "LIVE",
+  engineRunning: "Motore di download attivo",
+  manageAllTasks: "Gestisci tutte le tue attività di download",
+  completedTasksDesc: "Download completati — riproduci o pulisci",
+  personalizeExperience: "Personalizza la tua esperienza di download",
+  desktopBadge: "Desktop",
+  batchStart: "Avvia selezionati",
+  emptyDownloadsTitle: "Nessuna attività di download",
+  emptyDownloadsSub: "Clicca nuovo e incolla un link per iniziare",
+  emptyCompletedTitle: "Niente di completato",
+  emptyCompletedSub: "I download completati appaiono qui",
+  singleDownload: "Singolo",
+  modalSub: "Incolla un link e scegli dove salvare",
+  optional: "(opzionale)",
+  parsePreview: "Anteprima analisi",
+  validCount: "{{count}} validi",
+  invalidCount: "{{count}} da correggere",
+  batchEmptyHint: "Incolla i link sopra — le righe analizzate appaiono qui",
+  sharedHeaders: "Header condivisi (applicati a tutti)",
+  convertSubtitle: "Converti i video scaricati in audio",
+  converting: "Conversione",
+  done: "Completato",
+  failed: "Non riuscito",
+  qualityHigh: "Alta",
+  qualityMedium: "Media",
+  qualityLow: "Bassa",
+  mobile: "Mobile",
+  desktop: "Desktop",
+  sniffResource: "Rilevamento risorse",
+  downloadStarted: "Download avviato",
 };
diff --git a/packages/shared/common/src/i18n/resources/zh.ts b/packages/shared/common/src/i18n/resources/zh.ts
index bffa3ffb6..8cfa515b0 100644
--- a/packages/shared/common/src/i18n/resources/zh.ts
+++ b/packages/shared/common/src/i18n/resources/zh.ts
@@ -247,4 +247,36 @@ export const zh = {
   apiKey: "API 密钥",
   pleaseEnterApiKey: "请输入 API 密钥",
   confirm: "确认",
+  // --- redesign additions ---
+  preparing: "准备下载",
+  live: "直播",
+  engineRunning: "下载引擎运行中",
+  manageAllTasks: "管理你的全部下载任务",
+  completedTasksDesc: "已完成的下载，可直接播放或清理",
+  personalizeExperience: "个性化你的下载体验",
+  desktopBadge: "桌面端",
+  batchStart: "批量开始",
+  emptyDownloadsTitle: "还没有下载任务",
+  emptyDownloadsSub: "点击新建，粘贴链接即可开始下载",
+  emptyCompletedTitle: "暂无已完成任务",
+  emptyCompletedSub: "完成的下载会出现在这里",
+  singleDownload: "单条下载",
+  modalSub: "粘贴链接，选择保存位置即可",
+  optional: "（可选）",
+  parsePreview: "解析预览",
+  validCount: "{{count}} 条有效",
+  invalidCount: "{{count}} 条待修正",
+  batchEmptyHint: "在上方粘贴链接，这里会实时显示解析结果",
+  sharedHeaders: "共享 Headers（应用到全部任务）",
+  convertSubtitle: "将下载好的视频转换为音频",
+  converting: "转换中",
+  done: "已完成",
+  failed: "失败",
+  qualityHigh: "高",
+  qualityMedium: "中",
+  qualityLow: "低",
+  mobile: "手机",
+  desktop: "桌面",
+  sniffResource: "资源嗅探",
+  downloadStarted: "已开始下载",
 };