diff --git a/app/canvas/[id]/CanvasEditorLegacyPageClient.tsx b/app/canvas/[id]/CanvasEditorLegacyPageClient.tsx
index 7465038d9..7cd560b04 100644
--- a/app/canvas/[id]/CanvasEditorLegacyPageClient.tsx
+++ b/app/canvas/[id]/CanvasEditorLegacyPageClient.tsx
@@ -250,7 +250,6 @@ import type {
   AgentWorkflowUiConfig,
 } from "@/types/agent";
 import type {
-  AgentSlotNodeData,
   CanvasEdge,
   CanvasInitialProject,
   CanvasNode,
@@ -7515,7 +7514,7 @@ export default function CanvasEditorLegacyPage({
                 materialMimeType: image.mimeType || undefined,
                 originalHeight: dimensions.originalHeight,
                 originalWidth: dimensions.originalWidth,
-                source: "agent-workflow-material-search",
+                source: image.sourceType === "upload" ? "local-upload" : "agent-workflow-material-search",
               },
             },
             connections: [],
@@ -7527,7 +7526,7 @@ export default function CanvasEditorLegacyPage({
 
       if (createdNodeIds.length > 0) {
         selectNodes(createdNodeIds);
-        toast.success(`已添加 ${createdNodeIds.length} 张白底图到画布`);
+        toast.success(`已添加 ${createdNodeIds.length} 张${validImages.every((image) => image.sourceType === "upload") ? "图片" : "白底图"}到画布`);
       }
     },
     [createCanvasNode, getVisibleCanvasOrigin, selectNodes]
@@ -7543,64 +7542,6 @@ export default function CanvasEditorLegacyPage({
     setIsAddImageDialogOpen(true);
   }, [handleAddWorkflowNode, isVideoMode]);
 
-  const handleAddAgentSlotNode = useCallback((slotType: AgentSlotNodeData["slotType"]) => {
-    if (isVideoMode) return;
-
-    const slotDefaults: Record<
-      AgentSlotNodeData["slotType"],
-      {
-        label: string;
-        size: CanvasNode["size"];
-        aspectRatio: string;
-      }
-    > = {
-      image: {
-        label: "图片槽位",
-        size: { width: 320, height: 320 },
-        aspectRatio: "1:1",
-      },
-      video: {
-        label: "视频槽位",
-        size: { width: 360, height: 220 },
-        aspectRatio: "16:9",
-      },
-      "ui-screen": {
-        label: "UI 槽位",
-        size: { width: 360, height: 260 },
-        aspectRatio: "16:9",
-      },
-    };
-    const defaults = slotDefaults[slotType];
-    const origin = getVisibleCanvasOrigin();
-    createCanvasNode({
-      type: "agent-slot",
-      position: {
-        x: origin.x + 40,
-        y: origin.y + 40,
-      },
-      size: defaults.size,
-      data: {
-        slotType,
-        label: defaults.label,
-        status: "empty",
-        aspectRatio: defaults.aspectRatio,
-        fillPolicy: "replace-empty",
-        acceptedSources: ["text", "image", "selection", "annotation"],
-        filledNodeIds: [],
-        metadata: {
-          createdBy: "toolbar",
-          createdSlotType: slotType,
-          createdAt: new Date().toISOString(),
-        },
-      },
-      connections: [],
-    });
-  }, [createCanvasNode, getVisibleCanvasOrigin, isVideoMode]);
-
-  const handleAddAgentImageSlotNode = useCallback(() => {
-    handleAddAgentSlotNode("image");
-  }, [handleAddAgentSlotNode]);
-
   const handleAddVideoNode = useCallback(() => {
     if (isVideoMode) {
       handleAddWorkflowNode("video-input");
@@ -10325,7 +10266,7 @@ export default function CanvasEditorLegacyPage({
         <div
           className="absolute inset-0 z-0"
           data-canvas-stage="true"
-          style={isVideoMode ? undefined : { right: panelOcclusionRight, top: 80 }}
+          style={isVideoMode ? undefined : { right: panelOcclusionRight, top: 40 }}
           key={`workspace-${id}`}
         >
           <CanvasWorkspace
@@ -11080,7 +11021,7 @@ export default function CanvasEditorLegacyPage({
             )}
             data-canvas-right-panel="true"
             style={{
-              top: 40,
+              top: 0,
               right: DOCKED_PANEL_INSET,
               bottom: DOCKED_PANEL_INSET,
               width: resolvedPanelWidth,
@@ -11264,65 +11205,6 @@ export default function CanvasEditorLegacyPage({
               </TooltipContent>
             </Tooltip>
 
-            {!isVideoMode &&
-            isCanvasToolbarItemEnabled(
-              canvasToolbarConfig,
-              "addAgentImageSlot"
-            ) ? (
-              <DropdownMenu>
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <DropdownMenuTrigger asChild>
-                      <Button className="h-9 w-9 rounded-xl" size="icon" variant="ghost">
-                        <CanvasToolbarIcon
-                          className="h-4 w-4"
-                          fallback={ImagePlus}
-                    referenceName={isVideoMode ? undefined : "image"}
-                    referenceSize={18}
-                          item={getCanvasToolbarItem(
-                            canvasToolbarConfig,
-                            "addAgentImageSlot"
-                          )}
-                        />
-                      </Button>
-                    </DropdownMenuTrigger>
-                  </TooltipTrigger>
-                  <TooltipContent side={floatingToolbarTooltipSide}>
-                    {
-                      getCanvasToolbarItem(
-                        canvasToolbarConfig,
-                        "addAgentImageSlot"
-                      ).label
-                    }
-                  </TooltipContent>
-                </Tooltip>
-                <DropdownMenuContent
-                  align="start"
-                  side={floatingToolbarDropdownSide}
-                >
-                  <DropdownMenuItem
-                    onSelect={() => handleAddAgentImageSlotNode()}
-                  >
-                    <ImagePlus className="h-4 w-4" />
-                    图片槽位
-                  </DropdownMenuItem>
-                  <DropdownMenuItem
-                    onSelect={() => handleAddAgentSlotNode("video")}
-                  >
-                    <Video className="h-4 w-4" />
-                    视频槽位
-                  </DropdownMenuItem>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuItem
-                    onSelect={() => handleAddAgentSlotNode("ui-screen")}
-                  >
-                    <MonitorSmartphone className="h-4 w-4" />
-                    UI 槽位
-                  </DropdownMenuItem>
-                </DropdownMenuContent>
-              </DropdownMenu>
-            ) : null}
-
             <Tooltip>
               <TooltipTrigger asChild>
                 <Button
diff --git a/app/globals.css b/app/globals.css
index 7d63b62a6..0f09c5a09 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -592,7 +592,7 @@
 .dark .lovart-canvas-surface [data-lovart-chat="true"] .lovart-chat-header { border-color: rgb(255 255 255 / 10%); }
 .dark .lovart-canvas-surface [data-lovart-chat="true"] .lovart-chat-composer > [data-canvas-chat-input-anchor] { border-color: rgb(255 255 255 / 12%); }
 @media (max-width: 640px) {
-  .lovart-home-surface main { padding-top: 112px; }
+  .lovart-home-surface main { padding-top: calc(72px + var(--home-banner-offset, 0px)); }
   .lovart-hero { margin-top: 16px; }
   .lovart-home-composer { border-radius: 20px; }
   .lovart-suggestion { padding: 0 11px; font-size: 12px; }
@@ -754,3 +754,25 @@
 .lovart-image-tool-tooltip { display: flex; align-items: center; gap: 8px; }
 .lovart-image-tool-cost { margin-left: auto; padding: 0; background: transparent; color: #999; font-size: 12px; font-weight: 400; box-shadow: none; }
 .lovart-image-tool-cost > svg { width: 12px; height: 12px; }
+
+/* Preserve the canvas's own skills as the primary welcome content. */
+.canvas-welcome-action {
+  display: inline-flex;
+  min-height: 36px;
+  min-width: 0;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 6px 8px;
+  border: 1px solid #e5e5e5;
+  border-radius: 999px;
+  background: white;
+  color: #333;
+  font-size: 12px;
+  line-height: 16px;
+  transition: background-color 150ms, border-color 150ms;
+}
+.canvas-welcome-action:hover { background: #f7f7f7; border-color: #d4d4d4; }
+.canvas-welcome-action:focus-visible { outline: 2px solid #8c8c8c; outline-offset: 3px; }
+.dark .canvas-welcome-action { border-color: rgb(255 255 255 / 12%); background: #18181b; color: #eee; }
+.dark .canvas-welcome-action:hover { background: #27272a; border-color: rgb(255 255 255 / 22%); }
diff --git a/components/canvas/CanvasAddImageDialog.tsx b/components/canvas/CanvasAddImageDialog.tsx
index 331a1856d..03cd414bf 100644
--- a/components/canvas/CanvasAddImageDialog.tsx
+++ b/components/canvas/CanvasAddImageDialog.tsx
@@ -1,7 +1,7 @@
 "use client";
 
-import { Check, ImageIcon, ImagePlus, Loader2, Search, X } from "lucide-react";
-import { useCallback, useMemo, useState } from "react";
+import { Check, ImageIcon, ImagePlus, Loader2, Search, Upload, X } from "lucide-react";
+import { useCallback, useMemo, useRef, useState } from "react";
 import { AgentPreviewImage } from "@/components/agents/AgentPreviewImage";
 import { Button } from "@/components/ui/button";
 import {
@@ -21,6 +21,8 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { cn } from "@/lib/utils";
+import { IMAGE_UPLOAD_MAX_BYTES, IMAGE_UPLOAD_TOO_LARGE_MESSAGE } from "@/lib/image-upload-limits";
+import { imageGenerationService } from "@/services/canvas";
 import type {
   AgentWorkflowMaterialImage,
   AgentWorkflowMaterialQueryType,
@@ -163,6 +165,8 @@ export function CanvasAddImageDialog({
   const [selectedImageIds, setSelectedImageIds] = useState<string[]>([]);
   const [isSearching, setIsSearching] = useState(false);
   const [isAdding, setIsAdding] = useState(false);
+  const [isUploading, setIsUploading] = useState(false);
+  const localUploadInputRef = useRef<HTMLInputElement>(null);
   const [errorText, setErrorText] = useState<string | null>(null);
 
   const images = useMemo(() => normalizeImages(result), [result]);
@@ -182,12 +186,13 @@ export function CanvasAddImageDialog({
 
   const handleDialogOpenChange = useCallback(
     (nextOpen: boolean) => {
+      if (!nextOpen && (isUploading || isAdding)) return;
       if (!nextOpen) {
         resetDialogState();
       }
       onOpenChange(nextOpen);
     },
-    [onOpenChange, resetDialogState]
+    [isAdding, isUploading, onOpenChange, resetDialogState]
   );
 
   const closeDialog = useCallback(() => {
@@ -263,6 +268,51 @@ export function CanvasAddImageDialog({
     }
   };
 
+  const handleLocalUpload = async (files: File[]) => {
+    if (!files.length || isUploading || isAdding) return;
+    if (files.some((file) => !file.type.startsWith("image/"))) {
+      setErrorText("请选择图片文件");
+      return;
+    }
+    if (files.some((file) => file.size > IMAGE_UPLOAD_MAX_BYTES)) {
+      setErrorText(IMAGE_UPLOAD_TOO_LARGE_MESSAGE);
+      return;
+    }
+
+    setIsUploading(true);
+    setErrorText(null);
+    try {
+      const uploadedImages: CanvasAddImageDialogImage[] = [];
+      const failures: string[] = [];
+      for (const [index, file] of files.entries()) {
+        const upload = await imageGenerationService.uploadImage(file);
+        if (!upload.success || !upload.data?.url) {
+          failures.push(`${file.name}：${upload.error || "图片上传失败"}`);
+          continue;
+        }
+        uploadedImages.push({
+          id: upload.data.assetId || crypto.randomUUID(),
+          key: upload.data.pathname || file.name,
+          label: file.name.replace(/\.[^.]+$/, "") || file.name,
+          fileName: file.name,
+          imageUrl: upload.data.url,
+          assetId: upload.data.assetId,
+          mimeType: file.type,
+          sourceType: "upload",
+          group: "other",
+          sortOrder: index,
+        });
+      }
+      if (uploadedImages.length) await onAddImages(uploadedImages);
+      if (failures.length) setErrorText(failures.join("；"));
+      else closeDialog();
+    } catch (error) {
+      setErrorText(error instanceof Error ? error.message : "图片上传失败，请重试");
+    } finally {
+      setIsUploading(false);
+    }
+  };
+
   return (
     <Dialog onOpenChange={handleDialogOpenChange} open={open}>
       <DialogContent className="max-h-[86vh] max-w-4xl overflow-hidden p-0">
@@ -272,15 +322,38 @@ export function CanvasAddImageDialog({
             添加图片
           </DialogTitle>
           <DialogDescription>
-            添加空白图片节点，或从风格化素材库检索 SPU / SKU 白底图。
+            从本地上传图片、添加空白图片节点，或检索 SPU / SKU 白底图。
           </DialogDescription>
         </DialogHeader>
 
         <div className="max-h-[62vh] overflow-y-auto px-5 py-4">
           <div className="rounded-[var(--ui-radius-panel)] border bg-muted/20 p-3">
             <div className="flex flex-col gap-2.5 sm:flex-row">
+              <input
+                accept="image/*"
+                className="hidden"
+                multiple
+                onChange={(event) => {
+                  const files = Array.from(event.target.files || []);
+                  event.target.value = "";
+                  void handleLocalUpload(files);
+                }}
+                ref={localUploadInputRef}
+                type="file"
+              />
               <Button
-                className="h-9 justify-start gap-2"
+                className="h-9 shrink-0 justify-start gap-2"
+                disabled={isUploading || isAdding}
+                onClick={() => localUploadInputRef.current?.click()}
+                type="button"
+                variant="secondary"
+              >
+                {isUploading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Upload className="h-4 w-4" />}
+                {isUploading ? "上传中…" : "本地上传"}
+              </Button>
+              <Button
+                className="h-9 shrink-0 justify-start gap-2"
+                disabled={isUploading || isAdding}
                 onClick={() => {
                   onCreateBlankImage();
                   closeDialog();
@@ -355,13 +428,13 @@ export function CanvasAddImageDialog({
             </div>
             {!materialSearchEnabled ? (
               <div className="mt-2.5 rounded-[var(--ui-radius-control)] border border-dashed bg-background/70 px-3 py-2 text-[12px] text-muted-foreground">
-                风格化功能或素材搜索步骤未开启，当前只显示空白图片入口。
+                风格化功能或素材搜索步骤未开启，可从本地上传或添加空白图片。
               </div>
             ) : null}
           </div>
 
           {errorText ? (
-            <div className="mt-3 rounded-[var(--ui-radius-control)] border border-destructive/20 bg-destructive/5 px-3 py-2 text-[13px] text-destructive">
+            <div role="alert" className="mt-3 rounded-[var(--ui-radius-control)] border border-destructive/20 bg-destructive/5 px-3 py-2 text-[13px] text-destructive">
               {errorText}
             </div>
           ) : null}
@@ -440,6 +513,7 @@ export function CanvasAddImageDialog({
 
         <DialogFooter className="border-t px-5 py-3">
           <Button
+            disabled={isUploading || isAdding}
             onClick={closeDialog}
             type="button"
             variant="outline"
@@ -448,7 +522,7 @@ export function CanvasAddImageDialog({
           </Button>
           <Button
             className="gap-2"
-            disabled={!selectedImages.length || isAdding}
+            disabled={!selectedImages.length || isAdding || isUploading}
             onClick={() => void handleAddSelected()}
             type="button"
           >
diff --git a/components/canvas/CanvasChatPanel.tsx b/components/canvas/CanvasChatPanel.tsx
index 9e38af24e..33e767ac2 100644
--- a/components/canvas/CanvasChatPanel.tsx
+++ b/components/canvas/CanvasChatPanel.tsx
@@ -3325,7 +3325,7 @@ export function CanvasChatPanel({
   const [isComposerModeMenuOpen, setIsComposerModeMenuOpen] = useState(false);
   const [selectedSkillTagId, setSelectedSkillTagId] = useState<string | null>(null);
   const [areCanvasSkillTagsExpanded, setAreCanvasSkillTagsExpanded] = useState(false);
-  const [isCanvasSkillPickerOpen, setIsCanvasSkillPickerOpen] = useState(false);
+  const canvasSkillPickerRef = useRef<HTMLDivElement>(null);
   const [canvasSkillTagSearchQuery, setCanvasSkillTagSearchQuery] = useState("");
   const [selectedCanvasSkillCategoryId, setSelectedCanvasSkillCategoryId] =
     useState("all");
@@ -15881,19 +15881,26 @@ export function CanvasChatPanel({
                     ) : null}
                   </div>
                 ) : (
-                  <div className="lovart-chat-welcome flex min-h-0 flex-1 flex-col items-center justify-center overflow-y-auto px-5 py-6">
-                    <div className="w-full max-w-[224px] text-center">
-                      <h1 className="mb-7 text-[16px] font-semibold leading-6 text-[#222222] dark:text-zinc-50" title={`${greetingUserName} ${greetingPeriodText} · 已生成 ${Number.isFinite(totalGeneratedImages) ? totalGeneratedImages : 0} 张图`}>准备怎么开启你的创作？</h1>
-                      <div className="flex flex-col items-center gap-3">
-                        <button type="button" className="lovart-start-action" onClick={() => fileInputRef.current?.click()}><ReferenceIcon name="reference" size={16} className="text-[#a187ff]" />上传本地参考</button>
-                        {canvasSkillTags.length > 0 ? <button type="button" className="lovart-start-action" aria-expanded={isCanvasSkillPickerOpen} onClick={() => setIsCanvasSkillPickerOpen((open) => !open)}><ReferenceIcon name="skill-filled" size={16} className="text-[#657dff]" />选择 Skill 开始创作</button> : null}
-                        <button type="button" className="lovart-start-action" onClick={() => fileInputRef.current?.click()}><ReferenceIcon name="brand-filled" size={16} className="text-[#ee9b38]" />上传品牌素材</button>
-                        {onOpenFileList ? <button type="button" className="lovart-start-action" onClick={onOpenFileList}><ReferenceIcon name="brand" size={16} className="text-[#727272]" />查看画布素材</button> : null}
-                      </div>
+                  <div className="lovart-chat-welcome flex min-h-0 flex-1 flex-col overflow-y-auto px-5 pb-6 pt-6">
+                    <div className="shrink-0 text-left">
+                      <h1 className="text-[20px] font-semibold leading-tight text-[#050505] dark:text-zinc-50">
+                        Hi,{" "}
+                        {greetingUserName ? (
+                          <span className="text-[#2563ff]">{greetingUserName}</span>
+                        ) : null}{" "}
+                        {greetingPeriodText}
+                      </h1>
+                      <p className="mt-2 text-[13px] font-normal leading-5 text-[#6b7280] dark:text-zinc-400">
+                        开始创作吧! 累计为你生成了{" "}
+                        <span className="font-semibold text-[#2563ff]">
+                          {Number.isFinite(totalGeneratedImages) ? totalGeneratedImages : 0}
+                        </span>{" "}
+                        张图。
+                      </p>
                     </div>
 
-                    {canvasSkillTags.length > 0 && isCanvasSkillPickerOpen ? (
-                      <div className="mt-6 rounded-[16px] border border-[#e4e7ec] bg-white px-4 py-4 text-center dark:border-white/10 dark:bg-zinc-950/70">
+                    {canvasSkillTags.length > 0 ? (
+                      <div ref={canvasSkillPickerRef} data-canvas-skill-picker="true" className="mt-6 w-full shrink-0 rounded-[16px] border border-[#e4e7ec] bg-white px-4 py-4 text-center dark:border-white/10 dark:bg-zinc-950/70">
                         <h3 className="text-[14px] font-semibold leading-none text-[#1f2328] dark:text-zinc-100">
                           {canvasSkillTagsTitle}
                         </h3>
@@ -15965,40 +15972,38 @@ export function CanvasChatPanel({
                             ) : null}
                           </div>
                         ) : null}
-                        {canvasSkillTags.length > 4 ? (
-                          <div className="mx-auto mt-4 flex h-9 w-full max-w-[360px] items-center gap-2 rounded-lg border border-[#e5e7eb] bg-[#fafbfc] px-3 text-left transition-colors focus-within:border-[#aeb6c5] focus-within:bg-white dark:border-white/10 dark:bg-white/5 dark:focus-within:border-white/25 dark:focus-within:bg-white/[0.07]">
-                            <Search className="h-4 w-4 shrink-0 text-[#9299a6] dark:text-zinc-500" />
-                            <input
-                              type="text"
-                              value={canvasSkillTagSearchQuery}
-                              onChange={(event) =>
-                                setCanvasSkillTagSearchQuery(event.target.value)
+                        <div className="mx-auto mt-4 flex h-9 w-full max-w-[360px] items-center gap-2 rounded-lg border border-[#e5e7eb] bg-[#fafbfc] px-3 text-left transition-colors focus-within:border-[#aeb6c5] focus-within:bg-white dark:border-white/10 dark:bg-white/5 dark:focus-within:border-white/25 dark:focus-within:bg-white/[0.07]">
+                          <Search className="h-4 w-4 shrink-0 text-[#9299a6] dark:text-zinc-500" />
+                          <input
+                            type="text"
+                            value={canvasSkillTagSearchQuery}
+                            onChange={(event) =>
+                              setCanvasSkillTagSearchQuery(event.target.value)
+                            }
+                            onKeyDown={(event) => {
+                              if (event.key === "Escape") {
+                                setCanvasSkillTagSearchQuery("");
                               }
-                              onKeyDown={(event) => {
-                                if (event.key === "Escape") {
-                                  setCanvasSkillTagSearchQuery("");
-                                }
-                              }}
-                              placeholder="搜索快捷技能"
-                              aria-label="搜索快捷技能"
-                              autoComplete="off"
-                              enterKeyHint="search"
-                              spellCheck={false}
-                              className="h-full min-w-0 flex-1 bg-transparent text-[13px] text-[#1f2328] outline-none placeholder:text-[#9aa1ad] dark:text-zinc-100 dark:placeholder:text-zinc-500"
-                            />
-                            {canvasSkillTagSearchQuery ? (
-                              <button
-                                type="button"
-                                onClick={() => setCanvasSkillTagSearchQuery("")}
-                                className="inline-flex h-6 w-6 shrink-0 items-center justify-center text-[#9299a6] transition-colors hover:text-[#1f2328] dark:text-zinc-500 dark:hover:text-zinc-100"
-                                title="清空搜索"
-                                aria-label="清空快捷技能搜索"
-                              >
-                                <X className="h-3.5 w-3.5" />
-                              </button>
-                            ) : null}
-                          </div>
-                        ) : null}
+                            }}
+                            placeholder="搜索快捷技能"
+                            aria-label="搜索快捷技能"
+                            autoComplete="off"
+                            enterKeyHint="search"
+                            spellCheck={false}
+                            className="h-full min-w-0 flex-1 bg-transparent text-[13px] text-[#1f2328] outline-none placeholder:text-[#9aa1ad] dark:text-zinc-100 dark:placeholder:text-zinc-500"
+                          />
+                          {canvasSkillTagSearchQuery ? (
+                            <button
+                              type="button"
+                              onClick={() => setCanvasSkillTagSearchQuery("")}
+                              className="inline-flex h-6 w-6 shrink-0 items-center justify-center text-[#9299a6] transition-colors hover:text-[#1f2328] dark:text-zinc-500 dark:hover:text-zinc-100"
+                              title="清空搜索"
+                              aria-label="清空快捷技能搜索"
+                            >
+                              <X className="h-3.5 w-3.5" />
+                            </button>
+                          ) : null}
+                        </div>
                         <div
                           className={cn(
                             "mt-4 flex flex-wrap justify-center gap-1.5 transition-[max-height] duration-150 ease-out",
@@ -16007,7 +16012,7 @@ export function CanvasChatPanel({
                               : "mt-6",
                             isCanvasSkillTagSearching || areCanvasSkillTagsExpanded
                               ? "max-h-none overflow-visible"
-                              : "max-h-[76px] overflow-hidden"
+                              : "max-h-[calc(4rem+0.375rem)] overflow-hidden"
                           )}
                         >
                           {filteredCanvasSkillTags.map((tag) => {
@@ -16093,6 +16098,15 @@ export function CanvasChatPanel({
                         ) : null}
                       </div>
                     ) : null}
+                    <div className="mt-5 grid w-full shrink-0 grid-cols-2 gap-2">
+                      <button type="button" className="canvas-welcome-action" onClick={() => fileInputRef.current?.click()}><ReferenceIcon name="reference" size={16} className="text-[#a187ff]" />上传本地参考</button>
+                      {canvasSkillTags.length > 0 ? <button type="button" className="canvas-welcome-action" onClick={() => {
+                        canvasSkillPickerRef.current?.scrollIntoView({ behavior: "smooth", block: "nearest" });
+                        canvasSkillPickerRef.current?.querySelector("input")?.focus({ preventScroll: true });
+                      }}><ReferenceIcon name="skill-filled" size={16} className="text-[#657dff]" />选择 Skill 开始创作</button> : null}
+                      <button type="button" className="canvas-welcome-action" onClick={() => fileInputRef.current?.click()}><ReferenceIcon name="brand-filled" size={16} className="text-[#ee9b38]" />上传品牌素材</button>
+                      {onOpenFileList ? <button type="button" className="canvas-welcome-action" onClick={onOpenFileList}><ReferenceIcon name="brand" size={16} className="text-[#727272]" />查看画布素材</button> : null}
+                    </div>
                   </div>
                 )}
               </div>
diff --git a/components/canvas/CanvasSurfaceHeader.tsx b/components/canvas/CanvasSurfaceHeader.tsx
index 2331575c9..fb2aff3d1 100644
--- a/components/canvas/CanvasSurfaceHeader.tsx
+++ b/components/canvas/CanvasSurfaceHeader.tsx
@@ -27,8 +27,12 @@ export function CanvasSurfaceHeader({
   rightInset,
 }: CanvasSurfaceHeaderProps) {
   return (
-    <>
-      <div className="absolute inset-x-0 top-0 z-30 flex h-[40px] items-center border-b border-[#ededed] bg-white px-3 dark:border-white/10 dark:bg-zinc-950">
+    <div
+      className="absolute left-0 top-0 z-20 flex h-[40px] items-center justify-between border-b border-[#ededed] bg-white px-3 dark:border-white/10 dark:bg-zinc-950"
+      data-canvas-topbar="true"
+      style={{ right: rightInset }}
+    >
+      <div className="flex min-w-0 items-center gap-2">
         <button
           aria-label="返回首页"
           className={iconButtonClass}
@@ -38,62 +42,54 @@ export function CanvasSurfaceHeader({
         >
           <ReferenceIcon name="branding" size={16} />
         </button>
-      </div>
-      <div
-        className="absolute left-0 top-[40px] z-20 flex h-[40px] items-center justify-between border-b border-[#ededed] bg-white px-3 dark:border-white/10 dark:bg-zinc-950"
-        data-canvas-topbar="true"
-        style={{ right: rightInset }}
-      >
-        <div className="flex min-w-0 items-center gap-2">
-          <button
-            aria-label="添加参考素材"
-            className={iconButtonClass}
-            onClick={onAddImage}
-            title="添加参考素材"
-            type="button"
-          >
-            <ReferenceIcon name="reference" size={16} />
-          </button>
-          <button
-            aria-label="查看项目文件"
-            className={iconButtonClass}
-            onClick={onOpenFiles}
-            title="查看项目文件"
-            type="button"
-          >
-            <ReferenceIcon name="brand" size={16} />
-          </button>
-          <div className="mx-1 h-4 w-px bg-[#ededed] dark:bg-white/10" />
-          <span className="inline-flex h-7 min-w-0 items-center gap-2 rounded-[8px] bg-[#ededed] px-3 text-[13px] text-[#333333] dark:bg-white/10 dark:text-white">
-            <ReferenceIcon name="page" size={16} />
-            <span className="max-w-[160px] truncate">
-              {projectTitle || "页面 1"}
-            </span>
-          </span>
-          <button
-            aria-label="添加到画布"
-            className={iconButtonClass}
-            onClick={onAddImage}
-            title="添加到画布"
-            type="button"
-          >
-            <ReferenceIcon name="plus" size={16} />
-          </button>
-        </div>
         <button
-          className="inline-flex h-7 shrink-0 items-center gap-1.5 rounded-[8px] border border-[#e5e5e5] px-3 text-[12px] text-[#333333] transition-colors hover:bg-black/5 disabled:opacity-50 dark:border-white/10 dark:text-white"
-          disabled={isSaving}
-          onClick={onSave}
+          aria-label="添加参考素材"
+          className={iconButtonClass}
+          onClick={onAddImage}
+          title="添加参考素材"
           type="button"
         >
-          {isSaving ? (
-            <Loader2 className="h-3.5 w-3.5 animate-spin" />
-          ) : (
-            <Save className="h-3.5 w-3.5" />
-          )}
-          保存
+          <ReferenceIcon name="reference" size={16} />
+        </button>
+        <button
+          aria-label="查看项目文件"
+          className={iconButtonClass}
+          onClick={onOpenFiles}
+          title="查看项目文件"
+          type="button"
+        >
+          <ReferenceIcon name="brand" size={16} />
+        </button>
+        <div className="mx-1 h-4 w-px bg-[#ededed] dark:bg-white/10" />
+        <span className="inline-flex h-7 min-w-0 items-center gap-2 rounded-[8px] bg-[#ededed] px-3 text-[13px] text-[#333333] dark:bg-white/10 dark:text-white">
+          <ReferenceIcon name="page" size={16} />
+          <span className="max-w-[160px] truncate">
+            {projectTitle || "页面 1"}
+          </span>
+        </span>
+        <button
+          aria-label="添加到画布"
+          className={iconButtonClass}
+          onClick={onAddImage}
+          title="添加到画布"
+          type="button"
+        >
+          <ReferenceIcon name="plus" size={16} />
         </button>
       </div>
-    </>
+      <button
+        className="inline-flex h-7 shrink-0 items-center gap-1.5 rounded-[8px] border border-[#e5e5e5] px-3 text-[12px] text-[#333333] transition-colors hover:bg-black/5 disabled:opacity-50 dark:border-white/10 dark:text-white"
+        disabled={isSaving}
+        onClick={onSave}
+        type="button"
+      >
+        {isSaving ? (
+          <Loader2 className="h-3.5 w-3.5 animate-spin" />
+        ) : (
+          <Save className="h-3.5 w-3.5" />
+        )}
+        保存
+      </button>
+    </div>
   );
 }
diff --git a/components/home/lovart-home.tsx b/components/home/lovart-home.tsx
index 02d7b49cb..03f0e7b22 100644
--- a/components/home/lovart-home.tsx
+++ b/components/home/lovart-home.tsx
@@ -3,7 +3,7 @@
 import { ReferenceIcon, type ReferenceIconName } from "@/components/lovart/reference-icon";
 
 import dynamic from "next/dynamic";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { type CSSProperties, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useRouter } from "next/navigation";
 import { useTheme } from "next-themes";
 import useSWR from "swr";
@@ -71,7 +71,6 @@ import {
   normalizeLovartHomeSidebarConfig,
   type LovartHomeSidebarItemKey,
 } from "@/lib/home/lovart-sidebar-config";
-import { BrandTopBar } from "@/components/layout/brand-top-bar";
 import { LovartFeaturedGallery } from "@/components/home/lovart/lovart-featured-gallery";
 import { LovartHeroComposer } from "@/components/home/lovart/lovart-hero-composer";
 import { LovartProjectsSection } from "@/components/home/lovart/lovart-projects-section";
@@ -422,16 +421,15 @@ function AccountMenuItem({
   onClick: () => void;
 }) {
   return (
-    <button
-      type="button"
-      onClick={onClick}
+    <DropdownMenuItem
+      onSelect={onClick}
       className="flex w-full items-center gap-3 rounded-2xl px-2.5 py-1.5 text-left text-[13px] font-medium text-black/80 hover:bg-black/5 dark:text-white/85 dark:hover:bg-white/6"
     >
       <span className="flex h-8 w-8 items-center justify-center rounded-xl bg-black/5 text-black/70 dark:bg-white/8 dark:text-white/70">
         <Icon className="h-[16px] w-[16px]" />
       </span>
       <span className="flex-1">{label}</span>
-    </button>
+    </DropdownMenuItem>
   );
 }
 
@@ -1717,6 +1715,259 @@ export function LovartHome({
     THEME_MODE_OPTIONS[0];
   const SelectedThemeIcon = selectedThemeOption.icon;
 
+  const homeThemeControl = () => (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <button
+          type="button"
+          className="inline-flex h-8 w-8 items-center justify-center rounded-[11px] border border-black/10 bg-white text-black/70 shadow-sm transition hover:bg-black/5 hover:text-black dark:border-white/10 dark:bg-white/6 dark:text-white/72 dark:hover:bg-white/10 dark:hover:text-white"
+          title={`主题模式：${selectedThemeOption.label}`}
+          aria-label={`主题模式：${selectedThemeOption.label}`}
+        >
+          <SelectedThemeIcon className="h-[15px] w-[15px]" />
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        align="end"
+        sideOffset={10}
+        className="z-[160] !min-w-0 w-auto rounded-[18px] border-black/10 bg-white p-1.5 shadow-xl dark:border-white/10 dark:bg-[#141416]"
+      >
+        <div className="flex items-center gap-1">
+          {THEME_MODE_OPTIONS.map((option) => {
+            const OptionIcon = option.icon;
+            const isSelected = selectedThemeMode === option.value;
+
+            return (
+              <DropdownMenuItem
+                key={option.value}
+                aria-label={option.label}
+                className={cn(
+                  "flex h-[34px] w-[34px] cursor-pointer items-center justify-center rounded-[10px] p-0 focus:bg-black/5 dark:focus:bg-white/8",
+                  isSelected
+                    ? "bg-black text-white focus:bg-black focus:text-white dark:bg-white dark:text-black dark:focus:bg-white dark:focus:text-black"
+                    : "text-black/70 dark:text-white/70"
+                )}
+                onSelect={() => setTheme(option.value)}
+                title={option.label}
+              >
+                <OptionIcon className="h-[15px] w-[15px]" />
+              </DropdownMenuItem>
+            );
+          })}
+        </div>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+  const homeUtilityControls = () => (
+    <>
+      <button
+        type="button"
+        aria-label="通知"
+        title="通知"
+        className="flex h-8 w-8 items-center justify-center rounded-lg bg-black/5 text-black/75 hover:bg-black/10 dark:bg-white/6 dark:text-white/70 dark:hover:bg-white/10"
+      >
+        <Bell className="h-3.5 w-3.5" />
+      </button>
+      {homeThemeControl()}
+    </>
+  );
+  const homeAccountControls = () => (
+    <div className="flex w-full flex-col items-center gap-[12px]">
+      {isMembershipEnabled ? (
+        <HoverCard openDelay={100} closeDelay={120}>
+          <HoverCardTrigger asChild>
+            <Button
+              variant="ghost"
+              onClick={() => setUpgradeDialogOpen(true)}
+              aria-label="积分与会员"
+              className="h-auto w-[36px] rounded-[8px] px-0 py-2 text-[#333] hover:bg-black/5 dark:text-white/75 dark:hover:bg-white/10"
+            >
+              <div className="flex flex-col items-center gap-[4px] text-[10px] leading-none">
+                <Zap className="h-[20px] w-[20px]" />
+                {membershipData?.summary?.currentCredits ?? 0}
+              </div>
+            </Button>
+          </HoverCardTrigger>
+          <HoverCardContent
+            side="right"
+            align="end"
+            sideOffset={12}
+            className="z-[150] w-[300px] rounded-3xl border border-black/10 bg-white p-0 shadow-xl dark:border-white/10 dark:bg-[#141416]"
+          >
+            <div className="p-4">
+              <div className="mb-4 flex items-start justify-between">
+                <div>
+                  <div className="text-[22px] font-semibold leading-none text-black dark:text-white">
+                    {currentPlan?.name || "Free"}
+                  </div>
+                </div>
+                <Button
+                  size="sm"
+                  className="h-8 rounded-2xl bg-[#2f3542] px-4 text-[13px] text-white hover:bg-[#242a36]"
+                  onClick={() => setUpgradeDialogOpen(true)}
+                >
+                  升级
+                </Button>
+              </div>
+              <div className="space-y-2.5 border-t border-black/10 pt-3 text-[14px] dark:border-white/10 dark:text-white/90">
+                <div className="flex items-center justify-between">
+                  <span className="inline-flex items-center gap-2 text-black/80 dark:text-white/75">
+                    <Sparkles className="h-3.5 w-3.5" />
+                    积分
+                  </span>
+                  <span>{membershipData?.summary?.currentCredits ?? 0}</span>
+                </div>
+                <div className="flex items-center justify-between">
+                  <span className="inline-flex items-center gap-2 text-black/80 dark:text-white/75">
+                    <Upload className="h-3.5 w-3.5" />
+                    每日免费积分
+                  </span>
+                  <span>{membershipData?.summary?.dailyFreeCredits ?? 0}</span>
+                </div>
+              </div>
+              <button
+                type="button"
+                className="mt-4 inline-flex items-center gap-1 text-[12px] font-medium text-black/80 hover:text-black dark:text-white/75 dark:hover:text-white"
+                onClick={() => setUpgradeDialogOpen(true)}
+              >
+                使用详情
+                <ChevronDown className="h-4 w-4 -rotate-90" />
+              </button>
+            </div>
+          </HoverCardContent>
+        </HoverCard>
+      ) : null}
+
+      {isAuthenticated ? (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <button
+              type="button"
+              className="flex h-[28px] w-[28px] shrink-0 items-center justify-center rounded-full bg-[#d4551f] text-[11px] font-semibold text-white"
+              aria-label="账号菜单"
+              title="账号菜单"
+            >
+              {userInitials}
+            </button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            side="right"
+            align="end"
+            sideOffset={12}
+            className="z-[150] max-h-[calc(100svh-24px)] w-[300px] overflow-y-auto rounded-3xl border border-black/10 bg-white p-0 shadow-xl dark:border-white/10 dark:bg-[#141416]"
+          >
+            <div className="p-3.5">
+              <div className="rounded-3xl border border-black/10 bg-white p-3.5 dark:border-white/10 dark:bg-[#19191d]">
+                <div className="flex justify-center">
+                  <div className="flex h-10 w-10 items-center justify-center rounded-full bg-[#d4551f] text-[14px] font-semibold text-white">
+                    {userInitials}
+                  </div>
+                </div>
+
+                <div className="mt-3 flex items-center justify-between gap-3">
+                  <div className="min-w-0">
+                    <div className="truncate text-[15px] font-semibold text-black dark:text-white">
+                      {userDisplayName}
+                    </div>
+                    <div className="truncate text-[12px] text-black/45 dark:text-white/45">
+                      {user?.email || ""}
+                    </div>
+                  </div>
+                  {isMembershipEnabled ? (
+                    <DropdownMenuItem asChild>
+                      <Button
+                        size="sm"
+                        className="h-8 rounded-2xl bg-[#2f3542] px-4 text-[13px] text-white hover:bg-[#242a36]"
+                        onClick={() => setUpgradeDialogOpen(true)}
+                      >
+                        升级
+                      </Button>
+                    </DropdownMenuItem>
+                  ) : null}
+                </div>
+
+                <div className="mt-4 border-t border-black/10 pt-3 dark:border-white/10">
+                  <DropdownMenuItem asChild>
+                    <button
+                      type="button"
+                      className="flex w-full items-center justify-between rounded-2xl px-1 py-1 text-[13px] font-semibold text-black/80 hover:bg-black/5 dark:text-white/80 dark:hover:bg-white/6"
+                      onClick={() => {
+                        setAccountCenterTab("account");
+                        setUsageFilter("all");
+                        setAccountCenterOpen(true);
+                      }}
+                    >
+                      <span>积分</span>
+                      <span className="inline-flex items-center gap-2 text-[13px] font-semibold text-black/60 dark:text-white/55">
+                        {membershipData?.summary?.currentCredits ?? 0}
+                        <ArrowRight className="h-4 w-4" />
+                      </span>
+                    </button>
+                  </DropdownMenuItem>
+                </div>
+              </div>
+
+              <div className="mt-3 space-y-1">
+                {isMembershipEnabled ? (
+                  <AccountMenuItem
+                    icon={Users}
+                    label="创建团队"
+                    onClick={() => toast.info("团队功能后续开放")}
+                  />
+                ) : null}
+                <AccountMenuItem
+                  icon={User}
+                  label="账户管理"
+                  onClick={() => {
+                    setAccountCenterTab("account");
+                    setUsageFilter("all");
+                    setAccountCenterOpen(true);
+                  }}
+                />
+                <AccountMenuItem
+                  icon={Info}
+                  label="使用指南"
+                  onClick={() => toast.info("使用指南后续开放")}
+                />
+                <AccountMenuItem
+                  icon={Mail}
+                  label="联系我们"
+                  onClick={() => setContactDialogOpen(true)}
+                />
+                <div className="flex items-center justify-between border-t border-black/10 px-2 py-2 dark:border-white/10">
+                  <span className="text-[13px] text-black/65 dark:text-white/65">
+                    通知与主题
+                  </span>
+                  <div className="flex items-center gap-2">
+                    {homeUtilityControls()}
+                  </div>
+                </div>
+                <AccountMenuItem
+                  icon={LogOut}
+                  label="退出登录"
+                  onClick={() => {
+                    void handleLogout();
+                  }}
+                />
+              </div>
+            </div>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      ) : (
+        <>
+          {homeThemeControl()}
+          <button
+            type="button"
+            className="flex h-[32px] w-[36px] items-center justify-center rounded-full border border-black/15 bg-white text-[11px] font-medium text-black/80 hover:bg-black/5 dark:border-white/12 dark:bg-[#161618] dark:text-white/80 dark:hover:bg-white/8"
+            onClick={openLoginDialog}
+          >
+            登录
+          </button>
+        </>
+      )}
+    </div>
+  );
+
   return (
     <div className="lovart-home-surface min-h-svh overflow-x-hidden bg-white text-[#171717] dark:bg-[#0a0a0c] dark:text-zinc-100 [&_button]:cursor-pointer [&_input]:cursor-pointer [&_textarea]:cursor-pointer [&_img]:cursor-pointer [&_a]:cursor-pointer [&_[role=button]]:cursor-pointer">
       {shouldShowHomeBanner ? (
@@ -1728,237 +1979,12 @@ export function LovartHome({
           text={homeBannerText}
         />
       ) : null}
-      <BrandTopBar
-        className="!h-[40px]"
-        contentClassName="pl-[80px]"
-        logo={displayLogo}
-        offsetTop={0}
-        onLogoClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
-        showBrand={false}
-        siteName={siteName || "Lovart"}
-      >
-            <button className="flex h-8 w-8 items-center justify-center rounded-lg bg-black/5 text-black/75 hover:bg-black/10 dark:bg-white/6 dark:text-white/70 dark:hover:bg-white/10">
-              <Bell className="h-3.5 w-3.5" />
-            </button>
-
-            {isMembershipEnabled ? (
-              <HoverCard openDelay={100} closeDelay={120}>
-                  <HoverCardTrigger asChild>
-                    <Button
-                      variant="ghost"
-                      onClick={() => setUpgradeDialogOpen(true)}
-                      className="h-8 rounded-[14px] border border-black/10 bg-white px-2 text-[14px] text-black/72 shadow-sm hover:bg-black/5 hover:text-black dark:border-white/10 dark:bg-white/6 dark:text-white/72 dark:hover:bg-white/10 dark:hover:text-white"
-                    >
-                      <div className="inline-flex items-center gap-1 rounded-[9px] px-1.5 py-0.5 text-xs">
-                        <Zap className="h-3 w-3 text-amber-500" />
-                        {membershipData?.summary?.currentCredits ?? 0}
-                      </div>
-                    </Button>
-                  </HoverCardTrigger>
-                  <HoverCardContent
-                    align="end"
-                    sideOffset={10}
-                    className="w-[300px] rounded-3xl border border-black/10 bg-white p-0 shadow-xl dark:border-white/10 dark:bg-[#141416]"
-                  >
-                    <div className="p-4">
-                      <div className="mb-4 flex items-start justify-between">
-                        <div>
-                          <div className="text-[22px] font-semibold leading-none text-black dark:text-white">
-                            {currentPlan?.name || "Free"}
-                          </div>
-                        </div>
-                        <Button
-                          size="sm"
-                          className="h-8 rounded-2xl bg-[#2f3542] px-4 text-[13px] text-white hover:bg-[#242a36]"
-                          onClick={() => setUpgradeDialogOpen(true)}
-                        >
-                          升级
-                        </Button>
-                      </div>
-                      <div className="space-y-2.5 border-t border-black/10 pt-3 text-[14px] dark:border-white/10 dark:text-white/90">
-                        <div className="flex items-center justify-between">
-                          <span className="inline-flex items-center gap-2 text-black/80 dark:text-white/75">
-                            <Sparkles className="h-3.5 w-3.5" />
-                            积分
-                          </span>
-                          <span>{membershipData?.summary?.currentCredits ?? 0}</span>
-                        </div>
-                        <div className="flex items-center justify-between">
-                          <span className="inline-flex items-center gap-2 text-black/80 dark:text-white/75">
-                            <Upload className="h-3.5 w-3.5" />
-                            每日免费积分
-                          </span>
-                          <span>{membershipData?.summary?.dailyFreeCredits ?? 0}</span>
-                        </div>
-                      </div>
-                      <button
-                        type="button"
-                        className="mt-4 inline-flex items-center gap-1 text-[12px] font-medium text-black/80 hover:text-black dark:text-white/75 dark:hover:text-white"
-                        onClick={() => setUpgradeDialogOpen(true)}
-                      >
-                        使用详情
-                        <ChevronDown className="h-4 w-4 -rotate-90" />
-                      </button>
-                    </div>
-                  </HoverCardContent>
-              </HoverCard>
-            ) : null}
-
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <button
-                  type="button"
-                  className="inline-flex h-8 w-8 items-center justify-center rounded-[11px] border border-black/10 bg-white text-black/70 shadow-sm transition hover:bg-black/5 hover:text-black dark:border-white/10 dark:bg-white/6 dark:text-white/72 dark:hover:bg-white/10 dark:hover:text-white"
-                  title={`主题模式：${selectedThemeOption.label}`}
-                  aria-label={`主题模式：${selectedThemeOption.label}`}
-                >
-                  <SelectedThemeIcon className="h-[15px] w-[15px]" />
-                </button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent
-                align="end"
-                sideOffset={10}
-                className="!min-w-0 w-auto rounded-[18px] border-black/10 bg-white p-1.5 shadow-xl dark:border-white/10 dark:bg-[#141416]"
-              >
-                <div className="flex items-center gap-1">
-                  {THEME_MODE_OPTIONS.map((option) => {
-                    const OptionIcon = option.icon;
-                    const isSelected = selectedThemeMode === option.value;
-
-                    return (
-                      <DropdownMenuItem
-                        key={option.value}
-                        aria-label={option.label}
-                        className={cn(
-                          "flex h-[34px] w-[34px] cursor-pointer items-center justify-center rounded-[10px] p-0 focus:bg-black/5 dark:focus:bg-white/8",
-                          isSelected
-                            ? "bg-black text-white focus:bg-black focus:text-white dark:bg-white dark:text-black dark:focus:bg-white dark:focus:text-black"
-                            : "text-black/70 dark:text-white/70"
-                        )}
-                        onSelect={() => setTheme(option.value)}
-                        title={option.label}
-                      >
-                        <OptionIcon className="h-[15px] w-[15px]" />
-                      </DropdownMenuItem>
-                    );
-                  })}
-                </div>
-              </DropdownMenuContent>
-            </DropdownMenu>
-
-            {isAuthenticated ? (
-              <HoverCard openDelay={80} closeDelay={120}>
-                <HoverCardTrigger asChild>
-                  <button
-                    type="button"
-                    className="flex h-8 w-8 items-center justify-center rounded-full bg-[#d4551f] text-[14px] font-semibold text-white"
-                    aria-label="Account menu"
-                  >
-                    {userInitials}
-                  </button>
-                </HoverCardTrigger>
-                <HoverCardContent
-                  align="end"
-                  sideOffset={12}
-                  className="w-[300px] rounded-3xl border border-black/10 bg-white p-0 shadow-xl dark:border-white/10 dark:bg-[#141416]"
-                >
-                  <div className="p-3.5">
-                    <div className="rounded-3xl border border-black/10 bg-white p-3.5 dark:border-white/10 dark:bg-[#19191d]">
-                      <div className="flex justify-center">
-                        <div className="flex h-10 w-10 items-center justify-center rounded-full bg-[#d4551f] text-[14px] font-semibold text-white">
-                          {userInitials}
-                        </div>
-                      </div>
-
-                      <div className="mt-3 flex items-center justify-between gap-3">
-                        <div className="min-w-0">
-                          <div className="truncate text-[15px] font-semibold text-black dark:text-white">
-                            {userDisplayName}
-                          </div>
-                          <div className="truncate text-[12px] text-black/45 dark:text-white/45">
-                            {user?.email || ""}
-                          </div>
-                        </div>
-                        {isMembershipEnabled ? (
-                          <Button
-                            size="sm"
-                            className="h-8 rounded-2xl bg-[#2f3542] px-4 text-[13px] text-white hover:bg-[#242a36]"
-                            onClick={() => setUpgradeDialogOpen(true)}
-                          >
-                            升级
-                          </Button>
-                        ) : null}
-                      </div>
-
-                      <div className="mt-4 border-t border-black/10 pt-3 dark:border-white/10">
-                        <button
-                          type="button"
-                          className="flex w-full items-center justify-between rounded-2xl px-1 py-1 text-[13px] font-semibold text-black/80 hover:bg-black/5 dark:text-white/80 dark:hover:bg-white/6"
-                          onClick={() => {
-                            setAccountCenterTab("account");
-                            setUsageFilter("all");
-                            setAccountCenterOpen(true);
-                          }}
-                        >
-                          <span>积分</span>
-                          <span className="inline-flex items-center gap-2 text-[13px] font-semibold text-black/60 dark:text-white/55">
-                            {membershipData?.summary?.currentCredits ?? 0}
-                            <ArrowRight className="h-4 w-4" />
-                          </span>
-                        </button>
-                      </div>
-                    </div>
-
-                    <div className="mt-3 space-y-1">
-                      {isMembershipEnabled ? (
-                        <AccountMenuItem
-                          icon={Users}
-                          label="创建团队"
-                          onClick={() => toast.info("团队功能后续开放")}
-                        />
-                      ) : null}
-                      <AccountMenuItem
-                        icon={User}
-                        label="账户管理"
-                        onClick={() => {
-                          setAccountCenterTab("account");
-                          setUsageFilter("all");
-                          setAccountCenterOpen(true);
-                        }}
-                      />
-                      <AccountMenuItem
-                        icon={Info}
-                        label="使用指南"
-                        onClick={() => toast.info("使用指南后续开放")}
-                      />
-                      <AccountMenuItem
-                        icon={Mail}
-                        label="联系我们"
-                        onClick={() => setContactDialogOpen(true)}
-                      />
-                      <AccountMenuItem
-                        icon={LogOut}
-                        label="退出登录"
-                        onClick={() => {
-                          void handleLogout();
-                        }}
-                      />
-                    </div>
-                  </div>
-                </HoverCardContent>
-              </HoverCard>
-            ) : (
-              <button
-                type="button"
-                className="inline-flex h-8 items-center justify-center rounded-full border border-black/15 bg-white px-3 text-xs font-medium text-black/80 hover:bg-black/5 dark:border-white/12 dark:bg-[#161618] dark:text-white/80 dark:hover:bg-white/8"
-                onClick={openLoginDialog}
-              >
-                登录
-              </button>
-            )}
-      </BrandTopBar>
+      <div className="fixed bottom-5 left-4 z-[100] flex w-[44px] items-center rounded-full bg-[#f5f5f5] py-2 shadow-sm lg:hidden dark:bg-[#141416]">
+        {homeAccountControls()}
+      </div>
 
       <LovartSidebar
+        accountControls={homeAccountControls()}
         agentEnabled={siteSettingsData?.agentEnabled !== false}
         getItem={getLovartSidebarItem}
         isEnabled={isLovartSidebarItemEnabled}
@@ -1985,7 +2011,7 @@ export function LovartHome({
         }
         siteLogo={displayLogo}
         siteName={siteName || "Lovart"}
-        topOffset={40 + (shouldShowHomeBanner ? LOVART_PROMO_BANNER_HEIGHT : 0)}
+        topOffset={shouldShowHomeBanner ? LOVART_PROMO_BANNER_HEIGHT : 0}
         toolbox1Enabled={siteSettingsData?.toolbox1Enabled !== false}
         toolbox1Links={toolbox1Links}
         toolbox2Enabled={siteSettingsData?.toolbox2Enabled === true}
@@ -1997,9 +2023,12 @@ export function LovartHome({
       />
 
       <main
+        style={
+          { "--home-banner-offset": `${shouldShowHomeBanner ? LOVART_PROMO_BANNER_HEIGHT : 0}px` } as CSSProperties
+        }
         className={cn(
           "ml-[120px] mr-[60px] w-auto max-w-none pb-16 max-lg:mx-5",
-          shouldShowHomeBanner ? "pt-[164px]" : "pt-[116px]"
+          shouldShowHomeBanner ? "pt-[124px]" : "pt-[76px]"
         )}
       >
         {!isProjectsOnlyView && (
@@ -2153,7 +2182,7 @@ export function LovartHome({
 
       {loginDialogOpen ? (
         <div
-          className="fixed inset-0 z-50 flex items-center justify-center bg-black/85 p-4 backdrop-blur-[1px]"
+          className="fixed inset-0 z-[9998] flex items-center justify-center bg-black/85 p-4 backdrop-blur-[1px]"
           onClick={() => setLoginDialogOpen(false)}
         >
           <div
diff --git a/components/home/lovart/lovart-promo-banner.tsx b/components/home/lovart/lovart-promo-banner.tsx
index c2f6384b6..00d62ab41 100644
--- a/components/home/lovart/lovart-promo-banner.tsx
+++ b/components/home/lovart/lovart-promo-banner.tsx
@@ -20,7 +20,7 @@ export function LovartPromoBanner({
   const showAction = Boolean(link?.trim() && actionText?.trim());
 
   return (
-    <div className="fixed inset-x-0 top-[40px] z-[120] h-[48px] bg-[#e4ff58] text-[#11130d]">
+    <div className="fixed inset-x-0 top-0 z-[120] h-[48px] bg-[#e4ff58] text-[#11130d]">
       <div className="mx-auto flex h-full max-w-[1440px] items-center justify-center gap-3 px-11 sm:px-12">
         <Sparkles className="hidden h-4 w-4 shrink-0 sm:block" />
         <p className="min-w-0 truncate text-center text-[13px] font-normal sm:text-[15px]">
diff --git a/components/home/lovart/lovart-sidebar.tsx b/components/home/lovart/lovart-sidebar.tsx
index aeff0afd4..c9183df7f 100644
--- a/components/home/lovart/lovart-sidebar.tsx
+++ b/components/home/lovart/lovart-sidebar.tsx
@@ -20,6 +20,7 @@ type SidebarItem = {
 };
 
 type LovartSidebarProps = {
+  accountControls?: ReactNode;
   agentEnabled: boolean;
   getItem: (key: LovartHomeSidebarItemKey) => SidebarItem;
   isEnabled: (key: LovartHomeSidebarItemKey) => boolean;
@@ -56,6 +57,7 @@ type LovartSidebarProps = {
 };
 
 export function LovartSidebar({
+  accountControls,
   agentEnabled,
   getItem,
   isEnabled,
@@ -172,7 +174,7 @@ export function LovartSidebar({
       style={{ top: topOffset }}
     >
       <TooltipProvider delayDuration={120}>
-        <div className="flex h-full w-full flex-col items-center overflow-y-auto overflow-x-hidden px-2 pb-3 pt-[16px] [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
+        <div className="flex min-h-0 w-full flex-1 flex-col items-center overflow-y-auto overflow-x-hidden px-2 pt-[16px] [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
           <Tooltip>
             <TooltipTrigger asChild>
               <button
@@ -294,9 +296,10 @@ export function LovartSidebar({
           {toolbox("toolbox2", toolbox2Links, toolbox2Enabled)}
           </div>
 
-          <div className="mt-auto flex w-full flex-col items-center gap-1 pt-4">
-            {settingsHref ? tooltipButton("settings", () => onRoute(settingsHref)) : null}
-          </div>
+        </div>
+        <div className="flex w-full shrink-0 flex-col items-center gap-[10px] px-2 pb-[22px] pt-[12px]">
+          {settingsHref ? tooltipButton("settings", () => onRoute(settingsHref)) : null}
+          {accountControls}
         </div>
       </TooltipProvider>
     </aside>