diff --git a/src/app.tsx b/src/app.tsx
index 0766a86a..de16ba25 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -152,7 +152,6 @@ export const layout: RunTimeLayoutConfig = ({
       // if (initialState?.loading) return <PageLoading />;
       return (
         <>
-          <OfflineBanner />
           {children}
           <SettingDrawer
             disableUrlParams
@@ -190,5 +189,10 @@ export const request: RequestConfig = {
 };
 
 export function rootContainer(container: React.ReactNode) {
-  return <ErrorBoundary>{container}</ErrorBoundary>;
+  return (
+    <>
+      <OfflineBanner />
+      <ErrorBoundary>{container}</ErrorBoundary>
+    </>
+  );
 }
diff --git a/src/components/ErrorBoundary/index.tsx b/src/components/ErrorBoundary/index.tsx
index 0c5707c2..6ead3c89 100644
--- a/src/components/ErrorBoundary/index.tsx
+++ b/src/components/ErrorBoundary/index.tsx
@@ -1,5 +1,5 @@
 import { getIntl } from '@umijs/max';
-import { Button, Card, Result } from 'antd';
+import { Button, Layout, Result } from 'antd';
 import React from 'react';
 
 function isChunkLoadError(error: Error): boolean {
@@ -27,7 +27,7 @@ function renderErrorFallback(
   const isChunkError = isChunkLoadError(error);
 
   return (
-    <Card variant="borderless">
+    <Layout.Content style={{ padding: 24 }}>
       <Result
         status="error"
         title={intl.formatMessage({
@@ -60,7 +60,7 @@ function renderErrorFallback(
           </Button>,
         ]}
       />
-    </Card>
+    </Layout.Content>
   );
 }
 
diff --git a/src/components/OfflineBanner/index.tsx b/src/components/OfflineBanner/index.tsx
index 85aca1c9..c9e7b67d 100644
--- a/src/components/OfflineBanner/index.tsx
+++ b/src/components/OfflineBanner/index.tsx
@@ -23,9 +23,8 @@ const OfflineBanner: React.FC = () => {
   return (
     <Alert
       type="warning"
-      showIcon
+      banner
       closable={false}
-      style={{ marginBottom: 16 }}
       message={getIntl().formatMessage({
         id: 'app.network.offline',
         defaultMessage: