diff --git a/src/app/dashboard/[subdomain]/editor/page.tsx b/src/app/dashboard/[subdomain]/editor/page.tsx
index c064ebbb..18b52d18 100644
--- a/src/app/dashboard/[subdomain]/editor/page.tsx
+++ b/src/app/dashboard/[subdomain]/editor/page.tsx
@@ -3,6 +3,7 @@
 import { useDebounceEffect } from "ahooks"
 import type { Root } from "mdast"
 import { nanoid } from "nanoid"
+import dynamic from "next/dynamic"
 import { useParams, useRouter, useSearchParams } from "next/navigation"
 import {
   ChangeEvent,
@@ -20,7 +21,6 @@ import type { EditorView } from "@codemirror/view"
 import { DateInput } from "@mantine/dates"
 import { useQueryClient } from "@tanstack/react-query"
 
-import { PageContent } from "~/components/common/PageContent"
 import { DashboardMain } from "~/components/dashboard/DashboardMain"
 import { OptionsButton } from "~/components/dashboard/OptionsButton"
 import { PublishButton } from "~/components/dashboard/PublishButton"
@@ -65,6 +65,13 @@ import {
 } from "~/queries/page"
 import { useGetSite } from "~/queries/site"
 
+const DynamicPageContent = dynamic(
+  () => import("~/components/common/PageContent"),
+  {
+    ssr: false,
+  },
+)
+
 export default function SubdomainEditor() {
   const router = useRouter()
   const queryClient = useQueryClient()
@@ -655,7 +662,7 @@ export default function SubdomainEditor() {
                     </div>
                   )}
                   {isRendering && (
-                    <PageContent
+                    <DynamicPageContent
                       className="bg-white px-5 overflow-scroll pb-[200px] h-full flex-1"
                       parsedContent={parsedContent}
                       inputRef={previewRef}
diff --git a/src/app/site/[site]/preview/[previewId]/page.tsx b/src/app/site/[site]/preview/[previewId]/page.tsx
index dc45fc59..bb6703c8 100644
--- a/src/app/site/[site]/preview/[previewId]/page.tsx
+++ b/src/app/site/[site]/preview/[previewId]/page.tsx
@@ -1,10 +1,18 @@
 "use client"
 
-import { PageContent } from "~/components/common/PageContent"
+import dynamic from "next/dynamic"
+
 import { useTranslation } from "~/lib/i18n/client"
 import { useGetPage } from "~/queries/page"
 import { useGetSite } from "~/queries/site"
 
+const DynamicPageContent = dynamic(
+  () => import("~/components/common/PageContent"),
+  {
+    ssr: false,
+  },
+)
+
 export default function SitePreviewPage({
   params,
 }: {
@@ -46,11 +54,11 @@ export default function SitePreviewPage({
             </h2>
           )}
         </div>
-        <PageContent
+        <DynamicPageContent
           className="mt-10"
           content={page.data?.metadata?.content?.content}
           toc={true}
-        ></PageContent>
+        ></DynamicPageContent>
       </article>
     </>
   )
diff --git a/src/components/common/PageContent.tsx b/src/components/common/PageContent.tsx
index e73b0188..a303054f 100644
--- a/src/components/common/PageContent.tsx
+++ b/src/components/common/PageContent.tsx
@@ -57,3 +57,5 @@ export const PageContent = ({
     </PageContentContainer>
   )
 }
+
+export default PageContent
diff --git a/src/components/dashboard/ImportPreview.tsx b/src/components/dashboard/ImportPreview.tsx
index 0b9638c7..738f438c 100644
--- a/src/components/dashboard/ImportPreview.tsx
+++ b/src/components/dashboard/ImportPreview.tsx
@@ -1,10 +1,13 @@
 import type { NoteMetadata } from "crossbell"
+import dynamic from "next/dynamic"
 import { useState } from "react"
 
 import { useDate } from "~/hooks/useDate"
 import { useTranslation } from "~/lib/i18n/client"
 
-import { PageContent } from "../common/PageContent"
+const DynamicPageContent = dynamic(() => import("../common/PageContent"), {
+  ssr: false,
+})
 
 export const ImportPreview = ({ note }: { note: NoteMetadata }) => {
   const date = useDate()
@@ -49,7 +52,10 @@ export const ImportPreview = ({ note }: { note: NoteMetadata }) => {
         >
           {t("Show more")}
         </div>
-        <PageContent className="mt-4" content={note?.content}></PageContent>
+        <DynamicPageContent
+          className="mt-4"
+          content={note?.content}
+        ></DynamicPageContent>
       </div>
     </article>
   )
diff --git a/src/components/site/PostFooter.tsx b/src/components/site/PostFooter.tsx
index 8020bd64..e779a86f 100644
--- a/src/components/site/PostFooter.tsx
+++ b/src/components/site/PostFooter.tsx
@@ -19,6 +19,7 @@ const DynamicComment = dynamic(() => import("~/components/common/Comment"), {
       <p>Loading comments...</p>
     </div>
   ),
+  ssr: false,
 })
 
 export const usePostFooterInView = () => {
diff --git a/src/lib/read-files.ts b/src/lib/read-files.ts
index c8e6a088..3913a5f3 100644
--- a/src/lib/read-files.ts
+++ b/src/lib/read-files.ts
@@ -1,5 +1,4 @@
 import { getDefaultSlug } from "~/lib/default-slug"
-import { renderPageContent } from "~/markdown"
 
 const makeArray = (value: any) => {
   if (Array.isArray(value)) {
@@ -11,8 +10,9 @@ const makeArray = (value: any) => {
   return [value]
 }
 
-export const readFiles = (files: FileList) => {
+export const readFiles = async (files: FileList) => {
   const promises = []
+  const { renderPageContent } = await import("~/markdown")
   for (let i = 0; i < files.length; i++) {
     const file = files[i]
     promises.push(