diff --git a/src/components/ErrorBoundary/index.tsx b/src/components/ErrorBoundary/index.tsx
index 59a91e5a..0c5707c2 100644
--- a/src/components/ErrorBoundary/index.tsx
+++ b/src/components/ErrorBoundary/index.tsx
@@ -1,5 +1,5 @@
 import { getIntl } from '@umijs/max';
-import { Button, Result } from 'antd';
+import { Button, Card, Result } from 'antd';
 import React from 'react';
 
 function isChunkLoadError(error: Error): boolean {
@@ -27,38 +27,40 @@ function renderErrorFallback(
   const isChunkError = isChunkLoadError(error);
 
   return (
-    <Result
-      status="error"
-      title={intl.formatMessage({
-        id: isChunkError ? 'app.error.chunk.title' : 'app.error.render.title',
-        defaultMessage: isChunkError
-          ? 'Failed to load page'
-          : 'Something went wrong',
-      })}
-      subTitle={intl.formatMessage({
-        id: getSubTitleId(isChunkError, isOffline),
-        defaultMessage:
-          isChunkError && isOffline
-            ? 'Your network connection has been lost. Please check your connection and refresh.'
-            : isChunkError
-              ? 'Page resources failed to load. Please refresh and try again.'
-              : 'Sorry, an error occurred on this page. Please refresh or go back to the home page.',
-      })}
-      extra={[
-        <Button type="primary" key="retry" onClick={onRetry}>
-          {intl.formatMessage({
-            id: 'app.error.retry',
-            defaultMessage: 'Refresh',
-          })}
-        </Button>,
-        <Button href="/" key="home">
-          {intl.formatMessage({
-            id: 'app.error.home',
-            defaultMessage: 'Back Home',
-          })}
-        </Button>,
-      ]}
-    />
+    <Card variant="borderless">
+      <Result
+        status="error"
+        title={intl.formatMessage({
+          id: isChunkError ? 'app.error.chunk.title' : 'app.error.render.title',
+          defaultMessage: isChunkError
+            ? 'Failed to load page'
+            : 'Something went wrong',
+        })}
+        subTitle={intl.formatMessage({
+          id: getSubTitleId(isChunkError, isOffline),
+          defaultMessage:
+            isChunkError && isOffline
+              ? 'Your network connection has been lost. Please check your connection and refresh.'
+              : isChunkError
+                ? 'Page resources failed to load. Please refresh and try again.'
+                : 'Sorry, an error occurred on this page. Please refresh or go back to the home page.',
+        })}
+        extra={[
+          <Button type="primary" key="retry" onClick={onRetry}>
+            {intl.formatMessage({
+              id: 'app.error.retry',
+              defaultMessage: 'Refresh',
+            })}
+          </Button>,
+          <Button href="/" key="home">
+            {intl.formatMessage({
+              id: 'app.error.home',
+              defaultMessage: 'Back Home',
+            })}
+          </Button>,
+        ]}
+      />
+    </Card>
   );
 }
 
diff --git a/src/components/OfflineBanner/index.tsx b/src/components/OfflineBanner/index.tsx
index c9e7b67d..85aca1c9 100644
--- a/src/components/OfflineBanner/index.tsx
+++ b/src/components/OfflineBanner/index.tsx
@@ -23,8 +23,9 @@ const OfflineBanner: React.FC = () => {
   return (
     <Alert
       type="warning"
-      banner
+      showIcon
       closable={false}
+      style={{ marginBottom: 16 }}
       message={getIntl().formatMessage({
         id: 'app.network.offline',
         defaultMessage: