diff --git a/apps/web/src/app/[locale]/openclaw/live-ops-space/page.tsx b/apps/web/src/app/[locale]/openclaw/live-ops-space/page.tsx
index b6f275286..3bf13d898 100644
--- a/apps/web/src/app/[locale]/openclaw/live-ops-space/page.tsx
+++ b/apps/web/src/app/[locale]/openclaw/live-ops-space/page.tsx
@@ -110,11 +110,11 @@ function stateLabel(t: ReturnType<typeof useTranslations>, state: string): strin
 }
 
 function stateClass(state: string): string {
-  if (state === "working") return "border-[#4a90d9] bg-[#eef5ff] text-[#1f5b9b]";
-  if (state === "verified") return "border-[#8fc29a] bg-[#f0faf2] text-[#17602a]";
-  if (state === "blocked") return "border-[#e2a29b] bg-[#fff0ef] text-[#9f2f25]";
-  if (state === "waiting") return "border-[#d9b36f] bg-[#fff7e8] text-[#8a5a08]";
-  return "border-[#d8d3c7] bg-white text-[#5f5b52]";
+  if (state === "working") return "border-[#4a90d9] bg-white/70 backdrop-blur-[20px] text-[#4a90d9] shadow-[0_0_15px_rgba(74,144,217,0.4)]";
+  if (state === "verified") return "border-[#8fc29a] bg-white/70 backdrop-blur-[20px] text-[#17602a]";
+  if (state === "blocked") return "border-[#e2a29b] bg-white/70 backdrop-blur-[20px] text-[#9f2f25]";
+  if (state === "waiting") return "border-[#d9b36f] bg-white/70 backdrop-blur-[20px] text-[#8a5a08]";
+  return "border-[#d8d3c7] bg-white/70 backdrop-blur-[20px] text-[#5f5b52]";
 }
 
 function stateFromWorkItemStatus(status: string): string {
@@ -289,13 +289,13 @@ export default function OpenClawLiveOpsSpacePage({
                     <div
                       key={zone.zone_id}
                       data-testid="openclaw-zone"
-                      className="absolute flex h-14 w-28 -translate-x-1/2 -translate-y-1/2 rotate-[-2deg] items-center gap-2 border border-[#cbd4d8] bg-white/95 px-2 shadow-[0_10px_24px_rgba(54,72,88,0.12)] backdrop-blur"
+                      className="absolute flex h-14 w-32 -translate-x-1/2 -translate-y-1/2 rotate-[-2deg] items-center gap-2 rounded-xl border border-white/40 bg-white/70 px-2.5 shadow-[0_8px_32px_rgba(31,38,135,0.07)] backdrop-blur-[20px]"
                       style={{ left: `${zone.position.x}%`, top: `${zone.position.y}%` }}
                     >
-                      <span className="flex h-8 w-8 shrink-0 items-center justify-center border border-[#d8d3c7] bg-[#f7f8f7] text-[#4a90d9]">
+                      <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-white/50 bg-white/40 text-[#4a90d9] shadow-sm backdrop-blur-md">
                         <Icon className="h-4 w-4" aria-hidden="true" />
                       </span>
-                      <span className="min-w-0 truncate text-[11px] font-semibold text-[#34302a]">
+                      <span className="min-w-0 truncate font-mono text-[11px] font-semibold tracking-tight text-[#34302a]">
                         {zone.label}
                       </span>
                     </div>
@@ -307,7 +307,7 @@ export default function OpenClawLiveOpsSpacePage({
                     key={item.work_item_id}
                     data-testid="openclaw-work-token"
                     className={cn(
-                      "openclaw-work-token absolute h-8 w-20 -translate-x-1/2 -translate-y-1/2 border px-2 py-1 text-[10px] font-semibold shadow-[0_8px_20px_rgba(54,72,88,0.16)]",
+                      "openclaw-work-token absolute h-8 w-24 -translate-x-1/2 -translate-y-1/2 rounded-full border px-3 py-1 text-[10px] font-semibold shadow-[0_8px_20px_rgba(54,72,88,0.12)] flex items-center justify-center",
                       stateClass(stateFromWorkItemStatus(item.status)),
                     )}
                     style={{
@@ -316,7 +316,7 @@ export default function OpenClawLiveOpsSpacePage({
                       animationDelay: `${index * 0.35}s`,
                     }}
                   >
-                    <span className="block truncate">{item.work_item_id}</span>
+                    <span className="block truncate font-mono tracking-wider">{item.work_item_id}</span>
                   </div>
                 ))}
 
@@ -324,34 +324,39 @@ export default function OpenClawLiveOpsSpacePage({
                   <div
                     key={agent.agent_id}
                     data-testid="openclaw-agent-avatar"
-                    className="openclaw-agent absolute -translate-x-1/2 -translate-y-1/2"
+                    className="openclaw-agent absolute -translate-x-1/2 -translate-y-1/2 flex flex-col items-center"
                     style={{
                       left: `${agent.position.x}%`,
                       top: `${agent.position.y}%`,
                       animationDelay: `${index * 0.28}s`,
                     }}
                   >
-                    <div
-                      className={cn(
-                        "relative flex h-14 w-14 items-center justify-center border-2 bg-white shadow-[0_16px_30px_rgba(54,72,88,0.2)]",
-                        stateClass(agent.state),
+                    <div className="relative">
+                      {agent.state === "working" && (
+                        <div className="openclaw-working-ripple absolute inset-0 rounded-full border-2 border-[#4a90d9]" />
                       )}
-                    >
-                      <span
+                      <div
                         className={cn(
-                          "absolute -right-1 -top-1 h-3 w-3 border border-white",
-                          agent.state === "blocked"
-                            ? "bg-[#d95f4f]"
-                            : agent.state === "verified"
-                              ? "bg-[#4f9b62]"
-                              : agent.state === "working"
-                                ? "bg-[#4a90d9]"
-                                : "bg-[#f0bd69]",
+                          "relative z-10 flex h-14 w-14 items-center justify-center rounded-full border-2 shadow-[0_16px_30px_rgba(54,72,88,0.15)] transition-all duration-300",
+                          stateClass(agent.state),
                         )}
-                      />
-                      <Bot className="h-6 w-6" aria-hidden="true" />
+                      >
+                        <span
+                          className={cn(
+                            "absolute -right-0 -top-0 h-3.5 w-3.5 rounded-full border-2 border-white",
+                            agent.state === "blocked"
+                              ? "bg-[#d95f4f] animate-pulse"
+                              : agent.state === "verified"
+                                ? "bg-[#4f9b62]"
+                                : agent.state === "working"
+                                  ? "bg-[#4a90d9] animate-pulse"
+                                  : "bg-[#f0bd69]",
+                          )}
+                        />
+                        <Bot className={cn("h-6 w-6", agent.state === "working" ? "animate-bounce-slow text-[#4a90d9]" : "")} aria-hidden="true" />
+                      </div>
                     </div>
-                    <div className="mt-1 max-w-28 truncate border border-[#d8d3c7] bg-white px-1.5 py-0.5 text-center text-[10px] font-semibold text-[#34302a] shadow-sm">
+                    <div className="mt-2 max-w-32 truncate rounded-md border border-white/50 bg-white/70 px-2 py-1 text-center font-mono text-[10px] font-semibold text-[#34302a] shadow-sm backdrop-blur-[10px]">
                       {agent.label}
                     </div>
                   </div>
@@ -553,6 +558,32 @@ export default function OpenClawLiveOpsSpacePage({
             opacity: 0;
           }
         }
+        @keyframes openclaw-ripple {
+          0% {
+            transform: scale(0.8);
+            opacity: 1;
+          }
+          100% {
+            transform: scale(2.4);
+            opacity: 0;
+          }
+        }
+        .openclaw-working-ripple {
+          animation: openclaw-ripple 2s cubic-bezier(0, 0, 0.2, 1) infinite;
+        }
+        @keyframes openclaw-bounce-slow {
+          0%, 100% {
+            transform: translateY(-8%);
+            animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+          }
+          50% {
+            transform: translateY(0);
+            animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+          }
+        }
+        .animate-bounce-slow {
+          animation: openclaw-bounce-slow 2s infinite;
+        }
         .openclaw-flow-packet {
           animation: openclaw-flow-packet 5.8s ease-in-out infinite;
           will-change: transform, opacity;