diff --git a/docs/components/StatsBar.vue b/docs/components/StatsBar.vue
new file mode 100644
index 00000000..624e8c07
--- /dev/null
+++ b/docs/components/StatsBar.vue
@@ -0,0 +1,84 @@
+<script setup>
+import getText from "../scripts/i18nData";
+import {ref} from "vue";
+
+const onlineText = getText('online');
+const totalText = getText('total')
+
+const onlineFetchUrl = "https://api.liteyuki.icu/online"
+const totalFetchUrl = "https://api.liteyuki.icu/count"
+
+let online = ref(-1);
+let total = ref(-1);
+
+async function updateData() {
+  try {
+    const onlineResponse = await fetch(onlineFetchUrl);
+    const onlineData = await onlineResponse.json();
+    online.value = onlineData.online;
+
+    const totalResponse = await fetch(totalFetchUrl);
+    const totalData = await totalResponse.json();
+    total.value = totalData.register;
+  } catch (error) {
+    console.error('Error fetching data:', error);
+  }
+}
+
+updateData();
+
+setInterval(updateData, 10000);
+
+</script>
+
+<template>
+  <div class="online-status-bar">
+    <div id="total" class="section">
+      <div class="line">
+        <span class=dot style="background-color: #00a6ff"></span>
+        <span class="text">{{ totalText }}</span>
+      </div>
+      <div class="number">{{total.valueOf() < 0 ? getText('fetching') : total.valueOf()}}</div>
+    </div>
+    <div id="online" class="section">
+      <div class="line">
+        <span class=dot style="background-color: #00ff00"></span>
+        <span class="text">{{ onlineText }}</span>
+      </div>
+      <div class="number">{{ online.valueOf() < 0 ? getText('fetching') : online.valueOf()}}</div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.online-status-bar {
+  display: flex;
+  justify-content: center;
+  padding: 20px;
+  margin: 30px 10px 10px;
+  border-radius: 20px;
+  background-color: var(--vp-c-gray-1);
+}
+
+.section:not(:last-child) {
+  margin-right: 100px;
+}
+
+.line {
+  margin-bottom: 20px;
+}
+
+.dot {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  margin-right: 5px;
+}
+
+.number {
+  font-size: 30px;
+  font-weight: bold;
+  margin-top: 5px;
+}
+</style>
\ No newline at end of file
diff --git a/docs/en/index.md b/docs/en/index.md
index 8ad4dc87..c884c8c1 100644
--- a/docs/en/index.md
+++ b/docs/en/index.md
@@ -59,3 +59,7 @@ features:
     details: The project follows the LSO LICENSE and is open to contributions
     link: https://github.com/LiteyukiStudio/LiteyukiStudioOpensourceLICENSE
 ---
+<script setup>
+import StatsBar from '../components/StatsBar.vue'
+</script>
+<StatsBar></Statsbar>
\ No newline at end of file
diff --git a/docs/scripts/githubAPI.ts b/docs/scripts/githubAPI.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/docs/scripts/i18nData.ts b/docs/scripts/i18nData.ts
new file mode 100644
index 00000000..c262dcc5
--- /dev/null
+++ b/docs/scripts/i18nData.ts
@@ -0,0 +1,26 @@
+import {useData} from "vitepress";
+
+const i18nData = {
+    "zh": {
+        online: '当前在线',
+        offline: '离线',
+        total: '全球实例',
+        fetching: '获取中',
+    },
+    "en": {
+        online: 'Online',
+        offline: 'Offline',
+        total: 'Total',
+        fetching: 'Fetching',
+    }
+}
+
+export default function getText(key: string): string {
+    // 转换语言
+    // zh-Hans -> zh
+    // en-US -> en
+    if (useData().site.value.lang.includes('-')) {
+        return i18nData[useData().site.value.lang.split('-')[0]][key];
+    }
+    return i18nData[useData().site.value.lang][key];
+}
\ No newline at end of file
diff --git a/docs/zh/index.md b/docs/zh/index.md
index 55745b15..0017920b 100644
--- a/docs/zh/index.md
+++ b/docs/zh/index.md
@@ -59,3 +59,8 @@ features:
     details: 项目遵循LSO LICENCE开源，欢迎各位的贡献
     link: https://github.com/LiteyukiStudio/LiteyukiStudioOpensourceLICENSE
 ---
+
+<script setup>
+import StatsBar from '../components/StatsBar.vue'
+</script>
+<StatsBar></Statsbar>