diff --git a/solidui-web/src/pages/Project/ProjectList.tsx b/solidui-web/src/pages/Project/ProjectList.tsx
index 30fb5f3..27b926e 100644
--- a/solidui-web/src/pages/Project/ProjectList.tsx
+++ b/solidui-web/src/pages/Project/ProjectList.tsx
@@ -16,7 +16,7 @@
  */
 
 import React from "react";
-import { Input, Button, Form, Spin, Modal } from "antd";
+import { Input, Button, Form, Spin, Modal, Pagination } from "antd";
 import { Close } from "@icon-park/react";
 import useProject from "./useProject";
 import ProjectCard from "./_components/ProjectCard";
@@ -39,6 +39,10 @@ export default function ProjectList() {
 		toggleModal,
 		handleSearch,
 		query,
+		setSearchName,
+		searchName,
+		pagination,
+		handlePaginationChange,
 	} = useProject();
 
 	function renderModalContent() {
@@ -148,6 +152,11 @@ export default function ProjectList() {
 						<Search
 							placeholder="input search text"
 							onSearch={handleSearch}
+							onPressEnter={handleSearch}
+							value={searchName}
+							onChange={(e) => {
+								setSearchName(e.target.value);
+							}}
 							enterButton
 							style={{
 								width: 300,
@@ -169,6 +178,15 @@ export default function ProjectList() {
 					<Spin tip="loading" spinning={loading}>
 						<div className="projects-list">{renderProjects()}</div>
 					</Spin>
+					<div style={{ display: "flex", justifyContent: "flex-end" }}>
+						<Pagination
+							showSizeChanger={false}
+							pageSize={pagination.size}
+							current={pagination.current}
+							total={pagination.total}
+							onChange={handlePaginationChange}
+						/>
+					</div>
 				</div>
 			</div>
 
diff --git a/solidui-web/src/pages/Project/useProject.ts b/solidui-web/src/pages/Project/useProject.ts
index b259d10..59aff27 100644
--- a/solidui-web/src/pages/Project/useProject.ts
+++ b/solidui-web/src/pages/Project/useProject.ts
@@ -31,27 +31,40 @@ function useProject() {
 		current: number;
 		size: number;
 		total: number;
-	}>();
+	}>({ current: 1, size: 12, total: 12 });
+	const [searchName, setSearchName] = useState<string>("");
 
 	const popupConverMap = useRef<Map<string, boolean>>(new Map());
 
 	useEffect(() => {
-		query();
-		return () => {};
-	}, []);
+		query({
+			pageNo: pagination.current,
+			pageSize: pagination.size,
+			searchName,
+		});
+	}, [pagination?.current, pagination?.size]);
 
-	async function handleSearch(value: string) {
-		query({ pageNo: 1, pageSize: 10, searchName: value });
+	function handlePaginationChange(current: number, size: number) {
+		setPagination({ current, size, total: pagination.total });
+	}
+	async function handleSearch() {
+		query({ pageNo: 1, pageSize: 12, searchName });
 	}
 
-	async function query(params: any = { pageNo: 1, pageSize: 10 }) {
+	async function query(
+		params: any = {
+			pageNo: 1,
+			pageSize: 12,
+			searchName: "",
+		},
+	) {
 		setLoading(true);
 		const res = await Apis.project.query(params);
 		if (res.ok) {
 			const data = res.data || ({} as any);
 			const current = data.currentPage || 1;
-			const size = data.pageSize || 10;
-			const total = data.total || 0;
+			const size = data.pageSize || 12;
+			const total = data.total || 12;
 			const records = data.totalList || [];
 			records.forEach((item: any) => {
 				popupConverMap.current.set(`${item.id}`, false);
@@ -106,12 +119,15 @@ function useProject() {
 		toggleModal,
 		query,
 		handleSearch,
+		handlePaginationChange,
 		create,
 		del,
 		toggleCover,
 		projects,
 		pagination,
 		popupConverMap,
+		searchName,
+		setSearchName,
 	};
 }