diff --git a/apps/ligo-virgo/src/pages/workspace/docs/Page.tsx b/apps/ligo-virgo/src/pages/workspace/docs/Page.tsx
index e6741aecbc..b150303d31 100644
--- a/apps/ligo-virgo/src/pages/workspace/docs/Page.tsx
+++ b/apps/ligo-virgo/src/pages/workspace/docs/Page.tsx
@@ -200,7 +200,7 @@ const LigoLeftContainer = styled('div')({
     position: 'relative',
 });
 
-const WorkspaceSidebar = styled('div')(({ hidden }) => ({
+const WorkspaceSidebar = styled('div')(({ theme }) => ({
     position: 'absolute',
     bottom: '48px',
     top: '12px',
@@ -210,7 +210,7 @@ const WorkspaceSidebar = styled('div')(({ hidden }) => ({
     width: 300,
     minWidth: 300,
     borderRadius: '0px 10px 10px 0px',
-    boxShadow: '0px 1px 10px rgba(152, 172, 189, 0.6)',
+    boxShadow: theme.affine.shadows.shadowSxDownLg,
     backgroundColor: '#FFFFFF',
     transitionProperty: 'left',
     transitionDuration: '0.35s',
diff --git a/libs/components/common/src/lib/text/plugins/link.tsx b/libs/components/common/src/lib/text/plugins/link.tsx
index 18679b27d7..52c39f6053 100644
--- a/libs/components/common/src/lib/text/plugins/link.tsx
+++ b/libs/components/common/src/lib/text/plugins/link.tsx
@@ -121,11 +121,11 @@ const isLinkActive = (editor: ReactEditor) => {
 
 const LinkStyledTooltip = styled(({ className, ...props }: MuiTooltipProps) => (
     <Tooltip {...props} classes={{ popper: className }} />
-))(() => ({
+))(({ theme }) => ({
     [`& .${muiTooltipClasses.tooltip}`]: {
         backgroundColor: '#fff',
         color: '#4C6275',
-        boxShadow: '0px 1px 10px rgba(152, 172, 189, 0.6)',
+        boxShadow: theme.affine.shadows.shadowSxDownLg,
         fontSize: '14px',
     },
     [`& .MuiTooltip-tooltipPlacementBottom`]: {
@@ -412,8 +412,7 @@ export const LinkModal = memo((props: LinkModalProps) => {
         visible && (
             <>
                 <LinkBehavior onMousedown={handle_mouse_down} rects={rects} />
-                <div
-                    className={styles('linkModalContainer')}
+                <LinkModalContainer
                     style={{
                         top: top + height + GAP_BETWEEN_CONTENT_AND_MODAL,
                         left,
@@ -431,7 +430,7 @@ export const LinkModal = memo((props: LinkModalProps) => {
                         autoComplete="off"
                         ref={inputEl}
                     />
-                </div>
+                </LinkModalContainer>
             </>
         ),
         body
@@ -491,19 +490,20 @@ const LinkBehavior = (props: {
     );
 };
 
+const LinkModalContainer = styled('div')(({ theme }) => ({
+    position: 'fixed',
+    width: '354px',
+    height: '40px',
+    padding: '12px',
+    display: 'flex',
+    borderRadius: '4px',
+    boxShadow: theme.affine.shadows.shadowSxDownLg,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    zIndex: '1',
+}));
+
 const styles = style9.create({
-    linkModalContainer: {
-        position: 'fixed',
-        width: '354px',
-        height: '40px',
-        padding: '12px',
-        display: 'flex',
-        borderRadius: '4px',
-        boxShadow: '0px 1px 10px rgba(152, 172, 189, 0.6)',
-        backgroundColor: '#fff',
-        alignItems: 'center',
-        zIndex: '1',
-    },
     linkModalContainerIcon: {
         width: '16px',
         margin: '0 16px 0 4px',
diff --git a/libs/components/editor-blocks/src/blocks/group/GroupView.tsx b/libs/components/editor-blocks/src/blocks/group/GroupView.tsx
index 1c2ef04605..a3e2353fb5 100644
--- a/libs/components/editor-blocks/src/blocks/group/GroupView.tsx
+++ b/libs/components/editor-blocks/src/blocks/group/GroupView.tsx
@@ -69,7 +69,7 @@ const GroupContainer = styled('div')<{ isSelect?: boolean }>(
               }
             : {
                   '&:hover': {
-                      boxShadow: '0px 1px 10px rgb(152 172 189 / 60%)',
+                      boxShadow: theme.affine.shadows.shadowSxDownLg,
                   },
               }),
     })
diff --git a/libs/components/editor-blocks/src/blocks/group/components/Panel.tsx b/libs/components/editor-blocks/src/blocks/group/components/Panel.tsx
index e8faba84a1..269fe892bf 100644
--- a/libs/components/editor-blocks/src/blocks/group/components/Panel.tsx
+++ b/libs/components/editor-blocks/src/blocks/group/components/Panel.tsx
@@ -2,11 +2,11 @@ import { styled } from '@toeverything/components/ui';
 import type { ComponentPropsWithRef, MouseEvent } from 'react';
 import { forwardRef } from 'react';
 
-const StyledPanel = styled('div')(() => ({
+const StyledPanel = styled('div')(({ theme }) => ({
     position: 'absolute',
     top: 50,
     background: '#FFFFFF',
-    boxShadow: '0px 1px 10px rgba(152, 172, 189, 0.6)',
+    boxShadow: theme.affine.shadows.shadowSxDownLg,
     borderRadius: 10,
     padding: '12px 24px',
 }));
diff --git a/libs/components/editor-plugins/src/menu/command-menu/Container.tsx b/libs/components/editor-plugins/src/menu/command-menu/Container.tsx
index 70522d9b9c..755076d49d 100644
--- a/libs/components/editor-plugins/src/menu/command-menu/Container.tsx
+++ b/libs/components/editor-plugins/src/menu/command-menu/Container.tsx
@@ -31,7 +31,7 @@ const RootContainer = styled('div')(({ theme }) => {
         width: 352,
         maxHeight: 525,
         borderRadius: '10px',
-        boxShadow: '0px 1px 10px rgba(152, 172, 189, 0.6)',
+        boxShadow: theme.affine.shadows.shadowSxDownLg,
         backgroundColor: '#fff',
         padding: '8px 4px',
     };
diff --git a/libs/components/editor-plugins/src/menu/inline-menu/Container.tsx b/libs/components/editor-plugins/src/menu/inline-menu/Container.tsx
index 3959d1c60b..ac9b985dc4 100644
--- a/libs/components/editor-plugins/src/menu/inline-menu/Container.tsx
+++ b/libs/components/editor-plugins/src/menu/inline-menu/Container.tsx
@@ -75,13 +75,13 @@ export const InlineMenuContainer = ({ editor }: InlineMenuContainerProps) => {
     ) : null;
 };
 
-const ToolbarContainer = styled('div')({
+const ToolbarContainer = styled('div')(({ theme }) => ({
     position: 'absolute',
     zIndex: 1,
     display: 'flex',
     alignItems: 'center',
     padding: '0 12px',
     borderRadius: '10px',
-    boxShadow: '0px 1px 10px rgba(152, 172, 189, 0.6)',
+    boxShadow: theme.affine.shadows.shadowSxDownLg,
     backgroundColor: '#fff',
-});
+}));
diff --git a/libs/components/editor-plugins/src/menu/reference-menu/Container.tsx b/libs/components/editor-plugins/src/menu/reference-menu/Container.tsx
index 07c355e377..fc1c09d2ca 100644
--- a/libs/components/editor-plugins/src/menu/reference-menu/Container.tsx
+++ b/libs/components/editor-plugins/src/menu/reference-menu/Container.tsx
@@ -8,6 +8,7 @@ import {
     commonListContainer,
 } from '@toeverything/components/common';
 import { domToRect } from '@toeverything/utils';
+import { styled } from '@toeverything/components/ui';
 
 import { QueryResult } from '../../search';
 
@@ -152,13 +153,12 @@ export const ReferenceMenuContainer = ({
     }, [hooks, handle_key_down]);
 
     return isShow ? (
-        <div
+        <RootContainer
             ref={menu_ref}
-            className={styles('rootContainer')}
             onKeyDownCapture={handle_key_down}
             style={style}
         >
-            <div className={styles('contentContainer')}>
+            <ContentContainer>
                 <CommonList
                     items={
                         searchBlocks?.map(
@@ -169,24 +169,23 @@ export const ReferenceMenuContainer = ({
                     currentItem={current_item}
                     setCurrentItem={set_current_item}
                 />
-            </div>
-        </div>
+            </ContentContainer>
+        </RootContainer>
     ) : null;
 };
 
-const styles = style9.create({
-    rootContainer: {
-        position: 'fixed',
-        zIndex: 1,
-        maxHeight: 525,
-        borderRadius: '10px',
-        boxShadow: '0px 1px 10px rgba(152, 172, 189, 0.6)',
-        backgroundColor: '#fff',
-        padding: '8px 4px',
-    },
-    contentContainer: {
-        display: 'flex',
-        overflow: 'hidden',
-        maxHeight: 493,
-    },
-});
+const RootContainer = styled('div')(({ theme }) => ({
+    position: 'fixed',
+    zIndex: 1,
+    maxHeight: '525px',
+    borderRadius: '10px',
+    boxShadow: theme.affine.shadows.shadowSxDownLg,
+    backgroundColor: '#fff',
+    padding: '8px 4px',
+}));
+
+const ContentContainer = styled('div')(({ theme }) => ({
+    display: 'flex',
+    overflow: 'hidden',
+    maxHeight: '493px',
+}));
diff --git a/libs/components/editor-plugins/src/search/Search.tsx b/libs/components/editor-plugins/src/search/Search.tsx
index 5ab54b32ff..228c858aa5 100644
--- a/libs/components/editor-plugins/src/search/Search.tsx
+++ b/libs/components/editor-plugins/src/search/Search.tsx
@@ -7,6 +7,7 @@ import {
     TransitionsModal,
     MuiBox as Box,
     MuiBox,
+    styled,
 } from '@toeverything/components/ui';
 import { Virgo, BlockEditor } from '@toeverything/framework/virgo';
 import { throttle } from '@toeverything/utils';
@@ -21,26 +22,6 @@ const styles = style9.create({
         display: 'flex',
         flexDirection: 'column',
     },
-    search: {
-        margin: '0.5em',
-        backgroundColor: 'white',
-        boxShadow: '0px 1px 10px rgb(152 172 189 / 60%)',
-        padding: '16px 32px',
-        borderRadius: '10px',
-    },
-    result: {
-        margin: '0.5em',
-        backgroundColor: 'white',
-        boxShadow: '0px 1px 10px rgb(152 172 189 / 60%)',
-        padding: '16px 32px',
-        borderRadius: '10px',
-        transitionProperty: 'max-height',
-        transitionDuration: '300ms',
-        transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
-        transitionDelay: '0ms',
-        overflowX: 'hidden',
-        overflowY: 'hidden',
-    },
     resultItem: {
         width: '100%',
     },
@@ -96,15 +77,14 @@ export const Search = (props: SearchProps) => {
             }}
         >
             <Box className={styles('wrapper')}>
-                <input
-                    className={styles('search')}
+                <SearchInput
                     autoFocus
                     value={search}
                     onChange={e => set_search(e.target.value)}
                 />
-                <MuiBox
+                <ResultContainer
                     sx={{ maxHeight: `${result.length * 28 + 32 + 20}px` }}
-                    className={styles('result', {
+                    className={styles({
                         resultHide: !result.length,
                     })}
                 >
@@ -119,8 +99,30 @@ export const Search = (props: SearchProps) => {
                             }}
                         />
                     ))}
-                </MuiBox>
+                </ResultContainer>
             </Box>
         </TransitionsModal>
     );
 };
+
+const SearchInput = styled('input')(({ theme }) => ({
+    margin: '0.5em',
+    backgroundColor: 'white',
+    boxShadow: theme.affine.shadows.shadowSxDownLg,
+    padding: '16px 32px',
+    borderRadius: '10px',
+}));
+
+const ResultContainer = styled(MuiBox)(({ theme }) => ({
+    margin: '0.5em',
+    backgroundColor: 'white',
+    boxShadow: theme.affine.shadows.shadowSxDownLg,
+    padding: '16px 32px',
+    borderRadius: '10px',
+    transitionProperty: 'max-height',
+    transitionDuration: '300ms',
+    transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
+    transitionDelay: '0ms',
+    overflowX: 'hidden',
+    overflowY: 'hidden',
+}));
diff --git a/libs/components/layout/src/header/EditorBoardSwitcher/StatusIcon.tsx b/libs/components/layout/src/header/EditorBoardSwitcher/StatusIcon.tsx
index ada3a92f57..47003af1c2 100644
--- a/libs/components/layout/src/header/EditorBoardSwitcher/StatusIcon.tsx
+++ b/libs/components/layout/src/header/EditorBoardSwitcher/StatusIcon.tsx
@@ -20,7 +20,7 @@ const IconWrapper = styled('div')<Pick<StatusIconProps, 'mode'>>(
             width: '20px',
             height: '20px',
             borderRadius: '5px',
-            boxShadow: '0px 1px 10px rgba(152, 172, 189, 0.6)',
+            boxShadow: theme.affine.shadows.shadowSxDownLg,
             color: theme.affine.palette.primary,
             cursor: 'pointer',
             backgroundColor: theme.affine.palette.white,
diff --git a/libs/components/ui/src/cascader/Cascader.tsx b/libs/components/ui/src/cascader/Cascader.tsx
index 5ff6fe608d..5c8a02e3a9 100644
--- a/libs/components/ui/src/cascader/Cascader.tsx
+++ b/libs/components/ui/src/cascader/Cascader.tsx
@@ -133,7 +133,7 @@ export function Cascader(props: CascaderProps) {
 const MenuPaper = styled('div')(({ theme }) => ({
     fontFamily: 'PingFang SC',
     background: '#FFF',
-    boxShadow: '0px 1px 10px rgba(152, 172, 189, 0.6)',
+    boxShadow: theme.affine.shadows.shadowSxDownLg,
     borderRadius: '10px 0px 10px 10px',
     color: '#4C6275',
     fontWeight: '400',
diff --git a/libs/components/ui/src/theme/theme.ts b/libs/components/ui/src/theme/theme.ts
index a51bca8827..1e9f6f5436 100644
--- a/libs/components/ui/src/theme/theme.ts
+++ b/libs/components/ui/src/theme/theme.ts
@@ -225,7 +225,7 @@ export const Theme = {
     },
     shadows: {
         none: 'none',
-        shadowSxDownLg: '0px 1px 10px rgba(152, 172, 189, 0.6)',
+        shadowSxDownLg: '0px 1px 5px rgba(152, 172, 189, 0.2)',
     },
     border: ['none'],
     spacing: {