diff --git a/app/.vitepress/src/App.vue b/app/.vitepress/src/App.vue
index f026bb88b473eac086b0eff074b7d24f20eef4fc..7550bf33d9bdc2557bd047eafda1650ef268a0d9 100644
--- a/app/.vitepress/src/App.vue
+++ b/app/.vitepress/src/App.vue
@@ -27,6 +27,7 @@ import FloatingButtonEn from '~@/components/FloatingButtonEn.vue';
 import CookieNotice from '~@/components/CookieNotice.vue';
 
 import AppTour from '~@/components/AppTour.vue';
+import AppYear from '@/components/AppYear.vue';
 
 import categories from '@/data/common/category';
 import { setStoreData } from './shared/login';
@@ -100,6 +101,7 @@ onMounted(() => {
       <Content v-else />
       <FloatingButton v-if="lang === 'zh'" />
       <FloatingButtonEn v-else />
+      <AppYear />
     </main>
   </el-config-provider>
   <CookieNotice />
diff --git a/app/.vitepress/src/assets/category/year/euler-year-en.png b/app/.vitepress/src/assets/category/year/euler-year-en.png
new file mode 100644
index 0000000000000000000000000000000000000000..d20339a8e57692247d1139eb879811b3ef84d851
Binary files /dev/null and b/app/.vitepress/src/assets/category/year/euler-year-en.png differ
diff --git a/app/.vitepress/src/assets/category/year/euler-year-zh.png b/app/.vitepress/src/assets/category/year/euler-year-zh.png
new file mode 100644
index 0000000000000000000000000000000000000000..8e7ddc1d51dce96a576126e6bb0e1c125063399c
Binary files /dev/null and b/app/.vitepress/src/assets/category/year/euler-year-zh.png differ
diff --git a/app/.vitepress/src/components/AppYear.vue b/app/.vitepress/src/components/AppYear.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c00b05989b6f68aad3e56040e7d3684adfdc7ec0
--- /dev/null
+++ b/app/.vitepress/src/components/AppYear.vue
@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useData } from 'vitepress';
+
+import yearImgZh from '@/assets/category/year/euler-year-zh.png';
+import yearImgEn from '@/assets/category/year/euler-year-en.png';
+
+const { lang } = useData();
+const EULER_YEAR = 'https://summary.openeuler.org/';
+
+const isShow = ref(true);
+function closeYear() {
+  isShow.value = false;
+}
+const yearImg = computed(() => {
+  return lang.value === 'zh' ? yearImgZh : yearImgEn;
+});
+</script>
+<template>
+  <div v-show="isShow" class="euler-year">
+    <div class="close-year" @click="closeYear"></div>
+    <a
+      class="year-link"
+      :href="EULER_YEAR + lang + '/'"
+      rel="noopener noreferrer"
+      target="_blank"
+    ></a>
+    <img :src="yearImg" alt="" />
+  </div>
+</template>
+<style lang="scss" scoped>
+.euler-year {
+  position: fixed;
+  left: calc(var(--layout-content-padding) / 2);
+  bottom: 164px;
+  z-index: 12;
+
+  .year-link {
+    position: absolute;
+    width: 100%;
+    height: calc(100% - 20px);
+    bottom: 0;
+    @include respond-to('<=pad') {
+      height: calc(100% - 16px);
+    }
+  }
+  .close-year {
+    cursor: pointer;
+    position: absolute;
+    right: 20px;
+    top: -2px;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    @include respond-to('<=pad') {
+      width: 16px;
+      height: 16px;
+      right: 12px;
+    }
+  }
+  img {
+    width: 180px;
+
+    @include respond-to('<=pad') {
+      width: 120px;
+    }
+  }
+}
+</style>