diff --git a/app.js b/app.js
index b1496ef..18e68c0 100644
--- a/app.js
+++ b/app.js
@@ -592,7 +592,7 @@ function showCredentialPrompt() {
                             </div>
                         </div>
                         <div class="form-actions">
-                            <button type="button" class="btn-secondary" onclick="closeCredentialPrompt()">Cancel</button>
+                            <button type="button" class="btn-secondary" id="cancelAuthBtn">Cancel</button>
                             <button type="submit" class="btn-primary">Connect</button>
                         </div>
                     </form>
@@ -606,12 +606,22 @@ function showCredentialPrompt() {
     `;
     document.body.appendChild(prompt);
 
-    document.getElementById('credentialForm').addEventListener('submit', handleCredentials);
-    document.querySelector('.credential-overlay').addEventListener('click', function(e) {
-        if (e.target === this) {
-            closeCredentialPrompt();
-        }
-    });
+    const form = document.getElementById('credentialForm');
+    form.addEventListener('submit', handleCredentials);
+    
+    const cancelBtn = document.getElementById('cancelAuthBtn');
+    if (cancelBtn) {
+        cancelBtn.addEventListener('click', closeCredentialPrompt);
+    }
+    
+    const overlay = document.querySelector('#credentialPrompt .credential-overlay');
+    if (overlay) {
+        overlay.addEventListener('click', function(e) {
+            if (e.target === overlay) {
+                closeCredentialPrompt();
+            }
+        });
+    }
 }
 
 function closeCredentialPrompt() {
diff --git a/index.html b/index.html
index cebe907..87ecece 100644
--- a/index.html
+++ b/index.html
@@ -60,98 +60,126 @@
                     <thead>
                         <tr>
                             <th>
-                                Month
-                                <input type="text" 
-                                       class="column-filter" 
-                                       placeholder="Filter Month" 
-                                       data-column="Month"
-                                       oninput="handleColumnFilter(this)">
-                                <div class="filter-indicator" onclick="toggleFilter('Month')">
-                                    <i class="fas fa-filter"></i>
-                                </div>
-                                <div class="sort-indicator" onclick="sortTable('Month')">
-                                    <i class="fas fa-arrow-up"></i>
-                                    <i class="fas fa-arrow-down"></i>
+                                <div class="th-label">Month</div>
+                                <div class="th-controls">
+                                    <input type="text" 
+                                           class="column-filter" 
+                                           placeholder="Filter Month" 
+                                           data-column="Month"
+                                           oninput="handleColumnFilter(this)">
+                                    <div class="th-actions">
+                                        <div class="filter-indicator" onclick="toggleFilter('Month')">
+                                            <i class="fas fa-filter"></i>
+                                        </div>
+                                        <div class="sort-indicator" onclick="sortTable('Month')">
+                                            <i class="fas fa-arrow-up"></i>
+                                            <i class="fas fa-arrow-down"></i>
+                                        </div>
+                                    </div>
                                 </div>
                             </th>
                             <th>
-                                Odoo AR Nr
-                                <input type="text" 
-                                       class="column-filter" 
-                                       placeholder="Filter Odoo AR Nr" 
-                                       data-column="Odoo_AR_Nr"
-                                       oninput="handleColumnFilter(this)">
-                                <div class="filter-indicator" onclick="toggleFilter('Odoo_AR_Nr')">
-                                    <i class="fas fa-filter"></i>
-                                </div>
-                                <div class="sort-indicator" onclick="sortTable('Odoo_AR_Nr')">
-                                    <i class="fas fa-arrow-up"></i>
-                                    <i class="fas fa-arrow-down"></i>
+                                <div class="th-label">Odoo AR Nr</div>
+                                <div class="th-controls">
+                                    <input type="text" 
+                                           class="column-filter" 
+                                           placeholder="Filter Odoo AR Nr" 
+                                           data-column="Odoo_AR_Nr"
+                                           oninput="handleColumnFilter(this)">
+                                    <div class="th-actions">
+                                        <div class="filter-indicator" onclick="toggleFilter('Odoo_AR_Nr')">
+                                            <i class="fas fa-filter"></i>
+                                        </div>
+                                        <div class="sort-indicator" onclick="sortTable('Odoo_AR_Nr')">
+                                            <i class="fas fa-arrow-up"></i>
+                                            <i class="fas fa-arrow-down"></i>
+                                        </div>
+                                    </div>
                                 </div>
                             </th>
                             <th>
-                                Order ID
-                                <input type="text" 
-                                       class="column-filter" 
-                                       placeholder="Filter Order ID" 
-                                       data-column="Order_ID"
-                                       oninput="handleColumnFilter(this)">
-                                <div class="filter-indicator" onclick="toggleFilter('Order_ID')">
-                                    <i class="fas fa-filter"></i>
-                                </div>
-                                <div class="sort-indicator" onclick="sortTable('Order_ID')">
-                                    <i class="fas fa-arrow-up"></i>
-                                    <i class="fas fa-arrow-down"></i>
+                                <div class="th-label">Order ID</div>
+                                <div class="th-controls">
+                                    <input type="text" 
+                                           class="column-filter" 
+                                           placeholder="Filter Order ID" 
+                                           data-column="Order_ID"
+                                           oninput="handleColumnFilter(this)">
+                                    <div class="th-actions">
+                                        <div class="filter-indicator" onclick="toggleFilter('Order_ID')">
+                                            <i class="fas fa-filter"></i>
+                                        </div>
+                                        <div class="sort-indicator" onclick="sortTable('Order_ID')">
+                                            <i class="fas fa-arrow-up"></i>
+                                            <i class="fas fa-arrow-down"></i>
+                                        </div>
+                                    </div>
                                 </div>
                             </th>
                             <th>
-                                Country
-                                <input type="text" 
-                                       class="column-filter" 
-                                       placeholder="Filter Country" 
-                                       data-column="Country_Name"
-                                       oninput="handleColumnFilter(this)">
-                                <div class="filter-indicator" onclick="toggleFilter('Country_Name')">
-                                    <i class="fas fa-filter"></i>
-                                </div>
-                                <div class="sort-indicator" onclick="sortTable('Country_Name')">
-                                    <i class="fas fa-arrow-up"></i>
-                                    <i class="fas fa-arrow-down"></i>
+                                <div class="th-label">Country</div>
+                                <div class="th-controls">
+                                    <input type="text" 
+                                           class="column-filter" 
+                                           placeholder="Filter Country" 
+                                           data-column="Country_Name"
+                                           oninput="handleColumnFilter(this)">
+                                    <div class="th-actions">
+                                        <div class="filter-indicator" onclick="toggleFilter('Country_Name')">
+                                            <i class="fas fa-filter"></i>
+                                        </div>
+                                        <div class="sort-indicator" onclick="sortTable('Country_Name')">
+                                            <i class="fas fa-arrow-up"></i>
+                                            <i class="fas fa-arrow-down"></i>
+                                        </div>
+                                    </div>
                                 </div>
                             </th>
                             <th>
-                                VAT
-                                <div class="filter-indicator" onclick="toggleFilter('VAT')">
-                                    <i class="fas fa-filter"></i>
-                                </div>
-                                <div class="sort-indicator" onclick="sortTable('VAT')">
-                                    <i class="fas fa-arrow-up"></i>
-                                    <i class="fas fa-arrow-down"></i>
+                                <div class="th-label">VAT</div>
+                                <div class="th-controls">
+                                    <div class="th-actions">
+                                        <div class="filter-indicator" onclick="toggleFilter('VAT')">
+                                            <i class="fas fa-filter"></i>
+                                        </div>
+                                        <div class="sort-indicator" onclick="sortTable('VAT')">
+                                            <i class="fas fa-arrow-up"></i>
+                                            <i class="fas fa-arrow-down"></i>
+                                        </div>
+                                    </div>
                                 </div>
                             </th>
                             <th>
-                                Remark
-                                <input type="text" 
-                                       class="column-filter" 
-                                       placeholder="Filter Remark" 
-                                       data-column="Remark"
-                                       oninput="handleColumnFilter(this)">
-                                <div class="filter-indicator" onclick="toggleFilter('Remark')">
-                                    <i class="fas fa-filter"></i>
-                                </div>
-                                <div class="sort-indicator" onclick="sortTable('Remark')">
-                                    <i class="fas fa-arrow-up"></i>
-                                    <i class="fas fa-arrow-down"></i>
+                                <div class="th-label">Remark</div>
+                                <div class="th-controls">
+                                    <input type="text" 
+                                           class="column-filter" 
+                                           placeholder="Filter Remark" 
+                                           data-column="Remark"
+                                           oninput="handleColumnFilter(this)">
+                                    <div class="th-actions">
+                                        <div class="filter-indicator" onclick="toggleFilter('Remark')">
+                                            <i class="fas fa-filter"></i>
+                                        </div>
+                                        <div class="sort-indicator" onclick="sortTable('Remark')">
+                                            <i class="fas fa-arrow-up"></i>
+                                            <i class="fas fa-arrow-down"></i>
+                                        </div>
+                                    </div>
                                 </div>
                             </th>
                             <th>
-                                Recheck
-                                <div class="filter-indicator" onclick="toggleFilter('recheck')">
-                                    <i class="fas fa-filter"></i>
-                                </div>
-                                <div class="sort-indicator" onclick="sortTable('recheck')">
-                                    <i class="fas fa-arrow-up"></i>
-                                    <i class="fas fa-arrow-down"></i>
+                                <div class="th-label">Recheck</div>
+                                <div class="th-controls">
+                                    <div class="th-actions">
+                                        <div class="filter-indicator" onclick="toggleFilter('recheck')">
+                                            <i class="fas fa-filter"></i>
+                                        </div>
+                                        <div class="sort-indicator" onclick="sortTable('recheck')">
+                                            <i class="fas fa-arrow-up"></i>
+                                            <i class="fas fa-arrow-down"></i>
+                                        </div>
+                                    </div>
                                 </div>
                             </th>
                         </tr>
diff --git a/style.css b/style.css
index 861f012..8f85854 100644
--- a/style.css
+++ b/style.css
@@ -211,8 +211,7 @@ thead {
 }
 
 th {
-    padding: 0.75rem 1rem;
-    text-align: left;
+    padding: 0.5rem;
     font-weight: 600;
     color: var(--dark);
     border-bottom: 2px solid var(--border);
@@ -220,18 +219,35 @@ th {
     top: 0;
     background: var(--light);
     z-index: 10;
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
+    min-width: 130px;
+    vertical-align: top;
+    white-space: nowrap;
+    display: table-cell;
 }
 
-th:hover {
-    background: var(--hover);
+th .th-controls {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    flex-wrap: nowrap;
+    flex: 1;
+    min-width: 0;
+}
+
+th .th-label {
+    font-size: 0.8rem;
+    font-weight: 700;
+    color: var(--dark);
+    white-space: nowrap;
+    display: inline-flex;
+    align-items: center;
+    margin-right: 0.35rem;
+    flex-shrink: 0;
 }
 
 .column-filter {
-    width: 100%;
-    padding: 0.4rem 0.6rem;
+    width: 90px;
+    padding: 0.35rem 0.5rem;
     border: 1px solid var(--border);
     border-radius: 4px;
     font-size: 0.8rem;
@@ -254,6 +270,13 @@ th.filter-active .column-filter {
     background-color: rgba(99, 102, 241, 0.05);
 }
 
+.th-actions {
+    display: flex;
+    align-items: center;
+    gap: 0.35rem;
+    flex-shrink: 0;
+}
+
 th .sort-indicator {
     display: inline-flex;
     flex-direction: column;