diff --git a/frontend/src/index.css b/frontend/src/index.css
index 7e2722f..7a61d8a 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -848,8 +848,8 @@ body::after {
   flex: 1 1 100%;
   box-sizing: border-box;
   padding: 12px 24px;
-  border-top: 1px solid var(--app-border-color);
   background: var(--app-bg-card);
+  border-top: 1px solid var(--app-border-color);
   border-radius: 0 0 16px 16px;
   display: flex;
   align-items: center;
diff --git a/frontend/src/pages/business/Meetings.tsx b/frontend/src/pages/business/Meetings.tsx
index f65689c..92b129e 100644
--- a/frontend/src/pages/business/Meetings.tsx
+++ b/frontend/src/pages/business/Meetings.tsx
@@ -121,9 +121,9 @@ const MeetingCardItem: React.FC<{ item: MeetingVO, config: any, fetchData: () =>
   const isPaused = effectiveStatus === PAUSED_DISPLAY_STATUS;
 
   return (
-    <List.Item style={{ marginBottom: 24 }}>
-      <Card hoverable onClick={() => onOpenMeeting(item)} className="meeting-card" style={{ borderRadius: 16, border: '1px solid var(--app-border-color)', background: 'var(--app-bg-card)', backdropFilter: 'blur(16px)', height: '220px', position: 'relative', boxShadow: 'var(--app-shadow)', transition: 'all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1)' }} styles={{ body: { padding: 0, display: 'flex', height: '100%' } }}>
-        <div className={isProcessing ? 'status-bar-active' : ''} style={{ width: 6, backgroundColor: config.color, borderRadius: '16px 0 0 16px', flexShrink: 0 }}></div>
+    <List.Item>
+      <Card hoverable onClick={() => onOpenMeeting(item)} className="meeting-card" style={{ borderRadius: 16, border: '1px solid var(--app-border-color)', background: 'var(--app-bg-card)', backdropFilter: 'blur(16px)', height: '220px', position: 'relative', boxShadow: 'var(--app-shadow)', transition: 'all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1)' }} styles={{ body: { padding: 0, display: 'flex', flexDirection: 'row', height: '100%' } }}>
+        <div className={isProcessing ? 'status-bar-active' : ''} style={{ width: 6, height: '100%', backgroundColor: config.color, borderRadius: '16px 0 0 16px', flexShrink: 0 }}></div>
         <div style={{ flex: 1, padding: '20px 24px', position: 'relative', display: 'flex', flexDirection: 'column', minWidth: 0 }}>
           <div className="card-actions" style={{ position: 'absolute', top: 16, right: 16, zIndex: 10, background: 'var(--app-bg-card)', borderRadius: 8, padding: '4px' }} onClick={e => e.stopPropagation()}>
             <Space size={8}>
@@ -336,37 +336,41 @@ const Meetings: React.FC = () => {
   };
 
   return (
-    <div style={{ height: 'calc(100vh - 64px)', display: 'flex', flexDirection: 'column', background: 'var(--app-bg-page)', padding: '24px', overflow: 'hidden' }}>
-      <div style={{ maxWidth: 1600, margin: '0 auto', width: '100%', height: '100%', display: 'flex', flexDirection: 'column' }}>
-        <Card variant="borderless" style={{ marginBottom: 20, borderRadius: 16, flexShrink: 0, boxShadow: 'var(--app-shadow)', background: 'var(--app-bg-card)', border: '1px solid var(--app-border-color)', backdropFilter: 'blur(16px)' }} styles={{ body: { padding: '16px 28px' } }}>
-          <Row justify="space-between" align="middle">
-            <Col><Space size={12}><div style={{ width: 8, height: 24, background: '#1890ff', borderRadius: 4 }}></div><Title level={4} style={{ margin: 0 }}>会议中心</Title></Space></Col>
-            <Col>
-              <Space size={16}>
-                <Radio.Group value={viewType} onChange={e => { setViewType(e.target.value); setCurrent(1); }} buttonStyle="solid">
-                  <Radio.Button value="all">全部</Radio.Button><Radio.Button value="created">我发起</Radio.Button><Radio.Button value="involved">我参与</Radio.Button>
-                </Radio.Group>
-                <Input placeholder="搜索会议标题" prefix={<SearchOutlined style={{ color: '#bfbfbf' }} />} allowClear onPressEnter={(e) => { setSearchTitle((e.target as any).value); setCurrent(1); }} style={{ width: 220, borderRadius: 8 }} />
-                <Button type="primary" icon={<PlusOutlined />} onClick={() => {
-                  setCreateDrawerType('upload');
-                  setCreateDrawerVisible(true);
-                }} style={{ borderRadius: 8, height: 36, fontWeight: 500 }}>创建会议</Button>
-              </Space>
-            </Col>
-          </Row>
-        </Card>
-
-        <div style={{ flex: 1, overflowY: 'auto', overflowX: 'hidden', padding: '4px 8px 4px 4px' }}>
+    <div className="app-page">
+      <Card
+        className="app-page__content-card shadow-sm"
+        style={{ flex: 1, minHeight: 0 }}
+        styles={{ body: { padding: 0, flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" } }}
+        title={
+          <Space size={12}>
+            <div style={{ width: 8, height: 24, background: '#1890ff', borderRadius: 4 }}></div>
+            <Title level={4} style={{ margin: 0 }}>会议中心</Title>
+          </Space>
+        }
+        extra={
+          <Space size={16} wrap>
+            <Radio.Group value={viewType} onChange={e => { setViewType(e.target.value); setCurrent(1); }} buttonStyle="solid">
+              <Radio.Button value="all">全部</Radio.Button><Radio.Button value="created">我发起</Radio.Button><Radio.Button value="involved">我参与</Radio.Button>
+            </Radio.Group>
+            <Input placeholder="搜索会议标题" prefix={<SearchOutlined style={{ color: '#bfbfbf' }} />} allowClear onPressEnter={(e) => { setSearchTitle((e.target as any).value); setCurrent(1); }} style={{ width: 220, borderRadius: 8 }} />
+            <Button type="primary" icon={<PlusOutlined />} onClick={() => {
+              setCreateDrawerType('upload');
+              setCreateDrawerVisible(true);
+            }} style={{ borderRadius: 8, height: 36, fontWeight: 500 }}>创建会议</Button>
+          </Space>
+        }
+      >
+        <div className="app-page__table-wrap" style={{ flex: 1, minHeight: 0, overflowX: "hidden", overflowY: "auto", padding: "24px" }}>
           <Skeleton loading={loading} active paragraph={{ rows: 10 }}>
-            <List grid={{ gutter: 24, xs: 1, sm: 2, md: 2, lg: 3, xl: 4, xxl: 4 }} dataSource={data} renderItem={(item) => {
+            <List grid={{ gutter: [24, 24], xs: 1, sm: 2, md: 2, lg: 3, xl: 4, xxl: 4 }} dataSource={data} renderItem={(item) => {
               const config = statusConfig[item.displayStatus ?? item.status] || statusConfig[0];
               return <MeetingCardItem item={item} config={config} fetchData={fetchData} t={t} onEditParticipants={openEditParticipants} onOpenMeeting={handleOpenMeeting} />;
             }} locale={{ emptyText: <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="开启您的第一场会议分析" /> }} />
           </Skeleton>
         </div>
 
-        {total > 0 && <AppPagination current={current} pageSize={size} total={total} onChange={(p, s) => { setCurrent(p); setSize(s); }} />}
-      </div>
+        <AppPagination current={current} pageSize={size} total={total} onChange={(p, s) => { setCurrent(p); setSize(s); }} />
+      </Card>
 
       <MeetingCreateDrawer
         open={createDrawerVisible}