diff --git a/web/app/components/main-nav/__tests__/index.spec.tsx b/web/app/components/main-nav/__tests__/index.spec.tsx
index c5b81b2514d..9e528f6d1cc 100644
--- a/web/app/components/main-nav/__tests__/index.spec.tsx
+++ b/web/app/components/main-nav/__tests__/index.spec.tsx
@@ -23,7 +23,7 @@ import { AppModeEnum } from '@/types/app'
 import MainNav from '../index'
 import { DETAIL_SIDEBAR_STORAGE_KEY } from '../storage'
 
-const activeGradientMaskClassName = 'aria-[current=page]:main-nav-active-glass'
+const activeGradientMaskClassName = 'aria-[current=page]:dify-blue-glass-surface'
 const activeStackingClassName = 'aria-[current=page]:z-1'
 
 const { mockIsAgentV2Enabled, mockSwitchWorkspace, mockToastSuccess, hotkeyRegistrations } = vi.hoisted(() => ({
diff --git a/web/app/components/main-nav/components/nav-link.tsx b/web/app/components/main-nav/components/nav-link.tsx
index 664b75abe04..de1a62bfbd0 100644
--- a/web/app/components/main-nav/components/nav-link.tsx
+++ b/web/app/components/main-nav/components/nav-link.tsx
@@ -36,7 +36,7 @@ const MainNavLink = ({
       className={cn(
         'group relative flex h-8 w-full items-center gap-2 rounded-[10px] px-2 py-1.5 outline-hidden transition-colors focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:ring-inset',
         'not-aria-[current=page]:bg-components-main-nav-nav-button-bg not-aria-[current=page]:system-md-medium not-aria-[current=page]:text-components-main-nav-nav-button-text not-aria-[current=page]:hover:bg-components-main-nav-nav-button-bg-hover not-aria-[current=page]:hover:text-components-main-nav-nav-button-text',
-        'aria-[current=page]:main-nav-active-glass aria-[current=page]:z-1',
+        'aria-[current=page]:dify-blue-glass-surface aria-[current=page]:z-1',
       )}
     >
       <NavIcon icon={item.icon} className="group-aria-[current=page]:hidden" />
diff --git a/web/app/components/main-nav/components/nav-link.css b/web/app/styles/glass-surface.css
similarity index 98%
rename from web/app/components/main-nav/components/nav-link.css
rename to web/app/styles/glass-surface.css
index 20839c746ea..7ac33aa3799 100644
--- a/web/app/components/main-nav/components/nav-link.css
+++ b/web/app/styles/glass-surface.css
@@ -1,4 +1,4 @@
-@utility main-nav-active-glass {
+@utility dify-blue-glass-surface {
   @apply overflow-hidden system-md-semibold text-saas-dify-blue-inverted backdrop-blur-[5px];
 
   background-image: linear-gradient(
diff --git a/web/app/styles/tailwind-core.css b/web/app/styles/tailwind-core.css
index 7707eca879c..57ae587bfe3 100644
--- a/web/app/styles/tailwind-core.css
+++ b/web/app/styles/tailwind-core.css
@@ -28,7 +28,7 @@
 @import '../components/base/action-button/index.css';
 @import '../components/base/badge/index.css';
 @import '../components/base/premium-badge/index.css';
-@import '../components/main-nav/components/nav-link.css';
+@import './glass-surface.css';
 
 /* ---------- JS plugins ------------------------------------------------ */
 @plugin './plugins/icons.ts';
diff --git a/web/features/agent-v2/agent-detail/configure/components/preview/build-chat.tsx b/web/features/agent-v2/agent-detail/configure/components/preview/build-chat.tsx
index 5d4e8a259f8..dc99fcb5a58 100644
--- a/web/features/agent-v2/agent-detail/configure/components/preview/build-chat.tsx
+++ b/web/features/agent-v2/agent-detail/configure/components/preview/build-chat.tsx
@@ -30,7 +30,7 @@ function AgentBuildChatEmptyState({
   return (
     <div className="flex h-full items-center justify-center">
       <div className="flex w-full max-w-150 flex-col items-start p-3 text-left">
-        <div className="main-nav-active-glass relative flex h-[50px] w-12 items-center justify-center rounded-xl p-2">
+        <div className="dify-blue-glass-surface relative flex h-[50px] w-12 items-center justify-center rounded-xl p-2">
           <div className="absolute inset-x-px inset-y-0.5 grid grid-cols-[repeat(8,4px)] grid-rows-[repeat(8,4px)] gap-0.5 opacity-25">
             {buildIconGridCells.map(cell => (
               <span