diff --git a/src/assets/icon/add.png b/src/assets/icon/add.png
new file mode 100644
index 0000000..36e77d3
Binary files /dev/null and b/src/assets/icon/add.png differ
diff --git a/src/views/CoinSellerSearchView.vue b/src/views/CoinSellerSearchView.vue
index 04564eb..321bc13 100644
--- a/src/views/CoinSellerSearchView.vue
+++ b/src/views/CoinSellerSearchView.vue
@@ -4,32 +4,45 @@
 
     <div class="content">
       <!-- 搜索框 -->
-      <div class="search-section">
-        <div class="search-box">
-          <span class="search-icon">🔍</span>
+      <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px">
+        <div
+          style="
+            flex: 1;
+            border-radius: 32px;
+            border: 1px solid #fff;
+
+            box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
+            padding: 0 8px;
+
+            display: flex;
+            align-items: center;
+            height: max-content;
+          "
+        >
+          <img src="../assets/icon/search.png" alt="" width="24px" style="opacity: 0.6" />
           <input
             v-model="searchQuery"
             type="text"
-            placeholder="Please enter the host ID"
-            class="search-input"
-@keyup.enter="handleEnterPress"
+            name=""
+            id=""
+            placeholder="Please enter the host lD"
+            @keyup.enter="handleEnterPress"
             @input="handleInputChange"
+            style="
+              width: 100%;
+              color: rgba(0, 0, 0, 0.4);
+              font-weight: 600;
+              font-size: 14px;
+              outline: none;
+              border: none;
+              background-color: transparent;
+              padding: 10px 8px;
+            "
           />
-          <button
-            v-if="searchQuery"
-            @click="clearSearch"
-            class="clear-btn"
-          >
-            ×
-          </button>
-          <button
-            class="action-btn"
-            :class="{ 'confirm': hasValidSelection }"
-            @click="handleActionButton"
-            :disabled="isSearching"
-          >
-            {{ getActionButtonText() }}
-          </button>
+          <button v-if="searchQuery" @click="clearSearch" class="clear-btn">×</button>
+        </div>
+        <div style="font-weight: 600" @click="handleActionButton" :disabled="isSearching">
+          {{ getActionButtonText() }}
         </div>
       </div>
 
@@ -39,7 +52,7 @@
           v-for="user in searchResults"
           :key="user.id"
           class="user-item"
-          :class="{ 'selected': selectedUser?.id === user.id }"
+          :class="{ selected: selectedUser?.id === user.id }"
           @click="toggleUserSelection(user)"
         >
           <div class="user-info">
@@ -49,17 +62,21 @@
                 :src="user.userAvatar"
                 :alt="user.name"
                 class="avatar-image"
-                @error="(e) => e.target.style.display = 'none'"
+                @error="(e) => (e.target.style.display = 'none')"
               />
               <span v-if="!user.userAvatar" class="avatar-text">{{ user.name.charAt(0) }}</span>
             </div>
             <div class="user-details">
-              <h4>{{ user.name }}</h4>
-              <p>ID: {{ user.id }}</p>
+              <div style="margin-bottom: 4px; font-size: 16px; font-weight: 700">
+                {{ user.name }}
+              </div>
+              <div style="font-size: 14px; color: rgba(0, 0, 0, 0.4); font-weight: 500">
+                ID: {{ user.account }}
+              </div>
             </div>
           </div>
-          <div class="add-icon">
-            <span>➕</span>
+          <div style="display: flex; justify-content: center; align-items: center">
+            <img src="../assets/icon/add.png" alt="" width="32px" />
           </div>
         </div>
       </div>
@@ -69,20 +86,6 @@
         <div class="loading-spinner"></div>
         <p>Searching...</p>
       </div>
-
-      <!-- 空状态 -->
-      <div v-else-if="searchQuery && !isSearching && searchResults.length === 0" class="empty-state">
-        <div class="empty-icon">🔍</div>
-        <p>No users found</p>
-        <span>Try searching with a different ID</span>
-      </div>
-
-      <!-- 搜索提示 -->
-      <div v-else-if="!searchQuery" class="search-hint">
-        <div class="hint-icon">👤</div>
-        <p>Search for users</p>
-        <span>Enter host ID to find users</span>
-      </div>
     </div>
   </div>
 </template>
@@ -155,13 +158,15 @@ const performSearch = async () => {
 
     if (response && response.status && response.body && response.body.userProfile) {
       const profile = response.body.userProfile
-      searchResults.value = [{
-        id: profile.id,
-        name: profile.userNickname || 'User',
-        userNickname: profile.userNickname,
-        account: profile.account,
-        userAvatar: profile.userAvatar
-      }]
+      searchResults.value = [
+        {
+          id: profile.id,
+          name: profile.userNickname || 'User',
+          userNickname: profile.userNickname,
+          account: profile.account,
+          userAvatar: profile.userAvatar,
+        },
+      ]
     } else {
       searchResults.value = []
     }
@@ -207,7 +212,7 @@ const confirmSelection = () => {
       name: selectedUser.value.name,
       userNickname: selectedUser.value.userNickname,
       account: selectedUser.value.account,
-      userAvatar: selectedUser.value.userAvatar
+      userAvatar: selectedUser.value.userAvatar,
     })
 
     // Go back to previous page
@@ -217,6 +222,16 @@ const confirmSelection = () => {
 </script>
 
 <style scoped>
+* {
+  color: rgba(0, 0, 0, 0.8);
+  font-family: 'SF Pro Text';
+}
+
+input::placeholder {
+  font-weight: bold;
+  color: rgba(0, 0, 0, 0.4);
+}
+
 .coin-seller-search {
   font-family: -apple-system, BlinkMacSystemFont, sans-serif;
 }
@@ -239,7 +254,7 @@ const confirmSelection = () => {
   border: 1px solid #e5e7eb;
   border-radius: 8px;
   padding: 8px 12px;
-  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }
 
 .search-icon {
@@ -272,7 +287,7 @@ const confirmSelection = () => {
 .action-btn {
   background: none;
   border: none;
-  color: #8B5CF6;
+  color: #8b5cf6;
   font-size: 14px;
   font-weight: 500;
   cursor: pointer;
@@ -281,11 +296,11 @@ const confirmSelection = () => {
 }
 
 .action-btn:active {
-  color: #7C3AED;
+  color: #7c3aed;
 }
 
 .action-btn.confirm {
-  background-color: #8B5CF6;
+  background-color: #8b5cf6;
   color: white;
   border-radius: 6px;
   padding: 6px 12px;
@@ -307,7 +322,7 @@ const confirmSelection = () => {
   background-color: white;
   padding: 16px;
   border-radius: 12px;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
   cursor: pointer;
   transition: all 0.2s;
   display: flex;
@@ -320,12 +335,12 @@ const confirmSelection = () => {
 }
 
 .user-item.selected {
-  border: 2px solid #8B5CF6;
-  background-color: #F3F4F6;
+  border: 2px solid #8b5cf6;
+  background-color: #f3f4f6;
 }
 
-.user-item.selected .add-icon {
-  color: #8B5CF6;
+.user-item.selected {
+  color: #8b5cf6;
   font-weight: bold;
 }
 
@@ -339,7 +354,7 @@ const confirmSelection = () => {
   width: 50px;
   height: 50px;
   border-radius: 25px;
-  background-color: #F59E0B;
+  background-color: #f59e0b;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -364,24 +379,6 @@ const confirmSelection = () => {
   font-weight: 600;
 }
 
-.user-details h4 {
-  margin: 0 0 4px 0;
-  font-size: 16px;
-  font-weight: 600;
-  color: #333;
-}
-
-.user-details p {
-  margin: 0;
-  font-size: 14px;
-  color: #666;
-}
-
-.add-icon {
-  color: #10B981;
-  font-size: 20px;
-}
-
 /* 加载状态 */
 .loading-state {
   display: flex;
@@ -396,15 +393,19 @@ const confirmSelection = () => {
   width: 32px;
   height: 32px;
   border: 3px solid #f3f3f3;
-  border-top: 3px solid #F59E0B;
+  border-top: 3px solid #f59e0b;
   border-radius: 50%;
   animation: spin 1s linear infinite;
   margin-bottom: 16px;
 }
 
 @keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
 }
 
 .loading-state p {
@@ -465,4 +466,22 @@ const confirmSelection = () => {
   font-size: 14px;
   color: #9ca3af;
 }
+
+@media screen and (max-width: 360px) {
+  * {
+    font-size: 10px;
+  }
+}
+
+@media screen and (min-width: 360px) {
+  * {
+    font-size: 12px;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  * {
+    font-size: 24px;
+  }
+}
 </style>