diff --git a/app/canvas/[id]/page.tsx b/app/canvas/[id]/page.tsx
index a32366961..c845dcdb7 100644
--- a/app/canvas/[id]/page.tsx
+++ b/app/canvas/[id]/page.tsx
@@ -82,6 +82,7 @@ const SIZE_PRESETS = [
 const FLOATING_PANEL_WIDTH = 460;
 const FLOATING_PANEL_INSET = 16;
 const FLOATING_UI_GAP = 16;
+const FLOATING_BOTTOM_INSET = 20;
 
 export default function CanvasEditorPage({ params }: PageProps) {
   // 使用 useParams 确保客户端导航时能正确获取更新的 id
@@ -155,7 +156,7 @@ export default function CanvasEditorPage({ params }: PageProps) {
     : FLOATING_PANEL_WIDTH;
   const panelOcclusionRight = isPanelOpen ? resolvedPanelWidth + FLOATING_PANEL_INSET : 0;
   const floatingToolbarOffset = isPanelOpen ? -(panelOcclusionRight / 2) : 0;
-  const compactControlsRight = isPanelOpen ? panelOcclusionRight + FLOATING_UI_GAP : FLOATING_UI_GAP;
+  const compactControlsLeft = FLOATING_UI_GAP;
 
   // 加载画布数据
   useEffect(() => {
@@ -710,7 +711,7 @@ export default function CanvasEditorPage({ params }: PageProps) {
         </div>
 
         {/* 5. Floating Toolbar (Bottom) */}
-        <div className="absolute bottom-5 left-1/2 z-20 -translate-x-1/2">
+        <div className="absolute left-1/2 z-20 -translate-x-1/2" style={{ bottom: `${FLOATING_BOTTOM_INSET}px` }}>
           <div
             className="flex items-center gap-1 rounded-[24px] border bg-background/88 px-2.5 py-1.5 shadow-2xl backdrop-blur-md"
             style={{ marginLeft: `${floatingToolbarOffset}px` }}
@@ -818,16 +819,16 @@ export default function CanvasEditorPage({ params }: PageProps) {
           </div>
         </div>
 
-        {/* 6. Bottom Right Compact Controls */}
+        {/* 6. Bottom Left Compact Controls */}
         <div
-          className="absolute bottom-5 z-20"
-          style={{ right: `${compactControlsRight}px` }}
+          className="absolute z-20"
+          style={{ bottom: `${FLOATING_BOTTOM_INSET}px`, left: `${compactControlsLeft}px` }}
         >
-          <div className="flex items-center gap-1 rounded-2xl border bg-background/88 px-2 py-1.5 shadow-xl backdrop-blur-md">
+          <div className="flex items-center gap-0.5 rounded-xl border border-border/60 bg-background/82 px-1.5 py-1 shadow-lg backdrop-blur-sm">
             <Tooltip>
               <TooltipTrigger asChild>
-                <Button variant="ghost" size="icon" onClick={undo} disabled={!canUndo} className="h-8 w-8 rounded-lg">
-                  <Undo2 className="h-3.5 w-3.5" />
+                <Button variant="ghost" size="icon" onClick={undo} disabled={!canUndo} className="h-7 w-7 rounded-md text-muted-foreground hover:text-foreground">
+                  <Undo2 className="h-3 w-3" />
                 </Button>
               </TooltipTrigger>
               <TooltipContent side="top">撤销</TooltipContent>
@@ -835,22 +836,22 @@ export default function CanvasEditorPage({ params }: PageProps) {
 
             <Tooltip>
               <TooltipTrigger asChild>
-                <Button variant="ghost" size="icon" onClick={redo} disabled={!canRedo} className="h-8 w-8 rounded-lg">
-                  <Redo2 className="h-3.5 w-3.5" />
+                <Button variant="ghost" size="icon" onClick={redo} disabled={!canRedo} className="h-7 w-7 rounded-md text-muted-foreground hover:text-foreground">
+                  <Redo2 className="h-3 w-3" />
                 </Button>
               </TooltipTrigger>
               <TooltipContent side="top">重做</TooltipContent>
             </Tooltip>
 
-            <Separator orientation="vertical" className="mx-0.5 h-5" />
+            <Separator orientation="vertical" className="mx-1 h-4" />
 
-            <Button variant="ghost" size="icon" onClick={zoomOut} className="h-8 w-8 rounded-lg">
+            <Button variant="ghost" size="icon" onClick={zoomOut} className="h-7 w-7 rounded-md text-muted-foreground hover:text-foreground">
               <ZoomOut className="h-3.5 w-3.5" />
             </Button>
-            <span className="w-12 text-center text-xs tabular-nums font-medium text-muted-foreground">
+            <span className="w-11 text-center text-[11px] tabular-nums font-medium text-muted-foreground">
               {Math.round(viewport.zoom * 100)}%
             </span>
-            <Button variant="ghost" size="icon" onClick={zoomIn} className="h-8 w-8 rounded-lg">
+            <Button variant="ghost" size="icon" onClick={zoomIn} className="h-7 w-7 rounded-md text-muted-foreground hover:text-foreground">
               <ZoomIn className="h-3.5 w-3.5" />
             </Button>
           </div>