diff --git a/components/i/UserInfo.vue b/components/i/UserInfo.vue
index f138b3b1abbb0801e407d0260b1c7dd0f3bc3379..35ed591fb8fdece1eb3aabf976725dc284fcc4a1 100644
--- a/components/i/UserInfo.vue
+++ b/components/i/UserInfo.vue
@@ -3,9 +3,10 @@
         <div class="flex flex-grow">
             <UDropdown class="flex flex-grow" :items="items">
                 <UButton class="flex flex-grow gap-2" color="gray" variant="ghost">
-                    <UAvatar src="https://csdn-665-inscode.s3.cn-north-1.jdcloud-oss.com/inscode/202303/622eda98dfef6c4fdb84ccca/1680089871598-75919715-hvlk99ddLLhyNTXtl4TaQAgeFBFz4ZGD/avatar" />
-                    <div>Aresn</div>
-                    <UBadge size="xs" color="purple" variant="soft" label="PRO" />
+                    <UAvatar :src="$info.avatar" />
+                    <div>{{ $info.name }}</div>
+                    <UBadge v-if="$info.pro" size="xs" color="purple" variant="soft" label="PRO" />
+                    <UBadge v-else size="xs" color="gray" variant="soft" label="FREE" />
                     <UIcon name="i-heroicons-chevron-down-20-solid" />
                 </UButton>
             </UDropdown>
@@ -19,6 +20,7 @@
     </div>
 </template>
 <script setup>
+const { $isSignIn, $info } = useUserStore()
 const colorMode = useColorMode()
 const isDark = computed({
     get () {
diff --git a/stores/user.js b/stores/user.js
index cf4a8e55761c68af826c42bfaef7a619724f94d0..0eb1ee8a6013c809856641f10542b0778b6dda4a 100644
--- a/stores/user.js
+++ b/stores/user.js
@@ -1,11 +1,13 @@
 import { defineStore } from 'pinia'
 
 export const useUserStore = defineStore('user', () => {
-    const info = ref({
+    const $info = ref({
         name: 'Aresn',
         avatar: 'https://csdn-665-inscode.s3.cn-north-1.jdcloud-oss.com/inscode/202303/622eda98dfef6c4fdb84ccca/1680089871598-75919715-hvlk99ddLLhyNTXtl4TaQAgeFBFz4ZGD/avatar',
-        pro: 0
+        pro: 1
     })
 
-    return { info }
+    const $isSignIn = ref(false)
+
+    return { $info, $isSignIn }
 })