diff --git a/public/js/data-store.js b/public/js/data-store.js
index 1eb496d..a55f8aa 100644
--- a/public/js/data-store.js
+++ b/public/js/data-store.js
@@ -22,7 +22,9 @@ document.addEventListener('alpine:init', () => {
         filters: {
             account: 'all',
             family: 'all',
-            search: ''
+            search: '',
+            sortCol: 'avgQuota',
+            sortAsc: true
         },
 
         // Settings for calculation
@@ -177,20 +179,52 @@ document.addEventListener('alpine:init', () => {
                     resetIn: minResetTime ? window.utils.formatTimeUntil(minResetTime) : '-',
                     quotaInfo,
                     pinned: !!config.pinned,
-                    hidden: !!isHidden // Use computed visibility
+                    hidden: !!isHidden, // Use computed visibility
+                    activeCount: quotaInfo.filter(q => q.pct > 0).length
                 });
             });
 
-            // Sort: Pinned first, then by avgQuota (descending)
+            // Sort: Pinned first, then by selected column
+            const sortCol = this.filters.sortCol;
+            const sortAsc = this.filters.sortAsc;
+
             this.quotaRows = rows.sort((a, b) => {
                 if (a.pinned !== b.pinned) return a.pinned ? -1 : 1;
-                return b.avgQuota - a.avgQuota;
+                
+                let valA = a[sortCol];
+                let valB = b[sortCol];
+
+                // Handle nulls (always push to bottom)
+                if (valA === valB) return 0;
+                if (valA === null || valA === undefined) return 1;
+                if (valB === null || valB === undefined) return -1;
+
+                if (typeof valA === 'string' && typeof valB === 'string') {
+                    return sortAsc ? valA.localeCompare(valB) : valB.localeCompare(valA);
+                }
+
+                return sortAsc ? valA - valB : valB - valA;
             });
 
             // Trigger Dashboard Update if active
             // Ideally dashboard watches this store.
         },
 
+        setSort(col) {
+            if (this.filters.sortCol === col) {
+                this.filters.sortAsc = !this.filters.sortAsc;
+            } else {
+                this.filters.sortCol = col;
+                // Default sort direction: Descending for numbers/stats, Ascending for text/time
+                if (['avgQuota', 'activeCount'].includes(col)) {
+                    this.filters.sortAsc = false;
+                } else {
+                    this.filters.sortAsc = true;
+                }
+            }
+            this.computeQuotaRows();
+        },
+
         getModelFamily(modelId) {
             const lower = modelId.toLowerCase();
             if (lower.includes('claude')) return 'claude';
diff --git a/public/views/models.html b/public/views/models.html
index 8b2b1d6..5efcde1 100644
--- a/public/views/models.html
+++ b/public/views/models.html
@@ -94,14 +94,60 @@
                 :class="{'table-xs': $store.settings.compact, 'table-sm': !$store.settings.compact}">
             <thead>
                 <tr>
-                    <th class="w-14 py-3 pl-4 whitespace-nowrap" x-text="$store.global.t('stat')">Stat</th>
-                    <th class="py-3 whitespace-nowrap" x-text="$store.global.t('modelIdentity')">Model Identity</th>
-                    <th class="min-w-[12rem] py-3 whitespace-nowrap" x-text="$store.global.t('globalQuota')">Global
-                        Quota</th>
-                    <th class="min-w-[8rem] py-3 whitespace-nowrap" x-text="$store.global.t('nextReset')">Next Reset
+                    <th class="w-14 py-3 pl-4 whitespace-nowrap cursor-pointer hover:text-white transition-colors select-none group"
+                        @click="$store.data.setSort('avgQuota')">
+                        <div class="flex items-center justify-center">
+                            <span x-text="$store.global.t('stat')">Stat</span>
+                        </div>
+                    </th>
+                    <th class="py-3 whitespace-nowrap cursor-pointer hover:text-white transition-colors select-none group"
+                        @click="$store.data.setSort('modelId')">
+                        <div class="flex items-center gap-1">
+                            <span x-text="$store.global.t('modelIdentity')">Model Identity</span>
+                            <svg class="w-3 h-3 transition-colors"
+                                :class="$store.data.filters.sortCol === 'modelId' ? 'text-neon-purple' : 'text-gray-700 opacity-0 group-hover:opacity-100'"
+                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                    :d="$store.data.filters.sortCol === 'modelId' ? ($store.data.filters.sortAsc ? 'M5 15l7-7 7 7' : 'M19 9l-7 7-7-7') : 'M8 9l4-4 4 4m0 6l-4 4-4-4'" />
+                            </svg>
+                        </div>
+                    </th>
+                    <th class="min-w-[12rem] py-3 whitespace-nowrap cursor-pointer hover:text-white transition-colors select-none group"
+                        @click="$store.data.setSort('avgQuota')">
+                        <div class="flex items-center gap-1">
+                            <span x-text="$store.global.t('globalQuota')">Global Quota</span>
+                            <svg class="w-3 h-3 transition-colors"
+                                :class="$store.data.filters.sortCol === 'avgQuota' ? 'text-neon-purple' : 'text-gray-700 opacity-0 group-hover:opacity-100'"
+                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                    :d="$store.data.filters.sortCol === 'avgQuota' ? ($store.data.filters.sortAsc ? 'M5 15l7-7 7 7' : 'M19 9l-7 7-7-7') : 'M8 9l4-4 4 4m0 6l-4 4-4-4'" />
+                            </svg>
+                        </div>
+                    </th>
+                    <th class="min-w-[8rem] py-3 whitespace-nowrap cursor-pointer hover:text-white transition-colors select-none group"
+                        @click="$store.data.setSort('minResetTime')">
+                        <div class="flex items-center gap-1">
+                            <span x-text="$store.global.t('nextReset')">Next Reset</span>
+                            <svg class="w-3 h-3 transition-colors"
+                                :class="$store.data.filters.sortCol === 'minResetTime' ? 'text-neon-purple' : 'text-gray-700 opacity-0 group-hover:opacity-100'"
+                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                    :d="$store.data.filters.sortCol === 'minResetTime' ? ($store.data.filters.sortAsc ? 'M5 15l7-7 7 7' : 'M19 9l-7 7-7-7') : 'M8 9l4-4 4 4m0 6l-4 4-4-4'" />
+                            </svg>
+                        </div>
+                    </th>
+                    <th class="py-3 whitespace-nowrap cursor-pointer hover:text-white transition-colors select-none group"
+                        @click="$store.data.setSort('activeCount')">
+                        <div class="flex items-center gap-1 justify-start">
+                            <span x-text="$store.global.t('distribution')">Account Distribution</span>
+                            <svg class="w-3 h-3 transition-colors"
+                                :class="$store.data.filters.sortCol === 'activeCount' ? 'text-neon-purple' : 'text-gray-700 opacity-0 group-hover:opacity-100'"
+                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                    :d="$store.data.filters.sortCol === 'activeCount' ? ($store.data.filters.sortAsc ? 'M5 15l7-7 7 7' : 'M19 9l-7 7-7-7') : 'M8 9l4-4 4 4m0 6l-4 4-4-4'" />
+                            </svg>
+                        </div>
                     </th>
-                    <th class="py-3 whitespace-nowrap" x-text="$store.global.t('distribution')">Account
-                        Distribution</th>
                     <th class="w-20 py-3 pr-4 text-right whitespace-nowrap" x-text="$store.global.t('actions')">Actions
                     </th>
                 </tr>
@@ -143,20 +189,20 @@
                             </div>
                         </td>
                         <td>
-                            <div class="flex items-center justify-end gap-3">
+                            <div class="flex items-center justify-start gap-3">
                                 <div
-                                    class="text-[10px] font-mono text-gray-500 hidden xl:block text-right leading-tight opacity-70">
+                                    class="text-[10px] font-mono text-gray-500 hidden xl:block text-left leading-tight opacity-70">
                                     <div
                                         x-text="$store.global.t('activeCount', {count: row.quotaInfo?.filter(q => q.pct > 0).length || 0})">
                                     </div>
                                 </div>
                                 <!-- Account Status Indicators -->
-                                <div class="flex flex-wrap gap-1 justify-end max-w-[200px]" x-data="{ maxVisible: 12 }">
+                                <div class="flex flex-wrap gap-1 justify-start max-w-[200px]" x-data="{ maxVisible: 12 }">
                                     <template x-if="!row.quotaInfo || row.quotaInfo.length === 0">
                                         <div class="text-[10px] text-gray-600 italic">No data</div>
                                     </template>
                                     <template x-if="row.quotaInfo && row.quotaInfo.length > 0">
-                                        <div class="flex flex-wrap gap-1 justify-end">
+                                        <div class="flex flex-wrap gap-1 justify-start">
                                             <!-- Visible accounts (limited to maxVisible) -->
                                             <template x-for="(q, idx) in row.quotaInfo.slice(0, maxVisible)" :key="q.fullEmail">
                                                 <div class="tooltip tooltip-left" :data-tip="`${q.fullEmail} (${q.pct}%)`">