diff --git a/apps/web/src/components/models/course/detail/CourseDetailDisplayArea.tsx b/apps/web/src/components/models/course/detail/CourseDetailDisplayArea.tsx
index ee99da1..f6f4913 100755
--- a/apps/web/src/components/models/course/detail/CourseDetailDisplayArea.tsx
+++ b/apps/web/src/components/models/course/detail/CourseDetailDisplayArea.tsx
@@ -2,22 +2,20 @@
 import { motion, useScroll, useTransform } from "framer-motion";
 import React, { useContext, useRef, useState } from "react";
 import { VideoPlayer } from "@web/src/components/presentation/video-player/VideoPlayer";
-import { CourseDetailDescription } from "./CourseDetailDescription/CourseDetailDescription";
+import { CourseDetailDescription } from "./CourseDetailDescription";
 import { Course, LectureType, PostType } from "@nice/common";
 import { CourseDetailContext } from "./CourseDetailContext";
 import CollapsibleContent from "@web/src/components/common/container/CollapsibleContent";
 import { Skeleton } from "antd";
 
-interface CourseDetailDisplayAreaProps {
-	// course: Course;
-	videoSrc?: string;
-	videoPoster?: string;
-	// isLoading?: boolean;
-}
+// interface CourseDetailDisplayAreaProps {
+// 	// course: Course;
+// 	// videoSrc?: string;
+// 	// videoPoster?: string;
+// 	// isLoading?: boolean;
+// }
 
-export const CourseDetailDisplayArea: React.FC<
-	CourseDetailDisplayAreaProps
-> = ({ videoSrc, videoPoster }) => {
+export const CourseDetailDisplayArea: React.FC = () => {
 	// 创建滚动动画效果
 	const { course, isLoading, lecture, lectureIsLoading } =
 		useContext(CourseDetailContext);
@@ -30,20 +28,22 @@ export const CourseDetailDisplayArea: React.FC<
 				<Skeleton active paragraph={{ rows: 4 }} title={false} />
 			)}
 			{!lectureIsLoading && lecture?.meta?.type === LectureType.VIDEO && (
-				<motion.div
-					style={{
-						opacity: videoOpacity,
-					}}
-					className="w-full bg-black">
-					<div className=" w-full  ">
-						<VideoPlayer src={videoSrc} poster={videoPoster} />
-					</div>
-				</motion.div>
+				<div className="flex justify-center flex-col items-center gap-2 w-full mt-2 px-4">
+					<motion.div
+						style={{
+							opacity: videoOpacity,
+						}}
+						className="w-full bg-black rounded-lg  ">
+						<div className=" w-full  ">
+							<VideoPlayer src={lecture?.meta?.videoUrl} />
+						</div>
+					</motion.div>{" "}
+				</div>
 			)}
 			{!lectureIsLoading &&
 				lecture?.meta?.type === LectureType.ARTICLE && (
-					<div className="flex justify-center w-full my-2">
-						<div className="w-4/5  bg-white shadow-md rounded-lg  border border-gray-200  p-6  ">
+					<div className="flex justify-center flex-col items-center gap-2 w-full my-2 px-4">
+						<div className="w-full  bg-white shadow-md rounded-lg  border border-gray-200  p-6  ">
 							<CollapsibleContent
 								content={lecture?.content || ""}
 								maxHeight={150} // Optional, defaults to 150
@@ -51,17 +51,13 @@ export const CourseDetailDisplayArea: React.FC<
 						</div>
 					</div>
 				)}
-			{/* 课程内容区域 */}
-			<motion.div
-				initial={{ opacity: 0, y: 20 }}
-				animate={{ opacity: 1, y: 0 }}
-				transition={{ duration: 0.5, delay: 0.2 }}
-				className="w-full">
+			<div className="flex justify-center flex-col items-center gap-2 w-full my-2  px-4">
 				<CourseDetailDescription
 					course={course}
 					isLoading={isLoading}
 				/>
-			</motion.div>
+			</div>
+			{/* 课程内容区域 */}
 		</div>
 	);
 };