diff --git a/apps/web/src/components/models/course/detail/CourseDetailDescription.tsx b/apps/web/src/components/models/course/detail/CourseDetailDescription.tsx
index ede0856..05a3126 100755
--- a/apps/web/src/components/models/course/detail/CourseDetailDescription.tsx
+++ b/apps/web/src/components/models/course/detail/CourseDetailDescription.tsx
@@ -26,14 +26,14 @@ export const CourseDetailDescription: React.FC = () => {
 	const { id } = useParams();
 	return (
 		// <div className="w-full bg-white shadow-md rounded-lg border border-gray-200 p-5 my-4">
-		<div className="w-full   px-5 my-4">
+		<div className="w-full   px-5 my-2">
 			{isLoading || !course ? (
 				<Skeleton active paragraph={{ rows: 4 }} />
 			) : (
 				<div className="space-y-2">
 					{!selectedLectureId && course?.meta?.thumbnail && (
 						<>
-							<div className="relative  my-4 overflow-hidden flex justify-center items-center">
+							<div className="relative  mb-4 overflow-hidden flex justify-center items-center">
 								<Image
 									src={course?.meta?.thumbnail}
 									preview={false}
@@ -75,43 +75,6 @@ export const CourseDetailDescription: React.FC = () => {
 								);
 							})}
 						</div>
-						<div className="text-gray-600 flex justify-start gap-5">
-							<div className="flex gap-1">
-								<CalendarOutlined></CalendarOutlined>
-								{"创建于:"}
-								{dayjs(course?.createdAt).format(
-									"YYYY年M月D日"
-								)}
-							</div>
-							<div className="flex gap-1">
-								<ReloadOutlined></ReloadOutlined>
-								{"更新于:"}
-								{dayjs(course?.updatedAt).format(
-									"YYYY年M月D日"
-								)}
-							</div>
-							<div className="flex gap-1">
-								<EyeOutlined></EyeOutlined>
-								<div>{`观看次数${course?.meta?.views || 0}`}</div>
-							</div>
-							<div className="flex gap-1">
-								<BookOutlined />
-								<div>{`学习人数${course?.studentIds?.length || 0}`}</div>
-							</div>
-							{canEdit && (
-								<div
-									className="flex gap-1 text-primary hover:cursor-pointer"
-									onClick={() => {
-										const url = id
-											? `/course/${id}/editor`
-											: "/course/editor";
-										navigate(url);
-									}}>
-									<EditTwoTone></EditTwoTone>
-									{"点击编辑课程"}
-								</div>
-							)}
-						</div>
 					</div>
 					<Paragraph
 						className="text-gray-600"
diff --git a/apps/web/src/components/models/course/detail/CourseDetailDisplayArea.tsx b/apps/web/src/components/models/course/detail/CourseDetailDisplayArea.tsx
index c17ab16..2f4c022 100755
--- a/apps/web/src/components/models/course/detail/CourseDetailDisplayArea.tsx
+++ b/apps/web/src/components/models/course/detail/CourseDetailDisplayArea.tsx
@@ -9,6 +9,16 @@ import CollapsibleContent from "@web/src/components/common/container/Collapsible
 import { Skeleton } from "antd";
 import { CoursePreview } from "./CoursePreview/CoursePreview";
 import ResourcesShower from "@web/src/components/common/uploader/ResourceShower";
+import {
+	BookOutlined,
+	CalendarOutlined,
+	EditTwoTone,
+	EyeOutlined,
+	ReloadOutlined,
+} from "@ant-design/icons";
+import dayjs from "dayjs";
+import { useNavigate } from "react-router-dom";
+import CourseDetailTitle from "./CourseDetailTitle";
 
 // interface CourseDetailDisplayAreaProps {
 // 	// course: Course;
@@ -19,8 +29,15 @@ import ResourcesShower from "@web/src/components/common/uploader/ResourceShower"
 
 export const CourseDetailDisplayArea: React.FC = () => {
 	// 创建滚动动画效果
-	const { course, isLoading, lecture, lectureIsLoading, selectedLectureId } =
-		useContext(CourseDetailContext);
+	const {
+		course,
+		isLoading,
+		canEdit,
+		lecture,
+		lectureIsLoading,
+		selectedLectureId,
+	} = useContext(CourseDetailContext);
+	const navigate = useNavigate();
 	const { scrollY } = useScroll();
 	const videoOpacity = useTransform(scrollY, [0, 200], [1, 0.8]);
 	return (
@@ -29,11 +46,7 @@ export const CourseDetailDisplayArea: React.FC = () => {
 			{lectureIsLoading && (
 				<Skeleton active paragraph={{ rows: 4 }} title={false} />
 			)}
-			<div className="flex justify-center flex-col items-center gap-2 w-full my-2  px-8">
-				<div className="flex justify-start w-full text-2xl font-bold">
-					{course?.title}
-				</div>
-			</div>
+			<CourseDetailTitle></CourseDetailTitle>
 			{selectedLectureId &&
 				!lectureIsLoading &&
 				lecture?.meta?.type === LectureType.VIDEO && (
@@ -67,7 +80,7 @@ export const CourseDetailDisplayArea: React.FC = () => {
 						</div>
 					</div>
 				)}
-			<div className="flex justify-center flex-col items-center gap-2 w-full my-2  px-4">
+			<div className="flex justify-center flex-col items-center gap-2 w-full my-2  ">
 				<CourseDetailDescription />
 			</div>
 			{/* 课程内容区域 */}
diff --git a/apps/web/src/components/models/course/detail/CourseDetailLayout.tsx b/apps/web/src/components/models/course/detail/CourseDetailLayout.tsx
index 42b3d55..6154bbe 100755
--- a/apps/web/src/components/models/course/detail/CourseDetailLayout.tsx
+++ b/apps/web/src/components/models/course/detail/CourseDetailLayout.tsx
@@ -24,7 +24,7 @@ export default function CourseDetailLayout() {
 			{/* 添加 Header 组件 */}
 			{/* 主内容区域 */}
 			{/* 为了防止 Header 覆盖内容，添加上边距 */}
-			<div className="pt-16">
+			<div className="pt-16 px-32">
 				{" "}
 				{/* 添加这个包装 div */}
 				<motion.div
diff --git a/apps/web/src/components/models/course/detail/CourseDetailTitle.tsx b/apps/web/src/components/models/course/detail/CourseDetailTitle.tsx
new file mode 100644
index 0000000..3ebc083
--- /dev/null
+++ b/apps/web/src/components/models/course/detail/CourseDetailTitle.tsx
@@ -0,0 +1,57 @@
+import { useContext } from "react";
+import { CourseDetailContext } from "./CourseDetailContext";
+import { useNavigate } from "react-router-dom";
+import { BookOutlined, CalendarOutlined, EditTwoTone, EyeOutlined, ReloadOutlined } from "@ant-design/icons";
+import dayjs from "dayjs";
+
+export default function CourseDetailTitle() {
+	const {
+		course,
+		isLoading,
+		canEdit,
+		lecture,
+		lectureIsLoading,
+		selectedLectureId,
+	} = useContext(CourseDetailContext);
+	const navigate = useNavigate();
+	return (
+		<div className="flex justify-center flex-col items-center gap-2 w-full my-2  px-6">
+			<div className="flex justify-start w-full text-2xl font-bold">
+				{course?.title}
+			</div>
+			<div className="text-gray-600 flex w-full justify-start gap-5">
+				<div className="flex gap-1">
+					<CalendarOutlined></CalendarOutlined>
+					{"创建于:"}
+					{dayjs(course?.createdAt).format("YYYY年M月D日")}
+				</div>
+				<div className="flex gap-1">
+					<ReloadOutlined></ReloadOutlined>
+					{"更新于:"}
+					{dayjs(course?.updatedAt).format("YYYY年M月D日")}
+				</div>
+				<div className="flex gap-1">
+					<EyeOutlined></EyeOutlined>
+					<div>{`观看次数${course?.meta?.views || 0}`}</div>
+				</div>
+				<div className="flex gap-1">
+					<BookOutlined />
+					<div>{`学习人数${course?.studentIds?.length || 0}`}</div>
+				</div>
+				{canEdit && (
+					<div
+						className="flex gap-1 text-primary hover:cursor-pointer"
+						onClick={() => {
+							const url = course?.id
+								? `/course/${course?.id}/editor`
+								: "/course/editor";
+							navigate(url);
+						}}>
+						<EditTwoTone></EditTwoTone>
+						{"点击编辑课程"}
+					</div>
+				)}
+			</div>
+		</div>
+	);
+}