diff --git a/apps/web/src/components/models/course/editor/form/CourseContentForm/SortableLecture.tsx b/apps/web/src/components/models/course/editor/form/CourseContentForm/SortableLecture.tsx
index 42fbfef..7a23629 100755
--- a/apps/web/src/components/models/course/editor/form/CourseContentForm/SortableLecture.tsx
+++ b/apps/web/src/components/models/course/editor/form/CourseContentForm/SortableLecture.tsx
@@ -2,6 +2,7 @@ import {
 	DragOutlined,
 	CaretRightOutlined,
 	SaveOutlined,
+	CaretDownOutlined,
 } from "@ant-design/icons";
 import { Form, Button, Input, Select, Space } from "antd";
 import React, { useState } from "react";
@@ -9,14 +10,16 @@ import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import QuillEditor from "@web/src/components/common/editor/quill/QuillEditor";
 import { TusUploader } from "@web/src/components/common/uploader/TusUploader";
-import { LectureType, LessonTypeLabel, PostType } from "@nice/common";
+import { Lecture, LectureType, LessonTypeLabel, PostType } from "@nice/common";
 import { usePost } from "@nice/client";
 import toast from "react-hot-toast";
-import { LectureData } from "./interface";
+
 import { env } from "@web/src/env";
+import CollapsibleContent from "@web/src/components/common/container/CollapsibleContent";
+import { VideoPlayer } from "@web/src/components/presentation/video-player/VideoPlayer";
 
 interface SortableLectureProps {
-	field: LectureData;
+	field: Lecture;
 	remove: () => void;
 	sectionFieldKey: string;
 }
@@ -37,6 +40,11 @@ export const SortableLecture: React.FC<SortableLectureProps> = ({
 	const [form] = Form.useForm();
 	const [editing, setEditing] = useState(field?.id ? false : true);
 	const [loading, setLoading] = useState(false);
+	const [isContentVisible, setIsContentVisible] = useState(false); // State to manage content visibility
+
+	const handleToggleContent = () => {
+		setIsContentVisible(!isContentVisible); // Toggle content visibility
+	};
 	const lectureType =
 		Form.useWatch(["meta", "type"], form) || LectureType.ARTICLE;
 	const handleSave = async () => {
@@ -44,12 +52,12 @@ export const SortableLecture: React.FC<SortableLectureProps> = ({
 			setLoading(true);
 			const values = await form.validateFields();
 			let result;
-			const videoUrlId = Array.isArray(values?.videoUrlIds)
-				? values.videoUrlIds[0]
-				: typeof values?.videoUrlIds === "string"
-					? values.videoUrlIds
+			const videoUrlId = Array.isArray(values?.meta?.videoIds)
+				? values?.meta?.videoIds[0]
+				: typeof values?.meta?.videoIds === "string"
+					? values?.meta?.videoIds
 					: undefined;
-
+			console.log(sectionFieldKey);
 			if (!field.id) {
 				result = await create.mutateAsync({
 					data: {
@@ -58,7 +66,7 @@ export const SortableLecture: React.FC<SortableLectureProps> = ({
 						title: values?.title,
 						meta: {
 							type: values?.meta?.type,
-							// fileIds: values?.meta?.fileIds,
+							videoIds: videoUrlId ? [videoUrlId] : [],
 							videoUrl: videoUrlId
 								? `http://${env.SERVER_IP}:${env.FILE_PORT}/uploads/${videoUrlId}/stream/index.m3u8`
 								: undefined,
@@ -79,9 +87,11 @@ export const SortableLecture: React.FC<SortableLectureProps> = ({
 						id: field?.id,
 					},
 					data: {
+						parentId: sectionFieldKey,
 						title: values?.title,
 						meta: {
 							type: values?.meta?.type,
+							videoIds: videoUrlId ? [videoUrlId] : [],
 							videoUrl: videoUrlId
 								? `http://${env.SERVER_IP}:${env.FILE_PORT}/uploads/${videoUrlId}/stream/index.m3u8`
 								: undefined,
@@ -146,7 +156,7 @@ export const SortableLecture: React.FC<SortableLectureProps> = ({
 					<div className="mt-4 flex flex-1 ">
 						{lectureType === LectureType.VIDEO ? (
 							<Form.Item
-								name={"videoUrlIds"}
+								name={["meta", "videoIds"]}
 								className="mb-0 flex-1"
 								rules={[{ required: true }]}>
 								<TusUploader multiple={false} />
@@ -188,7 +198,11 @@ export const SortableLecture: React.FC<SortableLectureProps> = ({
 							{...listeners}
 							className="cursor-move"
 						/>
-						<CaretRightOutlined />
+						{isContentVisible ? (
+							<CaretDownOutlined onClick={handleToggleContent} />
+						) : (
+							<CaretRightOutlined onClick={handleToggleContent} />
+						)}
 						<span>{LessonTypeLabel[field?.meta?.type]}</span>
 						<span>{field?.title || "未命名课时"}</span>
 					</Space>
@@ -202,6 +216,13 @@ export const SortableLecture: React.FC<SortableLectureProps> = ({
 					</Space>
 				</div>
 			)}
+			{isContentVisible &&
+				!editing && // Conditionally render content based on type
+				(field?.meta?.type === LectureType.ARTICLE ? (
+					<CollapsibleContent content={field?.content} />
+				) : (
+					<VideoPlayer src={field?.meta?.videoUrl} />
+				))}
 		</div>
 	);
 };