diff --git a/README_zh.md b/README_zh.md
index 446f695..6d99b42 100644
--- a/README_zh.md
+++ b/README_zh.md
@@ -106,6 +106,10 @@ wails dev
 
 <img src="docs/images/wechat_official.png" alt="wechat" width="360" />
 
+### B站官方账号
+
+<img src="docs/images/bilibili_official.png" alt="bilibili" width="360" />
+
 ### 独立开发互助QQ群
 
 ```
diff --git a/docs/images/bilibili_official.png b/docs/images/bilibili_official.png
new file mode 100644
index 0000000..a4b1868
Binary files /dev/null and b/docs/images/bilibili_official.png differ
diff --git a/frontend/src/assets/images/bilibili_official.png b/frontend/src/assets/images/bilibili_official.png
new file mode 100644
index 0000000..a4b1868
Binary files /dev/null and b/frontend/src/assets/images/bilibili_official.png differ
diff --git a/frontend/src/components/sidebar/Ribbon.vue b/frontend/src/components/sidebar/Ribbon.vue
index 1ab43e6..9866967 100644
--- a/frontend/src/components/sidebar/Ribbon.vue
+++ b/frontend/src/components/sidebar/Ribbon.vue
@@ -15,6 +15,7 @@ import { extraTheme } from '@/utils/extra_theme.js'
 import useBrowserStore from 'stores/browser.js'
 import { useRender } from '@/utils/render.js'
 import wechatUrl from '@/assets/images/wechat_official.png'
+import bilibiliUrl from '@/assets/images/bilibili_official.png'
 import QRCode from '@/components/icons/QRCode.vue'
 import Twitter from '@/components/icons/Twitter.vue'
 import { trackEvent } from '@/utils/analytics.js'
@@ -201,7 +202,10 @@ const exThemeVars = computed(() => {
 
         <!-- wechat official modal -->
         <n-modal v-model:show="showWechat" close-on-esc mask-closable transform-origin="center">
-            <n-image :src="wechatUrl" :width="400" preview-disabled />
+            <n-flex vertical>
+                <n-image :src="wechatUrl" :width="400" preview-disabled />
+                <n-image :src="bilibiliUrl" :width="400" preview-disabled />
+            </n-flex>
         </n-modal>
     </div>
 </template>