diff --git a/frontend/src/app/workspace/layout.tsx b/frontend/src/app/workspace/layout.tsx
index 4a289fd6..14da7ae6 100644
--- a/frontend/src/app/workspace/layout.tsx
+++ b/frontend/src/app/workspace/layout.tsx
@@ -9,7 +9,7 @@ import {
   useRef,
   useState,
 } from "react";
-import { Toaster } from "sonner";
+import { Toaster } from "@/components/ui/sonner";
 
 import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
 import { CommandPalette } from "@/components/workspace/command-palette";
@@ -121,7 +121,34 @@ export default function WorkspaceLayout({
         <SidebarInset className="min-w-0">{children}</SidebarInset>
       </SidebarProvider>
       <CommandPalette />
-      <Toaster position="top-center" />
+      <Toaster
+        position="top-center"
+        toastOptions={{
+          duration: 2200,
+          classNames: {
+            toast: [
+              /* 灰色圆角矩形容器 */
+              "rounded-[20px] border-none",
+              /* 浅灰色背景 + 轻微透明 */
+              "bg-[#999999]! backdrop-blur-sm",
+              /* 阴影极轻 */
+              "shadow-[0_2px_12px_0_rgba(0,0,0,0.18)]",
+              /* 内边距：宽松居中 */
+              "px-5 py-2.5",
+              /* 单行布局，内容水平居中 */
+              "flex items-center justify-center gap-0",
+              /* 整体文字样式 */
+              "text-white text-sm font-normal font-sans",
+              /* 去掉 icon 区域间距 */
+              "[&>[data-icon]]:hidden",
+            ].join(" "),
+            title:
+              "text-white! text-sm font-normal text-center w-full leading-snug",
+            description: "hidden",
+            icon: "hidden",
+          },
+        }}
+      />
     </QueryClientProvider>
   );
 }
diff --git a/frontend/src/components/ui/sonner.tsx b/frontend/src/components/ui/sonner.tsx
index 28c5ec35..8c9c8351 100644
--- a/frontend/src/components/ui/sonner.tsx
+++ b/frontend/src/components/ui/sonner.tsx
@@ -1,12 +1,5 @@
 "use client";
 
-import {
-  CircleCheckIcon,
-  InfoIcon,
-  Loader2Icon,
-  OctagonXIcon,
-  TriangleAlertIcon,
-} from "lucide-react";
 import { useTheme } from "next-themes";
 import { Toaster as Sonner, type ToasterProps } from "sonner";
 
@@ -14,15 +7,15 @@ const Toaster = ({ ...props }: ToasterProps) => {
   const { theme = "system" } = useTheme();
 
   return (
-    <Sonner
+      <Sonner
       theme={theme as ToasterProps["theme"]}
       className="toaster group"
       icons={{
-        success: <CircleCheckIcon className="size-4" />,
-        info: <InfoIcon className="size-4" />,
-        warning: <TriangleAlertIcon className="size-4" />,
-        error: <OctagonXIcon className="size-4" />,
-        loading: <Loader2Icon className="size-4 animate-spin" />,
+        success: null,
+        info: null,
+        warning: null,
+        error: null,
+        loading: null,
       }}
       style={
         {