diff --git a/Backstage/resident_activation.html b/Backstage/resident_activation.html
index 242cccf..bd35451 100644
--- a/Backstage/resident_activation.html
+++ b/Backstage/resident_activation.html
@@ -9,14 +9,13 @@
         body {
             display: flex;
             flex-direction: column;
-            min-height: 100vh; /* 確保 body 至少和視窗一樣高 */
-            margin: 0; /* 移除預設 margin */
+            min-height: 100vh;
+            margin: 0;
         }
 
         .container.mt-4 {
-            flex-grow: 1; /* 讓主要內容區域填滿剩餘空間 */
-            padding-bottom: 70px; /* 重要：為固定的分頁條預留空間，避免遮擋內容 */
-                                 /* 這個值可以根據分頁條的實際高度進行調整 */
+            flex-grow: 1;
+            padding-bottom: 70px;
         }
 
         #qrcodeModal .modal-body {
@@ -25,23 +24,32 @@
             align-items: center;
         }
 
-        /* 固定分頁條的樣式 */
         nav.pagination-fixed {
             position: fixed;
             left: 0;
             bottom: 0;
             width: 100%;
-            background-color: #f8f9fa; /* 給分頁條一個背景色，避免透明 */
-            padding: 10px 0; /* 給分頁條一些上下內邊距 */
-            border-top: 1px solid #dee2e6; /* 可選：給分頁條頂部加個邊框 */
-            z-index: 1000; /* 確保分頁條在其他內容之上 */
+            background-color: #f8f9fa;
+            padding: 10px 0;
+            border-top: 1px solid #dee2e6;
+            z-index: 1000;
         }
 
-        /* 確保分頁本身在固定容器內正確對齊 */
         nav.pagination-fixed .pagination {
-            margin-bottom: 0; /* 移除 Bootstrap 分頁的預設下邊距 */
+            margin-bottom: 0;
         }
 
+        button.btn {
+            font-weight: 500;
+            font-size: 1rem;
+            padding: 0.5rem 0.75rem;
+            transition: all 0.2s ease-in-out;
+        }
+
+        button.btn:hover {
+            transform: translateY(-1px);
+            box-shadow: 0 2px 6px rgba(0,0,0,0.1);
+        }
     </style>
 </head>
 <body>
@@ -56,13 +64,13 @@
                 <input type="text" id="searchEmail" class="form-control" placeholder="搜尋 Email">
             </div>
             <div class="col-md-2">
-                <button class="btn btn-primary w-100" onclick="search()">搜尋</button>
+                <button class="btn btn-outline-primary w-100 rounded-pill" onclick="search()">搜尋</button>
             </div>
             <div class="col-md-2">
-                <button class="btn btn-danger w-100" onclick="deleteSelected()">刪除勾選</button>
+                <button class="btn btn-outline-danger w-100 rounded-pill" onclick="deleteSelected()">刪除勾選</button>
             </div>
             <div class="col-md-2">
-                <button class="btn btn-secondary w-100" onclick="scanResident()">掃描住戶</button>
+                <button class="btn btn-outline-secondary w-100 rounded-pill" onclick="scanResident()">掃描住戶</button>
             </div>
         </div>
 
@@ -77,11 +85,9 @@
                 <th>操作</th>
             </tr>
             </thead>
-            <tbody id="residentTable">
-                </tbody>
+            <tbody id="residentTable"></tbody>
         </table>
-
-        </div>
+    </div>
 
     <nav class="pagination-fixed">
         <ul class="pagination justify-content-center" id="pagination"></ul>
@@ -116,7 +122,6 @@
         { id: 6, name: "蔡依林", email: "jolin@example.com", phone: "0977-777-777"},
         { id: 7, name: "林志玲", email: "lin@example.com", phone: "0966-666-666" },
         { id: 8, name: "王力宏", email: "leehom@example.com", phone: "0955-555-555" },
-        // 為了測試滾動效果，可以增加更多數據
         { id: 9, name: "陳小春", email: "chen@example.com", phone: "0911-111-111" },
         { id: 10, name: "五月天", email: "mayday@example.com", phone: "0922-222-222" },
         { id: 11, name: "田馥甄", email: "hebe@example.com", phone: "0933-333-333" },
@@ -138,7 +143,7 @@
                 <td>${r.name}</td>
                 <td>${r.email}</td>
                 <td>${r.phone}</td>
-                <td><button class="btn btn-success btn-sm" onclick="showQRCode('https://yourdomain.com/activate?id=${r.id}')">開通</button></td>
+                <td><button class="btn btn-outline-success btn-sm rounded-pill" onclick="showQRCode('https://yourdomain.com/activate?id=${r.id}')">開通</button></td>
             `;
             tbody.appendChild(row);
         });
@@ -161,8 +166,8 @@
 
     function goToPage(page) {
         currentPage = page;
-        search(); // 重新篩選並渲染
-        window.scrollTo(0, 0); // 換頁時滾動到頁面頂部 (可選)
+        search();
+        window.scrollTo(0, 0);
     }
 
     function search() {
@@ -211,8 +216,7 @@
         alert("這裡可以接掃描裝置或開啟相機功能");
     }
 
-    // 初次載入
-    search();
+    search(); // 初次載入
     </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/Backstage/resident_list.html b/Backstage/resident_list.html
index 34c0d98..55278fa 100644
--- a/Backstage/resident_list.html
+++ b/Backstage/resident_list.html
@@ -38,18 +38,38 @@
         nav.pagination-fixed .pagination {
             margin-bottom: 0;
         }
+
+        /* Custom button styles applied to all .btn elements */
+        /* This will make .btn-sm elements larger than default Bootstrap .btn-sm */
+        .btn {
+            font-weight: 500;
+            font-size: 1rem; /* Overrides .btn-sm font-size if more specific or loaded later */
+            padding: 0.5rem 0.75rem; /* Overrides .btn-sm padding if more specific or loaded later */
+            transition: all 0.2s ease-in-out;
+        }
+
+        .btn:hover {
+            transform: translateY(-1px);
+            box-shadow: 0 2px 6px rgba(0,0,0,0.1);
+        }
     </style>
 </head>
 <body>
     <div class="container mt-4">
         <h2 class="mb-4">居民列表</h2>
-<div class="row g-2 mb-3">   
-        <div class="col-4 col-md-2 col-lg-1">
-            <a href="resident_add.html" class="btn btn-success w-100">新增</a>
+        <div class="row g-2 mb-3">
+            <div class="col-4 col-md-2 col-lg-1">
+                <a href="resident_add.html" class="btn btn-outline-success w-100 rounded-pill">新增</a>
+            </div>
+             <div class="col-4 col-md-2 col-lg-1">
+                <a href="resident_import.html" class="btn btn-outline-info w-100 rounded-pill">匯入</a>
+            </div>
+            <div class="col-4 col-md-2 col-lg-1">
+                <button class="btn btn-outline-secondary w-100 rounded-pill" onclick="exportResidents()">匯出</button>
+            </div>
         </div>
-     </div>
 
-        <div class="row g-2 mb-3">       
+        <div class="row g-2 mb-3">
             <div class="col-sm-6 col-md-3 col-lg-2">
                 <input type="text" id="searchName" class="form-control" placeholder="搜尋姓名">
             </div>
@@ -57,17 +77,11 @@
                 <input type="text" id="searchEmail" class="form-control" placeholder="搜尋 Email">
             </div>
             <div class="col-6 col-md-2 col-lg-2">
-                <button class="btn btn-primary w-100" onclick="search()">搜尋</button>
+                <button class="btn btn-outline-primary w-100 rounded-pill" onclick="search()">搜尋</button>
             </div>
-            <div class="col-6 col-md-3 col-lg-2">
-                <button class="btn btn-danger w-100" onclick="deleteSelected()">刪除勾選</button>
+            <div class="col-6 col-md-2 col-lg-1">
+                <button class="btn btn-outline-danger w-100 rounded-pill" onclick="deleteSelected()">刪除勾選</button>
             </div>
-            <div class="col-4 col-md-2 col-lg-1">
-                <a href="resident_import.html" class="btn btn-info w-100">匯入</a>
-            </div>
-            <div class="col-4 col-md-2 col-lg-1">
-                <button class="btn btn-secondary w-100" onclick="exportResidents()">匯出</button>
-            </div> 
         </div>
 
         <table class="table table-striped table-bordered">
@@ -87,7 +101,7 @@
 
     <nav class="pagination-fixed">
         <ul class="pagination justify-content-center" id="pagination"></ul>
-    </nav>
+    </nav
 
     <div class="modal fade" id="qrcodeModal" tabindex="-1" aria-labelledby="qrcodeModalLabel" aria-hidden="true">
         <div class="modal-dialog modal-sm modal-dialog-centered">
@@ -110,17 +124,17 @@
         let currentPage = 1;
         let residents = [
             { id: 1, name: "王小明", email: "xiaoming@example.com", phone: "0912-345-678" },
-            { id: 2, name: "林美麗", email: "meili@example.com", phone: "0987-654-321" },
-            { id: 3, name: "張大雄", email: "daxiong@example.com", phone: "0912-333-444" },
-            { id: 4, name: "李小龍", email: "dragon@example.com", phone: "0900-111-222" },
-            { id: 5, name: "周杰倫", email: "jay@example.com", phone: "0988-888-888" },
-            { id: 6, name: "蔡依林", email: "jolin@example.com", phone: "0977-777-777" },
-            { id: 7, name: "林志玲", email: "lin@example.com", phone: "0966-666-666" },
-            { id: 8, name: "王力宏", email: "leehom@example.com", phone: "0955-555-555" },
-            { id: 9, name: "陳小春", email: "chen@example.com", phone: "0911-111-111" },
-            { id: 10, name: "五月天", email: "mayday@example.com", phone: "0922-222-222" },
-            { id: 11, name: "田馥甄", email: "hebe@example.com", phone: "0933-333-333" },
-            { id: 12, name: "鄧紫棋", email: "gem@example.com", phone: "0944-444-444" }
+        { id: 2, name: "林美麗", email: "meili@example.com", phone: "0987-654-321" },
+        { id: 3, name: "張大雄", email: "daxiong@example.com", phone: "0912-333-444" },
+        { id: 4, name: "李小龍", email: "dragon@example.com", phone: "0900-111-222" },
+        { id: 5, name: "周杰倫", email: "jay@example.com", phone: "0988-888-888" },
+        { id: 6, name: "蔡依林", email: "jolin@example.com", phone: "0977-777-777"},
+        { id: 7, name: "林志玲", email: "lin@example.com", phone: "0966-666-666" },
+        { id: 8, name: "王力宏", email: "leehom@example.com", phone: "0955-555-555" },
+        { id: 9, name: "陳小春", email: "chen@example.com", phone: "0911-111-111" },
+        { id: 10, name: "五月天", email: "mayday@example.com", phone: "0922-222-222" },
+        { id: 11, name: "田馥甄", email: "hebe@example.com", phone: "0933-333-333" },
+        { id: 12, name: "鄧紫棋", email: "gem@example.com", phone: "0944-444-444" }
         ];
 
         function renderTable(data) {
@@ -139,8 +153,8 @@
                     <td>${r.email}</td>
                     <td>${r.phone}</td>
                     <td>
-                        <a href="resident_edit.html?id=${r.id}" class="btn btn-warning btn-sm me-1">編輯</a>
-                        <button class="btn btn-danger btn-sm" onclick="deleteResident(${r.id})">刪除</button>
+                        <a href="resident_edit.html?id=${r.id}" class="btn btn-warning btn-sm me-1 rounded-pill">編輯</a>
+                        <button class="btn btn-outline-danger btn-sm rounded-pill" onclick="deleteResident(${r.id})">刪除</button>
                     </td>
                 `;
                 tbody.appendChild(row);
