diff --git a/resources/views/barobill/hometax/index.blade.php b/resources/views/barobill/hometax/index.blade.php
index d87c881a..dc172961 100644
--- a/resources/views/barobill/hometax/index.blade.php
+++ b/resources/views/barobill/hometax/index.blade.php
@@ -338,6 +338,7 @@ className="flex items-center gap-2 px-3 py-1.5 bg-blue-100 text-blue-700 rounded
         const [dataSource, setDataSource] = useState('local'); // 'local': 로컬 DB, 'api': 바로빌 API
         const [syncing, setSyncing] = useState(false); // 동기화 중 여부
         const [lastSyncAt, setLastSyncAt] = useState({ sales: null, purchase: null }); // 마지막 동기화 시간
+        const [selectedPeriod, setSelectedPeriod] = useState(null); // 선택된 기간 버튼 ('q1', 'q2', 'q3', 'q4', 'h1', 'h2', 'year')
 
         // 진단 관련 상태
         const [showDiagnoseModal, setShowDiagnoseModal] = useState(false);
@@ -657,6 +658,7 @@ className="flex items-center gap-2 px-3 py-1.5 bg-blue-100 text-blue-700 rounded
             const lastDay = new Date(year, startMonth + 3, 0);
             setDateFrom(formatKoreanDate(firstDay));
             setDateTo(formatKoreanDate(lastDay));
+            setSelectedPeriod('q' + quarter);
         };
 
         // 기(반기) 계산 (1기: 1-6월, 2기: 7-12월)
@@ -668,6 +670,7 @@ className="flex items-center gap-2 px-3 py-1.5 bg-blue-100 text-blue-700 rounded
             const lastDay = new Date(year, startMonth + 6, 0);
             setDateFrom(formatKoreanDate(firstDay));
             setDateTo(formatKoreanDate(lastDay));
+            setSelectedPeriod('h' + half);
         };
 
         // 1년 계산
@@ -678,6 +681,7 @@ className="flex items-center gap-2 px-3 py-1.5 bg-blue-100 text-blue-700 rounded
             const lastDay = new Date(year, 11, 31);
             setDateFrom(formatKoreanDate(firstDay));
             setDateTo(formatKoreanDate(lastDay));
+            setSelectedPeriod('year');
         };
 
         // 거래처 필터링
@@ -749,26 +753,47 @@ className="px-3 py-2 text-sm border border-[#ced4da] rounded bg-white focus:bord
                             <input
                                 type="date"
                                 value={dateFrom}
-                                onChange={(e) => setDateFrom(e.target.value)}
+                                onChange={(e) => { setDateFrom(e.target.value); setSelectedPeriod(null); }}
                                 className="px-3 py-2 text-sm border border-[#ced4da] rounded bg-white focus:border-[#86b7fe] focus:ring-2 focus:ring-[#86b7fe]/25 outline-none"
                             />
                             <span className="text-[#6c757d] px-1">~</span>
                             <input
                                 type="date"
                                 value={dateTo}
-                                onChange={(e) => setDateTo(e.target.value)}
+                                onChange={(e) => { setDateTo(e.target.value); setSelectedPeriod(null); }}
                                 className="px-3 py-2 text-sm border border-[#ced4da] rounded bg-white focus:border-[#86b7fe] focus:ring-2 focus:ring-[#86b7fe]/25 outline-none"
                             />
                         </div>
                         {/* 분기/기/년 버튼 그룹 */}
                         <div className="flex items-center">
-                            <button onClick={() => handleQuarter(1)} className="px-3 py-2 text-xs border border-[#ced4da] bg-white hover:bg-[#e9ecef] transition-colors rounded-l">1분기</button>
-                            <button onClick={() => handleQuarter(2)} className="px-3 py-2 text-xs border-t border-b border-[#ced4da] bg-white hover:bg-[#e9ecef] transition-colors">2분기</button>
-                            <button onClick={() => handleQuarter(3)} className="px-3 py-2 text-xs border-t border-b border-[#ced4da] bg-white hover:bg-[#e9ecef] transition-colors">3분기</button>
-                            <button onClick={() => handleQuarter(4)} className="px-3 py-2 text-xs border border-[#ced4da] bg-white hover:bg-[#e9ecef] transition-colors">4분기</button>
-                            <button onClick={() => handleHalf(1)} className="px-3 py-2 text-xs border-t border-b border-r border-[#ced4da] bg-white hover:bg-[#e9ecef] transition-colors">1기</button>
-                            <button onClick={() => handleHalf(2)} className="px-3 py-2 text-xs border-t border-b border-r border-[#ced4da] bg-white hover:bg-[#e9ecef] transition-colors">2기</button>
-                            <button onClick={handleYear} className="px-3 py-2 text-xs border border-[#ced4da] bg-white hover:bg-[#e9ecef] transition-colors rounded-r">1년</button>
+                            <button
+                                onClick={() => handleQuarter(1)}
+                                className={`px-3 py-2 text-xs border border-[#ced4da] transition-colors rounded-l ${selectedPeriod === 'q1' ? 'bg-[#0d6efd] text-white border-[#0d6efd]' : 'bg-white hover:bg-[#e9ecef]'}`}
+                            >1분기</button>
+                            <button
+                                onClick={() => handleQuarter(2)}
+                                className={`px-3 py-2 text-xs border-t border-b border-[#ced4da] transition-colors ${selectedPeriod === 'q2' ? 'bg-[#0d6efd] text-white border-[#0d6efd]' : 'bg-white hover:bg-[#e9ecef]'}`}
+                            >2분기</button>
+                            <button
+                                onClick={() => handleQuarter(3)}
+                                className={`px-3 py-2 text-xs border-t border-b border-[#ced4da] transition-colors ${selectedPeriod === 'q3' ? 'bg-[#0d6efd] text-white border-[#0d6efd]' : 'bg-white hover:bg-[#e9ecef]'}`}
+                            >3분기</button>
+                            <button
+                                onClick={() => handleQuarter(4)}
+                                className={`px-3 py-2 text-xs border border-[#ced4da] transition-colors ${selectedPeriod === 'q4' ? 'bg-[#0d6efd] text-white border-[#0d6efd]' : 'bg-white hover:bg-[#e9ecef]'}`}
+                            >4분기</button>
+                            <button
+                                onClick={() => handleHalf(1)}
+                                className={`px-3 py-2 text-xs border-t border-b border-r border-[#ced4da] transition-colors ${selectedPeriod === 'h1' ? 'bg-[#0d6efd] text-white border-[#0d6efd]' : 'bg-white hover:bg-[#e9ecef]'}`}
+                            >1기</button>
+                            <button
+                                onClick={() => handleHalf(2)}
+                                className={`px-3 py-2 text-xs border-t border-b border-r border-[#ced4da] transition-colors ${selectedPeriod === 'h2' ? 'bg-[#0d6efd] text-white border-[#0d6efd]' : 'bg-white hover:bg-[#e9ecef]'}`}
+                            >2기</button>
+                            <button
+                                onClick={handleYear}
+                                className={`px-3 py-2 text-xs border border-[#ced4da] transition-colors rounded-r ${selectedPeriod === 'year' ? 'bg-[#0d6efd] text-white border-[#0d6efd]' : 'bg-white hover:bg-[#e9ecef]'}`}
+                            >1년</button>
                         </div>
                         {/* 검색 버튼 */}
                         <button