diff --git a/apps/web/src/components/quick-search/index.tsx b/apps/web/src/components/quick-search/index.tsx
index 35f76f516e..d8f9400369 100644
--- a/apps/web/src/components/quick-search/index.tsx
+++ b/apps/web/src/components/quick-search/index.tsx
@@ -24,6 +24,8 @@ type TransitionsModalProps = {
 const isMac = () => {
   return getUaHelper().isMacOs;
 };
+
+// fixme(himself65): support ssr
 export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => {
   const router = useRouter();
   const [query, setQuery] = useState('');
diff --git a/apps/web/src/components/shortcuts-modal/index.tsx b/apps/web/src/components/shortcuts-modal/index.tsx
index 8a0d18d472..87fa4c118b 100644
--- a/apps/web/src/components/shortcuts-modal/index.tsx
+++ b/apps/web/src/components/shortcuts-modal/index.tsx
@@ -31,6 +31,7 @@ const isMac = () => {
   return getUaHelper().isMacOs;
 };
 
+// fixme(himself65): support ssr
 export const ShortcutsModal = ({ open, onClose }: ModalProps) => {
   const { t } = useTranslation();
   const macMarkdownShortcuts = useMacMarkdownShortcuts();
diff --git a/apps/web/src/pages/_app.tsx b/apps/web/src/pages/_app.tsx
index 0b09b8495e..721f1f2102 100644
--- a/apps/web/src/pages/_app.tsx
+++ b/apps/web/src/pages/_app.tsx
@@ -9,7 +9,6 @@ import { useTranslation } from '@affine/i18n';
 import { Logger } from '@toeverything/pathfinder-logger';
 import type { NextPage } from 'next';
 import type { AppProps } from 'next/app';
-import dynamic from 'next/dynamic';
 import Head from 'next/head';
 // import AppStateProvider2 from '@/providers/app-state-provider2/provider';
 import { useRouter } from 'next/router';
@@ -22,14 +21,11 @@ import { MessageCenterHandler } from '@/components/message-center-handler';
 import ProviderComposer from '@/components/provider-composer';
 import { AppStateProvider } from '@/providers/app-state-provider';
 import ConfirmProvider from '@/providers/ConfirmProvider';
+import { ThemeProvider } from '@/providers/ThemeProvider';
 import { GlobalAppProvider } from '@/store/app';
 import { DataCenterPreloader } from '@/store/app/datacenter';
 import { ModalProvider } from '@/store/globalModal';
 
-const ThemeProvider = dynamic(() => import('@/providers/ThemeProvider'), {
-  ssr: false,
-});
-
 export type NextPageWithLayout<P = Record<string, unknown>, IP = P> = NextPage<
   P,
   IP
diff --git a/apps/web/src/store/globalModal/index.tsx b/apps/web/src/store/globalModal/index.tsx
index c718bbffd1..69db466350 100644
--- a/apps/web/src/store/globalModal/index.tsx
+++ b/apps/web/src/store/globalModal/index.tsx
@@ -1,3 +1,4 @@
+import dynamic from 'next/dynamic';
 import { useRouter } from 'next/router';
 import type React from 'react';
 import {
@@ -15,8 +16,14 @@ import ContactModal from '@/components/contact-modal';
 import { EnableWorkspaceModal } from '@/components/enable-workspace-modal';
 import ImportModal from '@/components/import';
 import { LoginModal } from '@/components/login-modal';
-import QuickSearch from '@/components/quick-search';
-import ShortcutsModal from '@/components/shortcuts-modal';
+
+const ShortcutsModal = dynamic(() => import('@/components/shortcuts-modal'), {
+  ssr: false,
+});
+
+const QuickSearch = dynamic(() => import('@/components/quick-search'), {
+  ssr: false,
+});
 
 export type ModalState = {
   contact: boolean;