diff --git a/apps/web/src/components/models/course/detail/CourseDetailDescription.tsx b/apps/web/src/components/models/course/detail/CourseDetailDescription.tsx
new file mode 100755
index 0000000..75a5104
--- /dev/null
+++ b/apps/web/src/components/models/course/detail/CourseDetailDescription.tsx
@@ -0,0 +1,36 @@
+import { Course } from "@nice/common";
+import React, { useContext } from "react";
+import { Typography, Skeleton } from "antd"; // 引入 antd 组件
+import { CourseDetailContext } from "./CourseDetailContext";
+
+interface CourseDetailProps {
+	course: Course;
+	isLoading: boolean;
+}
+
+export const CourseDetailDescription: React.FC<CourseDetailProps> = () => {
+	const { course, isLoading } = useContext(CourseDetailContext);
+	const { Paragraph, Title } = Typography;
+
+	return (
+		<div className="w-full bg-white shadow-md rounded-lg border border-gray-200 p-6">
+			{isLoading || !course ? (
+				<Skeleton active paragraph={{ rows: 4 }} />
+			) : (
+				<div className="space-y-4">
+					<div className="text-lg font-bold">{"课程简介"}</div>
+					<Paragraph
+						ellipsis={{
+							rows: 3,
+							expandable: true,
+							symbol: "展开",
+							onExpand: () => console.log("展开"),
+							// collapseText: "收起",
+						}}>
+						{course.content}
+					</Paragraph>
+				</div>
+			)}
+		</div>
+	);
+};