diff --git a/frontend_nuxt/pages/message-box/[id].vue b/frontend_nuxt/pages/message-box/[id].vue
index 60532f7ea..737310efc 100644
--- a/frontend_nuxt/pages/message-box/[id].vue
+++ b/frontend_nuxt/pages/message-box/[id].vue
@@ -28,6 +28,13 @@
             </div>
           </template>
         </BaseTimeline>
+        <div class="empty-container">
+          <BasePlaceholder
+            v-if="messages.length === 0"
+            text="暂无会话，发送消息试试 🎉"
+            icon="fas fa-inbox"
+          />
+        </div>
       </template>
     </div>
 
@@ -57,6 +64,7 @@ import { useWebSocket } from '~/composables/useWebSocket'
 import { useUnreadCount } from '~/composables/useUnreadCount'
 import TimeManager from '~/utils/time'
 import BaseTimeline from '~/components/BaseTimeline.vue'
+import BasePlaceholder from '~/components/BasePlaceholder.vue'
 
 const config = useRuntimeConfig()
 const route = useRoute()
diff --git a/frontend_nuxt/pages/message-box/index.vue b/frontend_nuxt/pages/message-box/index.vue
index 9de3b0c65..4fb24affa 100644
--- a/frontend_nuxt/pages/message-box/index.vue
+++ b/frontend_nuxt/pages/message-box/index.vue
@@ -8,14 +8,14 @@
       <div class="error-text">{{ error }}</div>
     </div>
 
-    <div v-else-if="conversations.length === 0" class="empty-container">
-      <div class="empty-text">暂无会话</div>
-    </div>
-
     <div v-if="!loading" class="search-container">
       <SearchDropdown />
     </div>
 
+    <div v-if="!loading && conversations.length === 0" class="empty-container">
+      <BasePlaceholder v-if="conversations.length === 0" text="暂无会话" icon="fas fa-inbox" />
+    </div>
+
     <div
       v-if="!loading"
       v-for="convo in conversations"
@@ -67,6 +67,7 @@ import { useUnreadCount } from '~/composables/useUnreadCount'
 import TimeManager from '~/utils/time'
 import { stripMarkdownLength } from '~/utils/markdown'
 import SearchDropdown from '~/components/SearchDropdown.vue'
+import BasePlaceholder from '~/components/BasePlaceholder.vue'
 
 const config = useRuntimeConfig()
 const conversations = ref([])
diff --git a/frontend_nuxt/pages/users/[id].vue b/frontend_nuxt/pages/users/[id].vue
index 8ac524306..521e445ea 100644
--- a/frontend_nuxt/pages/users/[id].vue
+++ b/frontend_nuxt/pages/users/[id].vue
@@ -12,25 +12,27 @@
         <div class="profile-page-header-user-info">
           <div class="profile-page-header-user-info-name">{{ user.username }}</div>
           <div class="profile-page-header-user-info-description">{{ user.introduction }}</div>
-          <div
-            v-if="!isMine && !subscribed"
-            class="profile-page-header-subscribe-button"
-            @click="subscribeUser"
-          >
-            <i class="fas fa-user-plus"></i>
-            关注
-          </div>
-          <div
-            v-if="!isMine && subscribed"
-            class="profile-page-header-unsubscribe-button"
-            @click="unsubscribeUser"
-          >
-            <i class="fas fa-user-minus"></i>
-            取消关注
-          </div>
-          <div v-if="!isMine" class="profile-page-header-subscribe-button" @click="sendMessage">
-            <i class="fas fa-paper-plane"></i>
-            发私信
+          <div class="profile-page-header-user-info-buttons">
+            <div
+              v-if="!isMine && !subscribed"
+              class="profile-page-header-subscribe-button"
+              @click="subscribeUser"
+            >
+              <i class="fas fa-user-plus"></i>
+              关注
+            </div>
+            <div
+              v-if="!isMine && subscribed"
+              class="profile-page-header-unsubscribe-button"
+              @click="unsubscribeUser"
+            >
+              <i class="fas fa-user-minus"></i>
+              取消关注
+            </div>
+            <div v-if="!isMine" class="profile-page-header-subscribe-button" @click="sendMessage">
+              <i class="fas fa-paper-plane"></i>
+              发私信
+            </div>
           </div>
           <LevelProgress
             :exp="levelInfo.exp"
@@ -640,6 +642,12 @@ watch(selectedTab, async (val) => {
   color: #666;
 }
 
+.profile-page-header-user-info-buttons {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+}
+
 .profile-page-header-subscribe-button {
   display: flex;
   flex-direction: row;