diff --git a/web/src/App.tsx b/web/src/App.tsx
index 97232b01..92a62f6e 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -35,7 +35,7 @@ const AppProvider: React.FC = React.memo((props) => {
     <BrowserRouter>
       <TcProvider>
         <AntdProvider getPopupContainer={getPopupContainer}>
-          <PortalHost>{props.children}</PortalHost>
+          {props.children}
         </AntdProvider>
       </TcProvider>
     </BrowserRouter>
diff --git a/web/src/routes/Invite/index.tsx b/web/src/routes/Invite/index.tsx
index 4f4cf82e..bb8e51c3 100644
--- a/web/src/routes/Invite/index.tsx
+++ b/web/src/routes/Invite/index.tsx
@@ -1,9 +1,10 @@
 import { Divider } from 'antd';
-import React, { useCallback } from 'react';
+import React from 'react';
 import { useParams } from 'react-router';
 import { InviteInfo } from './InviteInfo';
 import bgImage from '@assets/images/bg.jpg';
 import { JoinBtn } from './JoinBtn';
+import { PortalHost } from '@/components/Portal';
 
 /**
  * 邀请界面路由
@@ -12,18 +13,20 @@ export const InviteRoute: React.FC = React.memo(() => {
   const { inviteCode } = useParams<{ inviteCode: string }>();
 
   return (
-    <div
-      className="h-full w-full bg-gray-600 flex justify-center items-center bg-center bg-cover bg-no-repeat"
-      style={{ backgroundImage: `url(${bgImage})` }}
-    >
-      <div className="w-96 p-4 rounded-lg shadow-lg bg-black bg-opacity-60 text-center">
-        <InviteInfo inviteCode={inviteCode} />
+    <PortalHost>
+      <div
+        className="h-full w-full bg-gray-600 flex justify-center items-center bg-center bg-cover bg-no-repeat"
+        style={{ backgroundImage: `url(${bgImage})` }}
+      >
+        <div className="w-96 p-4 rounded-lg shadow-lg bg-black bg-opacity-60 text-center">
+          <InviteInfo inviteCode={inviteCode} />
 
-        <Divider />
+          <Divider />
 
-        <JoinBtn inviteCode={inviteCode} />
+          <JoinBtn inviteCode={inviteCode} />
+        </div>
       </div>
-    </div>
+    </PortalHost>
   );
 });
 InviteRoute.displayName = 'InviteRoute';
diff --git a/web/src/routes/Main/Provider.tsx b/web/src/routes/Main/Provider.tsx
index cf15d83a..077522f9 100644
--- a/web/src/routes/Main/Provider.tsx
+++ b/web/src/routes/Main/Provider.tsx
@@ -14,6 +14,7 @@ import _isNil from 'lodash/isNil';
 import { getUserJWT } from '../../utils/jwt-helper';
 import { useHistory } from 'react-router';
 import { SidebarContextProvider } from './SidebarContext';
+import { PortalHost } from '@/components/Portal';
 
 /**
  * 应用状态管理hooks
@@ -79,7 +80,9 @@ export const MainProvider: React.FC = React.memo((props) => {
 
   return (
     <ReduxProvider store={store}>
-      <SidebarContextProvider>{props.children}</SidebarContextProvider>
+      <SidebarContextProvider>
+        <PortalHost>{props.children}</PortalHost>
+      </SidebarContextProvider>
     </ReduxProvider>
   );
 });