diff --git a/config-ui/src/api/pipeline/index.ts b/config-ui/src/api/pipeline/index.ts
index 0fe0f8a796b..ad06d28b399 100644
--- a/config-ui/src/api/pipeline/index.ts
+++ b/config-ui/src/api/pipeline/index.ts
@@ -21,7 +21,8 @@ import { request } from '@/utils';
 
 import { SubTasksRes } from './types';
 
-export const list = (): Promise<{ count: number; pipelines: IPipeline[] }> => request('/pipelines');
+export const list = (params: Pagination): Promise<{ count: number; pipelines: IPipeline[] }> =>
+  request('/pipelines', { data: params });
 
 export const get = (id: ID) => request(`/pipelines/${id}`);
 
diff --git a/config-ui/src/routes/pipeline/components/table.tsx b/config-ui/src/routes/pipeline/components/table.tsx
index 2dfb6fb4f95..d63ddd6cedc 100644
--- a/config-ui/src/routes/pipeline/components/table.tsx
+++ b/config-ui/src/routes/pipeline/components/table.tsx
@@ -41,14 +41,9 @@ interface Props {
     pageSize: number;
     onChange: (page: number) => void;
   };
-  noData?: {
-    text?: React.ReactNode;
-    btnText?: string;
-    onCreate?: () => void;
-  };
 }
 
-export const PipelineTable = ({ dataSource, pagination, noData }: Props) => {
+export const PipelineTable = ({ loading, dataSource, pagination }: Props) => {
   const [JSON, setJSON] = useState<any>(null);
   const [id, setId] = useState<ID | null>(null);
 
@@ -72,6 +67,7 @@ export const PipelineTable = ({ dataSource, pagination, noData }: Props) => {
       <Table
         rowKey="id"
         size="middle"
+        loading={loading}
         columns={[
           {
             title: 'ID',
diff --git a/config-ui/src/routes/pipeline/pipelines.tsx b/config-ui/src/routes/pipeline/pipelines.tsx
index 69c09cab18b..4f15b8fbeb3 100644
--- a/config-ui/src/routes/pipeline/pipelines.tsx
+++ b/config-ui/src/routes/pipeline/pipelines.tsx
@@ -28,7 +28,7 @@ export const Pipelines = () => {
   const [page, setPage] = useState(1);
   const [pageSize] = useState(20);
 
-  const { ready, data } = useRefreshData(() => API.pipeline.list());
+  const { ready, data } = useRefreshData(() => API.pipeline.list({ page, pageSize }), [page, pageSize]);
 
   const [dataSource, total] = useMemo(() => [(data?.pipelines ?? []).map((it) => it), data?.count ?? 0], [data]);
 
@@ -48,9 +48,6 @@ export const Pipelines = () => {
           pageSize,
           onChange: setPage,
         }}
-        noData={{
-          text: 'Add new projects to see engineering metrics based on projects.',
-        }}
       />
     </PageHeader>
   );