diff --git a/apps/web/src/app/main/home/components/CoursesSection.tsx b/apps/web/src/app/main/home/components/CoursesSection.tsx
index 61948a1..bbbbfde 100755
--- a/apps/web/src/app/main/home/components/CoursesSection.tsx
+++ b/apps/web/src/app/main/home/components/CoursesSection.tsx
@@ -1,20 +1,11 @@
-import React, { useState, useMemo, useEffect } from "react";
+import React, { useState, useMemo } from "react";
 import { useNavigate } from "react-router-dom";
-import { Button, Card, Typography, Tag, Spin, Empty } from "antd";
-import {
-	PlayCircleOutlined,
-	TeamOutlined,
-	ArrowRightOutlined,
-} from "@ant-design/icons";
-import {
-	courseDetailSelect,
-	CourseDto,
-	TaxonomySlug,
-	TermDto,
-} from "@nice/common";
+import { Button, Typography, Skeleton } from "antd";
+import { ArrowRightOutlined } from "@ant-design/icons";
+import { TaxonomySlug, TermDto } from "@nice/common";
 import { api } from "@nice/client";
-import CourseCard from "../../courses/components/CourseCard";
 import { CoursesSectionTag } from "./CoursesSectionTag";
+import CourseList from "../../courses/components/CourseList";
 interface GetTaxonomyProps {
 	categories: string[];
 	isLoading: boolean;
@@ -27,11 +18,7 @@ function useGetTaxonomy({ type }): GetTaxonomyProps {
 					slug: type,
 				},
 			},
-			include: {
-				children: true,
-			},
 			take: 10, // 只取前10个
-			orderBy: {},
 		});
 	const categories = useMemo(() => {
 		const allCategories = isLoading
@@ -41,26 +28,6 @@ function useGetTaxonomy({ type }): GetTaxonomyProps {
 	}, [data]);
 	return { categories, isLoading };
 }
-// 不同分类跳转
-function useFetchCoursesByCategory(category: string) {
-	const isAll = category === "全部";
-	const { data, isLoading }: { data: CourseDto[]; isLoading: boolean } =
-		api.post.findMany.useQuery({
-			where: isAll
-				? {}
-				: {
-						terms: {
-							some: {
-								name: category,
-							},
-						},
-					},
-			take: 8,
-			select: courseDetailSelect,
-		});
-
-	return { data, isLoading };
-}
 const { Title, Text } = Typography;
 interface CoursesSectionProps {
 	title: string;
@@ -70,25 +37,13 @@ interface CoursesSectionProps {
 const CoursesSection: React.FC<CoursesSectionProps> = ({
 	title,
 	description,
+	initialVisibleCoursesCount = 8,
 }) => {
 	const navigate = useNavigate();
 	const [selectedCategory, setSelectedCategory] = useState<string>("全部");
 	const gateGory: GetTaxonomyProps = useGetTaxonomy({
 		type: TaxonomySlug.CATEGORY,
 	});
-	const { data, isLoading: isDataLoading } =
-		useFetchCoursesByCategory(selectedCategory);
-	const filteredCourses = useMemo(() => {
-		return selectedCategory === "全部"
-			? data
-			: data?.filter((c) =>
-					c.terms.some((t) => t.name === selectedCategory)
-				);
-	}, [selectedCategory, data]);
-	const displayedCourses = isDataLoading ? [] : filteredCourses;
-  useEffect(()=>{
-    console.log(data)
-  })
 	return (
 		<section className="relative py-20 overflow-hidden bg-gradient-to-b from-gray-50 to-white">
 			<div className="max-w-screen-2xl mx-auto px-6 relative">
@@ -106,28 +61,42 @@ const CoursesSection: React.FC<CoursesSectionProps> = ({
 						</Text>
 					</div>
 				</div>
-
 				<div className="mb-12 flex flex-wrap gap-4">
 					{gateGory.isLoading ? (
-						<Spin className="m-3" />
+						<Skeleton paragraph={{ rows: 2 }}></Skeleton>
 					) : (
 						<>
-							{['全部',...gateGory.categories].map((category,idx) => (
-								<CoursesSectionTag key={idx} category= {category} selectedCategory={selectedCategory} setSelectedCategory={setSelectedCategory}/>
-							))}
+							{["全部", ...gateGory.categories].map(
+								(category, idx) => (
+									<CoursesSectionTag
+										key={idx}
+										category={category}
+										selectedCategory={selectedCategory}
+										setSelectedCategory={
+											setSelectedCategory
+										}
+									/>
+								)
+							)}
 						</>
 					)}
 				</div>
-
-				<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
-					{isDataLoading ? (
-						<Spin className="m-3" />
-					) : (
-						displayedCourses?.map((course,index) => (
-							<CourseCard course={course} key={index}></CourseCard>
-						))
-					)}
-				</div>
+				<CourseList
+					params={{
+						page: 1,
+						pageSize: initialVisibleCoursesCount,
+						where: {
+							terms: !(selectedCategory === "全部")
+								? {
+										some: {
+											name: selectedCategory,
+										},
+									}
+								: {},
+						},
+					}}
+					showPagination={false}
+					cols={4}></CourseList>
 				{
 					<div className="flex items-center gap-4 justify-between mt-12">
 						<div className="h-[1px] flex-grow bg-gradient-to-r from-transparent via-gray-300 to-transparent"></div>