diff --git a/static/js/debugging.js b/static/js/debugging.js
new file mode 100644
index 0000000..3c59623
--- /dev/null
+++ b/static/js/debugging.js
@@ -0,0 +1,221 @@
+// File system sync functionality
+document.getElementById('syncFilesBtn').addEventListener('click', async function() {
+    const btn = this;
+    const status = document.getElementById('syncStatus');
+    
+    // Disable button and show loading state
+    btn.disabled = true;
+    btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Syncing...';
+    status.textContent = 'Syncing file system...';
+    
+    try {
+        const response = await fetch('/api/admin/sync-files', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'X-CSRFToken': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
+            }
+        });
+        
+        console.log('Sync response status:', response.status);
+        console.log('Sync response headers:', Object.fromEntries(response.headers.entries()));
+        
+        const responseText = await response.text();
+        console.log('Sync response text:', responseText);
+        
+        let data;
+        try {
+            data = JSON.parse(responseText);
+            console.log('Parsed sync response:', data);
+        } catch (parseError) {
+            console.error('JSON parse error:', parseError);
+            throw new Error('Invalid response format from server');
+        }
+        
+        if (response.ok) {
+            status.textContent = 'Sync completed successfully!';
+            status.className = 'text-success small';
+        } else {
+            throw new Error(data.error || 'Sync failed');
+        }
+    } catch (error) {
+        console.error('Sync error:', error);
+        status.textContent = error.message;
+        status.className = 'text-danger small';
+    } finally {
+        // Reset button state
+        btn.disabled = false;
+        btn.innerHTML = '<i class="fas fa-sync-alt"></i> Sync File System';
+        
+        // Clear status after 5 seconds
+        setTimeout(() => {
+            status.textContent = '';
+            status.className = 'text-muted small';
+        }, 5000);
+    }
+});
+
+// Database verification functionality
+document.getElementById('verifyDbBtn').addEventListener('click', async function() {
+    const btn = this;
+    const status = document.getElementById('verifyStatus');
+    const results = document.getElementById('verificationResults');
+    
+    // Disable button and show loading state
+    btn.disabled = true;
+    btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Verifying...';
+    status.textContent = 'Verifying database state...';
+    results.style.display = 'none';
+    
+    try {
+        const response = await fetch('/api/admin/verify-db-state', {
+            method: 'GET',
+            headers: {
+                'Content-Type': 'application/json',
+                'X-CSRFToken': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
+            }
+        });
+        
+        const data = await response.json();
+        console.log('Verification response:', data);
+        
+        if (!response.ok) {
+            throw new Error(data.error || 'Verification failed');
+        }
+        
+        // Update summary
+        const summary = document.getElementById('verificationSummary');
+        const totalIssues = (data.files_in_db_not_fs?.length || 0) + 
+                          (data.files_in_fs_not_db?.length || 0) + 
+                          (data.size_mismatches?.length || 0) + 
+                          (data.modified_time_mismatches?.length || 0);
+        
+        summary.textContent = `Found ${totalIssues} issues across ${data.rooms_checked || 0} rooms.`;
+        
+        // Update counts and lists
+        updateMismatchSection('dbNotFs', data.files_in_db_not_fs || []);
+        updateMismatchSection('fsNotDb', data.files_in_fs_not_db || []);
+        updateMismatchSection('sizeMismatch', data.size_mismatches || []);
+        updateMismatchSection('timeMismatch', data.modified_time_mismatches || []);
+        
+        // Show results
+        results.style.display = 'block';
+        status.textContent = 'Verification completed!';
+        status.className = 'text-success small';
+    } catch (error) {
+        console.error('Verification error:', error);
+        status.textContent = error.message;
+        status.className = 'text-danger small';
+    } finally {
+        // Reset button state
+        btn.disabled = false;
+        btn.innerHTML = '<i class="fas fa-database"></i> Verify Database State';
+    }
+});
+
+// Cleanup orphaned records functionality
+document.getElementById('cleanupOrphanedBtn').addEventListener('click', async function() {
+    const btn = this;
+    const status = document.getElementById('verifyStatus');
+    
+    // Disable button and show loading state
+    btn.disabled = true;
+    btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Cleaning up...';
+    status.textContent = 'Cleaning up orphaned records...';
+    
+    try {
+        const response = await fetch('/api/admin/cleanup-orphaned-records', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'X-CSRFToken': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
+            }
+        });
+        
+        const data = await response.json();
+        
+        if (!response.ok) {
+            throw new Error(data.error || 'Cleanup failed');
+        }
+        
+        status.textContent = data.message;
+        status.className = 'text-success small';
+        
+        // If there were cleaned records, trigger a verification
+        if (data.cleaned_records && data.cleaned_records.length > 0) {
+            document.getElementById('verifyDbBtn').click();
+        }
+    } catch (error) {
+        console.error('Cleanup error:', error);
+        status.textContent = error.message;
+        status.className = 'text-danger small';
+    } finally {
+        // Reset button state
+        btn.disabled = false;
+        btn.innerHTML = '<i class="fas fa-broom"></i> Cleanup Orphaned Records';
+        
+        // Clear status after 5 seconds
+        setTimeout(() => {
+            status.textContent = '';
+            status.className = 'text-muted small';
+        }, 5000);
+    }
+});
+
+// Helper function to update mismatch sections
+function updateMismatchSection(sectionId, items) {
+    const count = document.getElementById(`${sectionId}Count`);
+    const list = document.getElementById(`${sectionId}List`);
+    
+    if (!count || !list) {
+        console.error(`Missing elements for section ${sectionId}`);
+        return;
+    }
+    
+    count.textContent = items.length;
+    
+    if (items.length === 0) {
+        list.innerHTML = '<div class="text-muted p-3">No issues found</div>';
+        return;
+    }
+    
+    list.innerHTML = items.map(item => `
+        <div class="list-group-item">
+            <div class="d-flex justify-content-between align-items-start">
+                <div>
+                    <strong>${item.name || 'Unknown'}</strong>
+                    <div class="text-muted small">
+                        Room: ${item.room_name || 'Unknown'}
+                        ${item.path ? `<br>Path: ${item.path}` : ''}
+                    </div>
+                </div>
+                <div class="text-muted small">
+                    ${item.type === 'file' ? 'File' : 'Folder'}
+                </div>
+            </div>
+            ${item.fs_size !== undefined ? `
+                <div class="mt-2 small">
+                    <span class="text-danger">Size mismatch:</span>
+                    <br>Filesystem: ${formatSize(item.fs_size)}
+                    <br>Database: ${formatSize(item.db_size)}
+                </div>
+            ` : ''}
+            ${item.fs_modified !== undefined ? `
+                <div class="mt-2 small">
+                    <span class="text-danger">Time mismatch:</span>
+                    <br>Filesystem: ${new Date(item.fs_modified * 1000).toLocaleString()}
+                    <br>Database: ${new Date(item.db_modified * 1000).toLocaleString()}
+                </div>
+            ` : ''}
+        </div>
+    `).join('');
+}
+
+// Helper function to format file sizes
+function formatSize(bytes) {
+    if (bytes === 0) return '0 B';
+    const k = 1024;
+    const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+} 
\ No newline at end of file
diff --git a/templates/settings/tabs/debugging.html b/templates/settings/tabs/debugging.html
index c82c7d5..a0111e0 100644
--- a/templates/settings/tabs/debugging.html
+++ b/templates/settings/tabs/debugging.html
@@ -111,222 +111,5 @@
     </div>
 </div>
 
-<script>
-document.getElementById('syncFilesBtn').addEventListener('click', async function() {
-    const btn = this;
-    const status = document.getElementById('syncStatus');
-    
-    // Disable button and show loading state
-    btn.disabled = true;
-    btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Syncing...';
-    status.textContent = 'Syncing file system...';
-    
-    try {
-        const response = await fetch('/api/admin/sync-files', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-                'X-CSRFToken': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
-            }
-        });
-        
-        console.log('Sync response status:', response.status);
-        console.log('Sync response headers:', Object.fromEntries(response.headers.entries()));
-        
-        const responseText = await response.text();
-        console.log('Sync response text:', responseText);
-        
-        let data;
-        try {
-            data = JSON.parse(responseText);
-            console.log('Parsed sync response:', data);
-        } catch (parseError) {
-            console.error('JSON parse error:', parseError);
-            throw new Error('Invalid response format from server');
-        }
-        
-        if (response.ok) {
-            status.textContent = 'Sync completed successfully!';
-            status.className = 'text-success small';
-        } else {
-            throw new Error(data.error || 'Sync failed');
-        }
-    } catch (error) {
-        console.error('Sync error:', error);
-        status.textContent = error.message;
-        status.className = 'text-danger small';
-    } finally {
-        // Reset button state
-        btn.disabled = false;
-        btn.innerHTML = '<i class="fas fa-sync-alt"></i> Sync File System';
-        
-        // Clear status after 5 seconds
-        setTimeout(() => {
-            status.textContent = '';
-            status.className = 'text-muted small';
-        }, 5000);
-    }
-});
-
-document.getElementById('verifyDbBtn').addEventListener('click', async function() {
-    const btn = this;
-    const status = document.getElementById('verifyStatus');
-    const results = document.getElementById('verificationResults');
-    
-    // Disable button and show loading state
-    btn.disabled = true;
-    btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Verifying...';
-    status.textContent = 'Verifying database state...';
-    results.style.display = 'none';
-    
-    try {
-        const response = await fetch('/api/admin/verify-db-state', {
-            method: 'GET',
-            headers: {
-                'Content-Type': 'application/json',
-                'X-CSRFToken': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
-            }
-        });
-        
-        const data = await response.json();
-        console.log('Verification response:', data); // Debug log
-        
-        if (!response.ok) {
-            throw new Error(data.error || 'Verification failed');
-        }
-        
-        // Update summary
-        const summary = document.getElementById('verificationSummary');
-        const totalIssues = (data.files_in_db_not_fs?.length || 0) + 
-                          (data.files_in_fs_not_db?.length || 0) + 
-                          (data.size_mismatches?.length || 0) + 
-                          (data.modified_time_mismatches?.length || 0);
-        
-        summary.textContent = `Found ${totalIssues} issues across ${data.rooms_checked || 0} rooms.`;
-        
-        // Update counts and lists
-        updateMismatchSection('dbNotFs', data.files_in_db_not_fs || []);
-        updateMismatchSection('fsNotDb', data.files_in_fs_not_db || []);
-        updateMismatchSection('sizeMismatch', data.size_mismatches || []);
-        updateMismatchSection('timeMismatch', data.modified_time_mismatches || []);
-        
-        // Show results
-        results.style.display = 'block';
-        status.textContent = 'Verification completed!';
-        status.className = 'text-success small';
-    } catch (error) {
-        console.error('Verification error:', error); // Debug log
-        status.textContent = error.message;
-        status.className = 'text-danger small';
-    } finally {
-        // Reset button state
-        btn.disabled = false;
-        btn.innerHTML = '<i class="fas fa-database"></i> Verify Database State';
-    }
-});
-
-document.getElementById('cleanupOrphanedBtn').addEventListener('click', async function() {
-    const btn = this;
-    const status = document.getElementById('verifyStatus');
-    
-    // Disable button and show loading state
-    btn.disabled = true;
-    btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Cleaning up...';
-    status.textContent = 'Cleaning up orphaned records...';
-    
-    try {
-        const response = await fetch('/api/admin/cleanup-orphaned-records', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-                'X-CSRFToken': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
-            }
-        });
-        
-        const data = await response.json();
-        
-        if (!response.ok) {
-            throw new Error(data.error || 'Cleanup failed');
-        }
-        
-        status.textContent = data.message;
-        status.className = 'text-success small';
-        
-        // If there were cleaned records, trigger a verification
-        if (data.cleaned_records && data.cleaned_records.length > 0) {
-            document.getElementById('verifyDbBtn').click();
-        }
-    } catch (error) {
-        console.error('Cleanup error:', error);
-        status.textContent = error.message;
-        status.className = 'text-danger small';
-    } finally {
-        // Reset button state
-        btn.disabled = false;
-        btn.innerHTML = '<i class="fas fa-broom"></i> Cleanup Orphaned Records';
-        
-        // Clear status after 5 seconds
-        setTimeout(() => {
-            status.textContent = '';
-            status.className = 'text-muted small';
-        }, 5000);
-    }
-});
-
-function updateMismatchSection(sectionId, items) {
-    const count = document.getElementById(`${sectionId}Count`);
-    const list = document.getElementById(`${sectionId}List`);
-    
-    if (!count || !list) {
-        console.error(`Missing elements for section ${sectionId}`); // Debug log
-        return;
-    }
-    
-    count.textContent = items.length;
-    
-    if (items.length === 0) {
-        list.innerHTML = '<div class="text-muted p-3">No issues found</div>';
-        return;
-    }
-    
-    list.innerHTML = items.map(item => `
-        <div class="list-group-item">
-            <div class="d-flex justify-content-between align-items-start">
-                <div>
-                    <strong>${item.name || 'Unknown'}</strong>
-                    <div class="text-muted small">
-                        Room: ${item.room_name || 'Unknown'}
-                        ${item.path ? `<br>Path: ${item.path}` : ''}
-                    </div>
-                </div>
-                <div class="text-muted small">
-                    ${item.type === 'file' ? 'File' : 'Folder'}
-                </div>
-            </div>
-            ${item.fs_size !== undefined ? `
-                <div class="mt-2 small">
-                    <span class="text-danger">Size mismatch:</span>
-                    <br>Filesystem: ${formatSize(item.fs_size)}
-                    <br>Database: ${formatSize(item.db_size)}
-                </div>
-            ` : ''}
-            ${item.fs_modified !== undefined ? `
-                <div class="mt-2 small">
-                    <span class="text-danger">Time mismatch:</span>
-                    <br>Filesystem: ${new Date(item.fs_modified * 1000).toLocaleString()}
-                    <br>Database: ${new Date(item.db_modified * 1000).toLocaleString()}
-                </div>
-            ` : ''}
-        </div>
-    `).join('');
-}
-
-function formatSize(bytes) {
-    if (bytes === 0) return '0 B';
-    const k = 1024;
-    const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
-    const i = Math.floor(Math.log(bytes) / Math.log(k));
-    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
-}
-</script>
+<script src="{{ url_for('static', filename='js/debugging.js') }}"></script>
 {% endmacro %} 
\ No newline at end of file