diff --git a/py_app/app/templates/fg_quality.html b/py_app/app/templates/fg_quality.html
index f5ce008..f12d146 100644
--- a/py_app/app/templates/fg_quality.html
+++ b/py_app/app/templates/fg_quality.html
@@ -354,12 +354,20 @@ window.addEventListener('DOMContentLoaded', function() {
                             thead.innerHTML = '';
                             tbody.innerHTML = '';
                             
+                            // Find the index of the quality code column
+                            let qualityCodeIndex = -1;
+                            
                             // Add headers
                             if (data.headers) {
-                                data.headers.forEach(header => {
+                                data.headers.forEach((header, index) => {
                                     const th = document.createElement('th');
                                     th.textContent = header;
                                     thead.appendChild(th);
+                                    
+                                    // Track the quality code column
+                                    if (header === 'Defect Code' || header === 'Quality Code') {
+                                        qualityCodeIndex = index;
+                                    }
                                 });
                             }
                             
@@ -367,9 +375,20 @@ window.addEventListener('DOMContentLoaded', function() {
                             if (data.rows && data.rows.length > 0) {
                                 data.rows.forEach(row => {
                                     const tr = document.createElement('tr');
-                                    row.forEach(cell => {
+                                    row.forEach((cell, index) => {
                                         const td = document.createElement('td');
-                                        td.textContent = cell || '';
+                                        
+                                        // Special handling for quality code column
+                                        if (index === qualityCodeIndex && (cell === 0 || cell === '0' || cell === '' || cell === null)) {
+                                            td.textContent = 'OK';
+                                            td.style.color = '#28a745'; // Green color for OK
+                                            td.style.fontWeight = '600';
+                                            td.setAttribute('data-csv-value', '0'); // Store original value for CSV
+                                        } else {
+                                            td.textContent = cell || '';
+                                            td.setAttribute('data-csv-value', cell || ''); // Store original value
+                                        }
+                                        
                                         tr.appendChild(td);
                                     });
                                     tbody.appendChild(tr);
@@ -420,11 +439,69 @@ window.addEventListener('DOMContentLoaded', function() {
                         .then(response => response.json())
                         .then(data => {
                             console.log('📊 FG Range data received:', data);
-                            // Handle response similar to above
-                            document.getElementById('report-title').textContent = `FG Date Range Report (${startDate} to ${endDate})`;
+                            
+                            const table = document.getElementById('report-table');
+                            const thead = table.querySelector('thead tr');
+                            const tbody = table.querySelector('tbody');
+                            
+                            // Clear existing content
+                            thead.innerHTML = '';
+                            tbody.innerHTML = '';
+                            
+                            // Find the index of the quality code column
+                            let qualityCodeIndex = -1;
+                            
+                            // Add headers
+                            if (data.headers) {
+                                data.headers.forEach((header, index) => {
+                                    const th = document.createElement('th');
+                                    th.textContent = header;
+                                    thead.appendChild(th);
+                                    
+                                    // Track the quality code column
+                                    if (header === 'Defect Code' || header === 'Quality Code') {
+                                        qualityCodeIndex = index;
+                                    }
+                                });
+                            }
+                            
+                            // Add rows
+                            if (data.rows && data.rows.length > 0) {
+                                data.rows.forEach(row => {
+                                    const tr = document.createElement('tr');
+                                    row.forEach((cell, index) => {
+                                        const td = document.createElement('td');
+                                        
+                                        // Special handling for quality code column
+                                        if (index === qualityCodeIndex && (cell === 0 || cell === '0' || cell === '' || cell === null)) {
+                                            td.textContent = 'OK';
+                                            td.style.color = '#28a745'; // Green color for OK
+                                            td.style.fontWeight = '600';
+                                            td.setAttribute('data-csv-value', '0'); // Store original value for CSV
+                                        } else {
+                                            td.textContent = cell || '';
+                                            td.setAttribute('data-csv-value', cell || ''); // Store original value
+                                        }
+                                        
+                                        tr.appendChild(td);
+                                    });
+                                    tbody.appendChild(tr);
+                                });
+                                document.getElementById('report-title').textContent = `FG Date Range Report (${startDate} to ${endDate}) - ${data.rows.length} records`;
+                            } else {
+                                const tr = document.createElement('tr');
+                                const td = document.createElement('td');
+                                td.colSpan = data.headers ? data.headers.length : 1;
+                                td.textContent = data.message || 'No FG data found';
+                                td.style.textAlign = 'center';
+                                tr.appendChild(td);
+                                tbody.appendChild(tr);
+                                document.getElementById('report-title').textContent = `FG Date Range Report (${startDate} to ${endDate}) - No data`;
+                            }
                         })
                         .catch(error => {
                             console.error('❌ Error fetching FG range data:', error);
+                            document.getElementById('report-title').textContent = 'Error loading FG data';
                         });
                     
                     // Hide modal