diff --git a/components.d.ts b/components.d.ts
index 7888117..610f047 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -14,6 +14,8 @@ declare module 'vue' {
     WdCellGroup: typeof import('wot-design-uni/components/wd-cell-group/wd-cell-group.vue')['default']
     WdCollapse: typeof import('wot-design-uni/components/wd-collapse/wd-collapse.vue')['default']
     WdCollapseItem: typeof import('wot-design-uni/components/wd-collapse-item/wd-collapse-item.vue')['default']
+    WdDropMenu: typeof import('wot-design-uni/components/wd-drop-menu/wd-drop-menu.vue')['default']
+    WdDropMenuItem: typeof import('wot-design-uni/components/wd-drop-menu-item/wd-drop-menu-item.vue')['default']
     WdForm: typeof import('wot-design-uni/components/wd-form/wd-form.vue')['default']
     WdIcon: typeof import('wot-design-uni/components/wd-icon/wd-icon.vue')['default']
     WdInput: typeof import('wot-design-uni/components/wd-input/wd-input.vue')['default']
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index 53483f7..1999e30 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -6,11 +6,24 @@ import { calcLessonProgress } from '@/utils/lesson';
 import { useRouter } from 'uni-mini-router';
 import { onMounted, ref } from 'vue';
 import { useToast } from 'wot-design-uni';
+import type { DropMenuItemBeforeToggle } from 'wot-design-uni/components/wd-drop-menu-item/types';
 import WdTag from 'wot-design-uni/components/wd-tag/wd-tag.vue';
 
 const toast = useToast()
 const router = useRouter()
 
+const teacherFilterValue = ref<number>(0)
+
+const teacherFilterOptions = ref<Record<string, any>[]>([
+  { label: '老师1', value: 0 },
+  { label: '老师2', value: 1 },
+  { label: '老师3', value: 2 }
+])
+
+const handleBeforeToggle: DropMenuItemBeforeToggle = ({ status, resolve }) => {
+  resolve(true)
+}
+
 const expandedCourse = ref(['lesson'])
 const groupedLessons = ref<{ [key: string]: Lesson[] }>({})
 
@@ -50,6 +63,10 @@ onMounted(() => {
 <template>
   <page-wrapper>
     <div>
+      <!-- todo teacher filter [for role B] -->
+      <wd-drop-menu>
+        <wd-drop-menu-item v-model="teacherFilterValue" :options="teacherFilterOptions" :before-toggle="handleBeforeToggle" />
+      </wd-drop-menu>
       <wd-collapse v-model="expandedCourse">
         <wd-status-tip v-if="Object.keys(groupedLessons).length === 0" image="content" tip="没有微课" />
         <wd-collapse-item v-else v-for="(courses, courseName) in groupedLessons" :name="`${courseName}`"
@@ -80,7 +97,7 @@ onMounted(() => {
                     <div class="w-1.5 aspect-square rounded-full bg-blue"></div>
                     <span class="text-xs text-blue font-bold font-mono">
                       {{ courses.filter(lesson => calcLessonProgress(lesson) !== 0 && calcLessonProgress(lesson) !==
-                        100).length }}
+                      100).length }}
                     </span>
                   </div>
                   <div class="flex items-center gap-0.5">