diff --git a/app.py b/app.py
index fd1f373..7a54506 100644
--- a/app.py
+++ b/app.py
@@ -22,53 +22,63 @@ global_dataframe = pd.DataFrame(columns=['Device Name', 'Frequency', 'Signal Str
 frequency = lambda port: {'port1': 433, 'port2': 868,'port3': 915}.get(port, None)
 surveydata = {}
 
-
 def read_serial_data(port, ser, buffer):
     global surveydata
     rssi_pattern = r"RSSI: (-?\d+)"
-    rssi = ''
-
+    decoded_value_pattern = r"Decoded Value: (.+)"
+    rssi = None
+    decoded_value = None
+    
     while True:
         try:
             if ser.in_waiting > 0:
                 data = ser.readline().decode('utf-8').strip()
-                match = re.search(rssi_pattern, data)
 
-                # Check if a RSSI was found
-                if match:
-                    if port =='port1':
-                        rssi = int(match.group(1))
-                        surveydata['Raw LoRa Device 443 MHz'] = [433,rssi,'']
-                    elif port =='port2':
-                        rssi = int(match.group(1))
-                        surveydata['Raw LoRa Device 868 MHz'] = [868,rssi,'']
-                    elif port =='port3':
-                        rssi = int(match.group(1))
-                        surveydata['Raw LoRa Device 915 MHz'] = [915,rssi,'']
+                # Match RSSI
+                rssi_match = re.search(rssi_pattern, data)
+                if rssi_match:
+                    rssi = int(rssi_match.group(1))
+
+                # Match Decoded Value
+                decoded_match = re.search(decoded_value_pattern, data)
+                if decoded_match:
+                    decoded_value = decoded_match.group(1)
+
+                # Update dictionary only if both RSSI and Decoded Value are found
+                if rssi is not None and decoded_value is not None:
+                    freq = frequency(port)
+                    key = f'Raw LoRa Device {freq} MHz'
+                    
+                    # Initialize the list for the frequency if not already done
+                    if key not in surveydata:
+                        surveydata[key] = []
+
+                    # Append the new values to the list for this frequency
+                    surveydata[key].append([freq, rssi, decoded_value])
+
+                    # Reset rssi and decoded_value for next packet
+                    rssi = None
+                    decoded_value = None
 
                 buffer.append(data)
-                socketio.emit(f'serial_data_{port}', {'data': data})  
-                if frequency(port) == 433 and surveydata.get('Raw LoRa Device 443 MHz') is None:
-                    surveydata['Raw LoRa Device 443 MHz'] = [433,0,rssi]
+                socketio.emit(f'serial_data_{port}', {'data': data})
 
-                elif frequency(port) == 868 and surveydata.get('Raw LoRa Device 868 MHz') is None:
-                    surveydata['Raw LoRa Device 868 MHz'] = [868,0,rssi]
-
-                elif frequency(port) == 915 and surveydata.get('Raw LoRa Device 915 MHz') is None:
-                    surveydata['Raw LoRa Device 915 MHz'] = [915,0,rssi]
-
-
-            if (port == 'port1' and port1_status == False):
-                return
-            if (port == 'port2' and port2_status == False):
-                return
-            if (port == 'port3' and port3_status == False):
+            # Check port status
+            if (port == 'port1' and not port1_status) or \
+               (port == 'port2' and not port2_status) or \
+               (port == 'port3' and not port3_status):
                 return
+
             time.sleep(0.1)
-        except:
+
+        except Exception as e:
+            print(f"Error: {e}")
             pass
 
 
+
+
+
 def connect_serial(port,frequency):
     global ser1
     global ser2 
diff --git a/static/css/styles.css b/static/css/styles.css
index 41da4c6..d01bdbc 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -11066,10 +11066,25 @@ section.resume-section .resume-section-content {
 
 /* Styling for the table */
 .scrollable-table {
-  max-height: 300px;
-  overflow-y: auto;
-  display: block;
+  width: 100%;
+  overflow-y: auto; /* Enable vertical scrolling */
+  max-height: 500px; /* Adjust the height as needed */
 }
+#data-table {
+  width: 100%;
+  font-size: 1.1em;
+  border-collapse: collapse; /* Optional: for border styling */
+}
+#data-table thead th {
+  position: sticky;
+  top: 0;
+  background-color: #fff; /* Or any other background color */
+}
+#data-table th, #data-table td {
+  padding: 10px;
+  border: 1px solid #ddd; /* Optional: for border styling */
+}
+
 table {
   width: 100%;
   border-collapse: collapse;
diff --git a/templates/survey.html b/templates/survey.html
index 9fdf426..84ddffb 100644
--- a/templates/survey.html
+++ b/templates/survey.html
@@ -56,16 +56,17 @@
                                     <th>Device Name</th>
                                     <th>Frequency</th>
                                     <th>Signal Strength</th>
-                                    <th>Recovered Plaintext</th>
+                                    <th>Decoded Values</th>
                                 </tr>
                             </thead>
                             <tbody>
                                 <!-- Rows will be inserted here -->
                             </tbody>
-                        </table>
+                        </table>                                              
                     </div>
                 
                     <script>
+                        let expandedRows = {};
                         function updateTableData() {
                             fetch('/get_table_data')
                                 .then(response => response.json())
@@ -73,25 +74,65 @@
                                     const tableBody = document.getElementById('data-table').getElementsByTagName('tbody')[0];
                                     tableBody.innerHTML = ''; // Clear existing table rows
                                     for (let key in data) {
-                                        let row = tableBody.insertRow();
-                                        let cell1 = row.insertCell();
-                                        let cell2 = row.insertCell();
-                                        let cell3 = row.insertCell();
-                                        let cell4 = row.insertCell();
+                                        let mainRow = tableBody.insertRow();
+                                        let cell1 = mainRow.insertCell();
+                                        let cell2 = mainRow.insertCell();
+                                        let cell3 = mainRow.insertCell();
+                                        let cell4 = mainRow.insertCell();
                                         cell1.innerHTML = key;
-                                        cell2.innerHTML = data[key][0];
-                                        cell3.innerHTML = data[key][1];
-                                        cell4.innerHTML = data[key][2];
+                                        cell2.innerHTML = data[key][0][0]; // Frequency (from the first entry)
+                                        cell3.innerHTML = data[key][0][1]; // Signal Strength (from the first entry)
+
+                                        // Create a Bootstrap styled button
+                                        let expandBtn = document.createElement('button');
+                                        expandBtn.classList.add('btn', 'btn-secondary', 'btn-sm'); // Bootstrap button classes
+                                        expandBtn.innerHTML = 'Show Values';
+                                        expandBtn.onclick = function() {
+                                            let deviceKey = key; // Capture the current device key
+                                            let isExpanded = !expandedRows[deviceKey]; // Toggle the expanded state
+
+                                            // Show or hide the expandable rows
+                                            let nextRow = mainRow.nextSibling;
+                                            while (nextRow && nextRow.classList.contains('expandable-row')) {
+                                                nextRow.style.display = isExpanded ? 'table-row' : 'none';
+                                                nextRow = nextRow.nextSibling;
+                                            }
+
+                                            // Update the button text and expandedRows object
+                                            expandBtn.innerHTML = isExpanded ? 'Hide Values' : 'Show Values';
+                                            expandedRows[deviceKey] = isExpanded;
+                                        };
+                                        cell4.appendChild(expandBtn);
+                                        cell4.style.textAlign = 'center'; // Center align the button
+
+                                        // Add expandable rows for each decoded value
+                                        data[key].forEach(entry => {
+                                            let expandableRow = tableBody.insertRow();
+                                            expandableRow.classList.add('expandable-row');
+                                            expandableRow.style.display = 'none'; // Initially hidden
+                                            let cell = expandableRow.insertCell();
+                                            cell.colSpan = "4";
+                                            cell.innerHTML = `Decoded Value: ${entry[2]}`;
+                                        });
+
+                                        if (expandedRows[key]) {
+                                            let nextRow = mainRow.nextSibling;
+                                            while (nextRow && nextRow.classList.contains('expandable-row')) {
+                                                nextRow.style.display = 'table-row';
+                                                nextRow = nextRow.nextSibling;
+                                            }
+                                        }
                                     }
                                 })
                                 .catch(error => console.error('Error:', error));
                         }
-                    
-                        // Initial update of the table
-                        updateTableData();
-                    
-                        // Periodically update the table every 30 seconds (30000 milliseconds)
-                        setInterval(updateTableData, 30000);
+
+                            // Initial update of the table
+                            updateTableData();
+
+                            // Periodically update the table every 30 seconds (30000 milliseconds)
+                            setInterval(updateTableData, 30000);
+
                     </script>
                     
             </section>
diff --git a/templates/tracking.html b/templates/tracking.html
index ecf0e5c..c099d5b 100644
--- a/templates/tracking.html
+++ b/templates/tracking.html
@@ -69,11 +69,11 @@
                         </div>
                         
                         <br>
-                        <!-- Add a Clear Selection button with a CSS class -->
-                        <button id="clear-selection-button" class="center-button" style="display: none;">Clear Filter</button>
+
+                        <button id="clear-selection-button" class="btn btn-secondary btn-sm" style="display: none; display: block;   margin: 0 auto;   text-align: center;">Clear Filter</button>
+
                         
-                        <br>
-                        <div id="selected-data"></div>
+
                         <br>
                         <script>
                             let selectedDeviceName = null; // Global variable to store the selected device name
@@ -83,7 +83,6 @@
                                 fetch('/get_table_data')
                                     .then(response => response.json())
                                     .then(data => {
-                                        dataCache = data; // Update the data cache
                                         const tableBody = document.getElementById('data-table').getElementsByTagName('tbody')[0];
                                         tableBody.innerHTML = ''; // Clear existing table rows
 
@@ -91,32 +90,22 @@
 
                                         for (let key in data) {
                                             let row = tableBody.insertRow();
-                                            row.addEventListener('click', function () {
-                                                // Reset all rows
-                                                const allRows = tableBody.getElementsByTagName('tr');
-                                                for (let i = 0; i < allRows.length; i++) {
-                                                    allRows[i].classList.remove('hidden-row', 'selected-row');
-                                                }
-
-                                                // Highlight and show the clicked row
-                                                row.classList.add('selected-row');
-
-                                                // Display the "Clear Filter" button
-                                                const clearButton = document.getElementById('clear-selection-button');
-                                                clearButton.style.display = 'block';
-
-                                                selectedDeviceName = key; // Update the global variable with the selected device name
-                                                updateSelectedDataDisplay(); // Update the selected data display
+                                            row.addEventListener('click', function() {
+                                                // Handle row click event for selection
+                                                handleRowSelection(row, key);
                                             });
 
                                             let cell1 = row.insertCell();
                                             let cell2 = row.insertCell();
                                             let cell3 = row.insertCell();
-                                            cell1.innerHTML = key;
-                                            cell2.innerHTML = data[key][0];
-                                            cell3.innerHTML = data[key][1];
+                                            cell1.innerHTML = key; // Device Name
+                                            
+                                            // Assuming that the latest data is the most relevant
+                                            let latestData = data[key][data[key].length - 1];
+                                            cell2.innerHTML = latestData[0]; // Frequency
+                                            cell3.innerHTML = latestData[1]; // Signal Strength
 
-                                            // Apply hiding logic
+                                            // Apply hiding logic based on selection
                                             if (isRowSelected) {
                                                 if (key !== selectedDeviceName) {
                                                     row.classList.add('hidden-row');
@@ -131,22 +120,36 @@
                                     .catch(error => console.error('Error:', error));
                             }
 
-
-                        
-                            function updateSelectedDataDisplay() {
-                                const selectedDataDiv = document.getElementById('selected-data');
-                                if (selectedDeviceName !== null && selectedDeviceName in dataCache) {
-                                    const frequency = dataCache[selectedDeviceName][0];
-                                    const signalStrength = dataCache[selectedDeviceName][1];
-                                    selectedDataDiv.innerHTML = `
-                                        Device Name: ${selectedDeviceName}<br>
-                                        Frequency: ${frequency}<br>
-                                        Signal Strength: ${signalStrength}<br>
-                                    `;
-                                } else {
-                                    selectedDataDiv.innerHTML = '';
+                            function handleRowSelection(row, key) {
+                                // Reset all rows
+                                const tableBody = document.getElementById('data-table').getElementsByTagName('tbody')[0];
+                                const allRows = tableBody.getElementsByTagName('tr');
+                                for (let i = 0; i < allRows.length; i++) {
+                                    allRows[i].classList.remove('hidden-row', 'selected-row');
                                 }
+
+                                // Highlight and show the clicked row
+                                row.classList.add('selected-row');
+
+                                // Display the "Clear Filter" button
+                                const clearButton = document.getElementById('clear-selection-button');
+                                clearButton.style.display = 'block';
+
+                                selectedDeviceName = key; // Update the global variable with the selected device name
+                                updateSelectedDataDisplay(); // Update the selected data display
                             }
+
+                            // ... rest of your existing code for updateSelectedDataDisplay, clearButton event listener, etc.
+
+                            // Initial update of the table
+                            updateTableData();
+
+                            // Periodically update the table every second
+                            setInterval(updateTableData, 1000);
+
+
+
+
                         
                             const clearButton = document.getElementById('clear-selection-button');
                             clearButton.addEventListener('click', function () {
@@ -169,11 +172,7 @@
                                 updateSelectedDataDisplay(); // Clear the selected data display
                             });
                         
-                            // Initial update of the table
-                            updateTableData();
-                        
-                            // Periodically update the table every second
-                            setInterval(updateTableData, 1000);
+
                         </script>