diff --git a/public/static/ai-assistant.png b/public/static/ai-assistant.png
deleted file mode 100644
index 24ebd90..0000000
Binary files a/public/static/ai-assistant.png and /dev/null differ
diff --git a/src/App.vue b/src/App.vue
index ea3e9a9..dd07b71 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -10,7 +10,6 @@ useHead({
 <template>
   <div :class="{ 'overflow-hidden': isShowMenu }">
     <app-header />
-    <ai-assistant />
     <router-view v-slot="{ Component }">
       <Transition>
         <component :is="Component" />
diff --git a/src/components/ai-assistant.vue b/src/components/ai-assistant.vue
deleted file mode 100644
index 9c2454a..0000000
--- a/src/components/ai-assistant.vue
+++ /dev/null
@@ -1,48 +0,0 @@
-<script setup lang="ts">
-const isShow = useLocalStorage('display-ai-assistant', true)
-</script>
-
-<template>
-  <div
-    flex="~ col"
-    fixed
-    bottom-10
-    right-10
-    cursor-pointer
-    items-center
-    justify-center
-  >
-    <div v-if="isShow" flex="~ col" justify-center>
-      <div flex>
-        <a
-          class="ai-assistant-img"
-          w-70px
-          target="_blank"
-          href="https://chatglm.cn/main/gdetail/65d70a301e6bc1f647c934e3"
-        >
-          <img w-80px alt="AI Assistant" src="/static/ai-assistant.png" />
-        </a>
-        <div i-carbon-close-outline @click="isShow = false" />
-      </div>
-      <a
-        target="_blank"
-        mr-8px
-        href="https://chatglm.cn/main/gdetail/65d70a301e6bc1f647c934e3"
-        >AI 小助手</a
-      >
-    </div>
-
-    <span
-      v-else
-      bg="#d4ebcb"
-      border="1px [var(--text-color)]"
-      h-7
-      w-7
-      rounded-full
-      text-center
-      color-black
-      @click="isShow = true"
-      >AI</span
-    >
-  </div>
-</template>
diff --git a/src/typings/auto-import.d.ts b/src/typings/auto-import.d.ts
index 392fd90..821c457 100644
--- a/src/typings/auto-import.d.ts
+++ b/src/typings/auto-import.d.ts
@@ -21,6 +21,7 @@ declare global {
   const createGlobalState: typeof import('@vueuse/core')['createGlobalState']
   const createInjectionState: typeof import('@vueuse/core')['createInjectionState']
   const createReactiveFn: typeof import('@vueuse/core')['createReactiveFn']
+  const createRef: typeof import('@vueuse/core')['createRef']
   const createReusableTemplate: typeof import('@vueuse/core')['createReusableTemplate']
   const createSharedComposable: typeof import('@vueuse/core')['createSharedComposable']
   const createTemplatePromise: typeof import('@vueuse/core')['createTemplatePromise']
@@ -138,6 +139,7 @@ declare global {
   const useCloned: typeof import('@vueuse/core')['useCloned']
   const useColorMode: typeof import('@vueuse/core')['useColorMode']
   const useConfirmDialog: typeof import('@vueuse/core')['useConfirmDialog']
+  const useCountdown: typeof import('@vueuse/core')['useCountdown']
   const useCounter: typeof import('@vueuse/core')['useCounter']
   const useCssModule: typeof import('vue')['useCssModule']
   const useCssVar: typeof import('@vueuse/core')['useCssVar']
@@ -295,7 +297,7 @@ declare global {
 // for type re-export
 declare global {
   // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
+  export type { Component, Slot, Slots, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
   import('vue')
 }
 
@@ -319,6 +321,7 @@ declare module 'vue' {
     readonly createGlobalState: UnwrapRef<typeof import('@vueuse/core')['createGlobalState']>
     readonly createInjectionState: UnwrapRef<typeof import('@vueuse/core')['createInjectionState']>
     readonly createReactiveFn: UnwrapRef<typeof import('@vueuse/core')['createReactiveFn']>
+    readonly createRef: UnwrapRef<typeof import('@vueuse/core')['createRef']>
     readonly createReusableTemplate: UnwrapRef<typeof import('@vueuse/core')['createReusableTemplate']>
     readonly createSharedComposable: UnwrapRef<typeof import('@vueuse/core')['createSharedComposable']>
     readonly createTemplatePromise: UnwrapRef<typeof import('@vueuse/core')['createTemplatePromise']>
@@ -436,6 +439,7 @@ declare module 'vue' {
     readonly useCloned: UnwrapRef<typeof import('@vueuse/core')['useCloned']>
     readonly useColorMode: UnwrapRef<typeof import('@vueuse/core')['useColorMode']>
     readonly useConfirmDialog: UnwrapRef<typeof import('@vueuse/core')['useConfirmDialog']>
+    readonly useCountdown: UnwrapRef<typeof import('@vueuse/core')['useCountdown']>
     readonly useCounter: UnwrapRef<typeof import('@vueuse/core')['useCounter']>
     readonly useCssModule: UnwrapRef<typeof import('vue')['useCssModule']>
     readonly useCssVar: UnwrapRef<typeof import('@vueuse/core')['useCssVar']>
diff --git a/src/typings/components.d.ts b/src/typings/components.d.ts
index 87cd501..96e3a6d 100644
--- a/src/typings/components.d.ts
+++ b/src/typings/components.d.ts
@@ -2,6 +2,7 @@
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
+// biome-ignore lint: disable
 export {}
 
 /* prettier-ignore */
diff --git a/src/views/index.vue b/src/views/index.vue
index 52fbbb6..8e0eef1 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -4,24 +4,68 @@ import { getAllEpisode } from '../utils/episode'
 const rawEpisodes = Object.values(getAllEpisode())
 
 const sort = ref<'asc' | 'desc'>('desc')
+const selectedYear = useLocalStorage<number | null>('year-filter', null)
+
+const availableYears = computed(() => {
+  const yearCounts = new Map<number, number>()
+  rawEpisodes.forEach(e => {
+    const year = e.date.getFullYear()
+    yearCounts.set(year, (yearCounts.get(year) || 0) + 1)
+  })
+  return Array.from(yearCounts.entries())
+    .map(([year, count]) => ({ year, count }))
+    .sort((a, b) => b.year - a.year)
+})
+
+const totalCount = computed(() => rawEpisodes.length)
+
 const handleSort = () => {
   sort.value = sort.value === 'asc' ? 'desc' : 'asc'
 }
 
+const handleYearFilter = (year: number | null) => {
+  selectedYear.value = year
+}
+
 const episodes = computed(() =>
-  [...rawEpisodes].sort((a, b) => {
-    if (sort.value === 'asc') {
-      return a.date.getTime() - b.date.getTime()
-    } else {
-      return b.date.getTime() - a.date.getTime()
-    }
-  }),
+  [...rawEpisodes]
+    .filter(e => selectedYear.value === null || e.date.getFullYear() === selectedYear.value)
+    .sort((a, b) => {
+      if (sort.value === 'asc') {
+        return a.date.getTime() - b.date.getTime()
+      } else {
+        return b.date.getTime() - a.date.getTime()
+      }
+    }),
 )
 </script>
 
 <template>
   <div flex="~ col 1" px-4>
-    <div flex="~ row gap-2" items-center justify-end px-6 py-2>
+    <div flex="~ wrap row gap-2" items-center justify-between px-6 py-4>
+      <div flex="~ wrap gap-2" items-center>
+        <span text-sm font-medium text-gray-500>年份:</span>
+        <button
+          :class="[
+            'year-chip',
+            selectedYear === null ? 'year-chip-active' : 'year-chip-inactive'
+          ]"
+          @click="handleYearFilter(null)"
+        >
+          全部 <span op-60 text-xs>({{ totalCount }})</span>
+        </button>
+        <button
+          v-for="{ year, count } in availableYears"
+          :key="year"
+          :class="[
+            'year-chip',
+            selectedYear === year ? 'year-chip-active' : 'year-chip-inactive'
+          ]"
+          @click="handleYearFilter(year)"
+        >
+          {{ year }} <span op-60 text-xs>({{ count }})</span>
+        </button>
+      </div>
       <div
         :class="
           sort === 'asc'
@@ -30,6 +74,10 @@ const episodes = computed(() =>
         "
         cursor-pointer
         text-2xl
+        text-gray-500
+        hover:text-gray-700
+        dark:text-gray-400
+        dark:hover:text-gray-200
         @click="handleSort"
       />
     </div>
@@ -47,4 +95,45 @@ const episodes = computed(() =>
 .episodes {
   grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr));
 }
+
+.year-chip {
+  padding: 0.375rem 0.875rem;
+  border-radius: 9999px;
+  font-size: 0.875rem;
+  font-weight: 500;
+  transition: all 0.2s ease;
+  cursor: pointer;
+  border: 1px solid transparent;
+}
+
+.year-chip-active {
+  background-color: #3b82f6;
+  color: white;
+}
+
+.year-chip-active:hover {
+  background-color: #2563eb;
+}
+
+.year-chip-inactive {
+  background-color: white;
+  color: #6b7280;
+  border-color: #d1d5db;
+}
+
+.year-chip-inactive:hover {
+  background-color: #f3f4f6;
+  border-color: #9ca3af;
+}
+
+.dark .year-chip-inactive {
+  background-color: #1f2937;
+  color: #9ca3af;
+  border-color: #374151;
+}
+
+.dark .year-chip-inactive:hover {
+  background-color: #374151;
+  border-color: #4b5563;
+}
 </style>