diff --git a/meshview/store.py b/meshview/store.py
index 711f532..b5deba3 100644
--- a/meshview/store.py
+++ b/meshview/store.py
@@ -171,29 +171,41 @@ async def get_total_node_count(channel: str = None) -> int:
 
 
 async def get_top_traffic_nodes():
-    async with database.async_session() as session:
-        result = await session.execute(text("""
-            SELECT 
-                n.node_id,
-                n.long_name,
-                n.role,
-                COUNT(p.id) AS packet_count
-            FROM 
-                packet p
-            JOIN 
-                node n
-            ON 
-                p.from_node_id = n.node_id
-            WHERE 
-                p.import_time >= DATETIME('now', 'localtime', '-1 day')
-            GROUP BY 
-                n.long_name, n.role
-            ORDER BY 
-                packet_count DESC
-            LIMIT 100;
-        """))
+    try:
+        async with database.async_session() as session:  # Assuming this is your DB session
+            result = await session.execute(text("""
+                SELECT 
+                    n.node_id,
+                    n.long_name,
+                    n.short_name,
+                    n.channel,
+                    COUNT(DISTINCT p.id) AS total_packets_sent,
+                    COUNT(ps.packet_id) AS total_times_seen
+                FROM node n
+                LEFT JOIN packet p ON n.node_id = p.from_node_id
+                    AND p.import_time >= DATETIME('now', '-24 hours')
+                LEFT JOIN packet_seen ps ON p.id = ps.packet_id
+                GROUP BY n.node_id, n.long_name, n.short_name
+                ORDER BY total_times_seen DESC;
+            """))
+
+            rows = result.fetchall()
+
+            nodes = [{
+                'node_id': row[0],
+                'long_name': row[1],
+                'short_name': row[2],
+                'channel': row[3],
+                'total_packets_sent': row[4],
+                'total_times_seen': row[5]
+            } for row in rows]
+            return nodes
+
+    except Exception as e:
+        print(f"Error retrieving top traffic nodes: {str(e)}")
+        return []
+
 
-        return result.fetchall()  # Returns a list of tuples
 
 async def get_node_traffic(node_id: int):
     try:
diff --git a/meshview/templates/base.html b/meshview/templates/base.html
index 9b422e4..b45b3ac 100644
--- a/meshview/templates/base.html
+++ b/meshview/templates/base.html
@@ -10,8 +10,6 @@
         <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
         <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
         <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
-
-
         {% block head %}
         {% endblock %}
 
@@ -34,7 +32,7 @@
                 {% endblock %}
         </style>
     </head>
-    <body hx-indicator="#spinner">
+    <body>
         <br><div style="text-align:center"><strong>{{ site_config["site"]["title"] }} {{ site_config["site"]["domain"] }}</strong></div>
         <div style="text-align: center;">{{ site_config["site"]["message"] }}</div>
         <div style="text-align:center">Quick Links:&nbsp;&nbsp;
@@ -50,7 +48,6 @@
             {% if site_config["site"]["top"] == "True" %}<a href="/top">Top Traffic</a>{% endif %}
         </div><br>
 
-
         {% block body %}
         {% endblock %}
     <br><div style="text-align:center">Visit <strong><a href="https://github.com/pablorevilla-meshtastic/meshview">Meshview</a></strong> on Github.</div><br>
diff --git a/meshview/templates/top.html b/meshview/templates/top.html
index b875f77..61f77ba 100644
--- a/meshview/templates/top.html
+++ b/meshview/templates/top.html
@@ -1,65 +1,211 @@
 {% extends "base.html" %}
+
 {% block css %}
-.table-title {
-            font-size: 2rem;
-            text-align: center;
-            margin-bottom: 20px;
-        }
+/* General table styling */
+table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-top: 20px;
+}
 
-        .traffic-table {
-            width: 60%;
-            border-collapse: collapse;
-            margin: 0 auto;
-            font-family: Arial, sans-serif;
-        }
+table th, table td {
+    padding: 12px;
+    text-align: left;
+    border: 1px solid #ddd;
+    cursor: pointer; /* Makes the column headers clickable */
+}
 
-        .traffic-table th,
-        .traffic-table td {
-            padding: 10px 15px;
-            text-align: left;
-            border: 1px solid #474b4e;
-        }
+table th {
+    background-color: #333;
+    color: #fff;
+    font-weight: bold;
+}
 
-        .traffic-table th {
-            background-color: #272b2f;
-            color: white;
-        }
+table tbody tr:nth-child(odd) {
+    background-color: #272b2f; /* Slightly lighter than #2a2a2a */
+}
 
-        .traffic:nth-of-type(odd) {
-            background-color: #272b2f; /* Lighter than #2a2a2a */
-        }
+table tbody tr:nth-child(even) {
+    background-color: #212529; /* Slightly lighter than #181818 */
+}
 
-        .traffic {
-            border: 1px solid #474b4e;
-            padding: 8px;
-            margin-bottom: 4px;
-            border-radius: 8px;
-        }
+table tbody tr:hover {
+    background-color: #555; /* Light hover effect */
+}
+
+table td {
+    color: #ddd;
+}
+
+table th, table td {
+    border-radius: 8px;
+}
+
+/* Responsive Table for smaller screens */
+@media (max-width: 768px) {
+    table th, table td {
+        padding: 8px;
+    }
+}
+
+h1 {
+    text-align: center;
+    color: #ddd;
+    margin-top: 20px;
+    margin-bottom: 20px;
+}
+
+/* Bell curve chart container */
+#bellCurveChart {
+    height: 400px;
+    width: 100%;
+    margin-top: 30px;
+}
+
+#stats {
+    text-align: center;  /* Centers the content inside the #stats container */
+    margin-top: 20px;    /* Adds a 20px margin at the top */
+    color: #fff
+}
 
-        .traffic:nth-of-type(even) {
-            background-color: #212529; /* Slightly lighter than the previous #181818 */
-        }
 {% endblock %}
 
 {% block body %}
-    <h2 class="table-title">Top Traffic Nodes (last 24 hours)</h2>
-    <table class="traffic-table">
+  <h1>Top Traffic Nodes</h1>
+
+  <!-- Bell Curve Chart -->
+  <div id="bellCurveChart"></div>
+
+  <!-- Mean and Standard Deviation Display -->
+  <div id="stats">
+    <p><strong>Mean: </strong><span id="mean"></span></p>
+    <p><strong>Standard Deviation: </strong><span id="stdDev"></span></p>
+  </div>
+
+  {% if nodes %}
+    <div class="container">
+      <table id="trafficTable">
         <thead>
-            <tr>
-                <th>Node Name</th>
-                <th>Role</th>
-                <th>Packet Count</th>
-            </tr>
+          <tr>
+            <th onclick="sortTable(0)">Long Name</th>
+            <th onclick="sortTable(1)">Short Name</th>
+            <th onclick="sortTable(2)">Channel</th>
+            <th onclick="sortTable(3)">Packets Sent</th>
+            <th onclick="sortTable(4)">Times Seen</th>
+          </tr>
         </thead>
         <tbody>
-            {% for node in nodes %}
-                <tr class="traffic">
-                    <td><a href="/packet_list/{{ node[0] }}">{{ node[1] }}</a></td>  <!-- long_name -->
-                    <td>{{ node[2] }}</td>
-                    <td><a href="/top?node_id={{ node[0] }}">{{ node[3] }}</a></td> <!-- packet_count -->
-                </tr>
-            {% endfor %}
+          {% for node in nodes %}
+            <tr>
+              <td>{{ node.long_name }}</td>
+              <td>{{ node.short_name }}</td>
+              <td>{{ node.channel }}</td>
+              <td>{{ node.total_packets_sent }}</td>
+              <td>{{ node.total_times_seen }}</td>
+            </tr>
+          {% endfor %}
         </tbody>
-    </table>
+      </table>
+    </div>
+  {% else %}
+    <p style="text-align: center;">No top traffic nodes available.</p>
+  {% endif %}
 
+  <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.min.js"></script>
+  <script>
+    // Get the nodes data from the backend
+    const nodes = {{ nodes | tojson }}; // Converts the nodes to a JSON object in JavaScript
+
+    // Extract total_times_seen values
+    const timesSeenValues = nodes.map(node => node.total_times_seen);
+
+    // Calculate mean and standard deviation
+    const mean = timesSeenValues.reduce((sum, value) => sum + value, 0) / timesSeenValues.length;
+    const stdDev = Math.sqrt(timesSeenValues.reduce((sum, value) => sum + Math.pow(value - mean, 2), 0) / timesSeenValues.length);
+
+    // Display mean and standard deviation
+    document.getElementById('mean').textContent = mean.toFixed(2);
+    document.getElementById('stdDev').textContent = stdDev.toFixed(2);
+
+    // Function to calculate the normal distribution value (bell curve)
+    function normalDistribution(x, mean, stdDev) {
+        return (1 / (stdDev * Math.sqrt(2 * Math.PI))) * Math.exp(-0.5 * Math.pow((x - mean) / stdDev, 2));
+    }
+
+    // Generate x-values (range) and corresponding y-values for the bell curve
+    const xData = [];
+    const yData = [];
+    const min = Math.min(...timesSeenValues);
+    const max = Math.max(...timesSeenValues);
+    const step = (max - min) / 100; // Number of data points for the bell curve
+
+    for (let x = min; x <= max; x += step) {
+        xData.push(x);
+        yData.push(normalDistribution(x, mean, stdDev));
+    }
+
+    // ECharts setup
+    const myChart = echarts.init(document.getElementById('bellCurveChart'));
+
+    const option = {
+
+        tooltip: {
+            trigger: 'axis'
+        },
+        xAxis: {
+            name: 'Total Times Seen',
+            type: 'value',
+            min: min,
+            max: max
+        },
+        yAxis: {
+            name: 'Probability Density',
+            type: 'value',
+        },
+        series: [{
+            data: xData.map((x, i) => [x, yData[i]]),
+            type: 'line',
+            smooth: true,
+            color: 'blue',
+            lineStyle: {
+                width: 3
+            }
+        }]
+    };
+
+    myChart.setOption(option);
+
+    // Function to sort the table when clicking on column headers
+    function sortTable(n) {
+      const table = document.getElementById("trafficTable");
+      const rows = Array.from(table.rows).slice(1); // Get all rows except the header
+      const isNumeric = !isNaN(rows[0].cells[n].innerText); // Check if column contains numeric data
+      let sortedRows;
+
+      if (isNumeric) {
+        sortedRows = rows.sort((a, b) => {
+          const cellA = parseFloat(a.cells[n].innerText);
+          const cellB = parseFloat(b.cells[n].innerText);
+          return cellA - cellB; // Numeric sort
+        });
+      } else {
+        sortedRows = rows.sort((a, b) => {
+          const cellA = a.cells[n].innerText.toLowerCase();
+          const cellB = b.cells[n].innerText.toLowerCase();
+          return cellA.localeCompare(cellB); // Alphabetic sort
+        });
+      }
+
+      // Toggle the direction of the sort (ascending or descending)
+      if (table.rows[0].cells[n].getAttribute('data-sort-direction') === 'asc') {
+        sortedRows.reverse(); // Reverse the order for descending
+        table.rows[0].cells[n].setAttribute('data-sort-direction', 'desc');
+      } else {
+        table.rows[0].cells[n].setAttribute('data-sort-direction', 'asc');
+      }
+
+      // Append sorted rows back to the table body
+      sortedRows.forEach(row => table.tBodies[0].appendChild(row));
+    }
+  </script>
 {% endblock %}
diff --git a/meshview/web.py b/meshview/web.py
index 220b371..f7b3a06 100644
--- a/meshview/web.py
+++ b/meshview/web.py
@@ -1163,7 +1163,7 @@ async def net(request):
         # Filter packets: exclude "seq \d+$" but include those containing Tag
         filtered_packets = [
             p for p in ui_packets
-            if not seq_pattern.match(p.payload) and CONFIG["site"]["net_tag"] in p.payload.lower()
+            if not seq_pattern.match(p.payload) and (CONFIG["site"]["net_tag"]).lower() in p.payload.lower()
         ]
 
         # Render template

Node Name	Role	Packet Count
Long Name	Short Name	Channel	Packets Sent	Times Seen
{{ node[1] }}	{{ node[2] }}	{{ node[3] }}
{{ node.long_name }}	{{ node.short_name }}	{{ node.channel }}	{{ node.total_packets_sent }}	{{ node.total_times_seen }}