diff --git a/apps/web/src/App.vue b/apps/web/src/App.vue
index edf8a5e..a5cee30 100644
--- a/apps/web/src/App.vue
+++ b/apps/web/src/App.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { onBeforeUnmount, onMounted } from "vue";
+import { WifiOff } from "@lucide/vue";
 import { useAuthStore } from "./stores/auth";
 
 const auth = useAuthStore();
@@ -13,7 +14,13 @@ onBeforeUnmount(() => window.removeEventListener("online", retrySession));
 
 <template>
   <RouterView />
-  <div v-if="auth.unavailable && auth.user" class="offline-status" role="status">
-    服务暂不可用，当前显示本地数据
+  <div
+    v-if="auth.unavailable && auth.user"
+    class="offline-status"
+    role="status"
+    aria-label="服务暂不可用，当前显示本地数据"
+    title="服务暂不可用，当前显示本地数据"
+  >
+    <WifiOff :size="16" />
   </div>
 </template>
diff --git a/apps/web/src/styles.css b/apps/web/src/styles.css
index e0e205a..8425833 100644
--- a/apps/web/src/styles.css
+++ b/apps/web/src/styles.css
@@ -14,19 +14,19 @@
 
 .offline-status {
   position: fixed;
-  top: max(10px, env(safe-area-inset-top));
-  left: 50%;
+  top: max(8px, env(safe-area-inset-top));
+  right: 8px;
   z-index: 100;
-  max-width: calc(100% - 32px);
-  padding: 7px 12px;
+  width: 30px;
+  height: 30px;
+  display: grid;
+  place-items: center;
+  padding: 0;
   border: 1px solid #e9c98d;
-  border-radius: 999px;
+  border-radius: 50%;
   background: rgba(255, 248, 228, .96);
   color: #795b19;
-  font-size: 11px;
-  line-height: 1.2;
-  pointer-events: none;
-  transform: translateX(-50%);
+  box-shadow: 0 2px 8px rgba(74, 57, 18, .12);
 }
 
 html,