diff --git a/frontend/src/components/ui/page-container.tsx b/frontend/src/components/ui/page-container.tsx
new file mode 100644
index 00000000..6ea2a136
--- /dev/null
+++ b/frontend/src/components/ui/page-container.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+
+interface PageContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+}
+
+const PageContainer = React.forwardRef<HTMLDivElement, PageContainerProps>(
+    ({ className, children, ...props }, ref) => {
+        return (
+            <div
+                ref={ref}
+                className={cn(
+                    "flex w-full flex-col space-y-4 p-6",
+                    className
+                )}
+                {...props}
+            >
+                {children}
+            </div>
+        );
+    }
+);
+
+PageContainer.displayName = "PageContainer";
+
+export { PageContainer }; 
\ No newline at end of file
diff --git a/frontend/src/pages/Deploy/ProjectGroup/List/index.tsx b/frontend/src/pages/Deploy/ProjectGroup/List/index.tsx
index c1d60cc5..366385f1 100644
--- a/frontend/src/pages/Deploy/ProjectGroup/List/index.tsx
+++ b/frontend/src/pages/Deploy/ProjectGroup/List/index.tsx
@@ -1,5 +1,5 @@
 import React, {useState} from 'react';
-import {PageContainer} from '@ant-design/pro-layout';
+import {PageContainer} from '@/components/ui/page-container';
 import {
     PlusOutlined,
     EditOutlined,
@@ -269,77 +269,61 @@ const ProjectGroupList: React.FC = () => {
 
     return (
         <PageContainer>
-            <Card className="mb-4">
-                <CardHeader>
-                    <CardTitle>搜索条件</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <Form {...form}>
-                        <form onSubmit={form.handleSubmit(handleSearch)} className="flex items-end gap-4">
-                            <FormField
-                                control={form.control}
-                                name="projectGroupCode"
-                                render={({ field }) => (
-                                    <FormItem>
-                                        <FormLabel>项目组编码</FormLabel>
-                                        <FormControl>
-                                            <Input placeholder="请输入项目组编码" {...field} />
-                                        </FormControl>
-                                    </FormItem>
-                                )}
-                            />
+            <div className="flex items-center justify-between">
+                <h2 className="text-3xl font-bold tracking-tight">项目组管理</h2>
+                <Button onClick={() => setModalVisible(true)}>
+                    新建
+                </Button>
+            </div>
 
-                            <FormField
-                                control={form.control}
-                                name="projectGroupName"
-                                render={({ field }) => (
-                                    <FormItem>
-                                        <FormLabel>项目组名称</FormLabel>
-                                        <FormControl>
-                                            <Input placeholder="请输入项目组名称" {...field} />
-                                        </FormControl>
-                                    </FormItem>
-                                )}
-                            />
-
-                            <FormField
-                                control={form.control}
-                                name="type"
-                                render={({ field }) => (
-                                    <FormItem>
-                                        <FormLabel>项目组类型</FormLabel>
-                                        <Select
-                                            onValueChange={field.onChange}
-                                            defaultValue={field.value}
-                                        >
-                                            <FormControl>
-                                                <SelectTrigger className="w-[200px]">
-                                                    <SelectValue placeholder="请选择项目组类型" />
-                                                </SelectTrigger>
-                                            </FormControl>
-                                            <SelectContent>
-                                                <SelectItem value={ProjectGroupTypeEnum.PRODUCT}>产品型</SelectItem>
-                                                <SelectItem value={ProjectGroupTypeEnum.PROJECT}>项目型</SelectItem>
-                                            </SelectContent>
-                                        </Select>
-                                    </FormItem>
-                                )}
-                            />
-
-                            <Button
-                                type="button"
-                                variant="outline"
-                                onClick={() => form.reset()}
-                            >
-                                重置
-                            </Button>
-                            <Button type="submit">
-                                <SearchOutlined className="mr-1" />
-                                搜索
-                            </Button>
-                        </form>
-                    </Form>
-                </CardContent>
+            <Card>
+                <div className="p-6">
+                    <div className="flex items-center gap-4">
+                        <Input
+                            placeholder="项目组编码"
+                            value={form.getValues('projectGroupCode')}
+                            onChange={(e) => form.setValue('projectGroupCode', e.target.value)}
+                            className="max-w-[200px]"
+                        />
+                        <Input
+                            placeholder="项目组名称"
+                            value={form.getValues('projectGroupName')}
+                            onChange={(e) => form.setValue('projectGroupName', e.target.value)}
+                            className="max-w-[200px]"
+                        />
+                        <Select
+                            value={form.getValues('type')}
+                            onValueChange={(value) => form.setValue('type', value)}
+                        >
+                            <SelectTrigger className="max-w-[200px]">
+                                <SelectValue placeholder="项目组类型" />
+                            </SelectTrigger>
+                            <SelectContent>
+                                <SelectItem value={ProjectGroupTypeEnum.PRODUCT}>产品型</SelectItem>
+                                <SelectItem value={ProjectGroupTypeEnum.PROJECT}>项目型</SelectItem>
+                            </SelectContent>
+                        </Select>
+                        <Select
+                            value={form.getValues('enabled')?.toString()}
+                            onValueChange={(value) => form.setValue('enabled', value === 'true')}
+                        >
+                            <SelectTrigger className="max-w-[200px]">
+                                <SelectValue placeholder="状态" />
+                            </SelectTrigger>
+                            <SelectContent>
+                                <SelectItem value="true">启用</SelectItem>
+                                <SelectItem value="false">禁用</SelectItem>
+                            </SelectContent>
+                        </Select>
+                        <Button variant="outline" onClick={() => form.reset()}>
+                            重置
+                        </Button>
+                        <Button variant="ghost" onClick={() => handleSearch(form.getValues())}>
+                            <SearchOutlined className="mr-1" />
+                            搜索
+                        </Button>
+                    </div>
+                </div>
             </Card>
 
             <Card>