diff --git a/apps/web/src/app/main/courses/components/CourseCard.tsx b/apps/web/src/app/main/courses/components/CourseCard.tsx
index 963c691..40aa8da 100755
--- a/apps/web/src/app/main/courses/components/CourseCard.tsx
+++ b/apps/web/src/app/main/courses/components/CourseCard.tsx
@@ -58,24 +58,6 @@ export default function CourseCard({ course }: CourseCardProps) {
 							</Tag>
 						);
 					})}
-					{/* <Tag
-						color="blue"
-						className="px-3 py-1 rounded-full bg-blue-100 text-blue-600 border-0">
-						{course.terms?.[0].name}
-            
-					</Tag>
-
-					<Tag
-						color={
-							course.terms?.[1].name === "入门"
-								? "green"
-								: course.terms?.[1].name === "中级"
-									? "blue"
-									: "purple"
-						}
-						className="px-3 py-1 rounded-full border-0">
-						{course.terms?.[1].name}
-					</Tag> */}
 				</div>
 				<Title
 					level={4}
@@ -90,15 +72,12 @@ export default function CourseCard({ course }: CourseCardProps) {
 							{
 								course?.depts.length > 1 ?`${course.depts[0].name}等`:course.depts[0].name
 							}
-							{/* {course?.depts?.map((dept) => {return dept.name.length > 1 ?`${dept.name.slice}等`: dept.name})} */}
-							{/* {course?.depts?.map((dept)=>{return dept.name})} */}
 						</Text>
 					</div>
 					<span className="text-xs font-medium text-gray-500">
 						{course?.meta?.views ? `观看次数 ${course?.meta?.views}` : null}
 					</span>
 				</div>
-
 				<div className="pt-4 border-t border-gray-100 text-center">
 					<Button
 						type="primary"
diff --git a/apps/web/src/app/main/home/components/CategorySection.tsx b/apps/web/src/app/main/home/components/CategorySection.tsx
index f3ed9ec..40043a3 100755
--- a/apps/web/src/app/main/home/components/CategorySection.tsx
+++ b/apps/web/src/app/main/home/components/CategorySection.tsx
@@ -41,7 +41,7 @@ const CategorySection = () => {
 		window.scrollTo({top: 0,behavior: "smooth",})
 	},[]);
 	return (
-		<section className="py-32 relative overflow-hidden">
+		<section className="py-8 relative overflow-hidden">
 			<div className="max-w-screen-2xl mx-auto px-4 relative">
 				<div className="text-center mb-24">
 					<Title
diff --git a/apps/web/src/app/main/home/components/CoursesSection.tsx b/apps/web/src/app/main/home/components/CoursesSection.tsx
index aa2bf07..e78bc48 100755
--- a/apps/web/src/app/main/home/components/CoursesSection.tsx
+++ b/apps/web/src/app/main/home/components/CoursesSection.tsx
@@ -6,98 +6,98 @@ import { CoursesSectionTag } from "./CoursesSectionTag";
 import CourseList from "@web/src/components/models/course/list/CourseList";
 import LookForMore from "./LookForMore";
 interface GetTaxonomyProps {
-	categories: string[];
-	isLoading: boolean;
+  categories: string[];
+  isLoading: boolean;
 }
 function useGetTaxonomy({ type }): GetTaxonomyProps {
-	const { data, isLoading }: { data: TermDto[]; isLoading: boolean } =
-		api.term.findMany.useQuery({
-			where: {
-				taxonomy: {
-					slug: type,
-				},
-			},
-			take: 10, // 只取前10个
-		});
-	const categories = useMemo(() => {
-		const allCategories = isLoading
-			? []
-			: data?.map((course) => course.name);
-		return [...Array.from(new Set(allCategories))];
-	}, [data]);
-	return { categories, isLoading };
+  const { data, isLoading }: { data: TermDto[]; isLoading: boolean } =
+    api.term.findMany.useQuery({
+      where: {
+        taxonomy: {
+          slug: type,
+        },
+      },
+      take: 10, // 只取前10个
+    });
+  const categories = useMemo(() => {
+    const allCategories = isLoading
+      ? []
+      : data?.map((course) => course.name);
+    return [...Array.from(new Set(allCategories))];
+  }, [data]);
+  return { categories, isLoading };
 }
 const { Title, Text } = Typography;
 interface CoursesSectionProps {
-	title: string;
-	description: string;
-	initialVisibleCoursesCount?: number;
+  title: string;
+  description: string;
+  initialVisibleCoursesCount?: number;
 }
 const CoursesSection: React.FC<CoursesSectionProps> = ({
-	title,
-	description,
-	initialVisibleCoursesCount = 8,
+  title,
+  description,
+  initialVisibleCoursesCount = 8,
 }) => {
-	const [selectedCategory, setSelectedCategory] = useState<string>("全部");
-	const gateGory: GetTaxonomyProps = useGetTaxonomy({
-		type: TaxonomySlug.CATEGORY,
-	});
-	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">
-				<div className="flex justify-between items-end mb-16">
-					<div>
-						<Title
-							level={2}
-							className="font-bold text-5xl mb-6 bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
-							{title}
-						</Title>
-						<Text
-							type="secondary"
-							className="text-xl font-light text-gray-600">
-							{description}
-						</Text>
-					</div>
-				</div>
-				<div className="mb-12 flex flex-wrap gap-4">
-					{gateGory.isLoading ? (
-						<Skeleton paragraph={{ rows: 2 }}></Skeleton>
-					) : (
-						<>
-							{["全部", ...gateGory.categories].map(
-								(category, idx) => (
-									<CoursesSectionTag
-										key={idx}
-										category={category}
-										selectedCategory={selectedCategory}
-										setSelectedCategory={
-											setSelectedCategory
-										}
-									/>
-								)
-							)}
-						</>
-					)}
-				</div>
-				<CourseList
-					params={{
-						page: 1,
-						pageSize: initialVisibleCoursesCount,
-						where: {
-							terms: !(selectedCategory === "全部")
-								? {
-										some: {
-											name: selectedCategory,
-										},
-									}
-								: {},
-						},
-					}}
-					showPagination={false}
-					cols={4}></CourseList>
-				<LookForMore to={"/courses"}></LookForMore>
-			</div>
-		</section>
-	);
+  const [selectedCategory, setSelectedCategory] = useState<string>("全部");
+  const gateGory: GetTaxonomyProps = useGetTaxonomy({
+    type: TaxonomySlug.CATEGORY,
+  });
+  return (
+    <section className="relative py-20 overflow-hidden bg-gradient-to-b from-blue-50 to-gray-50 ">
+      <div className="max-w-screen-2xl mx-auto px-6 relative">
+        <div className="flex justify-between items-end mb-16 bg-blue-100 rounded-lg p-6">
+          <div>
+            <Title
+              level={2}
+              className="font-bold text-5xl mb-6 bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
+              {title}
+            </Title>
+            <Text
+              type="secondary"
+              className="text-xl font-light text-gray-600">
+              {description}
+            </Text>
+          </div>
+        </div>
+        <div className="mb-12 flex flex-wrap gap-4">
+          {gateGory.isLoading ? (
+            <Skeleton paragraph={{ rows: 2 }}></Skeleton>
+          ) : (
+            <>
+              {["全部", ...gateGory.categories].map(
+                (category, idx) => (
+                  <CoursesSectionTag
+                    key={idx}
+                    category={category}
+                    selectedCategory={selectedCategory}
+                    setSelectedCategory={
+                      setSelectedCategory
+                    }
+                  />
+                )
+              )}
+            </>
+          )}
+        </div>
+        <CourseList
+          params={{
+            page: 1,
+            pageSize: initialVisibleCoursesCount,
+            where: {
+              terms: !(selectedCategory === "全部")
+                ? {
+                  some: {
+                    name: selectedCategory,
+                  },
+                }
+                : {},
+            },
+          }}
+          showPagination={false}
+          cols={4}></CourseList>
+        <LookForMore to={"/courses"}></LookForMore>
+      </div>
+    </section>
+  );
 };
 export default CoursesSection;
diff --git a/apps/web/src/app/main/layout/MainLayout.tsx b/apps/web/src/app/main/layout/MainLayout.tsx
index 0a0074b..b573e2f 100755
--- a/apps/web/src/app/main/layout/MainLayout.tsx
+++ b/apps/web/src/app/main/layout/MainLayout.tsx
@@ -9,9 +9,9 @@ const { Content } = Layout;
 export function MainLayout() {
 	return (
 		<MainProvider>
-			<Layout className="min-h-screen">
+			<Layout className="min-h-screen  bg-gray-100">
 				<MainHeader />
-				<Content className="mt-16 bg-gray-50">
+				<Content className="mt-16 bg-gray-50 ">
 					<Outlet />
 				</Content>
 				<MainFooter />