diff --git a/packages/app/src/components/header/header.tsx b/packages/app/src/components/header/header.tsx
index d846cb841a..40103af3d3 100644
--- a/packages/app/src/components/header/header.tsx
+++ b/packages/app/src/components/header/header.tsx
@@ -26,7 +26,7 @@ import { Menu, MenuItem } from '@/ui/menu';
 import { useRouter } from 'next/router';
 import { useConfirm } from '@/providers/confirm-provider';
 import { SyncIcon } from './sync-icon';
-import { toast } from '@/components/toast';
+import { toast } from '@/ui/toast';
 import useCurrentPageMeta from '@/hooks/use-current-page-meta';
 import { usePageHelper } from '@/hooks/use-page-helper';
 const PopoverContent = () => {
diff --git a/packages/app/src/components/page-list/index.tsx b/packages/app/src/components/page-list/index.tsx
index 4baed96ebd..b4c57c2470 100644
--- a/packages/app/src/components/page-list/index.tsx
+++ b/packages/app/src/components/page-list/index.tsx
@@ -21,7 +21,7 @@ import { IconButton } from '@/ui/button';
 import { Tooltip } from '@/ui/tooltip';
 import { useRouter } from 'next/router';
 import { useAppState } from '@/providers/app-state-provider/context';
-import { toast } from '@/components/toast';
+import { toast } from '@/ui/toast';
 import { usePageHelper } from '@/hooks/use-page-helper';
 
 const FavoriteTag = ({
diff --git a/packages/app/src/components/page-list/operation-cell.tsx b/packages/app/src/components/page-list/operation-cell.tsx
index bfa562e5ae..afe0b249d2 100644
--- a/packages/app/src/components/page-list/operation-cell.tsx
+++ b/packages/app/src/components/page-list/operation-cell.tsx
@@ -12,7 +12,7 @@ import {
   OpenInNewIcon,
   TrashIcon,
 } from '@blocksuite/icons';
-import { toast } from '@/components/toast';
+import { toast } from '@/ui/toast';
 import { usePageHelper } from '@/hooks/use-page-helper';
 
 export const OperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
diff --git a/packages/app/src/pages/affine.tsx b/packages/app/src/pages/affine.tsx
index 89609d3ada..fed40e1f36 100644
--- a/packages/app/src/pages/affine.tsx
+++ b/packages/app/src/pages/affine.tsx
@@ -5,7 +5,7 @@ import Modal from '@/ui/modal';
 import { useState } from 'react';
 import { Button } from '@/ui/button';
 import { FavouritedIcon } from '@blocksuite/icons';
-import { toast } from '@/components/toast';
+import { toast } from '@/ui/toast';
 export const StyledHeader = styled('div')({
   height: '60px',
   width: '100vw',
diff --git a/packages/app/src/providers/editor-provider/hooks/useEditorHandler.ts b/packages/app/src/providers/editor-provider/hooks/useEditorHandler.ts
index ffe4c6a8da..a209aebd0f 100644
--- a/packages/app/src/providers/editor-provider/hooks/useEditorHandler.ts
+++ b/packages/app/src/providers/editor-provider/hooks/useEditorHandler.ts
@@ -3,7 +3,7 @@ import { Workspace, Page } from '@blocksuite/store';
 import { useRouter } from 'next/router';
 import { EditorHandlers, PageMeta } from '../interface';
 import { EditorContainer } from '@blocksuite/editor';
-import toast from '@/components/toast';
+import toast from '@/ui/toast';
 export const useEditorHandler = ({
   editor,
   workspace,
diff --git a/packages/app/src/ui/toast/index.ts b/packages/app/src/ui/toast/index.ts
new file mode 100644
index 0000000000..7ff6d415e7
--- /dev/null
+++ b/packages/app/src/ui/toast/index.ts
@@ -0,0 +1 @@
+export * from './toast';
diff --git a/packages/app/src/components/toast.ts b/packages/app/src/ui/toast/toast.ts
similarity index 100%
rename from packages/app/src/components/toast.ts
rename to packages/app/src/ui/toast/toast.ts