diff --git a/apps/web/src/views/LedgerView.vue b/apps/web/src/views/LedgerView.vue
index f3d0fd0..098968b 100644
--- a/apps/web/src/views/LedgerView.vue
+++ b/apps/web/src/views/LedgerView.vue
@@ -511,45 +511,6 @@ async function shareLedger() {
         </div>
       </Transition>
 
-      <Transition name="month-picker">
-        <div v-if="monthPickerOpen" class="month-picker-layer">
-          <button class="month-picker-scrim" type="button" aria-label="关闭月份选择" @click="closeMonthPicker"></button>
-          <section class="month-picker-modal" role="dialog" aria-modal="true" aria-label="选择月份">
-            <header>
-              <button v-if="monthPickerMode === 'years'" type="button" aria-label="返回月份选择" title="返回月份选择" @click="monthPickerMode = 'months'"><ChevronLeft :size="20" /></button>
-              <span v-else></span>
-              <strong>{{ monthPickerMode === "months" ? "选择月份" : "选择年份" }}</strong>
-              <button type="button" aria-label="关闭" title="关闭" @click="closeMonthPicker"><X :size="20" /></button>
-            </header>
-
-            <template v-if="monthPickerMode === 'months'">
-              <button class="month-picker-year" type="button" @click="monthPickerMode = 'years'">
-                <strong>{{ monthPickerYear }}年</strong>
-                <ChevronDown :size="16" />
-              </button>
-              <div class="month-picker-total">
-                <span class="income">+ ¥{{ formatMoney(pickerYearSummary.income) }}</span>
-                <span class="expense">− ¥{{ formatMoney(pickerYearSummary.expense) }}</span>
-              </div>
-              <div class="month-picker-grid">
-                <button v-for="summary in monthSummaries" :key="summary.month" type="button" :class="{ selected: selectedMonth === `${monthPickerYear}-${String(summary.month + 1).padStart(2, '0')}` }" @click="selectPickerMonth(summary.month)">
-                  <strong>{{ summary.month + 1 }}月</strong>
-                  <small class="income">+{{ formatCompactMoney(summary.income) }}</small>
-                  <small class="expense">−{{ formatCompactMoney(summary.expense) }}</small>
-                </button>
-              </div>
-            </template>
-
-            <div v-else class="year-picker-list">
-              <button v-for="summary in yearSummaries" :key="summary.year" type="button" :class="{ selected: summary.year === monthPickerYear }" @click="selectPickerYear(summary.year)">
-                <strong>{{ summary.year }}年</strong>
-                <span><i class="income">+{{ formatCompactMoney(summary.income) }}</i><i class="expense">−{{ formatCompactMoney(summary.expense) }}</i></span>
-              </button>
-            </div>
-          </section>
-        </div>
-      </Transition>
-
       <section class="monthly-summary" aria-label="月度收支">
         <div class="summary-main">
           <span>结余</span>
@@ -568,6 +529,45 @@ async function shareLedger() {
       </section>
     </header>
 
+    <Transition name="month-picker">
+      <div v-if="monthPickerOpen" class="month-picker-layer">
+        <button class="month-picker-scrim" type="button" aria-label="关闭月份选择" @click="closeMonthPicker"></button>
+        <section class="month-picker-modal" role="dialog" aria-modal="true" aria-label="选择月份">
+          <header>
+            <button v-if="monthPickerMode === 'years'" type="button" aria-label="返回月份选择" title="返回月份选择" @click="monthPickerMode = 'months'"><ChevronLeft :size="20" /></button>
+            <span v-else></span>
+            <strong>{{ monthPickerMode === "months" ? "选择月份" : "选择年份" }}</strong>
+            <button type="button" aria-label="关闭" title="关闭" @click="closeMonthPicker"><X :size="20" /></button>
+          </header>
+
+          <template v-if="monthPickerMode === 'months'">
+            <button class="month-picker-year" type="button" @click="monthPickerMode = 'years'">
+              <strong>{{ monthPickerYear }}年</strong>
+              <ChevronDown :size="16" />
+            </button>
+            <div class="month-picker-total">
+              <span class="income">+ ¥{{ formatMoney(pickerYearSummary.income) }}</span>
+              <span class="expense">− ¥{{ formatMoney(pickerYearSummary.expense) }}</span>
+            </div>
+            <div class="month-picker-grid">
+              <button v-for="summary in monthSummaries" :key="summary.month" type="button" :class="{ selected: selectedMonth === `${monthPickerYear}-${String(summary.month + 1).padStart(2, '0')}` }" @click="selectPickerMonth(summary.month)">
+                <strong>{{ summary.month + 1 }}月</strong>
+                <small class="income">+{{ formatCompactMoney(summary.income) }}</small>
+                <small class="expense">−{{ formatCompactMoney(summary.expense) }}</small>
+              </button>
+            </div>
+          </template>
+
+          <div v-else class="year-picker-list">
+            <button v-for="summary in yearSummaries" :key="summary.year" type="button" :class="{ selected: summary.year === monthPickerYear }" @click="selectPickerYear(summary.year)">
+              <strong>{{ summary.year }}年</strong>
+              <span><i class="income">+{{ formatCompactMoney(summary.income) }}</i><i class="expense">−{{ formatCompactMoney(summary.expense) }}</i></span>
+            </button>
+          </div>
+        </section>
+      </div>
+    </Transition>
+
     <section
       ref="ledgerContent"
       class="ledger-content"