diff --git a/web/src/components/PageCard.tsx b/web/src/components/PageCard.tsx
new file mode 100644
index 0000000..43dd30e
--- /dev/null
+++ b/web/src/components/PageCard.tsx
@@ -0,0 +1,8 @@
+import { Card, type CardProps } from 'antd';
+import { memo } from 'react';
+
+const PageCard = memo((props: CardProps) => {
+    return <Card styles={{ body: { overflowY: 'auto', height: 'calc(100vh - 145px)' } }} {...props} />;
+});
+
+export default PageCard;
\ No newline at end of file
diff --git a/web/src/pages/AdaptersPage.tsx b/web/src/pages/AdaptersPage.tsx
index e99d080..9e670a3 100644
--- a/web/src/pages/AdaptersPage.tsx
+++ b/web/src/pages/AdaptersPage.tsx
@@ -1,5 +1,6 @@
 import { memo, useState, useEffect, useCallback } from 'react';
-import { Table, Button, Space, Drawer, Form, Input, Switch, message, Typography, Popconfirm, Select, Card } from 'antd';
+import { Table, Button, Space, Drawer, Form, Input, Switch, message, Typography, Popconfirm, Select } from 'antd';
+import PageCard from '../components/PageCard';
 import { adaptersApi } from '../api/client';
 
 interface AdapterItem {
@@ -207,9 +208,8 @@ const AdaptersPage = memo(function AdaptersPage() {
   }
 
   return (
-    <Card
+    <PageCard
       title="存储适配器"
-      style={{ margin: 0 }}
       extra={
         <Space>
           <Button onClick={fetchList} loading={loading}>刷新</Button>
@@ -274,7 +274,7 @@ const AdaptersPage = memo(function AdaptersPage() {
           {renderConfigFields()}
         </Form>
       </Drawer>
-    </Card>
+    </PageCard>
   );
 });
 
diff --git a/web/src/pages/LogsPage.tsx b/web/src/pages/LogsPage.tsx
index a4eec67..1b6b834 100644
--- a/web/src/pages/LogsPage.tsx
+++ b/web/src/pages/LogsPage.tsx
@@ -1,5 +1,6 @@
 import { memo, useState, useEffect, useCallback } from 'react';
-import { Table, Card, message, Tag, Input, Select, Button, Space, Modal, DatePicker } from 'antd';
+import { Table, message, Tag, Input, Select, Button, Space, Modal, DatePicker } from 'antd';
+import PageCard from '../components/PageCard';
 import { logsApi, type LogItem, type PaginatedLogs } from '../api/logs';
 import { format, formatISO } from 'date-fns';
 
@@ -87,9 +88,8 @@ const LogsPage = memo(function LogsPage() {
   ];
 
   return (
-    <Card
+    <PageCard
       title="系统日志"
-      style={{ margin: 0 }}
       extra={
         <Space>
           <RangePicker
@@ -148,7 +148,7 @@ const LogsPage = memo(function LogsPage() {
           </pre>
         )}
       </Modal>
-    </Card>
+    </PageCard>
   );
 });
 
diff --git a/web/src/pages/SharePage.tsx b/web/src/pages/SharePage.tsx
index 2b0629c..6ccd1a0 100644
--- a/web/src/pages/SharePage.tsx
+++ b/web/src/pages/SharePage.tsx
@@ -1,5 +1,6 @@
 import { memo, useState, useEffect, useCallback } from 'react';
-import { Table, Button, Space, message, Popconfirm, Card, Tag, Tooltip } from 'antd';
+import { Table, Button, Space, message, Popconfirm, Tag, Tooltip } from 'antd';
+import PageCard from '../components/PageCard';
 import { shareApi, type ShareInfo } from '../api/share';
 import { format, parseISO } from 'date-fns';
 import { LinkOutlined, CopyOutlined, DeleteOutlined } from '@ant-design/icons';
@@ -92,9 +93,8 @@ const SharePage = memo(function SharePage() {
   ];
 
   return (
-    <Card
+    <PageCard
       title="我的分享"
-      style={{ margin: 0 }}
       extra={<Button onClick={fetchList} loading={loading}>刷新</Button>}
     >
       <Table
@@ -104,7 +104,7 @@ const SharePage = memo(function SharePage() {
         loading={loading}
         pagination={false}
       />
-    </Card>
+    </PageCard>
   );
 });
 
diff --git a/web/src/pages/SystemSettingsPage/BackupPage.tsx b/web/src/pages/SystemSettingsPage/BackupPage.tsx
index 0b1d2e0..b4aeb85 100644
--- a/web/src/pages/SystemSettingsPage/BackupPage.tsx
+++ b/web/src/pages/SystemSettingsPage/BackupPage.tsx
@@ -1,5 +1,6 @@
 import { memo, useState } from 'react';
-import { Card, Button, Typography, Upload, message, Modal } from 'antd';
+import { Button, Typography, Upload, message, Modal } from 'antd';
+import PageCard from '../../components/PageCard';
 import { UploadOutlined, DownloadOutlined } from '@ant-design/icons';
 import { backupApi } from '../../api/backup';
 
@@ -49,13 +50,10 @@ const BackupPage = memo(function BackupPage() {
   };
 
   return (
-    <Card>
-      <Title level={4}>备份与恢复</Title>
-      <Paragraph>
-        在这里，您可以导出整个站点的数据作为备份，或从备份文件中恢复。
-      </Paragraph>
+    <PageCard title="备份和恢复">
+
       <div style={{ display: 'flex', gap: '16px' }}>
-        <Card title="导出" style={{ flex: 1 }}>
+        <PageCard title="导出" style={{ flex: 1 }}>
           <Paragraph>
             点击下面的按钮将所有数据（包括存储、用户、自动化任务和分享）导出为一个 JSON 文件。
             <Text strong>请妥善保管您的备份文件。</Text>
@@ -67,8 +65,8 @@ const BackupPage = memo(function BackupPage() {
           >
             导出备份
           </Button>
-        </Card>
-        <Card title="恢复" style={{ flex: 1 }}>
+        </PageCard>
+        <PageCard title="恢复" style={{ flex: 1 }}>
           <Paragraph>
             从之前导出的JSON文件恢复数据。
             <Text strong type="danger">警告：此操作将清除并覆盖现有数据。</Text>
@@ -81,9 +79,9 @@ const BackupPage = memo(function BackupPage() {
               选择文件并恢复
             </Button>
           </Upload>
-        </Card>
+        </PageCard>
       </div>
-    </Card>
+    </PageCard>
   );
 });
 
diff --git a/web/src/pages/SystemSettingsPage/SystemSettingsPage.tsx b/web/src/pages/SystemSettingsPage/SystemSettingsPage.tsx
index 829f17a..e1842a5 100644
--- a/web/src/pages/SystemSettingsPage/SystemSettingsPage.tsx
+++ b/web/src/pages/SystemSettingsPage/SystemSettingsPage.tsx
@@ -1,5 +1,6 @@
-import { Card, Form, Input, Button, message, Tabs, Space } from 'antd';
+import { Form, Input, Button, message, Tabs, Space } from 'antd';
 import { useEffect, useState } from 'react';
+import PageCard from '../../components/PageCard';
 import { getAllConfig, setConfig } from '../../api/config';
 import { API_BASE_URL } from '../../api/client';
 import { AppstoreOutlined, RobotOutlined } from '@ant-design/icons';
@@ -42,11 +43,11 @@ export default function SystemSettingsPage() {
 
   // 加载中时不渲染表单
   if (!config) {
-    return <Card title='系统设置'><div>加载中...</div></Card>;
+    return <PageCard title='系统设置'><div>加载中...</div></PageCard>;
   }
 
   return (
-    <Card
+    <PageCard
     title='系统设置'
     >
       <Space direction="vertical" style={{ width: '100%' }} size={32}>
@@ -121,6 +122,6 @@ export default function SystemSettingsPage() {
           ]}
         />
       </Space>
-    </Card>
+    </PageCard>
   );
 }
diff --git a/web/src/pages/TasksPage.tsx b/web/src/pages/TasksPage.tsx
index 9b339f4..1cb9a45 100644
--- a/web/src/pages/TasksPage.tsx
+++ b/web/src/pages/TasksPage.tsx
@@ -1,5 +1,6 @@
 import { memo, useState, useEffect, useCallback } from 'react';
-import { Table, Button, Space, Drawer, Form, Input, Switch, message, Typography, Popconfirm, Select, Card } from 'antd';
+import { Table, Button, Space, Drawer, Form, Input, Switch, message, Typography, Popconfirm, Select } from 'antd';
+import PageCard from '../components/PageCard';
 import { tasksApi, type AutomationTask } from '../api/tasks';
 import { processorsApi, type ProcessorTypeMeta } from '../api/processors';
 import { ProcessorConfigForm } from '../components/ProcessorConfigForm';
@@ -109,9 +110,8 @@ const TasksPage = memo(function TasksPage() {
 
 
   return (
-    <Card
+    <PageCard
       title="自动化任务"
-      style={{ margin: 0 }}
       extra={
         <Space>
           <Button onClick={fetchList} loading={loading}>刷新</Button>
@@ -174,7 +174,7 @@ const TasksPage = memo(function TasksPage() {
           />
         </Form>
       </Drawer>
-    </Card>
+    </PageCard>
   );
 });