diff --git a/packages/frontend/component/src/components/pdf-viewer/index.tsx b/packages/frontend/component/src/components/pdf-viewer/index.tsx
new file mode 100644
index 0000000000000..edc511868a62c
--- /dev/null
+++ b/packages/frontend/component/src/components/pdf-viewer/index.tsx
@@ -0,0 +1,10 @@
+import type { ReactElement } from 'react';
+
+export const PDFViewer = (): ReactElement => {
+  return (
+    <>
+      <div>{'PDF Viewer'}</div>
+      <div>{'PDF ...'}</div>
+    </>
+  );
+};
diff --git a/packages/frontend/core/src/desktop/pages/workspace/attachment/index.tsx b/packages/frontend/core/src/desktop/pages/workspace/attachment/index.tsx
index eb3752f0e3060..b586df4586b5f 100644
--- a/packages/frontend/core/src/desktop/pages/workspace/attachment/index.tsx
+++ b/packages/frontend/core/src/desktop/pages/workspace/attachment/index.tsx
@@ -1,14 +1,15 @@
+import { PDFViewer } from '@affine/component/pdf-viewer';
 import type { ReactElement } from 'react';
 
-export const AttachmentViewer = (): ReactElement => {
+export const AttachmentPage = (): ReactElement => {
   return (
     <>
       <div>{'Attachment Viewer'}</div>
-      <div>{'Attachment Viewer'}</div>
+      <PDFViewer />
     </>
   );
 };
 
 export const Component = () => {
-  return <AttachmentViewer />;
+  return <AttachmentPage />;
 };