diff --git a/apps/web/src/app/main/courses/components/CoursesContainer.tsx b/apps/web/src/app/main/courses/components/CoursesContainer.tsx
index 237e8b3..5f16cc1 100755
--- a/apps/web/src/app/main/courses/components/CoursesContainer.tsx
+++ b/apps/web/src/app/main/courses/components/CoursesContainer.tsx
@@ -5,16 +5,13 @@ import { useMemo } from "react";
 import CourseCard from "./CourseCard";
 
 export function CoursesContainer() {
-	const { searchValue, selectedTerms } = useMainContext();
+	const { selectedTerms, searchCondition } = useMainContext();
 	const termFilters = useMemo(() => {
 		return Object.entries(selectedTerms)
 			.filter(([, terms]) => terms.length > 0)
 			.map(([, terms]) => terms);
 	}, [selectedTerms]);
-	const searchCondition: Prisma.StringNullableFilter = {
-		contains: searchValue,
-		mode: "insensitive" as Prisma.QueryMode, // 使用类型断言
-	};
+
 	return (
 		<>
 			<PostList
@@ -32,18 +29,7 @@ export function CoursesContainer() {
 								},
 							},
 						})),
-						OR: [
-							{ title: searchCondition },
-							{ subTitle: searchCondition },
-							{ content: searchCondition },
-							{
-								terms: {
-									some: {
-										name: searchCondition,
-									},
-								},
-							},
-						],
+						...searchCondition,
 					},
 				}}
 				cols={4}></PostList>
diff --git a/apps/web/src/app/main/home/components/CategorySection.tsx b/apps/web/src/app/main/home/components/CategorySection.tsx
index d589d35..4c8141e 100755
--- a/apps/web/src/app/main/home/components/CategorySection.tsx
+++ b/apps/web/src/app/main/home/components/CategorySection.tsx
@@ -19,11 +19,11 @@ const CategorySection = () => {
 			taxonomy: {
 				slug: TaxonomySlug.CATEGORY,
 			},
-			parentId : null
+			parentId: null,
 		},
 		take: 8,
 	});
-	const navigate = useNavigate()
+	const navigate = useNavigate();
 
 	const handleMouseEnter = useCallback((index: number) => {
 		setHoveredIndex(index);
@@ -33,13 +33,13 @@ const CategorySection = () => {
 		setHoveredIndex(null);
 	}, []);
 
-	const handleMouseClick = useCallback((categoryId:string) => {
+	const handleMouseClick = useCallback((categoryId: string) => {
 		setSelectedTerms({
-			[TaxonomySlug.CATEGORY] : [categoryId]
-		})
-		navigate('/courses')
-		window.scrollTo({top: 0,behavior: "smooth",})
-	},[]);
+			[TaxonomySlug.CATEGORY]: [categoryId],
+		});
+		navigate("/courses");
+		window.scrollTo({ top: 0, behavior: "smooth" });
+	}, []);
 	return (
 		<section className="py-8 relative overflow-hidden">
 			<div className="max-w-screen-2xl mx-auto px-4 relative">
@@ -57,7 +57,7 @@ const CategorySection = () => {
 					{isLoading ? (
 						<Skeleton paragraph={{ rows: 4 }}></Skeleton>
 					) : (
-						courseCategoriesData.map((category, index) => {
+						courseCategoriesData?.map((category, index) => {
 							const categoryColor = stringToColor(category.name);
 							const isHovered = hoveredIndex === index;
 
diff --git a/apps/web/src/app/main/layout/MainHeader.tsx b/apps/web/src/app/main/layout/MainHeader.tsx
index dfbf5e2..d6d288f 100755
--- a/apps/web/src/app/main/layout/MainHeader.tsx
+++ b/apps/web/src/app/main/layout/MainHeader.tsx
@@ -1,10 +1,16 @@
 import { Input, Layout, Avatar, Button, Dropdown } from "antd";
-import { EditFilled, PlusOutlined, SearchOutlined, UserOutlined } from "@ant-design/icons";
+import {
+	EditFilled,
+	PlusOutlined,
+	SearchOutlined,
+	UserOutlined,
+} from "@ant-design/icons";
 import { useAuth } from "@web/src/providers/auth-provider";
 import { useNavigate, useParams, useSearchParams } from "react-router-dom";
 import { UserMenu } from "./UserMenu/UserMenu";
 import { NavigationMenu } from "./NavigationMenu";
 import { useMainContext } from "./MainProvider";
+import { Header } from "antd/es/layout/layout";
 
 export function MainHeader() {
 	const { isAuthenticated, user } = useAuth();
@@ -12,76 +18,77 @@ export function MainHeader() {
 	const navigate = useNavigate();
 	const { searchValue, setSearchValue } = useMainContext();
 
-
 	return (
-		<div className="select-none flex items-center  justify-between p-4 bg-white shadow-md border-b border-gray-100 fixed w-full z-30">
-
-			<div className="flex items-center gap-4">
-				<div
-					onClick={() => navigate("/")}
-					className="text-2xl font-bold bg-gradient-to-r from-primary-600 via-primary-500 to-primary-400 bg-clip-text text-transparent hover:scale-105 transition-transform cursor-pointer">
-					烽火慕课
+		<div className="select-none flex items-center justify-center bg-white shadow-md border-b border-gray-100 fixed w-full z-30">
+			<div className="w-full max-w-screen-3xl px-4 md:px-6 mx-auto flex items-center justify-between h-full">
+				<div className="flex items-center space-x-8">
+					<div
+						onClick={() => navigate("/")}
+						className="text-2xl font-bold bg-gradient-to-r from-primary-600 via-primary-500 to-primary-400 bg-clip-text text-transparent hover:scale-105 transition-transform cursor-pointer">
+						烽火慕课
+					</div>
+					<NavigationMenu />
 				</div>
-				<NavigationMenu />
 			</div>
-			<Input
-				size="large"
-				prefix={
-					<SearchOutlined className="text-gray-400 group-hover:text-blue-500 transition-colors" />
-				}
-				placeholder="搜索课程"
-				className="w-96 rounded-full"
-				value={searchValue}
-				onChange={(e) => setSearchValue(e.target.value)}
-				onPressEnter={(e) => {
-					if (
-						!window.location.pathname.startsWith(
-							"/courses/"
-						)
-					) {
-						navigate(`/courses/`);
-						window.scrollTo({
-							top: 0,
-							behavior: "smooth",
-						});
+			<div className=" flex justify-end gap-4 mr-2">
+				<Input
+					size="large"
+					prefix={
+						<SearchOutlined className="text-gray-400 group-hover:text-blue-500 transition-colors" />
 					}
-				}}
-			/>
-			<div className="flex items-center gap-4">
-				{isAuthenticated && (
-					<>
+					placeholder="搜索课程"
+					className="w-96 rounded-full"
+					value={searchValue}
+					onChange={(e) => setSearchValue(e.target.value)}
+					onPressEnter={(e) => {
+						if (
+							!window.location.pathname.startsWith("/courses/") &&
+							!window.location.pathname.startsWith("my")
+						) {
+							navigate(`/courses/`);
+							window.scrollTo({
+								top: 0,
+								behavior: "smooth",
+							});
+						}
+					}}
+				/>
+				<div className="flex items-center gap-4">
+					{isAuthenticated && (
+						<>
+							<Button
+								onClick={() => {
+									const url = id
+										? `/course/${id}/editor`
+										: "/course/editor";
+									navigate(url);
+								}}
+								className="flex items-center space-x-1 bg-gradient-to-r from-blue-500 to-blue-600 text-white hover:from-blue-600 hover:to-blue-700 border-none shadow-md hover:shadow-lg transition-all"
+								icon={<EditFilled />}>
+								{id ? "编辑课程" : "创建课程"}
+							</Button>
+						</>
+					)}
+					{isAuthenticated && (
 						<Button
 							onClick={() => {
-								const url = id
-									? `/course/${id}/editor`
-									: "/course/editor";
-								navigate(url);
+								window.location.href = "/path/editor";
 							}}
-							className="flex items-center space-x-1 bg-gradient-to-r from-blue-500 to-blue-600 text-white hover:from-blue-600 hover:to-blue-700 border-none shadow-md hover:shadow-lg transition-all"
-							icon={<EditFilled />}>
-							{id ? "编辑课程" : "创建课程"}
+							icon={<PlusOutlined></PlusOutlined>}>
+							创建学习路径
 						</Button>
-					</>
-				)}
-				{
-					isAuthenticated && <Button
-						onClick={() => {
-
-							window.location.href = "/path/editor";
-						}}
-
-						icon={<PlusOutlined></PlusOutlined>} >创建学习路径</Button>
-				}
-				{isAuthenticated ? (
-					<UserMenu />
-				) : (
-					<Button
-						onClick={() => navigate("/login")}
-						className="flex items-center space-x-1 bg-gradient-to-r from-blue-500 to-blue-600 text-white hover:from-blue-600 hover:to-blue-700 border-none shadow-md hover:shadow-lg transition-all"
-						icon={<UserOutlined />}>
-						登录
-					</Button>
-				)}
+					)}
+					{isAuthenticated ? (
+						<UserMenu />
+					) : (
+						<Button
+							onClick={() => navigate("/login")}
+							className="flex items-center space-x-1 bg-gradient-to-r from-blue-500 to-blue-600 text-white hover:from-blue-600 hover:to-blue-700 border-none shadow-md hover:shadow-lg transition-all"
+							icon={<UserOutlined />}>
+							登录
+						</Button>
+					)}
+				</div>
 			</div>
 		</div>
 	);
diff --git a/apps/web/src/app/main/layout/MainProvider.tsx b/apps/web/src/app/main/layout/MainProvider.tsx
index 0952268..979d110 100755
--- a/apps/web/src/app/main/layout/MainProvider.tsx
+++ b/apps/web/src/app/main/layout/MainProvider.tsx
@@ -1,4 +1,11 @@
-import React, { createContext, ReactNode, useContext, useState } from "react";
+import { Prisma } from "packages/common/dist";
+import React, {
+	createContext,
+	ReactNode,
+	useContext,
+	useMemo,
+	useState,
+} from "react";
 interface SelectedTerms {
 	[key: string]: string[]; // 每个 slug 对应一个 string 数组
 }
@@ -8,6 +15,7 @@ interface MainContextType {
 	selectedTerms?: SelectedTerms;
 	setSearchValue?: React.Dispatch<React.SetStateAction<string>>;
 	setSelectedTerms?: React.Dispatch<React.SetStateAction<SelectedTerms>>;
+	searchCondition?: Prisma.PostWhereInput;
 }
 
 const MainContext = createContext<MainContextType | null>(null);
@@ -18,6 +26,29 @@ interface MainProviderProps {
 export function MainProvider({ children }: MainProviderProps) {
 	const [searchValue, setSearchValue] = useState("");
 	const [selectedTerms, setSelectedTerms] = useState<SelectedTerms>({}); // 初始化状态
+
+	const searchCondition: Prisma.PostWhereInput = useMemo(() => {
+		const containTextCondition: Prisma.StringNullableFilter = {
+			contains: searchValue,
+			mode: "insensitive" as Prisma.QueryMode, // 使用类型断言
+		};
+		return searchValue
+			? {
+					OR: [
+						{ title: containTextCondition },
+						{ subTitle: containTextCondition },
+						{ content: containTextCondition },
+						{
+							terms: {
+								some: {
+									name: containTextCondition,
+								},
+							},
+						},
+					],
+				}
+			: {};
+	}, [searchValue]);
 	return (
 		<MainContext.Provider
 			value={{
@@ -25,6 +56,7 @@ export function MainProvider({ children }: MainProviderProps) {
 				setSearchValue,
 				selectedTerms,
 				setSelectedTerms,
+				searchCondition,
 			}}>
 			{children}
 		</MainContext.Provider>
diff --git a/apps/web/src/app/main/layout/UserMenu/UserMenu.tsx b/apps/web/src/app/main/layout/UserMenu/UserMenu.tsx
index e3ef21f..c25fc53 100755
--- a/apps/web/src/app/main/layout/UserMenu/UserMenu.tsx
+++ b/apps/web/src/app/main/layout/UserMenu/UserMenu.tsx
@@ -90,14 +90,14 @@ export function UserMenu() {
 					icon: <UserOutlined className="text-lg" />,
 					label: "我创建的课程",
 					action: () => {
-						navigate("/my/duty");
+						navigate("/my-duty");
 					},
 				},
 				{
 					icon: <UserOutlined className="text-lg" />,
 					label: "我学习的课程",
 					action: () => {
-						navigate("/my/learning");
+						navigate("/my-learning");
 					},
 				},
 				canManageAnyStaff && {
diff --git a/apps/web/src/app/main/my-duty/page.tsx b/apps/web/src/app/main/my-duty/page.tsx
index 64a529f..1031d79 100755
--- a/apps/web/src/app/main/my-duty/page.tsx
+++ b/apps/web/src/app/main/my-duty/page.tsx
@@ -1,19 +1,23 @@
 import PostList from "@web/src/components/models/course/list/PostList";
 import { useAuth } from "@web/src/providers/auth-provider";
+import { useMainContext } from "../layout/MainProvider";
 import CourseCard from "../courses/components/CourseCard";
 
 export default function MyDutyPage() {
 	const { user } = useAuth();
+	const { searchCondition } = useMainContext();
 	return (
 		<>
 			<div className="p-4">
 				<PostList
-				renderItem={post=><CourseCard edit course={post}></CourseCard>}
-				
+					renderItem={(post) => (
+						<CourseCard edit course={post}></CourseCard>
+					)}
 					params={{
 						pageSize: 12,
 						where: {
 							authorId: user.id,
+							...searchCondition,
 						},
 					}}
 					cols={4}></PostList>
diff --git a/apps/web/src/app/main/my-learning/page.tsx b/apps/web/src/app/main/my-learning/page.tsx
index 14278e8..5f0a7a8 100755
--- a/apps/web/src/app/main/my-learning/page.tsx
+++ b/apps/web/src/app/main/my-learning/page.tsx
@@ -1,14 +1,18 @@
 import PostList from "@web/src/components/models/course/list/PostList";
 import { useAuth } from "@web/src/providers/auth-provider";
+import { useMainContext } from "../layout/MainProvider";
 import CourseCard from "../courses/components/CourseCard";
 
 export default function MyLearningPage() {
 	const { user } = useAuth();
+	const { searchCondition } = useMainContext();
 	return (
 		<>
 			<div className="p-4">
 				<PostList
-					renderItem={post => <CourseCard edit={false} course={post}></CourseCard>}
+					renderItem={(post) => (
+						<CourseCard edit={false} course={post}></CourseCard>
+					)}
 					params={{
 						pageSize: 12,
 						where: {
@@ -17,6 +21,7 @@ export default function MyLearningPage() {
 									id: user?.id,
 								},
 							},
+							...searchCondition,
 						},
 					}}
 					cols={4}></PostList>
diff --git a/apps/web/src/components/models/course/detail/CourseDetailLayout.tsx b/apps/web/src/components/models/course/detail/CourseDetailLayout.tsx
index 6154bbe..cac3bf8 100755
--- a/apps/web/src/components/models/course/detail/CourseDetailLayout.tsx
+++ b/apps/web/src/components/models/course/detail/CourseDetailLayout.tsx
@@ -19,7 +19,7 @@ export default function CourseDetailLayout() {
 	const [isSyllabusOpen, setIsSyllabusOpen] = useState(true);
 	return (
 		<div className="relative">
-			<CourseDetailHeader />
+			{/* <CourseDetailHeader /> */}
 
 			{/* 添加 Header 组件 */}
 			{/* 主内容区域 */}
diff --git a/apps/web/src/components/models/course/detail/CourseDetailTitle.tsx b/apps/web/src/components/models/course/detail/CourseDetailTitle.tsx
index 3ebc083..0b8da3b 100755
--- a/apps/web/src/components/models/course/detail/CourseDetailTitle.tsx
+++ b/apps/web/src/components/models/course/detail/CourseDetailTitle.tsx
@@ -1,8 +1,15 @@
 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 {
+	BookOutlined,
+	CalendarOutlined,
+	EditTwoTone,
+	EyeOutlined,
+	ReloadOutlined,
+} from "@ant-design/icons";
 import dayjs from "dayjs";
+import CourseOperationBtns from "./JoinLearingButton";
 
 export default function CourseDetailTitle() {
 	const {
@@ -19,14 +26,14 @@ export default function CourseDetailTitle() {
 			<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="text-gray-600 flex w-full justify-start items-center gap-5">
 				<div className="flex gap-1">
 					<CalendarOutlined></CalendarOutlined>
 					{"创建于:"}
 					{dayjs(course?.createdAt).format("YYYY年M月D日")}
 				</div>
 				<div className="flex gap-1">
-					<ReloadOutlined></ReloadOutlined>
+					<ReloadOutlined spin></ReloadOutlined>
 					{"更新于:"}
 					{dayjs(course?.updatedAt).format("YYYY年M月D日")}
 				</div>
@@ -38,19 +45,7 @@ export default function CourseDetailTitle() {
 					<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>
-				)}
+				<CourseOperationBtns />
 			</div>
 		</div>
 	);
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>
+			)}
+		</>
+	);
+}
diff --git a/apps/web/src/routes/index.tsx b/apps/web/src/routes/index.tsx
index f011db6..d4d4afe 100755
--- a/apps/web/src/routes/index.tsx
+++ b/apps/web/src/routes/index.tsx
@@ -92,6 +92,10 @@ export const routes: CustomRouteObject[] = [
 							</WithAuth>
 						),
 					},
+					{
+						path: "course/:id?/detail/:lectureId?", // 使用 ? 表示 id 参数是可选的
+						element: <CourseDetailPage />,
+					},
 				],
 			},
 
@@ -125,10 +129,6 @@ export const routes: CustomRouteObject[] = [
 							},
 						],
 					},
-					{
-						path: ":id?/detail/:lectureId?", // 使用 ? 表示 id 参数是可选的
-						element: <CourseDetailPage />,
-					},
 				],
 			},
 			adminRoute,