diff --git a/static/style.css b/static/style.css
index ae75243..189820b 100644
--- a/static/style.css
+++ b/static/style.css
@@ -537,22 +537,25 @@ body {
 
 /* 日历同步按钮 */
 .btn-cal-sync {
-  display: flex;
+  display: inline-flex;
   align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  border: none;
-  background: transparent;
-  color: var(--text-muted);
-  border-radius: 6px;
+  gap: 5px;
+  padding: 6px 12px;
+  border: 1.5px solid var(--border);
+  background: var(--card);
+  color: var(--text-dim);
+  border-radius: var(--radius-sm);
+  font-size: 12px;
+  font-weight: 500;
   cursor: pointer;
   transition: all 0.2s;
   flex-shrink: 0;
+  font-family: inherit;
 }
 .btn-cal-sync:hover {
-  background: var(--success-light);
-  color: var(--success);
+  border-color: var(--primary);
+  color: var(--primary);
+  background: var(--primary-light);
 }
 
 /* 编辑模式下才显示的元素 */
diff --git a/templates/index.html b/templates/index.html
index 6556a4b..bbab4a0 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -125,6 +125,9 @@
     <section class="panel active" id="panel-daily">
       <div class="panel-header">
         <h2>每日打卡</h2>
+        <button class="btn-cal-sync" onclick="syncCalendar()" title="同步钉钉日历">
+          <svg class="icon-sm"><use href="#icon-calendar"/></svg> 日历同步
+        </button>
         <input type="date" id="check-date" class="check-date-input" onchange="loadCheckin()">
       </div>
       <div class="daily-grid">
@@ -134,9 +137,6 @@
               <svg class="icon-h2"><use href="#icon-sun"/></svg>
               <h3>早间立志</h3>
             </div>
-            <button class="btn-cal-sync" onclick="syncCalendar()" title="同步钉钉日历">
-              <svg class="icon-sm"><use href="#icon-calendar"/></svg>
-            </button>
             <button class="btn-edit-toggle" onclick="toggleEditMode(this)" title="编辑">
               <svg class="icon-sm"><use href="#icon-pencil"/></svg>
             </button>