diff --git a/src/components/common/AddButton.vue b/src/components/common/AddButton.vue
index 388f181..6b0bd4b 100644
--- a/src/components/common/AddButton.vue
+++ b/src/components/common/AddButton.vue
@@ -1,13 +1,32 @@
 <script setup>
-import { CirclePlus } from '@element-plus/icons-vue'
+import { Plus } from '@element-plus/icons-vue'
+const props = defineProps(['size'])
 </script>
 
 <template>
-  <el-icon color="#79bbff" :size="30"><CirclePlus /></el-icon>
+  <div class="circle" :style="{ width: props.size + 'px', height: props.size + 'px' }">
+    <el-icon :size="18"><Plus /></el-icon>
+  </div>
 </template>
 
 <style lang="scss" scoped>
-.el-icon {
-  margin-right: 10px;
+.circle {
+  border: solid 1px;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  --hoverColor: gray;
+  color: var(--hoverColor);
+
+  &:hover {
+    --hoverColor: #409eff;
+    color: var(--hoverColor);
+  }
+
+  .el-icon {
+    color: var(--hoverColor);
+  }
 }
 </style>
diff --git a/src/views/message/MessageLayout.vue b/src/views/message/MessageLayout.vue
index b26793f..e176654 100644
--- a/src/views/message/MessageLayout.vue
+++ b/src/views/message/MessageLayout.vue
@@ -623,7 +623,7 @@ const onNoneSelected = () => {
       <div class="msg-aside-main">
         <div class="header">
           <SearchBox @showContactCard="onShowContactCard" @openSession="onOpenSession"></SearchBox>
-          <AddButton></AddButton>
+          <AddButton :size="30"></AddButton>
         </div>
 
         <SessionMenu :sessionId="showMenuSessionId" @selectMenu="onSelectMenu">
@@ -867,8 +867,7 @@ const onNoneSelected = () => {
       overflow: hidden; // 禁用它的滚动条
 
       .header {
-        margin-top: 10px;
-        margin-bottom: 10px;
+        padding: 10px 10px 10px 0;
         display: flex;
         align-items: center;
       }