diff --git a/src/main/resources/templates/collection.html b/src/main/resources/templates/collection.html
index 559bde2..b1b8518 100644
--- a/src/main/resources/templates/collection.html
+++ b/src/main/resources/templates/collection.html
@@ -8,10 +8,12 @@
 
 <body>
     <div layout:fragment="content">
-        <header class="mb-4">
-            <h1 class="text-2xl font-bold mb-2">수집함 (Collection)</h1>
-            <p class="text-muted">수집한 영상을 분류·발굴하고 재가공 대상을 관리합니다.</p>
-        </header>
+        <div class="page-header">
+            <div>
+                <h1>수집함</h1>
+                <p class="sub">수집한 영상을 분류·발굴하고 재가공 대상을 관리합니다.</p>
+            </div>
+        </div>
 
         <!-- 카테고리 관리 -->
         <div class="card mb-4">
@@ -28,12 +30,12 @@
                 <div style="display:flex; flex-direction:column; gap:4px;">
                     <label class="text-sm text-muted">이름</label>
                     <input id="catName" type="text" placeholder="예: 동물 썰"
-                        style="padding:8px; background:rgba(255,255,255,0.05); border:1px solid var(--glass-border); border-radius:var(--radius-md); color:white; outline:none;">
+                        style="padding:8px; background:var(--surface-2); border:1px solid var(--glass-border); border-radius:var(--radius-md); color:var(--text); outline:none;">
                 </div>
                 <div style="display:flex; flex-direction:column; gap:4px;">
                     <label class="text-sm text-muted">색상</label>
                     <input id="catColor" type="color" value="#7C3AED"
-                        style="padding:2px; height:42px; width:56px; background:rgba(255,255,255,0.05); border:1px solid var(--glass-border); border-radius:var(--radius-md);">
+                        style="padding:2px; height:42px; width:56px; background:var(--surface-2); border:1px solid var(--glass-border); border-radius:var(--radius-md);">
                 </div>
                 <button class="btn btn-primary px-4 py-2" onclick="addCategory()">추가</button>
             </div>
@@ -96,7 +98,7 @@
         <!-- 결과 테이블 -->
         <div class="card p-0" style="overflow-x:auto;">
             <table class="w-full" style="border-collapse:collapse; text-align:left;">
-                <thead style="background:rgba(255,255,255,0.02); border-bottom:1px solid var(--glass-border);">
+                <thead style="background:var(--surface-2); border-bottom:1px solid var(--glass-border);">
                     <tr>
                         <th class="p-3 text-sm font-bold text-muted">썸네일</th>
                         <th class="p-3 text-sm font-bold text-muted">제목</th>
@@ -118,7 +120,7 @@
 
         <!-- 영상 모달 -->
         <div id="videoModal" style="display:none; position:fixed; z-index:1000; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.85); align-items:center; justify-content:center;" onclick="if(event.target===this) closeVideoModal()">
-            <div style="position:relative; width:95%; max-width:900px; background:var(--glass-bg,#1e1e2d); border-radius:12px; padding:16px; border:1px solid var(--glass-border);">
+            <div style="position:relative; width:95%; max-width:900px; background:var(--glass-bg,var(--surface)); border-radius:12px; padding:16px; border:1px solid var(--glass-border);">
                 <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;">
                     <h3 class="text-lg font-bold truncate pr-4" id="modalTitle">Video</h3>
                     <button onclick="closeVideoModal()" class="text-muted hover:text-white" style="font-size:28px; line-height:1; background:none; border:none; cursor:pointer;">&times;</button>
@@ -129,8 +131,8 @@
 
         <style>
             .hidden { display:none !important; }
-            .row-sel { padding:4px 6px; background:rgba(255,255,255,0.05); border:1px solid var(--glass-border); border-radius:6px; color:white; font-size:0.8rem; outline:none; }
-            .row-sel option { background:#1e1e2d; color:white; }
+            .row-sel { padding:4px 6px; background:var(--surface-2); border:1px solid var(--glass-border); border-radius:6px; color:var(--text); font-size:0.8rem; outline:none; }
+            .row-sel option { background:var(--surface); color:var(--text); }
             .cat-chip { padding:4px 10px; border-radius:999px; font-size:0.8rem; display:inline-flex; align-items:center; gap:6px; }
         </style>
 
@@ -257,11 +259,11 @@
                         </td>
                         <td class="p-3" style="max-width:280px;">
                             <div class="font-bold text-sm" style="display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;">
-                                <a href="https://www.youtube.com/watch?v=${v.videoId}" target="_blank" class="hover:underline text-white">${esc(v.title)}</a>${shortsBadge}
+                                <a href="https://www.youtube.com/watch?v=${v.videoId}" target="_blank" class="hover:underline">${esc(v.title)}</a>${shortsBadge}
                             </div>
                         </td>
                         <td class="p-3 text-sm text-muted" style="max-width:130px;">
-                            <a href="${v.ytChannelId?('https://www.youtube.com/channel/'+v.ytChannelId):'#'}" target="_blank" class="hover:underline truncate" style="color:#e2e8f0;">${esc(v.channelTitle||'-')}</a>
+                            <a href="${v.ytChannelId?('https://www.youtube.com/channel/'+v.ytChannelId):'#'}" target="_blank" class="hover:underline truncate" style="color:var(--text-2);">${esc(v.channelTitle||'-')}</a>
                         </td>
                         <td class="p-3 text-sm">${fmt(v.subscriberCount)}</td>
                         <td class="p-3 text-sm">${fmt(v.viewCount)}</td>
