diff --git a/apps/web/src/components/models/course/detail/JoinLearingButton.tsx b/apps/web/src/components/models/course/detail/JoinLearingButton.tsx
new file mode 100644
index 0000000..68c4243
--- /dev/null
+++ b/apps/web/src/components/models/course/detail/JoinLearingButton.tsx
@@ -0,0 +1,94 @@
+import { useAuth } from "@web/src/providers/auth-provider";
+import { useContext, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { CourseDetailContext } from "./CourseDetailContext";
+import { useStaff } from "@nice/client";
+import {
+	CheckCircleFilled,
+	CheckCircleOutlined,
+	CloseCircleFilled,
+	CloseCircleOutlined,
+	EditFilled,
+	EditTwoTone,
+	LoginOutlined,
+} from "@ant-design/icons";
+
+export default function CourseOperationBtns() {
+	const { id } = useParams();
+	const { isAuthenticated, user, hasSomePermissions, hasEveryPermissions } =
+		useAuth();
+	const navigate = useNavigate();
+	const { course, canEdit, userIsLearning } = useContext(CourseDetailContext);
+	const { update } = useStaff();
+	const [isHovered, setIsHovered] = useState(false);
+	const toggleLearning = async () => {
+		if (!userIsLearning) {
+			await update.mutateAsync({
+				where: { id: user?.id },
+				data: {
+					learningPosts: {
+						connect: { id: course.id },
+					},
+				},
+			});
+		} else {
+			await update.mutateAsync({
+				where: { id: user?.id },
+				data: {
+					learningPosts: {
+						disconnect: {
+							id: course.id,
+						},
+					},
+				},
+			});
+		}
+	};
+	return (
+		<>
+			{isAuthenticated && (
+				<div
+					onClick={toggleLearning}
+					onMouseEnter={() => setIsHovered(true)}
+					onMouseLeave={() => setIsHovered(false)}
+					className={`flex px-1 py-0.5 gap-1 hover:cursor-pointer   transition-all ${
+						userIsLearning
+							? isHovered
+								? "text-red-500 border-red-500  rounded-md "
+								: "text-green-500 "
+							: "text-primary "
+					}`}>
+					{userIsLearning ? (
+						isHovered ? (
+							<CloseCircleOutlined />
+						) : (
+							<CheckCircleOutlined />
+						)
+					) : (
+						<LoginOutlined />
+					)}
+					<span>
+						{userIsLearning
+							? isHovered
+								? "退出学习"
+								: "正在学习"
+							: "加入学习"}
+					</span>
+				</div>
+			)}
+			{canEdit && (
+				<div
+					className="flex gap-1 px-1 py-0.5 text-primary hover:cursor-pointer"
+					onClick={() => {
+						const url = course?.id
+							? `/course/${course?.id}/editor`
+							: "/course/editor";
+						navigate(url);
+					}}>
+					<EditTwoTone></EditTwoTone>
+					{"编辑课程"}
+				</div>
+			)}
+		</>
+	);
+}