diff --git a/apps/web/src/app/main/courses/layout/AllCoursesLayout.tsx b/apps/web/src/app/main/courses/layout/AllCoursesLayout.tsx
index 5062731..0dd908e 100755
--- a/apps/web/src/app/main/courses/layout/AllCoursesLayout.tsx
+++ b/apps/web/src/app/main/courses/layout/AllCoursesLayout.tsx
@@ -1,4 +1,4 @@
-import FilterSection from "../components/FilterSection";
+import FilterSection from "../../layout/BasePost/FilterSection";
 import CoursesContainer from "../components/CoursesContainer";
 export function AllCoursesLayout() {
 	return (
diff --git a/apps/web/src/app/main/courses/page.tsx b/apps/web/src/app/main/courses/page.tsx
index 9c9225e..391c9ac 100755
--- a/apps/web/src/app/main/courses/page.tsx
+++ b/apps/web/src/app/main/courses/page.tsx
@@ -1,8 +1,11 @@
-import AllCoursesLayout from "./layout/AllCoursesLayout";
+import BasePostLayout from "../layout/BasePost/BasePostLayout";
+import CoursesContainer from "./components/CoursesContainer";
 export default function CoursesPage() {
 	return (
 		<>
-			<AllCoursesLayout></AllCoursesLayout>
+			<BasePostLayout>
+				<CoursesContainer></CoursesContainer>
+			</BasePostLayout>
 		</>
 	);
 }
diff --git a/apps/web/src/app/main/layout/BasePost/BasePostLayout.tsx b/apps/web/src/app/main/layout/BasePost/BasePostLayout.tsx
new file mode 100644
index 0000000..d21eda5
--- /dev/null
+++ b/apps/web/src/app/main/layout/BasePost/BasePostLayout.tsx
@@ -0,0 +1,18 @@
+import { ReactNode } from "react";
+import FilterSection from "./FilterSection";
+
+export function BasePostLayout({ children }: { children: ReactNode }) {
+	return (
+		<>
+			<div className="min-h-screen bg-gray-50">
+				<div className=" flex">
+					<div className="w-1/6">
+						<FilterSection></FilterSection>
+					</div>
+					<div className="w-5/6 p-4">{children}</div>
+				</div>
+			</div>
+		</>
+	);
+}
+export default BasePostLayout;
diff --git a/apps/web/src/app/main/courses/components/FilterSection.tsx b/apps/web/src/app/main/layout/BasePost/FilterSection.tsx
similarity index 96%
rename from apps/web/src/app/main/courses/components/FilterSection.tsx
rename to apps/web/src/app/main/layout/BasePost/FilterSection.tsx
index 110ba8c..8d9ebff 100755
--- a/apps/web/src/app/main/courses/components/FilterSection.tsx
+++ b/apps/web/src/app/main/layout/BasePost/FilterSection.tsx
@@ -6,7 +6,7 @@ import { useEffect, useMemo, useState } from "react";
 import { api } from "@nice/client";
 import { useSearchParams } from "react-router-dom";
 import TermSelect from "@web/src/components/models/term/term-select";
-import { useMainContext } from "../../layout/MainProvider";
+import { useMainContext } from "../MainProvider";
 import TermParentSelector from "@web/src/components/models/term/term-parent-selector";
 
 export default function FilterSection() {
diff --git a/apps/web/src/app/main/my-duty/components/MyDutyListContainer.tsx b/apps/web/src/app/main/my-duty/components/MyDutyListContainer.tsx
index b1cd8e2..f656398 100644
--- a/apps/web/src/app/main/my-duty/components/MyDutyListContainer.tsx
+++ b/apps/web/src/app/main/my-duty/components/MyDutyListContainer.tsx
@@ -5,7 +5,7 @@ import CourseCard from "../../courses/components/CourseCard";
 import { PostType } from "@nice/common";
 import { useMainContext } from "../../layout/MainProvider";
 
-export default function MyDutyPage() {
+export default function MyDutyListContainer() {
 	const { user } = useAuth();
 	const { searchCondition, termsCondition } = useMainContext();
 	return (
diff --git a/apps/web/src/app/main/my-duty/page.tsx b/apps/web/src/app/main/my-duty/page.tsx
index 91d022b..4028ab0 100755
--- a/apps/web/src/app/main/my-duty/page.tsx
+++ b/apps/web/src/app/main/my-duty/page.tsx
@@ -1,29 +1,10 @@
-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";
-import { PostType } from "@nice/common";
+import BasePostLayout from "../layout/BasePost/BasePostLayout";
+import MyDutyListContainer from "./components/MyDutyListContainer";
 
 export default function MyDutyPage() {
-	const { user } = useAuth();
-	const { searchCondition } = useMainContext();
 	return (
-		<>
-			<div className="p-4">
-				<PostList
-					renderItem={(post) => (
-						<CourseCard edit course={post}></CourseCard>
-					)}
-					params={{
-						pageSize: 12,
-						where: {
-							type: PostType.COURSE,
-							authorId: user.id,
-							...searchCondition,
-						},
-					}}
-					cols={4}></PostList>
-			</div>
-		</>
+		<BasePostLayout>
+			<MyDutyListContainer></MyDutyListContainer>
+		</BasePostLayout>
 	);
 }
diff --git a/apps/web/src/app/main/my-learning/components/MyLearningListContainer.tsx b/apps/web/src/app/main/my-learning/components/MyLearningListContainer.tsx
new file mode 100644
index 0000000..a6e8226
--- /dev/null
+++ b/apps/web/src/app/main/my-learning/components/MyLearningListContainer.tsx
@@ -0,0 +1,32 @@
+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";
+import { PostType } from "@nice/common";
+
+export default function MyLearningListContainer() {
+	const { user } = useAuth();
+	const { searchCondition, termsCondition } = useMainContext();
+	return (
+		<>
+			<PostList
+				renderItem={(post) => (
+					<CourseCard edit={false} course={post}></CourseCard>
+				)}
+				params={{
+					pageSize: 12,
+					where: {
+						type: PostType.COURSE,
+						students: {
+							some: {
+								id: user?.id,
+							},
+						},
+						...termsCondition,
+						...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 442dd63..58c38b2 100755
--- a/apps/web/src/app/main/my-learning/page.tsx
+++ b/apps/web/src/app/main/my-learning/page.tsx
@@ -1,33 +1,10 @@
-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";
-import { PostType } from "@nice/common";
+import BasePostLayout from "../layout/BasePost/BasePostLayout";
+import MyLearningListContainer from "./components/MyLearningListContainer";
 
 export default function MyLearningPage() {
-	const { user } = useAuth();
-	const { searchCondition } = useMainContext();
 	return (
-		<>
-			<div className="p-4">
-				<PostList
-					renderItem={(post) => (
-						<CourseCard edit={false} course={post}></CourseCard>
-					)}
-					params={{
-						pageSize: 12,
-						where: {
-							type: PostType.COURSE,
-							students: {
-								some: {
-									id: user?.id,
-								},
-							},
-							...searchCondition,
-						},
-					}}
-					cols={4}></PostList>
-			</div>
-		</>
+		<BasePostLayout>
+			<MyLearningListContainer></MyLearningListContainer>
+		</BasePostLayout>
 	);
 }
diff --git a/apps/web/src/app/main/path/layout/PathListLayout.tsx b/apps/web/src/app/main/path/layout/PathListLayout.tsx
deleted file mode 100755
index 855fcfe..0000000
--- a/apps/web/src/app/main/path/layout/PathListLayout.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import FilterSection from "../../courses/components/FilterSection";
-
-import PathListContainer from "../components/PathListContainer";
-
-export function PathListLayout() {
-	return (
-		<>
-			<div className="min-h-screen bg-gray-50">
-				<div className=" flex">
-					<div className="w-1/6">
-						<FilterSection></FilterSection>
-					
-					</div>
-					<div className="w-5/6 p-4 ">
-						<PathListContainer></PathListContainer>
-					</div>
-				</div>
-			</div>
-		</>
-	);
-}
-export default PathListLayout;
diff --git a/apps/web/src/app/main/path/page.tsx b/apps/web/src/app/main/path/page.tsx
index 825f3f7..d7231d3 100755
--- a/apps/web/src/app/main/path/page.tsx
+++ b/apps/web/src/app/main/path/page.tsx
@@ -1,5 +1,10 @@
-import PathListLayout from "./layout/PathListLayout";
+import BasePostLayout from "../layout/BasePost/BasePostLayout";
+import PathListContainer from "./components/PathListContainer";
 
 export default function PathPage() {
-	return <PathListLayout />
+	return (
+		<BasePostLayout>
+			<PathListContainer></PathListContainer>
+		</BasePostLayout>
+	);
 }