diff --git a/src/app/(auth)/login/page.tsx b/src/app/(auth)/login/page.tsx
index a07b46f..c2058a7 100644
--- a/src/app/(auth)/login/page.tsx
+++ b/src/app/(auth)/login/page.tsx
@@ -8,7 +8,7 @@ import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form'
-import { Lock, User } from 'lucide-react'
+import { LockIcon, UserIcon } from 'lucide-react'
 import { useAuthStore } from '@/store/auth'
 import { toast, Toaster } from 'sonner'
 import { login } from '@/actions/auth'
@@ -75,7 +75,7 @@ export default function LoginPage() {
                       <FormLabel>账号</FormLabel>
                       <FormControl>
                         <div className="relative">
-                          <User className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
+                          <UserIcon className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
                           <Input
                             placeholder="请输入您的账号"
                             className="pl-8"
@@ -95,7 +95,7 @@ export default function LoginPage() {
                       <FormLabel>密码</FormLabel>
                       <FormControl>
                         <div className="relative">
-                          <Lock className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
+                          <LockIcon className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
                           <Input type="password" placeholder="请输入密码" className="pl-8" {...field} />
                         </div>
                       </FormControl>
diff --git a/src/app/(root)/allocationStatus/page.tsx b/src/app/(root)/allocationStatus/page.tsx
index be72405..795437e 100644
--- a/src/app/(root)/allocationStatus/page.tsx
+++ b/src/app/(root)/allocationStatus/page.tsx
@@ -11,7 +11,7 @@ import { z } from 'zod'
 import { useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { Button } from '@/components/ui/button'
-import { ArrowUpDown, ArrowUp, ArrowDown } from 'lucide-react'
+import { ArrowUpDownIcon, ArrowUpIcon, ArrowDownIcon } from 'lucide-react'
 import { Page } from '@/components/page'
 
 const filterSchema = z.object({
@@ -125,11 +125,11 @@ export default function AllocationStatus({ detailed = false }: { detailed?: bool
   // 6. 渲染排序图标，然后集成到ui里
   const renderSortIcon = (key: SortKey) => {
     if (sortKey !== key) {
-      return <ArrowUpDown className="h-4 w-4 text-gray-400" />
+      return <ArrowUpDownIcon className="h-4 w-4 text-gray-400" />
     }
     return sortDirection === 'asc'
-      ? <ArrowUp className="h-4 w-4 text-blue-600" />
-      : <ArrowDown className="h-4 w-4 text-blue-600" />
+      ? <ArrowUpIcon className="h-4 w-4 text-blue-600" />
+      : <ArrowDownIcon className="h-4 w-4 text-blue-600" />
   }
 
   const onSubmit = (data: FilterSchema) => {
diff --git a/src/app/(root)/edge/page.tsx b/src/app/(root)/edge/page.tsx
index f88e2ba..eb5f3e9 100644
--- a/src/app/(root)/edge/page.tsx
+++ b/src/app/(root)/edge/page.tsx
@@ -11,6 +11,7 @@ import { Button } from '@/components/ui/button'
 import { Form, FormControl, FormField, FormItem, FormLabel } from '@/components/ui/form'
 import { Input } from '@/components/ui/input'
 import { cn } from '@/lib/utils'
+import { Page } from '@/components/page'
 
 // 定义表单验证规则
 const filterSchema = z.object({
@@ -74,11 +75,6 @@ export default function Edge() {
     fetchData(page, size)
   }
 
-  const onReset = () => {
-    form.reset()
-    fetchData(page, size)
-  }
-
   // 处理页码变化
   const handlePageChange = (page: number) => {
     setPage(page)
@@ -186,143 +182,122 @@ export default function Edge() {
   )
 
   return (
-    <div className="flex bg-white flex-col shadow overflow-hidden p-6">
-
-      <div className="mb-6 p-4rounded-lg bg-white">
-        <Form {...form}>
-          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
-            <div className="flex  gap-4">
-              <FormField
-                control={form.control}
-                name="macaddr"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>MAC地址</FormLabel>
-                    <FormControl>
-                      <Input placeholder="输入MAC地址" {...field} />
-                    </FormControl>
-                  </FormItem>
-                )}
-              />
-              <FormField
-                name="public"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>公网IP</FormLabel>
-                    <FormControl>
-                      <Input placeholder="输入公网IP" {...field} />
-                    </FormControl>
-                  </FormItem>
-                )}
-              />
-              <FormField
-                name="city"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>城市</FormLabel>
-                    <FormControl>
-                      <Input placeholder="输入城市名称" {...field} />
-                    </FormControl>
-                  </FormItem>
-                )}
-              />
-
-              <FormField
-                name="isp"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>运营商</FormLabel>
-                    <FormControl>
-                      <Input placeholder="输入运营商" {...field} />
-                    </FormControl>
-                  </FormItem>
-                )}
-              />
-              <Button type="submit" className="mt-5 py-2 bg-blue-600 hover:bg-blue-700">
-                查询
-              </Button>
-              <Button type="button" variant="outline" className="mt-5 py-2" onClick={onReset}>
-                重置
-              </Button>
-            </div>
-          </form>
-        </Form>
-      </div>
-
-      {data.length === 0 ? (
-        <div className="text-center w-full py-12">
-          <div className="text-gray-400 text-4xl mb-4">📋</div>
-          <p className="text-gray-600">暂无节点数据</p>
-        </div>
-      ) : (
-        <>
-          <div className="flex gap-6 overflow-hidden">
-            <div className="flex-3 w-full flex overflow-y-auto">
-              <Table>
-                <TableHeader>
-                  <TableRow className="bg-gray-50">
-                    <TableHead className="px-4 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">MAC地址</TableHead>
-                    <TableHead className="px-4 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">城市</TableHead>
-                    <TableHead className="px-4 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">公网IP</TableHead>
-                    <TableHead className="px-4 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">运营商</TableHead>
-                    <TableHead className="px-4 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">多IP节点</TableHead>
-                    <TableHead className="px-4 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">独享IP</TableHead>
-                    <TableHead className="px-4 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">设备类型</TableHead>
-                    <TableHead className="px-4 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">在线时长</TableHead>
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  {data.map((item, index) => (
-                    <TableRow key={item.id} className={index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}>
-                      <TableCell className="px-4 py-3 text-sm font-mono text-blue-600">{item.macaddr}</TableCell>
-                      <TableCell className="px-4 py-3 text-sm text-gray-700">{item.city}</TableCell>
-                      <TableCell className="px-4 py-3 text-sm font-mono text-green-600">{item.public}</TableCell>
-                      <TableCell className="px-4 py-3 text-sm text-gray-700">
-                        <span className={cn(
-                          'px-2 py-1 rounded-full text-xs',
-                          'bg-gray-100 text-gray-800',
-                          {
-                            移动: 'bg-blue-100 text-blue-800',
-                            电信: 'bg-purple-100 text-purple-800',
-                            联通: 'bg-red-100 text-red-800',
-                          }[item.isp],
-                        )}>
-                          {item.isp}
-                        </span>
-                      </TableCell>
-                      <TableCell className="px-4 py-3 text-sm">
-                        <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getMultiIPColor(item.single)}`}>
-                          {formatMultiIP(item.single)}
-                        </span>
-                      </TableCell>
-                      <TableCell className="px-4 py-3 text-sm">
-                        <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getExclusiveIPColor(item.sole)}`}>
-                          {formatExclusiveIP(item.sole)}
-                        </span>
-                      </TableCell>
-                      <TableCell className="px-4 py-3 text-sm">
-                        <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getArchColor(item.arch)}`}>
-                          {formatArchType(item.arch)}
-                        </span>
-                      </TableCell>
-                      <TableCell className="px-4 py-3 text-sm text-gray-700">{formatOnlineTime(item.online)}</TableCell>
-                    </TableRow>
-                  ))}
-                </TableBody>
-              </Table>
-            </div>
-          </div>
-
-          {/* 分页 */}
-          <Pagination
-            page={page}
-            size={size}
-            total={total}
-            onPageChange={handlePageChange}
-            onSizeChange={handleSizeChange}
+    <Page className="gap-3">
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)} className="flex gap-4">
+          <FormField
+            control={form.control}
+            name="macaddr"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>MAC地址</FormLabel>
+                <FormControl>
+                  <Input placeholder="输入MAC地址" {...field} />
+                </FormControl>
+              </FormItem>
+            )}
           />
-        </>
-      )}
-    </div>
+          <FormField
+            name="public"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>公网IP</FormLabel>
+                <FormControl>
+                  <Input placeholder="输入公网IP" {...field} />
+                </FormControl>
+              </FormItem>
+            )}
+          />
+          <FormField
+            name="city"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>城市</FormLabel>
+                <FormControl>
+                  <Input placeholder="输入城市名称" {...field} />
+                </FormControl>
+              </FormItem>
+            )}
+          />
+          <FormField
+            name="isp"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>运营商</FormLabel>
+                <FormControl>
+                  <Input placeholder="输入运营商" {...field} />
+                </FormControl>
+              </FormItem>
+            )}
+          />
+          <Button type="submit" className="mt-5 py-2 bg-blue-600 hover:bg-blue-700">
+            查询
+          </Button>
+          <Button type="button" variant="outline" className="mt-5 py-2" onClick={() => form.reset()}>
+            重置
+          </Button>
+        </form>
+      </Form>
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>MAC地址</TableHead>
+            <TableHead>城市</TableHead>
+            <TableHead>公网IP</TableHead>
+            <TableHead>运营商</TableHead>
+            <TableHead>多IP节点</TableHead>
+            <TableHead>独享IP</TableHead>
+            <TableHead>设备类型</TableHead>
+            <TableHead>在线时长</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {data.map((item, index) => (
+            <TableRow key={item.id} className={index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}>
+              <TableCell className="px-4 py-3 text-sm font-mono text-blue-600">{item.macaddr}</TableCell>
+              <TableCell className="px-4 py-3 text-sm text-gray-700">{item.city}</TableCell>
+              <TableCell className="px-4 py-3 text-sm font-mono text-green-600">{item.public}</TableCell>
+              <TableCell className="px-4 py-3 text-sm text-gray-700">
+                <span className={cn(
+                  'px-2 py-1 rounded-full text-xs',
+                  'bg-gray-100 text-gray-800',
+                  {
+                    移动: 'bg-blue-100 text-blue-800',
+                    电信: 'bg-purple-100 text-purple-800',
+                    联通: 'bg-red-100 text-red-800',
+                  }[item.isp],
+                )}>
+                  {item.isp}
+                </span>
+              </TableCell>
+              <TableCell className="px-4 py-3 text-sm">
+                <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getMultiIPColor(item.single)}`}>
+                  {formatMultiIP(item.single)}
+                </span>
+              </TableCell>
+              <TableCell className="px-4 py-3 text-sm">
+                <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getExclusiveIPColor(item.sole)}`}>
+                  {formatExclusiveIP(item.sole)}
+                </span>
+              </TableCell>
+              <TableCell className="px-4 py-3 text-sm">
+                <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getArchColor(item.arch)}`}>
+                  {formatArchType(item.arch)}
+                </span>
+              </TableCell>
+              <TableCell className="px-4 py-3 text-sm text-gray-700">{formatOnlineTime(item.online)}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+      {/* 分页 */}
+      <Pagination
+        page={page}
+        size={size}
+        total={total}
+        onPageChange={handlePageChange}
+        onSizeChange={handleSizeChange}
+      />
+    </Page>
   )
 }
diff --git a/src/app/(root)/gatewayConfig/page.tsx b/src/app/(root)/gatewayConfig/page.tsx
index aefea23..ce5cc08 100644
--- a/src/app/(root)/gatewayConfig/page.tsx
+++ b/src/app/(root)/gatewayConfig/page.tsx
@@ -11,7 +11,8 @@ import { Button } from '@/components/ui/button'
 import { Form, FormField, FormItem, FormLabel } from '@/components/ui/form'
 import { Input } from '@/components/ui/input'
 import { cn } from '@/lib/utils'
-import { Search } from 'lucide-react'
+import { SearchIcon } from 'lucide-react'
+import { Page } from '@/components/page'
 
 function GatewayConfigContent() {
   const [data, setData] = useState<GatewayConfig[]>([])
@@ -169,213 +170,172 @@ function GatewayConfigContent() {
   }, [])
 
   return (
-    <div className="flex flex-col bg-white shadow p-6 overflow-hidden">
+    <Page className="flex flex-row gap-6">
       {/* 查询表单 */}
-      <div className="flex gap-6">
-        <div className="flex flex-1">
-          <div className="flex flex-col w-full">
-            <Form {...form}>
-              <form onSubmit={formHandleSubmit(onSubmit)}>
-                <div className="flex gap-4 mb-2">
-                  <FormField
-                    name="macaddr"
-                    render={({ field }) => (
-                      <FormItem className="flex-1 relative">
-                        <div className="relative">
-                          <Input
-                            placeholder="搜索MAC地址..."
-                            {...field}
-                            className="w-full pr-10"
-                          />
-                          <Search
-                            className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 cursor-pointer"
-                            onClick={(e) => {
-                              e.preventDefault()
-                              onSubmit(form.getValues())
-                            }}
-                          />
-                        </div>
-                      </FormItem>
-                    )}
-                  />
-                </div>
-              </form>
-            </Form>
-            <div className="flex gap-4">
-              <div className="flex items-center">
-                <div className="w-3 h-3 bg-green-500 rounded-full mr-2"></div>
-                <span className="text-sm font-medium">在线 {infoData.filter(item => item.enable === 1).length}</span>
-              </div>
-              <div className="flex items-center">
-                <div className="w-3 h-3 bg-red-500 rounded-full mr-2"></div>
-                <span className="text-sm font-medium">离线 {infoData.filter(item => item.enable === 0).length}</span>
-              </div>
-            </div>
+      <div className="flex-1 flex flex-col gap-2">
+        <Form {...form}>
+          <form onSubmit={formHandleSubmit(onSubmit)}>
+            <FormField
+              name="macaddr"
+              render={({ field }) => (
+                <FormItem className="flex-1 relative">
+                  <div className="relative">
+                    <Input
+                      placeholder="搜索MAC地址..."
+                      {...field}
+                      className="w-full pr-10"
+                    />
+                    <SearchIcon
+                      className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 cursor-pointer"
+                      onClick={(e) => {
+                        e.preventDefault()
+                        onSubmit(form.getValues())
+                      }}
+                    />
+                  </div>
+                </FormItem>
+              )}
+            />
+          </form>
+        </Form>
+        <div className="flex gap-4">
+          <div className="flex items-center">
+            <div className="w-3 h-3 bg-green-500 rounded-full mr-2"></div>
+            <span className="text-sm font-medium">在线 {infoData.filter(item => item.enable === 1).length}</span>
+          </div>
+          <div className="flex items-center">
+            <div className="w-3 h-3 bg-red-500 rounded-full mr-2"></div>
+            <span className="text-sm font-medium">离线 {infoData.filter(item => item.enable === 0).length}</span>
           </div>
         </div>
-        <div className="flex flex-3 rounded-lg bg-white">
-          <Form {...form}>
-            <form onSubmit={formHandleSubmit(onSubmit)}>
-              <div className="flex gap-4">
-                <FormField
-                  name="public"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>IP地址</FormLabel>
-                      <Input placeholder="输入IP地址" {...field} />
-                    </FormItem>
-                  )}
-                />
-                <FormField
-                  name="user"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>线路</FormLabel>
-                      <Input placeholder="输入线路" {...field} />
-                    </FormItem>
-                  )}
-                />
-                <FormField
-                  name="inner_ip"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>端口号</FormLabel>
-                      <Input placeholder="输入端口" {...field} />
-                    </FormItem>
-                  )}
-                />
-                <FormField
-                  name="city"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>城市</FormLabel>
-                      <Input placeholder="输入城市" {...field} />
-                    </FormItem>
-                  )}
-                />
-                <Button type="submit" className="ml-2 mt-6 px-4 py-2 bg-blue-600 hover:bg-blue-700">
-                  查询
-                </Button>
+        <div className="overflow-auto border-t flex flex-col">
+          {infoData.map((item, index) => (
+            <div
+              key={index}
+              className={cn('p-4 flex-col ', index !== infoData.length - 1 ? 'border-b' : '')}>
+              <div className="flex flex-col">
+                <div className="flex items-center justify-between mb-2">
+                  <div
+                    className={cn('font-medium cursor-pointer',
+                      selectedMac === item.macaddr ? 'text-blue-700' : 'text-gray-900')}
+                    onClick={() => handleMacClick(item.macaddr)}
+                  >
+                    {item.macaddr}
+                  </div>
+                  <div className="flex items-center">
+                    <div
+                      className={cn(
+                        'w-2 h-2 rounded-full mr-2',
+                        item.enable === 1 ? 'bg-green-500' : 'bg-red-500',
+                      )}
+                    />
+                    <span className={cn(
+                      'text-xs font-medium',
+                      item.enable === 1 ? 'text-green-700' : 'text-red-700',
+                    )}>
+                      {item.enable === 1 ? '在线' : '离线'}
+                    </span>
+                  </div>
+                </div>
               </div>
-            </form>
-          </Form>
+              <div className="text-sm text-gray-600 mb-3">
+                {item.inner_ip || '未配置IP'}
+              </div>
+              <div className="flex gap-2 space-y-1 text-xs text-gray-500">
+                <div>配置版本: {item.setid || 'N/A'}</div>
+              </div>
+            </div>
+          ))}
         </div>
       </div>
-
-      {loading ? (
-        <div className="text-center py-12">
-          <div className="text-gray-400 text-4xl mb-4">⏳</div>
-          <p className="text-gray-600">正在查询网关配置信息...</p>
-        </div>
-      ) : infoData.length > 0 ? (
-        <>
-          {/* 网关基本信息 */}
-          <div className="flex gap-6 p-2 overflow-hidden">
-            <div className="flex flex-1 flex-col overflow-auto mb-6 border-t bg-white">
-              {infoData.map((item, index) => (
-                <div
-                  key={index}
-                  className={cn('p-4 flex-col ', index !== infoData.length - 1 ? 'border-b' : '')}>
-                  <div className="flex flex-col">
-                    <div className="flex items-center justify-between mb-2">
-                      <div
-                        className={cn('font-medium cursor-pointer',
-                          selectedMac === item.macaddr ? 'text-blue-700' : 'text-gray-900')}
-                        onClick={() => handleMacClick(item.macaddr)}
-                      >
-                        {item.macaddr}
-                      </div>
-                      <div className="flex items-center">
-                        <div
-                          className={cn(
-                            'w-2 h-2 rounded-full mr-2',
-                            item.enable === 1 ? 'bg-green-500' : 'bg-red-500',
-                          )}
-                        />
-                        <span className={cn(
-                          'text-xs font-medium',
-                          item.enable === 1 ? 'text-green-700' : 'text-red-700',
-                        )}>
-                          {item.enable === 1 ? '在线' : '离线'}
-                        </span>
-                      </div>
-                    </div>
-                  </div>
-                  <div className="text-sm text-gray-600 mb-3">
-                    {item.inner_ip || '未配置IP'}
-                  </div>
-                  <div className="flex gap-2 space-y-1 text-xs text-gray-500">
-                    <div>配置版本: {item.setid || 'N/A'}</div>
-                  </div>
-                </div>
-              ))}
-            </div>
-
-            <div className="flex-3 flex flex-col overflow-hidden">
-              { data.length > 0
-                ? (
-                    <>
-                      <div className="flex overflow-auto">
-                        <Table>
-                          <TableHeader>
-                            <TableRow className="bg-gray-50">
-                              <TableHead className="text-xs text-gray-500 uppercase tracking-wider">端口</TableHead>
-                              <TableHead className="text-xs text-gray-500 uppercase tracking-wider">线路</TableHead>
-                              <TableHead className="text-xs text-gray-500 uppercase tracking-wider">城市</TableHead>
-                              <TableHead className="text-xs text-gray-500 uppercase tracking-wider">节点MAC</TableHead>
-                              <TableHead className="text-xs text-gray-500 uppercase tracking-wider">节点IP</TableHead>
-                              <TableHead className="text-xs text-gray-500 uppercase tracking-wider">配置更新</TableHead>
-                              <TableHead className="text-xs text-gray-500 uppercase tracking-wider">在用状态</TableHead>
-                            </TableRow>
-                          </TableHeader>
-                          <TableBody>
-                            {data.map((item, index) => (
-                              <TableRow key={index} className={index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}>
-                                <TableCell className="px-4 py-2">{item.inner_ip}</TableCell>
-                                <TableCell className="px-4 py-2">{item.user}</TableCell>
-                                <TableCell className="px-4 py-2">{item.city}</TableCell>
-                                <TableCell className="px-4 py-2">{item.edge}</TableCell>
-                                <TableCell className="px-4 py-2">{item.public}</TableCell>
-                                <TableCell className="px-4 py-2">
-                                  {getStatusBadge(item.ischange, '正常', '更新')}
-                                </TableCell>
-                                <TableCell className="px-4 py-2">
-                                  {getOnlineStatus(item.isonline)}
-                                </TableCell>
-                              </TableRow>
-                            ))}
-                          </TableBody>
-                        </Table>
-                      </div>
-                      {/* 分页组件 */}
-                      <div className="flex gap-6">
-                        <Pagination
-                          total={total}
-                          page={page}
-                          size={250}
-                          sizeOptions={[250]}
-                          onPageChange={handlePageChange}
-                          onSizeChange={handleSizeChange}
-                          className="mt-4"
-                        />
-                      </div>
-                    </>
-                  ) : (
-                    <div className="text-center py-12">
-                      <div className="text-gray-400 text-4xl mb-4">📋</div>
-                      <p className="text-gray-600">暂无网关配置数据</p>
-                    </div>
-                  )}
-            </div>
-          </div>
-        </>
-      ) : (
-        <div className="text-center py-12">
-          <div className="text-gray-400 text-4xl mb-4">📋</div>
-          <p className="text-gray-600">暂无网关配置数据</p>
-        </div>
-      )}
-    </div>
+      <div className="flex-3 overflow-hidden flex flex-col gap-3">
+        <Form {...form}>
+          <form className="flex gap-4" onSubmit={formHandleSubmit(onSubmit)}>
+            <FormField
+              name="public"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>IP地址</FormLabel>
+                  <Input placeholder="输入IP地址" {...field} />
+                </FormItem>
+              )}
+            />
+            <FormField
+              name="user"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>线路</FormLabel>
+                  <Input placeholder="输入线路" {...field} />
+                </FormItem>
+              )}
+            />
+            <FormField
+              name="inner_ip"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>端口号</FormLabel>
+                  <Input placeholder="输入端口" {...field} />
+                </FormItem>
+              )}
+            />
+            <FormField
+              name="city"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>城市</FormLabel>
+                  <Input placeholder="输入城市" {...field} />
+                </FormItem>
+              )}
+            />
+            <Button type="submit" className="ml-2 mt-6 px-4 py-2 bg-blue-600 hover:bg-blue-700">
+              查询
+            </Button>
+            <Button type="button" variant="outline" className="ml-2 mt-6 px-4 py-2" onClick={() => form.reset()}>
+              重置
+            </Button>
+          </form>
+        </Form>
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>端口</TableHead>
+              <TableHead>线路</TableHead>
+              <TableHead>城市</TableHead>
+              <TableHead>节点MAC</TableHead>
+              <TableHead>节点IP</TableHead>
+              <TableHead>配置更新</TableHead>
+              <TableHead>在用状态</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {data.map((item, index) => (
+              <TableRow key={index}>
+                <TableCell>{item.inner_ip}</TableCell>
+                <TableCell>{item.user}</TableCell>
+                <TableCell>{item.city}</TableCell>
+                <TableCell>{item.edge}</TableCell>
+                <TableCell>{item.public}</TableCell>
+                <TableCell>
+                  {getStatusBadge(item.ischange, '正常', '更新')}
+                </TableCell>
+                <TableCell>
+                  {getOnlineStatus(item.isonline)}
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+        {/* 分页组件 */}
+        <Pagination
+          total={total}
+          page={page}
+          size={250}
+          sizeOptions={[250]}
+          onPageChange={handlePageChange}
+          onSizeChange={handleSizeChange}
+        />
+      </div>
+    </Page>
   )
 }
 
diff --git a/src/app/(root)/gatewayMonitor/page.tsx b/src/app/(root)/gatewayMonitor/page.tsx
index d82752c..ecce44c 100644
--- a/src/app/(root)/gatewayMonitor/page.tsx
+++ b/src/app/(root)/gatewayMonitor/page.tsx
@@ -9,6 +9,7 @@ import { z } from 'zod'
 import { Button } from '@/components/ui/button'
 import { Form, FormField, FormItem, FormLabel } from '@/components/ui/form'
 import { Input } from '@/components/ui/input'
+import { Page } from '@/components/page'
 
 function GatewayConfigContent() {
   const [data, setData] = useState<GatewayConfig[]>([])
@@ -322,202 +323,161 @@ function GatewayConfigContent() {
     }
     await fetchData(filters, 1)
   }
+
   return (
-    <div className="flex flex-col bg-white shadow p-6 overflow-hidden">
+    <Page>
       {/* 查询表单 */}
-      <div className="flex gap-6">
-        <div className="flex flex-3 rounded-lg bg-white">
-          <Form {...form}>
-            <form onSubmit={formHandleSubmit(onSubmit)}>
-              <div className="flex gap-4">
-                <FormField
-                  name="macaddr"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>MAC地址</FormLabel>
-                      <Input placeholder="输入MAC地址" {...field} />
-                    </FormItem>
-                  )}
-                />
-                <FormField
-                  name="public"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>IP地址</FormLabel>
-                      <Input placeholder="输入IP地址" {...field} />
-                    </FormItem>
-                  )}
-                />
-                <FormField
-                  name="user"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>线路</FormLabel>
-                      <Input placeholder="输入线路" {...field} />
-                    </FormItem>
-                  )}
-                />
-                <FormField
-                  name="inner_ip"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>端口号</FormLabel>
-                      <Input placeholder="输入端口" {...field} />
-                    </FormItem>
-                  )}
-                />
-                <FormField
-                  name="city"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>城市</FormLabel>
-                      <Input placeholder="输入城市" {...field} />
-                    </FormItem>
-                  )}
-                />
-                <Button type="submit" className="ml-2 mt-6 px-4 py-2 bg-blue-600 hover:bg-blue-700">
-                  查询
-                </Button>
-              </div>
-            </form>
-          </Form>
+      <Form {...form}>
+        <form onSubmit={formHandleSubmit(onSubmit)} className="flex gap-3">
+          <FormField
+            name="macaddr"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>MAC地址</FormLabel>
+                <Input placeholder="输入MAC地址" {...field} />
+              </FormItem>
+            )}
+          />
+          <FormField
+            name="public"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>IP地址</FormLabel>
+                <Input placeholder="输入IP地址" {...field} />
+              </FormItem>
+            )}
+          />
+          <FormField
+            name="user"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>线路</FormLabel>
+                <Input placeholder="输入线路" {...field} />
+              </FormItem>
+            )}
+          />
+          <FormField
+            name="inner_ip"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>端口号</FormLabel>
+                <Input placeholder="输入端口" {...field} />
+              </FormItem>
+            )}
+          />
+          <FormField
+            name="city"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>城市</FormLabel>
+                <Input placeholder="输入城市" {...field} />
+              </FormItem>
+            )}
+          />
+          <Button type="submit" className="ml-2 mt-6 px-4 py-2 bg-blue-600 hover:bg-blue-700">
+            查询
+          </Button>
+          <Button type="button" variant="outline" className="ml-2 mt-6 px-4 py-2" onClick={() => form.reset()}>
+            重置
+          </Button>
+        </form>
+      </Form>
+      <div className="flex gap-6 p-2 items-center justify-between text-sm">
+        <div className="flex gap-2">
+          <div className="flex items-center gap-2">
+            <div className="w-3 h-3 bg-blue-100 border border-blue-300 rounded"></div>
+            <span className="text-xs font-medium">蓝色：在用</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <div className="w-3 h-3 bg-green-100 border border-green-300 rounded"></div>
+            <span className="text-xs font-medium">绿色：空闲</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <div className="w-3 h-3 bg-yellow-100 border border-yellow-300 rounded"></div>
+            <span className="text-xs font-medium">黄色：更新</span>
+          </div>
+        </div>
+        <div className="flex gap-4">
+          <div className="flex items-center">
+            <div className="w-3 h-3 bg-green-500 rounded-full mr-2"></div>
+            <span className="text-sm font-medium">在线 {infoData.filter(item => item.enable === 1).length}</span>
+          </div>
+          <div className="flex items-center">
+            <div className="w-3 h-3 bg-red-500 rounded-full mr-2"></div>
+            <span className="text-sm font-medium">离线 {infoData.filter(item => item.enable === 0).length}</span>
+          </div>
+        </div>
+        <div className="flex items-center">
+          <div className="text-sm text-gray-600">
+            当前<span className="font-semibold text-blue-600">{currentTotal}</span> 条 |
+            共 <span className="font-semibold text-blue-600">{totalCount}</span> 条记录
+          </div>
         </div>
       </div>
-
-      {loading ? (
-        <div className="text-center py-12">
-          <div className="text-gray-400 text-4xl mb-4">⏳</div>
-          <p className="text-gray-600">正在查询网关配置信息...</p>
-        </div>
-      ) : matrixData.length > 0 ? (
-        <>
-          <div className="flex gap-6 overflow-hidden">
-            {/* 二维矩阵表格 */}
-            <div className="flex-3 flex flex-col overflow-hidden">
-              <div className="flex gap-6 p-2 items-center justify-between text-sm">
-                <div className="flex gap-2">
-                  <div className="flex items-center gap-2">
-                    <div className="w-3 h-3 bg-blue-100 border border-blue-300 rounded"></div>
-                    <span className="text-xs font-medium">蓝色：在用</span>
-                  </div>
-                  <div className="flex items-center gap-2">
-                    <div className="w-3 h-3 bg-green-100 border border-green-300 rounded"></div>
-                    <span className="text-xs font-medium">绿色：空闲</span>
-                  </div>
-                  <div className="flex items-center gap-2">
-                    <div className="w-3 h-3 bg-yellow-100 border border-yellow-300 rounded"></div>
-                    <span className="text-xs font-medium">黄色：更新</span>
-                  </div>
-                </div>
-                <div className="flex items-center">
-                  <div className="w-3 h-3 bg-green-500 rounded-full mr-2"></div>
-                  <span className="text-sm font-medium">在线 {infoData.filter(item => item.enable === 1).length}</span>
-                </div>
-                <div className="flex items-center">
-                  <div className="w-3 h-3 bg-red-500 rounded-full mr-2"></div>
-                  <span className="text-sm font-medium">离线 {infoData.filter(item => item.enable === 0).length}</span>
-                </div>
-                <div className="flex items-center">
-                  <div className="text-sm text-gray-600">
-                    当前<span className="font-semibold text-blue-600">{currentTotal}</span> 条 |
-                    共 <span className="font-semibold text-blue-600">{totalCount}</span> 条记录
-                  </div>
-                </div>
-              </div>
-
-              <div className="flex border rounded-lg overflow-auto">
-                <Table>
-                  <TableHeader>
-                    <TableRow className="bg-gray-50">
-                      <TableHead className="text-xs text-gray-500 bg-gray-50 uppercase tracking-wider sticky top-0 left-0 z-50  border-r min-w-[110px] shadow-md">
-                        端口
-                      </TableHead>
-                      {macAddresses.map((macaddr, index) => (
-                        <TableHead
-                          key={index}
-                          className="text-xs text-gray-500 uppercase tracking-wider sticky top-0 z-30 bg-gray-50 text-center min-w-[110px] border-r"
-                        >
-                          {macaddr}
-                        </TableHead>
-                      ))}
-                    </TableRow>
-                  </TableHeader>
-                  <TableBody>
-                    {matrixData.map((row, rowIndex) => (
-                      <TableRow key={rowIndex} className="border-b">
-                        <TableCell className="px-4 py-2 font-medium sticky left-0 z-40 border-r bg-white shadow-[2px_0_0_0_rgba(0,0,0,0.1)] min-w-[110px]">
-                          <div className="flex justify-between items-center">
-                            <span className="text-sm font-medium">{row.inner_ip || 'N/A'}</span>
-                          </div>
-                        </TableCell>
-                        {macAddresses.map((macaddr, colIndex) => {
-                          const configs = row.devices[macaddr] || []
-                          if (configs.length === 0) {
-                            return (
-                              <TableCell
-                                key={`${rowIndex}-${colIndex}`}
-                                className="px-2 py-3 text-center min-w-[110px] border-r"
-                              >
-                                <div className="text-gray-400 text-sm py-6">-</div>
-                              </TableCell>
-                            )
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>
+              端口
+            </TableHead>
+            {macAddresses.map((macaddr, index) => (
+              <TableHead key={index} className="border-r">
+                {macaddr}
+              </TableHead>
+            ))}
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {matrixData.map((row, rowIndex) => (
+            <TableRow key={rowIndex}>
+              <TableCell className="border-r">{row.inner_ip}</TableCell>
+              {macAddresses.map((macaddr, colIndex) => {
+                const configs = row.devices[macaddr] || []
+                return (
+                  <TableCell key={`${rowIndex}-${colIndex}`} className="border-r">
+                    { configs.length === 0 ? (
+                      <div className="text-center">-</div>
+                    ) : (
+                      <div className="space-y-2">
+                        {configs.map((item, itemIndex) => {
+                          const statusConfig = {
+                            ischange: item.ischange === 0
+                              ? { bg: 'bg-green-100', border: 'border-green-200', text: 'text-green-800', label: '正常' }
+                              : { bg: 'bg-yellow-100', border: 'border-yellow-200', text: 'text-yellow-800', label: '更新' },
+                            isonline: item.isonline === 0
+                              ? { bg: 'bg-green-100', border: 'border-green-200', text: 'text-green-800', label: '空闲' }
+                              : { bg: 'bg-blue-100', border: 'border-blue-200', text: 'text-blue-800', label: '在用' },
                           }
 
                           return (
-                            <TableCell
-                              key={`${rowIndex}-${colIndex}`}
-                              // className="p-2 min-w-[110px] border-r text-center hover:bg-blue-50"
-                              className="px-2 py-3 text-center min-w-[110px] border-r"
-                            >
-                              <div className="space-y-2">
-                                {configs.map((item, itemIndex) => {
-                                  const statusConfig = {
-                                    ischange: item.ischange === 0
-                                      ? { bg: 'bg-green-100', border: 'border-green-200', text: 'text-green-800', label: '正常' }
-                                      : { bg: 'bg-yellow-100', border: 'border-yellow-200', text: 'text-yellow-800', label: '更新' },
-                                    isonline: item.isonline === 0
-                                      ? { bg: 'bg-green-100', border: 'border-green-200', text: 'text-green-800', label: '空闲' }
-                                      : { bg: 'bg-blue-100', border: 'border-blue-200', text: 'text-blue-800', label: '在用' },
-                                  }
-
-                                  return (
-                                    <div key={itemIndex} className="flex flex-col gap-1 transition-shadow">
-                                      <div className="flex justify-between items-center">
-                                        <span className="text-sm font-medium">{item.public || 'N/A'}</span>
-                                      </div>
-                                      <div className="flex justify-between items-center">
-                                        <span className="text-xs font-medium">{item.city || 'N/A'}</span>
-                                      </div>
-                                      <div className="flex justify-between items-center">
-                                        <span className={`px-2 py-0.5 rounded text-xs font-medium ${statusConfig.ischange.bg} ${statusConfig.ischange.text}`}>
-                                          {statusConfig.ischange.label}
-                                        </span>
-                                        <span className={`px-2 py-0.5 rounded text-xs font-medium ${statusConfig.isonline.bg} ${statusConfig.isonline.text}`}>
-                                          {statusConfig.isonline.label}
-                                        </span>
-                                      </div>
-                                    </div>
-                                  )
-                                })}
+                            <div key={itemIndex} className="flex flex-col gap-1 transition-shadow">
+                              <div className="flex justify-between items-center">
+                                <span className="text-sm font-medium">{item.public || 'N/A'}</span>
                               </div>
-                            </TableCell>
+                              <div className="flex justify-between items-center">
+                                <span className="text-xs font-medium">{item.city || 'N/A'}</span>
+                              </div>
+                              <div className="flex justify-between items-center">
+                                <span className={`px-2 py-0.5 rounded text-xs font-medium ${statusConfig.ischange.bg} ${statusConfig.ischange.text}`}>
+                                  {statusConfig.ischange.label}
+                                </span>
+                                <span className={`px-2 py-0.5 rounded text-xs font-medium ${statusConfig.isonline.bg} ${statusConfig.isonline.text}`}>
+                                  {statusConfig.isonline.label}
+                                </span>
+                              </div>
+                            </div>
                           )
                         })}
-                      </TableRow>
-                    ))}
-                  </TableBody>
-                </Table>
-              </div>
-            </div>
-          </div>
-        </>
-      ) : (
-        <div className="text-center py-12">
-          <div className="text-gray-400 text-4xl mb-4">📋</div>
-          <p className="text-gray-600">暂无网关配置数据</p>
-        </div>
-      )}
-    </div>
+                      </div>
+                    )}
+                  </TableCell>
+                )
+              })}
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </Page>
   )
 }
 
diff --git a/src/app/(root)/gatewayinfo/page.tsx b/src/app/(root)/gatewayinfo/page.tsx
index 2e2e6e7..a808edc 100644
--- a/src/app/(root)/gatewayinfo/page.tsx
+++ b/src/app/(root)/gatewayinfo/page.tsx
@@ -8,7 +8,8 @@ import { z } from 'zod'
 import { useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { getGatewayInfo, type GatewayInfo } from '@/actions/stats'
-import { Copy, Check } from 'lucide-react'
+import { CopyIcon, CheckIcon } from 'lucide-react'
+import { Page } from '@/components/page'
 
 const filterSchema = z.object({
   status: z.string(),
@@ -67,9 +68,9 @@ const SmartCopyButton = ({
       disabled={disabled}
     >
       {isCopied ? (
-        <Check className="w-3 h-3 text-green-600" />
+        <CheckIcon className="w-3 h-3 text-green-600" />
       ) : (
-        <Copy className="w-3 h-3 text-gray-500" />
+        <CopyIcon className="w-3 h-3 text-gray-500" />
       )}
       {isBatch && <span>{isCopied ? '已复制' : '复制全部'}</span>}
     </button>
@@ -161,9 +162,9 @@ export default function Gatewayinfo() {
   }
 
   return (
-    <div className="flex flex-col w-full bg-white p-6 overflow-hidden">
-      <div className="flex gap-6">
-        <div className="flex flex-3  justify-between ">
+    <Page>
+      <div className="gap-6 flex">
+        <div className="flex flex-3 justify-between ">
           <span className="text-lg pt-2 font-semibold mb-4">网关基本信息</span>
           <Form {...form}>
             <form className="flex items-center gap-4">
@@ -196,37 +197,34 @@ export default function Gatewayinfo() {
         <div className="flex flex-1"></div>
       </div>
 
-      <div className="flex gap-6 overflow-hidden">
-        <div className="flex-3 w-full flex">
+      <div className="flex-auto overflow-hidden gap-6 flex">
+        <div className="flex-3">
           <Table>
             <TableHeader>
-              <TableRow className="bg-gray-50">
-                <TableHead className="px-4 py-2 text-left">
+              <TableRow>
+                <TableHead>
                   <div className="flex items-center">
                     <span>MAC地址</span>
                     <SmartCopyButton data={filteredData} mode="batch" />
                   </div>
                 </TableHead>
-                <TableHead className="px-4 py-2 text-left">内网IP</TableHead>
-                <TableHead className="px-4 py-2 text-left">配置版本</TableHead>
-                <TableHead className="px-4 py-2 text-left">状态</TableHead>
+                <TableHead>内网IP</TableHead>
+                <TableHead>配置版本</TableHead>
+                <TableHead>状态</TableHead>
               </TableRow>
             </TableHeader>
             <TableBody>
               {filteredData.map((item, index) => (
-                <TableRow
-                  key={index}
-                  className={index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}
-                >
-                  <TableCell className="px-4 py-2">
+                <TableRow key={index}>
+                  <TableCell>
                     <div className="flex items-center gap-2">
                       {item.macaddr}
                       <SmartCopyButton data={item.macaddr} />
                     </div>
                   </TableCell>
-                  <TableCell className="px-4 py-2">{item.inner_ip}</TableCell>
-                  <TableCell className="px-4 py-2">{item.setid}</TableCell>
-                  <TableCell className="px-4 py-2">
+                  <TableCell>{item.inner_ip}</TableCell>
+                  <TableCell>{item.setid}</TableCell>
+                  <TableCell>
                     <span className={`px-2 py-1 rounded-full text-xs font-medium ${getStatusClass(item.enable)}`}>
                       {getStatusText(item.enable)}
                     </span>
@@ -236,8 +234,7 @@ export default function Gatewayinfo() {
             </TableBody>
           </Table>
         </div>
-
-        <div className="flex flex-1 flex-col gap-4 mb-6">
+        <div className="flex-1 flex-col gap-4 mb-6 flex">
           <div className="bg-blue-50 p-4 rounded-lg">
             <div className="text-2xl font-bold text-blue-600">{data.length}</div>
             <div className="text-sm text-blue-800">网关总数</div>
@@ -256,6 +253,6 @@ export default function Gatewayinfo() {
           </div>
         </div>
       </div>
-    </div>
+    </Page>
   )
 }
diff --git a/src/app/(root)/layout.tsx b/src/app/(root)/layout.tsx
index b53da0a..1ef818a 100644
--- a/src/app/(root)/layout.tsx
+++ b/src/app/(root)/layout.tsx
@@ -89,10 +89,10 @@ function NavbarItem(props: {
   return (
     <Link
       href={props.href}
-      className={`block px-3 py-2 rounded-md text-sm font-medium transition-colors ${
+      className={`block px-3 py-2 rounded-md text-sm font-medium transition-colors text-center items-center justify-center ${
         props.active
           ? 'border-blue-500 text-blue-600'
-          : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
+          : 'border-transparent text-gray-500 hover:text-gray-700 hover:bg-gray-200'
       }`}
     >
       {props.children}
diff --git a/src/app/(root)/settings/page.tsx b/src/app/(root)/settings/page.tsx
index 53a7d69..0c40645 100644
--- a/src/app/(root)/settings/page.tsx
+++ b/src/app/(root)/settings/page.tsx
@@ -7,10 +7,11 @@ import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card'
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form'
-import { User, Lock, Search, Trash2, Plus, X } from 'lucide-react'
+import { UserIcon, LockIcon, SearchIcon, Trash2Icon, PlusIcon, XIcon } from 'lucide-react'
 import { toast, Toaster } from 'sonner'
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
 import { findUsers, createUser, removeUser } from '@/actions/user'
+import { Page } from '@/components/page'
 
 // 用户类型定义
 interface UserData {
@@ -123,183 +124,181 @@ export default function Settings() {
   )
 
   return (
-    <div className="bg-white p-6 flex w-full">
-      <div className="flex flex-col w-full">
-        <div className="flex justify-between items-center mb-6">
-          <h1 className="text-3xl font-bold">用户管理</h1>
-          <Button onClick={() => setIsCreateMode(!isCreateMode)}>
-            {isCreateMode ? (
-              <>
-                <X className="mr-2 h-4 w-4" /> 取消
-              </>
-            ) : (
-              <>
-                <Plus className="mr-2 h-4 w-4" /> 添加用户
-              </>
-            )}
-          </Button>
+    <Page>
+      <div className="flex justify-between items-center mb-3">
+        <h1 className="text-3xl font-bold">用户管理</h1>
+        <Button onClick={() => setIsCreateMode(!isCreateMode)}>
+          {isCreateMode ? (
+            <>
+              <XIcon className="mr-2 h-4 w-4" /> 取消
+            </>
+          ) : (
+            <>
+              <PlusIcon className="mr-2 h-4 w-4" /> 添加用户
+            </>
+          )}
+        </Button>
+      </div>
+
+      {isCreateMode && (
+        <Card className="mb-6">
+          <CardHeader>
+            <CardTitle className="text-xl">添加用户账号</CardTitle>
+            <CardDescription>创建新的系统用户账户</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Form {...form}>
+              <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+                <FormField
+                  control={form.control}
+                  name="account"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>账号</FormLabel>
+                      <FormControl>
+                        <div className="relative">
+                          <UserIcon className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
+                          <Input
+                            placeholder="请输入需要添加的账号"
+                            className="pl-8"
+                            {...field}
+                          />
+                        </div>
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="password"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>密码</FormLabel>
+                      <FormControl>
+                        <div className="relative">
+                          <LockIcon className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
+                          <Input
+                            type="password"
+                            placeholder="请输入密码"
+                            className="pl-8"
+                            {...field}
+                          />
+                        </div>
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="confirmPassword"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>确认密码</FormLabel>
+                      <FormControl>
+                        <div className="relative">
+                          <LockIcon className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
+                          <Input
+                            type="password"
+                            placeholder="请再次输入密码"
+                            className="pl-8"
+                            {...field}
+                          />
+                        </div>
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <div className="flex gap-2">
+                  <Button
+                    type="submit"
+                    disabled={loading}
+                  >
+                    {loading ? (
+                      <div className="flex items-center gap-2">
+                        <div className="h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
+                        创建中...
+                      </div>
+                    ) : (
+                      '创建用户'
+                    )}
+                  </Button>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    onClick={() => setIsCreateMode(false)}
+                  >
+                    取消
+                  </Button>
+                </div>
+              </form>
+            </Form>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* 用户列表直接显示在页面上 */}
+      <div className="space-y-4">
+        <div>
+          <h2 className="text-2xl font-semibold">用户列表</h2>
+          <p className="text-muted-foreground">管理系统中的所有用户账户</p>
         </div>
 
-        {isCreateMode && (
-          <Card className="mb-6">
-            <CardHeader>
-              <CardTitle className="text-xl">添加用户账号</CardTitle>
-              <CardDescription>创建新的系统用户账户</CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Form {...form}>
-                <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
-                  <FormField
-                    control={form.control}
-                    name="account"
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormLabel>账号</FormLabel>
-                        <FormControl>
-                          <div className="relative">
-                            <User className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
-                            <Input
-                              placeholder="请输入需要添加的账号"
-                              className="pl-8"
-                              {...field}
-                            />
-                          </div>
-                        </FormControl>
-                        <FormMessage />
-                      </FormItem>
-                    )}
-                  />
+        <div className="relative max-w-sm mt-4">
+          <SearchIcon className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
+          <Input
+            placeholder="搜索用户..."
+            className="pl-8"
+            value={searchTerm}
+            onChange={e => setSearchTerm(e.target.value)}
+          />
+        </div>
 
-                  <FormField
-                    control={form.control}
-                    name="password"
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormLabel>密码</FormLabel>
-                        <FormControl>
-                          <div className="relative">
-                            <Lock className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
-                            <Input
-                              type="password"
-                              placeholder="请输入密码"
-                              className="pl-8"
-                              {...field}
-                            />
-                          </div>
-                        </FormControl>
-                        <FormMessage />
-                      </FormItem>
-                    )}
-                  />
-
-                  <FormField
-                    control={form.control}
-                    name="confirmPassword"
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormLabel>确认密码</FormLabel>
-                        <FormControl>
-                          <div className="relative">
-                            <Lock className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
-                            <Input
-                              type="password"
-                              placeholder="请再次输入密码"
-                              className="pl-8"
-                              {...field}
-                            />
-                          </div>
-                        </FormControl>
-                        <FormMessage />
-                      </FormItem>
-                    )}
-                  />
-
-                  <div className="flex gap-2">
-                    <Button
-                      type="submit"
-                      disabled={loading}
-                    >
-                      {loading ? (
-                        <div className="flex items-center gap-2">
-                          <div className="h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
-                          创建中...
-                        </div>
-                      ) : (
-                        '创建用户'
-                      )}
-                    </Button>
-                    <Button
-                      type="button"
-                      variant="outline"
-                      onClick={() => setIsCreateMode(false)}
-                    >
-                      取消
-                    </Button>
-                  </div>
-                </form>
-              </Form>
-            </CardContent>
-          </Card>
-        )}
-
-        {/* 用户列表直接显示在页面上 */}
-        <div className="space-y-4">
-          <div>
-            <h2 className="text-2xl font-semibold">用户列表</h2>
-            <p className="text-muted-foreground">管理系统中的所有用户账户</p>
-          </div>
-
-          <div className="relative max-w-sm mt-4">
-            <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
-            <Input
-              placeholder="搜索用户..."
-              className="pl-8"
-              value={searchTerm}
-              onChange={e => setSearchTerm(e.target.value)}
-            />
-          </div>
-
-          <div className="border rounded-lg">
-            <Table>
-              <TableHeader>
+        <div className="border rounded-lg">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>账号</TableHead>
+                <TableHead>创建时间</TableHead>
+                <TableHead className="text-right">操作</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {filteredUsers.length === 0 ? (
                 <TableRow>
-                  <TableHead>账号</TableHead>
-                  <TableHead>创建时间</TableHead>
-                  <TableHead className="text-right">操作</TableHead>
+                  <TableCell colSpan={3} className="text-center py-4">
+                    暂无用户数据
+                  </TableCell>
                 </TableRow>
-              </TableHeader>
-              <TableBody>
-                {filteredUsers.length === 0 ? (
-                  <TableRow>
-                    <TableCell colSpan={3} className="text-center py-4">
-                      暂无用户数据
+              ) : (
+                filteredUsers.map(user => (
+                  <TableRow key={user.id}>
+                    <TableCell className="font-medium">{user.account}</TableCell>
+                    <TableCell>{new Date(user.createdAt).toLocaleDateString()}</TableCell>
+                    <TableCell className="text-right">
+                      <div className="flex justify-end">
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          className="h-5 border-0 hover:bg-transparent"
+                          onClick={() => handleDeleteUser(Number(user.id))}
+                        ><Trash2Icon className="h-4 w-4" />
+                        </Button>
+                      </div>
                     </TableCell>
                   </TableRow>
-                ) : (
-                  filteredUsers.map(user => (
-                    <TableRow key={user.id}>
-                      <TableCell className="font-medium">{user.account}</TableCell>
-                      <TableCell>{new Date(user.createdAt).toLocaleDateString()}</TableCell>
-                      <TableCell className="text-right">
-                        <div className="flex justify-end">
-                          <Button
-                            variant="outline"
-                            size="sm"
-                            className="h-5 border-0 hover:bg-transparent"
-                            onClick={() => handleDeleteUser(Number(user.id))}
-                          ><Trash2 className="h-4 w-4" />
-                          </Button>
-                        </div>
-                      </TableCell>
-                    </TableRow>
-                  ))
-                )}
-              </TableBody>
-            </Table>
-          </div>
+                ))
+              )}
+            </TableBody>
+          </Table>
         </div>
       </div>
       <Toaster richColors />
-    </div>
+    </Page>
   )
 }
diff --git a/src/components/page.tsx b/src/components/page.tsx
index a90d01a..61aa8df 100644
--- a/src/components/page.tsx
+++ b/src/components/page.tsx
@@ -1,10 +1,11 @@
+import { cn } from '@/lib/utils'
 import { ComponentProps, ReactNode } from 'react'
 
 export function Page(props: {
   children: ReactNode
 } & ComponentProps<'div'>) {
   return (
-    <div className="w-full h-full p-6 flex flex-col">
+    <div className={cn('w-full h-full p-6 flex flex-col', props.className)}>
       {props.children}
     </div>
   )
diff --git a/src/components/ui/pagination.tsx b/src/components/ui/pagination.tsx
index 91968c2..e7648a0 100644
--- a/src/components/ui/pagination.tsx
+++ b/src/components/ui/pagination.tsx
@@ -107,7 +107,7 @@ function Pagination({
   const paginationItems = generatePaginationItems()
 
   return (
-    <div className={`flex flex-wrap items-center justify-end gap-4 ${className || ''}`}>
+    <div className={`flex flex-wrap items-center gap-4 ${className || ''}`}>
       <div className="flex-none flex items-center gap-2 text-sm text-muted-foreground">
         共
         {' '}