diff --git a/apps/client/components/main/Contents/Contents.vue b/apps/client/components/main/Contents/Contents.vue
deleted file mode 100644
index a22233bd0..000000000
--- a/apps/client/components/main/Contents/Contents.vue
+++ /dev/null
@@ -1,106 +0,0 @@
-<template>
-  <div
-    id="contents"
-    class="absolute left-0 top-20 z-10 w-80 select-none overflow-y-auto border-l-4 border-fuchsia-500 bg-white shadow dark:bg-slate-800"
-    :class="[isShowContents() && 'show']"
-    ref="contentsRef"
-  >
-    <div class="px-2">
-      <div
-        v-for="(item, index) in contentsList"
-        :key="item.id"
-        :class="getItemClassNames(index)"
-        @click="jumpTo(index, item)"
-      >
-        <UTooltip :text="`${item.english} ${item.chinese}`">
-          <div class="flex whitespace-pre-wrap border-b py-1 dark:border-slate-600">
-            <div class="w-12 text-center">{{ index + 1 }}</div>
-            <div class="flex-1 truncate text-left">
-              {{ item.chinese }}
-              {{ item.isMastered ? "✅" : "" }}
-            </div>
-          </div>
-        </UTooltip>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, onMounted, ref, watch } from "vue";
-
-import { useGameMode } from "~/composables/main/game";
-import { useCourseStore } from "~/store/course";
-import { useContent } from "./useContents";
-
-const coursesStore = useCourseStore();
-const { showQuestion } = useGameMode();
-const { hideContents, isShowContents, watchClickOutside } = useContent();
-
-const contentsList = computed(() => {
-  return coursesStore.currentCourse?.statements || [];
-});
-
-const contentsRef = ref<HTMLElement | null>(null);
-
-onMounted(() => {
-  if (contentsRef.value) {
-    watchClickOutside(contentsRef.value);
-  }
-});
-
-watch(
-  () => coursesStore.statementIndex,
-  (newIndex) => {
-    scrollToIndex(newIndex);
-  },
-);
-
-function scrollToIndex(index: number) {
-  if (contentsRef.value) {
-    const element = contentsRef.value.children[0].children[index] as HTMLElement;
-    if (element) {
-      element.scrollIntoView({ behavior: "smooth", block: "nearest" });
-    }
-  }
-}
-
-function isActive(index: number) {
-  return coursesStore.statementIndex === index;
-}
-
-function getItemClassNames(index: number) {
-  const classNames: string[] = [];
-  if (isActive(index)) {
-    classNames.push("text-fuchsia-500");
-  }
-  classNames.push("hover:text-fuchsia-500 cursor-pointer");
-  return classNames;
-}
-
-function jumpTo(index: number, item: any) {
-  if (item.isMastered) {
-    return;
-  }
-  hideContents();
-  showQuestion();
-  coursesStore.toSpecificStatement(index);
-}
-</script>
-
-<style scoped>
-#contents {
-  height: 0rem;
-  opacity: 0;
-  transition: all 0.5s;
-}
-
-#contents::-webkit-scrollbar {
-  display: none;
-}
-
-#contents.show {
-  opacity: 1;
-  height: 24.6rem;
-}
-</style>
diff --git a/apps/client/components/main/Contents/useContents.ts b/apps/client/components/main/Contents/useContents.ts
deleted file mode 100644
index ca92a587f..000000000
--- a/apps/client/components/main/Contents/useContents.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import { onClickOutside } from "@vueuse/core";
-import { ref } from "vue";
-
-const contentsVisible = ref(false);
-let isOnClickOutside = false;
-
-export function useContent() {
-  function isShowContents() {
-    return contentsVisible.value === true;
-  }
-
-  function toggleContents(e: MouseEvent) {
-    if (!isOnClickOutside) {
-      contentsVisible.value = !contentsVisible.value;
-    }
-  }
-
-  function hideContents() {
-    contentsVisible.value = false;
-  }
-
-  function watchClickOutside(contentsEl: HTMLElement) {
-    onClickOutside(contentsEl, () => {
-      if (contentsVisible.value) {
-        isOnClickOutside = true;
-        contentsVisible.value = false;
-        // 隐藏时防止和 toggleContents 冲突
-        setTimeout(() => {
-          isOnClickOutside = false;
-        });
-      }
-    });
-  }
-
-  return {
-    isShowContents,
-    toggleContents,
-    hideContents,
-    watchClickOutside,
-  };
-}
diff --git a/apps/client/components/main/CourseContents.vue b/apps/client/components/main/CourseContents.vue
new file mode 100644
index 000000000..6c7942852
--- /dev/null
+++ b/apps/client/components/main/CourseContents.vue
@@ -0,0 +1,147 @@
+<template>
+  <UModal v-model="contentsVisible">
+    <UContainer
+      :ui="{
+        base: 'w-[90vw] h-[80vh] flex flex-col',
+        constrained: 'max-w-[880px] max-h-[880px]',
+      }"
+    >
+      <div class="mb-4">
+        <h1 class="text-center text-2xl font-bold text-purple-800 dark:text-white">课程目录</h1>
+        <div class="absolute right-2 top-2">
+          <UButton
+            color="gray"
+            variant="ghost"
+            icon="i-heroicons-x-mark-20-solid"
+            @click="hideCourseContents"
+            tabindex="-1"
+            :ui="{ color: { gray: { ghost: 'dark:hover:bg-gray-600' } } }"
+          />
+        </div>
+      </div>
+      <!-- 添加选项菜单 -->
+      <div class="mb-4 flex justify-end">
+        <USelect
+          v-model="filterOption"
+          :options="options"
+        >
+        </USelect>
+      </div>
+      <div class="h-full space-y-3 overflow-y-auto">
+        <div
+          v-for="(item, index) in filteredContentsList"
+          :key="item.id"
+          ref="itemRefs"
+          class="flex items-center justify-between rounded-lg bg-purple-100 p-4 transition-colors duration-300 hover:bg-purple-200 dark:bg-purple-700 dark:hover:bg-purple-600"
+          @click="jumpTo(index, item)"
+          :class="{ 'cursor-pointer': !item.isMastered, 'cursor-not-allowed': item.isMastered }"
+        >
+          <div class="group flex w-full flex-grow">
+            <div class="mr-4 flex w-6 flex-shrink-0 flex-col items-center justify-center">
+              <span class="text-lg font-semibold text-purple-600 dark:text-purple-300">
+                {{ index + 1 }}
+              </span>
+              <UIcon
+                v-if="item.isMastered"
+                name="i-icon-park-outline:correct"
+                class="mt-1 h-5 w-5 text-green-700 dark:text-green-500"
+              ></UIcon>
+            </div>
+            <div class="flex-grow overflow-hidden">
+              <div
+                class="truncate text-lg font-bold text-purple-800 group-hover:text-clip group-hover:whitespace-normal dark:text-white"
+              >
+                {{ item.english }}
+              </div>
+              <div
+                class="truncate text-lg text-purple-600 group-hover:text-clip group-hover:whitespace-normal dark:text-purple-300"
+              >
+                {{ item.chinese }}
+              </div>
+              <div
+                class="truncate text-lg text-gray-500 group-hover:text-clip group-hover:whitespace-normal dark:text-gray-400"
+              >
+                {{ item.soundmark }}
+              </div>
+            </div>
+            <div
+              @click=""
+              class="flex w-11 flex-shrink-0 cursor-pointer items-center justify-center transition-transform duration-300 hover:scale-110"
+            >
+              <UTooltip text="播放发音">
+                <UIcon
+                  name="i-ph-speaker-simple-high"
+                  class="ml-1 inline-block h-7 w-7 cursor-pointer"
+                  @click="handlePlayEnglishSound($event, item.english)"
+                ></UIcon>
+              </UTooltip>
+            </div>
+          </div>
+        </div>
+      </div>
+    </UContainer>
+  </UModal>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, ref, watch } from "vue";
+
+import { playEnglish } from "~/composables/main/englishSound";
+import { useGameMode } from "~/composables/main/game";
+import { useCourseContents } from "~/composables/main/useCourseContents";
+import { useCourseStore } from "~/store/course";
+
+const { contentsVisible, hideCourseContents } = useCourseContents();
+
+const itemRefs = ref<(HTMLElement | null)[]>([]);
+const coursesStore = useCourseStore();
+const { showQuestion } = useGameMode();
+const contentsList = computed(() => {
+  return coursesStore.currentCourse?.statements || [];
+});
+
+const filterOption = ref("all"); // 新增过滤选项
+const options = [
+  { label: "全部", value: "all" },
+  { label: "已经掌握", value: "mastered" },
+  { label: "未掌握", value: "notMastered" },
+];
+const filteredContentsList = computed(() => {
+  if (filterOption.value === "mastered") {
+    return contentsList.value.filter((item) => item.isMastered);
+  } else if (filterOption.value === "notMastered") {
+    return contentsList.value.filter((item) => !item.isMastered);
+  }
+  return contentsList.value; // 默认显示全部
+});
+
+function jumpTo(index: number, item: any) {
+  if (item.isMastered) {
+    return;
+  }
+  showQuestion();
+  hideCourseContents();
+  coursesStore.toSpecificStatement(index);
+}
+
+function handlePlayEnglishSound(event: Event, english: string) {
+  event.stopPropagation();
+  playEnglish(english);
+}
+
+watch(
+  () => contentsVisible.value,
+  (newValue) => {
+    if (newValue) {
+      nextTick(() => {
+        const targetElement = itemRefs.value[coursesStore.statementIndex];
+        if (targetElement) {
+          targetElement.scrollIntoView({ behavior: "smooth", block: "start" });
+        }
+      });
+    }
+  },
+);
+</script>
+
+<style scoped></style>
diff --git a/apps/client/components/main/Tool.vue b/apps/client/components/main/Tool.vue
index 89f1fc985..6de824553 100644
--- a/apps/client/components/main/Tool.vue
+++ b/apps/client/components/main/Tool.vue
@@ -14,7 +14,7 @@
       </NuxtLink>
       <div
         class="clickable-item ml-4"
-        @click="toggleContents"
+        @click="openCourseContents"
       >
         <UTooltip text="课程题目列表">
           {{ currentCourseInfo }}
@@ -58,7 +58,7 @@
       </div>
     </div>
 
-    <MainContents />
+    <MainCourseContents v-model:isOpen="isOpenCourseContents"></MainCourseContents>
   </div>
 
   <CommonProgressBar
@@ -70,25 +70,25 @@
 
 <script setup lang="ts">
 import { useModal } from "#imports";
-import { computed } from "vue";
+import { computed, ref } from "vue";
 
 import Dialog from "~/components/common/Dialog.vue";
 import { useQuestionInput } from "~/components/main/QuestionInput/questionInputHelper";
 import { courseTimer } from "~/composables/courses/courseTimer";
 import { useGameMode } from "~/composables/main/game";
 import { clearQuestionInput } from "~/composables/main/question";
+import { useCourseContents } from "~/composables/main/useCourseContents";
 import { useGamePause } from "~/composables/main/useGamePause";
 import { useRanking } from "~/composables/rank/rankingList";
 import { parseShortcut, useShortcutKeyMode } from "~/composables/user/shortcutKey";
 import { isAuthenticated } from "~/services/auth";
 import { useCourseStore } from "~/store/course";
-import { useContent } from "./Contents/useContents";
 
 const { shortcutKeys } = useShortcutKeyMode();
 const rankingStore = useRanking();
 const courseStore = useCourseStore();
 const { focusInput } = useQuestionInput();
-const { toggleContents } = useContent();
+const { openCourseContents } = useCourseContents();
 const { handleDoAgain } = useDoAgain();
 const { pauseGame } = useGamePause();
 const modal = useModal();
@@ -110,6 +110,8 @@ const currentPercentage = computed(() => {
   );
 });
 
+const isOpenCourseContents = ref(false);
+
 function useDoAgain() {
   const { showQuestion } = useGameMode();
 
diff --git a/apps/client/composables/main/englishSound/index.ts b/apps/client/composables/main/englishSound/index.ts
index e9f0570a0..ad6e67eda 100644
--- a/apps/client/composables/main/englishSound/index.ts
+++ b/apps/client/composables/main/englishSound/index.ts
@@ -33,3 +33,9 @@ export function readOneSentencePerDayAloud(str: string) {
   updateSource(pronunciationUrl);
   play();
 }
+
+export function playEnglish(english: string) {
+  const pronunciationUrl = getPronunciationUrl(english);
+  updateSource(pronunciationUrl);
+  play();
+}
diff --git a/apps/client/composables/main/useCourseContents.ts b/apps/client/composables/main/useCourseContents.ts
new file mode 100644
index 000000000..fef0c19dc
--- /dev/null
+++ b/apps/client/composables/main/useCourseContents.ts
@@ -0,0 +1,19 @@
+import { ref } from "vue";
+
+const contentsVisible = ref(false);
+
+export function useCourseContents() {
+  function openCourseContents() {
+    contentsVisible.value = true;
+  }
+
+  function hideCourseContents() {
+    contentsVisible.value = false;
+  }
+
+  return {
+    contentsVisible,
+    openCourseContents,
+    hideCourseContents,
+  };
+}