diff --git a/blog/src/App.vue b/blog/src/App.vue
index 80b5acf..651bd5a 100644
--- a/blog/src/App.vue
+++ b/blog/src/App.vue
@@ -6,7 +6,10 @@
         <el-col :span="17">
           <router-view></router-view>
         </el-col>
-        <el-col :span="7"><div class="grid-content ep-bg-purple" /></el-col>
+        <el-col :span="7"
+          ><div class="grid-content ep-bg-purple" />
+          <UserInfo />
+        </el-col>
       </el-row>
     </div>
   </main>
@@ -17,6 +20,7 @@
 <script setup>
 import Header from '@/components/Header.vue'
 import Footer from '@/components/Footer.vue'
+import UserInfo from './components/UserInfo.vue'
 </script>
 
 <style lang="scss" scoped>
diff --git a/blog/src/components/UserInfo.vue b/blog/src/components/UserInfo.vue
new file mode 100644
index 0000000..c772031
--- /dev/null
+++ b/blog/src/components/UserInfo.vue
@@ -0,0 +1,19 @@
+<template>
+  <el-card shadow="hover">
+    <div class="avatar">
+      <el-avatar :size="100" :src="avatar" />
+    </div>
+  </el-card>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const avatar = ref('https://liuyxcc.github.io/img/avatar.png')
+</script>
+
+<style lang="scss" scoped>
+.el-card {
+  margin: 20px 0;
+}
+</style>