diff --git a/apps/web/src/app/main/courses/components/CourseList.tsx b/apps/web/src/app/main/courses/components/CourseList.tsx
index 97001f0..2c1ce08 100755
--- a/apps/web/src/app/main/courses/components/CourseList.tsx
+++ b/apps/web/src/app/main/courses/components/CourseList.tsx
@@ -58,7 +58,7 @@ export default function CourseList({
 		<div className="space-y-6">
 			{courses.length > 0 ? (
 				<>
-					<div className={`grid grid-cols-${cols} gap-6`}>
+					<div className={`grid lg:grid-cols-${cols} gap-6`}>
 						{isLoading ? (
 							<Skeleton paragraph={{ rows: 5 }}></Skeleton>
 						) : (
diff --git a/apps/web/src/app/main/home/components/CategorySection.tsx b/apps/web/src/app/main/home/components/CategorySection.tsx
index ddfeab4..9584193 100755
--- a/apps/web/src/app/main/home/components/CategorySection.tsx
+++ b/apps/web/src/app/main/home/components/CategorySection.tsx
@@ -1,18 +1,13 @@
 import React, { useState, useCallback, useEffect, useMemo } from "react";
-import { Typography, Button, Spin } from "antd";
+import { Typography, Button, Spin, Skeleton } from "antd";
 import { stringToColor, TaxonomySlug, TermDto } from "@nice/common";
 import { api } from "@nice/client";
 import { ControlOutlined } from "@ant-design/icons";
 import { useNavigate, useSearchParams } from "react-router-dom";
+import LookForMore from "./LookForMore";
+import CategorySectionCard from "./CategorySectionCard";
 
 const { Title, Text } = Typography;
-
-interface CourseCategory {
-	name: string;
-	count: number;
-	description: string;
-}
-
 const CategorySection = () => {
 	const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
 	const [showAll, setShowAll] = useState(false);
@@ -39,9 +34,6 @@ const CategorySection = () => {
 		[]
 	);
 	useEffect(() => {
-		console.log(courseCategoriesData);
-		// 如果 showAll 为 true，则显示所有分类数据，
-		// 如果 showAll 为 false，则只显示前 8 个分类数据，
 		if (!isLoading) {
 			if (showAll) {
 				setDisplayedCategories(courseCategoriesData);
@@ -50,13 +42,6 @@ const CategorySection = () => {
 			}
 		}
 	}, [courseCategoriesData, showAll]);
-	// const courseCategories: CourseCategory[] = useMemo(() => {
-	//   return data?.map((term) => ({
-	//     name: term.name,
-	//     count:  term.hasChildren ? term.children.length : 0,
-	//     description: term.description
-	//   })) || [];
-	// },[data])
 	const handleMouseEnter = useCallback((index: number) => {
 		setHoveredIndex(index);
 	}, []);
@@ -82,106 +67,27 @@ const CategorySection = () => {
 				</div>
 				<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
 					{isLoading ? (
-						<Spin></Spin>
+						<Skeleton></Skeleton>
 					) : (
 						displayedCategories.map((category, index) => {
 							const categoryColor = stringToColor(category.name);
 							const isHovered = hoveredIndex === index;
 
 							return (
-								<div
-									key={index}
-									className="group relative min-h-[130px] rounded-2xl transition-all duration-700 ease-out cursor-pointer will-change-transform hover:-translate-y-2"
-									onMouseEnter={() => handleMouseEnter(index)}
-									onMouseLeave={handleMouseLeave}
-									role="button"
-									tabIndex={0}
-									aria-label={`查看${category.name}课程类别`}
-									onClick={() => {
-										console.log(category.name);
-										navigate(
-											`/courses?category=${category.name}`
-										);
-										window.scrollTo({
-											top: 0,
-											behavior: "smooth",
-										});
-									}}>
-									<div className="absolute -inset-0.5 bg-gradient-to-r from-gray-200 to-gray-300 opacity-50 rounded-2xl transition-all duration-700 group-hover:opacity-75" />
-									<div
-										className={`absolute inset-0 rounded-2xl bg-gradient-to-br from-white to-gray-50 shadow-lg transition-all duration-700 ease-out ${
-											isHovered
-												? "scale-[1.02] bg-opacity-95"
-												: "scale-100 bg-opacity-90"
-										}`}
-									/>
-									<div
-										className={`absolute inset-0 rounded-2xl transition-all duration-700 ease-out ${
-											isHovered
-												? "shadow-[0_8px_30px_rgb(0,0,0,0.12)]"
-												: "shadow-none opacity-0"
-										}`}
-									/>
-									<div
-										className={`absolute top-0 left-1/2 -translate-x-1/2 h-1 rounded-full transition-all duration-500 ease-out `}
-										style={{
-											backgroundColor: categoryColor,
-										}}
-									/>
-									<div className="relative w-full h-full p-6">
-										<div className="flex w-2/3 absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 flex-col space-y-4 mb-4">
-											<Text
-												strong
-												className="text-xl font-medium tracking-wide">
-												{category.name}
-											</Text>
-											{/* <span
-                        className={`px-3 py-1 rounded-full text-sm w-fit font-medium transition-all duration-500 ease-out ${
-                          isHovered ? 'shadow-md scale-105' : ''
-                        }`}
-                        style={{
-                          backgroundColor: `${categoryColor}15`,
-                          color: categoryColor
-                        }}
-                      >
-                        {category.children.length} 门课程
-                      </span> */}
-										</div>
-										<Text
-											type="secondary"
-											className="block text-sm leading-relaxed opacity-90">
-											{category.description}
-										</Text>
-										<div
-											className={` mt-6 absolute bottom-4 right-6 text-sm font-medium flex items-center space-x-2 transition-all duration-500 ease-out `}
-											style={{ color: categoryColor }}>
-											<span>了解更多</span>
-											<span
-												className={`transform transition-all duration-500 ease-out `}>
-												→
-											</span>
-										</div>
-									</div>
-								</div>
+								<CategorySectionCard
+									key={index} 
+									index={index}
+									category={category}
+									categoryColor={categoryColor}
+									isHovered={isHovered}
+									handleMouseEnter={handleMouseEnter}
+									handleMouseLeave={handleMouseLeave}
+								/>
 							);
 						})
 					)}
 				</div>
-				{!isLoading && (
-					<div className="flex justify-center mt-12">
-						<Button
-							type="default"
-							size="large"
-							className="px-8 h-12 text-base font-medium hover:shadow-md transition-all duration-300"
-							onClick={() => {
-								//setShowAll(!showAll)
-								navigate("/courses");
-								window.scrollTo({ top: 0, behavior: "smooth" });
-							}}>
-							{showAll ? "收起" : "查看更多分类"}
-						</Button>
-					</div>
-				)}
+				<LookForMore to={"/courses"}></LookForMore>
 			</div>
 		</section>
 	);
diff --git a/apps/web/src/app/main/home/components/CategorySectionCard.tsx b/apps/web/src/app/main/home/components/CategorySectionCard.tsx
new file mode 100644
index 0000000..a91525c
--- /dev/null
+++ b/apps/web/src/app/main/home/components/CategorySectionCard.tsx
@@ -0,0 +1,64 @@
+import { useNavigate } from "react-router-dom";
+import { Typography } from "antd";
+export default function CategorySectionCard({index,handleMouseEnter,handleMouseLeave,category,categoryColor,isHovered,}) {
+    const navigate = useNavigate()
+    const { Title, Text } = Typography;
+    return (
+        <div
+            key={index}
+            className="group relative min-h-[130px] rounded-2xl transition-all duration-700 ease-out cursor-pointer will-change-transform hover:-translate-y-2"
+            onMouseEnter={() => handleMouseEnter(index)}
+            onMouseLeave={handleMouseLeave}
+            role="button"
+            tabIndex={0}
+            aria-label={`查看${category.name}课程类别`}
+            onClick={() => {
+                console.log(category.name);
+                navigate(
+                    `/courses?category=${category.name}`
+                );
+                window.scrollTo({
+                    top: 0,
+                    behavior: "smooth",
+                });
+            }}>
+            <div className="absolute -inset-0.5 bg-gradient-to-r from-gray-200 to-gray-300 opacity-50 rounded-2xl transition-all duration-700 group-hover:opacity-75" />
+            <div
+                className={`absolute inset-0 rounded-2xl bg-gradient-to-br from-white to-gray-50 shadow-lg transition-all duration-700 ease-out ${isHovered
+                        ? "scale-[1.02] bg-opacity-95"
+                        : "scale-100 bg-opacity-90"
+                    }`}
+            />
+            <div
+                className={`absolute inset-0 rounded-2xl transition-all duration-700 ease-out ${isHovered
+                        ? "shadow-[0_8px_30px_rgb(0,0,0,0.12)]"
+                        : "shadow-none opacity-0"
+                    }`}
+            />
+            <div
+                className={`absolute w-1/2 top-0 left-1/2 -translate-x-1/2 h-1 rounded-full transition-all duration-500 ease-out `}
+                style={{
+                    backgroundColor: categoryColor,
+                }}
+            />
+            <div className="relative w-full h-full p-6">
+                <div className="flex w-2/3 absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 flex-col space-y-4 mb-4">
+                    <Text
+                        strong
+                        className="text-xl font-medium tracking-wide">
+                        {category.name}
+                    </Text>
+                </div>
+                <div
+                    className={` mt-6 absolute bottom-4 right-6 text-sm font-medium flex items-center space-x-2 transition-all duration-500 ease-out `}
+                    style={{ color: categoryColor }}>
+                    <span>了解更多</span>
+                    <span
+                        className={`transform transition-all duration-500 ease-out `}>
+                        →
+                    </span>
+                </div>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/apps/web/src/app/main/home/components/CoursesSection.tsx b/apps/web/src/app/main/home/components/CoursesSection.tsx
index bbbbfde..bc2e5a4 100755
--- a/apps/web/src/app/main/home/components/CoursesSection.tsx
+++ b/apps/web/src/app/main/home/components/CoursesSection.tsx
@@ -6,6 +6,7 @@ import { TaxonomySlug, TermDto } from "@nice/common";
 import { api } from "@nice/client";
 import { CoursesSectionTag } from "./CoursesSectionTag";
 import CourseList from "../../courses/components/CourseList";
+import LookForMore from "./LookForMore";
 interface GetTaxonomyProps {
 	categories: string[];
 	isLoading: boolean;
@@ -97,20 +98,7 @@ const CoursesSection: React.FC<CoursesSectionProps> = ({
 					}}
 					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>
-						<div className="flex justify-end">
-							<Button
-								type="link"
-								onClick={() => navigate("/courses")}
-								className="flex items-center gap-2 text-gray-600 hover:text-blue-600 font-medium transition-colors duration-300">
-								查看更多
-								<ArrowRightOutlined />
-							</Button>
-						</div>
-					</div>
-				}
+				<LookForMore to={"/courses"}></LookForMore>
 			</div>
 		</section>
 	);
diff --git a/apps/web/src/app/main/home/components/LookForMore.tsx b/apps/web/src/app/main/home/components/LookForMore.tsx
new file mode 100644
index 0000000..88e1b41
--- /dev/null
+++ b/apps/web/src/app/main/home/components/LookForMore.tsx
@@ -0,0 +1,24 @@
+import { ArrowRightOutlined } from "@ant-design/icons";
+import { Button } from "antd";
+import { useNavigate } from "react-router-dom";
+
+export default function LookForMore({to}:{to:string}) {
+    const navigate = useNavigate();
+    return (
+        <>
+            <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>
+                <div className="flex justify-end">
+                    <Button
+                        type="link"
+                        onClick={() => navigate(to)}
+                        className="flex items-center gap-2 text-gray-600 hover:text-blue-600 font-medium transition-colors duration-300">
+                        查看更多
+                        <ArrowRightOutlined />
+                    </Button>
+                </div>
+            </div>
+        </>
+    )
+
+}