diff --git a/packages/app/src/components/edgeless-toolbar/index.tsx b/packages/app/src/components/edgeless-toolbar/index.tsx
index 33784928b9..e261899860 100644
--- a/packages/app/src/components/edgeless-toolbar/index.tsx
+++ b/packages/app/src/components/edgeless-toolbar/index.tsx
@@ -14,8 +14,8 @@ import {
   UndoIcon,
   RedoIcon,
 } from './Icons';
+import { MuiSlide } from '@/ui/mui';
 import { Tooltip } from '@/ui/tooltip';
-import Slide from '@mui/material/Slide';
 import useCurrentPageMeta from '@/hooks/use-current-page-meta';
 import { useAppState } from '@/providers/app-state-provider';
 import useHistoryUpdated from '@/hooks/use-history-update';
@@ -127,7 +127,7 @@ export const EdgelessToolbar = () => {
   const { mode } = useCurrentPageMeta() || {};
 
   return (
-    <Slide
+    <MuiSlide
       direction="right"
       in={mode === 'edgeless'}
       mountOnEnter
@@ -155,7 +155,7 @@ export const EdgelessToolbar = () => {
         </StyledToolbarWrapper>
         <UndoRedo />
       </StyledEdgelessToolbar>
-    </Slide>
+    </MuiSlide>
   );
 };
 
diff --git a/packages/app/src/components/header/Header.tsx b/packages/app/src/components/header/Header.tsx
index a8a50bfefe..1226f91561 100644
--- a/packages/app/src/components/header/Header.tsx
+++ b/packages/app/src/components/header/Header.tsx
@@ -6,7 +6,7 @@ import {
   StyledBrowserWarning,
   StyledCloseButton,
 } from './styles';
-import CloseIcon from '@mui/icons-material/Close';
+import { CloseIcon } from '@blocksuite/icons';
 import { useWarningMessage, shouldShowWarning } from './utils';
 import EditorOptionMenu from './header-right-items/EditorOptionMenu';
 import TrashButtonGroup from './header-right-items/TrashButtonGroup';
diff --git a/packages/app/src/components/help-island/index.tsx b/packages/app/src/components/help-island/index.tsx
index d6aad0c891..9fb883481d 100644
--- a/packages/app/src/components/help-island/index.tsx
+++ b/packages/app/src/components/help-island/index.tsx
@@ -6,7 +6,7 @@ import {
   StyledTransformIcon,
 } from './style';
 import { CloseIcon, ContactIcon, HelpIcon, KeyboardIcon } from './Icons';
-import Grow from '@mui/material/Grow';
+import { MuiGrow } from '@/ui/mui';
 import { Tooltip } from '@/ui/tooltip';
 import { useTranslation } from '@affine/i18n';
 import { useModal } from '@/providers/GlobalModalProvider';
@@ -35,7 +35,7 @@ export const HelpIsland = ({
           setShowContent(false);
         }}
       >
-        <Grow in={showContent}>
+        <MuiGrow in={showContent}>
           <StyledIslandWrapper>
             {showList.includes('contact') && (
               <Tooltip content={t('Contact Us')} placement="left-end">
@@ -66,7 +66,7 @@ export const HelpIsland = ({
               </Tooltip>
             )}
           </StyledIslandWrapper>
-        </Grow>
+        </MuiGrow>
 
         <div style={{ position: 'relative' }}>
           <StyledIconWrapper
diff --git a/packages/app/src/components/shortcuts-modal/index.tsx b/packages/app/src/components/shortcuts-modal/index.tsx
index 280adeb7e6..08416e3126 100644
--- a/packages/app/src/components/shortcuts-modal/index.tsx
+++ b/packages/app/src/components/shortcuts-modal/index.tsx
@@ -13,7 +13,7 @@ import {
   useWindowsKeyboardShortcuts,
   useWinMarkdownShortcuts,
 } from '@/components/shortcuts-modal/config';
-import Slide from '@mui/material/Slide';
+import { MuiSlide } from '@/ui/mui';
 import { ModalCloseButton } from '@/ui/modal';
 import { getUaHelper } from '@/utils';
 import { useTranslation } from '@affine/i18n';
@@ -40,7 +40,7 @@ export const ShortcutsModal = ({ open, onClose }: ModalProps) => {
     : windowsKeyboardShortcuts;
 
   return createPortal(
-    <Slide direction="left" in={open} mountOnEnter unmountOnExit>
+    <MuiSlide direction="left" in={open} mountOnEnter unmountOnExit>
       <StyledShortcutsModal data-testid="shortcuts-modal">
         <>
           <StyledModalHeader>
@@ -81,7 +81,7 @@ export const ShortcutsModal = ({ open, onClose }: ModalProps) => {
           })}
         </>
       </StyledShortcutsModal>
-    </Slide>,
+    </MuiSlide>,
     document.body
   );
 };
diff --git a/packages/app/src/components/workspace-setting/general/style.ts b/packages/app/src/components/workspace-setting/general/style.ts
index d2e8d7b4d2..e52519ad5d 100644
--- a/packages/app/src/components/workspace-setting/general/style.ts
+++ b/packages/app/src/components/workspace-setting/general/style.ts
@@ -1,5 +1,5 @@
 import { displayFlex, styled } from '@/styles';
-import MuiAvatar from '@mui/material/Avatar';
+import { MuiAvatar } from '@/ui/mui';
 import IconButton from '@/ui/button/IconButton';
 import Input from '@/ui/input';
 
diff --git a/packages/app/src/components/workspace-setting/member/InviteMemberModal.tsx b/packages/app/src/components/workspace-setting/member/InviteMemberModal.tsx
index 7bd542efb6..fb93b53197 100644
--- a/packages/app/src/components/workspace-setting/member/InviteMemberModal.tsx
+++ b/packages/app/src/components/workspace-setting/member/InviteMemberModal.tsx
@@ -4,7 +4,7 @@ import { Modal, ModalWrapper, ModalCloseButton } from '@/ui/modal';
 import { Button } from '@/ui/button';
 import Input from '@/ui/input';
 import { useState } from 'react';
-import { Avatar } from '@mui/material';
+import { MuiAvatar } from '@/ui/mui';
 import useMembers from '@/hooks/use-members';
 import { User } from '@affine/datacenter';
 import { useTranslation } from '@affine/i18n';
@@ -102,7 +102,7 @@ export const InviteMemberModal = ({
                   ) : (
                     <Member>
                       {userData?.avatar ? (
-                        <Avatar src={userData?.avatar}></Avatar>
+                        <MuiAvatar src={userData?.avatar}></MuiAvatar>
                       ) : (
                         <MemberIcon>
                           <EmailIcon></EmailIcon>
diff --git a/packages/app/src/components/workspace-setting/member/style.ts b/packages/app/src/components/workspace-setting/member/style.ts
index ce18dcb0ad..b7b67fe144 100644
--- a/packages/app/src/components/workspace-setting/member/style.ts
+++ b/packages/app/src/components/workspace-setting/member/style.ts
@@ -1,5 +1,5 @@
 import { styled } from '@/styles';
-import MuiAvatar from '@mui/material/Avatar';
+import { MuiAvatar } from '@/ui/mui';
 
 export const StyledMemberTitleContainer = styled('li')(() => {
   return {
diff --git a/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceItem/styles.ts b/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceItem/styles.ts
index add82c90c7..d56661de3a 100644
--- a/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceItem/styles.ts
+++ b/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceItem/styles.ts
@@ -1,4 +1,4 @@
-import MuiAvatar from '@mui/material/Avatar';
+import { MuiAvatar } from '@/ui/mui';
 import { styled } from '@/styles';
 
 export const WorkspaceItemWrapper = styled('div')(({ theme }) => ({
diff --git a/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/styles.ts b/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/styles.ts
index e9c231c69e..e700d8cd81 100644
--- a/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/styles.ts
+++ b/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/styles.ts
@@ -1,4 +1,4 @@
-import MuiAvatar from '@mui/material/Avatar';
+import { MuiAvatar } from '@/ui/mui';
 import { styled } from '@/styles';
 import { StyledPopperContainer } from '@/ui/shared/Container';
 
diff --git a/packages/app/src/components/workspace-slider-bar/index.tsx b/packages/app/src/components/workspace-slider-bar/index.tsx
index ce6f8d43d3..b0f24c7ada 100644
--- a/packages/app/src/components/workspace-slider-bar/index.tsx
+++ b/packages/app/src/components/workspace-slider-bar/index.tsx
@@ -11,7 +11,6 @@ import {
   StyledSubListItem,
 } from './style';
 import { Arrow } from './icons';
-import Collapse from '@mui/material/Collapse';
 import {
   ArrowDownIcon,
   SearchIcon,
@@ -23,6 +22,7 @@ import {
   SettingsIcon,
 } from '@blocksuite/icons';
 import Link from 'next/link';
+import { MuiCollapse } from '@/ui/mui';
 import { Tooltip } from '@/ui/tooltip';
 import { useModal } from '@/providers/GlobalModalProvider';
 import { useAppState } from '@/providers/app-state-provider';
@@ -39,7 +39,7 @@ const FavoriteList = ({ showList }: { showList: boolean }) => {
   const { t } = useTranslation();
   const favoriteList = pageList.filter(p => p.favorite && !p.trash);
   return (
-    <Collapse in={showList}>
+    <MuiCollapse in={showList}>
       {favoriteList.map((pageMeta, index) => {
         const active = router.query.pageId === pageMeta.id;
         return (
@@ -61,7 +61,7 @@ const FavoriteList = ({ showList }: { showList: boolean }) => {
       {favoriteList.length === 0 && (
         <StyledSubListItem disable={true}>{t('No item')}</StyledSubListItem>
       )}
-    </Collapse>
+    </MuiCollapse>
   );
 };
 export const WorkSpaceSliderBar = () => {
diff --git a/packages/app/src/pages/invite/[invite_code].tsx b/packages/app/src/pages/invite/[invite_code].tsx
index 872b3f927a..ff86784661 100644
--- a/packages/app/src/pages/invite/[invite_code].tsx
+++ b/packages/app/src/pages/invite/[invite_code].tsx
@@ -1,7 +1,6 @@
 import { useWorkspaceHelper } from '@/hooks/use-workspace-helper';
 import { styled } from '@/styles';
 import { Empty } from '@/ui/empty';
-// import { Avatar } from '@mui/material';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 
diff --git a/packages/app/src/ui/mui.ts b/packages/app/src/ui/mui.ts
new file mode 100644
index 0000000000..1d0a7f0b57
--- /dev/null
+++ b/packages/app/src/ui/mui.ts
@@ -0,0 +1,7 @@
+import MuiBreadcrumbs from '@mui/material/Breadcrumbs';
+import MuiCollapse from '@mui/material/Collapse';
+import MuiSlide from '@mui/material/Slide';
+import MuiAvatar from '@mui/material/Avatar';
+import MuiGrow from '@mui/material/Grow';
+
+export { MuiBreadcrumbs, MuiCollapse, MuiSlide, MuiAvatar, MuiGrow };