diff --git a/routes/__pycache__/auth.cpython-313.pyc b/routes/__pycache__/auth.cpython-313.pyc
index c24b956..b6d64b3 100644
Binary files a/routes/__pycache__/auth.cpython-313.pyc and b/routes/__pycache__/auth.cpython-313.pyc differ
diff --git a/routes/__pycache__/main.cpython-313.pyc b/routes/__pycache__/main.cpython-313.pyc
index 3b7f8ed..5c83e0a 100644
Binary files a/routes/__pycache__/main.cpython-313.pyc and b/routes/__pycache__/main.cpython-313.pyc differ
diff --git a/static/js/mail-log.js b/static/js/mail-log.js
new file mode 100644
index 0000000..1152b06
--- /dev/null
+++ b/static/js/mail-log.js
@@ -0,0 +1,103 @@
+/**
+ * @fileoverview Manages the mail log functionality.
+ * This file handles:
+ * - Filter initialization and updates
+ * - Pagination
+ * - Mail details modal
+ * - Download functionality
+ */
+
+document.addEventListener('DOMContentLoaded', function() {
+    // Get filter elements
+    const statusFilter = document.getElementById('statusFilter');
+    const dateRangeFilter = document.getElementById('dateRangeFilter');
+    const userFilter = document.getElementById('userFilter');
+    const templateFilter = document.getElementById('templateFilter');
+    const clearFiltersBtn = document.querySelector('button[onclick="clearFilters()"]');
+    
+    // Initialize filters from URL parameters
+    const urlParams = new URLSearchParams(window.location.search);
+    if (statusFilter) statusFilter.value = urlParams.get('status') || '';
+    if (dateRangeFilter) dateRangeFilter.value = urlParams.get('date_range') || '7d';
+    if (userFilter) userFilter.value = urlParams.get('user_id') || '';
+    if (templateFilter) templateFilter.value = urlParams.get('template_id') || '';
+    
+    // If no filters are set in URL, trigger initial load with default values
+    if (!urlParams.toString()) {
+        updateFilters();
+    }
+    
+    // Add event listeners for filters
+    if (statusFilter) statusFilter.addEventListener('change', updateFilters);
+    if (dateRangeFilter) dateRangeFilter.addEventListener('change', updateFilters);
+    if (userFilter) userFilter.addEventListener('change', updateFilters);
+    if (templateFilter) templateFilter.addEventListener('change', updateFilters);
+    
+    // Add event listener for clear filters button
+    if (clearFiltersBtn) {
+        clearFiltersBtn.addEventListener('click', function(e) {
+            e.preventDefault();
+            clearFilters();
+        });
+    }
+});
+
+function updateFilters() {
+    const status = document.getElementById('statusFilter').value;
+    const dateRange = document.getElementById('dateRangeFilter').value;
+    const userId = document.getElementById('userFilter').value;
+    const templateId = document.getElementById('templateFilter').value;
+    
+    // Build URL with current page number
+    const currentPage = new URLSearchParams(window.location.search).get('page') || 1;
+    const url = `/settings/mails?page=${currentPage}&status=${status}&date_range=${dateRange}&user_id=${userId}&template_id=${templateId}`;
+    
+    window.location.href = url;
+}
+
+function clearFilters() {
+    window.location.href = '/settings/mails';
+}
+
+function changePage(page) {
+    const status = document.getElementById('statusFilter').value;
+    const dateRange = document.getElementById('dateRangeFilter').value;
+    const userId = document.getElementById('userFilter').value;
+    const templateId = document.getElementById('templateFilter').value;
+    
+    window.location.href = `/settings/mails?page=${page}&status=${status}&date_range=${dateRange}&user_id=${userId}&template_id=${templateId}`;
+}
+
+function viewMailDetails(mailId) {
+    const csrfToken = document.querySelector('meta[name="csrf-token"]').content;
+    fetch(`/settings/mails/${mailId}`, {
+        headers: {
+            'X-CSRF-Token': csrfToken
+        }
+    })
+        .then(response => response.json())
+        .then(mail => {
+            document.getElementById('modalSubject').textContent = mail.subject;
+            document.getElementById('modalRecipient').textContent = mail.recipient;
+            document.getElementById('modalStatus').innerHTML = `
+                <span class="badge ${mail.status === 'pending' ? 'bg-warning' : mail.status === 'sent' ? 'bg-success' : 'bg-danger'}">
+                    ${mail.status}
+                </span>
+            `;
+            document.getElementById('modalTemplate').textContent = mail.template ? mail.template.name : '-';
+            document.getElementById('modalCreatedAt').textContent = new Date(mail.created_at).toLocaleString();
+            document.getElementById('modalSentAt').textContent = mail.sent_at ? new Date(mail.sent_at).toLocaleString() : '-';
+            document.getElementById('modalBody').innerHTML = mail.body;
+            
+            new bootstrap.Modal(document.getElementById('mailDetailsModal')).show();
+        });
+}
+
+function downloadMailLog() {
+    const status = document.getElementById('statusFilter').value;
+    const dateRange = document.getElementById('dateRangeFilter').value;
+    const userId = document.getElementById('userFilter').value;
+    const templateId = document.getElementById('templateFilter').value;
+    
+    window.location.href = `/settings/mails/download?status=${status}&date_range=${dateRange}&user_id=${userId}&template_id=${templateId}`;
+} 
\ No newline at end of file
diff --git a/templates/settings/tabs/mails.html b/templates/settings/tabs/mails.html
index 59c816a..82ee5e3 100644
--- a/templates/settings/tabs/mails.html
+++ b/templates/settings/tabs/mails.html
@@ -4,31 +4,31 @@
         <div class="d-flex justify-content-between align-items-center mb-4">
             <h5 class="card-title mb-0">Mail Log</h5>
             <div class="d-flex gap-2">
-                <select class="form-select form-select-sm" id="statusFilter" onchange="updateFilters()">
+                <select class="form-select form-select-sm" id="statusFilter">
                     <option value="">All Statuses</option>
                     <option value="pending" {% if status == 'pending' %}selected{% endif %}>Pending</option>
                     <option value="sent" {% if status == 'sent' %}selected{% endif %}>Sent</option>
                     <option value="failed" {% if status == 'failed' %}selected{% endif %}>Failed</option>
                 </select>
-                <select class="form-select form-select-sm" id="dateRangeFilter" onchange="updateFilters()">
+                <select class="form-select form-select-sm" id="dateRangeFilter">
                     <option value="24h" {% if date_range == '24h' %}selected{% endif %}>Last 24 Hours</option>
                     <option value="7d" {% if date_range == '7d' %}selected{% endif %}>Last 7 Days</option>
                     <option value="30d" {% if date_range == '30d' %}selected{% endif %}>Last 30 Days</option>
                     <option value="all" {% if date_range == 'all' %}selected{% endif %}>All Time</option>
                 </select>
-                <select class="form-select form-select-sm" id="userFilter" onchange="updateFilters()">
+                <select class="form-select form-select-sm" id="userFilter">
                     <option value="">All Recipients</option>
                     {% for user in users %}
                     <option value="{{ user.id }}" {% if user_id|int == user.id %}selected{% endif %}>{{ user.username }} {{ user.last_name }}</option>
                     {% endfor %}
                 </select>
-                <select class="form-select form-select-sm" id="templateFilter" onchange="updateFilters()">
+                <select class="form-select form-select-sm" id="templateFilter">
                     <option value="">All Templates</option>
                     {% for template in email_templates %}
                     <option value="{{ template.id }}" {% if template_id|int == template.id %}selected{% endif %}>{{ template.name }}</option>
                     {% endfor %}
                 </select>
-                <button class="btn btn-secondary btn-sm" onclick="clearFilters()">
+                <button class="btn btn-secondary btn-sm" id="clearFiltersBtn">
                     <i class="fas fa-times me-1"></i>Clear Filters
                 </button>
                 <button class="btn btn-primary btn-sm" onclick="downloadMailLog()">
@@ -171,61 +171,5 @@
     </div>
 </div>
 
-<script>
-function viewMailDetails(mailId) {
-    const csrfToken = document.querySelector('meta[name="csrf-token"]').content;
-    fetch(`/settings/mails/${mailId}`, {
-        headers: {
-            'X-CSRF-Token': csrfToken
-        }
-    })
-        .then(response => response.json())
-        .then(mail => {
-            document.getElementById('modalSubject').textContent = mail.subject;
-            document.getElementById('modalRecipient').textContent = mail.recipient;
-            document.getElementById('modalStatus').innerHTML = `
-                <span class="badge ${mail.status === 'pending' ? 'bg-warning' : mail.status === 'sent' ? 'bg-success' : 'bg-danger'}">
-                    ${mail.status}
-                </span>
-            `;
-            document.getElementById('modalTemplate').textContent = mail.template ? mail.template.name : '-';
-            document.getElementById('modalCreatedAt').textContent = new Date(mail.created_at).toLocaleString();
-            document.getElementById('modalSentAt').textContent = mail.sent_at ? new Date(mail.sent_at).toLocaleString() : '-';
-            document.getElementById('modalBody').innerHTML = mail.body;
-            
-            new bootstrap.Modal(document.getElementById('mailDetailsModal')).show();
-        });
-}
-
-function downloadMailLog() {
-    const status = document.getElementById('statusFilter').value;
-    const dateRange = document.getElementById('dateRangeFilter').value;
-    const userId = document.getElementById('userFilter').value;
-    const templateId = document.getElementById('templateFilter').value;
-    
-    window.location.href = `/settings/mails/download?status=${status}&date_range=${dateRange}&user_id=${userId}&template_id=${templateId}`;
-}
-
-function updateFilters() {
-    const status = document.getElementById('statusFilter').value;
-    const dateRange = document.getElementById('dateRangeFilter').value;
-    const userId = document.getElementById('userFilter').value;
-    const templateId = document.getElementById('templateFilter').value;
-    
-    window.location.href = `/settings/mails?status=${status}&date_range=${dateRange}&user_id=${userId}&template_id=${templateId}`;
-}
-
-function clearFilters() {
-    window.location.href = '/settings/mails';
-}
-
-function changePage(page) {
-    const status = document.getElementById('statusFilter').value;
-    const dateRange = document.getElementById('dateRangeFilter').value;
-    const userId = document.getElementById('userFilter').value;
-    const templateId = document.getElementById('templateFilter').value;
-    
-    window.location.href = `/settings/mails?page=${page}&status=${status}&date_range=${dateRange}&user_id=${userId}&template_id=${templateId}`;
-}
-</script>
+<script src="{{ url_for('static', filename='js/mail-log.js') }}?v={{ 'js/mail-log.js'|asset_version }}"></script>
 {% endmacro %} 
\ No newline at end of file