diff --git a/frontend/src/views/Login.vue b/frontend/src/views/Login.vue
index 296ad44..dd4f8c8 100644
--- a/frontend/src/views/Login.vue
+++ b/frontend/src/views/Login.vue
@@ -194,11 +194,17 @@
           <a-button 
             v-if="dingTalkLoginEnabled" 
             block 
-            class="alt-login-button" 
+            class="alt-login-button dingtalk-login-button" 
             @click="handleDingTalkLogin"
             :loading="dingTalkLoginLoading"
           >
-            <Icon name="share" size="sm" style="margin-right: 8px;" />
+            <img 
+              src="https://img.alicdn.com/imgextra/i1/O1CN01CHK9VA1YTzZJxXGf7_!!6000000003022-2-tps-400-400.png" 
+              alt="钉钉" 
+              class="dingtalk-logo"
+              onerror="this.style.display='none'; this.nextSibling.style.display='inline-block';"
+            />
+            <span class="dingtalk-logo-text" style="display: none;">D</span>
             钉钉登录
           </a-button>
         </div>
@@ -884,6 +890,9 @@ onUnmounted(() => {
     color: $text-white;
     font-size: $font-size-base;
     transition: all 0.2s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 
     &:hover:not(:disabled) {
       background: $bg-tertiary;
@@ -892,6 +901,24 @@ onUnmounted(() => {
 
     &:disabled {
       opacity: 0.5;
+    }
+  }
+
+  .dingtalk-login-button {
+    background: #0070f3;
+    border-color: #0070f3;
+    color: #ffffff;
+
+    &:hover:not(:disabled) {
+      background: #0051cc;
+      border-color: #0051cc;
+    }
+
+    .dingtalk-logo {
+      width: 20px;
+      height: 20px;
+      margin-right: 8px;
+      vertical-align: middle;
       cursor: not-allowed;
     }
   }