diff --git a/app/app.css b/app/app.css
index 65fb8613..641de3be 100644
--- a/app/app.css
+++ b/app/app.css
@@ -100,3 +100,77 @@ html.dark {
   width: 0 !important;
   height: 0 !important;
 }
+
+/* Markdown */
+
+.markdown-content a {
+  --uno: 'op75 hover:op100 hover:underline';
+}
+
+.markdown-content h1 {
+  --uno: font-bold text-2xl mb5;
+}
+
+.markdown-content h2 {
+  --uno: text-xl mb5 op75 border-b border-base py2;
+}
+
+.markdown-content p {
+  --uno: mb5;
+}
+
+.markdown-content pre {
+  --uno: mb5;
+}
+
+.markdown-content pre {
+  --uno: px3 py2 bg-gray-100 rounded max-w-200 of-auto text-sm;
+}
+
+.markdown-content .shiki {
+  background: #f7f7f7 !important;
+}
+
+.dark .markdown-content .shiki {
+  background: var(--shiki-dark-bg) !important;
+}
+
+.dark .markdown-content .shiki span {
+  color: var(--shiki-dark) !important;
+}
+
+.markdown-magic-link {
+  display: inline-flex;
+  align-items: center;
+  background: rgb(156 163 175 / 0.3);
+  transform: translateY(3px);
+  line-height: 100%;
+  color: var(--fg-light) !important;
+  --uno: gap-1 transition rounded px1.5 py1 important-border-0 font-condensed;
+}
+
+.markdown-magic-link:hover {
+  background: rgb(156 163 175 / 0.4);
+  color: var(--fg) !important;
+}
+
+.markdown-magic-link-image {
+  display: inline-block;
+  height: 1.1em;
+  width: 1.1em;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+  border-radius: 2px;
+}
+
+.markdown-magic-link.markdown-magic-link-github-at {
+  transform: translateY(6px);
+  --uno: pl-0 py-0 pr2 text-sm gap-1.2 rounded-full;
+}
+
+.markdown-magic-link.markdown-magic-link-github-at .markdown-magic-link-image {
+  height: 1.6em;
+  width: 1.6em;
+  border-radius: 50%;
+}
diff --git a/app/components/atomic/QifiCode.vue b/app/components/qifi/QifiCode.vue
similarity index 68%
rename from app/components/atomic/QifiCode.vue
rename to app/components/qifi/QifiCode.vue
index fcb11ca5..6329d174 100644
--- a/app/components/atomic/QifiCode.vue
+++ b/app/components/qifi/QifiCode.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import type { Pausable } from '@vueuse/core'
+import QifiHowToScan from './QifiHowToScan'
 
 const props = withDefaults(defineProps<{
   prefix?: string
@@ -72,7 +73,7 @@ function onDone() {
   <div flex="~ col gap-2" p4>
     <h3 flex items-center gap2 p2 text-xl>
       <span i-uil-qrcode-scan inline-block />
-      掃碼分享
+      {{ $t('actions.shareViaQR') }}
     </h3>
     <div
       class="sticky top-0 z-10 aspect-square [&>svg]:h-full [&>svg]:w-full"
@@ -81,25 +82,14 @@ function onDone() {
     />
     <div flex="~ gap-2">
       <SimpleButton w-full icon="i-uil-pause-circle" @click="stopSometime(3)">
-        暫停 3 秒
+        {{ $t('actions.pauseQifi', [3]) }}
       </SimpleButton>
       <SimpleButton w-full icon="i-uil-multiply " @click="onDone()">
-        關閉
+        {{ $t('actions.close') }}
       </SimpleButton>
     </div>
-    <div flex="~ col gap-4" mt2 p2 text-sm>
-      <p>
-        由於單個 QR Code 的傳輸大小限制，我們採用了名為 <a href="https://github.com/qifi-dev/qrs" text-blue underline>QiFi/Qrs</a> 的 <b>動態 QR Code</b>。
-      </p>
-      <p>
-        使用相機 App 掃描後，將導向 QRS 掃描器頁面，繼續掃描傳輸剩餘信息。過程中可能會需要相機權限，請放心，網頁代碼開源且不保存相機畫面。數據接收完成後，會自動回到 maru 打開對應歌曲。
-      </p>
-      <p>
-        部分相機 APP 會因為動態變化的二維碼而無法正常掃描，也你可以點擊 <span i-uil-pause-circle inline-block align-middle /> 暫停 5 秒，這會有助於你掃描。
-      </p>
-      <p>
-        你也可以手動輸入掃描網頁的地址：<a href="https://qrss.netlify.app" text-blue underline>qrss.netlify.app</a>
-      </p>
+    <div mt2 class="markdown-content">
+      <QifiHowToScan />
     </div>
   </div>
 </template>
diff --git a/app/components/qifi/QifiHowToScan.en.md b/app/components/qifi/QifiHowToScan.en.md
new file mode 100644
index 00000000..a726b06e
--- /dev/null
+++ b/app/components/qifi/QifiHowToScan.en.md
@@ -0,0 +1,7 @@
+Due to the transfer size limitation of a single QR Code, we use a <b>dynamic QR Code</b> called {QiFi}.
+
+After scanning with a camera app, it will direct you to the QRS scanner page to continue scanning the remaining information. You may need camera permissions during this process; rest assured, the webpage code is open source and does not save camera footage. Once data reception is complete, it will automatically return to maru to open the corresponding song.
+
+Some camera apps may not scan dynamic QR codes properly. You can click <span rounded bg-gray:20 p1 inline-flex align-middle><span i-uil-pause-circle /></span> to pause, which might help you scan.
+
+You can also manually enter the scanning webpage address: [qrss.netlify.app](https://qrss.netlify.app)
diff --git a/app/components/qifi/QifiHowToScan.ts b/app/components/qifi/QifiHowToScan.ts
new file mode 100644
index 00000000..2764c8b7
--- /dev/null
+++ b/app/components/qifi/QifiHowToScan.ts
@@ -0,0 +1,22 @@
+export default defineComponent({
+  setup() {
+    const { locale } = useI18n()
+    const components = Object.fromEntries(
+      Array.from(Object.entries(import.meta.glob('./QifiHowToScan.*.md'))
+        .map(([key, value]) => [key.match(/\.([\w\-]+)\.\w+$/)![1], value]),
+      ),
+    )
+
+    // const usingFallback = computed(() => !components[locale.value])
+    const component = shallowRef<any>()
+
+    watch(locale, async () => {
+      const mod = await (components[locale.value] || components['zh-Hant'])()
+      component.value = mod.default
+    }, {
+      immediate: true,
+    })
+
+    return () => component.value ? h(component.value) : null
+  },
+})
diff --git a/app/components/qifi/QifiHowToScan.zh-Hans.md b/app/components/qifi/QifiHowToScan.zh-Hans.md
new file mode 100644
index 00000000..3e835f45
--- /dev/null
+++ b/app/components/qifi/QifiHowToScan.zh-Hans.md
@@ -0,0 +1,7 @@
+由于单个二维码的传输大小限制，我们采用了一种名为 {QiFi} 的 <b>动态二维码</b>。
+
+使用相机 App 扫描后，将导向 QRS 扫描器页面，继续扫描传输剩余信息。过程中可能会需要相机权限，请放心，网页代码开源且不保存相机画面。数据接收完成后，会自动返回 maru 打开对应歌曲。
+
+部分相机 APP 会因为动态变化的二维码而无法正常扫描，您可以点击 <span rounded bg-gray:20 p1 inline-flex align-middle><span i-uil-pause-circle /></span> 暫停，这会有助于您扫描。
+
+您也可以手动输入扫描网页的地址： [qrss.netlify.app](https://qrss.netlify.app)
diff --git a/app/components/qifi/QifiHowToScan.zh-Hant.md b/app/components/qifi/QifiHowToScan.zh-Hant.md
new file mode 100644
index 00000000..b8c0ce00
--- /dev/null
+++ b/app/components/qifi/QifiHowToScan.zh-Hant.md
@@ -0,0 +1,7 @@
+由於單個 QR Code 的傳輸大小限制，我們採用了名為 {QiFi} 的 <b>動態 QR Code</b>。
+
+使用相機 App 掃描後，將導向 QRS 掃描器頁面，繼續掃描傳輸剩餘信息。過程中可能會需要相機權限，請放心，網頁代碼開源且不保存相機畫面。數據接收完成後，會自動回到 maru 打開對應歌曲。
+
+部分相機 APP 會因為動態變化的二維碼而無法正常掃描，也你可以點擊 <span rounded bg-gray:20 p1 inline-flex align-middle><span i-uil-pause-circle /></span> 暫停，這會有助於你掃描。
+
+你也可以手動輸入掃描網頁的地址： [qrss.netlify.app](https://qrss.netlify.app)
diff --git a/app/layouts/content.vue b/app/layouts/content.vue
index 3327537a..e7d91bf7 100644
--- a/app/layouts/content.vue
+++ b/app/layouts/content.vue
@@ -17,41 +17,3 @@ const isMatchedLocale = computed(() => locale.value === route.meta.locale)
     <slot />
   </div>
 </template>
-
-<style>
-.markdown-content a {
-  --uno: 'op75 hover:op100 hover:underline';
-}
-
-.markdown-content h1 {
-  --uno: font-bold text-2xl mb5;
-}
-
-.markdown-content h2 {
-  --uno: text-xl mb5 op75 border-b border-base py2;
-}
-
-.markdown-content p {
-  --uno: mb5;
-}
-
-.markdown-content pre {
-  --uno: mb5;
-}
-
-.markdown-content pre {
-  --uno: px3 py2 bg-gray-100 rounded max-w-200 of-auto text-sm;
-}
-
-.markdown-content .shiki {
-  background: #f7f7f7 !important;
-}
-
-.dark .markdown-content .shiki {
-  background: var(--shiki-dark-bg) !important;
-}
-
-.dark .markdown-content .shiki span {
-  color: var(--shiki-dark) !important;
-}
-</style>
diff --git a/app/locales/en.json b/app/locales/en.json
index b89400f1..5574546e 100644
--- a/app/locales/en.json
+++ b/app/locales/en.json
@@ -128,7 +128,9 @@
     "downloadAllLyrics": "Download All Lyrics",
     "exportSelected": "Export Selected",
     "removeSelected": "Remove Selected",
-    "shareViaQR": "Share via QR Code"
+    "shareViaQR": "Share via QR Code",
+    "close": "Close",
+    "pauseQifi": "Pause {0}s"
   },
   "messages": {
     "wip": "The website is under development, and many features are not yet complete. Welcome to report issues via Discord",
diff --git a/app/locales/zh-Hans.json b/app/locales/zh-Hans.json
index 3ae9edf1..eaf5c613 100644
--- a/app/locales/zh-Hans.json
+++ b/app/locales/zh-Hans.json
@@ -128,7 +128,9 @@
     "downloadAllLyrics": "下载所有歌词文件",
     "exportSelected": "导出所选",
     "removeSelected": "删除所选",
-    "shareViaQR": "二维码分享"
+    "shareViaQR": "二维码分享",
+    "close": "关闭",
+    "pauseQifi": "暂停 {0} 秒"
   },
   "messages": {
     "wip": "网站开发中、许多功能尚未完善。欢迎通过 Discord 回报问题",
diff --git a/app/locales/zh-Hant.json b/app/locales/zh-Hant.json
index 9e4637e0..aba575ce 100644
--- a/app/locales/zh-Hant.json
+++ b/app/locales/zh-Hant.json
@@ -134,7 +134,9 @@
     "downloadAllLyrics": "下載所有歌詞檔案",
     "exportSelected": "匯出所選",
     "removeSelected": "刪除所選",
-    "shareViaQR": "QR 分享"
+    "shareViaQR": "QR 分享",
+    "close": "關閉",
+    "pauseQifi": "暫停 {0} 秒"
   },
   "appname": "二重丸",
   "errors": {
diff --git a/app/shims.d.ts b/app/shims.d.ts
new file mode 100644
index 00000000..a6311ec3
--- /dev/null
+++ b/app/shims.d.ts
@@ -0,0 +1,6 @@
+declare module '*.md' {
+  import type { DefineComponent } from 'vue'
+
+  const component: DefineComponent<object, object, any>
+  export default component
+}
diff --git a/nuxt.config.ts b/nuxt.config.ts
index c4dd33ae..ec83c31a 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,5 +1,6 @@
 import { fileURLToPath } from 'node:url'
 import { execaSync } from 'execa'
+import MarkdownItMagicLink from 'markdown-it-magic-link'
 import { appDescription, appName } from './app/constants'
 import { dependencies } from './package.json'
 
@@ -24,6 +25,16 @@ export default defineNuxtConfig({
         dark: 'vitesse-dark',
       },
     },
+    markdownItSetup(md) {
+      md.use(MarkdownItMagicLink, {
+        linksMap: {
+          QiFi: 'https://github.com/qifi-dev/qrs',
+        },
+        imageOverrides: [
+          ['https://github.com/qifi-dev/qrs', 'https://cdn.jsdelivr.net/gh/qifi-dev/qrs/public/logo.svg'],
+        ],
+      })
+    },
   },
 
   runtimeConfig: {
diff --git a/package.json b/package.json
index e868db8b..b4d14681 100644
--- a/package.json
+++ b/package.json
@@ -57,6 +57,7 @@
     "esno": "^4.8.0",
     "execa": "^9.4.0",
     "fast-glob": "^3.3.2",
+    "markdown-it-magic-link": "^0.1.4",
     "nuxt": "^3.13.2",
     "nuxt-compile-markdown": "^0.1.1",
     "shiki": "^1.22.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4385540b..cdaf294e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -132,6 +132,9 @@ importers:
       fast-glob:
         specifier: ^3.3.2
         version: 3.3.2
+      markdown-it-magic-link:
+        specifier: ^0.1.4
+        version: 0.1.4
       nuxt:
         specifier: ^3.13.2
         version: 3.13.2(@parcel/watcher@2.4.1)(@types/node@22.5.0)(encoding@0.1.13)(eslint@9.12.0(jiti@2.0.0))(idb-keyval@6.2.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@3.29.5)(terser@5.31.6)(typescript@5.6.3)(vite@5.4.6(@types/node@22.5.0)(terser@5.31.6))(vue-tsc@2.1.6(typescript@5.6.3))(webpack-sources@3.2.3)
@@ -3779,6 +3782,9 @@ packages:
     resolution: {integrity: sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==}
     engines: {node: '>=8'}
 
+  markdown-it-magic-link@0.1.4:
+    resolution: {integrity: sha512-Y0CgJVtqdGGeWJ+8bN+eBEr2q2ugmf5AMJWSbxBpmGcqARbKBB62biB7LwkoxtbddlmVkACYBFyjlMP/SzYlzg==}
+
   markdown-it-mdc@0.2.5:
     resolution: {integrity: sha512-7nj5/efQlZX+OAVw5nAYEH6kXtiNmRoMf5i7WDCeFRLXl5POFQCb+9s6qIsaBHnDLVWpZC3UTIPoVStbR9+24A==}
     peerDependencies:
@@ -9923,6 +9929,10 @@ snapshots:
     dependencies:
       semver: 6.3.1
 
+  markdown-it-magic-link@0.1.4:
+    dependencies:
+      markdown-it: 14.1.0
+
   markdown-it-mdc@0.2.5(@types/markdown-it@14.1.2)(markdown-it@14.1.0):
     dependencies:
       '@types/markdown-it': 14.1.2