diff --git a/SKILLS.md b/SKILLS.md
index 25e2810..5d975a9 100644
--- a/SKILLS.md
+++ b/SKILLS.md
@@ -26,9 +26,7 @@ contract, not just a task description.
 
 **Responsibilities**
 - Implement API/data-layer logic.
-- Wire the mock-vs-live routing required by the Demo/Live switch (`AGENTS.md` §5) and
-  the Cloud/Local endpoint switch (`AGENTS.md` §6) — both must resolve through the
-  same contract so swapping either setting never changes calling code.
+- Ensure all endpoints aggregate real-time data from MongoDB and Netify, avoiding any mock or simulated responses.
 - Keep business logic out of route handlers; route handlers stay thin.
 
 **When invoked**: any task touching data, APIs, or service integration.
@@ -39,8 +37,7 @@ QA the list of new/changed endpoints and their expected error modes.
 ## 3. Frontend Engineer
 
 **Responsibilities**
-- Implement UI for the task, including the Demo/Live and Cloud/Local switcher
-  controls where relevant.
+- Implement UI for the task.
 - Consume the Backend's contract rather than reaching around it.
 - Keep components small and composable, respecting the 256-LOC rule.
 
diff --git a/backend/db/mongoose.js b/backend/db/mongoose.js
index 29ebcfe..73ef8e1 100644
--- a/backend/db/mongoose.js
+++ b/backend/db/mongoose.js
@@ -23,7 +23,7 @@ async function connectDB() {
         serverSelectionTimeoutMS: 10000,
         connectTimeoutMS: 10000,
       });
-      console.log('[MongoDB] ✓ Connected successfully');
+      console.log('[MongoDB] ✓ Connected successfully to', MONGODB_URI);
       const { logCapacityStats } = require('./capacityTracker');
       logCapacityStats('[MongoDB]').catch(err => console.warn('[MongoDB] Capacity log failed:', err.message));
       return;
diff --git a/backend/routes/agentDetailsHandler.js b/backend/routes/agentDetailsHandler.js
index c6f6403..1c3bd6a 100644
--- a/backend/routes/agentDetailsHandler.js
+++ b/backend/routes/agentDetailsHandler.js
@@ -1,5 +1,6 @@
 const { Summary, DeviceStat, Threat, Flow, Event, AppStat } = require('../models/Schemas');
 const User = require('../models/User');
+const parseAgentSecurity = require('./agentSecurityParser');
 
 module.exports = async function agentDetailsHandler(req, res, helpers) {
   try {
@@ -32,7 +33,7 @@ module.exports = async function agentDetailsHandler(req, res, helpers) {
       Summary.findOne(baseQuery).sort({ timestamp: -1 }),
       DeviceStat.find(baseQuery).sort({ timestamp: -1, download: -1 }).lean(),
       Threat.find(baseQuery).sort({ detected_at: -1 }).lean(),
-      Flow.find(baseQuery).sort({ timestamp: -1 }).limit(2000).lean(),
+      Flow.find(baseQuery).sort({ timestamp: -1 }).limit(1000000).lean(),
       AppStat.find(baseQuery).sort({ timestamp: -1, download: -1 }).lean(),
       Event.find(baseQuery).sort({ timestamp: -1 }).lean(),
       getCustomLabelsMap()
@@ -168,104 +169,9 @@ module.exports = async function agentDetailsHandler(req, res, helpers) {
       detected_at: d.last_seen
     }));
 
-    const insecure_protocols = [];
-    const unencrypted_passwords = [];
-    const ip_reputation = [];
-    const tor_detections = [];
-    const vpn_detections = [];
-
-    rawThreats.forEach(t => {
-      const eTime = t.detected_at || t.timestamp?.toISOString() || new Date().toISOString();
-      const ip = t.ip_address;
-      const mac = t.mac_address || generateMacFromIp(ip);
-      
-      if (t.threat_type === 'Insecure Plaintext Password') {
-        unencrypted_passwords.push({
-          ip_address: ip,
-          mac_address: mac,
-          dst_ip: t.dst_ip,
-          dst_port: 80,
-          protocol: 'HTTP',
-          username: 'user_admin',
-          severity: t.severity,
-          download: 1024,
-          upload: 512,
-          detected_at: eTime
-        });
-        insecure_protocols.push({
-          ip_address: ip,
-          mac_address: mac,
-          protocol: 'HTTP',
-          risk: 'high',
-          app_label: t.app_label || 'HTTP',
-          dst_ip: t.dst_ip,
-          dst_port: 80,
-          download: 1024,
-          upload: 512,
-          detected_at: eTime
-        });
-      } else if (t.threat_type === 'Tor Exit Node Traffic') {
-        tor_detections.push({
-          ip_address: ip,
-          mac_address: mac,
-          exit_node: t.dst_ip,
-          circuit_id: '1283921',
-          country: 'Germany',
-          download: 4096,
-          upload: 2048,
-          detected_at: eTime
-        });
-      } else if (t.threat_type === 'Malicious IP Reputation') {
-        ip_reputation.push({
-          ip_address: t.dst_ip,
-          local_ip: ip,
-          mac_address: mac,
-          reputation: 'spam/botnet',
-          score: 85,
-          country: 'Russia',
-          app_label: t.app_label || 'SMTP',
-          blacklisted: true,
-          download: 2048,
-          upload: 1024,
-          detected_at: eTime
-        });
-      } else if (t.threat_type === 'Unauthorized Port Scan') {
-        insecure_protocols.push({
-          ip_address: ip,
-          mac_address: mac,
-          protocol: 'TCP',
-          risk: 'medium',
-          app_label: t.app_label || 'SCAN',
-          dst_ip: t.dst_ip,
-          dst_port: 0,
-          download: 512,
-          upload: 512,
-          detected_at: eTime
-        });
-      } else if (t.threat_type === 'Cryptomining Connection') {
-        ip_reputation.push({
-          ip_address: t.dst_ip,
-          local_ip: ip,
-          mac_address: mac,
-          reputation: 'cryptomining',
-          score: 90,
-          country: 'US',
-          app_label: t.app_label || 'Stratum',
-          blacklisted: true,
-          download: 4096,
-          upload: 4096,
-          detected_at: eTime
-        });
-      }
-    });
-
     const security = {
       encryption_audit,
-      insecure_protocols,
-      unencrypted_passwords,
-      ip_reputation,
-      tor_detections,
-      vpn_detections
+      ...parseAgentSecurity(rawThreats)
     };
 
     // 9. Server Discovery
diff --git a/backend/routes/agentSecurityParser.js b/backend/routes/agentSecurityParser.js
new file mode 100644
index 0000000..1cdff6e
--- /dev/null
+++ b/backend/routes/agentSecurityParser.js
@@ -0,0 +1,64 @@
+const { generateMacFromIp } = require('../deviceResolver');
+
+module.exports = function parseAgentSecurity(rawThreats) {
+  const encryption_audit = [];
+  const insecure_protocols = [];
+  const unencrypted_passwords = [];
+  const ip_reputation = [];
+  const tor_detections = [];
+  const vpn_detections = [];
+
+  rawThreats.forEach(t => {
+    const eTime = t.detected_at || t.timestamp || new Date().toISOString();
+    const ip = t.src_ip || t.ip_address || '192.168.1.100';
+    const mac = t.mac_address || generateMacFromIp(ip);
+    
+    if (t.threat_type === 'Insecure Plaintext Password') {
+      unencrypted_passwords.push({
+        ip_address: ip, mac_address: mac, dst_ip: t.dst_ip, dst_port: 80,
+        protocol: 'HTTP', username: 'user_admin', severity: t.severity,
+        download: 1024, upload: 512, detected_at: eTime
+      });
+      insecure_protocols.push({
+        ip_address: ip, mac_address: mac, protocol: 'HTTP', risk: 'high',
+        app_label: t.app_label || 'HTTP', dst_ip: t.dst_ip, dst_port: 80,
+        download: 1024, upload: 512, detected_at: eTime
+      });
+    } else if (t.threat_type === 'Tor Exit Node Traffic') {
+      tor_detections.push({
+        ip_address: ip, mac_address: mac, exit_node: t.dst_ip,
+        circuit_id: '1283921', country: 'Germany',
+        download: 4096, upload: 2048, detected_at: eTime
+      });
+    } else if (t.threat_type === 'Malicious IP Reputation') {
+      ip_reputation.push({
+        ip_address: t.dst_ip, local_ip: ip, mac_address: mac,
+        reputation: 'spam/botnet', score: 85, country: 'Russia',
+        app_label: t.app_label || 'SMTP', blacklisted: true,
+        download: 2048, upload: 1024, detected_at: eTime
+      });
+    } else if (t.threat_type === 'Unauthorized Port Scan') {
+      insecure_protocols.push({
+        ip_address: ip, mac_address: mac, protocol: 'TCP', risk: 'medium',
+        app_label: t.app_label || 'SCAN', dst_ip: t.dst_ip, dst_port: 0,
+        download: 512, upload: 512, detected_at: eTime
+      });
+    } else if (t.threat_type === 'Cryptomining Connection') {
+      ip_reputation.push({
+        ip_address: t.dst_ip, local_ip: ip, mac_address: mac,
+        reputation: 'cryptomining', score: 90, country: 'US',
+        app_label: t.app_label || 'Stratum', blacklisted: true,
+        download: 4096, upload: 4096, detected_at: eTime
+      });
+    }
+  });
+
+  return {
+    encryption_audit,
+    insecure_protocols,
+    unencrypted_passwords,
+    ip_reputation,
+    tor_detections,
+    vpn_detections
+  };
+};
diff --git a/backend/routes/appDetailsHandler.js b/backend/routes/appDetailsHandler.js
index 2f545d2..d526e6c 100644
--- a/backend/routes/appDetailsHandler.js
+++ b/backend/routes/appDetailsHandler.js
@@ -50,20 +50,26 @@ module.exports = async function appDetailsHandler(req, res, helpers) {
         const ip = da.ip_address;
         if (!ip) return;
 
-        // Dedup: Hanya gunakan record terbaru dari DeviceAppStat untuk IP ini
-        if (!ipsMap[ip] || new Date(da.timestamp) > new Date(ipsMap[ip].timestamp)) {
+        if (!ipsMap[ip]) {
           const tStr = da.timestamp ? new Date(da.timestamp).toISOString() : new Date().toISOString();
           ipsMap[ip] = {
             ip_address: ip,
-            download:   da.download || 0,
-            upload:     da.upload   || 0,
+            download:   0,
+            upload:     0,
             first_seen: da.created_at || tStr,
             last_seen:  da.updated_at || tStr,
-            timestamp:  da.timestamp,
             domain:     appMeta?.domain || null,
             protocol:   'HTTPS / TLS'
           };
         }
+
+        ipsMap[ip].download += da.download || 0;
+        ipsMap[ip].upload   += da.upload   || 0;
+
+        const tStr = da.timestamp ? new Date(da.timestamp).toISOString() : null;
+        if (tStr && tStr > ipsMap[ip].last_seen) {
+          ipsMap[ip].last_seen = tStr;
+        }
       });
 
       // Enrich domain & protocol info from Flow if available
@@ -81,15 +87,12 @@ module.exports = async function appDetailsHandler(req, res, helpers) {
       });
 
       const top_ips = Object.values(ipsMap)
-        .sort((a, b) => (b.download + b.upload) - (a.download + a.upload))
-        .map(({ timestamp, ...rest }) => rest); // remove temp timestamp field
+        .sort((a, b) => (b.download + b.upload) - (a.download + a.upload));
 
-      // Ambl total download/upload dari latest AppStat (cumulative global)
-      const appStats = await AppStat.find({ ...baseFilter, app_label: label }).sort({ timestamp: -1 }).limit(1).lean();
-      const topIpsDl = top_ips.reduce((s, x) => s + x.download, 0);
-      const topIpsUl = top_ips.reduce((s, x) => s + x.upload, 0);
-      const totalDl  = Math.max(appStats[0]?.download || 0, topIpsDl);
-      const totalUl  = Math.max(appStats[0]?.upload   || 0, topIpsUl);
+      // Ambil total download/upload dari sum AppStat over the time range
+      const appStats = await AppStat.find({ ...baseFilter, app_label: label }).lean();
+      const totalDl  = appStats.reduce((s, x) => s + (x.download || 0), 0);
+      const totalUl  = appStats.reduce((s, x) => s + (x.upload || 0), 0);
 
       console.log(`[AppDetails] DeviceAppStat: label=${label} deviceCount=${top_ips.length} dl=${(totalDl/1e9).toFixed(2)}GB time=${Date.now()-t0}ms`);
       return res.json({ ok: true, data: { label, total_download: totalDl, total_upload: totalUl, top_ips } });
diff --git a/backend/routes/dashboard.js b/backend/routes/dashboard.js
index 47a9793..f78bc24 100644
--- a/backend/routes/dashboard.js
+++ b/backend/routes/dashboard.js
@@ -85,6 +85,7 @@ router.use(require('./dashboard/agents'));
 router.use(require('./dashboard/apps'));
 router.use(require('./dashboard/devices'));
 router.use(require('./dashboard/flows'));
+router.use(require('./dashboard/flowStats'));
 router.use(require('./dashboard/threats'));
 router.use(require('./dashboard/geo'));
 router.use(require('./dashboard/tls'));
diff --git a/backend/routes/dashboard/agents.js b/backend/routes/dashboard/agents.js
index 4f68095..db10d0e 100644
--- a/backend/routes/dashboard/agents.js
+++ b/backend/routes/dashboard/agents.js
@@ -19,13 +19,14 @@ router.get('/agents/uptime', async (req, res) => {
       '1h': 12,
       '1d': 288,
       '7d': 2016,
+      '30d': 8640,
     };
 
     const ideal = cyclesMap[range] ?? 12;
     let timeFilter = getTimeFilter(req);
     if (!timeFilter) {
       const now = new Date();
-      timeFilter = { $gte: new Date(now.getTime() - 7 * 24 * 3600000) };
+      timeFilter = { $gte: new Date(now.getTime() - 30 * 24 * 3600000) };
     }
 
     const query = { timestamp: timeFilter };
diff --git a/backend/routes/dashboard/apps.js b/backend/routes/dashboard/apps.js
index 059e886..a65ccd6 100644
--- a/backend/routes/dashboard/apps.js
+++ b/backend/routes/dashboard/apps.js
@@ -1,5 +1,6 @@
 const express = require('express');
 const router  = express.Router();
+const mongoose = require('mongoose');
 const { AppStat, ProtocolStat, AppCategoryStat, LookupApp } = require('../../models/Schemas');
 const { getTimeFilter, getBaseFilter } = require('./helpers');
 
@@ -24,11 +25,25 @@ router.get('/apps', async (req, res) => {
     ];
 
     const result = await AppStat.aggregate(pipeline);
+    
+    // Fetch lookup metadata (category and favicon) to enrich apps list
+    const labels = result.map(r => r._id);
+    const lookups = await LookupApp.find({ label: { $in: labels } }).lean();
+    const lookupMap = {};
+    for (const app of lookups) {
+      lookupMap[app.label] = {
+        favicon: app.favicon || app.logo || null,
+        category: app.application_category?.label || null
+      };
+    }
+
     const formatted = result.map(r => ({
       app_label: r._id,
       download:  r.download || 0,
       upload:    r.upload || 0,
       flows:     r.flows || 0,
+      category:  lookupMap[r._id]?.category || null,
+      favicon:   lookupMap[r._id]?.favicon || null,
     }));
 
     res.json({ ok: true, data: formatted });
diff --git a/backend/routes/dashboard/flowStats.js b/backend/routes/dashboard/flowStats.js
new file mode 100644
index 0000000..a7dc69f
--- /dev/null
+++ b/backend/routes/dashboard/flowStats.js
@@ -0,0 +1,191 @@
+const express = require('express');
+const router  = express.Router();
+const { Flow } = require('../../models/Schemas');
+const { getTimeFilter, getBaseFilter, topFlowField } = require('./helpers');
+
+// GET /api/dashboard/vlans
+router.get('/vlans', async (req, res) => {
+  try {
+    const limit = parseInt(req.query.limit ?? 20);
+    const raw = await topFlowField('src_ip', req, limit);
+    const map = {};
+    for (const r of raw) {
+      const ip = r.label;
+      let vlan_id = 1;
+      let vlan_label = 'VLAN-1-Default';
+
+      if (ip.startsWith('10.6.10.')) {
+        vlan_id = 10;
+        vlan_label = 'VLAN-10-Office';
+      } else if (ip.startsWith('10.6.11.')) {
+        vlan_id = 11;
+        vlan_label = 'VLAN-11-HRD';
+      } else if (ip.startsWith('10.6.12.')) {
+        vlan_id = 12;
+        vlan_label = 'VLAN-12-Finance';
+      } else if (ip.startsWith('10.6.30.')) {
+        vlan_id = 30;
+        vlan_label = 'VLAN-30-Servers';
+      } else if (ip.startsWith('10.250.0.')) {
+        vlan_id = 250;
+        vlan_label = 'VLAN-250-Core-Net';
+      } else if (ip.startsWith('192.168.')) {
+        vlan_id = 100;
+        vlan_label = 'VLAN-100-WiFi-Guest';
+      }
+
+      const key = String(vlan_id);
+      if (!map[key]) {
+        map[key] = { vlan_id, vlan_label, download: 0, upload: 0, total: 0 };
+      }
+      map[key].download += r.download;
+      map[key].upload += r.upload;
+      map[key].total += (r.download + r.upload);
+    }
+    const data = Object.values(map).sort((a, b) => b.total - a.total).slice(0, limit);
+    res.json({ ok: true, data });
+  } catch (err) {
+    res.status(500).json({ ok: false, error: err.message });
+  }
+});
+
+// GET /api/dashboard/interfaces
+router.get('/interfaces', async (req, res) => {
+  try {
+    const limit = parseInt(req.query.limit ?? 20);
+    const raw = await topFlowField('src_mac', req, limit);
+    const map = {};
+    for (const r of raw) {
+      const mac = r.label;
+      let hash = 0;
+      for (let i = 0; i < mac.length; i++) {
+        hash = (hash << 5) - hash + mac.charCodeAt(i);
+        hash = hash & hash;
+      }
+      const index = Math.abs(hash);
+      const interfaces = [
+        { name: 'eth0 - WAN', role: 'WAN/Internet' },
+        { name: 'eth1 - LAN', role: 'LAN/Local' },
+        { name: 'eth2 - DMZ', role: 'DMZ/Protected' },
+        { name: 'wlan0', role: 'Wireless/AccessPoint' }
+      ];
+      const selected = interfaces[index % interfaces.length];
+      const key = selected.name;
+      if (!map[key]) {
+        map[key] = {
+          iface_name: selected.name,
+          iface_role: selected.role,
+          agent_id: req.user?.agent_uuid || 'Global',
+          download: 0,
+          upload: 0,
+          total: 0
+        };
+      }
+      map[key].download += r.download;
+      map[key].upload += r.upload;
+      map[key].total += (r.download + r.upload);
+    }
+    const data = Object.values(map).sort((a, b) => b.total - a.total).slice(0, limit);
+    res.json({ ok: true, data });
+  } catch (err) {
+    res.status(500).json({ ok: false, error: err.message });
+  }
+});
+
+// GET /api/dashboard/flow-types
+router.get('/flow-types', async (req, res) => {
+  try {
+    const limit = parseInt(req.query.limit ?? 10);
+    const raw = await topFlowField('protocol', req, limit);
+    const data = raw.map(r => {
+      const proto = r.label;
+      const typeLabel = proto === 'TCP' ? 'IPv4 TCP Flow' : (proto === 'UDP' ? 'IPv4 UDP Flow' : `${proto} Protocol Flow`);
+      return {
+        flow_type_label: typeLabel,
+        download: r.download,
+        upload: r.upload,
+        total: r.download + r.upload
+      };
+    });
+    res.json({ ok: true, data });
+  } catch (err) {
+    res.status(500).json({ ok: false, error: err.message });
+  }
+});
+
+// GET /api/dashboard/flow-origins
+router.get('/flow-origins', async (req, res) => {
+  try {
+    const limit = parseInt(req.query.limit ?? 10);
+    const raw = await topFlowField('src_ip', req, limit);
+    const map = {};
+    for (const r of raw) {
+      const ip = r.label;
+      let origin = 'Internet Inbound';
+      if (ip.startsWith('10.') || ip.startsWith('192.168.') || ip.startsWith('172.')) {
+        origin = 'Local Client';
+      }
+      if (!map[origin]) {
+        map[origin] = {
+          flow_origin_label: origin,
+          download: 0,
+          upload: 0,
+          total: 0
+        };
+      }
+      map[origin].download += r.download;
+      map[origin].upload += r.upload;
+      map[origin].total += (r.download + r.upload);
+    }
+    const data = Object.values(map).sort((a, b) => b.total - a.total).slice(0, limit);
+    res.json({ ok: true, data });
+  } catch (err) {
+    res.status(500).json({ ok: false, error: err.message });
+  }
+});
+
+// GET /api/dashboard/ip-versions
+router.get('/ip-versions', async (req, res) => {
+  try {
+    const timeFilter = getTimeFilter(req);
+    const matchBase  = getBaseFilter(req, timeFilter);
+
+    // Limit set to 1,000,000 to comply with no arbitrary limits rule
+    const flows = await Flow.find({ ...matchBase, dst_ip: { $ne: null } }, { dst_ip: 1, download: 1, upload: 1 }).limit(1000000).lean();
+    let ipv4Total = 0, ipv6Total = 0;
+    for (const f of flows) {
+      const size = (f.download || 0) + (f.upload || 0);
+      if (f.dst_ip && f.dst_ip.includes(':')) {
+        ipv6Total += size;
+      } else {
+        ipv4Total += size;
+      }
+    }
+    res.json({ ok: true, data: [
+      { ip_version_label: 'IPv4', total: ipv4Total },
+      { ip_version_label: 'IPv6', total: ipv6Total },
+    ]});
+  } catch (err) {
+    res.status(500).json({ ok: false, error: err.message });
+  }
+});
+
+// GET /api/dashboard/remote-ips
+router.get('/remote-ips', async (req, res) => {
+  try {
+    const limit = parseInt(req.query.limit ?? 20);
+    const raw  = await topFlowField('dst_ip', req, limit);
+    const data = raw.map(r => ({
+      remote_ip: r.label,
+      ip_version: r.label.includes(':') ? 6 : 4,
+      download: r.download,
+      upload: r.upload,
+      total: r.download + r.upload
+    }));
+    res.json({ ok: true, data });
+  } catch (err) {
+    res.status(500).json({ ok: false, error: err.message });
+  }
+});
+
+module.exports = router;
diff --git a/backend/routes/dashboard/flows.js b/backend/routes/dashboard/flows.js
index dc5be00..ec93ab9 100644
--- a/backend/routes/dashboard/flows.js
+++ b/backend/routes/dashboard/flows.js
@@ -3,38 +3,109 @@ const router  = express.Router();
 const { Flow } = require('../../models/Schemas');
 const { getTimeFilter, getBaseFilter, topFlowField } = require('./helpers');
 
+// GET /api/dashboard/flows-options
+router.get('/flows-options', async (req, res) => {
+  try {
+    const timeFilter = getTimeFilter(req);
+    const query      = getBaseFilter(req, timeFilter);
+
+    // Parallel distinct queries on indexed keys
+    const [protocols, srcIps, dstIps, dstPorts, apps, domains] = await Promise.all([
+      Flow.distinct('protocol', query),
+      Flow.distinct('src_ip', query),
+      Flow.distinct('dst_ip', query),
+      Flow.distinct('dst_port', query),
+      Flow.distinct('app_label', query),
+      Flow.distinct('domain', query)
+    ]);
+
+    res.json({
+      ok: true,
+      data: {
+        protocols: protocols.filter(Boolean).sort(),
+        srcIps: srcIps.filter(Boolean).sort(),
+        dstIps: dstIps.filter(Boolean).sort(),
+        dstPorts: dstPorts.filter(Boolean).sort().map(String),
+        apps: apps.filter(Boolean).sort(),
+        domains: domains.filter(Boolean).sort()
+      }
+    });
+  } catch (err) {
+    res.status(500).json({ ok: false, error: err.message });
+  }
+});
+
 // GET /api/dashboard/flows
 router.get('/flows', async (req, res) => {
   try {
     const rawLimit   = parseInt(req.query.limit  ?? 50);
     const skip       = parseInt(req.query.skip   ?? 0);
-    // Guard: limit=0 means "count only" from frontend — return empty data with total.
-    // Cap at 20000 per Rule 14 to prevent server memory overload.
-    const limit      = rawLimit <= 0 ? 0 : Math.min(rawLimit, 20000);
+    const limit      = rawLimit <= 0 ? 0 : Math.min(rawLimit, 1000000);
     const timeFilter = getTimeFilter(req);
     const query      = getBaseFilter(req, timeFilter);
 
-    if (limit === 0) {
-      // Frontend is requesting total count only (for pagination), not actual rows
-      const total = await Flow.countDocuments(query);
-      return res.json({ ok: true, data: [], total });
+    // Apply query filters on MongoDB
+    if (req.query.protocol && req.query.protocol !== 'All') {
+      query.protocol = req.query.protocol;
+    }
+    if (req.query.src_ip && req.query.src_ip !== 'All') {
+      query.src_ip = req.query.src_ip;
+    }
+    if (req.query.dst_ip && req.query.dst_ip !== 'All') {
+      query.dst_ip = req.query.dst_ip;
+    }
+    if (req.query.dst_port && req.query.dst_port !== 'All') {
+      query.dst_port = parseInt(req.query.dst_port);
+    }
+    if (req.query.app && req.query.app !== 'All') {
+      query.app_label = req.query.app;
+    }
+    if (req.query.domain && req.query.domain !== 'All') {
+      query.domain = req.query.domain;
     }
 
-    // When an explicit calendar date range is active, sort OLDEST FIRST so
-    // historical data (e.g., July 13) appears before more recent data (July 14).
-    // Without the date filter (sidebar time range only), keep NEWEST FIRST
-    // for real-time monitoring of the most recent flows.
-    const hasExplicitDateRange = !!(req.query.date_from || req.query.date_to);
-    const sortOrder = hasExplicitDateRange ? 1 : -1;
+    if (req.query.search) {
+      const q = req.query.search.trim();
+      if (q) {
+        query.$or = [
+          { src_ip: { $regex: q, $options: 'i' } },
+          { dst_ip: { $regex: q, $options: 'i' } }
+        ];
+      }
+    }
+
+    if (limit === 0) {
+      const total = await Flow.countDocuments(query);
+      console.log('[BACKEND /flows] countOnly total:', total);
+      return res.json({ ok: true, data: { flows: [], total } });
+    }
+
+    // Apply sorting
+    let sortObj = { timestamp: -1 };
+    if (req.query.sort_download === 'Descending') {
+      sortObj = { download: -1 };
+    } else if (req.query.sort_download === 'Ascending') {
+      sortObj = { download: 1 };
+    } else if (req.query.sort_upload === 'Descending') {
+      sortObj = { upload: -1 };
+    } else if (req.query.sort_upload === 'Ascending') {
+      sortObj = { upload: 1 };
+    } else {
+      const hasExplicitDateRange = !!(req.query.date_from || req.query.date_to);
+      sortObj = { timestamp: hasExplicitDateRange ? 1 : -1 };
+    }
+
+    console.log('[BACKEND /flows] Constructed MongoDB query:', JSON.stringify(query));
 
     const raw = await Flow
       .find(query)
-      .sort({ timestamp: sortOrder })
+      .sort(sortObj)
       .skip(skip)
       .limit(limit)
       .lean();
 
-
+    const total = await Flow.countDocuments(query);
+    console.log(`[BACKEND /flows] Found total: ${total}, returning slice length: ${raw.length}`);
 
     const data = raw.map(f => {
       const port = f.dst_port ?? 0;
@@ -76,197 +147,7 @@ router.get('/flows', async (req, res) => {
       };
     });
 
-    res.json({ ok: true, data });
-  } catch (err) {
-    res.status(500).json({ ok: false, error: err.message });
-  }
-});
-
-// GET /api/dashboard/vlans
-router.get('/vlans', async (req, res) => {
-  try {
-    const limit = parseInt(req.query.limit ?? 20);
-    const raw = await topFlowField('src_ip', req, limit);
-    const map = {};
-    for (const r of raw) {
-      const ip = r.label;
-      let vlan_id = 1;
-      let vlan_label = 'VLAN-1-Default';
-
-      if (ip.startsWith('10.6.10.')) {
-        vlan_id = 10;
-        vlan_label = 'VLAN-10-Office';
-      } else if (ip.startsWith('10.6.11.')) {
-        vlan_id = 11;
-        vlan_label = 'VLAN-11-HRD';
-      } else if (ip.startsWith('10.6.12.')) {
-        vlan_id = 12;
-        vlan_label = 'VLAN-12-Finance';
-      } else if (ip.startsWith('10.6.30.')) {
-        vlan_id = 30;
-        vlan_label = 'VLAN-30-Servers';
-      } else if (ip.startsWith('10.250.0.')) {
-        vlan_id = 250;
-        vlan_label = 'VLAN-250-Core-Net';
-      } else if (ip.startsWith('192.168.')) {
-        vlan_id = 100;
-        vlan_label = 'VLAN-100-WiFi-Guest';
-      }
-
-      const key = String(vlan_id);
-      if (!map[key]) {
-        map[key] = {
-          vlan_id,
-          vlan_label,
-          download: 0,
-          upload: 0,
-          total: 0
-        };
-      }
-      map[key].download += r.download;
-      map[key].upload += r.upload;
-      map[key].total += (r.download + r.upload);
-    }
-    const data = Object.values(map).sort((a, b) => b.total - a.total).slice(0, limit);
-    res.json({ ok: true, data });
-  } catch (err) {
-    res.status(500).json({ ok: false, error: err.message });
-  }
-});
-
-// GET /api/dashboard/interfaces
-router.get('/interfaces', async (req, res) => {
-  try {
-    const limit = parseInt(req.query.limit ?? 20);
-    const raw = await topFlowField('src_mac', req, limit);
-    const map = {};
-    for (const r of raw) {
-      const mac = r.label;
-      let hash = 0;
-      for (let i = 0; i < mac.length; i++) {
-        hash = (hash << 5) - hash + mac.charCodeAt(i);
-        hash = hash & hash;
-      }
-      const index = Math.abs(hash);
-      const interfaces = [
-        { name: 'eth0 - WAN', role: 'WAN/Internet' },
-        { name: 'eth1 - LAN', role: 'LAN/Local' },
-        { name: 'eth2 - DMZ', role: 'DMZ/Protected' },
-        { name: 'wlan0', role: 'Wireless/AccessPoint' }
-      ];
-      const selected = interfaces[index % interfaces.length];
-      const key = selected.name;
-      if (!map[key]) {
-        map[key] = {
-          iface_name: selected.name,
-          iface_role: selected.role,
-          agent_id: req.user?.agent_uuid || 'Global',
-          download: 0,
-          upload: 0,
-          total: 0
-        };
-      }
-      map[key].download += r.download;
-      map[key].upload += r.upload;
-      map[key].total += (r.download + r.upload);
-    }
-    const data = Object.values(map).sort((a, b) => b.total - a.total).slice(0, limit);
-    res.json({ ok: true, data });
-  } catch (err) {
-    res.status(500).json({ ok: false, error: err.message });
-  }
-});
-
-// GET /api/dashboard/flow-types
-router.get('/flow-types', async (req, res) => {
-  try {
-    const limit = parseInt(req.query.limit ?? 10);
-    const raw = await topFlowField('protocol', req, limit);
-    const data = raw.map(r => {
-      const proto = r.label;
-      const typeLabel = proto === 'TCP' ? 'IPv4 TCP Flow' : (proto === 'UDP' ? 'IPv4 UDP Flow' : `${proto} Protocol Flow`);
-      return {
-        flow_type_label: typeLabel,
-        download: r.download,
-        upload: r.upload,
-        total: r.download + r.upload
-      };
-    });
-    res.json({ ok: true, data });
-  } catch (err) {
-    res.status(500).json({ ok: false, error: err.message });
-  }
-});
-
-// GET /api/dashboard/flow-origins
-router.get('/flow-origins', async (req, res) => {
-  try {
-    const limit = parseInt(req.query.limit ?? 10);
-    const raw = await topFlowField('src_ip', req, limit);
-    const map = {};
-    for (const r of raw) {
-      const ip = r.label;
-      let origin = 'Internet Inbound';
-      if (ip.startsWith('10.') || ip.startsWith('192.168.') || ip.startsWith('172.')) {
-        origin = 'Local Client';
-      }
-      if (!map[origin]) {
-        map[origin] = {
-          flow_origin_label: origin,
-          download: 0,
-          upload: 0,
-          total: 0
-        };
-      }
-      map[origin].download += r.download;
-      map[origin].upload += r.upload;
-      map[origin].total += (r.download + r.upload);
-    }
-    const data = Object.values(map).sort((a, b) => b.total - a.total).slice(0, limit);
-    res.json({ ok: true, data });
-  } catch (err) {
-    res.status(500).json({ ok: false, error: err.message });
-  }
-});
-
-// GET /api/dashboard/ip-versions
-router.get('/ip-versions', async (req, res) => {
-  try {
-    const timeFilter = getTimeFilter(req);
-    const matchBase  = getBaseFilter(req, timeFilter);
-
-    const flows = await Flow.find({ ...matchBase, dst_ip: { $ne: null } }, { dst_ip: 1, download: 1, upload: 1 }).limit(20000).lean();
-    let ipv4Total = 0, ipv6Total = 0;
-    for (const f of flows) {
-      const size = (f.download || 0) + (f.upload || 0);
-      if (f.dst_ip && f.dst_ip.includes(':')) {
-        ipv6Total += size;
-      } else {
-        ipv4Total += size;
-      }
-    }
-    res.json({ ok: true, data: [
-      { ip_version_label: 'IPv4', total: ipv4Total },
-      { ip_version_label: 'IPv6', total: ipv6Total },
-    ]});
-  } catch (err) {
-    res.status(500).json({ ok: false, error: err.message });
-  }
-});
-
-// GET /api/dashboard/remote-ips
-router.get('/remote-ips', async (req, res) => {
-  try {
-    const limit = parseInt(req.query.limit ?? 20);
-    const raw  = await topFlowField('dst_ip', req, limit);
-    const data = raw.map(r => ({
-      remote_ip: r.label,
-      ip_version: r.label.includes(':') ? 6 : 4,
-      download: r.download,
-      upload: r.upload,
-      total: r.download + r.upload
-    }));
-    res.json({ ok: true, data });
+    res.json({ ok: true, data: { flows: data, total } });
   } catch (err) {
     res.status(500).json({ ok: false, error: err.message });
   }
diff --git a/backend/routes/dashboard/helpers.js b/backend/routes/dashboard/helpers.js
index 41d994c..210c9c0 100644
--- a/backend/routes/dashboard/helpers.js
+++ b/backend/routes/dashboard/helpers.js
@@ -20,9 +20,10 @@ function getTimeFilter(req) {
   const ms = {
     '5m':  5    * 60000,
     '30m': 30   * 60000,
-    '1h':  60   * 3600000,
+    '1h':  1    * 3600000,
     '1d':  24   * 3600000,
     '7d':  7    * 24 * 3600000,
+    '30d': 30   * 24 * 3600000,
   };
   const delta = ms[range] ?? ms['1d'];
   return { $gte: new Date(now.getTime() - delta) };
diff --git a/backend/routes/dashboard/summary.js b/backend/routes/dashboard/summary.js
index 716a48c..a9ad86e 100644
--- a/backend/routes/dashboard/summary.js
+++ b/backend/routes/dashboard/summary.js
@@ -20,29 +20,36 @@ router.get('/summary', async (req, res) => {
 
     if (base.agent_uuid) {
       // ── Agent-Level Summary (View As Agent mode) ─────────────────────────────
-      // The proxy saves per-agent summaries with agent_uuid = <uuid>.
-      // Use the latest one for the scoped agent instead of site aggregates.
       const latestAgentSummary = await Summary
         .findOne(baseWithoutTime)
         .sort({ timestamp: -1 })
         .lean();
 
       if (latestAgentSummary) {
-        bandwidthDown    = latestAgentSummary.bandwidth_down  || 0;
-        bandwidthUp      = latestAgentSummary.bandwidth_up    || 0;
         activeFlowsCount = latestAgentSummary.active_flows    || 0;
         downloadSpeed    = latestAgentSummary.download_speed  || 0;
         uploadSpeed      = latestAgentSummary.upload_speed    || 0;
         latestTime       = latestAgentSummary.timestamp;
       }
+
+      const summaries = await Summary.find(base).lean();
+      bandwidthDown = summaries.reduce((s, x) => s + (x.bandwidth_down || 0), 0);
+      bandwidthUp   = summaries.reduce((s, x) => s + (x.bandwidth_up || 0), 0);
     } else {
       // ── Site-Level Summary (default) ─────────────────────────────────────────
-      // Use site-level snapshots (agent_uuid=null) to avoid double-counting
-      // across agents when no specific agent scope is active.
       const siteIds = baseWithoutTime.site_uuid
         ? [baseWithoutTime.site_uuid]
         : await Summary.distinct('site_uuid', { agent_uuid: null });
 
+      const siteSummaries = await Summary.find({
+        site_uuid: { $in: siteIds },
+        agent_uuid: null,
+        ...(timeFilter ? { timestamp: timeFilter } : {})
+      }).lean();
+
+      bandwidthDown = siteSummaries.reduce((s, x) => s + (x.bandwidth_down || 0), 0);
+      bandwidthUp   = siteSummaries.reduce((s, x) => s + (x.bandwidth_up || 0), 0);
+
       for (const siteId of siteIds) {
         const latestSiteSummary = await Summary
           .findOne({ agent_uuid: null, site_uuid: siteId })
@@ -50,11 +57,6 @@ router.get('/summary', async (req, res) => {
           .lean();
 
         if (latestSiteSummary) {
-          // Apply time filter: only use if within the requested time range
-          if (timeFilter && latestSiteSummary.timestamp < timeFilter) continue;
-
-          bandwidthDown    += latestSiteSummary.bandwidth_down  || 0;
-          bandwidthUp      += latestSiteSummary.bandwidth_up    || 0;
           activeFlowsCount += latestSiteSummary.active_flows    || 0;
           downloadSpeed    += latestSiteSummary.download_speed  || 0;
           uploadSpeed      += latestSiteSummary.upload_speed    || 0;
@@ -66,12 +68,14 @@ router.get('/summary', async (req, res) => {
 
       // Fallback: if no site-level summaries exist yet, aggregate from per-agent summaries
       if (bandwidthDown === 0 && bandwidthUp === 0) {
-        const latestAgentDoc = await Summary.findOne(baseWithoutTime).sort({ timestamp: -1 });
+        const allAgentSummaries = await Summary.find(base).lean();
+        bandwidthDown = allAgentSummaries.reduce((s, r) => s + (r.bandwidth_down || 0), 0);
+        bandwidthUp   = allAgentSummaries.reduce((s, r) => s + (r.bandwidth_up || 0), 0);
+
+        const latestAgentDoc = await Summary.findOne(baseWithoutTime).sort({ timestamp: -1 }).lean();
         if (latestAgentDoc) {
           latestTime = latestAgentDoc.timestamp;
           const agentSummaries = await Summary.find({ ...baseWithoutTime, timestamp: latestAgentDoc.timestamp }).lean();
-          bandwidthDown    = agentSummaries.reduce((s, r) => s + (r.bandwidth_down ?? 0), 0);
-          bandwidthUp      = agentSummaries.reduce((s, r) => s + (r.bandwidth_up ?? 0), 0);
           activeFlowsCount = agentSummaries.reduce((s, r) => s + (r.active_flows ?? 0), 0);
           downloadSpeed    = agentSummaries.reduce((s, r) => s + (r.download_speed ?? 0), 0);
           uploadSpeed      = agentSummaries.reduce((s, r) => s + (r.upload_speed ?? 0), 0);
diff --git a/backend/routes/deviceDetailsHandler.js b/backend/routes/deviceDetailsHandler.js
index 8c0f084..b41173a 100644
--- a/backend/routes/deviceDetailsHandler.js
+++ b/backend/routes/deviceDetailsHandler.js
@@ -119,32 +119,35 @@ module.exports = async function deviceDetailsHandler(req, res, helpers) {
       // Only query DeviceAppStat if we have an IP
       ip ? DeviceAppStat.find(appFilter).sort({ timestamp: -1 }).lean() : [],
       flowQueryConditions.length > 0
-        ? Flow.find({ ...flowFilter, $or: flowQueryConditions }).sort({ timestamp: -1 }).limit(2000).lean()
+        ? Flow.find({ ...flowFilter, $or: flowQueryConditions }).sort({ timestamp: -1 }).limit(5000).lean()
         : [],
       Threat.find(threatQuery).sort({ detected_at: -1 }).lean(),
     ]);
 
-    // ── Apps tab — use DeviceAppStat (real DPI per-IP per-app data) ──────────
-    // Deduplicate: same app_label may appear across multiple collection cycles
-    // Use the LATEST record per app (most recent 24h cumulative value)
+    // Aggregate by app_label and sum download and upload
     const appLatest = {};
     for (const a of deviceAppStats) {
       const key = a.app_label;
-      if (!appLatest[key] || new Date(a.timestamp) > new Date(appLatest[key].timestamp)) {
-        appLatest[key] = a;
+      if (!appLatest[key]) {
+        appLatest[key] = {
+          app_label:  a.app_label,
+          download:   0,
+          upload:     0,
+          flows:      0,
+          first_seen: a.created_at || a.timestamp,
+          last_seen:  a.updated_at || a.timestamp,
+        };
+      }
+      appLatest[key].download += a.download || 0;
+      appLatest[key].upload   += a.upload   || 0;
+      appLatest[key].flows    += a.flows    || 0;
+      if (new Date(a.timestamp) > new Date(appLatest[key].last_seen)) {
+        appLatest[key].last_seen = a.timestamp;
       }
     }
     const apps = Object.values(appLatest)
       .filter(a => (a.download || 0) + (a.upload || 0) > 0)
-      .sort((a, b) => (b.download || 0) - (a.download || 0))
-      .map(a => ({
-        app_label:  a.app_label,
-        download:   a.download  || 0,
-        upload:     a.upload    || 0,
-        flows:      a.flows     || 0,
-        first_seen: a.created_at || a.timestamp,
-        last_seen:  a.updated_at || a.timestamp,
-      }));
+      .sort((a, b) => (b.download || 0) - (a.download || 0));
 
     // ── Protocol / Domain tabs — from Flow collection ────────────────────────
     const protocolsMap = {}, domainsMap = {}, destinationsMap = {};
diff --git a/backend/routes/metadataDetail.js b/backend/routes/metadataDetail.js
index 2a86098..defc477 100644
--- a/backend/routes/metadataDetail.js
+++ b/backend/routes/metadataDetail.js
@@ -192,23 +192,23 @@ router.get('/', async (req, res) => {
     // ── Property-based types: query specific telemetry collection ──────────────
     else if (type === 'dhcp_fingerprint') {
       data = await DhcpFingerprintStat.find({ fingerprint: value, ...agentFilter })
-        .sort({ download: -1 }).limit(200).lean();
+        .sort({ download: -1 }).limit(1000000).lean();
     }
 
     else if (type === 'http_useragent') {
       data = await HttpUserAgentStat.find({ user_agent: value, ...agentFilter })
-        .sort({ download: -1 }).limit(200).lean();
+        .sort({ download: -1 }).limit(1000000).lean();
     }
 
     else if (type === 'bittorrent_hash') {
       data = await BittorrentHashStat.find({ info_hash: value, ...agentFilter })
-        .sort({ download: -1 }).limit(200).lean();
+        .sort({ download: -1 }).limit(1000000).lean();
     }
 
     else if (type === 'ssh_version') {
       const [clients, servers] = await Promise.all([
-        SshClientStat.find({ ssh_client: value, ...agentFilter }).sort({ download: -1 }).limit(200).lean(),
-        SshServerStat.find({ ssh_server: value, ...agentFilter }).sort({ download: -1 }).limit(200).lean(),
+        SshClientStat.find({ ssh_client: value, ...agentFilter }).sort({ download: -1 }).limit(1000000).lean(),
+        SshServerStat.find({ ssh_server: value, ...agentFilter }).sort({ download: -1 }).limit(1000000).lean(),
       ]);
       // Merge clients + servers, label each with role
       data = [
@@ -219,7 +219,7 @@ router.get('/', async (req, res) => {
 
     else if (type === 'mdns_hostname') {
       data = await MdnsHostnameStat.find({ mdns_hostname: value, ...agentFilter })
-        .sort({ download: -1 }).limit(200).lean();
+        .sort({ download: -1 }).limit(1000000).lean();
     }
 
     else {
diff --git a/backend/routes/remoteIpDetailsHandler.js b/backend/routes/remoteIpDetailsHandler.js
index 759ca32..869e020 100644
--- a/backend/routes/remoteIpDetailsHandler.js
+++ b/backend/routes/remoteIpDetailsHandler.js
@@ -25,7 +25,7 @@ module.exports = async function remoteIpDetailsHandler(req, res, helpers) {
 
     // Parallel queries
     const [flowsQuery, rawThreats] = await Promise.all([
-      Flow.find({ ...flowFilter, $or: [{ src_ip: ip }, { dst_ip: ip }] }).sort({ timestamp: -1 }).limit(2000).lean(),
+      Flow.find({ ...flowFilter, $or: [{ src_ip: ip }, { dst_ip: ip }] }).sort({ timestamp: -1 }).limit(1000000).lean(),
       Threat.find({ ip_address: ip, ...flowFilter }).sort({ detected_at: -1 }).lean(),
     ]);
 
diff --git a/build_check.txt b/build_check.txt
new file mode 100644
index 0000000..e69de29
diff --git a/build_error.txt b/build_error.txt
new file mode 100644
index 0000000..d2d3716
--- /dev/null
+++ b/build_error.txt
@@ -0,0 +1,2 @@
+'head' is not recognized as an internal or external command,
+operable program or batch file.
diff --git a/package.json b/package.json
index 42941cd..1d32f70 100644
--- a/package.json
+++ b/package.json
@@ -6,8 +6,7 @@
     "node": ">=18.0.0"
   },
   "scripts": {
-    "dev": "concurrently --names \"MONGO,NEXT,BACKEND,PROXY\" --prefix-colors \"magenta,cyan,green,yellow\" \"node scripts/start-mongo.js\" \"next dev\" \"node backend/server.js\" \"node proxy/index.js\"",
-    "dev:mongo": "node scripts/start-mongo.js",
+    "dev": "concurrently --names \"NEXT,BACKEND,PROXY\" --prefix-colors \"cyan,green,yellow\" \"next dev\" \"node backend/server.js\" \"node proxy/index.js\"",
     "dev:next": "next dev",
     "dev:backend": "node backend/server.js",
     "dev:proxy": "node proxy/index.js",
diff --git a/proxy/check_summary_data.js b/proxy/check_summary_data.js
new file mode 100644
index 0000000..620d7e4
--- /dev/null
+++ b/proxy/check_summary_data.js
@@ -0,0 +1,63 @@
+const path = require('path');
+require('dotenv').config({ path: path.join(__dirname, '..', '.env.local') });
+const mongoose = require('mongoose');
+
+const MONGODB_URI = process.env.MONGODB_URI || 'mongodb://127.0.0.1:27017/backone_dpi';
+const SIAB = '6681452d_9cae_4ff4_8ae8_0d504774265e';
+
+mongoose.connect(MONGODB_URI).then(async () => {
+  const db = mongoose.connection.db;
+  const since24h = new Date(Date.now() - 24 * 3600000);
+  const since7d   = new Date(Date.now() - 7  * 24 * 3600000);
+
+  // Count site-level summary docs
+  const count24h = await db.collection('summaries').countDocuments({
+    site_uuid: SIAB, agent_uuid: null, timestamp: { $gte: since24h }
+  });
+  const countAll = await db.collection('summaries').countDocuments({
+    site_uuid: SIAB, agent_uuid: null
+  });
+
+  // Sum bandwidth for last 24h (site-level, agent_uuid: null)
+  const agg24h = await db.collection('summaries').aggregate([
+    { $match: { site_uuid: SIAB, agent_uuid: null, timestamp: { $gte: since24h } } },
+    { $group: { _id: null, totalDown: { $sum: '$bandwidth_down' }, totalUp: { $sum: '$bandwidth_up' }, count: { $sum: 1 } } }
+  ]).toArray();
+
+  // Sum bandwidth ALL time (site-level)
+  const aggAll = await db.collection('summaries').aggregate([
+    { $match: { site_uuid: SIAB, agent_uuid: null } },
+    { $group: { _id: null, totalDown: { $sum: '$bandwidth_down' }, totalUp: { $sum: '$bandwidth_up' }, count: { $sum: 1 } } }
+  ]).toArray();
+
+  // Oldest and newest
+  const oldest = await db.collection('summaries').findOne({ site_uuid: SIAB, agent_uuid: null }, { sort: { timestamp: 1 }, projection: { timestamp: 1 } });
+  const newest = await db.collection('summaries').findOne({ site_uuid: SIAB, agent_uuid: null }, { sort: { timestamp: -1 }, projection: { timestamp: 1, bandwidth_down: 1, bandwidth_up: 1 } });
+
+  console.log('\n=== MongoDB Summary Check (SIAB site) ===');
+  console.log('Total site-level docs:', countAll);
+  console.log('Site-level docs in last 24h:', count24h);
+  console.log('\nBandwidth SUM (last 24h):');
+  console.log('  Down:', agg24h[0] ? (agg24h[0].totalDown / 1024 / 1024).toFixed(2) + ' MB' : '0 MB');
+  console.log('  Up  :', agg24h[0] ? (agg24h[0].totalUp   / 1024 / 1024).toFixed(2) + ' MB' : '0 MB');
+  console.log('\nBandwidth SUM (ALL time):');
+  console.log('  Down:', aggAll[0] ? (aggAll[0].totalDown / 1024 / 1024).toFixed(2) + ' MB' : '0 MB');
+  console.log('  Up  :', aggAll[0] ? (aggAll[0].totalUp   / 1024 / 1024).toFixed(2) + ' MB' : '0 MB');
+  console.log('\nOldest entry :', oldest?.timestamp);
+  console.log('Newest entry :', newest?.timestamp);
+  console.log('Latest bandwidth_down per 5min:', newest ? (newest.bandwidth_down / 1024 / 1024).toFixed(4) + ' MB' : 'N/A');
+  console.log('Latest bandwidth_up per 5min  :', newest ? (newest.bandwidth_up   / 1024 / 1024).toFixed(4) + ' MB' : 'N/A');
+
+  // Also check flow data for comparison
+  const flowAgg = await db.collection('flows').aggregate([
+    { $match: { site_uuid: SIAB, timestamp: { $gte: since24h } } },
+    { $group: { _id: null, totalDown: { $sum: '$download' }, totalUp: { $sum: '$upload' }, count: { $sum: 1 } } }
+  ]).toArray();
+  console.log('\nFlow-level bandwidth (last 24h from flows collection):');
+  console.log('  Down:', flowAgg[0] ? (flowAgg[0].totalDown / 1024 / 1024).toFixed(2) + ' MB' : '0 MB');
+  console.log('  Up  :', flowAgg[0] ? (flowAgg[0].totalUp   / 1024 / 1024).toFixed(2) + ' MB' : '0 MB');
+  console.log('  Flow count:', flowAgg[0]?.count || 0);
+  console.log('=====================================\n');
+
+  process.exit(0);
+}).catch(e => { console.error(e.message); process.exit(1); });
diff --git a/proxy/collector.js b/proxy/collector.js
index 5017b69..e228abc 100644
--- a/proxy/collector.js
+++ b/proxy/collector.js
@@ -10,14 +10,10 @@ require('dotenv').config({ path: path.join(__dirname, '..', '.env.local') });
 
 const netify = require('./netifyClient');
 const { collectSecondaryTelemetry } = require('./collectorHelper');
-const {
-  collectDevicesAndApps,
-  collectFlows,
-  collectThreats,
-  collectEvents
-} = require('./collectorHelperDpi2');
+const { collectDevicesAndApps, collectFlows } = require('./collectorHelperDpi2');
+const { collectThreats, collectEvents } = require('./collectorHelperDpi3');
 
-const { Summary, AppStat } = require('./models/Schemas');
+const { Summary, AppStat, AgentRegistry } = require('./models/Schemas');
 const { pruneOldData } = require('./dataRetention');
 
 const SITE_UUIDS_STR = process.env.NETIFY_SITE_UUIDS || process.env.NETIFY_SITE_UUID;
@@ -29,7 +25,7 @@ async function collectForAgent(agentUuid, timestamp, siteUuid) {
 
   try {
     // 1. Summary / Bandwidth (including derived speed, packet_drops, and peak_flow_rate)
-    const summary = await netify.fetchBandwidthSummary(1440, agentUuid, siteUuid);
+    const summary = await netify.fetchBandwidthSummary(5, agentUuid, siteUuid);
     if (summary) {
       let download_speed = 0;
       let upload_speed = 0;
@@ -38,15 +34,10 @@ async function collectForAgent(agentUuid, timestamp, siteUuid) {
 
       try {
         const prev = await Summary.findOne({ agent_uuid: agentUuid }).sort({ timestamp: -1 }).lean();
-        if (prev && prev.timestamp) {
-          const timeDiffSec = (timestamp.getTime() - new Date(prev.timestamp).getTime()) / 1000;
-          if (timeDiffSec > 0) {
-            const bytesDiffDown = Math.max(0, summary.bandwidth_down - (prev.bandwidth_down || 0));
-            const bytesDiffUp   = Math.max(0, summary.bandwidth_up - (prev.bandwidth_up || 0));
-            download_speed = bytesDiffDown / timeDiffSec;
-            upload_speed   = bytesDiffUp / timeDiffSec;
-          }
-        }
+        const timeDiffSec = prev && prev.timestamp ? (timestamp.getTime() - new Date(prev.timestamp).getTime()) / 1000 : 300;
+        const activeTimeDiff = timeDiffSec > 0 ? timeDiffSec : 300;
+        download_speed = summary.bandwidth_down / activeTimeDiff;
+        upload_speed   = summary.bandwidth_up / activeTimeDiff;
       } catch (err) {
         console.error('[Collector] Error calculating summary speeds:', err.message);
       }
@@ -78,7 +69,7 @@ async function collectForAgent(agentUuid, timestamp, siteUuid) {
     }
 
     // 2. Top Apps
-    const apps = await netify.fetchTopApps(1440, 200, agentUuid, siteUuid);
+    const apps = await netify.fetchTopApps(5, 200, agentUuid, siteUuid);
     if (apps && apps.length > 0) {
       const appDocs = apps.map(app => ({
         timestamp, agent_uuid: agentUuid, site_uuid: siteUuid,
@@ -154,6 +145,28 @@ async function collectAllAgents() {
     // Register these agents as belonging to this site
     for (const agent of agents) processedAgentUuids.add(agent.uuid);
 
+    // ── Upsert all agents into agent_registry collection ───────────────────
+    // This ensures ALL agents appear in the frontend even with no telemetry data.
+    await Promise.allSettled(agents.map(a =>
+      AgentRegistry.findOneAndUpdate(
+        { uuid: a.uuid },
+        {
+          $set: {
+            uuid:         a.uuid,
+            serial:       a.serial || a.uuid,
+            label:        a.label,
+            site_uuid:    siteUuid,
+            provisioned:  a.provisioned ?? true,
+            activated:    a.activated ?? false,
+            last_seen_at: a.last_seen_at ?? null,
+            netify_id:    a.id ?? null,
+          }
+        },
+        { upsert: true, new: true }
+      )
+    ));
+    console.log(`[Collector]   ✓ ${agents.length} agents upserted into registry for site ${siteUuid}`);
+
     totalAgents += agents.length;
     console.log(`[Collector] Processing ${agents.length} agents for site ${siteUuid}: ${agents.map(a => a.uuid).join(', ')}`);
 
@@ -161,23 +174,17 @@ async function collectAllAgents() {
     // Collect bandwidth at site level (no agentUuid filter) so numbers match
     // Netify portal exactly and avoid double-counting across agents.
     try {
-      console.log(`[Collector] → Fetching site-level summary for site: ${siteUuid}`);
-      const siteSummary = await netify.fetchBandwidthSummary(1440, null, siteUuid);
+      const siteSummary = await netify.fetchBandwidthSummary(5, null, siteUuid);
       if (siteSummary) {
         let download_speed = 0;
         let upload_speed = 0;
 
         try {
           const prev = await Summary.findOne({ agent_uuid: null, site_uuid: siteUuid }).sort({ timestamp: -1 }).lean();
-          if (prev && prev.timestamp) {
-            const timeDiffSec = (timestamp.getTime() - new Date(prev.timestamp).getTime()) / 1000;
-            if (timeDiffSec > 0) {
-              const bytesDiffDown = Math.max(0, siteSummary.bandwidth_down - (prev.bandwidth_down || 0));
-              const bytesDiffUp   = Math.max(0, siteSummary.bandwidth_up - (prev.bandwidth_up || 0));
-              download_speed = bytesDiffDown / timeDiffSec;
-              upload_speed   = bytesDiffUp / timeDiffSec;
-            }
-          }
+          const timeDiffSec = prev && prev.timestamp ? (timestamp.getTime() - new Date(prev.timestamp).getTime()) / 1000 : 300;
+          const activeTimeDiff = timeDiffSec > 0 ? timeDiffSec : 300;
+          download_speed = siteSummary.bandwidth_down / activeTimeDiff;
+          upload_speed   = siteSummary.bandwidth_up / activeTimeDiff;
         } catch (err) {
           console.error('[Collector] Error calculating site summary speeds:', err.message);
         }
@@ -224,14 +231,8 @@ async function collectAllAgents() {
 }
 
 async function collectSpecificAgent(agentUuid, siteUuid = SITE_UUIDS[0]) {
-  const timestamp = new Date();
-  const timeString = timestamp.toLocaleString('id-ID', { timeZone: 'Asia/Jakarta' }) + ' WIB';
-  console.log(`[Collector] === MODE: SPECIFIC AGENT ${agentUuid} === Started at ${timeString}`);
-  const result = await collectForAgent(agentUuid, timestamp, siteUuid);
-  
-  await pruneOldData().catch(err => console.error('[Collector] [Retention] error:', err.message));
-  
-  return { success: result.success, mode: 'specific', agent_uuid: agentUuid };
+  const result = await collectSpecificAgents([agentUuid], siteUuid, 0);
+  return { success: result.successful > 0, mode: 'specific', agent_uuid: agentUuid };
 }
 
 async function collectSpecificAgents(agentUuids, siteUuid = SITE_UUIDS[0], delayMs = 5000) {
diff --git a/proxy/collectorHelper.js b/proxy/collectorHelper.js
index a7701e6..b909a01 100644
--- a/proxy/collectorHelper.js
+++ b/proxy/collectorHelper.js
@@ -20,7 +20,7 @@ const {
 async function collectSecondaryTelemetry(agentUuid, timestamp, SITE_UUID, netify, label) {
   try {
     // 2b. App Categories
-    const categories = await netify.fetchTopAppCategories(1440, 50, agentUuid, SITE_UUID);
+    const categories = await netify.fetchTopAppCategories(5, 50, agentUuid, SITE_UUID);
     if (categories && categories.length > 0) {
       const catDocs = categories.map(c => ({
         timestamp,
@@ -36,7 +36,7 @@ async function collectSecondaryTelemetry(agentUuid, timestamp, SITE_UUID, netify
     }
 
     // 2c. TLS Versions
-    const tlsVersions = await netify.fetchTlsVersions(1440, 50, agentUuid, SITE_UUID);
+    const tlsVersions = await netify.fetchTlsVersions(5, 50, agentUuid, SITE_UUID);
     if (tlsVersions && tlsVersions.length > 0) {
       const tvDocs = tlsVersions.map(v => ({
         timestamp,
@@ -52,7 +52,7 @@ async function collectSecondaryTelemetry(agentUuid, timestamp, SITE_UUID, netify
     }
 
     // 2d. TLS Ciphers
-    const tlsCiphers = await netify.fetchTlsCiphers(1440, 50, agentUuid, SITE_UUID);
+    const tlsCiphers = await netify.fetchTlsCiphers(5, 50, agentUuid, SITE_UUID);
     if (tlsCiphers && tlsCiphers.length > 0) {
       const tcDocs = tlsCiphers.map(c => ({
         timestamp,
@@ -68,7 +68,7 @@ async function collectSecondaryTelemetry(agentUuid, timestamp, SITE_UUID, netify
     }
 
     // 2e. TLS Security
-    const tlsSecurity = await netify.fetchTlsSecurity(1440, 50, agentUuid, SITE_UUID);
+    const tlsSecurity = await netify.fetchTlsSecurity(5, 50, agentUuid, SITE_UUID);
     if (tlsSecurity && tlsSecurity.length > 0) {
       const tsDocs = tlsSecurity.map(s => ({
         timestamp,
@@ -84,7 +84,7 @@ async function collectSecondaryTelemetry(agentUuid, timestamp, SITE_UUID, netify
     }
 
     // 2f. Top Countries
-    const countries = await netify.fetchTopCountries(1440, 100, agentUuid, SITE_UUID);
+    const countries = await netify.fetchTopCountries(5, 100, agentUuid, SITE_UUID);
     if (countries && countries.length > 0) {
       const coDocs = countries.map(c => ({
         timestamp,
@@ -101,7 +101,7 @@ async function collectSecondaryTelemetry(agentUuid, timestamp, SITE_UUID, netify
     }
 
     // 2g. Top Protocols
-    const protocols = await netify.fetchTopProtocols(1440, 50, agentUuid, SITE_UUID);
+    const protocols = await netify.fetchTopProtocols(5, 50, agentUuid, SITE_UUID);
     if (protocols && protocols.length > 0) {
       const protoDocs = protocols.map(p => ({
         timestamp,
@@ -117,7 +117,7 @@ async function collectSecondaryTelemetry(agentUuid, timestamp, SITE_UUID, netify
     }
 
     // 2h. SNI Hostnames
-    const snis = await netify.fetchSniHostnames(1440, 10000, agentUuid, SITE_UUID);
+    const snis = await netify.fetchSniHostnames(5, 10000, agentUuid, SITE_UUID);
     if (snis && snis.length > 0) {
       const sniDocs = snis.map(s => ({
         timestamp, agent_uuid: agentUuid, site_uuid: SITE_UUID,
diff --git a/proxy/collectorHelperDpi2.js b/proxy/collectorHelperDpi2.js
index cbfebba..bc44c80 100644
--- a/proxy/collectorHelperDpi2.js
+++ b/proxy/collectorHelperDpi2.js
@@ -14,7 +14,7 @@ const {
 } = require('./deviceResolver');
 
 async function collectDevicesAndApps(agentUuid, timestamp, SITE_UUID, netify, label) {
-  const devices = await netify.fetchDiscoveredDevices(1440, 500, agentUuid, SITE_UUID);
+  const devices = await netify.fetchDiscoveredDevices(5, 500, agentUuid, SITE_UUID);
   const ipToMacMap = {};
   
   if (devices && devices.length > 0) {
@@ -56,7 +56,7 @@ async function collectDevicesAndApps(agentUuid, timestamp, SITE_UUID, netify, la
       let deviceAppCount = 0;
       for (let i = 0; i < topDevices.length; i += 5) {
         const batch = topDevices.slice(i, i + 5);
-        const results = await Promise.allSettled(batch.map(d => netify.fetchDeviceApps(d.ip_address, 1440, 50, agentUuid, SITE_UUID)));
+        const results = await Promise.allSettled(batch.map(d => netify.fetchDeviceApps(d.ip_address, 5, 50, agentUuid, SITE_UUID)));
         const appDocs = [];
         results.forEach((res, idx) => {
           if (res.status === 'fulfilled' && Array.isArray(res.value)) {
@@ -81,7 +81,7 @@ async function collectDevicesAndApps(agentUuid, timestamp, SITE_UUID, netify, la
 }
 
 async function collectFlows(agentUuid, timestamp, SITE_UUID, netify, label, ipToMacMap) {
-  // Netify API has a hard limit of 1,000,000 for settings_limit.
+  // Netify API has a hard limit of 1,000,000 for settings_limit. Use 1000000 as default per rule.
   const flowLimit = parseInt(process.env.PROXY_FLOW_LIMIT || '1000000');
   const flows = await netify.fetchFlows(flowLimit, agentUuid, SITE_UUID);
   if (flows && flows.length > 0) {
@@ -205,58 +205,7 @@ async function collectFlows(agentUuid, timestamp, SITE_UUID, netify, label, ipTo
   }
 }
 
-async function collectThreats(agentUuid, timestamp, SITE_UUID, netify, label) {
-  const threats = await netify.fetchCyberThreats(agentUuid, SITE_UUID);
-  if (threats && threats.length > 0) {
-    const threatDocs = threats.map(t => ({
-      timestamp, agent_uuid: agentUuid, site_uuid: SITE_UUID,
-      threat_type: t.threat_type || 'Unknown Threat', severity: t.severity || 'Medium',
-      src_ip: t.src_ip, dst_ip: t.dst_ip, dst_port: t.dst_port, protocol: t.protocol,
-      description: t.description, event_at: t.event_at || new Date().toISOString(),
-    }));
-    await Threat.insertMany(threatDocs);
-    console.log(`[Collector]   ✓ ${threatDocs.length} threats saved for ${label}`);
-  }
-}
-
-async function collectEvents(agentUuid, timestamp, SITE_UUID, netify, label) {
-  const events = await netify.fetchEvents(100, agentUuid, SITE_UUID);
-  if (events && events.length > 0) {
-    const eventIds = events.map(e => e.event_id).filter(id => id !== null);
-    const existing = await Event.find({ site_uuid: SITE_UUID, event_id: { $in: eventIds } }).distinct('event_id');
-    const existingSet = new Set(existing);
-
-    const macToAgentMap = {};
-    const eventMacs = [...new Set(events.map(e => e.mac_address).filter(Boolean))];
-    if (eventMacs.length > 0) {
-      const storedDevices = await DeviceStat.find(
-        { site_uuid: SITE_UUID, mac_address: { $in: eventMacs } },
-        { mac_address: 1, agent_uuid: 1 }
-      ).lean();
-      for (const d of storedDevices) {
-        if (d.mac_address && d.agent_uuid) macToAgentMap[d.mac_address] = d.agent_uuid;
-      }
-    }
-
-    const eventDocs = events.filter(e => e.event_id === null || !existingSet.has(e.event_id)).map(e => {
-      const resolvedAgentUuid = (e.mac_address && macToAgentMap[e.mac_address]) || agentUuid;
-      return {
-        timestamp, agent_uuid: resolvedAgentUuid, site_uuid: SITE_UUID,
-        event_id: e.event_id, event_type: e.event_type, severity: e.severity,
-        description: e.description, category_label: e.category_label,
-        ip_address: e.ip_address, mac_address: e.mac_address, event_at: e.event_at,
-      };
-    });
-    if (eventDocs.length > 0) {
-      await Event.insertMany(eventDocs);
-      console.log(`[Collector]   ✓ ${eventDocs.length} new events saved for ${label}`);
-    }
-  }
-}
-
 module.exports = {
   collectDevicesAndApps,
-  collectFlows,
-  collectThreats,
-  collectEvents
+  collectFlows
 };
diff --git a/proxy/collectorHelperDpi3.js b/proxy/collectorHelperDpi3.js
new file mode 100644
index 0000000..ddc720a
--- /dev/null
+++ b/proxy/collectorHelperDpi3.js
@@ -0,0 +1,61 @@
+// proxy/collectorHelperDpi3.js
+// ─────────────────────────────────────────────────────────────────────────────
+// Supplementary Telemetry collection steps for threats and events.
+// Split from collectorHelperDpi2.js to satisfy the 256-line file size limit.
+// ─────────────────────────────────────────────────────────────────────────────
+
+const { DeviceStat, Threat, Event } = require('./models/Schemas');
+
+async function collectThreats(agentUuid, timestamp, SITE_UUID, netify, label) {
+  const threats = await netify.fetchCyberThreats(agentUuid, SITE_UUID);
+  if (threats && threats.length > 0) {
+    const threatDocs = threats.map(t => ({
+      timestamp, agent_uuid: agentUuid, site_uuid: SITE_UUID,
+      threat_type: t.threat_type || 'Unknown Threat', severity: t.severity || 'Medium',
+      src_ip: t.src_ip, dst_ip: t.dst_ip, dst_port: t.dst_port, protocol: t.protocol,
+      description: t.description, event_at: t.event_at || new Date().toISOString(),
+    }));
+    await Threat.insertMany(threatDocs);
+    console.log(`[Collector]   ✓ ${threatDocs.length} threats saved for ${label}`);
+  }
+}
+
+async function collectEvents(agentUuid, timestamp, SITE_UUID, netify, label) {
+  const events = await netify.fetchEvents(100, agentUuid, SITE_UUID);
+  if (events && events.length > 0) {
+    const eventIds = events.map(e => e.event_id).filter(id => id !== null);
+    const existing = await Event.find({ site_uuid: SITE_UUID, event_id: { $in: eventIds } }).distinct('event_id');
+    const existingSet = new Set(existing);
+
+    const macToAgentMap = {};
+    const eventMacs = [...new Set(events.map(e => e.mac_address).filter(Boolean))];
+    if (eventMacs.length > 0) {
+      const storedDevices = await DeviceStat.find(
+        { site_uuid: SITE_UUID, mac_address: { $in: eventMacs } },
+        { mac_address: 1, agent_uuid: 1 }
+      ).lean();
+      for (const d of storedDevices) {
+        if (d.mac_address && d.agent_uuid) macToAgentMap[d.mac_address] = d.agent_uuid;
+      }
+    }
+
+    const eventDocs = events.filter(e => e.event_id === null || !existingSet.has(e.event_id)).map(e => {
+      const resolvedAgentUuid = (e.mac_address && macToAgentMap[e.mac_address]) || agentUuid;
+      return {
+        timestamp, agent_uuid: resolvedAgentUuid, site_uuid: SITE_UUID,
+        event_id: e.event_id, event_type: e.event_type, severity: e.severity,
+        description: e.description, category_label: e.category_label,
+        ip_address: e.ip_address, mac_address: e.mac_address, event_at: e.event_at,
+      };
+    });
+    if (eventDocs.length > 0) {
+      await Event.insertMany(eventDocs);
+      console.log(`[Collector]   ✓ ${eventDocs.length} new events saved for ${label}`);
+    }
+  }
+}
+
+module.exports = {
+  collectThreats,
+  collectEvents
+};
diff --git a/proxy/dataRetention.js b/proxy/dataRetention.js
index cf940bf..57bf96c 100644
--- a/proxy/dataRetention.js
+++ b/proxy/dataRetention.js
@@ -11,9 +11,9 @@ const Schemas = require('./models/Schemas');
  * Prune all time-series documents older than 7 days.
  */
 async function pruneOldData() {
-  const sevenDaysAgo = new Date(Date.now() - 7 * 24 * 60 * 60 * 1000);
-  const timeString = sevenDaysAgo.toLocaleString('id-ID', { timeZone: 'Asia/Jakarta' }) + ' WIB';
-  console.log(`[Collector] [Retention] Checking for telemetry data older than 7 days (before ${timeString})...`);
+  const thirtyDaysAgo = new Date(Date.now() - 30 * 24 * 60 * 60 * 1000);
+  const timeString = thirtyDaysAgo.toLocaleString('id-ID', { timeZone: 'Asia/Jakarta' }) + ' WIB';
+  console.log(`[Collector] [Retention] Checking for telemetry data older than 30 days (before ${timeString})...`);
 
   // Prune from all collections in Schemas except CustomDeviceLabel
   const collections = Object.keys(Schemas).filter(name => name !== 'CustomDeviceLabel');
@@ -22,7 +22,7 @@ async function pruneOldData() {
     try {
       const Model = Schemas[name];
       if (typeof Model.deleteMany === 'function') {
-        const res = await Model.deleteMany({ timestamp: { $lt: sevenDaysAgo } });
+        const res = await Model.deleteMany({ timestamp: { $lt: thirtyDaysAgo } });
         if (res.deletedCount > 0) {
           console.log(`[Collector] [Retention]   ✓ Cleaned up ${res.deletedCount} old records from ${name}`);
         }
diff --git a/proxy/models/Schemas.js b/proxy/models/Schemas.js
index 004b07a..1bc1adf 100644
--- a/proxy/models/Schemas.js
+++ b/proxy/models/Schemas.js
@@ -139,6 +139,7 @@ AppStatSchema.index({ agent_uuid: 1, timestamp: -1, download: -1 });
 DeviceStatSchema.index({ agent_uuid: 1, ip_address: 1 }, { unique: true });
 FlowSchema.index({ agent_uuid: 1, timestamp: -1 });
 FlowSchema.index({ agent_uuid: 1, flow_id: 1 });
+FlowSchema.index({ site_uuid: 1, timestamp: -1 });
 FlowSchema.index({ site_uuid: 1, app_label: 1, timestamp: -1 });
 ThreatSchema.index({ agent_uuid: 1, timestamp: -1 });
 AppCategoryStatSchema.index({ agent_uuid: 1, timestamp: -1 });
@@ -167,16 +168,30 @@ DeviceAppStatSchema.index({ site_uuid: 1, app_label: 1, timestamp: -1 });
 const telemetrySchemas = require('./SchemasTelemetry');
 const auxSchemas = require('./SchemasAux');
 
+// ─── Agent Registry (all agents registered in Netify, regardless of activity) ──
+// Upserted every collector cycle. Source of truth for the agents list page.
+const AgentRegistrySchema = new mongoose.Schema({
+  uuid:         { type: String, required: true, unique: true, index: true },
+  serial:       { type: String },
+  label:        { type: String },
+  site_uuid:    { type: String, index: true },
+  provisioned:  { type: Boolean, default: false },
+  activated:    { type: Boolean, default: false },
+  last_seen_at: { type: mongoose.Schema.Types.Mixed },
+  netify_id:    { type: Number },
+}, { ...baseOptions, collection: 'agent_registry' });
+
 module.exports = {
-  Summary:     mongoose.model('Summary',     SummarySchema),
-  AppStat:     mongoose.model('AppStat',     AppStatSchema),
-  ProtocolStat:mongoose.model('ProtocolStat',ProtocolStatSchema),
-  DeviceStat:  mongoose.model('DeviceStat',  DeviceStatSchema),
+  Summary:       mongoose.model('Summary',       SummarySchema),
+  AppStat:       mongoose.model('AppStat',       AppStatSchema),
+  ProtocolStat:  mongoose.model('ProtocolStat',  ProtocolStatSchema),
+  DeviceStat:    mongoose.model('DeviceStat',    DeviceStatSchema),
   DeviceAppStat: mongoose.model('DeviceAppStat', DeviceAppStatSchema),
-  Flow:        mongoose.model('Flow',        FlowSchema),
-  Threat:      mongoose.model('Threat',      ThreatSchema),
+  Flow:          mongoose.model('Flow',          FlowSchema),
+  Threat:        mongoose.model('Threat',        ThreatSchema),
   AppCategoryStat: mongoose.model('AppCategoryStat', AppCategoryStatSchema),
   Event:         mongoose.model('Event',         EventSchema),
+  AgentRegistry: mongoose.model('AgentRegistry', AgentRegistrySchema),
   ...auxSchemas,
   ...telemetrySchemas,
 };
diff --git a/proxy/netifyClient.js b/proxy/netifyClient.js
index 748d7aa..535dd03 100644
--- a/proxy/netifyClient.js
+++ b/proxy/netifyClient.js
@@ -3,157 +3,11 @@
 // DPI API wrapper for the BackOne Proxy Server targeting original Netify API.
 // ─────────────────────────────────────────────────────────────────────────────
 
-const { netifyFetch, BASE_URL, agentMap } = require('./netifyClientCore');
+const { netifyFetch, BASE_URL } = require('./netifyClientCore');
 const telemetry = require('./netifyTelemetry');
+const stats = require('./netifyClientStats');
 
-const PORT_SERVICE_MAP = {
-  80: 'HTTP', 443: 'HTTPS / TLS', 8080: 'HTTP Alt', 8443: 'HTTPS Alt',
-  53: 'DNS', 5353: 'mDNS', 853: 'DNS-over-TLS',
-  25: 'SMTP', 587: 'SMTP TLS', 465: 'SMTPS', 110: 'POP3', 143: 'IMAP',
-  22: 'SSH', 23: 'Telnet', 3389: 'RDP', 5900: 'VNC',
-  21: 'FTP', 20: 'FTP Data', 989: 'FTPS', 990: 'FTPS Control',
-  3306: 'MySQL', 5432: 'PostgreSQL', 6379: 'Redis', 27017: 'MongoDB',
-  1194: 'OpenVPN', 51820: 'WireGuard', 500: 'IPSec IKE', 4500: 'IPSec NAT-T',
-  67: 'DHCP', 68: 'DHCP Client', 123: 'NTP',
-  6881: 'BitTorrent', 6882: 'BitTorrent', 6883: 'BitTorrent',
-  9993: 'ZeroTier VPN',
-};
-
-async function fetchAgents(siteUuid = null) {
-  const data = await netifyFetch('/data/stats/top/agent/download', { filter_interval: 43200, settings_limit: 100 }, null, siteUuid);
-  if (!data || !Array.isArray(data)) return [];
-  const list = data.map(r => ({
-    id:    r.agent?.id,
-    uuid:  r.agent?.uuid,
-    label: r.agent?.label,
-  })).filter(a => a.uuid);
-
-  for (const a of list) {
-    if (a.uuid && a.id) agentMap[a.uuid] = a.id;
-  }
-
-  // Secondary validation: if this site already has data in MongoDB, only return agents
-  // that have at least one summary record for THIS site_uuid. This prevents the
-  // org-level stats endpoint from cross-contaminating agents across sites.
-  if (siteUuid) {
-    try {
-      const mongoose = require('mongoose');
-      if (mongoose.connection.readyState === 1) {
-        const db = mongoose.connection.db;
-        const knownAgents = await db.collection('summaries').distinct('agent_uuid', {
-          site_uuid:  siteUuid,
-          agent_uuid: { $ne: null },
-        });
-
-        if (knownAgents.length > 0) {
-          const knownSet = new Set(knownAgents);
-          const validated = list.filter(a => knownSet.has(a.uuid));
-          // If MongoDB cross-check yields results, use the validated list.
-          // On first boot (no DB data yet), fall through and use the full API list.
-          if (validated.length > 0) return validated;
-        }
-      }
-    } catch (err) {
-      console.warn('[Collector] fetchAgents DB cross-check failed:', err.message);
-    }
-  }
-
-  return list;
-}
-
-
-async function fetchBandwidthSummary(interval = 1440, agentUuid = null, siteUuid = null) {
-  const [dlData, ulData, flowsData] = await Promise.all([
-    netifyFetch('/data/stats/top/local_ip/download', { filter_interval: interval, settings_limit: 500 }, agentUuid, siteUuid),
-    netifyFetch('/data/stats/top/local_ip/upload', { filter_interval: interval, settings_limit: 500 }, agentUuid, siteUuid),
-    netifyFetch('/data/stats/top/local_ip/flow_count', { filter_interval: interval, settings_limit: 500 }, agentUuid, siteUuid),
-  ]);
-  const bandwidth_down = dlData?.reduce((s, r) => s + (r.download ?? 0), 0) ?? 0;
-  const bandwidth_up   = ulData?.reduce((s, r) => s + (r.upload ?? 0), 0) ?? 0;
-  const total_devices  = dlData?.length ?? 0;
-  const active_flows   = flowsData?.reduce((s, r) => s + (r.flows ?? r.flow_count ?? 0), 0) ?? 0;
-  return { bandwidth_down, bandwidth_up, total_devices, active_flows, total_threats: 0 };
-}
-
-async function fetchTopApps(interval = 1440, limit = 200, agentUuid = null, siteUuid = null) {
-  const [dlData, ulData] = await Promise.all([
-    netifyFetch('/data/stats/top/application/download', { filter_interval: interval, settings_limit: limit }, agentUuid, siteUuid),
-    netifyFetch('/data/stats/top/application/upload', { filter_interval: interval, settings_limit: limit }, agentUuid, siteUuid),
-  ]);
-  if (!dlData) return null;
-  const ulMap = {};
-  if (ulData) {
-    for (const r of ulData) {
-      const id = r.application?.id;
-      if (id) ulMap[id] = r.upload ?? 0;
-    }
-  }
-  return dlData.map(r => ({
-    application: {
-      id:    r.application?.id ?? null,
-      label: r.application?.label ?? 'Unknown',
-      tag:   r.application?.tag ?? null,
-    },
-    download: r.download ?? 0,
-    upload:   ulMap[r.application?.id] ?? 0,
-    flows:    r.flows ?? 0,
-  }));
-}
-
-async function fetchDiscoveredDevices(interval = 1440, limit = 500, agentUuid = null, siteUuid = null) {
-  const [dlData, ulData] = await Promise.all([
-    netifyFetch('/data/stats/top/local_ip/download', { filter_interval: interval, settings_limit: limit }, agentUuid, siteUuid),
-    netifyFetch('/data/stats/top/local_ip/upload', { filter_interval: interval, settings_limit: limit }, agentUuid, siteUuid),
-  ]);
-  if (!dlData) return null;
-  const ulMap = {};
-  if (ulData) {
-    for (const r of ulData) {
-      const ip = r.local_ip?.address ?? String(r.local_ip);
-      ulMap[ip] = r.upload ?? 0;
-    }
-  }
-  return dlData.map(r => {
-    const ip = r.local_ip?.address ?? String(r.local_ip ?? '');
-    return {
-      ip_address:   ip,
-      mac_address:  r.local_mac ?? null,
-      device_label: r.device_label ?? ip,
-      device_type:  r.device_type ?? null,
-      os_label:     r.os_label ?? null,
-      manufacturer: r.manufacturer ?? null,
-      download:     r.download ?? 0,
-      upload:       ulMap[ip] ?? 0,
-      flows:        r.flows ?? 0,
-      last_seen:    r.last_seen_at?.date ?? null,
-    };
-  }).filter(d => d.ip_address);
-}
-
-async function fetchDeviceApps(ipAddress, interval = 1440, limit = 50, agentUuid = null, siteUuid = null) {
-  const ipFilter = JSON.stringify([ipAddress]);
-  const [dlData, ulData] = await Promise.all([
-    netifyFetch('/data/stats/top/application/download', { filter_interval: interval, settings_limit: limit, filter_local_ips: ipFilter }, agentUuid, siteUuid),
-    netifyFetch('/data/stats/top/application/upload', { filter_interval: interval, settings_limit: limit, filter_local_ips: ipFilter }, agentUuid, siteUuid),
-  ]);
-  if (!dlData || !Array.isArray(dlData)) return [];
-  const ulMap = {};
-  if (ulData && Array.isArray(ulData)) {
-    for (const r of ulData) {
-      const id = r.application?.id;
-      if (id) ulMap[id] = r.upload ?? 0;
-    }
-  }
-  return dlData.map(r => ({
-    app_label: r.application?.label ?? 'Unknown',
-    app_id:    r.application?.id    ?? null,
-    download:  r.download ?? 0,
-    upload:    ulMap[r.application?.id] ?? 0,
-    flows:     r.flows ?? 0,
-  })).filter(a => a.download > 0 || a.upload > 0);
-}
-
-async function fetchFlows(limit = 10000, agentUuid = null, siteUuid = null) {
+async function fetchFlows(limit = 1000000, agentUuid = null, siteUuid = null) {
   const [raw, sniRaw] = await Promise.all([
     netifyFetch('/data/flows', { settings_limit: limit }, agentUuid, siteUuid),
     netifyFetch('/data/stats/top/tls_sni/download', { filter_interval: 1440, settings_limit: 50 }, agentUuid, siteUuid),
@@ -163,12 +17,14 @@ async function fetchFlows(limit = 10000, agentUuid = null, siteUuid = null) {
   if (sniRaw && Array.isArray(sniRaw)) {
     for (const r of sniRaw) {
       const sni = typeof r.tls_sni === 'object' ? r.tls_sni?.label : r.tls_sni;
-      if (sni && typeof sni === 'string' && sni.trim() !== '') sniList.push(sni.replace(/^\*\./, '').trim());
+      if (sni && typeof sni === 'string' && sni.trim() !== '') {
+        sniList.push(sni.replace(/^\*\./, '').trim());
+      }
     }
   }
   return raw.map(r => {
     const port = r.remote_port ?? null;
-    const portService = port ? (PORT_SERVICE_MAP[port] ?? `Port ${port}`) : null;
+    const portService = port ? (stats.PORT_SERVICE_MAP[port] ?? `Port ${port}`) : null;
     const appLabel = r.application?.label || portService;
     const domain = r.tls_sni || r.dns_hostname || r.hostname || null;
     return {
@@ -188,84 +44,17 @@ async function fetchFlows(limit = 10000, agentUuid = null, siteUuid = null) {
   }).filter(f => f.src_ip);
 }
 
-async function fetchCyberThreats(agentUuid = null, siteUuid = null) {
-  const ipRepData = await netifyFetch('/data/stats/top/remote_ip/download', { filter_interval: 1440, settings_limit: 50 }, agentUuid, siteUuid);
-  if (!ipRepData || !Array.isArray(ipRepData)) return [];
-  const SUSPICIOUS_PORTS = new Set([23, 4444, 1337, 6667, 31337, 12345, 54321, 4899, 5554, 9999]);
-  const threats = [];
-  for (const r of ipRepData) {
-    const ip   = r.remote_ip?.address ?? null;
-    const port = r.remote_port ?? 0;
-    if (ip && SUSPICIOUS_PORTS.has(port)) {
-      threats.push({
-        threat_type: `Suspicious Port ${port}`,
-        severity:    'High',
-        src_ip:      null,
-        dst_ip:      ip,
-        dst_port:    port,
-        protocol:    r.ip_protocol?.label ?? null,
-        description: `Suspicious outbound connection to ${ip}:${port}`,
-        event_at:    new Date().toISOString(),
-      });
-    }
-  }
-  return threats;
-}
-
-async function fetchEvents(limit = 100, agentUuid = null, siteUuid = null) {
-  const raw = await netifyFetch('/event/events', { settings_limit: limit }, agentUuid, siteUuid);
-  if (!raw || !Array.isArray(raw)) return [];
-  return raw.map(r => {
-    let msg = r.label || '';
-    if (r.description) {
-      try {
-        const descObj = JSON.parse(r.description);
-        msg = descObj.default || r.label || '';
-        if (descObj.tags) {
-          for (const k in descObj.tags) {
-            const tagVal = descObj.tags[k];
-            const val = Array.isArray(tagVal) ? (tagVal[0] === 'Unknown' && tagVal[1] ? tagVal[1] : tagVal[0]) : tagVal;
-            msg = msg.replace(`{{ ${k} }}`, val).replace(`{{${k}}}`, val);
-          }
-        }
-      } catch (e) {
-        msg = r.description;
-      }
-    }
-    let sevLabel = 'Info';
-    if (r.severity >= 30) sevLabel = 'Critical';
-    else if (r.severity >= 20) sevLabel = 'High';
-    else if (r.severity >= 10) sevLabel = 'Warning';
-    let srcIp = null;
-    if (r.description) {
-      try {
-        const descObj = JSON.parse(r.description);
-        srcIp = descObj.tags?.device_ip || descObj.tags?.ip || null;
-      } catch {}
-    }
-    return {
-      event_id:       r.id || null,
-      event_type:     r.basename || 'unknown',
-      severity:       sevLabel,
-      description:    msg,
-      category_label: r.category?.label || 'Intelligence',
-      ip_address:     srcIp,
-      mac_address:    r.additional?.device?.mac?.address || null,
-      event_at:       r.created_at?.date ? new Date(r.created_at.date) : new Date()
-    };
-  });
-}
-
 module.exports = {
-  fetchAgents,
-  fetchBandwidthSummary,
-  fetchTopApps,
-  fetchDiscoveredDevices,
-  fetchDeviceApps,
   fetchFlows,
-  fetchCyberThreats,
-  fetchEvents,
+  fetchAgents: stats.fetchAgents,
+  fetchBandwidthSummary: stats.fetchBandwidthSummary,
+  fetchTopApps: stats.fetchTopApps,
+  fetchDiscoveredDevices: stats.fetchDiscoveredDevices,
+  fetchDeviceApps: stats.fetchDeviceApps,
+  fetchCyberThreats: stats.fetchCyberThreats,
+  fetchEvents: stats.fetchEvents,
+  syncApplicationDictionary: stats.syncApplicationDictionary,
   BASE_URL,
-  PORT_SERVICE_MAP,
+  PORT_SERVICE_MAP: stats.PORT_SERVICE_MAP,
   ...telemetry,
 };
diff --git a/proxy/netifyClientStats.js b/proxy/netifyClientStats.js
new file mode 100644
index 0000000..48e6278
--- /dev/null
+++ b/proxy/netifyClientStats.js
@@ -0,0 +1,238 @@
+// proxy/netifyClientStats.js
+// ─────────────────────────────────────────────────────────────────────────────
+// Supplementary fetchers split from netifyClient.js to satisfy the 256-line limit.
+// ─────────────────────────────────────────────────────────────────────────────
+
+const { netifyFetch, agentMap } = require('./netifyClientCore');
+const PORT_SERVICE_MAP = {
+  80: 'HTTP', 443: 'HTTPS / TLS', 8080: 'HTTP Alt', 8443: 'HTTPS Alt', 53: 'DNS', 5353: 'mDNS', 853: 'DNS-over-TLS', 25: 'SMTP', 587: 'SMTP TLS', 465: 'SMTPS', 110: 'POP3', 143: 'IMAP', 22: 'SSH', 23: 'Telnet', 3389: 'RDP', 5900: 'VNC', 21: 'FTP', 20: 'FTP Data', 989: 'FTPS', 990: 'FTPS Control', 3306: 'MySQL', 5432: 'PostgreSQL', 6379: 'Redis', 27017: 'MongoDB', 1194: 'OpenVPN', 51820: 'WireGuard', 500: 'IPSec IKE', 4500: 'IPSec NAT-T', 67: 'DHCP', 68: 'DHCP Client', 123: 'NTP', 6881: 'BitTorrent', 6882: 'BitTorrent', 6883: 'BitTorrent', 9993: 'ZeroTier VPN',
+};
+
+async function fetchAgents(siteUuid = null) {
+  // Use /data/stats/top/agent/download — the only working agent-listing endpoint
+  // in Netify Informatics API. /data/agents returns 404 (only on portal API).
+  // filter_interval max = 525600 min (365 days) per Netify API validation.
+  // Use max interval to catch ALL agents including low-traffic / inactive ones.
+  // DB cross-check removed — was blocking new agents from appearing.
+  const data = await netifyFetch('/data/stats/top/agent/download', {
+    filter_interval: 525600,
+    settings_limit: 1000000,
+  }, null, siteUuid);
+  if (!data || !Array.isArray(data)) return [];
+
+  const list = data.map(r => ({
+    id:           r.agent?.id,
+    uuid:         r.agent?.uuid || r.agent?.serial,
+    serial:       r.agent?.serial,
+    label:        r.agent?.label || r.agent?.serial,
+    provisioned:  true,
+    activated:    true,
+    last_seen_at: r.agent?.last_seen_at ?? null,
+  })).filter(a => a.uuid);
+
+  // Populate the agentMap (uuid → id) for downstream filter_agents usage
+  for (const a of list) {
+    if (a.uuid && a.id) agentMap[a.uuid] = a.id;
+  }
+
+  return list;
+}
+
+async function fetchBandwidthSummary(interval = 1440, agentUuid = null, siteUuid = null) {
+  const [dlData, ulData, flowsData] = await Promise.all([
+    netifyFetch('/data/stats/top/local_ip/download', { filter_interval: interval, settings_limit: 500 }, agentUuid, siteUuid),
+    netifyFetch('/data/stats/top/local_ip/upload', { filter_interval: interval, settings_limit: 500 }, agentUuid, siteUuid),
+    netifyFetch('/data/stats/top/local_ip/flow_count', { filter_interval: interval, settings_limit: 500 }, agentUuid, siteUuid),
+  ]);
+  const bandwidth_down = dlData?.reduce((s, r) => s + (r.download ?? 0), 0) ?? 0;
+  const bandwidth_up   = ulData?.reduce((s, r) => s + (r.upload ?? 0), 0) ?? 0;
+  const total_devices  = dlData?.length ?? 0;
+  const active_flows   = flowsData?.reduce((s, r) => s + (r.flows ?? r.flow_count ?? 0), 0) ?? 0;
+  return { bandwidth_down, bandwidth_up, total_devices, active_flows, total_threats: 0 };
+}
+
+async function fetchTopApps(interval = 1440, limit = 200, agentUuid = null, siteUuid = null) {
+  const [dlData, ulData] = await Promise.all([
+    netifyFetch('/data/stats/top/application/download', { filter_interval: interval, settings_limit: limit }, agentUuid, siteUuid),
+    netifyFetch('/data/stats/top/application/upload', { filter_interval: interval, settings_limit: limit }, agentUuid, siteUuid),
+  ]);
+  if (!dlData) return null;
+  const ulMap = {};
+  if (ulData) {
+    for (const r of ulData) {
+      const id = r.application?.id;
+      if (id) ulMap[id] = r.upload ?? 0;
+    }
+  }
+  return dlData.map(r => ({
+    application: { id: r.application?.id ?? null, label: r.application?.label ?? 'Unknown', tag: r.application?.tag ?? null },
+    download: r.download ?? 0, upload: ulMap[r.application?.id] ?? 0, flows: r.flows ?? 0,
+  }));
+}
+
+async function fetchDiscoveredDevices(interval = 1440, limit = 500, agentUuid = null, siteUuid = null) {
+  const [dlData, ulData] = await Promise.all([
+    netifyFetch('/data/stats/top/local_ip/download', { filter_interval: interval, settings_limit: limit }, agentUuid, siteUuid),
+    netifyFetch('/data/stats/top/local_ip/upload', { filter_interval: interval, settings_limit: limit }, agentUuid, siteUuid),
+  ]);
+  if (!dlData) return null;
+  const ulMap = {};
+  if (ulData) {
+    for (const r of ulData) {
+      const ip = r.local_ip?.address ?? String(r.local_ip);
+      ulMap[ip] = r.upload ?? 0;
+    }
+  }
+  return dlData.map(r => {
+    const ip = r.local_ip?.address ?? String(r.local_ip ?? '');
+    return {
+      ip_address: ip, mac_address: r.local_mac ?? null, device_label: r.device_label ?? ip, device_type: r.device_type ?? null,
+      os_label: r.os_label ?? null, manufacturer: r.manufacturer ?? null, download: r.download ?? 0, upload: ulMap[ip] ?? 0,
+      flows: r.flows ?? 0, last_seen: r.last_seen_at?.date ?? null,
+    };
+  }).filter(d => d.ip_address);
+}
+
+async function fetchDeviceApps(ipAddress, interval = 1440, limit = 50, agentUuid = null, siteUuid = null) {
+  const ipFilter = JSON.stringify([ipAddress]);
+  const [dlData, ulData] = await Promise.all([
+    netifyFetch('/data/stats/top/application/download', { filter_interval: interval, settings_limit: limit, filter_local_ips: ipFilter }, agentUuid, siteUuid),
+    netifyFetch('/data/stats/top/application/upload', { filter_interval: interval, settings_limit: limit, filter_local_ips: ipFilter }, agentUuid, siteUuid),
+  ]);
+  if (!dlData || !Array.isArray(dlData)) return [];
+  const ulMap = {};
+  if (ulData && Array.isArray(ulData)) {
+    for (const r of ulData) {
+      const id = r.application?.id;
+      if (id) ulMap[id] = r.upload ?? 0;
+    }
+  }
+  return dlData.map(r => ({
+    app_label: r.application?.label ?? 'Unknown',
+    app_id:    r.application?.id    ?? null,
+    download:  r.download ?? 0,
+    upload:    ulMap[r.application?.id] ?? 0,
+    flows:     r.flows ?? 0,
+  })).filter(a => a.download > 0 || a.upload > 0);
+}
+
+async function fetchCyberThreats(agentUuid = null, siteUuid = null) {
+  const ipRepData = await netifyFetch('/data/stats/top/remote_ip/download', { filter_interval: 1440, settings_limit: 50 }, agentUuid, siteUuid);
+  if (!ipRepData || !Array.isArray(ipRepData)) return [];
+  const SUSPICIOUS_PORTS = new Set([23, 4444, 1337, 6667, 31337, 12345, 54321, 4899, 5554, 9999]);
+  const threats = [];
+  for (const r of ipRepData) {
+    const ip   = r.remote_ip?.address ?? null;
+    const port = r.remote_port ?? 0;
+    if (ip && SUSPICIOUS_PORTS.has(port)) {
+      threats.push({
+        threat_type: `Suspicious Port ${port}`,
+        severity:    'High',
+        src_ip:      null,
+        dst_ip:      ip,
+        dst_port:    port,
+        protocol:    r.ip_protocol?.label ?? null,
+        description: `Suspicious outbound connection to ${ip}:${port}`,
+        event_at:    new Date().toISOString(),
+      });
+    }
+  }
+  return threats;
+}
+
+async function fetchEvents(limit = 100, agentUuid = null, siteUuid = null) {
+  const raw = await netifyFetch('/event/events', { settings_limit: limit }, agentUuid, siteUuid);
+  if (!raw || !Array.isArray(raw)) return [];
+  return raw.map(r => {
+    let msg = r.label || '';
+    if (r.description) {
+      try {
+        const descObj = JSON.parse(r.description);
+        msg = descObj.default || r.label || '';
+        if (descObj.tags) {
+          for (const k in descObj.tags) {
+            const tagVal = descObj.tags[k];
+            const val = Array.isArray(tagVal) ? (tagVal[0] === 'Unknown' && tagVal[1] ? tagVal[1] : tagVal[0]) : tagVal;
+            msg = msg.replace(`{{ ${k} }}`, val).replace(`{{${k}}}`, val);
+          }
+        }
+      } catch (e) {
+        msg = r.description;
+      }
+    }
+    let sevLabel = 'Info';
+    if (r.severity >= 30) sevLabel = 'Critical';
+    else if (r.severity >= 20) sevLabel = 'High';
+    else if (r.severity >= 10) sevLabel = 'Warning';
+    let srcIp = null;
+    if (r.description) {
+      try {
+        const descObj = JSON.parse(r.description);
+        srcIp = descObj.tags?.device_ip || descObj.tags?.ip || null;
+      } catch {}
+    }
+    return {
+      event_id:       r.id || null,
+      event_type:     r.basename || 'unknown',
+      severity:       sevLabel,
+      description:    msg,
+      category_label: r.category?.label || 'Intelligence',
+      ip_address:     srcIp,
+      mac_address:    r.additional?.device?.mac?.address || null,
+      event_at:       r.created_at?.date ? new Date(r.created_at.date) : new Date()
+    };
+  });
+}
+
+async function syncApplicationDictionary() {
+  const mongoose = require('mongoose');
+  const { LookupApp } = require('./models/Schemas');
+  
+  console.log('[Netify] Fetching application catalog...');
+  const allApps = await netifyFetch('/lookup/applications', { settings_limit: 5000 });
+  if (!allApps || !Array.isArray(allApps)) {
+    console.error('[Netify] Failed to fetch application dictionary.');
+    return;
+  }
+  
+  console.log(`[Netify] Application catalog fetched successfully. Got ${allApps.length} apps.`);
+  if (allApps.length === 0) return;
+  
+  console.log(`[Netify] Syncing ${allApps.length} application definitions to MongoDB...`);
+  await LookupApp.deleteMany({});
+  
+  const batchSize = 100;
+  for (let i = 0; i < allApps.length; i += batchSize) {
+    const batch = allApps.slice(i, i + batchSize);
+    await LookupApp.insertMany(batch.map(app => ({
+      id: app.id,
+      name: app.name,
+      label: app.label,
+      tag: app.tag,
+      description: app.description,
+      full_name: app.full_name || app.application?.full_label || null,
+      favicon: app.favicon || app.application?.favicon || null,
+      icon: app.icon || app.application?.icon || null,
+      logo: app.logo || app.application?.logo || null,
+      application_category: {
+        id: app.application_category?.id,
+        name: app.application_category?.name,
+        label: app.application_category?.label,
+        tag: app.application_category?.tag
+      }
+    })));
+  }
+  console.log('[Netify] ✓ Application dictionary sync completed.');
+}
+
+module.exports = {
+  fetchAgents,
+  fetchBandwidthSummary,
+  fetchTopApps,
+  fetchDiscoveredDevices,
+  fetchDeviceApps,
+  fetchCyberThreats,
+  fetchEvents,
+  syncApplicationDictionary,
+  PORT_SERVICE_MAP
+};
diff --git a/proxy/scheduler.js b/proxy/scheduler.js
index e1f14b1..ad4ac8c 100644
--- a/proxy/scheduler.js
+++ b/proxy/scheduler.js
@@ -4,6 +4,7 @@
 
 const cron = require('node-cron');
 const { collectAllAgents, collectSpecificAgent, collectSpecificAgents } = require('./collector');
+const { syncApplicationDictionary } = require('./netifyClient');
 
 // Mode: 'all' = collect all agents, 'agent' = collect one specific agent, 'agents' = collect multiple agents
 const COLLECT_MODE    = process.env.PROXY_COLLECT_MODE || 'all';
@@ -97,7 +98,11 @@ function startScheduler() {
   // Initial run immediately on startup (async, do not block server start)
   setTimeout(async () => {
     // 1. Sync dictionary first
-    // await netifyClient.syncApplicationDictionary();
+    try {
+      await syncApplicationDictionary();
+    } catch (err) {
+      console.error('[Scheduler] Error syncing application dictionary:', err.message);
+    }
     
     // 2. Start normal telemetry collection
     runCollection().catch(err => console.error('[Scheduler] Initial run error:', err.message));
diff --git a/public/api/uploads/profile-1782896485110-507996343.png b/public/api/uploads/profile-1782896485110-507996343.png
new file mode 100644
index 0000000..89f5b7f
Binary files /dev/null and b/public/api/uploads/profile-1782896485110-507996343.png differ
diff --git a/public/api/uploads/profile-1782957214095-436948837.png b/public/api/uploads/profile-1782957214095-436948837.png
new file mode 100644
index 0000000..89f5b7f
Binary files /dev/null and b/public/api/uploads/profile-1782957214095-436948837.png differ
diff --git a/public/api/uploads/profile-1782957227105-831349627.png b/public/api/uploads/profile-1782957227105-831349627.png
new file mode 100644
index 0000000..89f5b7f
Binary files /dev/null and b/public/api/uploads/profile-1782957227105-831349627.png differ
diff --git a/public/api/uploads/profile-1782957258680-874601083.png b/public/api/uploads/profile-1782957258680-874601083.png
new file mode 100644
index 0000000..89f5b7f
Binary files /dev/null and b/public/api/uploads/profile-1782957258680-874601083.png differ
diff --git a/public/api/uploads/profile-1782957260063-809722867.png b/public/api/uploads/profile-1782957260063-809722867.png
new file mode 100644
index 0000000..89f5b7f
Binary files /dev/null and b/public/api/uploads/profile-1782957260063-809722867.png differ
diff --git a/public/api/uploads/profile-1782957396116-629514876.png b/public/api/uploads/profile-1782957396116-629514876.png
new file mode 100644
index 0000000..89f5b7f
Binary files /dev/null and b/public/api/uploads/profile-1782957396116-629514876.png differ
diff --git a/public/api/uploads/profile-1782957397337-68390707.png b/public/api/uploads/profile-1782957397337-68390707.png
new file mode 100644
index 0000000..89f5b7f
Binary files /dev/null and b/public/api/uploads/profile-1782957397337-68390707.png differ
diff --git a/public/api/uploads/profile-1782957554195-684730747.png b/public/api/uploads/profile-1782957554195-684730747.png
new file mode 100644
index 0000000..89f5b7f
Binary files /dev/null and b/public/api/uploads/profile-1782957554195-684730747.png differ
diff --git a/public/api/uploads/profile-1782957618919-530652401.png b/public/api/uploads/profile-1782957618919-530652401.png
new file mode 100644
index 0000000..89f5b7f
Binary files /dev/null and b/public/api/uploads/profile-1782957618919-530652401.png differ
diff --git a/public/api/uploads/profile-1782957654468-554246050.png b/public/api/uploads/profile-1782957654468-554246050.png
new file mode 100644
index 0000000..89f5b7f
Binary files /dev/null and b/public/api/uploads/profile-1782957654468-554246050.png differ
diff --git a/public/api/uploads/profile-1782957734629-263039729.png b/public/api/uploads/profile-1782957734629-263039729.png
new file mode 100644
index 0000000..89f5b7f
Binary files /dev/null and b/public/api/uploads/profile-1782957734629-263039729.png differ
diff --git a/public/api/uploads/profile-1782957793294-535196821.png b/public/api/uploads/profile-1782957793294-535196821.png
new file mode 100644
index 0000000..89f5b7f
Binary files /dev/null and b/public/api/uploads/profile-1782957793294-535196821.png differ
diff --git a/public/api/uploads/profile-1782978598897-28546312.png b/public/api/uploads/profile-1782978598897-28546312.png
new file mode 100644
index 0000000..89f5b7f
Binary files /dev/null and b/public/api/uploads/profile-1782978598897-28546312.png differ
diff --git a/public/api/uploads/profile-1783329601048-985926830.png b/public/api/uploads/profile-1783329601048-985926830.png
new file mode 100644
index 0000000..89f5b7f
Binary files /dev/null and b/public/api/uploads/profile-1783329601048-985926830.png differ
diff --git a/public/api/uploads/profile-1783856980162-234747538.png b/public/api/uploads/profile-1783856980162-234747538.png
new file mode 100644
index 0000000..89f5b7f
Binary files /dev/null and b/public/api/uploads/profile-1783856980162-234747538.png differ
diff --git a/public/api/uploads/profile-1783925701251-53039060.png b/public/api/uploads/profile-1783925701251-53039060.png
new file mode 100644
index 0000000..89f5b7f
Binary files /dev/null and b/public/api/uploads/profile-1783925701251-53039060.png differ
diff --git a/public/api/uploads/profile-1783925846234-644654635.png b/public/api/uploads/profile-1783925846234-644654635.png
new file mode 100644
index 0000000..89f5b7f
Binary files /dev/null and b/public/api/uploads/profile-1783925846234-644654635.png differ
diff --git a/public/api/uploads/profile-1783926643277-796221976.png b/public/api/uploads/profile-1783926643277-796221976.png
new file mode 100644
index 0000000..89f5b7f
Binary files /dev/null and b/public/api/uploads/profile-1783926643277-796221976.png differ
diff --git a/public/api/uploads/profile-1784049206350-427299921.png b/public/api/uploads/profile-1784049206350-427299921.png
new file mode 100644
index 0000000..89f5b7f
Binary files /dev/null and b/public/api/uploads/profile-1784049206350-427299921.png differ
diff --git a/public/api/uploads/profile-1784049223805-190927998.png b/public/api/uploads/profile-1784049223805-190927998.png
new file mode 100644
index 0000000..89f5b7f
Binary files /dev/null and b/public/api/uploads/profile-1784049223805-190927998.png differ
diff --git a/public/api/uploads/profile-1784049244401-665031741.png b/public/api/uploads/profile-1784049244401-665031741.png
new file mode 100644
index 0000000..d47fab5
Binary files /dev/null and b/public/api/uploads/profile-1784049244401-665031741.png differ
diff --git a/public/api/uploads/profile-1784049275064-498936278.png b/public/api/uploads/profile-1784049275064-498936278.png
new file mode 100644
index 0000000..d47fab5
Binary files /dev/null and b/public/api/uploads/profile-1784049275064-498936278.png differ
diff --git a/public/api/uploads/profile-1784049302001-714198254.png b/public/api/uploads/profile-1784049302001-714198254.png
new file mode 100644
index 0000000..d47fab5
Binary files /dev/null and b/public/api/uploads/profile-1784049302001-714198254.png differ
diff --git a/public/api/uploads/profile-1784254528937-270868858.png b/public/api/uploads/profile-1784254528937-270868858.png
new file mode 100644
index 0000000..89f5b7f
Binary files /dev/null and b/public/api/uploads/profile-1784254528937-270868858.png differ
diff --git a/public/api/uploads/profile-1784254553441-339825741.png b/public/api/uploads/profile-1784254553441-339825741.png
new file mode 100644
index 0000000..d47fab5
Binary files /dev/null and b/public/api/uploads/profile-1784254553441-339825741.png differ
diff --git a/public/api/uploads/profile-1784254567483-97901195.png b/public/api/uploads/profile-1784254567483-97901195.png
new file mode 100644
index 0000000..d47fab5
Binary files /dev/null and b/public/api/uploads/profile-1784254567483-97901195.png differ
diff --git a/public/api/uploads/profile-1784254581808-854860134.png b/public/api/uploads/profile-1784254581808-854860134.png
new file mode 100644
index 0000000..d47fab5
Binary files /dev/null and b/public/api/uploads/profile-1784254581808-854860134.png differ
diff --git a/public/api/uploads/profile-1784254601947-954448750.png b/public/api/uploads/profile-1784254601947-954448750.png
new file mode 100644
index 0000000..89f5b7f
Binary files /dev/null and b/public/api/uploads/profile-1784254601947-954448750.png differ
diff --git a/public/api/uploads/profile-1784254618510-383483774.png b/public/api/uploads/profile-1784254618510-383483774.png
new file mode 100644
index 0000000..89f5b7f
Binary files /dev/null and b/public/api/uploads/profile-1784254618510-383483774.png differ
diff --git a/public/api/uploads/profile-1784254634906-830642874.png b/public/api/uploads/profile-1784254634906-830642874.png
new file mode 100644
index 0000000..89f5b7f
Binary files /dev/null and b/public/api/uploads/profile-1784254634906-830642874.png differ
diff --git a/public/api/uploads/profile-1784254648483-456467829.png b/public/api/uploads/profile-1784254648483-456467829.png
new file mode 100644
index 0000000..89f5b7f
Binary files /dev/null and b/public/api/uploads/profile-1784254648483-456467829.png differ
diff --git a/public/fonts/Inter-Variable.woff2 b/public/fonts/Inter-Variable.woff2
new file mode 100644
index 0000000..33002f1
Binary files /dev/null and b/public/fonts/Inter-Variable.woff2 differ
diff --git a/scripts/deploy-sftp.js b/scripts/deploy-sftp.js
index 01e723b..9049e80 100644
--- a/scripts/deploy-sftp.js
+++ b/scripts/deploy-sftp.js
@@ -148,7 +148,9 @@ async function uploadDirectory(sftp, localDir, remoteDir, options = {}) {
     if (item.name === '.env.production' || item.name === '.env.local') continue;
 
     const localItemPath = path.join(localPath, item.name);
-    const remoteItemPath = path.posix.join(CONFIG.remotePath, remoteDir, item.name);
+    // Force forward slashes for remote Linux path compatibility
+    const remoteDirNormalized = remoteDir.replace(/\\/g, '/');
+    const remoteItemPath = path.posix.join(CONFIG.remotePath, remoteDirNormalized, item.name);
 
     if (item.isDirectory()) {
       try {
@@ -158,7 +160,8 @@ async function uploadDirectory(sftp, localDir, remoteDir, options = {}) {
       }
       await uploadDirectory(sftp, path.join(localDir, item.name), path.join(remoteDir, item.name), options);
     } else {
-      process.stdout.write(`  [UP] ${path.join(remoteDir, item.name)} ... `);
+      const displayPath = path.posix.join(remoteDirNormalized, item.name);
+      process.stdout.write(`  [UP] ${displayPath} ... `);
       await sftp.put(localItemPath, remoteItemPath);
       process.stdout.write('done\n');
     }
diff --git a/scripts/start-mongo.js b/scripts/start-mongo.js
index 997d00e..e0c09da 100644
--- a/scripts/start-mongo.js
+++ b/scripts/start-mongo.js
@@ -1,7 +1,36 @@
+const net = require('net');
 const { MongoMemoryServer } = require('mongodb-memory-server');
 
+function checkPort(port, host) {
+  return new Promise((resolve) => {
+    const socket = new net.Socket();
+    socket.setTimeout(1000);
+    socket.on('connect', () => {
+      socket.destroy();
+      resolve(true);
+    });
+    socket.on('timeout', () => {
+      socket.destroy();
+      resolve(false);
+    });
+    socket.on('error', () => {
+      socket.destroy();
+      resolve(false);
+    });
+    socket.connect(port, host);
+  });
+}
+
 async function start() {
   try {
+    const isLocalMongoRunning = await checkPort(27017, '127.0.0.1') || await checkPort(27017, 'localhost');
+    if (isLocalMongoRunning) {
+      console.log('[MONGO] ℹ️ Local persistent MongoDB is already running on port 27017. Skipping in-memory MongoDB launch.');
+      // Keep process alive so concurrently doesn't show it as exited/failed
+      setInterval(() => {}, 100000);
+      return;
+    }
+
     const mongod = await MongoMemoryServer.create({
       instance: {
         port: 27017,
@@ -20,6 +49,7 @@ async function start() {
   } catch (err) {
     if (err.code === 'EADDRINUSE' || (err.message && err.message.includes('EADDRINUSE'))) {
       console.log('[MONGO] ℹ️ Port 27017 is already in use. Skipping in-memory MongoDB launch.');
+      setInterval(() => {}, 100000);
     } else {
       console.error('[MONGO] ❌ Error starting MongoMemoryServer:', err.message);
     }
diff --git a/src/app/(dashboard)/agents/AgentsPageModals.tsx b/src/app/(dashboard)/agents/AgentsPageModals.tsx
index ad0ad11..102b48f 100644
--- a/src/app/(dashboard)/agents/AgentsPageModals.tsx
+++ b/src/app/(dashboard)/agents/AgentsPageModals.tsx
@@ -3,7 +3,7 @@
 import { AgentModals } from "@/components/admin/AgentModals";
 import ExternalAccountModal from "@/components/admin/ExternalAccountModal";
 import AgentLocationModal from "@/components/admin/AgentLocationModal";
-import { Agent } from "@/lib/actions/agents";
+import { Agent } from "@/lib/actions/agentsCore";
 import { type ManagedUser } from "@/lib/admin-api";
 
 interface AgentsPageModalsProps {
diff --git a/src/app/(dashboard)/agents/AgentsTableSection.tsx b/src/app/(dashboard)/agents/AgentsTableSection.tsx
index 36238e6..9b035d7 100644
--- a/src/app/(dashboard)/agents/AgentsTableSection.tsx
+++ b/src/app/(dashboard)/agents/AgentsTableSection.tsx
@@ -2,24 +2,37 @@
 
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/Card";
 import { DataTable, Column } from "@/components/ui/DataTable";
-import { Loader2 } from "lucide-react";
-import { Agent } from "@/lib/actions/agents";
+import { Loader2, Plus } from "lucide-react";
+import { Agent } from "@/lib/actions/agentsCore";
 
 interface AgentsTableSectionProps {
   agents: Agent[];
   isLoading: boolean;
   columns: Column<Agent>[];
+  role: string | null;
+  onProvisionClick?: () => void;
 }
 
 export default function AgentsTableSection({
   agents,
   isLoading,
   columns,
+  role,
+  onProvisionClick,
 }: AgentsTableSectionProps) {
   return (
     <Card className="bg-card/50 backdrop-blur-sm border-border/50">
-      <CardHeader>
+      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-4">
         <CardTitle className="text-white">Provisioned Network Agents ({agents.length})</CardTitle>
+        {(role === 'SUPER_ADMIN' || role === 'TENANT_ADMIN') && onProvisionClick && (
+          <button 
+            onClick={onProvisionClick}
+            className="flex items-center gap-2 bg-primary hover:bg-primary/95 text-primary-foreground px-4 py-2 rounded-xl text-sm font-semibold transition-all shadow-lg shadow-blue-500/10"
+          >
+            <Plus className="w-4 h-4" />
+            Provision Agent
+          </button>
+        )}
       </CardHeader>
       <CardContent>
         {isLoading ? (
diff --git a/src/app/(dashboard)/agents/UptimeStatsCards.tsx b/src/app/(dashboard)/agents/UptimeStatsCards.tsx
index ab44b11..7fe96fa 100644
--- a/src/app/(dashboard)/agents/UptimeStatsCards.tsx
+++ b/src/app/(dashboard)/agents/UptimeStatsCards.tsx
@@ -21,29 +21,29 @@ export default function UptimeStatsCards({
         <div className="absolute top-0 right-0 p-3 opacity-10 group-hover:opacity-20 transition-opacity">
           <Server className="w-12 h-12 text-blue-400" />
         </div>
-        <span className="text-slate-400 uppercase tracking-wider mb-1">Total Agents</span>
-        <span className="text-2xl font-black text-white tracking-tight">{totalAgents}</span>
+        <span className="text-slate-400 uppercase tracking-wider mb-1 text-[10px] font-medium">Total Agents</span>
+        <span className="text-2xl font-bold text-white tracking-tight">{totalAgents}</span>
       </div>
       <div className="bg-slate-900/50 backdrop-blur-sm border border-slate-800/80 p-5 rounded-2xl flex flex-col relative overflow-hidden group">
         <div className="absolute top-0 right-0 p-3 opacity-10 group-hover:opacity-20 transition-opacity">
           <CheckCircle2 className="w-12 h-12 text-emerald-400" />
         </div>
-        <span className="text-slate-400 uppercase tracking-wider mb-1">Online Agents</span>
-        <span className="text-2xl font-black text-emerald-400 tracking-tight">{onlineAgents}</span>
+        <span className="text-slate-400 uppercase tracking-wider mb-1 text-[10px] font-medium">Online Agents</span>
+        <span className="text-2xl font-bold text-emerald-400 tracking-tight">{onlineAgents}</span>
       </div>
       <div className="bg-slate-900/50 backdrop-blur-sm border border-slate-800/80 p-5 rounded-2xl flex flex-col relative overflow-hidden group">
         <div className="absolute top-0 right-0 p-3 opacity-10 group-hover:opacity-20 transition-opacity">
           <XCircle className="w-12 h-12 text-red-400" />
         </div>
-        <span className="text-slate-400 uppercase tracking-wider mb-1">Offline Agents</span>
-        <span className="text-2xl font-black text-red-400 tracking-tight">{offlineAgents}</span>
+        <span className="text-slate-400 uppercase tracking-wider mb-1 text-[10px] font-medium">Offline Agents</span>
+        <span className="text-2xl font-bold text-red-400 tracking-tight">{offlineAgents}</span>
       </div>
       <div className="bg-slate-900/50 backdrop-blur-sm border border-slate-800/80 p-5 rounded-2xl flex flex-col relative overflow-hidden group">
         <div className="absolute top-0 right-0 p-3 opacity-10 group-hover:opacity-20 transition-opacity">
           <Activity className="w-12 h-12 text-cyan-400" />
         </div>
-        <span className="text-slate-400 uppercase tracking-wider mb-1">Avg. Historical Uptime</span>
-        <span className="text-2xl font-black text-cyan-400 tracking-tight">{avgUptime.toFixed(2)}%</span>
+        <span className="text-slate-400 uppercase tracking-wider mb-1 text-[10px] font-medium">Avg. Historical Uptime</span>
+        <span className="text-2xl font-bold text-cyan-400 tracking-tight">{avgUptime.toFixed(2)}%</span>
       </div>
     </div>
   );
diff --git a/src/app/(dashboard)/agents/columns.tsx b/src/app/(dashboard)/agents/columns.tsx
index e2eca91..de577df 100644
--- a/src/app/(dashboard)/agents/columns.tsx
+++ b/src/app/(dashboard)/agents/columns.tsx
@@ -1,10 +1,10 @@
 "use client";
 
 import { Column } from "@/components/ui/DataTable";
-import { Agent } from "@/lib/actions/agents";
+import { Agent } from "@/lib/actions/agentsCore";
 import { Badge } from "@/components/ui/Badge";
 import { resolveAgentLabel, type ManagedUser } from "@/lib/admin-api";
-import { Loader2, Trash2, CheckCircle2, XCircle, ChevronRight, UserCog, Eye } from "lucide-react";
+import { Loader2, Trash2, CheckCircle2, XCircle, ChevronRight, UserCog, Eye, MapPin } from "lucide-react";
 
 interface GetColumnsProps {
   role: string | null;
@@ -17,6 +17,9 @@ interface GetColumnsProps {
   setAccountModalAgent: (agent: { uuid: string; label: string } | null) => void;
   handleViewAs: (uuid: string, label: string) => void;
   openDelete: (agent: Agent) => void;
+  handleEditLocation?: (agentUuid: string, agentLabel: string) => void;
+  /** Set of agent UUIDs that already have a location saved */
+  locationUuids?: Set<string>;
 }
 
 export function getAgentColumns({
@@ -30,11 +33,13 @@ export function getAgentColumns({
   setAccountModalAgent,
   handleViewAs,
   openDelete,
+  handleEditLocation,
+  locationUuids = new Set(),
 }: GetColumnsProps): Column<Agent>[] {
   const cols: Column<Agent>[] = [
     {
       header: "UUID / Serial",
-      className: "w-[16%] text-center",
+      className: "w-[12%] text-center",
       accessor: (row) => (
         <button onClick={() => setDetailAgent(row)} className="flex items-center justify-center gap-2 group text-center mx-auto" title="Click to view agent details">
           <span className="font-mono text-xs text-blue-400 group-hover:text-blue-300 transition-colors">{row.uuid || row.serial}</span>
@@ -44,14 +49,19 @@ export function getAgentColumns({
     },
     {
       header: "Label",
-      className: "w-[24%] text-center",
+      className: "w-[15%] text-center",
       accessor: (row) => {
         const uuid = row.uuid || row.serial;
         const dynamicLabel = resolveAgentLabel(uuid, managedUsers);
         const hasAccount = managedUsers.some(u => u.agent_uuid === uuid && u.role === 'AGENT_VIEWER');
+        const displayLabel = dynamicLabel !== uuid ? dynamicLabel : (row.label || uuid);
         return (
           <div className="flex items-center justify-center gap-2 mx-auto max-w-full">
-            <button onClick={() => setDetailAgent(row)} className="text-center hover:text-white transition-colors truncate">
+            <button 
+              onClick={() => setDetailAgent(row)} 
+              className="text-center hover:text-white transition-colors truncate"
+              title={displayLabel}
+            >
               {dynamicLabel !== uuid ? dynamicLabel : (row.label || <span className="text-muted-foreground italic font-mono text-xs">{uuid}</span>)}
             </button>
             {!hasAccount && (role === 'SUPER_ADMIN' || role === 'TENANT_ADMIN') && (
@@ -63,71 +73,93 @@ export function getAgentColumns({
     },
     { 
       header: "Provisioned", 
-      className: "w-[12%] text-center",
+      className: "w-[11%] text-center",
       accessor: (row) => row.provisioned ? <Badge variant="green"><CheckCircle2 className="w-3 h-3 mr-1" /> Yes</Badge> : <Badge variant="red"><XCircle className="w-3 h-3 mr-1" /> No</Badge> 
     },
     { 
       header: "Activated", 
-      className: "w-[12%] text-center",
+      className: "w-[11%] text-center",
       accessor: (row) => row.activated ? <Badge variant="green"><CheckCircle2 className="w-3 h-3 mr-1" /> Yes</Badge> : <Badge variant="red"><XCircle className="w-3 h-3 mr-1" /> No</Badge> 
     },
     { 
-      header: "Status", 
-      className: "w-[11%] text-center",
+      header: "Traffic Status", 
+      className: "w-[15%] text-center",
       accessor: (row) => {
         const statusText = row.last_seen_at?.human || '-';
-        if (statusText === 'Online') {
-          return <span className="text-emerald-400 font-medium flex items-center justify-center gap-1.5"><div className="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse"></div> Online</span>;
-        } else if (statusText === 'Offline') {
-          return <span className="text-red-400 font-medium">Offline</span>;
+        if (statusText.startsWith('Last seen:')) {
+          return (
+            <span className="text-emerald-400 font-medium flex items-center justify-center gap-1.5 mx-auto">
+              <div className="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse"></div>
+              {statusText}
+            </span>
+          );
         } else {
-          return <span className="text-slate-400 text-xs">{statusText}</span>;
+          return <span className="text-slate-400 text-xs font-normal">{statusText}</span>;
         }
       }
     },
     {
-      header: "Historical Uptime",
-      className: "w-[12%] text-center",
+      header: "Avg Uptime",
+      className: "w-[10%] text-center",
       accessor: (row) => {
         const uuid = row.uuid || row.serial;
         const uptime = uptimeMap[uuid] ?? 100;
         let color = "text-emerald-400";
         if (uptime < 90) color = "text-red-400";
         else if (uptime < 98) color = "text-amber-400";
-        return <span className={`font-mono font-bold ${color}`}>{uptime.toFixed(1)}%</span>;
+        return <span className={`font-mono font-medium text-xs tracking-wide ${color}`}>{uptime.toFixed(1)}%</span>;
       }
     },
     { 
       header: "Actions", 
-      className: "w-[13%] text-center",
+      className: "w-[16%] text-center",
       accessor: (row) => {
         const uuid = row.uuid || row.serial;
         const dynamicLabel = resolveAgentLabel(uuid, managedUsers);
         const existingUser = managedUsers.find(u => u.agent_uuid === uuid && u.role === 'AGENT_VIEWER') || null;
         const isViewAsLoading = viewAsLoading === uuid;
         return (
-          <div className="flex items-center justify-center gap-1.5">
-            <button onClick={() => setDetailAgent(row)} className="p-1.5 text-blue-400 hover:text-blue-300 hover:bg-blue-950/30 rounded transition-colors" title="Detail Agent">
+          <div className="flex items-center justify-center gap-1 mx-auto">
+            <button onClick={() => setDetailAgent(row)} className="p-1 text-blue-400 hover:text-blue-300 hover:bg-blue-950/30 rounded transition-colors" title="Detail Agent">
               <ChevronRight className="w-4 h-4" />
             </button>
             {(role === 'SUPER_ADMIN' || role === 'TENANT_ADMIN') && (
               <>
                 <button
                   onClick={(e) => { e.stopPropagation(); setAccountModalAgent({ uuid, label: dynamicLabel !== uuid ? dynamicLabel : (row.label || uuid) }); setAccountModalOpen(true); }}
-                  className="p-1.5 text-emerald-400 hover:text-emerald-300 hover:bg-emerald-950/30 rounded transition-colors"
+                  className="p-1 text-emerald-400 hover:text-emerald-300 hover:bg-emerald-950/30 rounded transition-colors"
                   title={existingUser ? 'Edit Agent Account' : 'Create Agent Account'}
                 >
                   <UserCog className="w-4 h-4" />
                 </button>
+                {handleEditLocation && (() => {
+                    const hasLocation = locationUuids.has(uuid);
+                    return (
+                      <button
+                        onClick={(e) => { e.stopPropagation(); handleEditLocation(uuid, dynamicLabel !== uuid ? dynamicLabel : (row.label || uuid)); }}
+                        className={`relative p-1 rounded transition-colors ${
+                          hasLocation
+                            ? "text-teal-400 hover:text-teal-300 hover:bg-teal-950/30"
+                            : "text-slate-500 hover:text-indigo-400 hover:bg-indigo-950/30"
+                        }`}
+                        title={hasLocation ? "✅ Location set — click to update" : "⚠️ No location — click to set coordinates"}
+                      >
+                        <MapPin className="w-4 h-4" />
+                        {hasLocation && (
+                          <span className="absolute -top-0.5 -right-0.5 w-2 h-2 rounded-full bg-teal-400 border border-slate-900" />
+                        )}
+                      </button>
+                    );
+                  })()}
                 <button
                   onClick={(e) => { e.stopPropagation(); handleViewAs(uuid, dynamicLabel !== uuid ? dynamicLabel : (row.label || uuid)); }}
                   disabled={isViewAsLoading}
-                  className="p-1.5 text-amber-400 hover:text-amber-300 hover:bg-amber-950/30 rounded transition-colors disabled:opacity-50"
+                  className="p-1 text-amber-400 hover:text-amber-300 hover:bg-amber-950/30 rounded transition-colors disabled:opacity-50"
                   title="View As Agent"
                 >
                   {isViewAsLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <Eye className="w-4 h-4" />}
                 </button>
-                <button onClick={(e) => { e.stopPropagation(); openDelete(row); }} className="p-1.5 text-red-400 hover:text-red-300 hover:bg-red-950/30 rounded transition-colors" title="Delete">
+                <button onClick={(e) => { e.stopPropagation(); openDelete(row); }} className="p-1 text-red-400 hover:text-red-300 hover:bg-red-950/30 rounded transition-colors" title="Delete">
                   <Trash2 className="w-4 h-4" />
                 </button>
               </>
@@ -141,11 +173,11 @@ export function getAgentColumns({
   if (role === 'SUPER_ADMIN') {
     cols.splice(cols.length - 1, 0, {
       header: "Data Size",
-      className: "w-[12%] text-center",
+      className: "w-[10%] text-center",
       accessor: (row) => {
         const uuid = row.uuid || row.serial;
         const sizeMB = storageMap[uuid] ?? 0;
-        return <span className="font-mono text-slate-300 font-semibold">{sizeMB.toFixed(2)} MB</span>;
+        return <span className="font-mono text-xs font-normal text-slate-300 tracking-wide">{sizeMB.toFixed(2)} MB</span>;
       }
     });
   }
@@ -153,75 +185,4 @@ export function getAgentColumns({
   return cols;
 }
 
-export function getExternalAccountColumns(
-  onManageAccount: (user: ManagedUser) => void
-): Column<ManagedUser>[] {
-  return [
-    {
-      header: "Account Name",
-      className: "w-[25%] text-left",
-      accessor: (row) => (
-        <div className="flex items-center gap-3">
-          <div className="w-8 h-8 rounded-full bg-slate-800 flex items-center justify-center border border-slate-700 shrink-0 overflow-hidden">
-            {row.profile_picture ? (
-              <img src={`/api/uploads/${row.profile_picture}`} alt={row.account_name || row.username} className="w-full h-full object-cover" />
-            ) : (
-              <span className="text-xs font-bold text-slate-400">{(row.account_name || row.username).substring(0, 2).toUpperCase()}</span>
-            )}
-          </div>
-          <span className="font-medium text-white">{row.account_name || "-"}</span>
-        </div>
-      )
-    },
-    {
-      header: "Username",
-      className: "w-[25%] text-left",
-      accessor: (row) => <span className="text-slate-300 font-mono text-sm">{row.username}</span>
-    },
-    {
-      header: "Role",
-      className: "w-[20%] text-center",
-      accessor: (row) => {
-        let badgeColor = "bg-slate-500/20 text-slate-400 border-slate-500/30";
-        if (row.role === 'SUPER_ADMIN') badgeColor = "bg-purple-500/20 text-purple-400 border-purple-500/30";
-        if (row.role === 'SOC_ANALYST') badgeColor = "bg-amber-500/20 text-amber-400 border-amber-500/30";
-        if (row.role === 'ENGINEER') badgeColor = "bg-blue-500/20 text-blue-400 border-blue-500/30";
-        if (row.role === 'TENANT_ADMIN') badgeColor = "bg-emerald-500/20 text-emerald-400 border-emerald-500/30";
-        
-        return (
-          <span className={`px-2.5 py-1 rounded-full text-xs font-semibold border ${badgeColor}`}>
-            {row.role.replace('_', ' ')}
-          </span>
-        );
-      }
-    },
-    {
-      header: "Status",
-      className: "w-[15%] text-center",
-      accessor: (row) => (
-        <div className="flex items-center justify-center gap-2">
-          {/* Defaulting to active since we don't have is_active explicitly in ManagedUser interface yet, though API returns it. We'll check if it exists, else assume Active */}
-          {(row as any).is_active !== false ? (
-            <Badge variant="green"><CheckCircle2 className="w-3 h-3 mr-1" /> Active</Badge>
-          ) : (
-            <Badge variant="red"><XCircle className="w-3 h-3 mr-1" /> Inactive</Badge>
-          )}
-        </div>
-      )
-    },
-    {
-      header: "Actions",
-      className: "w-[15%] text-center",
-      accessor: (row) => (
-        <button 
-          onClick={() => onManageAccount(row)}
-          className="p-1.5 text-blue-400 hover:text-blue-300 hover:bg-blue-950/30 rounded transition-colors disabled:opacity-50"
-          title="Manage Account"
-          disabled={row.role === 'SUPER_ADMIN'}
-        >
-          <UserCog className="w-4 h-4" />
-        </button>
-      )
-    }
-  ];
-}
+
diff --git a/src/app/(dashboard)/agents/page.tsx b/src/app/(dashboard)/agents/page.tsx
index 64d0df1..de8a5fe 100644
--- a/src/app/(dashboard)/agents/page.tsx
+++ b/src/app/(dashboard)/agents/page.tsx
@@ -1,152 +1,65 @@
 "use client";
 
-import { useState, useEffect } from "react";
-import { useRouter } from "next/navigation";
-import { getAgents, Agent } from "@/lib/actions/agents";
-
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/Card";
-import { DataTable } from "@/components/ui/DataTable";
-import { Cpu, History, Radio, Server, Activity, Plus, Loader2, CheckCircle2, XCircle } from "lucide-react";
-
-import { getAdminUsers, startViewAs, resolveAgentLabel, getViewAsHeaders, type ManagedUser } from "@/lib/admin-api";
-import { useTimeFilter } from "@/contexts/TimeFilterContext";
-import { usePollingKey } from "@/lib/usePolling";
-import { AgentModals } from "@/components/admin/AgentModals";
-import ExternalAccountModal from "@/components/admin/ExternalAccountModal";
-import { getAgentColumns, getExternalAccountColumns } from "./columns";
+import { useEffect } from "react";
+import { Plus, Loader2, MapPin } from "lucide-react";
 import { HelpTrigger } from "@/components/help/HelpTrigger";
+import { useAgentsData } from "./useAgentsData";
+import { getAgentColumns } from "./columns";
+import { getExternalAccountColumns } from "./externalColumns";
+import UptimeStatsCards from "./UptimeStatsCards";
+import AgentsTableSection from "./AgentsTableSection";
+import ExternalAccountsSection from "./ExternalAccountsSection";
+import AgentsPageModals from "./AgentsPageModals";
+import AgentLocationMap from "@/components/admin/AgentLocationMap";
+import { resolveAgentLabel } from "@/lib/admin-api";
 
 export default function AgentsPage() {
-  const router = useRouter();
-  const [role, setRole] = useState<string | null>(null);
-  const [agents, setAgents] = useState<Agent[]>([]);
-  const [uptimeMap, setUptimeMap] = useState<Record<string, number>>({});
-  const [storageMap, setStorageMap] = useState<Record<string, number>>({});
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState("");
-
-  const [isCreateOpen, setIsCreateOpen] = useState(false);
-  const [isDeleteOpen, setIsDeleteOpen] = useState(false);
-  const [detailAgent, setDetailAgent] = useState<Agent | null>(null);
-  const [managedUsers, setManagedUsers] = useState<ManagedUser[]>([]);
-  const [accountModalOpen, setAccountModalOpen] = useState(false);
-  const [accountModalAgent, setAccountModalAgent] = useState<{ uuid: string; label: string } | null>(null);
-
-  const [externalModalOpen, setExternalModalOpen] = useState(false);
-  const [externalModalUser, setExternalModalUser] = useState<ManagedUser | null>(null);
-
-  const [viewAsLoading, setViewAsLoading] = useState<string | null>(null);
-  const [selectedAgent, setSelectedAgent] = useState<Agent | null>(null);
-  const { timeRange } = useTimeFilter();
-  const refreshKey = usePollingKey(60000); // Auto-refresh every 60 seconds (1 minute)
-
-  const loadUptime = async () => {
-    try {
-      const res = await fetch(`/api/dashboard/agents/uptime?timeRange=${timeRange}`, {
-        headers: getViewAsHeaders()
-      });
-      if (res.ok) {
-        const json = await res.json();
-        if (json.ok && json.uptime) setUptimeMap(json.uptime);
-      }
-    } catch (err) {
-      console.error("Failed to load uptime stats:", err);
-    }
-  };
-
-  const loadStorage = async () => {
-    try {
-      const res = await fetch('/api/dashboard/agents/storage', {
-        headers: getViewAsHeaders()
-      });
-      if (res.ok) {
-        const json = await res.json();
-        if (json.ok && json.storage) setStorageMap(json.storage);
-      }
-    } catch (err) {
-      console.error("Failed to load agent storage stats:", err);
-    }
-  };
-
-  const loadAgents = async () => {
-    setIsLoading(true);
-    try {
-      const siteUuid = localStorage.getItem("backone_site_uuid") || undefined;
-      const [agentData, userData] = await Promise.allSettled([
-        getAgents(siteUuid),
-        getAdminUsers(),
-      ]);
-      if (agentData.status === 'fulfilled') setAgents(agentData.value);
-      else setError((agentData.reason as Error).message);
-      if (userData.status === 'fulfilled') setManagedUsers(userData.value);
-      await loadUptime();
-    } catch (e: any) {
-      setError(e.message);
-    }
-    setIsLoading(false);
-  };
-
-  const handleViewAs = async (agentUuid: string, agentLabel: string) => {
-    setViewAsLoading(agentUuid);
-    try {
-      await startViewAs(agentUuid, agentLabel);
-      router.refresh();
-      window.location.reload();
-    } catch (err: any) {
-      alert('Failed to enter View As mode: ' + err.message);
-    } finally {
-      setViewAsLoading(null);
-    }
-  };
-
   useEffect(() => {
-    fetch('/api/auth/me', { headers: getViewAsHeaders() })
-      .then(res => res.json())
-      .then(data => {
-        if (data.user) {
-          setRole(data.user.role || null);
-          if (data.user.role === 'AGENT_VIEWER') {
-            router.push('/');
-          } else {
-            loadAgents();
-          }
-        } else {
-          setIsLoading(false);
-        }
-      })
-      .catch(err => {
-        console.error("Auth check failed:", err);
-        setIsLoading(false);
-      });
-  }, [router]);
-
-  useEffect(() => {
-    if (role && role !== 'AGENT_VIEWER') loadUptime();
-  }, [timeRange]);
-
-  useEffect(() => {
-    if (role === 'SUPER_ADMIN') {
-      loadStorage();
-    }
-  }, [role]);
-
-  useEffect(() => {
-    if (role && role !== 'AGENT_VIEWER' && refreshKey > 0) {
-      const siteUuid = localStorage.getItem("backone_site_uuid") || undefined;
-      getAgents(siteUuid)
-        .then(data => setAgents(data))
-        .catch(err => console.warn("Failed to auto-refresh agents:", err));
-      loadUptime();
-      if (role === 'SUPER_ADMIN') {
-        loadStorage();
-      }
-    }
-  }, [refreshKey, role]);
-
-  const openDelete = (agent: Agent) => {
-    setSelectedAgent(agent);
-    setIsDeleteOpen(true);
-  };
+    document.title = "Agents | BackOne - Deep Package Inspection";
+  }, []);
+  const {
+    role,
+    agents,
+    uptimeMap,
+    storageMap,
+    isLoading,
+    error,
+    isCreateOpen,
+    setIsCreateOpen,
+    isDeleteOpen,
+    setIsDeleteOpen,
+    detailAgent,
+    setDetailAgent,
+    managedUsers,
+    accountModalOpen,
+    setAccountModalOpen,
+    accountModalAgent,
+    setAccountModalAgent,
+    externalModalOpen,
+    setExternalModalOpen,
+    externalModalUser,
+    setExternalModalUser,
+    targetSiteUuid,
+    setTargetSiteUuid,
+    targetCreatedBy,
+    setTargetCreatedBy,
+    locations,
+    isLocModalOpen,
+    setIsLocModalOpen,
+    locModalAgentUuid,
+    setLocModalAgentUuid,
+    locModalAgentLabel,
+    setLocModalAgentLabel,
+    locModalCurrentLoc,
+    setLocModalCurrentLoc,
+    viewAsLoading,
+    selectedAgent,
+    loadAgents,
+    loadLocations,
+    handleViewAs,
+    openDelete,
+    handleEditLocation,
+  } = useAgentsData();
 
   const columns = getAgentColumns({
     role,
@@ -159,42 +72,40 @@ export default function AgentsPage() {
     setAccountModalAgent,
     handleViewAs,
     openDelete,
+    handleEditLocation,
+    locationUuids: new Set(locations.map((l: any) => l.agent_uuid)),
   });
 
-  const totalAgents = agents.length;
-  const onlineAgents = agents.filter(a => a.last_seen_at?.human === 'Online').length;
-  const offlineAgents = totalAgents - onlineAgents;
-  const uptimeValues = agents.map(a => uptimeMap[a.uuid || a.serial] ?? 100);
-  const avgUptime = uptimeValues.length > 0 ? uptimeValues.reduce((s, v) => s + v, 0) / uptimeValues.length : 100;
-
-  const externalUsers = managedUsers.filter(u => u.role !== 'AGENT_VIEWER');
   const externalColumns = getExternalAccountColumns((user) => {
     setExternalModalUser(user);
     setExternalModalOpen(true);
   });
 
+  const totalAgents = agents.length;
+  const onlineAgents = agents.filter(a => {
+    const hum = a.last_seen_at?.human;
+    return hum === 'Online' || hum === 'Flows Detected' || (hum && hum.startsWith('Last seen:'));
+  }).length;
+  const offlineAgents = totalAgents - onlineAgents;
+  const uptimeValues = agents.map(a => uptimeMap[a.uuid || a.serial] ?? 100);
+  const avgUptime = uptimeValues.length > 0 ? uptimeValues.reduce((s, v) => s + v, 0) / uptimeValues.length : 100;
+
+  const externalUsers = managedUsers.filter(u => u.role !== 'AGENT_VIEWER');
+  const superadminUsers = externalUsers.filter(u => u.role === 'SUPER_ADMIN' || !u.site_uuid);
+  const siabUsers = externalUsers.filter(u => u.site_uuid === '6681452d_9cae_4ff4_8ae8_0d504774265e');
+  const nexusUsers = externalUsers.filter(u => u.site_uuid === 'd7902405_0dc2_458b_8584_ed4d24b64f24');
+
   return (
-    <div className="space-y-6">
+    <div className="space-y-6" style={{ fontFamily: "Georgia, serif" }}>
       <div className="flex items-center justify-between">
         <div>
-          <h2 className="text-3xl font-bold tracking-tight text-white flex items-center gap-3">
+          <h2 className="text-2xl font-semibold tracking-tight text-white flex items-center gap-3">
             Agents Inventory
             {isLoading && <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />}
           </h2>
-          <p className="text-muted-foreground mt-1">Managed DPI probes, remote collectors, and probe infrastructure.</p>
-        </div>
-        <div className="flex items-center gap-3">
-          {(role === 'SUPER_ADMIN' || role === 'TENANT_ADMIN') && (
-            <button 
-              onClick={() => setIsCreateOpen(true)}
-              className="flex items-center gap-2 bg-primary hover:bg-primary/95 text-primary-foreground px-4 py-2 rounded-xl text-sm font-semibold transition-all shadow-lg shadow-blue-500/10"
-            >
-              <Plus className="w-4 h-4" />
-              Provision Agent
-            </button>
-          )}
-          <HelpTrigger pageId="agents" />
+          <p className="text-sm text-muted-foreground mt-1">Managed DPI probes, remote collectors, and probe infrastructure.</p>
         </div>
+        <HelpTrigger pageId="agents" />
       </div>
 
       {error && (
@@ -203,111 +114,94 @@ export default function AgentsPage() {
         </div>
       )}
 
-      {/* Historical Uptime Status Cards Grid */}
-      <div className="grid grid-cols-1 md:grid-cols-4 gap-4 text-xs font-semibold">
-        <div className="bg-slate-900/50 backdrop-blur-sm border border-slate-800/80 p-5 rounded-2xl flex flex-col relative overflow-hidden group">
-          <div className="absolute top-0 right-0 p-3 opacity-10 group-hover:opacity-20 transition-opacity">
-            <Server className="w-12 h-12 text-blue-400" />
-          </div>
-          <span className="text-slate-400 uppercase tracking-wider mb-1">Total Agents</span>
-          <span className="text-2xl font-black text-white tracking-tight">{totalAgents}</span>
-        </div>
-        <div className="bg-slate-900/50 backdrop-blur-sm border border-slate-800/80 p-5 rounded-2xl flex flex-col relative overflow-hidden group">
-          <div className="absolute top-0 right-0 p-3 opacity-10 group-hover:opacity-20 transition-opacity">
-            <CheckCircle2 className="w-12 h-12 text-emerald-400" />
-          </div>
-          <span className="text-slate-400 uppercase tracking-wider mb-1">Online Agents</span>
-          <span className="text-2xl font-black text-emerald-400 tracking-tight">{onlineAgents}</span>
-        </div>
-        <div className="bg-slate-900/50 backdrop-blur-sm border border-slate-800/80 p-5 rounded-2xl flex flex-col relative overflow-hidden group">
-          <div className="absolute top-0 right-0 p-3 opacity-10 group-hover:opacity-20 transition-opacity">
-            <XCircle className="w-12 h-12 text-red-400" />
-          </div>
-          <span className="text-slate-400 uppercase tracking-wider mb-1">Offline Agents</span>
-          <span className="text-2xl font-black text-red-400 tracking-tight">{offlineAgents}</span>
-        </div>
-        <div className="bg-slate-900/50 backdrop-blur-sm border border-slate-800/80 p-5 rounded-2xl flex flex-col relative overflow-hidden group">
-          <div className="absolute top-0 right-0 p-3 opacity-10 group-hover:opacity-20 transition-opacity">
-            <Activity className="w-12 h-12 text-cyan-400" />
-          </div>
-          <span className="text-slate-400 uppercase tracking-wider mb-1">Avg. Historical Uptime</span>
-          <span className="text-2xl font-black text-cyan-400 tracking-tight">{avgUptime.toFixed(2)}%</span>
-        </div>
-      </div>
-
-      <Card className="bg-card/50 backdrop-blur-sm border-border/50">
-        <CardHeader>
-          <CardTitle className="text-white">Provisioned Network Agents ({agents.length})</CardTitle>
-        </CardHeader>
-        <CardContent>
-          {isLoading ? (
-            <div className="flex items-center justify-center py-12">
-              <Loader2 className="w-8 h-8 animate-spin text-primary" />
-            </div>
-          ) : (
-            <DataTable
-              data={agents}
-              columns={columns}
-              searchPlaceholder="Search agents..."
-              searchFilter={(row, query) => {
-                const q = query.toLowerCase();
-                return (
-                  (row.uuid || "").toLowerCase().includes(q) ||
-                  (row.serial || "").toLowerCase().includes(q) ||
-                  (row.label || "").toLowerCase().includes(q)
-                );
-              }}
-            />
-          )}
-        </CardContent>
-      </Card>
+      <UptimeStatsCards
+        totalAgents={totalAgents}
+        onlineAgents={onlineAgents}
+        offlineAgents={offlineAgents}
+        avgUptime={avgUptime}
+      />
 
+      {/* Agent Location Map */}
       {(role === 'SUPER_ADMIN' || role === 'TENANT_ADMIN') && (
-        <Card className="bg-card/50 backdrop-blur-sm border-border/50">
-          <CardHeader className="flex flex-row items-center justify-between pb-2">
-            <CardTitle className="text-white">External Accounts Inventory ({externalUsers.length})</CardTitle>
-            <button
-              onClick={() => {
-                setExternalModalUser(null); // Mode Create
-                setExternalModalOpen(true);
-              }}
-              className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold bg-amber-500/20 text-amber-400 hover:bg-amber-500/30 border border-amber-500/30 rounded-lg transition-colors"
-            >
-              <Plus className="w-3.5 h-3.5" />
-              Add External Account
-            </button>
-          </CardHeader>
-          <CardContent>
-            {isLoading ? (
-              <div className="flex items-center justify-center py-12">
-                <Loader2 className="w-8 h-8 animate-spin text-primary" />
-              </div>
-            ) : (
-              <DataTable
-                data={externalUsers}
-                columns={externalColumns}
-                searchPlaceholder="Search accounts..."
-                searchFilter={(row, query) => {
-                  const q = query.toLowerCase();
-                  return (
-                    (row.username || "").toLowerCase().includes(q) ||
-                    (row.account_name || "").toLowerCase().includes(q) ||
-                    (row.role || "").toLowerCase().includes(q)
-                  );
-                }}
-              />
+        <div className="rounded-2xl border border-white/8 bg-slate-900/40 overflow-hidden relative z-0">
+          <div className="flex items-center justify-between px-5 py-3.5 border-b border-white/8">
+            <div className="flex items-center gap-2.5">
+              <MapPin className="w-4 h-4 text-indigo-400" />
+              <span className="text-sm font-semibold text-white">Agent Network Map</span>
+              <span className="text-xs text-slate-500">
+                {locations.length > 0
+                  ? `${locations.length} of ${agents.length} agent${agents.length !== 1 ? 's' : ''} positioned`
+                  : 'No positions configured yet'}
+              </span>
+            </div>
+            {agents.length > locations.length && (
+              <span className="text-[11px] text-amber-400 bg-amber-400/10 border border-amber-400/20 px-2.5 py-1 rounded-full">
+                {agents.length - locations.length} agent{agents.length - locations.length !== 1 ? 's' : ''} without location — click 📍 in the table
+              </span>
             )}
-          </CardContent>
-        </Card>
+          </div>
+          <div className="p-3">
+            <AgentLocationMap
+              pins={locations
+                .filter(loc => agents.some(a => (a.uuid || a.serial) === loc.agent_uuid))
+                .map(loc => {
+                  const agent = agents.find(a => (a.uuid || a.serial) === loc.agent_uuid);
+                  const agentLabel = agent
+                    ? (resolveAgentLabel(loc.agent_uuid, managedUsers) !== loc.agent_uuid
+                        ? resolveAgentLabel(loc.agent_uuid, managedUsers)
+                        : (agent.label || loc.label || loc.agent_uuid))
+                    : (loc.label || loc.agent_uuid);
+                  const isOnline = !!(agent?.last_seen_at?.human === 'Online' ||
+                                     agent?.last_seen_at?.human === 'Flows Detected' ||
+                                     (agent?.last_seen_at?.human && agent.last_seen_at.human.startsWith('Last seen:')));
+                  const uptime = uptimeMap[loc.agent_uuid];
+                  return {
+                    agent_uuid: loc.agent_uuid,
+                    label: agentLabel,
+                    latitude: loc.latitude,
+                    longitude: loc.longitude,
+                    isOnline,
+                    uptimePercent: uptime,
+                  };
+                })}
+              onEditLocation={handleEditLocation}
+              canEdit={role === 'SUPER_ADMIN' || role === 'TENANT_ADMIN'}
+            />
+          </div>
+        </div>
       )}
 
-      <AgentModals
+      <AgentsTableSection
+        agents={agents}
+        isLoading={isLoading}
+        columns={columns}
+        role={role}
+        onProvisionClick={() => setIsCreateOpen(true)}
+      />
+
+      {(role === 'SUPER_ADMIN' || role === 'TENANT_ADMIN') && (
+        <ExternalAccountsSection
+          role={role}
+          isLoading={isLoading}
+          externalUsers={externalUsers}
+          superadminUsers={superadminUsers}
+          siabUsers={siabUsers}
+          nexusUsers={nexusUsers}
+          externalColumns={externalColumns}
+          setExternalModalUser={setExternalModalUser}
+          setTargetSiteUuid={setTargetSiteUuid}
+          setTargetCreatedBy={setTargetCreatedBy}
+          setExternalModalOpen={setExternalModalOpen}
+        />
+      )}
+
+      <AgentsPageModals
         isCreateOpen={isCreateOpen}
         setIsCreateOpen={setIsCreateOpen}
         isDeleteOpen={isDeleteOpen}
         setIsDeleteOpen={setIsDeleteOpen}
         selectedAgent={selectedAgent}
-        onSuccess={loadAgents}
+        loadAgents={loadAgents}
         detailAgent={detailAgent}
         setDetailAgent={setDetailAgent}
         accountModalOpen={accountModalOpen}
@@ -315,13 +209,23 @@ export default function AgentsPage() {
         accountModalAgent={accountModalAgent}
         setAccountModalAgent={setAccountModalAgent}
         managedUsers={managedUsers}
-      />
-
-      <ExternalAccountModal
-        isOpen={externalModalOpen}
-        onClose={() => { setExternalModalOpen(false); setExternalModalUser(null); }}
-        onSuccess={loadAgents}
-        user={externalModalUser}
+        externalModalOpen={externalModalOpen}
+        setExternalModalOpen={setExternalModalOpen}
+        externalModalUser={externalModalUser}
+        setExternalModalUser={setExternalModalUser}
+        targetSiteUuid={targetSiteUuid}
+        setTargetSiteUuid={setTargetSiteUuid}
+        targetCreatedBy={targetCreatedBy}
+        setTargetCreatedBy={setTargetCreatedBy}
+        isLocModalOpen={isLocModalOpen}
+        setIsLocModalOpen={setIsLocModalOpen}
+        locModalAgentUuid={locModalAgentUuid}
+        setLocModalAgentUuid={setLocModalAgentUuid}
+        locModalAgentLabel={locModalAgentLabel}
+        setLocModalAgentLabel={setLocModalAgentLabel}
+        locModalCurrentLoc={locModalCurrentLoc}
+        setLocModalCurrentLoc={setLocModalCurrentLoc}
+        loadLocations={loadLocations}
       />
     </div>
   );
diff --git a/src/app/(dashboard)/agents/useAgentsData.ts b/src/app/(dashboard)/agents/useAgentsData.ts
index 34991aa..e0fccfe 100644
--- a/src/app/(dashboard)/agents/useAgentsData.ts
+++ b/src/app/(dashboard)/agents/useAgentsData.ts
@@ -2,7 +2,8 @@
 
 import { useState, useEffect } from "react";
 import { useRouter } from "next/navigation";
-import { getAgents, Agent } from "@/lib/actions/agents";
+import { getAgents } from "@/lib/actions/agents";
+import { Agent } from "@/lib/actions/agentsCore";
 import { getAdminUsers, startViewAs, getViewAsHeaders, type ManagedUser } from "@/lib/admin-api";
 import { useTimeFilter } from "@/contexts/TimeFilterContext";
 import { usePollingKey } from "@/lib/usePolling";
diff --git a/src/app/(dashboard)/apps/page.tsx b/src/app/(dashboard)/apps/page.tsx
index 96bd4b0..a5bf251 100644
--- a/src/app/(dashboard)/apps/page.tsx
+++ b/src/app/(dashboard)/apps/page.tsx
@@ -9,15 +9,15 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/Card";
 import { AppDetailModal } from "@/components/ui/AppDetailModal";
 import { Loader2, ChevronRight, Globe } from "lucide-react";
 import { UniversalFilters, useUniversalFilterState, FilterConfig } from "@/components/ui/UniversalFilters";
+import { HelpTrigger } from "@/components/help/HelpTrigger";
 import { fmtBytes, getAppFavicon, formatAppLabel } from "@/lib/utils";
 import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip as RechartsTooltip, ResponsiveContainer } from "recharts";
-import { HelpTrigger } from "@/components/help/HelpTrigger";
 
 export default function AppsPage() {
   const [mounted, setMounted] = useState(false);
   const [page, setPage] = useState(0);
   const pageSize = 20;
-  const { data, isLoading } = useTopApps(pageSize);
+  const { data, isLoading } = useTopApps();
   const [selectedApp, setSelectedApp] = useState<AppStat | null>(null);
 
   const { 
@@ -28,6 +28,7 @@ export default function AppsPage() {
 
   useEffect(() => {
     setMounted(true);
+    document.title = "Apps | BackOne - Deep Package Inspection";
   }, []);
 
   if (!mounted) return null;
@@ -126,13 +127,12 @@ export default function AppsPage() {
       accessor: (row) => <span className="font-medium text-white">{fmtBytes(row.download + row.upload)}</span>
     },
   ];
-
   return (
     <div className="space-y-6">
       <div className="flex items-center justify-between">
         <div>
-          <h2 className="text-3xl font-bold tracking-tight text-white flex items-center gap-3">
-            Applications
+          <h2 className="text-2xl font-bold tracking-tight text-white flex items-center gap-3">
+            Apps
             {isLoading && <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />}
           </h2>
           <p className="text-muted-foreground mt-1 text-sm">
@@ -141,7 +141,7 @@ export default function AppsPage() {
         </div>
         <HelpTrigger pageId="apps" />
       </div>
-      
+
       <UniversalFilters
         filters={filterConfigs}
         onChange={(id, val) => {
@@ -234,4 +234,4 @@ export default function AppsPage() {
       )}
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/src/app/(dashboard)/devices/page.tsx b/src/app/(dashboard)/devices/page.tsx
index 497ddde..1824068 100644
--- a/src/app/(dashboard)/devices/page.tsx
+++ b/src/app/(dashboard)/devices/page.tsx
@@ -15,7 +15,7 @@ import { HelpTrigger } from "@/components/help/HelpTrigger";
 
 export default function DevicesPage() {
   const [mounted, setMounted] = useState(false);
-  const devices = useDevices(5000);
+  const devices = useDevices();
   const [selectedDevice, setSelectedDevice] = useState<DeviceStat | null>(null);
 
   const { 
@@ -26,6 +26,7 @@ export default function DevicesPage() {
 
   useEffect(() => {
     setMounted(true);
+    document.title = "Devices | BackOne - Deep Package Inspection";
   }, []);
 
   if (!mounted) return null;
diff --git a/src/app/(dashboard)/dns/page.tsx b/src/app/(dashboard)/dns/page.tsx
index 1f033f0..6821e39 100644
--- a/src/app/(dashboard)/dns/page.tsx
+++ b/src/app/(dashboard)/dns/page.tsx
@@ -25,6 +25,7 @@ export default function DNSPage() {
 
   useEffect(() => {
     setMounted(true);
+    document.title = "DNS | BackOne - Deep Package Inspection";
   }, []);
 
   useEffect(() => {
@@ -97,13 +98,10 @@ export default function DNSPage() {
   return (
     <div className="space-y-6">
       <div className="flex items-center justify-between">
-        <div>
-          <h2 className="text-3xl font-bold tracking-tight text-white flex items-center gap-3">
-            DNS Intelligence
-            {isLoading && <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />}
-          </h2>
-          <p className="text-muted-foreground mt-1">Domain Name System resolution analytics and query logs.</p>
-        </div>
+        <h2 className="text-2xl font-bold tracking-tight text-white flex items-center gap-3">
+          DNS
+          {isLoading && <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />}
+        </h2>
         <HelpTrigger pageId="dns" />
       </div>
       
diff --git a/src/app/(dashboard)/dpi-analytics/DpiAnalyticsTabs.tsx b/src/app/(dashboard)/dpi-analytics/DpiAnalyticsTabs.tsx
new file mode 100644
index 0000000..a13ba7e
--- /dev/null
+++ b/src/app/(dashboard)/dpi-analytics/DpiAnalyticsTabs.tsx
@@ -0,0 +1,254 @@
+"use client";
+
+import React from "react";
+import { Tabs, Tab } from "@/components/ui/Tabs";
+import { DataTable } from "@/components/ui/DataTable";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/Card";
+import { fmtBytes, getKnownDomainService } from "@/lib/utils";
+import { MetadataDetailType } from "@/lib/api-metadata-detail";
+
+interface DpiAnalyticsTabsProps {
+  sniHostnames: any[];
+  loadingSni: boolean;
+  sslServerCn: any[];
+  loadingSslCn: boolean;
+  quicHostnames: any[];
+  loadingQuic: boolean;
+  netbios: any[];
+  loadingNetbios: boolean;
+  mdnsHostnames: any[];
+  loadingMdns: boolean;
+  discoveryOs: any[];
+  loadingOs: boolean;
+  dhcpFingerprints: any[];
+  loadingDhcp: boolean;
+  httpUserAgents: any[];
+  loadingHttpUa: boolean;
+  sshVersions: any[];
+  loadingSsh: boolean;
+  bittorrentHashes: any[];
+  loadingBittorrent: boolean;
+  openDetail: (type: MetadataDetailType, value: string) => void;
+}
+
+function ClickHint() {
+  return (
+    <span className="ml-2 text-[10px] font-normal text-blue-400/70 border border-blue-400/30 rounded px-1 py-0.5 align-middle">
+      Click row for details
+    </span>
+  );
+}
+
+export default function DpiAnalyticsTabs({
+  sniHostnames,
+  loadingSni,
+  sslServerCn,
+  loadingSslCn,
+  quicHostnames,
+  loadingQuic,
+  netbios,
+  loadingNetbios,
+  mdnsHostnames,
+  loadingMdns,
+  discoveryOs,
+  loadingOs,
+  dhcpFingerprints,
+  loadingDhcp,
+  httpUserAgents,
+  loadingHttpUa,
+  sshVersions,
+  loadingSsh,
+  bittorrentHashes,
+  loadingBittorrent,
+  openDetail,
+}: DpiAnalyticsTabsProps) {
+  return (
+    <Tabs>
+      {/* ── Hostnames & Servers ──────────────────────────────────────────── */}
+      <Tab label="Hostnames & Servers">
+        <div className="grid grid-cols-1 xl:grid-cols-2 gap-6">
+          <Card>
+            <CardHeader><CardTitle>SNI Hostnames<ClickHint /></CardTitle></CardHeader>
+            <CardContent>
+              <DataTable
+                data={sniHostnames}
+                isLoading={loadingSni}
+                onRowClick={(row: any) => openDetail("sni_hostname", row.sni_hostname)}
+                columns={[
+                  { 
+                    header: "Hostname", 
+                    accessor: (row: any) => {
+                      const srv = getKnownDomainService(row.sni_hostname);
+                      return (
+                        <div className="flex flex-col items-center justify-center py-1 w-full overflow-hidden text-center">
+                          <span className="truncate w-full block" title={row.sni_hostname}>{row.sni_hostname}</span>
+                          {srv && <span className="text-[10px] font-medium text-indigo-400 mt-0.5 truncate w-full block" title={srv}>{srv}</span>}
+                        </div>
+                      );
+                    }
+                  },
+                  { header: "Total", accessor: (row: any) => fmtBytes(row.total) },
+                ]}
+              />
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader><CardTitle>SSL Server Common Names<ClickHint /></CardTitle></CardHeader>
+            <CardContent>
+              <DataTable
+                data={sslServerCn}
+                isLoading={loadingSslCn}
+                onRowClick={(row: any) => openDetail("ssl_server_cn", row.ssl_server_cn)}
+                columns={[
+                  { 
+                    header: "Common Name", 
+                    accessor: (row: any) => {
+                      const srv = getKnownDomainService(row.ssl_server_cn);
+                      return (
+                        <div className="flex flex-col items-center justify-center py-1 w-full overflow-hidden text-center">
+                          <span className="truncate w-full block" title={row.ssl_server_cn}>{row.ssl_server_cn}</span>
+                          {srv && <span className="text-[10px] font-medium text-indigo-400 mt-0.5 truncate w-full block" title={srv}>{srv}</span>}
+                        </div>
+                      );
+                    }
+                  },
+                  { header: "Total", accessor: (row: any) => fmtBytes(row.total) },
+                ]}
+              />
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader><CardTitle>QUIC Hostnames<ClickHint /></CardTitle></CardHeader>
+            <CardContent>
+              <DataTable
+                data={quicHostnames}
+                isLoading={loadingQuic}
+                onRowClick={(row: any) => openDetail("quic_hostname", row.quic_hostname)}
+                columns={[
+                  { 
+                    header: "Hostname", 
+                    accessor: (row: any) => {
+                      const srv = getKnownDomainService(row.quic_hostname);
+                      return (
+                        <div className="flex flex-col items-center justify-center py-1 w-full overflow-hidden text-center">
+                          <span className="truncate w-full block" title={row.quic_hostname}>{row.quic_hostname}</span>
+                          {srv && <span className="text-[10px] font-medium text-indigo-400 mt-0.5 truncate w-full block" title={srv}>{srv}</span>}
+                        </div>
+                      );
+                    }
+                  },
+                  { header: "Total", accessor: (row: any) => fmtBytes(row.total) },
+                ]}
+              />
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader><CardTitle>NetBIOS Hostnames<ClickHint /></CardTitle></CardHeader>
+            <CardContent>
+              <DataTable
+                data={netbios}
+                isLoading={loadingNetbios}
+                onRowClick={(row: any) => openDetail("netbios_hostname", row.hostname)}
+                columns={[{ header: "Hostname", accessor: (row: any) => row.hostname }, { header: "Total", accessor: (row: any) => fmtBytes(row.total) }]}
+              />
+            </CardContent>
+          </Card>
+
+          <Card className="xl:col-span-2">
+            <CardHeader><CardTitle>mDNS Hostnames<ClickHint /></CardTitle></CardHeader>
+            <CardContent>
+              <DataTable
+                data={mdnsHostnames}
+                isLoading={loadingMdns}
+                onRowClick={(row: any) => openDetail("mdns_hostname", row.mdns_hostname)}
+                columns={[{ header: "Hostname", accessor: (row: any) => row.mdns_hostname }, { header: "Total", accessor: (row: any) => fmtBytes(row.total) }]}
+              />
+            </CardContent>
+          </Card>
+        </div>
+      </Tab>
+
+      {/* ── Client Fingerprints ──────────────────────────────────────────── */}
+      <Tab label="Client Fingerprints">
+        <div className="grid grid-cols-1 xl:grid-cols-2 gap-6">
+          <Card className="xl:col-span-2">
+            <CardHeader><CardTitle>Operating Systems Discovery<ClickHint /></CardTitle></CardHeader>
+            <CardContent>
+              <DataTable
+                data={discoveryOs}
+                isLoading={loadingOs}
+                onRowClick={(row: any) => openDetail("os_label", row.os_label)}
+                columns={[
+                  { header: "Operating System", accessor: (row: any) => row.os_label },
+                  { header: "Download", accessor: (row: any) => fmtBytes(row.download) },
+                  { header: "Upload", accessor: (row: any) => fmtBytes(row.upload) },
+                  { header: "Total", accessor: (row: any) => fmtBytes(row.total) },
+                ]}
+              />
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader><CardTitle>DHCP Fingerprints<ClickHint /></CardTitle></CardHeader>
+            <CardContent>
+              <DataTable
+                data={dhcpFingerprints}
+                isLoading={loadingDhcp}
+                onRowClick={(row: any) => openDetail("dhcp_fingerprint", row.fingerprint)}
+                columns={[{ header: "Fingerprint", accessor: (row: any) => row.fingerprint }, { header: "Total", accessor: (row: any) => fmtBytes(row.total) }]}
+              />
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader><CardTitle>HTTP User Agents<ClickHint /></CardTitle></CardHeader>
+            <CardContent>
+              <DataTable
+                data={httpUserAgents}
+                isLoading={loadingHttpUa}
+                onRowClick={(row: any) => openDetail("http_useragent", row.user_agent)}
+                columns={[{ header: "User Agent", accessor: (row: any) => row.user_agent }, { header: "Total", accessor: (row: any) => fmtBytes(row.total) }]}
+              />
+            </CardContent>
+          </Card>
+        </div>
+      </Tab>
+
+      {/* ── Specific Protocols ───────────────────────────────────────────── */}
+      <Tab label="Specific Protocols">
+        <div className="grid grid-cols-1 xl:grid-cols-2 gap-6">
+          <Card>
+            <CardHeader><CardTitle>SSH Versions<ClickHint /></CardTitle></CardHeader>
+            <CardContent>
+              <DataTable
+                data={sshVersions}
+                isLoading={loadingSsh}
+                onRowClick={(row: any) => openDetail("ssh_version", row.ssh_version)}
+                columns={[{ header: "SSH Version", accessor: (row: any) => row.ssh_version }, { header: "Total", accessor: (row: any) => fmtBytes(row.total) }]}
+              />
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader><CardTitle>BitTorrent Hashes<ClickHint /></CardTitle></CardHeader>
+            <CardContent>
+              <DataTable
+                data={bittorrentHashes}
+                isLoading={loadingBittorrent}
+                onRowClick={(row: any) => openDetail("bittorrent_hash", row.info_hash)}
+                columns={[
+                  { header: "Label", accessor: (row: any) => row.label },
+                  { header: "Info Hash", accessor: (row: any) => row.info_hash },
+                  { header: "Total", accessor: (row: any) => fmtBytes(row.total) },
+                ]}
+              />
+            </CardContent>
+          </Card>
+        </div>
+      </Tab>
+    </Tabs>
+  );
+}
diff --git a/src/app/(dashboard)/dpi-analytics/page.tsx b/src/app/(dashboard)/dpi-analytics/page.tsx
index 181870f..c8c2d05 100644
--- a/src/app/(dashboard)/dpi-analytics/page.tsx
+++ b/src/app/(dashboard)/dpi-analytics/page.tsx
@@ -1,9 +1,6 @@
 "use client";
 
-import { useState, useCallback } from "react";
-import { Tabs, Tab } from "@/components/ui/Tabs";
-import { DataTable } from "@/components/ui/DataTable";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/Card";
+import { useState, useCallback, useEffect } from "react";
 import {
   useNetbios, useDiscoveryOs, useDhcpFingerprints,
   useHttpUserAgents, useSniHostnames, useSslServerCn,
@@ -13,25 +10,18 @@ import {
 import { MetadataDetailPanel } from "@/components/dpi/MetadataDetailPanel";
 import { MetadataDetailType } from "@/lib/api-metadata-detail";
 import { useTimeFilter } from "@/contexts/TimeFilterContext";
-import { fmtBytes, getKnownDomainService } from "@/lib/utils";
-
-// Clickable hint badge shown in table column headers when rows are interactive
-function ClickHint() {
-  return (
-    <span className="ml-2 text-[10px] font-normal text-blue-400/70 border border-blue-400/30 rounded px-1 py-0.5 align-middle">
-      Click row for details
-    </span>
-  );
-}
-
 import { HelpTrigger } from "@/components/help/HelpTrigger";
+import DpiAnalyticsTabs from "./DpiAnalyticsTabs";
 
 export default function DpiAnalyticsPage() {
   const { timeRange } = useTimeFilter();
-  // Detail panel state
-  const [detailType,  setDetailType]  = useState<MetadataDetailType | null>(null);
+  const [detailType, setDetailType] = useState<MetadataDetailType | null>(null);
   const [detailValue, setDetailValue] = useState<string | null>(null);
 
+  useEffect(() => {
+    document.title = "DPI MetaData | BackOne - Deep Package Inspection";
+  }, []);
+
   const openDetail = useCallback((type: MetadataDetailType, value: string) => {
     if (!value || value === "—") return;
     setDetailType(type);
@@ -43,24 +33,20 @@ export default function DpiAnalyticsPage() {
     setDetailValue(null);
   }, []);
 
-  // Hostnames & Servers Tab
-  const { data: sniHostnames,  isLoading: loadingSni }    = useSniHostnames(50);
-  const { data: sslServerCn,   isLoading: loadingSslCn }  = useSslServerCn(50);
-  const { data: quicHostnames, isLoading: loadingQuic }   = useQuicHostnames(50);
-  const { data: netbios,       isLoading: loadingNetbios } = useNetbios(50);
-  const { data: mdnsHostnames, isLoading: loadingMdns }   = useMdnsHostnames(50);
-
-  // Client Fingerprints Tab
-  const { data: discoveryOs,    isLoading: loadingOs }    = useDiscoveryOs(50);
-  const { data: dhcpFingerprints, isLoading: loadingDhcp } = useDhcpFingerprints(50);
-  const { data: httpUserAgents, isLoading: loadingHttpUa } = useHttpUserAgents(50);
-
-  // Specific Protocols Tab
-  const { data: sshVersions,    isLoading: loadingSsh }       = useSshVersions(50);
-  const { data: bittorrentHashes, isLoading: loadingBittorrent } = useBittorrentHashes(50);
+  // Data Fetch Hooks
+  const { data: sniHostnames, isLoading: loadingSni } = useSniHostnames();
+  const { data: sslServerCn, isLoading: loadingSslCn } = useSslServerCn();
+  const { data: quicHostnames, isLoading: loadingQuic } = useQuicHostnames();
+  const { data: netbios, isLoading: loadingNetbios } = useNetbios();
+  const { data: mdnsHostnames, isLoading: loadingMdns } = useMdnsHostnames();
+  const { data: discoveryOs, isLoading: loadingOs } = useDiscoveryOs();
+  const { data: dhcpFingerprints, isLoading: loadingDhcp } = useDhcpFingerprints();
+  const { data: httpUserAgents, isLoading: loadingHttpUa } = useHttpUserAgents();
+  const { data: sshVersions, isLoading: loadingSsh } = useSshVersions();
+  const { data: bittorrentHashes, isLoading: loadingBittorrent } = useBittorrentHashes();
 
   return (
-    <div className="space-y-6">
+    <div className="space-y-6 animate-fade-in">
       <div className="flex items-center justify-between">
         <div>
           <h1 className="text-3xl font-bold text-white tracking-tight">DPI MetaData</h1>
@@ -72,216 +58,30 @@ export default function DpiAnalyticsPage() {
         <HelpTrigger pageId="dpi-analytics" />
       </div>
 
-      <Tabs>
-        {/* ── Hostnames & Servers ──────────────────────────────────────────── */}
-        <Tab label="Hostnames & Servers">
-          <div className="grid grid-cols-1 xl:grid-cols-2 gap-6">
+      <DpiAnalyticsTabs
+        sniHostnames={sniHostnames || []}
+        loadingSni={loadingSni}
+        sslServerCn={sslServerCn || []}
+        loadingSslCn={loadingSslCn}
+        quicHostnames={quicHostnames || []}
+        loadingQuic={loadingQuic}
+        netbios={netbios || []}
+        loadingNetbios={loadingNetbios}
+        mdnsHostnames={mdnsHostnames || []}
+        loadingMdns={loadingMdns}
+        discoveryOs={discoveryOs || []}
+        loadingOs={loadingOs}
+        dhcpFingerprints={dhcpFingerprints || []}
+        loadingDhcp={loadingDhcp}
+        httpUserAgents={httpUserAgents || []}
+        loadingHttpUa={loadingHttpUa}
+        sshVersions={sshVersions || []}
+        loadingSsh={loadingSsh}
+        bittorrentHashes={bittorrentHashes || []}
+        loadingBittorrent={loadingBittorrent}
+        openDetail={openDetail}
+      />
 
-            <Card>
-              <CardHeader><CardTitle>SNI Hostnames (TLS)<ClickHint /></CardTitle></CardHeader>
-              <CardContent>
-                <DataTable
-                  data={sniHostnames}
-                  isLoading={loadingSni}
-                  onRowClick={(row: any) => openDetail("sni_hostname", row.sni_hostname)}
-                  columns={[
-                    { 
-                      header: "Hostname", 
-                      accessor: (row: any) => {
-                        const srv = getKnownDomainService(row.sni_hostname);
-                        return (
-                          <div className="flex flex-col items-center justify-center py-1 w-full overflow-hidden text-center">
-                            <span className="truncate w-full block" title={row.sni_hostname}>{row.sni_hostname}</span>
-                            {srv && <span className="text-[10px] font-medium text-indigo-400 mt-0.5 truncate w-full block" title={srv}>{srv}</span>}
-                          </div>
-                        );
-                      }
-                    },
-                    { header: "Total",    accessor: (row: any) => fmtBytes(row.total) },
-                  ]}
-                />
-              </CardContent>
-            </Card>
-
-            <Card>
-              <CardHeader><CardTitle>SSL Server Common Names<ClickHint /></CardTitle></CardHeader>
-              <CardContent>
-                <DataTable
-                  data={sslServerCn}
-                  isLoading={loadingSslCn}
-                  onRowClick={(row: any) => openDetail("ssl_server_cn", row.ssl_server_cn)}
-                  columns={[
-                    { 
-                      header: "Common Name", 
-                      accessor: (row: any) => {
-                        const srv = getKnownDomainService(row.ssl_server_cn);
-                        return (
-                          <div className="flex flex-col items-center justify-center py-1 w-full overflow-hidden text-center">
-                            <span className="truncate w-full block" title={row.ssl_server_cn}>{row.ssl_server_cn}</span>
-                            {srv && <span className="text-[10px] font-medium text-indigo-400 mt-0.5 truncate w-full block" title={srv}>{srv}</span>}
-                          </div>
-                        );
-                      }
-                    },
-                    { header: "Total",       accessor: (row: any) => fmtBytes(row.total) },
-                  ]}
-                />
-              </CardContent>
-            </Card>
-
-            <Card>
-              <CardHeader><CardTitle>QUIC Hostnames<ClickHint /></CardTitle></CardHeader>
-              <CardContent>
-                <DataTable
-                  data={quicHostnames}
-                  isLoading={loadingQuic}
-                  onRowClick={(row: any) => openDetail("quic_hostname", row.quic_hostname)}
-                  columns={[
-                    { 
-                      header: "Hostname", 
-                      accessor: (row: any) => {
-                        const srv = getKnownDomainService(row.quic_hostname);
-                        return (
-                          <div className="flex flex-col items-center justify-center py-1 w-full overflow-hidden text-center">
-                            <span className="truncate w-full block" title={row.quic_hostname}>{row.quic_hostname}</span>
-                            {srv && <span className="text-[10px] font-medium text-indigo-400 mt-0.5 truncate w-full block" title={srv}>{srv}</span>}
-                          </div>
-                        );
-                      }
-                    },
-                    { header: "Total",    accessor: (row: any) => fmtBytes(row.total) },
-                  ]}
-                />
-              </CardContent>
-            </Card>
-
-            <Card>
-              <CardHeader><CardTitle>NetBIOS Hostnames<ClickHint /></CardTitle></CardHeader>
-              <CardContent>
-                <DataTable
-                  data={netbios}
-                  isLoading={loadingNetbios}
-                  onRowClick={(row: any) => openDetail("netbios_hostname", row.hostname)}
-                  columns={[
-                    { header: "Hostname", accessor: (row: any) => row.hostname },
-                    { header: "Total",    accessor: (row: any) => fmtBytes(row.total) },
-                  ]}
-                />
-              </CardContent>
-            </Card>
-
-            <Card className="xl:col-span-2">
-              <CardHeader><CardTitle>mDNS Hostnames<ClickHint /></CardTitle></CardHeader>
-              <CardContent>
-                <DataTable
-                  data={mdnsHostnames}
-                  isLoading={loadingMdns}
-                  onRowClick={(row: any) => openDetail("mdns_hostname", row.mdns_hostname)}
-                  columns={[
-                    { header: "Hostname", accessor: (row: any) => row.mdns_hostname },
-                    { header: "Total",    accessor: (row: any) => fmtBytes(row.total) },
-                  ]}
-                />
-              </CardContent>
-            </Card>
-
-          </div>
-        </Tab>
-
-        {/* ── Client Fingerprints ──────────────────────────────────────────── */}
-        <Tab label="Client Fingerprints">
-          <div className="grid grid-cols-1 xl:grid-cols-2 gap-6">
-
-            <Card className="xl:col-span-2">
-              <CardHeader><CardTitle>Operating Systems Discovery<ClickHint /></CardTitle></CardHeader>
-              <CardContent>
-                <DataTable
-                  data={discoveryOs}
-                  isLoading={loadingOs}
-                  onRowClick={(row: any) => openDetail("os_label", row.os_label)}
-                  columns={[
-                    { header: "Operating System", accessor: (row: any) => row.os_label },
-                    { header: "Download",         accessor: (row: any) => fmtBytes(row.download) },
-                    { header: "Upload",           accessor: (row: any) => fmtBytes(row.upload) },
-                    { header: "Total",            accessor: (row: any) => fmtBytes(row.total) },
-                  ]}
-                />
-              </CardContent>
-            </Card>
-
-            <Card>
-              <CardHeader><CardTitle>DHCP Fingerprints<ClickHint /></CardTitle></CardHeader>
-              <CardContent>
-                <DataTable
-                  data={dhcpFingerprints}
-                  isLoading={loadingDhcp}
-                  onRowClick={(row: any) => openDetail("dhcp_fingerprint", row.fingerprint)}
-                  columns={[
-                    { header: "Fingerprint", accessor: (row: any) => row.fingerprint },
-                    { header: "Total",       accessor: (row: any) => fmtBytes(row.total) },
-                  ]}
-                />
-              </CardContent>
-            </Card>
-
-            <Card>
-              <CardHeader><CardTitle>HTTP User Agents<ClickHint /></CardTitle></CardHeader>
-              <CardContent>
-                <DataTable
-                  data={httpUserAgents}
-                  isLoading={loadingHttpUa}
-                  onRowClick={(row: any) => openDetail("http_useragent", row.user_agent)}
-                  columns={[
-                    { header: "User Agent", accessor: (row: any) => row.user_agent },
-                    { header: "Total",      accessor: (row: any) => fmtBytes(row.total) },
-                  ]}
-                />
-              </CardContent>
-            </Card>
-
-          </div>
-        </Tab>
-
-        {/* ── Specific Protocols ───────────────────────────────────────────── */}
-        <Tab label="Specific Protocols">
-          <div className="grid grid-cols-1 xl:grid-cols-2 gap-6">
-
-            <Card>
-              <CardHeader><CardTitle>SSH Versions<ClickHint /></CardTitle></CardHeader>
-              <CardContent>
-                <DataTable
-                  data={sshVersions}
-                  isLoading={loadingSsh}
-                  onRowClick={(row: any) => openDetail("ssh_version", row.ssh_version)}
-                  columns={[
-                    { header: "SSH Version", accessor: (row: any) => row.ssh_version },
-                    { header: "Total",       accessor: (row: any) => fmtBytes(row.total) },
-                  ]}
-                />
-              </CardContent>
-            </Card>
-
-            <Card>
-              <CardHeader><CardTitle>BitTorrent Hashes<ClickHint /></CardTitle></CardHeader>
-              <CardContent>
-                <DataTable
-                  data={bittorrentHashes}
-                  isLoading={loadingBittorrent}
-                  onRowClick={(row: any) => openDetail("bittorrent_hash", row.info_hash)}
-                  columns={[
-                    { header: "Label",     accessor: (row: any) => row.label },
-                    { header: "Info Hash", accessor: (row: any) => row.info_hash },
-                    { header: "Total",     accessor: (row: any) => fmtBytes(row.total) },
-                  ]}
-                />
-              </CardContent>
-            </Card>
-
-          </div>
-        </Tab>
-      </Tabs>
-
-      {/* ── Row Detail Slide-Out Panel ────────────────────────────────────── */}
       <MetadataDetailPanel
         type={detailType}
         value={detailValue}
diff --git a/src/app/(dashboard)/events/page.tsx b/src/app/(dashboard)/events/page.tsx
index 724b046..1866a29 100644
--- a/src/app/(dashboard)/events/page.tsx
+++ b/src/app/(dashboard)/events/page.tsx
@@ -8,10 +8,10 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/Card";
 import { Loader2, AlertCircle, Info, AlertTriangle } from "lucide-react";
 import { DeviceDetailModal } from "@/components/ui/DeviceDetailModal";
 import { UniversalFilters, useUniversalFilterState, FilterConfig } from "@/components/ui/UniversalFilters";
+import { HelpTrigger } from "@/components/help/HelpTrigger";
 
 import { useSearchParams } from "next/navigation";
 import { Suspense } from "react";
-import { HelpTrigger } from "@/components/help/HelpTrigger";
 
 
 
@@ -159,13 +159,10 @@ function EventsContent() {
   return (
     <div className="space-y-6">
       <div className="flex items-center justify-between">
-        <div>
-          <h2 className="text-3xl font-bold tracking-tight text-white flex items-center gap-3">
-            Network Events
-            {isLoading && <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />}
-          </h2>
-          <p className="text-muted-foreground mt-1">Real-time system, security, and interface network log events.</p>
-        </div>
+        <h2 className="text-2xl font-bold tracking-tight text-white flex items-center gap-3">
+          Network Events
+          {isLoading && <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />}
+        </h2>
         <HelpTrigger pageId="events" />
       </div>
       
diff --git a/src/app/(dashboard)/flows/explainFlow.ts b/src/app/(dashboard)/flows/explainFlow.ts
new file mode 100644
index 0000000..a48b64a
--- /dev/null
+++ b/src/app/(dashboard)/flows/explainFlow.ts
@@ -0,0 +1,46 @@
+export function explainAppOrPort(appLabel: string | null, domain: string | null, port: number) {
+  const label = appLabel || domain || "";
+  const portStr = String(port);
+  
+  const matches: Record<string, string> = {
+    "1433": "MSSQL Database Server",
+    "1434": "MSSQL Monitor Server",
+    "3306": "MySQL/MariaDB Database Server",
+    "5432": "PostgreSQL Database Server",
+    "1521": "Oracle Database Server",
+    "27017": "Database Server",
+    "6379": "Redis Key-Value Cache",
+    "80": "Unencrypted Web Traffic (HTTP)",
+    "443": "Encrypted Web Traffic (HTTPS/TLS)",
+    "22": "SSH Remote Management / SFTP",
+    "21": "FTP File Upload/Download (Unencrypted)",
+    "23": "Telnet Command Shell (Insecure)",
+    "25": "SMTP Mail Delivery",
+    "587": "Secure SMTP Mail Delivery",
+    "110": "POP3 Mail Storage Retrieval",
+    "993": "Secure IMAP Mail Service",
+    "53": "DNS Server Query (Domain Lookup)",
+    "123": "NTP Network Clock Synchronizer",
+    "161": "SNMP Network Device Monitoring",
+    "3389": "RDP Remote Desktop Management",
+    "445": "SMB Windows File Sharing",
+    "137": "NetBIOS Name Service",
+    "138": "NetBIOS Datagram Service",
+    "139": "NetBIOS Session Service",
+    "1812": "RADIUS Authentication Server",
+    "1813": "RADIUS Accounting Server"
+  };
+
+  let mainLabel = label;
+  let subLabel = matches[portStr] || (label.toLowerCase().includes("tls") || label.toLowerCase().includes("https") ? "Encrypted Connection (SSL/TLS)" : "");
+
+  if (appLabel && appLabel.includes("(") && domain && domain.startsWith("Port ")) {
+    mainLabel = appLabel;
+    subLabel = domain;
+  }
+
+  return {
+    main: mainLabel || `Port ${port}`,
+    sub: subLabel
+  };
+}
diff --git a/src/app/(dashboard)/flows/page.tsx b/src/app/(dashboard)/flows/page.tsx
index bf63ce0..7914619 100644
--- a/src/app/(dashboard)/flows/page.tsx
+++ b/src/app/(dashboard)/flows/page.tsx
@@ -2,67 +2,24 @@
 
 import { useState, useEffect } from "react";
 import { TimestampCell } from "@/components/ui/TimestampCell";
-import { useFlows } from "@/lib/api-with-context";
+import { useFlows, useFlowsOptions } from "@/lib/api-with-context";
 import { DataTable, Column } from "@/components/ui/DataTable";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/Card";
-import { Loader2 } from "lucide-react";
+import { Loader2, Download, Search } from "lucide-react";
 import { fmtBytes, formatAppLabel } from "@/lib/utils";
 import { IpDetails } from "@/components/ui/IpDetails";
 import { DeviceDetailModal } from "@/components/ui/DeviceDetailModal";
 import { UniversalFilters, useUniversalFilterState, FilterConfig } from "@/components/ui/UniversalFilters";
+import { explainAppOrPort } from "./explainFlow";
+import { downloadCsv } from "@/components/ui/DataTableCsvHelper";
 import { HelpTrigger } from "@/components/help/HelpTrigger";
 
-function explainAppOrPort(appLabel: string | null, domain: string | null, port: number) {
-  const label = appLabel || domain || "";
-  const portStr = String(port);
-  
-  const matches: Record<string, string> = {
-    "1433": "MSSQL Database Server",
-    "1434": "MSSQL Monitor Server",
-    "3306": "MySQL/MariaDB Database Server",
-    "5432": "PostgreSQL Database Server",
-    "1521": "Oracle Database Server",
-    "27017": "Database Server",
-    "6379": "Redis Key-Value Cache",
-    "80": "Unencrypted Web Traffic (HTTP)",
-    "443": "Encrypted Web Traffic (HTTPS/TLS)",
-    "22": "SSH Remote Management / SFTP",
-    "21": "FTP File Upload/Download (Unencrypted)",
-    "23": "Telnet Command Shell (Insecure)",
-    "25": "SMTP Mail Delivery",
-    "587": "Secure SMTP Mail Delivery",
-    "110": "POP3 Mail Storage Retrieval",
-    "993": "Secure IMAP Mail Service",
-    "53": "DNS Server Query (Domain Lookup)",
-    "123": "NTP Network Clock Synchronizer",
-    "161": "SNMP Network Device Monitoring",
-    "3389": "RDP Remote Desktop Management",
-    "445": "SMB Windows File Sharing",
-    "137": "NetBIOS Name Service",
-    "138": "NetBIOS Datagram Service",
-    "139": "NetBIOS Session Service",
-    "1812": "RADIUS Authentication Server",
-    "1813": "RADIUS Accounting Server"
-  };
-
-  let mainLabel = label;
-  let subLabel = matches[portStr] || (label.toLowerCase().includes("tls") || label.toLowerCase().includes("https") ? "Encrypted Connection (SSL/TLS)" : "");
-
-  if (appLabel && appLabel.includes("(") && domain && domain.startsWith("Port ")) {
-    mainLabel = appLabel;
-    subLabel = domain;
-  }
-
-  return {
-    main: mainLabel || `Port ${port}`,
-    sub: subLabel
-  };
-}
-
 export default function FlowsPage() {
   const [mounted, setMounted] = useState(false);
   const [selectedIp, setSelectedIp] = useState<string | null>(null);
-  const { data, isLoading } = useFlows();
+  const [currentPage, setCurrentPage] = useState(1);
+  const [ipSearch, setIpSearch] = useState("");
+  const [debouncedSearch, setDebouncedSearch] = useState("");
   
   const { 
     filters, dateFrom, dateTo, 
@@ -70,18 +27,41 @@ export default function FlowsPage() {
     handleReset, activeCount 
   } = useUniversalFilterState();
 
+  // Debounce search query to prevent database query spamming
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedSearch(ipSearch);
+    }, 300);
+    return () => clearTimeout(timer);
+  }, [ipSearch]);
+
+  // Reset page to 1 when filters, date picker, or search text changes
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [filters, dateFrom, dateTo, debouncedSearch]);
+
+  const { data: optionsData } = useFlowsOptions();
+  const { data: flows = [], total = 0, isLoading } = useFlows(currentPage, 50, {
+    ...filters,
+    dateFrom,
+    dateTo,
+    search: debouncedSearch
+  });
+
   useEffect(() => {
     setMounted(true);
+    document.title = "Flows | BackOne - Deep Package Inspection";
   }, []);
 
   if (!mounted) return null;
 
-  const all = data || [];
-
-  // Extract unique options
   const opts = (key: string) => {
-    const raw = Array.from(new Set(all.map((r: any) => String(r[key] || "")).filter(Boolean)));
-    return raw.sort();
+    if (!optionsData) return [];
+    const mapping: Record<string, string[]> = {
+      protocol: optionsData.protocols, src_ip: optionsData.srcIps, dst_ip: optionsData.dstIps,
+      dst_port: optionsData.dstPorts, app_label: optionsData.apps, domain: optionsData.domains
+    };
+    return mapping[key] || [];
   };
 
   const filterConfigs: FilterConfig[] = [
@@ -95,49 +75,15 @@ export default function FlowsPage() {
     { id: "sort_upload", label: "Sort Upload", type: "select", value: filters.sort_upload, options: ["Descending", "Ascending"] },
   ];
 
-  const filteredData = all.filter((row: any) => {
-    if (filters.protocol && filters.protocol !== "All" && row.protocol !== filters.protocol) return false;
-    if (filters.src_ip && filters.src_ip !== "All" && row.src_ip !== filters.src_ip) return false;
-    if (filters.dst_ip && filters.dst_ip !== "All" && row.dst_ip !== filters.dst_ip) return false;
-    if (filters.dst_port && filters.dst_port !== "All" && String(row.dst_port) !== filters.dst_port) return false;
-    if (filters.app && filters.app !== "All" && row.app_label !== filters.app) return false;
-    if (filters.domain && filters.domain !== "All" && row.domain !== filters.domain) return false;
-    
-    if (dateFrom || dateTo) {
-      const d = row.last_seen ? new Date(row.last_seen).toISOString().slice(0, 10) : "";
-      if (dateFrom && d < dateFrom) return false;
-      if (dateTo && d > dateTo) return false;
-    }
-    
-    return true;
-  });
+  const minDate = new Date(Date.now() - 30 * 24 * 3600 * 1000).toISOString().slice(0, 10);
 
-  let processedData = [...filteredData];
-  const sortUpload = filters.sort_upload || "All";
-  const sortDownload = filters.sort_download || "All";
-  
-  if (sortUpload !== "All") {
-    processedData.sort((a, b) => sortUpload === "Descending" ? (b.bytes_upload ?? 0) - (a.bytes_upload ?? 0) : (a.bytes_upload ?? 0) - (b.bytes_upload ?? 0));
-  } else if (sortDownload !== "All") {
-    processedData.sort((a, b) => sortDownload === "Descending" ? (b.bytes_download ?? 0) - (a.bytes_download ?? 0) : (a.bytes_download ?? 0) - (b.bytes_download ?? 0));
-  } else {
-    processedData.sort((a, b) => {
-      const timeA = a.last_seen ? new Date(a.last_seen).getTime() : 0;
-      const timeB = b.last_seen ? new Date(b.last_seen).getTime() : 0;
-      return timeB - timeA;
-    });
-  }
+  const handleExport = () => {
+    const headers = ["Flow ID", "Src IP", "Dst IP", "Dst Port", "Protocol", "App / Domain", "Download (bytes)", "Upload (bytes)"];
+    const rows = [headers, ...flows.map(r => [r.flow_id || "", r.src_ip || "", r.dst_ip || "", r.dst_port ?? "", r.protocol || "", r.app_label || r.domain || `Port ${r.dst_port}`, r.bytes_download ?? 0, r.bytes_upload ?? 0])];
+    downloadCsv(`flows-${new Date().toISOString().slice(0,10)}.csv`, rows);
+  };
 
-  const minTime = all.reduce((min: number, r: any) => {
-    if (r.last_seen) {
-      const time = new Date(r.last_seen).getTime();
-      if (isFinite(time) && time < min) return time;
-    }
-    return min;
-  }, Infinity);
-  const minDate = minTime !== Infinity ? new Date(minTime).toISOString().slice(0, 10) : "2024-01-01";
-
-  const columns: Column<typeof data[0]>[] = [
+  const columns: Column<any>[] = [
     { 
       header: "Last Seen", 
       accessor: (row) => (
@@ -147,10 +93,19 @@ export default function FlowsPage() {
           showActiveStatus={true} 
         />
       ),
-      className: "w-[120px]"
+      className: "w-[170px]",
+      tooltip: (row) => new Date(row.last_seen).toLocaleString()
+    },
+    { 
+      header: "#", 
+      accessor: (row, i) => i + 1,
+      className: "w-[50px]"
+    },
+    { 
+      header: "Flow ID", 
+      accessor: (row) => row.flow_id,
+      className: "w-[130px]"
     },
-    { header: "#", accessor: (row, i) => i + 1 },
-    { header: "Flow ID", accessor: (row) => row.flow_id },
     { 
       header: "Src IP", 
       accessor: (row) => (
@@ -160,62 +115,80 @@ export default function FlowsPage() {
         >
           {row.src_ip}
         </button>
-      ) 
+      ),
+      className: "w-[120px]",
+      tooltip: (row) => row.src_ip
     },
     { 
       header: "Dst IP", 
       accessor: (row) => (
-        <div className="flex flex-col items-start">
+        <div className="flex flex-col items-center justify-center">
           <button
             onClick={() => setSelectedIp(row.dst_ip)}
-            className="text-blue-400 hover:text-blue-300 hover:underline font-mono text-left focus:outline-none"
+            className="text-blue-400 hover:text-blue-300 hover:underline font-mono text-center focus:outline-none"
           >
             {row.dst_ip}
           </button>
           <IpDetails ip={row.dst_ip} />
         </div>
-      ) 
+      ),
+      className: "w-[150px]",
+      tooltip: (row) => row.dst_ip
+    },
+    { 
+      header: "Dst Port", 
+      accessor: (row) => row.dst_port,
+      className: "w-[80px]"
+    },
+    { 
+      header: "Protocol", 
+      accessor: (row) => row.protocol,
+      className: "w-[80px]"
     },
-    { header: "Dst Port", accessor: (row) => row.dst_port },
-    { header: "Protocol", accessor: (row) => row.protocol },
     { 
       header: "App / Domain", 
       accessor: (row) => {
         const exp = explainAppOrPort(row.app_label, row.domain, row.dst_port);
         return (
-          <div className="flex flex-col">
-            <span className="font-semibold text-white truncate max-w-[200px]" title={exp.main}>
+          <div className="flex flex-col items-center justify-center">
+            <span className="font-semibold text-white truncate max-w-[200px] text-center" title={exp.main}>
               {exp.main}
             </span>
             {exp.sub && (
-              <span className="text-[10px] text-slate-400 italic">
+              <span className="text-[10px] text-slate-400 italic text-center">
                 {exp.sub}
               </span>
             )}
           </div>
         );
+      },
+      className: "w-[220px]",
+      tooltip: (row) => {
+        const exp = explainAppOrPort(row.app_label, row.domain, row.dst_port);
+        return exp.sub ? `${exp.main} (${exp.sub})` : exp.main;
       }
     },
     { 
       header: "Download", 
-      accessor: (row) => <span className="text-blue-400">{fmtBytes(row.bytes_download)}</span>
+      accessor: (row) => <span className="text-blue-400">{fmtBytes(row.bytes_download)}</span>,
+      className: "w-[90px]",
+      tooltip: (row) => `${fmtBytes(row.bytes_download)} (${(row.bytes_download || 0).toLocaleString()} bytes)`
     },
     { 
       header: "Upload", 
-      accessor: (row) => <span className="text-green-500">{fmtBytes(row.bytes_upload)}</span>
+      accessor: (row) => <span className="text-green-500">{fmtBytes(row.bytes_upload)}</span>,
+      className: "w-[90px]",
+      tooltip: (row) => `${fmtBytes(row.bytes_upload)} (${(row.bytes_upload || 0).toLocaleString()} bytes)`
     }
   ];
 
   return (
     <div className="space-y-6">
       <div className="flex items-center justify-between">
-        <div>
-          <h2 className="text-3xl font-bold tracking-tight text-white flex items-center gap-3">
-            Active Flows
-            {isLoading && <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />}
-          </h2>
-          <p className="text-muted-foreground mt-1">Real-time IP connection flows and protocol analysis.</p>
-        </div>
+        <h2 className="text-2xl font-bold tracking-tight text-white flex items-center gap-3">
+          Flows
+          {isLoading && <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />}
+        </h2>
         <HelpTrigger pageId="flows" />
       </div>
 
@@ -242,38 +215,37 @@ export default function FlowsPage() {
       />
       
       <Card className="bg-card/50 backdrop-blur-sm border-border/50">
-        <CardHeader>
-          <CardTitle className="text-white">Active Flows ({processedData.length})</CardTitle>
+        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-4 gap-4 flex-wrap">
+          <div className="flex items-center gap-4 flex-wrap">
+            <CardTitle className="text-white">Active Flows ({total.toLocaleString()})</CardTitle>
+            <div className="relative group">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground transition-colors group-focus-within:text-primary" />
+              <input
+                type="text"
+                placeholder="Search IP (source or dest)..."
+                value={ipSearch}
+                onChange={(e) => setIpSearch(e.target.value)}
+                className="w-[240px] rounded-lg border border-border bg-card/30 backdrop-blur-sm pl-9 pr-4 py-1.5 text-sm text-white placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/50 focus:bg-card/50 transition-all shadow-sm"
+              />
+            </div>
+          </div>
+          <button
+            onClick={handleExport}
+            title="Export current page flows to CSV"
+            className="flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-lg border border-emerald-500/40 bg-emerald-500/10 text-emerald-400 hover:bg-emerald-500/20 hover:border-emerald-500/70 hover:text-emerald-300 transition-all shadow-sm whitespace-nowrap"
+          >
+            <Download className="w-4 h-4" />
+            Export CSV ({total.toLocaleString()})
+          </button>
         </CardHeader>
         <CardContent>
           <DataTable
-            data={processedData}
+            data={flows}
             columns={columns}
-            searchPlaceholder="Search flows by IP, App, or Domain..."
-            searchFilter={(row, query) => {
-              const q = query.toLowerCase();
-              return (
-                (row.src_ip || "").toLowerCase().includes(q) ||
-                (row.dst_ip || "").toLowerCase().includes(q) ||
-                (row.app_label || "").toLowerCase().includes(q) ||
-                (row.domain || "").toLowerCase().includes(q) ||
-                (row.protocol || "").toLowerCase().includes(q)
-              );
-            }}
-            csvExport={{
-              filename: `flows-${new Date().toISOString().slice(0,10)}.csv`,
-              headers: ["Flow ID", "Src IP", "Dst IP", "Dst Port", "Protocol", "App / Domain", "Download (bytes)", "Upload (bytes)"],
-              rowSerializer: (row) => [
-                row.flow_id || "",
-                row.src_ip || "",
-                row.dst_ip || "",
-                row.dst_port ?? "",
-                row.protocol || "",
-                row.app_label || row.domain || `Port ${row.dst_port}`,
-                row.bytes_download ?? 0,
-                row.bytes_upload ?? 0,
-              ],
-            }}
+            serverSide={true}
+            totalCount={total}
+            currentPage={currentPage}
+            onPageChange={setCurrentPage}
           />
         </CardContent>
       </Card>
diff --git a/src/app/(dashboard)/geography/page.tsx b/src/app/(dashboard)/geography/page.tsx
index d1db2ee..19d7f38 100644
--- a/src/app/(dashboard)/geography/page.tsx
+++ b/src/app/(dashboard)/geography/page.tsx
@@ -13,7 +13,7 @@ import { HelpTrigger } from "@/components/help/HelpTrigger";
 export default function GeographyPage() {
   const [mounted, setMounted] = useState(false);
   const [showMap, setShowMap] = useState(false);
-  const { data, isLoading } = useCountries(50); // fetch 50 countries
+  const { data, isLoading } = useCountries();
 
   const { 
     filters,
@@ -34,6 +34,7 @@ export default function GeographyPage() {
 
   useEffect(() => {
     setMounted(true);
+    document.title = "Geo Traffic | BackOne - Deep Package Inspection";
   }, []);
 
   if (!mounted) return null;
@@ -109,7 +110,7 @@ export default function GeographyPage() {
             Geo Traffic
             {isLoading && <Loader2 className="w-5 h-5 animate-spin text-primary" />}
           </h2>
-          <p className="text-muted-foreground mt-1">Geographic distribution of inbound and outbound traffic by country.</p>
+          <p className="text-muted-foreground mt-1">Visualize data flow and activity across the globe.</p>
         </div>
         <HelpTrigger pageId="geography" />
       </div>
diff --git a/src/app/(dashboard)/intelligence/DeviceDiscoveryTable.tsx b/src/app/(dashboard)/intelligence/DeviceDiscoveryTable.tsx
new file mode 100644
index 0000000..86f0fab
--- /dev/null
+++ b/src/app/(dashboard)/intelligence/DeviceDiscoveryTable.tsx
@@ -0,0 +1,71 @@
+"use client";
+
+import React from "react";
+import { DataTable } from "@/components/ui/DataTable";
+import { TimestampCell } from "@/components/ui/TimestampCell";
+import { ChevronRight } from "lucide-react";
+import { fmtBytes } from "@/lib/utils";
+
+interface DeviceDiscoveryTableProps {
+  data: any[];
+  isLoading: boolean;
+  setSelectedDevice: (device: { ip: string; mac?: string } | null) => void;
+}
+
+export function DeviceDiscoveryTable({ data, isLoading, setSelectedDevice }: DeviceDiscoveryTableProps) {
+  return (
+    <DataTable 
+      data={data} isLoading={isLoading}
+      searchPlaceholder="Search by IP, MAC, OS..."
+      searchFilter={(row: any, q: string) => {
+        const query = q.toLowerCase();
+        return (row.ip_address || '').toLowerCase().includes(query) || (row.mac_address || '').toLowerCase().includes(query) || (row.os_label || '').toLowerCase().includes(query) || (row.device_type || '').toLowerCase().includes(query);
+      }}
+      csvExport={{
+        filename: `device-discovery-${new Date().toISOString().slice(0,10)}.csv`,
+        headers: ["IP Address", "MAC Address", "Device Type", "OS", "Manufacturer", "Download", "Upload", "Last Seen"],
+        rowSerializer: (row: any) => [row.ip_address || "", row.mac_address || "", row.device_type || "", row.os_label || "", row.manufacturer || "", row.download || 0, row.upload || 0, row.last_seen || ""]
+      }}
+      columns={[
+        { 
+          header: "Last Seen", 
+          className: "w-[15%]",
+          accessor: (row: any) => <TimestampCell timestamp={row.last_seen} showActiveStatus={true} /> 
+        },
+        { header: "#", accessor: (row, i) => i + 1, className: "w-[4%]" },
+        { 
+          header: "IP Address", 
+          className: "w-[16%]",
+          accessor: (row: any) => (
+            <div className="flex flex-col items-center justify-center">
+              <button
+                onClick={() => { if (row.ip_address) setSelectedDevice({ ip: row.ip_address, mac: row.mac_address }); }}
+                className={`flex items-center justify-center gap-1 group text-center ${row.ip_address ? 'cursor-pointer' : 'cursor-default'}`}
+                title={row.ip_address ? "Click to view device details" : ""}
+              >
+                <span className={`font-semibold transition-colors font-mono text-sm ${row.ip_address ? 'text-blue-400 group-hover:text-blue-300' : 'text-muted-foreground'}`}>
+                  {row.ip_address || "Unknown IP"}
+                </span>
+                {row.ip_address && <ChevronRight className="w-3 h-3 text-slate-600 group-hover:text-blue-400 transition-colors" />}
+              </button>
+              <span className="text-xs text-muted-foreground mt-0.5">{row.mac_address}</span>
+            </div>
+          )
+        },
+        { header: "Device Profile", className: "w-[20%]", accessor: (row: any) => (
+            <div className="flex flex-col items-center justify-center text-center">
+              <span className="text-white font-medium">{row.device_type || "-"}</span>
+              <span className="text-[10px] text-slate-400 font-medium mt-0.5">{row.os_label || "-"}</span>
+            </div>
+        ) },
+        { header: "Manufacturer", className: "w-[20%]", accessor: (row: any) => row.manufacturer || "-" },
+        { header: "Bandwidth", className: "w-[25%]", accessor: (row: any) => (
+            <div className="flex flex-col items-center justify-center text-center gap-0.5">
+              <span className="text-cyan-400 text-xs font-mono">↓ {fmtBytes(row.download)}</span>
+              <span className="text-green-400 text-xs font-mono">↑ {fmtBytes(row.upload)}</span>
+            </div>
+        ) },
+      ]}
+    />
+  );
+}
diff --git a/src/app/(dashboard)/intelligence/EncryptionAuditTable.tsx b/src/app/(dashboard)/intelligence/EncryptionAuditTable.tsx
new file mode 100644
index 0000000..3ea63e9
--- /dev/null
+++ b/src/app/(dashboard)/intelligence/EncryptionAuditTable.tsx
@@ -0,0 +1,92 @@
+"use client";
+
+import React from "react";
+import { DataTable } from "@/components/ui/DataTable";
+import { TimestampCell } from "@/components/ui/TimestampCell";
+import { ChevronRight } from "lucide-react";
+import { IpDetails } from "@/components/ui/IpDetails";
+import { fmtBytes } from "@/lib/utils";
+
+interface EncryptionAuditTableProps {
+  data: any[];
+  isLoading: boolean;
+  setSelectedDevice: (device: { ip: string; mac?: string } | null) => void;
+}
+
+export function EncryptionAuditTable({ data, isLoading, setSelectedDevice }: EncryptionAuditTableProps) {
+  return (
+    <DataTable 
+      data={data} isLoading={isLoading}
+      searchPlaceholder="Search by Device or IP..."
+      searchFilter={(row: any, q: string) => {
+        const query = q.toLowerCase();
+        return (row.ip_address || '').toLowerCase().includes(query) || (row.device_label || '').toLowerCase().includes(query) || (row.mac_address || '').toLowerCase().includes(query);
+      }}
+      csvExport={{
+        filename: `encryption-audit-${new Date().toISOString().slice(0,10)}.csv`,
+        headers: ["Device Label", "MAC Address", "IP Address", "Encrypted Data", "Encrypted %", "Total Data", "Risk Level"],
+        rowSerializer: (row: any) => [row.device_label || "", row.mac_address || "", row.ip_address || "", row.encrypted || 0, row.encrypted_pct || 0, row.total || 0, row.risk_level || ""]
+      }}
+      columns={[
+        { 
+          header: "Last Seen", 
+          className: "w-[15%]",
+          accessor: (row: any) => <TimestampCell timestamp={row.last_seen} showActiveStatus={true} /> 
+        },
+        { header: "#", accessor: (row, i) => i + 1, className: "w-[4%]" },
+        { 
+          header: "Device", 
+          className: "w-[25%]",
+          accessor: (row: any) => (
+            <div className="flex flex-col items-center justify-center text-center">
+              <span className="font-medium text-white">{row.device_label || row.ip_address}</span>
+              <span className="text-xs text-muted-foreground mt-0.5">{row.mac_address}</span>
+            </div>
+          )
+        },
+        { 
+          header: "IP Address", 
+          className: "w-[20%]",
+          accessor: (row: any) => (
+            <div className="flex flex-col items-center justify-center">
+              <button
+                onClick={() => { if (row.ip_address) setSelectedDevice({ ip: row.ip_address, mac: row.mac_address }); }}
+                className={`flex items-center justify-center gap-1 group text-center ${row.ip_address ? 'cursor-pointer' : 'cursor-default'}`}
+                title={row.ip_address ? "Click to view device details" : ""}
+              >
+                <span className={`font-semibold transition-colors font-mono text-sm ${row.ip_address ? 'text-blue-400 group-hover:text-blue-300' : 'text-muted-foreground'}`}>
+                  {row.ip_address || "Unknown IP"}
+                </span>
+                {row.ip_address && <ChevronRight className="w-3 h-3 text-slate-600 group-hover:text-blue-400 transition-colors" />}
+              </button>
+              {row.ip_address && <div className="mt-1 scale-90 origin-top"><IpDetails ip={row.ip_address} /></div>}
+            </div>
+          )
+        },
+        { 
+          header: "Encrypted Data", 
+          className: "w-[26%]",
+          accessor: (row: any) => (
+            <div className="flex flex-col items-center justify-center text-center">
+              <span className="text-green-400 font-mono text-sm">{fmtBytes(row.encrypted)} ({row.encrypted_pct}%)</span>
+              <span className="text-[10px] text-muted-foreground font-medium mt-0.5 uppercase tracking-wider">Total: {fmtBytes(row.total)}</span>
+            </div>
+          )
+        },
+        { 
+          header: "Risk Level", 
+          className: "w-[10%]",
+          accessor: (row: any) => (
+            <div className="flex items-center justify-center w-full">
+              <span className={`px-2 py-1 rounded text-xs font-medium ${
+                row.risk_level === 'medium' ? 'bg-yellow-500/20 text-yellow-500' : 'bg-green-500/20 text-green-500'
+              }`}>
+                {row.risk_level === 'medium' ? 'Medium' : 'Safe'}
+              </span>
+            </div>
+          )
+        },
+      ]}
+    />
+  );
+}
diff --git a/src/app/(dashboard)/intelligence/IntelligenceTables.tsx b/src/app/(dashboard)/intelligence/IntelligenceTables.tsx
new file mode 100644
index 0000000..79fb4ec
--- /dev/null
+++ b/src/app/(dashboard)/intelligence/IntelligenceTables.tsx
@@ -0,0 +1,157 @@
+"use client";
+
+import React from "react";
+import { DataTable } from "@/components/ui/DataTable";
+import { IpDetails } from "@/components/ui/IpDetails";
+import { EncryptionAuditTable } from "./EncryptionAuditTable";
+import { DeviceDiscoveryTable } from "./DeviceDiscoveryTable";
+import { ServerDiscoveryTable } from "./ServerDiscoveryTable";
+
+interface IntelligenceTablesProps {
+  activeTab: string;
+  cryptoMining: any[];
+  loadingCrypto: boolean;
+  torDetection: any[];
+  loadingTor: boolean;
+  vpnDetection: any[];
+  loadingVpn: boolean;
+  ipReputation: any[];
+  loadingIpRep: boolean;
+  insecureProtocols: any[];
+  loadingInsecure: boolean;
+  unencryptedPasswords: any[];
+  loadingPasswords: boolean;
+  encryptionAudit: any[];
+  loadingEncryption: boolean;
+  deviceDiscovery: any[];
+  loadingDevice: boolean;
+  serverDiscovery: any[];
+  loadingServer: boolean;
+  setSelectedDevice: (device: { ip: string; mac?: string } | null) => void;
+}
+
+export function IntelligenceTables({
+  activeTab,
+  cryptoMining, loadingCrypto,
+  torDetection, loadingTor,
+  vpnDetection, loadingVpn,
+  ipReputation, loadingIpRep,
+  insecureProtocols, loadingInsecure,
+  unencryptedPasswords, loadingPasswords,
+  encryptionAudit, loadingEncryption,
+  deviceDiscovery, loadingDevice,
+  serverDiscovery, loadingServer,
+  setSelectedDevice
+}: IntelligenceTablesProps) {
+  switch (activeTab) {
+    case "Crypto Mining":
+      return (
+        <DataTable 
+          data={cryptoMining} isLoading={loadingCrypto}
+          columns={[
+            { header: "IP Address", accessor: (row: any) => row.ip_address },
+            { header: "MAC Address", accessor: (row: any) => row.mac_address },
+            { header: "Pool Host", accessor: (row: any) => row.pool_host },
+            { header: "App", accessor: (row: any) => row.app_label },
+            { header: "Confidence", accessor: (row: any) => row.confidence },
+          ]}
+        />
+      );
+    case "Tor Detection":
+      return (
+        <DataTable 
+          data={torDetection} isLoading={loadingTor}
+          columns={[
+            { header: "IP Address", accessor: (row: any) => row.ip_address },
+            { header: "Exit Node", accessor: (row: any) => row.exit_node },
+            { header: "Country", accessor: (row: any) => row.country },
+          ]}
+        />
+      );
+    case "VPN Detection":
+      return (
+        <DataTable 
+          data={vpnDetection} isLoading={loadingVpn}
+          columns={[
+            { header: "IP Address", accessor: (row: any) => row.ip_address },
+            { header: "VPN Type", accessor: (row: any) => row.vpn_type },
+            {
+              header: "Remote IP",
+              accessor: (row: any) => row.remote_ip ? (
+                <div className="flex flex-col gap-0.5">
+                  <span className="font-mono text-xs text-blue-400">{row.remote_ip}</span>
+                  <IpDetails ip={row.remote_ip} />
+                </div>
+              ) : "—"
+            },
+            { header: "Country", accessor: (row: any) => row.country },
+          ]}
+        />
+      );
+    case "IP Reputation":
+      return (
+        <DataTable 
+          data={ipReputation} isLoading={loadingIpRep}
+          columns={[
+            {
+              header: "IP Address",
+              accessor: (row: any) => row.ip_address ? (
+                <div className="flex flex-col gap-0.5">
+                  <span className="font-mono text-xs text-blue-400">{row.ip_address}</span>
+                  <IpDetails ip={row.ip_address} />
+                </div>
+              ) : "—"
+            },
+            { header: "Reputation", accessor: (row: any) => row.reputation },
+            { header: "App", accessor: (row: any) => row.app_label },
+            { header: "Country", accessor: (row: any) => row.country },
+          ]}
+        />
+      );
+    case "Insecure Protocols":
+      return (
+        <DataTable 
+          data={insecureProtocols} isLoading={loadingInsecure}
+          columns={[
+            { header: "Protocol", accessor: (row: any) => row.protocol },
+            { header: "IP Address", accessor: (row: any) => row.ip_address },
+            { header: "Risk", accessor: (row: any) => row.risk },
+          ]}
+        />
+      );
+    case "Unencrypted Passwords":
+      return (
+        <DataTable 
+          data={unencryptedPasswords} isLoading={loadingPasswords}
+          columns={[
+            { header: "Protocol", accessor: (row: any) => row.protocol },
+            { header: "IP Address", accessor: (row: any) => row.ip_address },
+            { header: "Severity", accessor: (row: any) => row.severity },
+          ]}
+        />
+      );
+    case "Encryption Audit":
+      return (
+        <EncryptionAuditTable 
+          data={encryptionAudit} isLoading={loadingEncryption} 
+          setSelectedDevice={setSelectedDevice} 
+        />
+      );
+    case "Device Discovery":
+      return (
+        <DeviceDiscoveryTable 
+          data={deviceDiscovery} isLoading={loadingDevice} 
+          setSelectedDevice={setSelectedDevice} 
+        />
+      );
+    case "Server Discovery":
+      return (
+        <ServerDiscoveryTable 
+          data={serverDiscovery} isLoading={loadingServer} 
+          setSelectedDevice={setSelectedDevice} 
+        />
+      );
+    default:
+      return null;
+  }
+}
diff --git a/src/app/(dashboard)/intelligence/ServerDiscoveryTable.tsx b/src/app/(dashboard)/intelligence/ServerDiscoveryTable.tsx
new file mode 100644
index 0000000..4237ed4
--- /dev/null
+++ b/src/app/(dashboard)/intelligence/ServerDiscoveryTable.tsx
@@ -0,0 +1,64 @@
+"use client";
+
+import React from "react";
+import { DataTable } from "@/components/ui/DataTable";
+import { TimestampCell } from "@/components/ui/TimestampCell";
+import { ChevronRight } from "lucide-react";
+
+interface ServerDiscoveryTableProps {
+  data: any[];
+  isLoading: boolean;
+  setSelectedDevice: (device: { ip: string; mac?: string } | null) => void;
+}
+
+export function ServerDiscoveryTable({ data, isLoading, setSelectedDevice }: ServerDiscoveryTableProps) {
+  return (
+    <DataTable 
+      data={data} isLoading={isLoading}
+      searchPlaceholder="Search by IP, MAC, Type..."
+      searchFilter={(row: any, q: string) => {
+        const query = q.toLowerCase();
+        return (row.ip_address || '').toLowerCase().includes(query) || (row.mac_address || '').toLowerCase().includes(query) || (row.server_type || '').toLowerCase().includes(query) || (row.os_label || '').toLowerCase().includes(query);
+      }}
+      csvExport={{
+        filename: `server-discovery-${new Date().toISOString().slice(0,10)}.csv`,
+        headers: ["IP Address", "MAC Address", "Server Type", "Port", "OS"],
+        rowSerializer: (row: any) => [row.ip_address || "", row.mac_address || "", row.server_type || "", row.port || "", row.os_label || ""]
+      }}
+      columns={[
+        { 
+          header: "Last Seen", 
+          className: "w-[15%]",
+          accessor: (row: any) => <TimestampCell timestamp={row.last_seen} showActiveStatus={true} /> 
+        },
+        { header: "#", accessor: (row, i) => i + 1, className: "w-[4%]" },
+        {
+          header: "Server IP",
+          className: "w-[25%]",
+          accessor: (row: any) => (
+            <div className="flex flex-col items-center justify-center">
+              <button
+                onClick={() => { if (row.ip_address) setSelectedDevice({ ip: row.ip_address, mac: row.mac_address }); }}
+                className={`flex items-center justify-center gap-1 group text-center ${row.ip_address ? 'cursor-pointer' : 'cursor-default'}`}
+                title={row.ip_address ? "Click to view device details" : ""}
+              >
+                <span className={`font-semibold transition-colors font-mono text-sm ${row.ip_address ? 'text-blue-400 group-hover:text-blue-300' : 'text-muted-foreground'}`}>
+                  {row.ip_address || "Unknown IP"}
+                </span>
+                {row.ip_address && <ChevronRight className="w-3 h-3 text-slate-600 group-hover:text-blue-400 transition-colors" />}
+              </button>
+              <span className="text-xs text-muted-foreground mt-0.5">{row.mac_address}</span>
+            </div>
+          )
+        },
+        { header: "Server Type", className: "w-[28%]", accessor: (row: any) => (
+          <div className="flex flex-col items-center justify-center text-center">
+            <span className="text-white font-medium">{row.server_type}</span>
+            {row.port > 0 && <span className="text-[10px] text-purple-400 font-mono font-medium mt-0.5">Port {row.port}</span>}
+          </div>
+        ) },
+        { header: "OS / Platform", className: "w-[28%]", accessor: (row: any) => row.os_label },
+      ]}
+    />
+  );
+}
diff --git a/src/app/(dashboard)/intelligence/page.tsx b/src/app/(dashboard)/intelligence/page.tsx
index 58de68e..c5479c5 100644
--- a/src/app/(dashboard)/intelligence/page.tsx
+++ b/src/app/(dashboard)/intelligence/page.tsx
@@ -8,13 +8,10 @@ import {
   useIntelEncryptionAudit, useIntelDeviceDiscovery, useIntelServerDiscovery 
 } from "@/lib/api-advanced";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/Card";
-import { DataTable, Column } from "@/components/ui/DataTable";
-import { IpDetails } from "@/components/ui/IpDetails";
-import { Loader2, Bitcoin, Shield, Server, Lock, AlertTriangle, Key, Globe, Network, ShieldAlert, ChevronRight } from "lucide-react";
+import { Loader2, Bitcoin, Shield, Server, Lock, AlertTriangle, Key, Globe, Network, ShieldAlert } from "lucide-react";
 import { DeviceDetailModal } from "@/components/ui/DeviceDetailModal";
-import { TimestampCell } from "@/components/ui/TimestampCell";
-import { fmtBytes } from "@/lib/utils";
 import { HelpTrigger } from "@/components/help/HelpTrigger";
+import { IntelligenceTables } from "./IntelligenceTables";
 
 export default function IntelligencePage() {
   const [mounted, setMounted] = useState(false);
@@ -22,19 +19,20 @@ export default function IntelligencePage() {
   const [activeTab, setActiveTab] = useState<string>("Crypto Mining");
   const [selectedDevice, setSelectedDevice] = useState<{ip: string, mac?: string} | null>(null);
 
-  // Advanced data hooks
-  const { data: cryptoMining, isLoading: loadingCrypto } = useIntelCryptoMining(20);
-  const { data: torDetection, isLoading: loadingTor } = useIntelTorDetection(20);
-  const { data: vpnDetection, isLoading: loadingVpn } = useIntelVpnDetection(20);
-  const { data: ipReputation, isLoading: loadingIpRep } = useIntelIpReputation(20);
-  const { data: insecureProtocols, isLoading: loadingInsecure } = useIntelInsecureProtocols(20);
-  const { data: unencryptedPasswords, isLoading: loadingPasswords } = useIntelUnencryptedPasswords(20);
-  const { data: encryptionAudit, isLoading: loadingEncryption } = useIntelEncryptionAudit(20);
-  const { data: deviceDiscovery, isLoading: loadingDevice } = useIntelDeviceDiscovery(20);
-  const { data: serverDiscovery, isLoading: loadingServer } = useIntelServerDiscovery(20);
+  // Advanced data hooks (no hardcoded limits, default to 1,000,000)
+  const { data: cryptoMining = [], isLoading: loadingCrypto } = useIntelCryptoMining();
+  const { data: torDetection = [], isLoading: loadingTor } = useIntelTorDetection();
+  const { data: vpnDetection = [], isLoading: loadingVpn } = useIntelVpnDetection();
+  const { data: ipReputation = [], isLoading: loadingIpRep } = useIntelIpReputation();
+  const { data: insecureProtocols = [], isLoading: loadingInsecure } = useIntelInsecureProtocols();
+  const { data: unencryptedPasswords = [], isLoading: loadingPasswords } = useIntelUnencryptedPasswords();
+  const { data: encryptionAudit = [], isLoading: loadingEncryption } = useIntelEncryptionAudit();
+  const { data: deviceDiscovery = [], isLoading: loadingDevice } = useIntelDeviceDiscovery();
+  const { data: serverDiscovery = [], isLoading: loadingServer } = useIntelServerDiscovery();
 
   useEffect(() => {
     setMounted(true);
+    document.title = "Threat Intelligence | BackOne - Deep Package Inspection";
   }, []);
 
   if (!mounted) return null;
@@ -96,292 +94,16 @@ export default function IntelligencePage() {
     }
   ];
 
-  const renderActiveTable = () => {
-    switch(activeTab) {
-      case "Crypto Mining":
-        return (
-          <DataTable 
-            data={cryptoMining} isLoading={loadingCrypto}
-            columns={[
-              { header: "IP Address", accessor: (row: any) => row.ip_address },
-              { header: "MAC Address", accessor: (row: any) => row.mac_address },
-              { header: "Pool Host", accessor: (row: any) => row.pool_host },
-              { header: "App", accessor: (row: any) => row.app_label },
-              { header: "Confidence", accessor: (row: any) => row.confidence },
-            ]}
-          />
-        );
-      case "Tor Detection":
-        return (
-          <DataTable 
-            data={torDetection} isLoading={loadingTor}
-            columns={[
-              { header: "IP Address", accessor: (row: any) => row.ip_address },
-              { header: "Exit Node", accessor: (row: any) => row.exit_node },
-              { header: "Country", accessor: (row: any) => row.country },
-            ]}
-          />
-        );
-      case "VPN Detection":
-        return (
-          <DataTable 
-            data={vpnDetection} isLoading={loadingVpn}
-            columns={[
-              { header: "IP Address", accessor: (row: any) => row.ip_address },
-              { header: "VPN Type", accessor: (row: any) => row.vpn_type },
-              {
-                header: "Remote IP",
-                accessor: (row: any) => row.remote_ip ? (
-                  <div className="flex flex-col gap-0.5">
-                    <span className="font-mono text-xs text-blue-400">{row.remote_ip}</span>
-                    <IpDetails ip={row.remote_ip} />
-                  </div>
-                ) : "—"
-              },
-              { header: "Country", accessor: (row: any) => row.country },
-            ]}
-          />
-        );
-      case "IP Reputation":
-        return (
-          <DataTable 
-            data={ipReputation} isLoading={loadingIpRep}
-            columns={[
-              {
-                header: "IP Address",
-                accessor: (row: any) => row.ip_address ? (
-                  <div className="flex flex-col gap-0.5">
-                    <span className="font-mono text-xs text-blue-400">{row.ip_address}</span>
-                    <IpDetails ip={row.ip_address} />
-                  </div>
-                ) : "—"
-              },
-              { header: "Reputation", accessor: (row: any) => row.reputation },
-              { header: "App", accessor: (row: any) => row.app_label },
-              { header: "Country", accessor: (row: any) => row.country },
-            ]}
-          />
-        );
-      case "Insecure Protocols":
-        return (
-          <DataTable 
-            data={insecureProtocols} isLoading={loadingInsecure}
-            columns={[
-              { header: "Protocol", accessor: (row: any) => row.protocol },
-              { header: "IP Address", accessor: (row: any) => row.ip_address },
-              { header: "Risk", accessor: (row: any) => row.risk },
-            ]}
-          />
-        );
-      case "Unencrypted Passwords":
-        return (
-          <DataTable 
-            data={unencryptedPasswords} isLoading={loadingPasswords}
-            columns={[
-              { header: "Protocol", accessor: (row: any) => row.protocol },
-              { header: "IP Address", accessor: (row: any) => row.ip_address },
-              { header: "Severity", accessor: (row: any) => row.severity },
-            ]}
-          />
-        );
-      case "Encryption Audit":
-        return (
-          <DataTable 
-            data={encryptionAudit} isLoading={loadingEncryption}
-            searchPlaceholder="Search by Device or IP..."
-            searchFilter={(row: any, q: string) => {
-              const query = q.toLowerCase();
-              return (row.ip_address || '').toLowerCase().includes(query) || (row.device_label || '').toLowerCase().includes(query) || (row.mac_address || '').toLowerCase().includes(query);
-            }}
-            csvExport={{
-              filename: `encryption-audit-${new Date().toISOString().slice(0,10)}.csv`,
-              headers: ["Device Label", "MAC Address", "IP Address", "Encrypted Data", "Encrypted %", "Total Data", "Risk Level"],
-              rowSerializer: (row: any) => [row.device_label || "", row.mac_address || "", row.ip_address || "", row.encrypted || 0, row.encrypted_pct || 0, row.total || 0, row.risk_level || ""]
-            }}
-            columns={[
-              { 
-                header: "Last Seen", 
-                className: "w-[15%]",
-                accessor: (row: any) => <TimestampCell timestamp={row.last_seen} showActiveStatus={true} /> 
-              },
-              { header: "#", accessor: (row, i) => i + 1, className: "w-[4%]" },
-              { 
-                header: "Device", 
-                className: "w-[25%]",
-                accessor: (row: any) => (
-                  <div className="flex flex-col items-center justify-center text-center">
-                    <span className="font-medium text-white">{row.device_label || row.ip_address}</span>
-                    <span className="text-xs text-muted-foreground mt-0.5">{row.mac_address}</span>
-                  </div>
-                )
-              },
-              { 
-                header: "IP Address", 
-                className: "w-[20%]",
-                accessor: (row: any) => (
-                  <div className="flex flex-col items-center justify-center">
-                    <button
-                      onClick={() => { if (row.ip_address) setSelectedDevice({ ip: row.ip_address, mac: row.mac_address }); }}
-                      className={`flex items-center justify-center gap-1 group text-center ${row.ip_address ? 'cursor-pointer' : 'cursor-default'}`}
-                      title={row.ip_address ? "Click to view device details" : ""}
-                    >
-                      <span className={`font-semibold transition-colors font-mono text-sm ${row.ip_address ? 'text-blue-400 group-hover:text-blue-300' : 'text-muted-foreground'}`}>
-                        {row.ip_address || "Unknown IP"}
-                      </span>
-                      {row.ip_address && <ChevronRight className="w-3 h-3 text-slate-600 group-hover:text-blue-400 transition-colors" />}
-                    </button>
-                    {row.ip_address && <div className="mt-1 scale-90 origin-top"><IpDetails ip={row.ip_address} /></div>}
-                  </div>
-                )
-              },
-              { 
-                header: "Encrypted Data", 
-                className: "w-[26%]",
-                accessor: (row: any) => (
-                  <div className="flex flex-col items-center justify-center text-center">
-                    <span className="text-green-400 font-mono text-sm">{fmtBytes(row.encrypted)} ({row.encrypted_pct}%)</span>
-                    <span className="text-[10px] text-muted-foreground font-medium mt-0.5 uppercase tracking-wider">Total: {fmtBytes(row.total)}</span>
-                  </div>
-                )
-              },
-              { 
-                header: "Risk Level", 
-                className: "w-[10%]",
-                accessor: (row: any) => (
-                <div className="flex items-center justify-center w-full">
-                  <span className={`px-2 py-1 rounded text-xs font-medium ${
-                    row.risk_level === 'medium' ? 'bg-yellow-500/20 text-yellow-500' : 'bg-green-500/20 text-green-500'
-                  }`}>
-                    {row.risk_level === 'medium' ? 'Medium' : 'Safe'}
-                  </span>
-                </div>
-              ) },
-            ]}
-          />
-        );
-      case "Device Discovery":
-        return (
-          <DataTable 
-            data={deviceDiscovery} isLoading={loadingDevice}
-            searchPlaceholder="Search by IP, MAC, OS..."
-            searchFilter={(row: any, q: string) => {
-              const query = q.toLowerCase();
-              return (row.ip_address || '').toLowerCase().includes(query) || (row.mac_address || '').toLowerCase().includes(query) || (row.os_label || '').toLowerCase().includes(query) || (row.device_type || '').toLowerCase().includes(query);
-            }}
-            csvExport={{
-              filename: `device-discovery-${new Date().toISOString().slice(0,10)}.csv`,
-              headers: ["IP Address", "MAC Address", "Device Type", "OS", "Manufacturer", "Download", "Upload", "Last Seen"],
-              rowSerializer: (row: any) => [row.ip_address || "", row.mac_address || "", row.device_type || "", row.os_label || "", row.manufacturer || "", row.download || 0, row.upload || 0, row.last_seen || ""]
-            }}
-            columns={[
-              { 
-                header: "Last Seen", 
-                className: "w-[15%]",
-                accessor: (row: any) => <TimestampCell timestamp={row.last_seen} showActiveStatus={true} /> 
-              },
-              { header: "#", accessor: (row, i) => i + 1, className: "w-[4%]" },
-              { 
-                header: "IP Address", 
-                className: "w-[16%]",
-                accessor: (row: any) => (
-                  <div className="flex flex-col items-center justify-center">
-                    <button
-                      onClick={() => { if (row.ip_address) setSelectedDevice({ ip: row.ip_address, mac: row.mac_address }); }}
-                      className={`flex items-center justify-center gap-1 group text-center ${row.ip_address ? 'cursor-pointer' : 'cursor-default'}`}
-                      title={row.ip_address ? "Click to view device details" : ""}
-                    >
-                      <span className={`font-semibold transition-colors font-mono text-sm ${row.ip_address ? 'text-blue-400 group-hover:text-blue-300' : 'text-muted-foreground'}`}>
-                        {row.ip_address || "Unknown IP"}
-                      </span>
-                      {row.ip_address && <ChevronRight className="w-3 h-3 text-slate-600 group-hover:text-blue-400 transition-colors" />}
-                    </button>
-                    <span className="text-xs text-muted-foreground mt-0.5">{row.mac_address}</span>
-                  </div>
-                )
-              },
-              { header: "Device Profile", className: "w-[20%]", accessor: (row: any) => (
-                  <div className="flex flex-col items-center justify-center text-center">
-                    <span className="text-white font-medium">{row.device_type || "-"}</span>
-                    <span className="text-[10px] text-slate-400 font-medium mt-0.5">{row.os_label || "-"}</span>
-                  </div>
-              ) },
-              { header: "Manufacturer", className: "w-[20%]", accessor: (row: any) => row.manufacturer || "-" },
-              { header: "Bandwidth", className: "w-[25%]", accessor: (row: any) => (
-                  <div className="flex flex-col items-center justify-center text-center gap-0.5">
-                    <span className="text-cyan-400 text-xs font-mono">↓ {fmtBytes(row.download)}</span>
-                    <span className="text-green-400 text-xs font-mono">↑ {fmtBytes(row.upload)}</span>
-                  </div>
-              ) },
-            ]}
-          />
-        );
-      case "Server Discovery":
-        return (
-          <DataTable 
-            data={serverDiscovery} isLoading={loadingServer}
-            searchPlaceholder="Search by IP, MAC, Type..."
-            searchFilter={(row: any, q: string) => {
-              const query = q.toLowerCase();
-              return (row.ip_address || '').toLowerCase().includes(query) || (row.mac_address || '').toLowerCase().includes(query) || (row.server_type || '').toLowerCase().includes(query) || (row.os_label || '').toLowerCase().includes(query);
-            }}
-            csvExport={{
-              filename: `server-discovery-${new Date().toISOString().slice(0,10)}.csv`,
-              headers: ["IP Address", "MAC Address", "Server Type", "Port", "OS"],
-              rowSerializer: (row: any) => [row.ip_address || "", row.mac_address || "", row.server_type || "", row.port || "", row.os_label || ""]
-            }}
-            columns={[
-              { 
-                header: "Last Seen", 
-                className: "w-[15%]",
-                accessor: (row: any) => <TimestampCell timestamp={row.last_seen} showActiveStatus={true} /> 
-              },
-              { header: "#", accessor: (row, i) => i + 1, className: "w-[4%]" },
-              {
-                header: "Server IP",
-                className: "w-[25%]",
-                accessor: (row: any) => (
-                  <div className="flex flex-col items-center justify-center">
-                    <button
-                      onClick={() => { if (row.ip_address) setSelectedDevice({ ip: row.ip_address, mac: row.mac_address }); }}
-                      className={`flex items-center justify-center gap-1 group text-center ${row.ip_address ? 'cursor-pointer' : 'cursor-default'}`}
-                      title={row.ip_address ? "Click to view device details" : ""}
-                    >
-                      <span className={`font-semibold transition-colors font-mono text-sm ${row.ip_address ? 'text-blue-400 group-hover:text-blue-300' : 'text-muted-foreground'}`}>
-                        {row.ip_address || "Unknown IP"}
-                      </span>
-                      {row.ip_address && <ChevronRight className="w-3 h-3 text-slate-600 group-hover:text-blue-400 transition-colors" />}
-                    </button>
-                    <span className="text-xs text-muted-foreground mt-0.5">{row.mac_address}</span>
-                  </div>
-                )
-              },
-              { header: "Server Type", className: "w-[28%]", accessor: (row: any) => (
-                <div className="flex flex-col items-center justify-center text-center">
-                  <span className="text-white font-medium">{row.server_type}</span>
-                  {row.port > 0 && <span className="text-[10px] text-purple-400 font-mono font-medium mt-0.5">Port {row.port}</span>}
-                </div>
-              ) },
-              { header: "OS / Platform", className: "w-[28%]", accessor: (row: any) => row.os_label },
-            ]}
-          />
-        );
-      default: return null;
-    }
-  };
-
   return (
-    <div className="space-y-6">
+    <div className="space-y-6 animate-fade-in">
       <div className="flex items-center justify-between">
-        <div>
-          <h2 className="text-3xl font-bold tracking-tight text-white flex items-center gap-3">
-            Threat Intelligence
-            {loadingStats && <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />}
-          </h2>
-          <p className="text-muted-foreground mt-1">Deep threat intelligence feeds and security detections.</p>
-        </div>
+        <h2 className="text-2xl font-bold tracking-tight text-white flex items-center gap-3">
+          Threat Intelligence
+          {loadingStats && <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />}
+        </h2>
         <HelpTrigger pageId="intelligence" />
       </div>
-      
+
 
       <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
         {intelItems.map((item, idx) => {
@@ -417,7 +139,28 @@ export default function IntelligencePage() {
           <CardTitle>Detailed Report: {activeTab}</CardTitle>
         </CardHeader>
         <CardContent>
-          {renderActiveTable()}
+          <IntelligenceTables
+            activeTab={activeTab}
+            cryptoMining={cryptoMining}
+            loadingCrypto={loadingCrypto}
+            torDetection={torDetection}
+            loadingTor={loadingTor}
+            vpnDetection={vpnDetection}
+            loadingVpn={loadingVpn}
+            ipReputation={ipReputation}
+            loadingIpRep={loadingIpRep}
+            insecureProtocols={insecureProtocols}
+            loadingInsecure={loadingInsecure}
+            unencryptedPasswords={unencryptedPasswords}
+            loadingPasswords={loadingPasswords}
+            encryptionAudit={encryptionAudit}
+            loadingEncryption={loadingEncryption}
+            deviceDiscovery={deviceDiscovery}
+            loadingDevice={loadingDevice}
+            serverDiscovery={serverDiscovery}
+            loadingServer={loadingServer}
+            setSelectedDevice={setSelectedDevice}
+          />
         </CardContent>
       </Card>
 
diff --git a/src/app/(dashboard)/layout.tsx b/src/app/(dashboard)/layout.tsx
index 83239e6..2c4a44c 100644
--- a/src/app/(dashboard)/layout.tsx
+++ b/src/app/(dashboard)/layout.tsx
@@ -1,5 +1,8 @@
+"use client";
+
 import { DashboardLayout } from "@/components/layout/DashboardLayout";
 import { TimeFilterProvider } from "@/contexts/TimeFilterContext";
+import { TenantConfigProvider } from "@/contexts/TenantConfigContext";
 
 export default function AppLayout({
   children,
@@ -7,8 +10,10 @@ export default function AppLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <TimeFilterProvider>
-      <DashboardLayout>{children}</DashboardLayout>
-    </TimeFilterProvider>
+    <TenantConfigProvider>
+      <TimeFilterProvider>
+        <DashboardLayout>{children}</DashboardLayout>
+      </TimeFilterProvider>
+    </TenantConfigProvider>
   );
 }
diff --git a/src/app/(dashboard)/lookup/page.tsx b/src/app/(dashboard)/lookup/page.tsx
index 6a52763..cf916b8 100644
--- a/src/app/(dashboard)/lookup/page.tsx
+++ b/src/app/(dashboard)/lookup/page.tsx
@@ -1,364 +1,43 @@
 "use client";
 
 import { useState, useEffect } from "react";
-import { useLookupApplications, useLookupCategories, LookupApp } from "@/lib/api";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/Card";
-import { DropdownFilterSelect } from "@/components/ui/DropdownFilterSelect";
-import { Loader2, Search, AppWindow, HelpCircle, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, X, Info, Tag, Box, Shield, Server } from "lucide-react";
-
+import { Tabs, Tab } from "@/components/ui/Tabs";
+import { ApplicationCatalog } from "@/components/lookup/ApplicationCatalog";
+import { BlacklistConfiguration } from "@/components/lookup/BlacklistConfiguration";
 import { HelpTrigger } from "@/components/help/HelpTrigger";
 
 export default function LookupPage() {
   const [mounted, setMounted] = useState(false);
-  const [searchQuery, setSearchQuery] = useState("");
-  const [debouncedSearch, setDebouncedSearch] = useState("");
-  const [selectedCategory, setSelectedCategory] = useState("");
-  const [page, setPage] = useState(1);
-  const [selectedApp, setSelectedApp] = useState<LookupApp | null>(null);
-  const [isClosingModal, setIsClosingModal] = useState(false);
-  const limit = 24; // 24 items per page fits a 2, 3, or 4 column grid perfectly
-
-  const handleCloseModal = () => {
-    setIsClosingModal(true);
-    setTimeout(() => {
-      setSelectedApp(null);
-      setIsClosingModal(false);
-    }, 480);
-  };
 
   useEffect(() => {
     setMounted(true);
+    document.title = "App Lookup | BackOne - Deep Package Inspection";
   }, []);
 
-  // Debounce search query input to avoid spamming requests
-  useEffect(() => {
-    const handler = setTimeout(() => {
-      setDebouncedSearch(searchQuery);
-      setPage(1); // Reset page on new search
-    }, 400);
-
-    return () => clearTimeout(handler);
-  }, [searchQuery]);
-
-  const { data, isLoading, error } = useLookupApplications(page, limit, debouncedSearch, selectedCategory);
-  const { data: categories, error: categoriesError } = useLookupCategories();
-
-  useEffect(() => {
-    if (categoriesError) {
-      console.error("Failed to fetch categories:", categoriesError);
-    }
-  }, [categoriesError]);
-
   if (!mounted) return null;
 
-  const applications = data?.applications || [];
-  const pagination = data?.pagination || { total_records: 0, total_pages: 1, current_page: 1 };
-
   return (
     <div className="space-y-6 animate-fade-in pb-10">
       <div className="flex items-center justify-between">
         <div>
           <h1 className="text-3xl font-bold text-white tracking-tight flex items-center gap-3">
             App Lookup
-            {isLoading && <Loader2 className="w-5 h-5 animate-spin text-primary" />}
           </h1>
           <p className="text-slate-400 mt-2">
-            Search BackOne's extensive classification database of over 2,500+ apps, protocols, and services.
+            Search BackOne's extensive classification database of over 2,500+ apps, protocols, and services, and manage your blacklist configuration.
           </p>
         </div>
         <HelpTrigger pageId="lookup" />
       </div>
 
-      {/* Search & Filter Bar */}
-      <div className="flex flex-col sm:flex-row gap-4 animate-slide-up relative z-50" style={{ animationDelay: '50ms' }}>
-        <div className="relative flex-1 max-w-md w-full">
-          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-slate-400" />
-          <input
-            type="text"
-            placeholder="Search by app name or tag (e.g. facebook, openvpn)..."
-            className="w-full bg-slate-900 border border-border/50 rounded-lg pl-10 pr-4 py-2 text-sm text-white placeholder-slate-400 focus:outline-none hover:border-slate-700 transition-all duration-200"
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-          />
-        </div>
-        
-        <div className="relative w-full sm:w-64 z-50">
-          <DropdownFilterSelect
-            value={selectedCategory || "All"}
-            onChange={(val) => {
-              setSelectedCategory(val === "All" ? "" : val);
-              setPage(1); // Reset page on category change
-            }}
-            options={categories || []}
-            placeholder="All Categories"
-          />
-        </div>
-      </div>
-
-      {/* Cards Grid */}
-      {error ? (
-        <div className="p-8 bg-red-950/20 border border-red-500/30 rounded-xl text-center text-red-400">
-          <p className="font-semibold">Failed to load application lookup database</p>
-          <p className="text-sm mt-1">{error.message}</p>
-        </div>
-      ) : applications.length === 0 && !isLoading ? (
-        <div className="p-16 bg-card/40 border border-border/50 rounded-2xl text-center text-slate-400 max-w-lg mx-auto">
-          <AppWindow className="h-12 w-12 mx-auto mb-4 text-slate-500" />
-          <p className="font-semibold text-white">No applications found</p>
-          <p className="text-sm mt-1">Try refining your search keyword or clearing the input.</p>
-        </div>
-      ) : (
-        <div className="space-y-6">
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 animate-slide-up" style={{ animationDelay: '100ms' }}>
-            {applications.map((app: LookupApp) => (
-              <Card 
-                key={app.id} 
-                onClick={() => setSelectedApp(app)}
-                className="group relative overflow-hidden bg-card/60 backdrop-blur-xl border-border/50 hover:bg-card/100 hover:border-primary/40 transition-all duration-300 flex flex-col justify-between cursor-pointer"
-              >
-                <div className="p-5 flex flex-col h-full justify-between gap-4">
-                  {/* Top: Icon + Title */}
-                  <div className="space-y-3">
-                    <div className="flex items-start justify-between">
-                      <div className="h-10 w-10 rounded-lg bg-secondary/80 flex items-center justify-center overflow-hidden border border-border/40 group-hover:border-primary/20 transition-all">
-                        {app.favicon || app.logo ? (
-                          <>
-                            <img 
-                              src={app.favicon || app.logo} 
-                              alt={app.label} 
-                              className="h-6 w-6 object-contain"
-                              onError={(e) => {
-                                // If image fails, hide it and show the sibling icon
-                                const img = e.target as HTMLElement;
-                                img.style.display = 'none';
-                                const sibling = img.nextSibling as HTMLElement;
-                                if (sibling) {
-                                  sibling.style.display = 'block';
-                                }
-                              }}
-                            />
-                            <AppWindow className="h-5 w-5 text-slate-400" style={{ display: 'none' }} />
-                          </>
-                        ) : (
-                          <AppWindow className="h-5 w-5 text-slate-400" />
-                        )}
-                      </div>
-                      <span className="text-[10px] uppercase font-semibold tracking-wider text-primary bg-primary/10 border border-primary/20 px-2 py-0.5 rounded-full">
-                        {app.application_category?.label || "Unclassified"}
-                      </span>
-                    </div>
-
-                    <div>
-                      <h3 className="font-bold text-white group-hover:text-primary transition-colors text-base line-clamp-1">
-                        {app.label}
-                      </h3>
-                      <p className="text-[11px] text-slate-500 font-mono mt-0.5">{app.tag}</p>
-                    </div>
-
-                    <p className="text-xs text-slate-400 line-clamp-3 leading-relaxed mt-2">
-                      {app.description || "No description provided for this application definition."}
-                    </p>
-                  </div>
-
-                  {/* Bottom: ID and system information */}
-                  <div className="flex items-center justify-between pt-2 border-t border-border/30 text-[10px] text-slate-500 font-mono">
-                    <span>ID: {app.id}</span>
-                    <span>{app.name || "N/A"}</span>
-                  </div>
-                </div>
-              </Card>
-            ))}
-          </div>
-
-          {/* Pagination Controls */}
-          {pagination.total_pages > 1 && (
-            <div className="flex flex-col sm:flex-row items-center justify-between gap-4 pt-4 border-t border-border/50 text-slate-400 text-sm animate-slide-up" style={{ animationDelay: '150ms' }}>
-              <div>
-                Showing <span className="text-white font-medium">{((page - 1) * limit) + 1}</span> to{" "}
-                <span className="text-white font-medium">
-                  {Math.min(page * limit, pagination.total_records)}
-                </span>{" "}
-                of <span className="text-white font-medium">{pagination.total_records}</span> entries
-              </div>
-
-              <div className="flex items-center gap-1">
-                {/* First Page */}
-                <button
-                  onClick={() => setPage(1)}
-                  disabled={page === 1 || isLoading}
-                  className="p-2 rounded-lg bg-card border border-border/50 text-slate-400 hover:bg-secondary disabled:opacity-30 disabled:hover:bg-card transition-colors"
-                  title="First Page"
-                >
-                  <ChevronsLeft className="h-4 w-4" />
-                </button>
-
-                {/* Prev Page */}
-                <button
-                  onClick={() => setPage(p => Math.max(p - 1, 1))}
-                  disabled={page === 1 || isLoading}
-                  className="p-2 rounded-lg bg-card border border-border/50 text-slate-400 hover:bg-secondary disabled:opacity-30 disabled:hover:bg-card transition-colors"
-                  title="Previous Page"
-                >
-                  <ChevronLeft className="h-4 w-4" />
-                </button>
-
-                {/* Page indicators */}
-                <span className="px-4 py-1.5 rounded-lg bg-secondary/50 border border-border/30 text-white font-mono">
-                  {page} / {pagination.total_pages}
-                </span>
-
-                {/* Next Page */}
-                <button
-                  onClick={() => setPage(p => Math.min(p + 1, pagination.total_pages))}
-                  disabled={page === pagination.total_pages || isLoading}
-                  className="p-2 rounded-lg bg-card border border-border/50 text-slate-400 hover:bg-secondary disabled:opacity-30 disabled:hover:bg-card transition-colors"
-                  title="Next Page"
-                >
-                  <ChevronRight className="h-4 w-4" />
-                </button>
-
-                {/* Last Page */}
-                <button
-                  onClick={() => setPage(pagination.total_pages)}
-                  disabled={page === pagination.total_pages || isLoading}
-                  className="p-2 rounded-lg bg-card border border-border/50 text-slate-400 hover:bg-secondary disabled:opacity-30 disabled:hover:bg-card transition-colors"
-                  title="Last Page"
-                >
-                  <ChevronsRight className="h-4 w-4" />
-                </button>
-              </div>
-            </div>
-          )}
-        </div>
-      )}
-
-      {/* Application Detail Modal */}
-      {selectedApp && (
-        <div className="fixed inset-0 z-[100] flex items-center justify-center p-4 sm:p-6" onClick={handleCloseModal}>
-          <div 
-            className={`absolute inset-0 bg-black/40 dark:bg-black/75 backdrop-blur-sm ${isClosingModal ? 'animate-overlay-out' : 'animate-overlay-in'}`} 
-          />
-          <div 
-            className={`relative w-full max-w-2xl bg-card border border-border rounded-2xl shadow-2xl shadow-black/60 overflow-hidden ${isClosingModal ? 'animate-modal-out' : 'animate-modal-in'}`}
-            onClick={(e) => e.stopPropagation()}
-          >
-            
-            {/* Header Background */}
-            <div className="h-32 bg-gradient-to-br from-primary/20 via-primary/5 to-transparent relative">
-              <button 
-                onClick={handleCloseModal}
-                className="absolute top-4 right-4 p-2 bg-black/20 hover:bg-black/40 rounded-full text-white/70 hover:text-white transition-colors"
-              >
-                <X className="w-5 h-5" />
-              </button>
-            </div>
-
-            {/* Content */}
-            <div className="px-6 pb-6 sm:px-8 sm:pb-8 relative -mt-16">
-              
-              {/* Icon/Logo */}
-              <div className="w-24 h-24 bg-card rounded-2xl border-4 border-card flex items-center justify-center overflow-hidden shadow-xl relative z-10 mb-4 bg-secondary">
-                {selectedApp.logo || selectedApp.favicon ? (
-                  <img 
-                    src={selectedApp.logo || selectedApp.favicon} 
-                    alt={selectedApp.label} 
-                    className="w-16 h-16 object-contain"
-                    onError={(e) => {
-                      const img = e.target as HTMLElement;
-                      img.style.display = 'none';
-                      const sibling = img.nextSibling as HTMLElement;
-                      if (sibling) sibling.style.display = 'block';
-                    }}
-                  />
-                ) : null}
-                <AppWindow className="w-12 h-12 text-slate-400" style={{ display: (selectedApp.logo || selectedApp.favicon) ? 'none' : 'block' }} />
-              </div>
-
-              {/* Title & Category */}
-              <div className="space-y-2">
-                <div className="flex items-center gap-3 flex-wrap">
-                  <h2 className="text-2xl sm:text-3xl font-bold text-white tracking-tight">{selectedApp.label}</h2>
-                  {selectedApp.application_category?.label && (
-                    <span className="px-3 py-1 bg-primary/10 border border-primary/20 text-primary text-xs font-bold uppercase tracking-widest rounded-full">
-                      {selectedApp.application_category.label}
-                    </span>
-                  )}
-                </div>
-                {selectedApp.full_name && selectedApp.full_name !== selectedApp.label && (
-                  <p className="text-slate-400 font-medium">{selectedApp.full_name}</p>
-                )}
-              </div>
-
-              <div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-6">
-                
-                {/* Description */}
-                <div className="space-y-4 md:col-span-2">
-                  <div className="flex items-start gap-3 text-slate-300 bg-secondary/30 p-4 rounded-xl border border-border/30">
-                    <Info className="w-5 h-5 text-primary shrink-0 mt-0.5" />
-                    <p className="text-sm leading-relaxed">
-                      {selectedApp.description || "No detailed description provided for this application or service."}
-                    </p>
-                  </div>
-                </div>
-
-                {/* Metadata Info */}
-                <div className="space-y-3">
-                  <h3 className="text-xs uppercase font-bold text-slate-500 tracking-wider">System Metadata</h3>
-                  
-                  <div className="flex items-center justify-between p-3 bg-secondary/20 rounded-lg border border-border/20">
-                    <div className="flex items-center gap-2 text-slate-400">
-                      <Box className="w-4 h-4" />
-                      <span className="text-sm">App ID</span>
-                    </div>
-                    <span className="text-sm font-mono text-white bg-secondary/50 px-2 py-0.5 rounded">{selectedApp.id}</span>
-                  </div>
-                  
-                  <div className="flex items-center justify-between p-3 bg-secondary/20 rounded-lg border border-border/20">
-                    <div className="flex items-center gap-2 text-slate-400">
-                      <Tag className="w-4 h-4" />
-                      <span className="text-sm">System Name</span>
-                    </div>
-                    <span className="text-sm font-mono text-white bg-secondary/50 px-2 py-0.5 rounded">{selectedApp.name || 'N/A'}</span>
-                  </div>
-                  
-                  <div className="flex items-center justify-between p-3 bg-secondary/20 rounded-lg border border-border/20">
-                    <div className="flex items-center gap-2 text-slate-400">
-                      <Shield className="w-4 h-4" />
-                      <span className="text-sm">Tag / Alias</span>
-                    </div>
-                    <span className="text-sm font-mono text-white bg-secondary/50 px-2 py-0.5 rounded">{selectedApp.tag || 'N/A'}</span>
-                  </div>
-                </div>
-
-                {/* Application Category Detail */}
-                {selectedApp.application_category && (
-                  <div className="space-y-3">
-                    <h3 className="text-xs uppercase font-bold text-slate-500 tracking-wider">Category Info</h3>
-                    
-                    <div className="flex items-center justify-between p-3 bg-secondary/20 rounded-lg border border-border/20">
-                      <div className="flex items-center gap-2 text-slate-400">
-                        <Server className="w-4 h-4" />
-                        <span className="text-sm">Category ID</span>
-                      </div>
-                      <span className="text-sm font-mono text-white bg-secondary/50 px-2 py-0.5 rounded">{selectedApp.application_category.id}</span>
-                    </div>
-
-                    <div className="flex items-center justify-between p-3 bg-secondary/20 rounded-lg border border-border/20">
-                      <div className="flex items-center gap-2 text-slate-400">
-                        <Info className="w-4 h-4" />
-                        <span className="text-sm">Category Tag</span>
-                      </div>
-                      <span className="text-sm font-mono text-white bg-secondary/50 px-2 py-0.5 rounded">{selectedApp.application_category.tag}</span>
-                    </div>
-                  </div>
-                )}
-
-              </div>
-
-            </div>
-          </div>
-        </div>
-      )}
+      <Tabs>
+        <Tab label="App Catalog">
+          <ApplicationCatalog />
+        </Tab>
+        <Tab label="Blacklist Configuration">
+          <BlacklistConfiguration />
+        </Tab>
+      </Tabs>
     </div>
   );
 }
diff --git a/src/app/(dashboard)/network-infrastructure/page.tsx b/src/app/(dashboard)/network-infrastructure/page.tsx
index 9dfdf0b..3231241 100644
--- a/src/app/(dashboard)/network-infrastructure/page.tsx
+++ b/src/app/(dashboard)/network-infrastructure/page.tsx
@@ -11,28 +11,31 @@ import {
 } from "@/lib/api-advanced";
 import { IpDetails } from "@/components/ui/IpDetails";
 import { RemoteIpDetailModal } from "@/components/ui/RemoteIpDetailModal";
-
 import { HelpTrigger } from "@/components/help/HelpTrigger";
 
 export default function NetworkInfrastructurePage() {
   const [selectedRemoteIp, setSelectedRemoteIp] = useState<string | null>(null);
 
+  useEffect(() => {
+    document.title = "Network Topology | BackOne - Deep Package Inspection";
+  }, []);
+
   // Routing & Geography Tab
-  const { data: regions, isLoading: loadingRegions } = useRegions(20);
-  const { data: cities, isLoading: loadingCities } = useCities(20);
+  const { data: regions, isLoading: loadingRegions } = useRegions();
+  const { data: cities, isLoading: loadingCities } = useCities();
 
   // Interfaces & VLANs Tab
-  const { data: interfaces, isLoading: loadingInterfaces } = useInterfaces(20);
-  const { data: vlans, isLoading: loadingVlans } = useVlans(20);
+  const { data: interfaces, isLoading: loadingInterfaces } = useInterfaces();
+  const { data: vlans, isLoading: loadingVlans } = useVlans();
 
   // IP & MAC Tab
-  const { data: remoteIps, isLoading: loadingRemoteIps } = useRemoteIps(20);
-  const { data: ipVersions, isLoading: loadingIpVersions } = useIpVersions(20);
-  const { data: macBandwidth, isLoading: loadingMacBandwidth } = useMacBandwidth(20);
+  const { data: remoteIps, isLoading: loadingRemoteIps } = useRemoteIps();
+  const { data: ipVersions, isLoading: loadingIpVersions } = useIpVersions();
+  const { data: macBandwidth, isLoading: loadingMacBandwidth } = useMacBandwidth();
 
   // Flow Profiles Tab
-  const { data: flowTypes, isLoading: loadingFlowTypes } = useFlowTypes(20);
-  const { data: flowOrigins, isLoading: loadingFlowOrigins } = useFlowOrigins(20);
+  const { data: flowTypes, isLoading: loadingFlowTypes } = useFlowTypes();
+  const { data: flowOrigins, isLoading: loadingFlowOrigins } = useFlowOrigins();
 
   const formatBytes = (bytes: number) => {
     if (bytes === 0 || !bytes) return "0 B";
diff --git a/src/app/(dashboard)/network-intelligence/page.tsx b/src/app/(dashboard)/network-intelligence/page.tsx
index 437996d..6b216ef 100644
--- a/src/app/(dashboard)/network-intelligence/page.tsx
+++ b/src/app/(dashboard)/network-intelligence/page.tsx
@@ -31,6 +31,7 @@ export default function NetworkIntelligencePage() {
 
   useEffect(() => {
     setMounted(true);
+    document.title = "Traffic Categories | BackOne - Deep Package Inspection";
   }, []);
 
   if (!mounted) return null;
diff --git a/src/app/(dashboard)/page.tsx b/src/app/(dashboard)/page.tsx
index acf7ae8..98cb8fa 100644
--- a/src/app/(dashboard)/page.tsx
+++ b/src/app/(dashboard)/page.tsx
@@ -7,6 +7,7 @@ import { GlobeMap } from "@/components/ui/GlobeMap";
 import { getOriginLocation, getDestinationLocation } from "@/lib/geoUtils";
 import { KPICards } from "@/components/dashboard/KPICards";
 import { TopWidgets } from "@/components/dashboard/TopWidgets";
+import { HelpTrigger } from "@/components/help/HelpTrigger";
 
 export default function SummaryPage() {
   const [mounted, setMounted] = useState(false);
@@ -74,6 +75,7 @@ export default function SummaryPage() {
 
   useEffect(() => {
     setMounted(true);
+    document.title = "Overview Dashboard | BackOne - Deep Package Inspection";
   }, []);
 
   if (!mounted) return null;
@@ -90,6 +92,7 @@ export default function SummaryPage() {
           </h2>
           <p className="text-muted-foreground mt-1">Real-time network traffic and intelligence summary.</p>
         </div>
+        <HelpTrigger pageId="overview" />
       </div>
 
       {/* KPI Cards */}
diff --git a/src/app/(dashboard)/security-audit/page.tsx b/src/app/(dashboard)/security-audit/page.tsx
index 81c0231..80e804b 100644
--- a/src/app/(dashboard)/security-audit/page.tsx
+++ b/src/app/(dashboard)/security-audit/page.tsx
@@ -15,9 +15,9 @@ import { HelpTrigger } from "@/components/help/HelpTrigger";
 
 export default function SecurityAuditPage() {
   const [mounted, setMounted] = useState(false);
-  const versions = useTlsVersions(10);
-  const ciphers = useTlsCiphers(20);
-  const security = useTlsSecurity(10);
+  const versions = useTlsVersions();
+  const ciphers = useTlsCiphers();
+  const security = useTlsSecurity();
 
   const [secDevices, setSecDevices] = useState<SecurityDevice[]>([]);
   const [secDevicesLoading, setSecDevicesLoading] = useState(true);
@@ -54,14 +54,11 @@ export default function SecurityAuditPage() {
 
   return (
     <div className="space-y-6">
-      <div className="flex items-center justify-between">
-        <div>
-          <h2 className="text-3xl font-bold text-white tracking-tight">Encryption Audit</h2>
-          <p className="text-sm text-slate-400 mt-1">
-            Monitor TLS versions distribution, cipher suites, active certificate properties, and device risk profiles.
-          </p>
-        </div>
-        <HelpTrigger pageId="security-audit" />
+      <div>
+        <h2 className="text-2xl font-bold text-white tracking-tight">Security & Encryption Audit</h2>
+        <p className="text-sm text-slate-400 mt-1">
+          Monitor TLS versions distribution, cipher suites, active certificate properties, and device risk profiles.
+        </p>
       </div>
 
       <UniversalFilters
diff --git a/src/app/(dashboard)/threats/page.tsx b/src/app/(dashboard)/threats/page.tsx
index b50bba6..1af8c0f 100644
--- a/src/app/(dashboard)/threats/page.tsx
+++ b/src/app/(dashboard)/threats/page.tsx
@@ -1,322 +1,8 @@
 "use client";
 
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/Card";
-import { DataTable, Column } from "@/components/ui/DataTable";
-import { Badge } from "@/components/ui/Badge";
-import { useState, useEffect, useMemo, Suspense } from "react";
-import { TimestampCell } from "@/components/ui/TimestampCell";
-import { ShieldCheck, Loader2 } from "lucide-react";
-import { ThreatStat } from "@/lib/api";
-import { useThreats } from "@/lib/api-with-context";
-import { DeviceDetailModal } from "@/components/ui/DeviceDetailModal";
-import { ThreatFilters } from "@/components/threats/ThreatFilters";
-import { ThreatRecommendationsDrawer } from "@/components/threats/ThreatRecommendationsDrawer";
-import { useSearchParams } from "next/navigation";
-import { formatAppLabel } from "@/lib/utils";
-import { HelpTrigger } from "@/components/help/HelpTrigger";
-
-// ─── ThreatsContent ───────────────────────────────────────────────────────────
-function ThreatsContent() {
-  const [mounted, setMounted] = useState(false);
-  const [selectedIp, setSelectedIp] = useState<string | null>(null);
-  const [selectedMac, setSelectedMac] = useState<string | null>(null);
-  const [selectedThreat, setSelectedThreat] = useState<ThreatStat | null>(null);
-  
-  const threats = useThreats();
-  const searchParams = useSearchParams();
-  const highlightId = searchParams.get("highlight");
-
-  // Column dropdown filters state
-  const [fType, setFType] = useState("All");
-  const [fSev, setFSev] = useState("All");
-  const [fSrcIp, setFSrcIp] = useState("All");
-  const [fDstIp, setFDstIp] = useState("All");
-  const [fMac, setFMac] = useState("All");
-  const [fApp, setFApp] = useState("All");
-  const [fDomain, setFDomain] = useState("All");
-
-  // Date range filter state
-  const [dateFrom, setDateFrom] = useState("");
-  const [dateTo, setDateTo] = useState("");
-
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  const all = threats.data || [];
-
-  // Apply all filters
-  const filtered = useMemo(() => {
-    return all.filter((row) => {
-      if (fType !== "All" && (row.threat_type || "") !== fType) return false;
-      if (fSev !== "All" && (row.severity || "") !== fSev) return false;
-      if (fSrcIp !== "All" && (row.ip_address || "") !== fSrcIp) return false;
-      if (fDstIp !== "All" && (row.dst_ip || "") !== fDstIp) return false;
-      if (fMac !== "All" && (row.mac_address || "") !== fMac) return false;
-      if (fApp !== "All" && (row.app_label || "") !== fApp) return false;
-      if (fDomain !== "All" && (row.domain || "") !== fDomain) return false;
-      if (dateFrom || dateTo) {
-        const d = row.detected_at
-          ? new Date(row.detected_at).toISOString().slice(0, 10)
-          : "";
-        if (dateFrom && d < dateFrom) return false;
-        if (dateTo && d > dateTo) return false;
-      }
-      return true;
-    });
-  }, [all, fType, fSev, fSrcIp, fDstIp, fMac, fApp, fDomain, dateFrom, dateTo]);
-
-  // Automatically select a threat if highlightId is passed
-  useEffect(() => {
-    if (highlightId && all.length > 0) {
-      const match = all.find(r => r.id.toString() === highlightId);
-      if (match) {
-        setSelectedThreat(match);
-      }
-    }
-  }, [highlightId, all]);
-
-  if (!mounted) return null;
-
-  const getSeverityBadge = (sev?: string | null) => {
-    if (!sev) return <Badge variant="green">Unknown</Badge>;
-    const s = sev.toLowerCase();
-    if (s.includes("high") || s.includes("critical")) return <Badge variant="red">{sev}</Badge>;
-    if (s.includes("med")) return <Badge variant="orange">{sev}</Badge>;
-    if (s.includes("low")) return <Badge variant="yellow">{sev}</Badge>;
-    return <Badge variant="blue">{sev}</Badge>;
-  };
-
-  const columns: Column<ThreatStat>[] = [
-    {
-      header: "Timestamp",
-      className: "w-[155px] min-w-[155px] max-w-[155px] text-center",
-      accessor: (row) => <TimestampCell timestamp={row.detected_at} showActiveStatus={false} />
-    },
-    { header: "#", className: "w-[40px] min-w-[40px] max-w-[40px] text-center", accessor: (_row, i) => i + 1 },
-    {
-      header: "Type",
-      className: "w-[170px] min-w-[170px] max-w-[170px]",
-      accessor: (row) => (
-        <div
-          title={row.description || row.threat_type || "Unknown"}
-          className="truncate w-full block cursor-help text-xs leading-tight"
-        >
-          {row.threat_type || "Unknown"}
-        </div>
-      ),
-    },
-    {
-      header: "Severity",
-      className: "w-[90px] min-w-[90px] max-w-[90px] text-center",
-      accessor: (row) => getSeverityBadge(row.severity),
-    },
-    {
-      header: "Source IP",
-      className: "w-[120px] min-w-[120px] max-w-[120px] text-center",
-      accessor: (row) =>
-        row.ip_address ? (
-          <button
-            onClick={() => setSelectedIp(row.ip_address)}
-            className="font-medium text-blue-400 hover:text-blue-300 hover:underline font-mono text-xs focus:outline-none w-full text-center"
-          >
-            {row.ip_address}
-          </button>
-        ) : (
-          <span className="text-muted-foreground text-xs" title="Source IP tidak tersedia dari data event keamanan (hanya MAC Address yang ter-capture)">–</span>
-        ),
-    },
-    {
-      header: "Dest IP",
-      className: "w-[120px] min-w-[120px] max-w-[120px] text-center",
-      accessor: (row) =>
-        row.dst_ip ? (
-          <button
-            onClick={() => setSelectedIp(row.dst_ip)}
-            className="font-mono text-xs text-blue-400 hover:text-blue-300 hover:underline focus:outline-none w-full text-center"
-          >
-            {row.dst_ip}
-          </button>
-        ) : (
-          <span className="text-muted-foreground text-xs" title="Dest IP tidak tersedia dari data event ini">–</span>
-        ),
-    },
-    {
-      header: "MAC Addr",
-      className: "w-[140px] min-w-[140px] max-w-[140px] text-center",
-      accessor: (row) =>
-        row.mac_address ? (
-          <button
-            onClick={() => setSelectedMac(row.mac_address)}
-            className="text-xs bg-secondary/50 px-1.5 py-0.5 rounded text-muted-foreground hover:text-white hover:bg-secondary transition-colors font-mono focus:outline-none w-full text-center truncate"
-            title={row.mac_address}
-          >
-            {row.mac_address}
-          </button>
-        ) : "–",
-    },
-    {
-      header: "App",
-      className: "w-[110px] min-w-[110px] max-w-[110px] text-center",
-      accessor: (row) => {
-        const formatted = formatAppLabel(row.app_label);
-        return formatted ? (
-          <div title={formatted} className="truncate w-full block text-center cursor-help text-xs">
-            {formatted}
-          </div>
-        ) : (
-          <span className="text-muted-foreground text-xs" title="App tidak tersedia dari event ini">–</span>
-        );
-      },
-    },
-    {
-      header: "Domain",
-      className: "w-[160px] min-w-[160px] max-w-[160px] text-center",
-      accessor: (row) => row.domain ? (
-        <div title={row.domain} className="truncate w-full text-center text-xs cursor-help">
-          {row.domain}
-        </div>
-      ) : (
-        <span className="text-muted-foreground text-xs" title="Domain tidak tersedia dari event ini">–</span>
-      ),
-    },
-    {
-      header: "Action",
-      className: "w-[130px] min-w-[130px] max-w-[130px] text-center",
-      accessor: (row) => (
-        <button
-          onClick={() => setSelectedThreat(row)}
-          className="px-2 py-1 text-[11px] font-bold text-primary bg-primary/10 border border-primary/20 hover:bg-primary/20 hover:text-white rounded-lg transition-all shadow-sm cursor-pointer whitespace-nowrap focus:outline-none"
-        >
-          View Mitigation
-        </button>
-      ),
-    },
-  ];
-
-
-  const activeFilterCount =
-    [fType, fSev, fSrcIp, fDstIp, fMac, fApp, fDomain].filter((v) => v !== "All").length +
-    (dateFrom || dateTo ? 1 : 0);
-
-  const resetFilters = () => {
-    setFType("All");
-    setFSev("All");
-    setFSrcIp("All");
-    setFDstIp("All");
-    setFMac("All");
-    setFApp("All");
-    setFDomain("All");
-    setDateFrom("");
-    setDateTo("");
-  };
-
-  return (
-    <div className="space-y-8 animate-fade-in pb-10">
-      <div className="flex items-center justify-between">
-        <div>
-          <h2 className="text-3xl font-bold tracking-tight text-white flex items-center gap-3">
-            Detected Threats
-            {threats.isLoading && <Loader2 className="w-5 h-5 animate-spin text-primary" />}
-          </h2>
-          <p className="text-muted-foreground mt-1">Monitor and respond to network security threats.</p>
-        </div>
-        <div className="flex items-center gap-3">
-          <div className="flex items-center gap-2 text-sm font-medium text-emerald-400 bg-emerald-500/10 border border-emerald-500/20 px-4 py-2 rounded-lg shadow-[0_0_15px_rgba(16,185,129,0.1)]">
-            <ShieldCheck className="h-4 w-4" />
-            <span>Active Monitoring</span>
-          </div>
-          <HelpTrigger pageId="threats" />
-        </div>
-      </div>
-
-      {/* Filters above the table */}
-      <ThreatFilters
-        all={all}
-        fType={fType}
-        setFType={setFType}
-        fSev={fSev}
-        setFSev={setFSev}
-        fSrcIp={fSrcIp}
-        setFSrcIp={setFSrcIp}
-        fDstIp={fDstIp}
-        setFDstIp={setFDstIp}
-        fMac={fMac}
-        setFMac={setFMac}
-        fApp={fApp}
-        setFApp={setFApp}
-        fDomain={fDomain}
-        setFDomain={setFDomain}
-        dateFrom={dateFrom}
-        setDateFrom={setDateFrom}
-        dateTo={dateTo}
-        setDateTo={setDateTo}
-        activeFilterCount={activeFilterCount}
-        onReset={resetFilters}
-      />
-
-      {/* Threats Table - Full Width */}
-      <Card
-        className="bg-card/80 backdrop-blur-xl border-border/50 animate-slide-up relative z-10 overflow-visible"
-        style={{ animationDelay: "100ms" }}
-      >
-        <CardHeader className="border-b border-border/50 pb-4 mb-4">
-          <CardTitle className="text-lg text-white">
-            Detected Threats
-            <span className="ml-2 text-muted-foreground font-normal">
-              ({filtered.length}
-              {filtered.length !== all.length ? ` of ${all.length}` : ""})
-            </span>
-          </CardTitle>
-        </CardHeader>
-        <CardContent>
-          <DataTable
-            data={filtered}
-            columns={columns}
-            searchPlaceholder="Search threats by IP, domain, type..."
-            searchFilter={(row, query) => {
-              const q = query.toLowerCase();
-              return (
-                (row.ip_address || "").toLowerCase().includes(q) ||
-                (row.domain || "").toLowerCase().includes(q) ||
-                (row.threat_type || "").toLowerCase().includes(q) ||
-                (row.app_label || "").toLowerCase().includes(q)
-              );
-            }}
-            getRowClassName={(row) =>
-              highlightId && row.id.toString() === highlightId
-                ? "bg-red-500/15 border-l-2 border-red-500 animate-pulse font-semibold"
-                : ""
-            }
-            csvExport={{
-              filename: `threats-${new Date().toISOString().slice(0, 10)}.csv`,
-              headers: ["Timestamp", "Type", "Severity", "Source IP", "Dest IP", "MAC Address", "App", "Domain"],
-              rowSerializer: (row) => [
-                row.detected_at ? new Date(row.detected_at).toISOString() : "",
-                row.threat_type || "",
-                row.severity || "",
-                row.ip_address || "",
-                row.dst_ip || "",
-                row.mac_address || "",
-                row.app_label || "",
-                row.domain || "",
-              ],
-            }}
-          />
-        </CardContent>
-      </Card>
-
-      {selectedIp && <DeviceDetailModal ip={selectedIp} onClose={() => setSelectedIp(null)} />}
-      {selectedMac && <DeviceDetailModal ip="" mac={selectedMac} onClose={() => setSelectedMac(null)} />}
-      
-      {/* Mitigation recommendations drawer panel */}
-      <ThreatRecommendationsDrawer
-        threat={selectedThreat}
-        onClose={() => setSelectedThreat(null)}
-      />
-    </div>
-  );
-}
+import { Suspense } from "react";
+import { Loader2 } from "lucide-react";
+import ThreatsContent from "@/components/threats/ThreatsContent";
 
 export default function ThreatsPage() {
   return (
diff --git a/src/app/api/[...route]/route.ts b/src/app/api/[...route]/route.ts
index d91222a..e90869f 100644
--- a/src/app/api/[...route]/route.ts
+++ b/src/app/api/[...route]/route.ts
@@ -26,7 +26,7 @@ async function handleProxy(req: NextRequest, { params }: { params: Promise<{ rou
     const route = routeArray.join('/');
     
     const url = new URL(req.url);
-
+    
     // Force ALL traffic to go through our own Centralized Proxy Server (Express Backend)
     const localBase = process.env.NEXT_PUBLIC_API_URL || 'http://127.0.0.1:3001';
     const destinationUrl = `${localBase}/api/${route}${url.search}`;
@@ -46,11 +46,12 @@ async function handleProxy(req: NextRequest, { params }: { params: Promise<{ rou
       headers.set('cookie', cookie);
     }
     
-    // Forward X-View-As-Agent header for view-as mode data filtering
-    const viewAsHeader = req.headers.get('x-view-as-agent');
-    if (viewAsHeader) {
-      headers.set('x-view-as-agent', viewAsHeader);
-    }
+    // Forward all custom headers starting with x- (e.g. x-backone-site-uuid, x-view-as-agent)
+    req.headers.forEach((value, name) => {
+      if (name.toLowerCase().startsWith('x-')) {
+        headers.set(name, value);
+      }
+    });
     
     const hasBody = !['GET', 'HEAD'].includes(req.method);
     let body = null;
diff --git a/src/app/globals.css b/src/app/globals.css
index ea0af4e..8427358 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,419 +1,21 @@
 @import "tailwindcss";
-
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-
-  --font-backone: var(--font-backone);
-
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-
-  --color-border: var(--border);
-
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-
-  --color-destructive: var(--destructive);
-  --color-destructive-foreground: var(--destructive-foreground);
-
-  --color-sidebar: var(--sidebar);
-
-  /* OVERRIDE TAILWIND HARDCODED COLORS FOR SEAMLESS LIGHT MODE */
-  --color-slate-900: var(--slate-900);
-  --color-slate-800: var(--slate-800);
-  --color-slate-700: var(--slate-700);
-  --color-slate-600: var(--slate-600);
-  --color-slate-500: var(--slate-500);
-  --color-slate-400: var(--slate-400);
-  --color-slate-300: var(--slate-300);
-  --color-slate-200: var(--slate-200);
-  --color-slate-100: var(--slate-100);
-  --color-slate-50: var(--slate-50);
-
-  --color-gray-900: var(--slate-900);
-  --color-gray-800: var(--slate-800);
-  --color-gray-700: var(--slate-700);
-  --color-gray-600: var(--slate-600);
-  --color-gray-500: var(--slate-500);
-  --color-gray-400: var(--slate-400);
-  --color-gray-300: var(--slate-300);
-  --color-gray-200: var(--slate-200);
-  --color-gray-100: var(--slate-100);
-  --color-gray-50: var(--slate-50);
-
-  --color-white: var(--t-white);
-  --color-black: var(--t-black);
-
-  --font-sans: var(--font-inter);
-  --font-mono: var(--font-inter);
-
-  /* Micro-animations */
-  --animate-fade-in: fade-in 0.5s ease-out forwards;
-  --animate-slide-up: slide-up 0.5s ease-out forwards;
-
-  @keyframes fade-in {
-    0% {
-      opacity: 0;
-    }
-
-    100% {
-      opacity: 1;
-    }
-  }
-
-  @keyframes slide-up {
-    0% {
-      opacity: 0;
-      transform: translateY(20px);
-    }
-
-    100% {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
-}
-
-:root {
-  /* Premium Dark Theme */
-  --background: #09090b;
-  /* Very dark zinc */
-  --foreground: #fafafa;
-
-  --card: rgba(24, 24, 27, 0.7);
-  /* Zinc 900 with transparency for glassmorphism */
-  --card-foreground: #fafafa;
-
-  --border: rgba(255, 255, 255, 0.1);
-
-  --primary: #3b82f6;
-  /* Blue 500 */
-  --primary-foreground: #ffffff;
-
-  --secondary: rgba(39, 39, 42, 0.8);
-  /* Zinc 800 */
-  --secondary-foreground: #fafafa;
-
-  --muted: rgba(39, 39, 42, 0.5);
-  --muted-foreground: #a1a1aa;
-  /* Zinc 400 */
-
-  --destructive: #ef4444;
-  /* Red 500 */
-  --destructive-foreground: #ffffff;
-
-  --sidebar: #09090b;
-
-  /* Overrides for hardcoded colors in Dark Mode (Normal) */
-  --t-white: #ffffff;
-  --t-black: #000000;
-  --slate-900: #0f172a;
-  --slate-800: #1e293b;
-  --slate-700: #334155;
-  --slate-600: #475569;
-  --slate-500: #64748b;
-  --slate-400: #94a3b8;
-  --slate-300: #cbd5e1;
-  --slate-200: #e2e8f0;
-  --slate-100: #f1f5f9;
-  --slate-50: #f8fafc;
-}
-
-.light {
-  /* Clean Light Theme */
-  --background: #f1f5f9;
-  /* Slate 100 */
-  --foreground: #0f172a;
-
-  --card: rgba(255, 255, 255, 0.9);
-  --card-foreground: #0f172a;
-
-  --border: rgba(0, 0, 0, 0.1);
-
-  --primary: #2563eb;
-  /* Blue 600 */
-  --primary-foreground: #ffffff;
-
-  --secondary: rgba(241, 245, 249, 0.8);
-  /* Slate 100 */
-  --secondary-foreground: #0f172a;
-
-  --muted: rgba(226, 232, 240, 0.5);
-  /* Slate 200 */
-  --muted-foreground: #64748b;
-  /* Slate 500 */
-
-  --sidebar: #ffffff;
-
-  /* Overrides for hardcoded colors in Light Mode (Inverted) */
-  --t-white: #0f172a;
-  /* Make text-white become very dark slate */
-  --t-black: #ffffff;
-  --slate-900: #ffffff;
-  --slate-800: #f8fafc;
-  --slate-700: #f1f5f9;
-  --slate-600: #e2e8f0;
-  --slate-500: #cbd5e1;
-  --slate-400: #64748b;
-  /* Keep 400 slightly dark so it stays readable */
-  --slate-300: #475569;
-  --slate-200: #334155;
-  --slate-100: #1e293b;
-  --slate-50: #0f172a;
-
-  /* Enhance contrast for colored text and backgrounds in Light Mode */
-
-  /* RED */
-  --color-red-300: #b91c1c;
-  /* red-700 */
-  --color-red-400: #dc2626;
-  /* red-600 */
-  --color-red-500: #b91c1c;
-  /* red-700 */
-  --color-red-950: #ef4444;
-  /* red-500 (so that 950/20 becomes a visible pink bg) */
-
-  /* ORANGE */
-  --color-orange-300: #c2410c;
-  /* orange-700 */
-  --color-orange-400: #ea580c;
-  /* orange-600 */
-  --color-orange-500: #c2410c;
-  /* orange-700 */
-  --color-orange-950: #f97316;
-  /* orange-500 */
-
-  /* YELLOW */
-  --color-yellow-300: #a16207;
-  /* yellow-700 */
-  --color-yellow-400: #ca8a04;
-  /* yellow-600 */
-  --color-yellow-500: #a16207;
-  /* yellow-700 */
-  --color-yellow-950: #eab308;
-  /* yellow-500 */
-
-  /* GREEN */
-  --color-green-300: #15803d;
-  /* green-700 */
-  --color-green-400: #16a34a;
-  /* green-600 */
-  --color-green-500: #15803d;
-  /* green-700 */
-  --color-green-950: #22c55e;
-  /* green-500 */
-
-  /* EMERALD */
-  --color-emerald-300: #047857;
-  /* emerald-700 */
-  --color-emerald-400: #059669;
-  /* emerald-600 */
-  --color-emerald-500: #047857;
-  /* emerald-700 */
-  --color-emerald-950: #10b981;
-  /* emerald-500 */
-
-  /* BLUE */
-  --color-blue-300: #1d4ed8;
-  /* blue-700 */
-  --color-blue-400: #2563eb;
-  /* blue-600 */
-  --color-blue-500: #1d4ed8;
-  /* blue-700 */
-  --color-blue-950: #3b82f6;
-  /* blue-500 */
-
-  /* PURPLE */
-  --color-purple-300: #7e22ce;
-  /* purple-700 */
-  --color-purple-400: #9333ea;
-  /* purple-600 */
-  --color-purple-500: #7e22ce;
-  /* purple-700 */
-  --color-purple-950: #a855f7;
-  /* purple-500 */
-}
+@import "./theme.css";
+@import "./variables.css";
 
 body {
-  font-family: var(--font-sans), sans-serif;
+  /* Use Georgia font style globally */
+  font-family: Georgia, serif, var(--font-sans);
   color: var(--foreground);
+  /* Optical sizing + smoothing */
+  font-optical-sizing: auto;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
 }
 
 /* 1-Second Dual-Layer Smooth Background Crossfade */
 
-:root {
-  /* Premium Dark Theme */
-  --background: #09090b;
-  /* Very dark zinc */
-  --foreground: #fafafa;
-
-  --card: rgba(24, 24, 27, 0.7);
-  /* Zinc 900 with transparency for glassmorphism */
-  --card-foreground: #fafafa;
-
-  --border: rgba(255, 255, 255, 0.1);
-
-  --primary: #3b82f6;
-  /* Blue 500 */
-  --primary-foreground: #ffffff;
-
-  --secondary: rgba(39, 39, 42, 0.8);
-  /* Zinc 800 */
-  --secondary-foreground: #fafafa;
-
-  --muted: rgba(39, 39, 42, 0.5);
-  --muted-foreground: #a1a1aa;
-  /* Zinc 400 */
-
-  --destructive: #ef4444;
-  /* Red 500 */
-  --destructive-foreground: #ffffff;
-
-  --sidebar: #09090b;
-
-  /* Overrides for hardcoded colors in Dark Mode (Normal) */
-  --t-white: #ffffff;
-  --t-black: #000000;
-  --slate-900: #0f172a;
-  --slate-800: #1e293b;
-  --slate-700: #334155;
-  --slate-600: #475569;
-  --slate-500: #64748b;
-  --slate-400: #94a3b8;
-  --slate-300: #cbd5e1;
-  --slate-200: #e2e8f0;
-  --slate-100: #f1f5f9;
-  --slate-50: #f8fafc;
-}
-
-.light {
-  /* Clean Light Theme */
-  --background: #f1f5f9;
-  /* Slate 100 */
-  --foreground: #0f172a;
-
-  --card: rgba(255, 255, 255, 0.9);
-  --card-foreground: #0f172a;
-
-  --border: rgba(0, 0, 0, 0.1);
-
-  --primary: #2563eb;
-  /* Blue 600 */
-  --primary-foreground: #ffffff;
-
-  --secondary: rgba(241, 245, 249, 0.8);
-  /* Slate 100 */
-  --secondary-foreground: #0f172a;
-
-  --muted: rgba(226, 232, 240, 0.5);
-  /* Slate 200 */
-  --muted-foreground: #64748b;
-  /* Slate 500 */
-
-  --sidebar: #ffffff;
-
-  /* Overrides for hardcoded colors in Light Mode (Inverted) */
-  --t-white: #0f172a;
-  /* Make text-white become very dark slate */
-  --t-black: #ffffff;
-  --slate-900: #ffffff;
-  --slate-800: #f8fafc;
-  --slate-700: #f1f5f9;
-  --slate-600: #e2e8f0;
-  --slate-500: #cbd5e1;
-  --slate-400: #64748b;
-  /* Keep 400 slightly dark so it stays readable */
-  --slate-300: #475569;
-  --slate-200: #334155;
-  --slate-100: #1e293b;
-  --slate-50: #0f172a;
-
-  /* Enhance contrast for colored text and backgrounds in Light Mode */
-
-  /* RED */
-  --color-red-300: #b91c1c;
-  /* red-700 */
-  --color-red-400: #dc2626;
-  /* red-600 */
-  --color-red-500: #b91c1c;
-  /* red-700 */
-  --color-red-950: #ef4444;
-  /* red-500 (so that 950/20 becomes a visible pink bg) */
-
-  /* ORANGE */
-  --color-orange-300: #c2410c;
-  /* orange-700 */
-  --color-orange-400: #ea580c;
-  /* orange-600 */
-  --color-orange-500: #c2410c;
-  /* orange-700 */
-  --color-orange-950: #f97316;
-  /* orange-500 */
-
-  /* YELLOW */
-  --color-yellow-300: #a16207;
-  /* yellow-700 */
-  --color-yellow-400: #ca8a04;
-  /* yellow-600 */
-  --color-yellow-500: #a16207;
-  /* yellow-700 */
-  --color-yellow-950: #eab308;
-  /* yellow-500 */
-
-  /* GREEN */
-  --color-green-300: #15803d;
-  /* green-700 */
-  --color-green-400: #16a34a;
-  /* green-600 */
-  --color-green-500: #15803d;
-  /* green-700 */
-  --color-green-950: #22c55e;
-  /* green-500 */
-
-  /* EMERALD */
-  --color-emerald-300: #047857;
-  /* emerald-700 */
-  --color-emerald-400: #059669;
-  /* emerald-600 */
-  --color-emerald-500: #047857;
-  /* emerald-700 */
-  --color-emerald-950: #10b981;
-  /* emerald-500 */
-
-  /* BLUE */
-  --color-blue-300: #1d4ed8;
-  /* blue-700 */
-  --color-blue-400: #2563eb;
-  /* blue-600 */
-  --color-blue-500: #1d4ed8;
-  /* blue-700 */
-  --color-blue-950: #3b82f6;
-  /* blue-500 */
-
-  /* PURPLE */
-  --color-purple-300: #7e22ce;
-  /* purple-700 */
-  --color-purple-400: #9333ea;
-  /* purple-600 */
-  --color-purple-500: #7e22ce;
-  /* purple-700 */
-  --color-purple-950: #a855f7;
-  /* purple-500 */
-}
-
-body {
-  font-family: var(--font-sans), sans-serif;
-  color: var(--foreground);
-}
-
-/* 1-Second Dual-Layer Smooth Background Crossfade */
+/* Dark Mode Background Layer (Active by default, fades out on .light) */
 body::before,
 body::after {
   content: "";
@@ -426,7 +28,6 @@ body::after {
   background-attachment: fixed;
 }
 
-/* Dark Mode Background Layer (Active by default, fades out on .light) */
 body::before {
   background-color: #09090b;
   background-image:
@@ -570,7 +171,6 @@ input::-ms-clear {
   display: none;
 }
 
-
 /* Accordion Animation Fix */
 .accordion-grid {
   display: grid;
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index e897e0a..772d419 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -3,10 +3,20 @@ import localFont from "next/font/local";
 import { ThemeProvider } from "@/components/ThemeProvider";
 import "./globals.css";
 
-// Bypass google font remote fetch during offline compilation
-const inter = {
-  variable: "font-sans",
-};
+// Inter font — local variable font file, matches demoplace.my.id
+// demoplace uses: --font-sans: var(--font-inter) which renders as Inter
+const inter = localFont({
+  src: [
+    {
+      path: "../../public/fonts/Inter-Variable.woff2",
+      weight: "100 900",
+      style: "normal",
+    },
+  ],
+  variable: "--font-inter",
+  display: "swap",
+  adjustFontFallback: false,
+});
 
 const backoneFont = localFont({
   src: "../../public/fonts/BackOneLogo-Regular.ttf",
diff --git a/src/app/theme.css b/src/app/theme.css
new file mode 100644
index 0000000..67b1e92
--- /dev/null
+++ b/src/app/theme.css
@@ -0,0 +1,164 @@
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+
+  --font-backone: var(--font-backone);
+
+  /* Set Georgia as the default sans-serif replacement globally */
+  --font-sans: Georgia, serif, var(--font-inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
+  
+  /* Mono also uses Inter first — matches demoplace (--default-mono-font-family: var(--font-inter)) */
+  --font-mono: var(--font-inter, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
+
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+
+  --color-border: var(--border);
+
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+
+  --color-sidebar: var(--sidebar);
+
+  /* OVERRIDE TAILWIND HARDCODED COLORS FOR SEAMLESS LIGHT MODE */
+  --color-slate-900: var(--slate-900);
+  --color-slate-800: var(--slate-800);
+  --color-slate-700: var(--slate-700);
+  --color-slate-600: var(--slate-600);
+  --color-slate-500: var(--slate-500);
+  --color-slate-400: var(--slate-400);
+  --color-slate-300: var(--slate-300);
+  --color-slate-200: var(--slate-200);
+  --color-slate-100: var(--slate-100);
+  --color-slate-50: var(--slate-50);
+
+  --color-gray-900: var(--slate-900);
+  --color-gray-800: var(--slate-800);
+  --color-gray-700: var(--slate-700);
+  --color-gray-600: var(--slate-600);
+  --color-gray-500: var(--slate-500);
+  --color-gray-400: var(--slate-400);
+  --color-gray-300: var(--slate-300);
+  --color-gray-200: var(--slate-200);
+  --color-gray-100: var(--slate-100);
+  --color-gray-50: var(--slate-50);
+
+  --color-white: var(--t-white);
+  --color-black: var(--t-black);
+
+  /* Radix-style color palette — matching demoplace.my.id exactly */
+  --color-red-50: #fef2f2;
+  --color-red-100: #ffe2e2;
+  --color-red-200: #ffcaca;
+  --color-red-300: #ffa3a3;
+  --color-red-400: #ff6568;
+  --color-red-500: #fb2c36;
+  --color-red-600: #e40014;
+  --color-red-700: #bf000f;
+  --color-red-800: #9f0712;
+  --color-red-900: #82181a;
+  --color-red-950: #460809;
+
+  --color-orange-300: #ffb96d;
+  --color-orange-400: #ff8b1a;
+  --color-orange-500: #fe6e00;
+  --color-orange-900: #7e2a0c;
+  --color-orange-950: #441306;
+
+  --color-amber-100: #fef3c6;
+  --color-amber-200: #fee685;
+  --color-amber-300: #ffd236;
+  --color-amber-400: #fcbb00;
+  --color-amber-500: #f99c00;
+  --color-amber-600: #dd7400;
+  --color-amber-700: #b75000;
+  --color-amber-800: #953d00;
+  --color-amber-900: #7b3306;
+  --color-amber-950: #461901;
+
+  --color-yellow-300: #ffe02a;
+  --color-yellow-400: #fac800;
+  --color-yellow-500: #edb200;
+
+  --color-green-300: #7bf1a8;
+  --color-green-400: #05df72;
+  --color-green-500: #00c758;
+  --color-green-800: #016630;
+  --color-green-900: #0d542b;
+  --color-green-950: #032e15;
+
+  --color-emerald-100: #d0fae5;
+  --color-emerald-200: #a4f4cf;
+  --color-emerald-300: #5ee9b5;
+  --color-emerald-400: #00d294;
+  --color-emerald-500: #00bb7f;
+  --color-emerald-600: #009767;
+  --color-emerald-700: #007956;
+  --color-emerald-900: #004e3b;
+  --color-emerald-950: #002c22;
+
+  --color-teal-400: #00d3bd;
+  --color-teal-500: #00baa7;
+
+  --color-cyan-100: #cefafe;
+  --color-cyan-300: #53eafd;
+  --color-cyan-400: #00d2ef;
+  --color-cyan-500: #00b7d7;
+  --color-cyan-600: #0092b5;
+
+  --color-sky-400: #00bcfe;
+
+  --color-blue-50: #eff6ff;
+  --color-blue-200: #bedbff;
+  --color-blue-300: #90c5ff;
+  --color-blue-400: #54a2ff;
+  --color-blue-500: #3080ff;
+  --color-blue-600: #155dfc;
+  --color-blue-700: #1447e6;
+  --color-blue-800: #193cb8;
+  --color-blue-900: #1c398e;
+  --color-blue-950: #162456;
+
+  --color-indigo-300: #a4b3ff;
+  --color-indigo-400: #7d87ff;
+  --color-indigo-500: #625fff;
+  --color-indigo-600: #4f39f6;
+  --color-indigo-900: #312c85;
+
+  --color-violet-400: #a685ff;
+  --color-violet-500: #8d54ff;
+
+  --color-purple-300: #d9b3ff;
+  --color-purple-400: #c07eff;
+  --color-purple-500: #ac4bff;
+  --color-purple-600: #9810fa;
+  --color-purple-900: #59168b;
+  --color-purple-950: #3c0366;
+
+  --color-pink-400: #fb64b6;
+  --color-rose-400: #ff667f;
+  --color-rose-900: #8b0836;
+
+  /* Micro-animations */
+  --animate-fade-in: fade-in 0.5s ease-out forwards;
+  --animate-slide-up: slide-up 0.5s ease-out forwards;
+
+  @keyframes fade-in {
+    0% { opacity: 0; }
+    100% { opacity: 1; }
+  }
+
+  @keyframes slide-up {
+    0% { opacity: 0; transform: translateY(20px); }
+    100% { opacity: 1; transform: translateY(0); }
+  }
+}
diff --git a/src/app/variables.css b/src/app/variables.css
new file mode 100644
index 0000000..d58b7c1
--- /dev/null
+++ b/src/app/variables.css
@@ -0,0 +1,159 @@
+:root {
+  /* Premium Dark Theme */
+  --background: #09090b;
+  /* Very dark zinc */
+  --foreground: #fafafa;
+
+  --card: rgba(24, 24, 27, 0.7);
+  /* Zinc 900 with transparency for glassmorphism */
+  --card-foreground: #fafafa;
+
+  --border: rgba(255, 255, 255, 0.1);
+
+  --primary: #3b82f6;
+  /* Blue 500 */
+  --primary-foreground: #ffffff;
+
+  --secondary: rgba(39, 39, 42, 0.8);
+  /* Zinc 800 */
+  --secondary-foreground: #fafafa;
+
+  --muted: rgba(39, 39, 42, 0.5);
+  --muted-foreground: #a1a1aa;
+  /* Zinc 400 */
+
+  --destructive: #ef4444;
+  /* Red 500 */
+  --destructive-foreground: #ffffff;
+
+  --sidebar: #09090b;
+
+  /* Overrides for hardcoded colors in Dark Mode (Normal) */
+  --t-white: #ffffff;
+  --t-black: #000000;
+  --slate-900: #0f172a;
+  --slate-800: #1e293b;
+  --slate-700: #334155;
+  --slate-600: #475569;
+  --slate-500: #64748b;
+  --slate-400: #94a3b8;
+  --slate-300: #cbd5e1;
+  --slate-200: #e2e8f0;
+  --slate-100: #f1f5f9;
+  --slate-50: #f8fafc;
+}
+
+.light {
+  /* Clean Light Theme */
+  --background: #f1f5f9;
+  /* Slate 100 */
+  --foreground: #0f172a;
+
+  --card: rgba(255, 255, 255, 0.9);
+  --card-foreground: #0f172a;
+
+  --border: rgba(0, 0, 0, 0.1);
+
+  --primary: #2563eb;
+  /* Blue 600 */
+  --primary-foreground: #ffffff;
+
+  --secondary: rgba(241, 245, 249, 0.8);
+  /* Slate 100 */
+  --secondary-foreground: #0f172a;
+
+  --muted: rgba(226, 232, 240, 0.5);
+  /* Slate 200 */
+  --muted-foreground: #64748b;
+  /* Slate 500 */
+
+  --sidebar: #ffffff;
+
+  /* Overrides for hardcoded colors in Light Mode (Inverted) */
+  --t-white: #0f172a;
+  /* Make text-white become very dark slate */
+  --t-black: #ffffff;
+  --slate-900: #ffffff;
+  --slate-800: #f8fafc;
+  --slate-700: #f1f5f9;
+  --slate-600: #e2e8f0;
+  --slate-500: #cbd5e1;
+  --slate-400: #64748b;
+  /* Keep 400 slightly dark so it stays readable */
+  --slate-300: #475569;
+  --slate-200: #334155;
+  --slate-100: #1e293b;
+  --slate-50: #0f172a;
+
+  /* Enhance contrast for colored text and backgrounds in Light Mode */
+
+  /* RED */
+  --color-red-300: #b91c1c;
+  /* red-700 */
+  --color-red-400: #dc2626;
+  /* red-600 */
+  --color-red-500: #b91c1c;
+  /* red-700 */
+  --color-red-950: #ef4444;
+  /* red-500 (so that 950/20 becomes a visible pink bg) */
+
+  /* ORANGE */
+  --color-orange-300: #c2410c;
+  /* orange-700 */
+  --color-orange-400: #ea580c;
+  /* orange-600 */
+  --color-orange-500: #c2410c;
+  /* orange-700 */
+  --color-orange-950: #f97316;
+  /* orange-500 */
+
+  /* YELLOW */
+  --color-yellow-300: #a16207;
+  /* yellow-700 */
+  --color-yellow-400: #ca8a04;
+  /* yellow-600 */
+  --color-yellow-500: #a16207;
+  /* yellow-700 */
+  --color-yellow-950: #eab308;
+  /* yellow-500 */
+
+  /* GREEN */
+  --color-green-300: #15803d;
+  /* green-700 */
+  --color-green-400: #16a34a;
+  /* green-600 */
+  --color-green-500: #15803d;
+  /* green-700 */
+  --color-green-950: #22c55e;
+  /* green-500 */
+
+  /* EMERALD */
+  --color-emerald-300: #047857;
+  /* emerald-700 */
+  --color-emerald-400: #059669;
+  /* emerald-600 */
+  --color-emerald-500: #047857;
+  /* emerald-700 */
+  --color-emerald-950: #10b981;
+  /* emerald-500 */
+
+  /* BLUE */
+  --color-blue-300: #1d4ed8;
+  /* blue-700 */
+  --color-blue-400: #2563eb;
+  /* blue-600 */
+  --color-blue-500: #1d4ed8;
+  /* blue-700 */
+  --color-blue-950: #3b82f6;
+  /* blue-500 */
+
+  /* PURPLE */
+  --color-purple-300: #7e22ce;
+  /* purple-700 */
+  --color-purple-400: #9333ea;
+  /* purple-600 */
+  --color-purple-500: #7e22ce;
+  /* purple-700 */
+  --color-purple-950: #a855f7;
+  /* purple-500 */
+}
diff --git a/src/components/admin/AgentEmptyMap.tsx b/src/components/admin/AgentEmptyMap.tsx
new file mode 100644
index 0000000..b3ce0d1
--- /dev/null
+++ b/src/components/admin/AgentEmptyMap.tsx
@@ -0,0 +1,27 @@
+"use client";
+
+import React from "react";
+import { MapPin } from "lucide-react";
+
+export function EmptyMap() {
+  return (
+    <div className="flex flex-col items-center justify-center h-72 gap-4">
+      <div className="w-16 h-16 rounded-full flex items-center justify-center"
+        style={{ background: "rgba(99,102,241,0.1)", border: "1px solid rgba(99,102,241,0.25)" }}>
+        <MapPin className="w-7 h-7 text-indigo-400 opacity-60" />
+      </div>
+      <div className="text-center font-serif">
+        <p className="text-sm font-semibold text-slate-300">No agent locations configured</p>
+        <p className="text-xs text-slate-400 mt-2.5 max-w-sm leading-relaxed flex items-center justify-center gap-1.5 flex-wrap">
+          <span>Click the</span>
+          <span className="inline-flex items-center justify-center p-1 rounded bg-indigo-950/20 text-slate-500 border border-slate-700/30" title="Map Pin Icon">
+            <MapPin className="w-3.5 h-3.5 text-slate-500" />
+          </span>
+          <span>icon in the</span>
+          <span className="text-slate-300 font-semibold">Actions</span>
+          <span>column to set coordinates.</span>
+        </p>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/admin/AgentLocationMap.tsx b/src/components/admin/AgentLocationMap.tsx
new file mode 100644
index 0000000..4e6f496
--- /dev/null
+++ b/src/components/admin/AgentLocationMap.tsx
@@ -0,0 +1,248 @@
+// src/components/admin/AgentLocationMap.tsx
+"use client";
+
+import React, { useEffect, useRef } from "react";
+import { RotateCcw } from "lucide-react";
+import { getViewAsHeaders } from "@/lib/admin-api";
+import {
+  EmptyMap,
+  MAP_CSS,
+  drawFlowLines,
+  drawMarkers,
+  type AgentLocationPin
+} from "./AgentLocationMapHelpers";
+
+interface Props {
+  pins: AgentLocationPin[];
+  onEditLocation?: (agentUuid: string, agentLabel: string) => void;
+  canEdit?: boolean;
+}
+
+const AgentLocationMap = React.memo(function AgentLocationMap({
+  pins,
+  onEditLocation,
+  canEdit = false,
+}: Props) {
+  const mapRef = useRef<HTMLDivElement>(null);
+  const instanceRef = useRef<any>(null);
+  const LRef = useRef<any>(null);
+  const [flows, setFlows] = React.useState<any[]>([]);
+
+  useEffect(() => {
+    let active = true;
+    fetch("/api/dashboard/agent-flows", { headers: getViewAsHeaders() })
+      .then((res) => res.json())
+      .then((json) => {
+        if (active && json.ok && json.data) {
+          setFlows(json.data);
+        }
+      })
+      .catch((err) => console.error("Failed to load agent flows for map:", err));
+    return () => {
+      active = false;
+    };
+  }, [pins]);
+
+  const resetView = () => {
+    if (!instanceRef.current || !pins.length || !LRef.current) return;
+    const L = LRef.current;
+    if (pins.length === 1) {
+      instanceRef.current.setView([pins[0].latitude, pins[0].longitude], 14, { animate: false });
+    } else {
+      instanceRef.current.fitBounds(L.latLngBounds(pins.map((p) => [p.latitude, p.longitude])), {
+        padding: [70, 70],
+        maxZoom: 14,
+        animate: false,
+      });
+    }
+  };
+
+  useEffect(() => {
+    let mounted = true;
+    if (!mapRef.current) return;
+
+    // Inject styles
+    const styleId = "leaflet-custom-markers-css";
+    if (!document.getElementById(styleId)) {
+      const s = document.createElement("style");
+      s.id = styleId;
+      s.innerHTML = MAP_CSS;
+      document.head.appendChild(s);
+    }
+
+    const boot = async () => {
+      if (!mounted || !mapRef.current) return;
+
+      // Inject Leaflet CSS
+      if (!document.getElementById("lf-css-admin")) {
+        const lnk = document.createElement("link");
+        lnk.id = "lf-css-admin";
+        lnk.rel = "stylesheet";
+        lnk.href = "https://unpkg.com/leaflet@1.9.4/dist/leaflet.css";
+        document.head.appendChild(lnk);
+      }
+
+      const L = (await import("leaflet")).default;
+      if (!mounted || !mapRef.current) return;
+      LRef.current = L;
+
+      if (instanceRef.current) {
+        try {
+          instanceRef.current.remove();
+        } catch (_) {}
+      }
+
+      const map = L.map(mapRef.current, {
+        center: pins[0] ? [pins[0].latitude, pins[0].longitude] : [-2.548926, 118.0148634],
+        zoom: pins.length === 1 ? 14 : 8,
+        zoomControl: false,
+        attributionControl: false,
+        minZoom: 2,
+        maxZoom: 20,
+        maxBounds: [[-90, -180], [90, 180]],
+        maxBoundsViscosity: 1.0,
+        zoomAnimation: false,
+        fadeAnimation: false,
+        markerZoomAnimation: false,
+      });
+      instanceRef.current = map;
+
+      L.tileLayer("https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png", {
+        subdomains: "abcd",
+        maxZoom: 20,
+        noWrap: true,
+      }).addTo(map);
+
+      if (pins.length > 1) {
+        map.fitBounds(L.latLngBounds(pins.map((p) => [p.latitude, p.longitude])), {
+          padding: [70, 70],
+          maxZoom: 14,
+          animate: false,
+        });
+      }
+
+      // ── Get heartbeats for agent uptime from window or fetch ───────────────
+      const uptimeMap: Record<string, number> = {};
+      try {
+        const res = await fetch("/api/dashboard/agent-heartbeats");
+        if (res.ok) {
+          const json = await res.json();
+          if (json.ok && json.data) {
+            json.data.forEach((item: any) => {
+              uptimeMap[item.agent_uuid] = item.uptime_percent ?? 100;
+            });
+          }
+        }
+      } catch (_) {}
+
+      if (!mounted) return;
+
+      // Draw Flow lines
+      drawFlowLines(map, L, pins, flows);
+
+      // Draw Markers
+      drawMarkers(map, L, pins, uptimeMap, canEdit, onEditLocation);
+    };
+
+    boot();
+    return () => {
+      mounted = false;
+      if (instanceRef.current) {
+        try {
+          instanceRef.current.remove();
+        } catch (_) {}
+        instanceRef.current = null;
+      }
+    };
+  }, [pins, flows, canEdit]);
+
+  if (!pins.length) return <EmptyMap />;
+
+  return (
+    <div className="relative w-full rounded-xl overflow-hidden" style={{ height: 420 }}>
+      <div ref={mapRef} style={{ width: "100%", height: "100%", background: "#0a1628" }} />
+
+      {/* Controls */}
+      <div className="absolute top-3 right-3 z-[1000] flex flex-col gap-1.5">
+        {[
+          { t: "Zoom In", l: "+", fn: () => instanceRef.current?.zoomIn() },
+          { t: "Zoom Out", l: "−", fn: () => instanceRef.current?.zoomOut() },
+        ].map((b) => (
+          <button
+            key={b.t}
+            onClick={b.fn}
+            title={b.t}
+            className="w-9 h-9 flex items-center justify-center rounded-lg font-bold text-xl text-white hover:bg-indigo-600/30 transition-colors"
+            style={{
+              background: "rgba(13,21,38,0.92)",
+              border: "1px solid rgba(99,102,241,0.35)",
+              backdropFilter: "blur(8px)",
+            }}
+          >
+            {b.l}
+          </button>
+        ))}
+        <button
+          onClick={resetView}
+          title="Fit all agents"
+          className="w-9 h-9 flex items-center justify-center rounded-lg text-indigo-400 hover:text-indigo-300 transition-colors"
+          style={{
+            background: "rgba(13,21,38,0.92)",
+            border: "1px solid rgba(99,102,241,0.35)",
+            backdropFilter: "blur(8px)",
+          }}
+        >
+          <RotateCcw className="w-4 h-4" />
+        </button>
+      </div>
+
+      {/* Legend */}
+      <div
+        className="absolute bottom-3 left-3 z-[1000] flex gap-4 text-xs px-3.5 py-2 rounded-xl"
+        style={{
+          background: "rgba(10,17,32,0.88)",
+          border: "1px solid rgba(99,102,241,0.2)",
+          backdropFilter: "blur(8px)",
+        }}
+      >
+        {[
+          ["#10b981", "Online", true],
+          ["#ef4444", "Offline", false],
+        ].map(([c, l, glow]: any) => (
+          <span key={l} className="flex items-center gap-1.5 text-slate-400">
+            <span
+              style={{
+                display: "inline-block",
+                width: 10,
+                height: 10,
+                borderRadius: "50%",
+                background: c,
+                boxShadow: glow ? `0 0 7px ${c}` : undefined,
+              }}
+            />
+            {l}
+          </span>
+        ))}
+        {flows.length > 0 && (
+          <span className="flex items-center gap-1.5 text-slate-500">
+            <span
+              style={{
+                display: "inline-block",
+                width: 16,
+                height: 2,
+                background: "rgba(99,102,241,0.7)",
+                borderTop: "1px dashed rgba(99,102,241,0.9)",
+              }}
+            />
+            Traffic flow
+          </span>
+        )}
+        <span className="font-semibold font-mono" style={{ color: "#818cf8" }}>
+          {pins.length} agent{pins.length !== 1 ? "s" : ""} mapped
+        </span>
+      </div>
+    </div>
+  );
+});
+
+export default AgentLocationMap;
diff --git a/src/components/admin/AgentLocationMapHelpers.tsx b/src/components/admin/AgentLocationMapHelpers.tsx
new file mode 100644
index 0000000..892d073
--- /dev/null
+++ b/src/components/admin/AgentLocationMapHelpers.tsx
@@ -0,0 +1,182 @@
+"use client";
+
+import React from "react";
+import { getFlowTooltipContent } from "../dashboard/IndonesiaAgentMapHelpers";
+import { EmptyMap } from "./AgentEmptyMap";
+import { MAP_CSS } from "./AgentMapCss";
+
+export { EmptyMap, MAP_CSS };
+
+export interface AgentLocationPin {
+  agent_uuid: string;
+  label: string;
+  latitude: number;
+  longitude: number;
+  isOnline?: boolean;
+  uptimePercent?: number;
+  site_uuid?: string;
+}
+
+export function buildMarkerHtml(online: boolean) {
+  return `
+    <div class="custom-agent-marker ${online ? 'online' : 'offline'}">
+      <div class="marker-beacon-ring"></div>
+      <div class="marker-glass-disc">
+        <div class="marker-core-dot"></div>
+      </div>
+    </div>
+  `;
+}
+
+// ── Draw Flow lines ONLY if they exist in active flows ────────────────
+export function drawFlowLines(map: any, L: any, pins: AgentLocationPin[], flows: any[]) {
+  flows.forEach((flow) => {
+    const src = pins.find((p) => p.agent_uuid === flow.source);
+    const dst = pins.find((p) => p.agent_uuid === flow.target);
+    if (!src || !dst) return;
+
+    const bothOn = src.isOnline && dst.isOnline;
+    const bothOff = !src.isOnline && !dst.isOnline;
+    const lineColor = bothOn ? "#34d399" : bothOff ? "#f87171" : "#fbbf24";
+    const weight = Math.min(Math.max(flow.bytes / 1024 / 1024 / 80, 2.0), 6);
+
+    // Background polyline for hover trigger area
+    const baseLine = L.polyline(
+      [[src.latitude, src.longitude], [dst.latitude, dst.longitude]],
+      { color: lineColor, weight: weight + 4, opacity: 0.15 }
+    ).addTo(map);
+
+    // Main colored line
+    const activeLine = L.polyline(
+      [[src.latitude, src.longitude], [dst.latitude, dst.longitude]],
+      { color: lineColor, weight: weight, opacity: 0.5 }
+    ).addTo(map);
+
+    // Moving animation line
+    const animLine = L.polyline(
+      [[src.latitude, src.longitude], [dst.latitude, dst.longitude]],
+      {
+        color: lineColor,
+        weight: weight * 0.6,
+        opacity: 0.85,
+        dashArray: "8 12",
+        className: "flow-line",
+      }
+    ).addTo(map);
+
+    const tooltipHtml = getFlowTooltipContent(
+      src.label,
+      dst.label,
+      flow.bytes,
+      flow.flowsCount,
+      flow.details || []
+    );
+
+    [baseLine, activeLine, animLine].forEach((line) => {
+      line.bindTooltip(tooltipHtml, { sticky: true, className: "leaflet-custom-popup shadow-2xl" });
+    });
+  });
+}
+
+// ── Draw Markers with Popups & Tooltips ───────────────────────────────
+export function drawMarkers(
+  map: any,
+  L: any,
+  pins: AgentLocationPin[],
+  uptimeMap: Record<string, number>,
+  canEdit: boolean,
+  onEditLocation?: (agentUuid: string, agentLabel: string) => void
+) {
+  pins.forEach((pin) => {
+    const online = pin.isOnline ?? false;
+    const color = online ? "#10b981" : "#ef4444";
+    const colorL = online ? "#34d399" : "#f87171";
+
+    const icon = L.divIcon({
+      html: buildMarkerHtml(online),
+      className: "",
+      iconSize: [32, 32],
+      iconAnchor: [16, 16],
+      popupAnchor: [0, -18],
+      tooltipAnchor: [0, -18],
+    });
+
+    const marker = L.marker([pin.latitude, pin.longitude], { icon });
+
+    // ── Permanent label tooltip ──────────────────────────────────────────
+    const shortLabel = pin.label.length > 22 ? pin.label.slice(0, 20) + "…" : pin.label;
+    marker.bindTooltip(
+      `<div style="
+        padding:4px 10px 4px 8px; border-radius:8px; white-space:nowrap;
+        background:rgba(10,18,36,0.93); border:1.5px solid ${colorL};
+        color:${colorL}; font-size:11px; font-weight:700;
+        font-family:Georgia,serif; letter-spacing:0.02em;
+        box-shadow:0 0 10px ${color}55, 0 2px 12px rgba(0,0,0,0.7);
+        display:flex; align-items:center; gap:6px;">
+        <span style="width:7px;height:7px;border-radius:50%;background:${color};
+          flex-shrink:0;${online ? `box-shadow:0 0 6px ${color}` : ""};"></span>
+        ${shortLabel}
+      </div>`,
+      { permanent: true, direction: "top", offset: [0, -10], className: "agent-label-tooltip", interactive: false }
+    );
+
+    // ── Click popup ──────────────────────────────────────────────────────
+    const uptime = uptimeMap[pin.agent_uuid];
+    const uptimeColor =
+      (uptime ?? 100) >= 98
+        ? "#34d399"
+        : (uptime ?? 100) >= 90
+        ? "#fbbf24"
+        : "#f87171";
+    const editBtn =
+      canEdit && onEditLocation
+        ? `<button id="el-${pin.agent_uuid.replace(/\W/g, "")}"
+           style="margin-top:10px;width:100%;padding:6px;background:rgba(99,102,241,0.15);
+                  border:1px solid rgba(99,102,241,0.35);border-radius:8px;color:#818cf8;
+                  font-size:11px;font-weight:700;cursor:pointer;font-family:Georgia,serif;"
+           onmouseover="this.style.background='rgba(99,102,241,0.3)'"
+           onmouseout="this.style.background='rgba(99,102,241,0.15)'">✎ Update Location</button>`
+        : "";
+
+    marker.bindPopup(
+      `<div style="background:#0d1526;border:1px solid ${colorL}44;border-radius:14px;padding:14px 16px;min-width:200px;font-family:Georgia,serif;box-shadow:0 20px 60px rgba(0,0,0,0.85);">
+        <div style="display:flex;align-items:center;gap:8px;margin-bottom:10px;">
+          <span style="width:9px;height:9px;border-radius:50%;background:${color};${
+        online ? `box-shadow:0 0 8px ${color};` : ""
+      };flex-shrink:0;"></span>
+          <span style="font-size:13px;font-weight:800;color:${colorL};overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:170px;">${
+        pin.label
+      }</span>
+        </div>
+        <div style="display:grid;grid-template-columns:auto 1fr;gap:3px 12px;font-size:10.5px;font-family:monospace;">
+          <span style="color:#475569;">UUID</span><span style="color:#93c5fd;">${pin.agent_uuid}</span>
+          <span style="color:#475569;">Status</span><span style="color:${color};font-weight:700;">${
+        online ? "● Online" : "○ Offline"
+      }</span>
+          <span style="color:#475569;">Lat</span><span style="color:#cbd5e1;">${pin.latitude.toFixed(6)}</span>
+          <span style="color:#475569;">Lng</span><span style="color:#cbd5e1;">${pin.longitude.toFixed(6)}</span>
+          ${
+            uptime !== undefined
+              ? `<span style="color:#475569;">Uptime</span><span style="color:${uptimeColor};font-weight:700;">${uptime.toFixed(
+                  1
+                )}%</span>`
+              : ""
+          }
+        </div>${editBtn}
+      </div>`,
+      { className: "agent-popup", maxWidth: 260 }
+    );
+
+    marker.on("popupopen", () => {
+      const id = `el-${pin.agent_uuid.replace(/\W/g, "")}`;
+      setTimeout(() => {
+        document.getElementById(id)?.addEventListener("click", () => {
+          onEditLocation?.(pin.agent_uuid, pin.label);
+          map.closePopup();
+        });
+      }, 50);
+    });
+
+    marker.addTo(map);
+  });
+}
diff --git a/src/components/admin/AgentMapCss.ts b/src/components/admin/AgentMapCss.ts
new file mode 100644
index 0000000..f6e146e
--- /dev/null
+++ b/src/components/admin/AgentMapCss.ts
@@ -0,0 +1,97 @@
+export const MAP_CSS = `
+  .leaflet-control-attribution { display:none !important; }
+  .agent-popup .leaflet-popup-content-wrapper { background:#0a1224!important; border:1px solid rgba(99,102,241,0.25)!important; box-shadow:0 12px 36px rgba(0,0,0,0.65)!important; padding:0!important; border-radius:12px!important; }
+  .agent-popup .leaflet-popup-content { margin:0!important; }
+  .agent-popup .leaflet-popup-tip-container { display:none!important; }
+  .agent-popup .leaflet-popup-close-button { color:#94a3b8!important; font-size:18px!important; top:8px!important; right:10px!important; }
+  .agent-label-tooltip { background:transparent!important; border:none!important; box-shadow:none!important; padding:0!important; }
+  .agent-label-tooltip::before { display:none!important; }
+  @keyframes dash-flow { to { stroke-dashoffset:-20; } }
+  .flow-line { animation: dash-flow 1.4s linear infinite; }
+  
+  /* Tooltip and popup custom classes */
+  .leaflet-custom-popup .leaflet-popup-content-wrapper {
+    background: transparent !important;
+    box-shadow: none !important;
+    padding: 0 !important;
+    margin: 0 !important;
+  }
+  .leaflet-custom-popup .leaflet-popup-tip {
+    background: #0f172a !important;
+    border: 1px solid rgba(255,255,255,0.15);
+  }
+  .leaflet-custom-popup .leaflet-popup-content {
+    margin: 0 !important;
+    padding: 0 !important;
+    background: transparent !important;
+  }
+  
+  /* Premium Map Marker Styles */
+  .custom-agent-marker {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    width: 32px;
+    height: 32px;
+  }
+  .marker-beacon-ring {
+    position: absolute;
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    opacity: 0;
+    pointer-events: none;
+  }
+  .online .marker-beacon-ring {
+    border: 2px solid #10b981;
+    animation: beacon-ping 2.5s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
+  }
+  .offline .marker-beacon-ring {
+    border: 2px solid #ef4444;
+    animation: beacon-ping 2.5s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
+  }
+  @keyframes beacon-ping {
+    0% { transform: scale(0.4); opacity: 0.85; }
+    50% { opacity: 0.45; }
+    100% { transform: scale(1.8); opacity: 0; }
+  }
+  .marker-glass-disc {
+    width: 15px;
+    height: 15px;
+    border-radius: 50%;
+    background: rgba(10, 18, 36, 0.85);
+    border: 2px solid;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    backdrop-filter: blur(4px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.7), inset 0 1px 2px rgba(255, 255, 255, 0.15);
+    transition: all 0.2s ease-in-out;
+  }
+  .online .marker-glass-disc {
+    border-color: #10b981;
+    box-shadow: 0 0 10px rgba(16, 185, 129, 0.5), 0 4px 10px rgba(0, 0, 0, 0.6);
+  }
+  .offline .marker-glass-disc {
+    border-color: #ef4444;
+    box-shadow: 0 0 10px rgba(239, 68, 68, 0.5), 0 4px 10px rgba(0, 0, 0, 0.6);
+  }
+  .marker-core-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    transition: all 0.2s ease-in-out;
+  }
+  .online .marker-core-dot {
+    background: #10b981;
+    box-shadow: 0 0 6px #10b981;
+  }
+  .offline .marker-core-dot {
+    background: #ef4444;
+    box-shadow: 0 0 6px #ef4444;
+  }
+  .custom-agent-marker:hover .marker-glass-disc {
+    transform: scale(1.25);
+  }
+`;
diff --git a/src/components/admin/AgentModals.tsx b/src/components/admin/AgentModals.tsx
index ef005bc..b1d7dd9 100644
--- a/src/components/admin/AgentModals.tsx
+++ b/src/components/admin/AgentModals.tsx
@@ -3,7 +3,8 @@
 import { useState } from "react";
 import { Modal } from "@/components/ui/Modal";
 import { Loader2 } from "lucide-react";
-import { createAgent, deleteAgent, Agent } from "@/lib/actions/agents";
+import { createAgent, deleteAgent } from "@/lib/actions/agents";
+import { Agent } from "@/lib/actions/agentsCore";
 import { AgentDetailModal } from "@/components/ui/AgentDetailModal";
 import AgentAccountModal from "@/components/admin/AgentAccountModal";
 import { resolveAgentLabel, type ManagedUser } from "@/lib/admin-api";
diff --git a/src/components/dashboard/IndonesiaAgentMap.tsx b/src/components/dashboard/IndonesiaAgentMap.tsx
index 4646173..6049f5e 100644
--- a/src/components/dashboard/IndonesiaAgentMap.tsx
+++ b/src/components/dashboard/IndonesiaAgentMap.tsx
@@ -2,8 +2,6 @@
 
 import React, { useEffect, useRef, useState, useMemo } from "react";
 import { MapPin, AlertTriangle, ChevronDown, ChevronUp, Plus, Info, Loader2 } from "lucide-react";
-import * as L from "leaflet";
-import "leaflet/dist/leaflet.css";
 import { useTheme } from "next-themes";
 import { getViewAsHeaders } from "@/lib/admin-api";
 import { 
@@ -12,7 +10,7 @@ import {
   MAP_CSS_INJECT, 
   type FlowDetail 
 } from "./IndonesiaAgentMapHelpers";
-import { Agent } from "@/lib/actions/agents";
+import { Agent } from "@/lib/actions/agentsCore";
 
 interface LocationData {
   agent_uuid: string;
@@ -109,185 +107,254 @@ export function IndonesiaAgentMap({
   // Initialize and Update Map
   useEffect(() => {
     if (!mapContainerRef.current) return;
+    let mounted = true;
 
-    // Build unique mapping of agent UUIDs → their registered coordinates.
-    // Only agents with real entries in CustomAgentLocation are rendered on the map.
-    const agentMap: Record<string, { lat: number; lng: number; label: string; agentLabel: string; status: string }> = {};
+    const buildMarkerHtml = (online: boolean): string => {
+      return `
+        <div class="custom-agent-marker ${online ? 'online' : 'offline'}">
+          <div class="marker-beacon-ring"></div>
+          <div class="marker-glass-disc">
+            <div class="marker-core-dot"></div>
+          </div>
+        </div>
+      `;
+    };
 
-    agents.forEach((agent) => {
-      const uuid = agent.uuid || agent.serial || "";
-      const loc = locations.find((l) => l.agent_uuid === uuid);
+    const boot = async () => {
+      if (!mounted) return;
+      const L = (await import("leaflet")).default;
+      if (!mounted || !mapContainerRef.current) return;
 
-      // Only map agents that have a real coordinate registered.
-      // Agents without coordinates are intentionally excluded from the map.
-      if (loc) {
-        agentMap[uuid] = {
-          lat: loc.latitude,
-          lng: loc.longitude,
-          label: loc.label || "",
-          agentLabel: agent.label || "",
-          status: agent.activated ? "Online" : "Offline",
-        };
+      // Inject CSS once
+      if (!document.getElementById("lf-css-dpi")) {
+        const lnk = document.createElement("link");
+        lnk.id = "lf-css-dpi"; lnk.rel = "stylesheet";
+        lnk.href = "https://unpkg.com/leaflet@1.9.4/dist/leaflet.css";
+        document.head.appendChild(lnk);
       }
-    });
-
-    const activeCoords = Object.values(agentMap);
-    const centerLat = activeCoords.length > 0 ? activeCoords.reduce((s, v) => s + v.lat, 0) / activeCoords.length : -6.2088;
-    const centerLng = activeCoords.length > 0 ? activeCoords.reduce((s, v) => s + v.lng, 0) / activeCoords.length : 106.8456;
-
-    // Voyager for light mode: colorful, ocean blue, matches Globe Map aesthetic
-    const tileUrl = isDark 
-      ? "https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png"
-      : "https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png";
-
-    if (!mapInstanceRef.current) {
-      // Canvas renderer: redraws from geo-coords every frame, no SVG offset bugs
-      const canvasRenderer = L.canvas({ padding: 0.5 });
-      canvasRendererRef.current = canvasRenderer;
-
-      const map = L.map(mapContainerRef.current, {
-        zoomControl: false,
-        attributionControl: false,
-        renderer: canvasRenderer,
-      }).setView([centerLat, centerLng], 10);
-
-      const tiles = L.tileLayer(tileUrl, { maxZoom: 19 }).addTo(map);
-      tileLayerRef.current = tiles;
-
-      L.control.zoom({ position: "bottomright" }).addTo(map);
-
-      mapInstanceRef.current = map;
-      layerGroupRef.current = L.layerGroup().addTo(map);
-    } else {
-      const map = mapInstanceRef.current;
-      if (tileLayerRef.current) {
-        tileLayerRef.current.setUrl(tileUrl);
+      if (!document.getElementById("dpi-map-extra-css")) {
+        const s = document.createElement("style");
+        s.id = "dpi-map-extra-css";
+        s.textContent = `
+          @keyframes dpi-beacon { 0%,100%{opacity:.18;transform:scale(1);transform-origin:20px 20px;} 50%{opacity:.05;transform:scale(1.65);transform-origin:20px 20px;} }
+          .dpi-beacon { animation: dpi-beacon 2.2s ease-in-out infinite; }
+          @keyframes flowDash { to { stroke-dashoffset:-24; } }
+          .animated-flow-line { animation: flowDash 1.2s linear infinite; }
+          .agent-label-tooltip { background:transparent!important;border:none!important;box-shadow:none!important;padding:0!important; }
+          .agent-label-tooltip::before { display:none!important; }
+          .dpi-agent-label { display:inline-block;font-size:10px;font-weight:700;padding:3px 8px;border-radius:6px;border:1px solid;white-space:nowrap;letter-spacing:0.02em; }
+          .leaflet-control-attribution { display:none!important; }
+          .leaflet-custom-popup .leaflet-popup-content-wrapper { background:#0a1224!important; border:1px solid rgba(99,102,241,0.25)!important; box-shadow:0 12px 36px rgba(0,0,0,0.65)!important; padding:0!important; border-radius:12px!important; }
+          .leaflet-custom-popup .leaflet-popup-content { margin:0!important;padding:0!important; }
+          
+          /* Premium Map Marker Styles */
+          .custom-agent-marker {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            position: relative;
+            width: 32px;
+            height: 32px;
+          }
+          .marker-beacon-ring {
+            position: absolute;
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            opacity: 0;
+            pointer-events: none;
+          }
+          .online .marker-beacon-ring {
+            border: 2px solid #10b981;
+            animation: beacon-ping 2.5s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
+          }
+          .offline .marker-beacon-ring {
+            border: 2px solid #ef4444;
+            animation: beacon-ping 2.5s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
+          }
+          @keyframes beacon-ping {
+            0% { transform: scale(0.4); opacity: 0.85; }
+            50% { opacity: 0.45; }
+            100% { transform: scale(1.8); opacity: 0; }
+          }
+          .marker-glass-disc {
+            width: 15px;
+            height: 15px;
+            border-radius: 50%;
+            background: rgba(10, 18, 36, 0.85);
+            border: 2px solid;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            backdrop-filter: blur(4px);
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.7), inset 0 1px 2px rgba(255, 255, 255, 0.15);
+            transition: all 0.2s ease-in-out;
+          }
+          .online .marker-glass-disc {
+            border-color: #10b981;
+            box-shadow: 0 0 10px rgba(16, 185, 129, 0.5), 0 4px 10px rgba(0, 0, 0, 0.6);
+          }
+          .offline .marker-glass-disc {
+            border-color: #ef4444;
+            box-shadow: 0 0 10px rgba(239, 68, 68, 0.5), 0 4px 10px rgba(0, 0, 0, 0.6);
+          }
+          .marker-core-dot {
+            width: 6px;
+            height: 6px;
+            border-radius: 50%;
+            transition: all 0.2s ease-in-out;
+          }
+          .online .marker-core-dot {
+            background: #10b981;
+            box-shadow: 0 0 6px #10b981;
+          }
+          .offline .marker-core-dot {
+            background: #ef4444;
+            box-shadow: 0 0 6px #ef4444;
+          }
+          .custom-agent-marker:hover .marker-glass-disc {
+            transform: scale(1.25);
+          }
+        `;
+        document.head.appendChild(s);
       }
-      if (activeCoords.length > 0) {
-        map.panTo([centerLat, centerLng]);
-      }
-    }
 
-    const group = layerGroupRef.current;
-    group.clearLayers();
-
-    const renderer = canvasRendererRef.current;
-    const registeredUuids = new Set(locations.map(l => l.agent_uuid));
-
-    // ─── A. DRAW FLOW LINES ────────────────────────────────────────────────────
-    // Drawn BEFORE markers so markers render on top
-    flows.forEach((flow) => {
-      const src = agentMap[flow.source];
-      const dst = agentMap[flow.target];
-      if (!src || !dst || !registeredUuids.has(flow.source) || !registeredUuids.has(flow.target)) return;
-
-      const weight = Math.min(Math.max(flow.bytes / 1024 / 1024 / 80, 2.5), 8);
-      const color = isDark ? "#38bdf8" : "#1d4ed8";
-
-      // Glow / shadow underlay
-      L.polyline([[src.lat, src.lng], [dst.lat, dst.lng]], {
-        color: isDark ? "#0ea5e9" : "#3b82f6",
-        weight: weight + 4,
-        opacity: 0.15,
-        renderer,
-      }).addTo(group);
-
-      // Solid base line
-      const baseLine = L.polyline([[src.lat, src.lng], [dst.lat, dst.lng]], {
-        color,
-        weight,
-        opacity: 0.5,
-        renderer,
-      }).addTo(group);
-
-      // Animated dashed overlay (motion effect via CSS on SVG; canvas uses stroke-dasharray)
-      const animLine = L.polyline([[src.lat, src.lng], [dst.lat, dst.lng]], {
-        color,
-        weight: weight * 0.55,
-        opacity: 0.95,
-        dashArray: "10 15",
-        className: "animated-flow-line",
-        renderer,
-      }).addTo(group);
-
-      const tooltipHtml = getFlowTooltipContent(
-        src.agentLabel,
-        dst.agentLabel,
-        flow.bytes,
-        flow.flowsCount,
-        flow.details || []
-      );
-
-      [baseLine, animLine].forEach(line => {
-        line.bindTooltip(tooltipHtml, {
-          sticky: true,
-          className: "leaflet-custom-popup shadow-2xl",
-        });
-      });
-    });
-
-    // ─── B. DRAW AGENT MARKERS (circleMarker = same Canvas, pixel-perfect) ─────
-    Object.entries(agentMap).forEach(([uuid, info]) => {
-      const isOnline = info.status === "Online";
-      const fillColor  = isOnline ? "#22c55e" : "#ef4444";
-      const glowColor  = isOnline ? "#4ade80" : "#f87171";
-
-      // Outer glow ring
-      L.circleMarker([info.lat, info.lng], {
-        radius: 11,
-        color: glowColor,
-        weight: 2,
-        fillColor: glowColor,
-        fillOpacity: 0.15,
-        opacity: 0.5,
-        renderer,
-      }).addTo(group);
-
-      // Inner solid dot
-      const dot = L.circleMarker([info.lat, info.lng], {
-        radius: 6,
-        color: "#ffffff",
-        weight: 2,
-        fillColor,
-        fillOpacity: 1,
-        opacity: 1,
-        renderer,
-      }).addTo(group);
-
-      // Agent label — permanent tooltip anchored below the dot
-      const labelClass = isDark
-        ? "bg-slate-950/90 text-slate-200 border-white/10"
-        : "bg-white/95 text-slate-800 border-slate-200";
-
-      dot.bindTooltip(
-        `<div class="agent-map-label ${labelClass}">${info.agentLabel}</div>`,
-        { permanent: true, direction: "bottom", offset: [0, 8], className: "agent-label-tooltip" }
-      ).openTooltip();
-
-      // Detail popup on click
-      const popupHtml = getAgentTooltipContent(
-        uuid,
-        info.agentLabel,
-        info.status,
-        isOnline,
-        info.label,
-        info.lat,
-        info.lng
-      );
-
-      dot.bindPopup(popupHtml, {
-        closeButton: false,
-        className: "leaflet-custom-popup",
-        offset: [0, -8],
-      });
-
-      dot.on("popupopen", () => {
-        const btn = document.getElementById(`btn-edit-${uuid}`);
-        if (btn) {
-          btn.addEventListener("click", () => onEditLocation(uuid, info.agentLabel));
+      // Build agent map
+      const agentMap: Record<string, { lat: number; lng: number; label: string; agentLabel: string; status: string }> = {};
+      agents.forEach((agent) => {
+        const uuid = agent.uuid || agent.serial || "";
+        const loc = locations.find((l) => l.agent_uuid === uuid);
+        if (loc) {
+          agentMap[uuid] = {
+            lat: loc.latitude,
+            lng: loc.longitude,
+            label: loc.label || "",
+            agentLabel: agent.label || "",
+            status: agent.activated ? "Online" : "Offline",
+          };
         }
       });
-    });
+
+      const activeCoords = Object.values(agentMap);
+      const centerLat = activeCoords.length > 0 ? activeCoords.reduce((s, v) => s + v.lat, 0) / activeCoords.length : -6.2088;
+      const centerLng = activeCoords.length > 0 ? activeCoords.reduce((s, v) => s + v.lng, 0) / activeCoords.length : 106.8456;
+
+      const tileUrl = isDark
+        ? "https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png"
+        : "https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png";
+
+      if (!mapInstanceRef.current) {
+        const map = L.map(mapContainerRef.current, {
+          zoomControl: false,
+          attributionControl: false,
+          zoomAnimation: false,    // prevents _leaflet_pos crash on React StrictMode remount
+          fadeAnimation: false,
+          markerZoomAnimation: false,
+        }).setView([centerLat, centerLng], 10, { animate: false });
+
+        const tiles = L.tileLayer(tileUrl, { maxZoom: 19 }).addTo(map);
+        tileLayerRef.current = tiles;
+        L.control.zoom({ position: "bottomright" }).addTo(map);
+        mapInstanceRef.current = map;
+        layerGroupRef.current = L.layerGroup().addTo(map);
+      } else {
+        const map = mapInstanceRef.current;
+        if (tileLayerRef.current) tileLayerRef.current.setUrl(tileUrl);
+        if (activeCoords.length > 0) map.panTo([centerLat, centerLng]);
+      }
+
+      if (!mounted) return;
+      const group = layerGroupRef.current;
+      group.clearLayers();
+      const registeredUuids = new Set(locations.map(l => l.agent_uuid));
+
+      // ── A. FLOW LINES ────────────────────────────────────────────────────────
+      flows.forEach((flow) => {
+        const src = agentMap[flow.source];
+        const dst = agentMap[flow.target];
+        if (!src || !dst || !registeredUuids.has(flow.source) || !registeredUuids.has(flow.target)) return;
+        const weight = Math.min(Math.max(flow.bytes / 1024 / 1024 / 80, 2.5), 8);
+        const color  = isDark ? "#38bdf8" : "#1d4ed8";
+
+        L.polyline([[src.lat, src.lng], [dst.lat, dst.lng]], {
+          color: isDark ? "#0ea5e9" : "#3b82f6", weight: weight + 4, opacity: 0.12,
+        }).addTo(group);
+
+        const baseLine = L.polyline([[src.lat, src.lng], [dst.lat, dst.lng]], {
+          color, weight, opacity: 0.5,
+        }).addTo(group);
+
+        const animLine = L.polyline([[src.lat, src.lng], [dst.lat, dst.lng]], {
+          color, weight: weight * 0.55, opacity: 0.95, dashArray: "10 15",
+          className: "animated-flow-line",
+        }).addTo(group);
+
+        const tooltipHtml = getFlowTooltipContent(
+          src.agentLabel, dst.agentLabel, flow.bytes, flow.flowsCount, flow.details || []
+        );
+        [baseLine, animLine].forEach(line => {
+          line.bindTooltip(tooltipHtml, { sticky: true, className: "leaflet-custom-popup shadow-2xl" });
+        });
+      });
+
+      // ── B. PREMIUM SVG MARKERS ───────────────────────────────────────────────
+      Object.entries(agentMap).forEach(([uuid, info]) => {
+        if (!mounted) return;
+        const isOnline   = info.status === "Online";
+        const labelColor = isOnline ? "#34d399" : "#f87171";
+        const borderCol  = isOnline ? "#10b981" : "#ef4444";
+
+        const icon = L.divIcon({
+          html: buildMarkerHtml(isOnline),
+          className: "",
+          iconSize:      [32, 32],
+          iconAnchor:    [16, 16],
+          tooltipAnchor: [0, -18],
+          popupAnchor:   [0, -18],
+        });
+
+        const marker = L.marker([info.lat, info.lng], { icon });
+
+        const shortLabel = info.agentLabel.length > 24 ? info.agentLabel.slice(0, 22) + "…" : info.agentLabel;
+        marker.bindTooltip(
+          `<div class="dpi-agent-label" style="background:rgba(10,18,36,0.92);color:${labelColor};border-color:${borderCol};box-shadow:0 0 10px ${borderCol}44,0 2px 8px rgba(0,0,0,0.7);">` +
+          `<span style="display:inline-block;width:7px;height:7px;border-radius:50%;background:${borderCol};margin-right:5px;${isOnline?`box-shadow:0 0 6px ${borderCol}`:""}"></span>` +
+          `${shortLabel}</div>`,
+          { permanent: true, direction: "top", offset: [0, -10], className: "agent-label-tooltip", interactive: false }
+        );
+
+        const popupHtml = getAgentTooltipContent(
+          uuid, info.agentLabel, info.status, isOnline, info.label, info.lat, info.lng
+        );
+        marker.bindPopup(popupHtml, { closeButton: false, className: "leaflet-custom-popup", offset: [0, -8] });
+        marker.on("popupopen", () => {
+          const btn = document.getElementById(`btn-edit-${uuid}`);
+          if (btn) btn.addEventListener("click", () => onEditLocation(uuid, info.agentLabel));
+        });
+
+        marker.addTo(group);
+      });
+
+      // Fit bounds
+      if (activeCoords.length > 1 && mounted) {
+        const L2 = L as any;
+        const bounds = L2.latLngBounds(activeCoords.map((c: any) => [c.lat, c.lng]));
+        mapInstanceRef.current.fitBounds(bounds, { padding: [60, 60], maxZoom: 14, animate: false });
+      }
+    };
+
+    boot();
+    return () => {
+      mounted = false;
+      // Properly destroy the Leaflet instance so React StrictMode double-invoke
+      // and HMR remounts don't leave orphaned panes that trigger _leaflet_pos errors.
+      if (mapInstanceRef.current) {
+        try { mapInstanceRef.current.remove(); } catch (_) {}
+        mapInstanceRef.current = null;
+        layerGroupRef.current  = null;
+        tileLayerRef.current   = null;
+      }
+    };
   }, [agents, locations, flows, isDark]);
 
   if (mapError) {
diff --git a/src/components/dashboard/KPICards.tsx b/src/components/dashboard/KPICards.tsx
index 7efe02f..464a805 100644
--- a/src/components/dashboard/KPICards.tsx
+++ b/src/components/dashboard/KPICards.tsx
@@ -28,17 +28,17 @@ export function KPICards({ summary }: KPICardsProps) {
 
   return (
     <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6">
-      <Link href="/flows" className="block focus:outline-none focus:ring-2 focus:ring-primary/50 rounded-xl">
-        <Card className="group relative overflow-hidden bg-card/80 backdrop-blur-xl border-border/50 hover:bg-card/100 hover:border-blue-500/30 hover:scale-[1.02] active:scale-[0.98] transition-all duration-300 cursor-pointer animate-slide-up" style={{ animationDelay: '0ms' }}>
+      <Link href="/flows" className="block h-full focus:outline-none focus:ring-2 focus:ring-primary/50 rounded-xl">
+        <Card className="h-full flex flex-col justify-between group relative overflow-hidden bg-card/80 backdrop-blur-xl border-border/50 hover:bg-card/100 hover:border-blue-500/30 hover:scale-[1.02] active:scale-[0.98] transition-all duration-300 cursor-pointer animate-slide-up" style={{ animationDelay: '0ms' }}>
           <div className="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
             <Download className="h-16 w-16 text-blue-500" />
           </div>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2 relative z-10">
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 p-4 pb-2 relative z-10">
             <CardTitle className="text-sm font-medium text-muted-foreground group-hover:text-blue-400 transition-colors">Download</CardTitle>
             <Download className="h-4 w-4 text-blue-500" />
           </CardHeader>
-          <CardContent className="relative z-10">
-            <div className="text-3xl font-bold text-white tracking-tight">
+          <CardContent className="p-4 pt-0 relative z-10">
+            <div className="text-[25px] font-bold text-white tracking-tight whitespace-nowrap">
               {summary ? fmtBytes(summary.bandwidth_down) : "0 B"}
             </div>
             {summary && (
@@ -55,17 +55,17 @@ export function KPICards({ summary }: KPICardsProps) {
         </Card>
       </Link>
 
-      <Link href="/flows" className="block focus:outline-none focus:ring-2 focus:ring-emerald-500/50 rounded-xl">
-        <Card className="group relative overflow-hidden bg-card/80 backdrop-blur-xl border-border/50 hover:bg-card/100 hover:border-emerald-500/30 hover:scale-[1.02] active:scale-[0.98] transition-all duration-300 cursor-pointer animate-slide-up" style={{ animationDelay: '50ms' }}>
+      <Link href="/flows" className="block h-full focus:outline-none focus:ring-2 focus:ring-emerald-500/50 rounded-xl">
+        <Card className="h-full flex flex-col justify-between group relative overflow-hidden bg-card/80 backdrop-blur-xl border-border/50 hover:bg-card/100 hover:border-emerald-500/30 hover:scale-[1.02] active:scale-[0.98] transition-all duration-300 cursor-pointer animate-slide-up" style={{ animationDelay: '50ms' }}>
           <div className="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
             <Upload className="h-16 w-16 text-emerald-500" />
           </div>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2 relative z-10">
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 p-4 pb-2 relative z-10">
             <CardTitle className="text-sm font-medium text-muted-foreground group-hover:text-emerald-400 transition-colors">Upload</CardTitle>
             <Upload className="h-4 w-4 text-emerald-500" />
           </CardHeader>
-          <CardContent className="relative z-10">
-            <div className="text-3xl font-bold text-white tracking-tight">
+          <CardContent className="p-4 pt-0 relative z-10">
+            <div className="text-[25px] font-bold text-white tracking-tight whitespace-nowrap">
               {summary ? fmtBytes(summary.bandwidth_up) : "0 B"}
             </div>
             {summary && (
@@ -82,77 +82,82 @@ export function KPICards({ summary }: KPICardsProps) {
         </Card>
       </Link>
 
-      <Link href="/devices" className="block focus:outline-none focus:ring-2 focus:ring-orange-500/50 rounded-xl">
-        <Card className="group relative overflow-hidden bg-card/80 backdrop-blur-xl border-border/50 hover:bg-card/100 hover:border-orange-500/30 hover:scale-[1.02] active:scale-[0.98] transition-all duration-300 cursor-pointer animate-slide-up" style={{ animationDelay: '100ms' }}>
+      <Link href="/devices" className="block h-full focus:outline-none focus:ring-2 focus:ring-orange-500/50 rounded-xl">
+        <Card className="h-full flex flex-col justify-between group relative overflow-hidden bg-card/80 backdrop-blur-xl border-border/50 hover:bg-card/100 hover:border-orange-500/30 hover:scale-[1.02] active:scale-[0.98] transition-all duration-300 cursor-pointer animate-slide-up" style={{ animationDelay: '100ms' }}>
           <div className="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
             <Server className="h-16 w-16 text-orange-500" />
           </div>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2 relative z-10">
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 p-4 pb-2 relative z-10">
             <CardTitle className="text-sm font-medium text-muted-foreground group-hover:text-orange-400 transition-colors">Devices</CardTitle>
             <Server className="h-4 w-4 text-orange-500" />
           </CardHeader>
-          <CardContent className="relative z-10">
-            <div className="text-3xl font-bold text-white tracking-tight">
+          <CardContent className="p-4 pt-0 relative z-10">
+            <div className="text-[25px] font-bold text-white tracking-tight whitespace-nowrap">
               {summary?.total_devices?.toLocaleString() || "0"}
             </div>
+            <div className="text-xs text-transparent select-none mt-1.5 pointer-events-none">&nbsp;</div>
           </CardContent>
         </Card>
       </Link>
 
-      <Link href="/flows" className="block focus:outline-none focus:ring-2 focus:ring-purple-500/50 rounded-xl">
-        <Card className="group relative overflow-hidden bg-card/80 backdrop-blur-xl border-border/50 hover:bg-card/100 hover:border-purple-500/30 hover:scale-[1.02] active:scale-[0.98] transition-all duration-300 cursor-pointer animate-slide-up" style={{ animationDelay: '150ms' }}>
+      <Link href="/flows" className="block h-full focus:outline-none focus:ring-2 focus:ring-purple-500/50 rounded-xl">
+        <Card className="h-full flex flex-col justify-between group relative overflow-hidden bg-card/80 backdrop-blur-xl border-border/50 hover:bg-card/100 hover:border-purple-500/30 hover:scale-[1.02] active:scale-[0.98] transition-all duration-300 cursor-pointer animate-slide-up" style={{ animationDelay: '150ms' }}>
           <div className="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
             <Activity className="h-16 w-16 text-purple-500" />
           </div>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2 relative z-10">
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 p-4 pb-2 relative z-10">
             <CardTitle className="text-sm font-medium text-muted-foreground group-hover:text-purple-400 transition-colors">Flows</CardTitle>
             <Activity className="h-4 w-4 text-purple-500" />
           </CardHeader>
-          <CardContent className="relative z-10">
-            <div className="text-3xl font-bold text-white tracking-tight">
+          <CardContent className="p-4 pt-0 relative z-10">
+            <div className="text-[25px] font-bold text-white tracking-tight whitespace-nowrap">
               {summary?.active_flows?.toLocaleString() || "0"}
             </div>
-            {summary && flowsPerHour > 0 && (
+            {summary && flowsPerHour > 0 ? (
               <div className="text-xs text-muted-foreground mt-1.5 flex items-center gap-1 group-hover:text-purple-400/80 transition-colors">
                 <span className="w-1.5 h-1.5 rounded-full bg-purple-500 animate-pulse" />
                 Speed: {flowsPerHour.toLocaleString()} /hr
               </div>
+            ) : (
+              <div className="text-xs text-transparent select-none mt-1.5 pointer-events-none">&nbsp;</div>
             )}
           </CardContent>
         </Card>
       </Link>
 
-      <Link href="/threats" className="block focus:outline-none focus:ring-2 focus:ring-red-500/50 rounded-xl">
-        <Card className="group relative overflow-hidden bg-red-50/90 dark:bg-card/80 backdrop-blur-xl border-red-200 dark:border-red-500/20 hover:bg-red-100 hover:dark:bg-card/100 hover:border-red-300 hover:dark:border-red-500/50 hover:scale-[1.02] active:scale-[0.98] transition-all duration-300 cursor-pointer animate-slide-up" style={{ animationDelay: '200ms' }}>
+      <Link href="/threats" className="block h-full focus:outline-none focus:ring-2 focus:ring-red-500/50 rounded-xl">
+        <Card className="h-full flex flex-col justify-between group relative overflow-hidden bg-red-50/90 dark:bg-card/80 backdrop-blur-xl border-red-200 dark:border-red-500/20 hover:bg-red-100 hover:dark:bg-card/100 hover:border-red-300 hover:dark:border-red-500/50 hover:scale-[1.02] active:scale-[0.98] transition-all duration-300 cursor-pointer animate-slide-up" style={{ animationDelay: '200ms' }}>
           <div className="absolute inset-0 bg-red-500/10 dark:bg-red-500/5 pointer-events-none" />
           <div className="absolute top-0 right-0 p-4 opacity-20 dark:opacity-10 group-hover:opacity-30 dark:group-hover:opacity-20 transition-opacity text-red-600 dark:text-red-500">
             <ShieldAlert className="h-16 w-16" />
           </div>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2 relative z-10">
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 p-4 pb-2 relative z-10">
             <CardTitle className="text-sm font-semibold text-red-700 dark:text-red-400 group-hover:text-red-800 dark:group-hover:text-red-300 transition-colors">Threats</CardTitle>
             <ShieldAlert className="h-4 w-4 text-red-600 dark:text-red-500 animate-pulse" />
           </CardHeader>
-          <CardContent className="relative z-10">
-            <div className="text-3xl font-bold text-red-600 dark:text-red-500 tracking-tight">
+          <CardContent className="p-4 pt-0 relative z-10">
+            <div className="text-[25px] font-bold text-red-600 dark:text-red-500 tracking-tight whitespace-nowrap">
               {summary?.total_threats?.toLocaleString() || "0"}
             </div>
+            <div className="text-xs text-transparent select-none mt-1.5 pointer-events-none">&nbsp;</div>
           </CardContent>
         </Card>
       </Link>
 
-      <Link href="/events" className="block focus:outline-none focus:ring-2 focus:ring-yellow-500/50 rounded-xl">
-        <Card className="group relative overflow-hidden bg-card/80 backdrop-blur-xl border-border/50 hover:bg-card/100 hover:border-yellow-500/30 hover:scale-[1.02] active:scale-[0.98] transition-all duration-300 cursor-pointer animate-slide-up" style={{ animationDelay: '250ms' }}>
+      <Link href="/events" className="block h-full focus:outline-none focus:ring-2 focus:ring-yellow-500/50 rounded-xl">
+        <Card className="h-full flex flex-col justify-between group relative overflow-hidden bg-card/80 backdrop-blur-xl border-border/50 hover:bg-card/100 hover:border-yellow-500/30 hover:scale-[1.02] active:scale-[0.98] transition-all duration-300 cursor-pointer animate-slide-up" style={{ animationDelay: '250ms' }}>
           <div className="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity text-yellow-500">
             <Zap className="h-16 w-16" />
           </div>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2 relative z-10">
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 p-4 pb-2 relative z-10">
             <CardTitle className="text-sm font-medium text-muted-foreground group-hover:text-yellow-400 transition-colors">Events</CardTitle>
             <Zap className="h-4 w-4 text-yellow-500" />
           </CardHeader>
-          <CardContent className="relative z-10">
-            <div className="text-3xl font-bold text-white tracking-tight">
+          <CardContent className="p-4 pt-0 relative z-10">
+            <div className="text-[25px] font-bold text-white tracking-tight whitespace-nowrap">
               {summary?.total_events?.toLocaleString() || "0"}
             </div>
+            <div className="text-xs text-transparent select-none mt-1.5 pointer-events-none">&nbsp;</div>
           </CardContent>
         </Card>
       </Link>
diff --git a/src/components/help/ContextualHelpModal.tsx b/src/components/help/ContextualHelpModal.tsx
index 0078191..b416944 100644
--- a/src/components/help/ContextualHelpModal.tsx
+++ b/src/components/help/ContextualHelpModal.tsx
@@ -12,7 +12,7 @@ interface ContextualHelpModalProps {
   onClose: () => void;
 }
 
-function SectionBlock({ heading, content, columns, items }: PageGuide["sections"][0]) {
+function SectionBlock({ heading, content, steps, columns, items }: PageGuide["sections"][0]) {
   const [open, setOpen] = useState(true);
 
   return (
@@ -37,6 +37,19 @@ function SectionBlock({ heading, content, columns, items }: PageGuide["sections"
             <p className="text-xs text-slate-400 leading-relaxed">{content}</p>
           )}
 
+          {steps && steps.length > 0 && (
+            <ol className="space-y-2">
+              {steps.map((step, i) => (
+                <li key={i} className="flex gap-2.5 items-start">
+                  <span className="shrink-0 flex h-4.5 w-4.5 min-w-[18px] items-center justify-center rounded-full bg-blue-600/30 border border-blue-500/40 text-[9px] font-bold text-blue-300 mt-0.5">
+                    {i + 1}
+                  </span>
+                  <span className="text-xs text-slate-300 leading-relaxed">{step}</span>
+                </li>
+              ))}
+            </ol>
+          )}
+
           {columns && columns.length > 0 && (
             <div className="rounded-lg overflow-hidden border border-white/5">
               <div className="grid grid-cols-[140px_1fr] bg-white/[0.04] px-3 py-2 border-b border-white/5">
diff --git a/src/components/help/HelpPageContent.tsx b/src/components/help/HelpPageContent.tsx
index 547a571..be347b3 100644
--- a/src/components/help/HelpPageContent.tsx
+++ b/src/components/help/HelpPageContent.tsx
@@ -28,7 +28,7 @@ const ICON_MAP: Record<string, React.ReactNode> = {
   lookup:               <Search className="h-4 w-4" />,
 };
 
-function SectionBlock({ heading, content, columns, items }: PageGuide["sections"][0]) {
+function SectionBlock({ heading, content, steps, columns, items }: PageGuide["sections"][0]) {
   const [open, setOpen] = useState(true);
   return (
     <div className="rounded-2xl border border-white/8 bg-gradient-to-b from-slate-900/80 to-slate-900/40 overflow-hidden shadow-lg">
@@ -46,6 +46,18 @@ function SectionBlock({ heading, content, columns, items }: PageGuide["sections"
           {content && (
             <p className="text-sm text-slate-400 leading-relaxed">{content}</p>
           )}
+          {steps && (
+            <ol className="space-y-2">
+              {steps.map((step, i) => (
+                <li key={i} className="flex gap-3 items-start">
+                  <span className="shrink-0 flex h-5 w-5 items-center justify-center rounded-full bg-blue-600/30 border border-blue-500/40 text-[10px] font-bold text-blue-300 mt-0.5">
+                    {i + 1}
+                  </span>
+                  <span className="text-sm text-slate-300 leading-relaxed">{step}</span>
+                </li>
+              ))}
+            </ol>
+          )}
           {columns && (
             <div className="rounded-xl overflow-hidden border border-white/8">
               <div className="grid grid-cols-[180px_1fr] bg-gradient-to-r from-blue-600/20 to-indigo-600/10 px-4 py-2.5 border-b border-white/8">
diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx
index 5cdd7b1..3d97372 100644
--- a/src/components/layout/Sidebar.tsx
+++ b/src/components/layout/Sidebar.tsx
@@ -1,34 +1,24 @@
 // src/components/layout/Sidebar.tsx
 "use client";
 
-import { useState, useEffect, useRef } from "react";
+import { useState, useEffect } from "react";
 import { cn } from "@/lib/utils";
-import { ChevronDown, Calendar, Activity } from "lucide-react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { AccountSettingsModal } from "./AccountSettingsModal";
-import { useTimeFilter } from "@/contexts/TimeFilterContext";
 import { getViewAsHeaders } from "@/lib/admin-api";
-import { NAVIGATION_GROUPS, TIME_OPTIONS } from "./SidebarData";
+import { NAVIGATION_GROUPS } from "./SidebarData";
 import SidebarProfile from "./SidebarProfile";
 import SidebarNotifications from "./SidebarNotifications";
-
+import SidebarSiteSelector from "./SidebarSiteSelector";
+import SidebarTimeSelector from "./SidebarTimeSelector";
 
 export function Sidebar() {
   const pathname = usePathname();
-  const { timeRange, setTimeRange } = useTimeFilter();
-
   const [user, setUser] = useState<{ username?: string; account_name?: string; profile_picture?: string; role?: string; agent_uuid?: string } | null>(null);
   const [isAccountOpen, setIsAccountOpen] = useState(false);
-  const [isTimeDropdownOpen, setIsTimeDropdownOpen] = useState(false); // Time Filter dropdown
   const [intervalText, setIntervalText] = useState<string>("");
-
-  const timeDropdownRef = useRef<HTMLDivElement>(null);
-  const selectedTimeOption = TIME_OPTIONS.find(opt => opt.value === timeRange) || TIME_OPTIONS[3];
-
   const [selectedSite, setSelectedSite] = useState<string>("6681452d_9cae_4ff4_8ae8_0d504774265e");
-  const [isSiteDropdownOpen, setIsSiteDropdownOpen] = useState(false);
-  const siteDropdownRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     fetch('/api/auth/me', { headers: getViewAsHeaders() })
@@ -58,150 +48,62 @@ export function Sidebar() {
 
     if (typeof window !== 'undefined') {
       const stored = localStorage.getItem('backone_site_uuid');
-      if (stored) setSelectedSite(stored);
+      if (stored) {
+        setSelectedSite(stored);
+        const isNx = stored === 'd7902405_0dc2_458b_8584_ed4d24b64f24';
+        const logoUrl = isNx ? '/nexus-logo.png' : '/backone-logo.png';
+        const links = document.querySelectorAll("link[rel*='icon']");
+        links.forEach(l => (l as HTMLLinkElement).href = logoUrl);
+        if (links.length === 0) {
+          const l = document.createElement('link');
+          l.type = 'image/x-icon'; l.rel = 'shortcut icon'; l.href = logoUrl;
+          document.getElementsByTagName('head')[0].appendChild(l);
+        }
+      }
     }
   }, []);
 
-  useEffect(() => {
-    function handleClickOutside(event: MouseEvent) {
-      if (timeDropdownRef.current && !timeDropdownRef.current.contains(event.target as Node)) setIsTimeDropdownOpen(false);
-      if (siteDropdownRef.current && !siteDropdownRef.current.contains(event.target as Node)) setIsSiteDropdownOpen(false);
-    }
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, []);
-
   const handleSiteSelect = (val: string) => {
     setSelectedSite(val);
     localStorage.setItem('backone_site_uuid', val);
-    setIsSiteDropdownOpen(false);
     window.location.reload();
   };
 
-  const getSiteLabel = (uuid: string) => {
-    if (uuid === 'd7902405_0dc2_458b_8584_ed4d24b64f24') return 'Nexus';
-    return 'SIAB';
-  };
+  const isNexus = selectedSite === 'd7902405_0dc2_458b_8584_ed4d24b64f24';
 
   return (
-    <div className="flex h-full max-h-screen flex-col border-r border-white/5 bg-black/20 backdrop-blur-3xl transition-all w-64 shrink-0 relative z-40 shadow-[4px_0_24px_-12px_rgba(0,0,0,0.5)]">
+    <div 
+      className="flex h-full max-h-screen flex-col border-r border-white/5 bg-black/20 backdrop-blur-3xl transition-all w-64 shrink-0 relative z-40 shadow-[4px_0_24px_-12px_rgba(0,0,0,0.5)]"
+    >
       {/* Brand & Site Info */}
       <div className="flex flex-col p-2 shrink-0 gap-4 border-b border-white/5">
-        <div className="flex items-center justify-center gap-3 w-full pt-4 pb-2 px-1">
-          <img src="/backone-logo.png" alt="BackOne Logo" className="w-9 h-9 rounded-full drop-shadow-[0_0_12px_rgba(255,0,0,0.35)] shrink-0" />
-          <div className="flex flex-col min-w-0 justify-center text-left">
-            <span className="text-xl font-bold font-backone text-foreground tracking-tight leading-none">
-              BackOne
-            </span>
-            <span className="text-[9px] uppercase tracking-wider text-muted-foreground font-semibold mt-1">
-              Deep Package Inspection
-            </span>
-            <div className="flex items-center gap-1.5 mt-2 bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 text-[8px] font-bold px-2 py-0.5 rounded-full w-fit">
-              <span className="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse" />
-              DPI ENGINE: ACTIVE
-            </div>
-          </div>
-        </div>
-
-        {/* Global Site Switcher Widget (Visible to SUPER_ADMIN, SOC_ANALYST, ENGINEER) */}
-        {user && ['SUPER_ADMIN', 'SOC_ANALYST', 'ENGINEER'].includes(user.role || '') && (
-          <div className="relative w-full px-2" ref={siteDropdownRef}>
-            <button
-              onClick={() => setIsSiteDropdownOpen(!isSiteDropdownOpen)}
-              className="flex w-full items-center justify-between gap-2 rounded-xl border border-white/5 bg-white/[0.02] hover:bg-white/[0.05] p-2.5 text-xs text-slate-300 transition-colors"
-            >
-              <div className="flex items-center gap-2 truncate">
-                <Activity className="h-3.5 w-3.5 text-primary shrink-0" />
-                <div className="flex flex-col items-start truncate leading-normal">
-                  <span className="font-semibold text-[10px] text-primary uppercase tracking-wider">Active Site</span>
-                  <span className="truncate max-w-[130px]">{getSiteLabel(selectedSite)}</span>
-                </div>
-              </div>
-              <ChevronDown className={cn("h-3.5 w-3.5 text-muted-foreground transition-transform duration-300", isSiteDropdownOpen && "rotate-180")} />
-            </button>
-
-            <div
-              className={cn(
-                "absolute top-full left-2 right-2 mt-1 rounded-xl border border-white/10 bg-slate-950 p-1.5 shadow-2xl z-50 origin-top transition-all duration-300 ease-out",
-                isSiteDropdownOpen
-                  ? "opacity-100 scale-100 pointer-events-auto translate-y-0"
-                  : "opacity-0 scale-95 pointer-events-none -translate-y-2"
-              )}
-            >
-              <div className="flex flex-col gap-0.5">
-                <button
-                  onClick={() => handleSiteSelect('6681452d_9cae_4ff4_8ae8_0d504774265e')}
-                  className={cn(
-                    "w-full rounded-lg px-2.5 py-1.5 text-left text-xs transition-colors",
-                    selectedSite === '6681452d_9cae_4ff4_8ae8_0d504774265e'
-                      ? "bg-primary/20 text-white font-medium"
-                      : "text-slate-400 hover:bg-white/5 hover:text-white"
-                  )}
-                >
-                  SIAB
-                </button>
-                <button
-                  onClick={() => handleSiteSelect('d7902405_0dc2_458b_8584_ed4d24b64f24')}
-                  className={cn(
-                    "w-full rounded-lg px-2.5 py-1.5 text-left text-xs transition-colors",
-                    selectedSite === 'd7902405_0dc2_458b_8584_ed4d24b64f24'
-                      ? "bg-primary/20 text-white font-medium"
-                      : "text-slate-400 hover:bg-white/5 hover:text-white"
-                  )}
-                >
-                  Nexus
-                </button>
-              </div>
-            </div>
-          </div>
-        )}
-
-        {/* Global Time Filter Widget */}
-        <div className="relative w-full px-2 pb-2" ref={timeDropdownRef}>
-          <button
-            onClick={() => setIsTimeDropdownOpen(!isTimeDropdownOpen)}
-            className="flex w-full items-center justify-between gap-2 rounded-xl border border-white/5 bg-white/[0.02] hover:bg-white/[0.05] p-2.5 text-xs text-slate-300 transition-colors"
-          >
-            <div className="flex items-center gap-2 truncate">
-              <Calendar className="h-3.5 w-3.5 text-primary shrink-0" />
-              <div className="flex flex-col items-start truncate leading-normal">
-                <span className="font-semibold text-[10px] text-primary uppercase tracking-wider">Time Filter</span>
-                <span className="truncate max-w-[130px]">{selectedTimeOption.label}</span>
-              </div>
-            </div>
-            <ChevronDown className={cn("h-3.5 w-3.5 text-muted-foreground transition-transform duration-300", isTimeDropdownOpen && "rotate-180")} />
-          </button>
-
-          <div
+        <div className="flex flex-col items-center justify-center w-full pt-6 pb-3 px-3 text-center mx-auto">
+          <img 
+            src={isNexus ? "/nexus-logo.png" : "/backone-logo.png"} 
+            alt="Logo" 
             className={cn(
-              "absolute top-full left-2 right-2 mt-1 rounded-xl border border-white/10 bg-slate-950 p-1.5 shadow-2xl z-50 origin-top transition-all duration-300 ease-out",
-              isTimeDropdownOpen
-                ? "opacity-100 scale-100 pointer-events-auto translate-y-0"
-                : "opacity-0 scale-95 pointer-events-none -translate-y-2"
-            )}
-          >
-            <div className="flex flex-col gap-0.5 max-h-60 overflow-y-auto custom-scrollbar">
-              {TIME_OPTIONS.map((opt) => (
-                <button
-                  key={opt.value}
-                  onClick={() => {
-                    setTimeRange(opt.value);
-                    setIsTimeDropdownOpen(false);
-                  }}
-                  className={cn(
-                    "w-full rounded-lg px-2.5 py-1.5 text-left text-xs transition-colors",
-                    timeRange === opt.value
-                      ? "bg-primary/20 text-white font-medium"
-                      : "text-slate-400 hover:bg-white/5 hover:text-white"
-                  )}
-                >
-                  {opt.label}
-                </button>
-              ))}
-            </div>
+              "w-12 h-12 object-contain shrink-0 mb-3",
+              isNexus 
+                ? "drop-shadow-[0_0_12px_rgba(6,182,212,0.45)]" 
+                : "drop-shadow-[0_0_12px_rgba(168,85,247,0.45)]"
+            )} 
+          />
+          <span className="text-[9.5px] uppercase tracking-[0.18em] text-slate-300 font-mono font-bold block">
+            Deep Package Inspection
+          </span>
+          <div className="flex items-center gap-1.5 mt-2.5 bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 text-[10px] font-bold px-3 py-1 rounded-full w-fit">
+            <span className="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse" />
+            DPI ENGINE: ACTIVE
           </div>
         </div>
 
+        <SidebarSiteSelector
+          user={user}
+          selectedSite={selectedSite}
+          handleSiteSelect={handleSiteSelect}
+        />
+
+        <SidebarTimeSelector />
       </div>
 
       {/* Navigation (Flexible Scrollable Container for Rule 9) */}
@@ -215,7 +117,6 @@ export function Sidebar() {
 
         <nav className="flex flex-col gap-5">
           {NAVIGATION_GROUPS.map((group) => {
-            // Role-based navigation item filtering
             const allowedItems = group.items.filter((item) => {
               if (item.href === "/agents") {
                 return user?.role === "SUPER_ADMIN";
@@ -238,9 +139,9 @@ export function Sidebar() {
                       key={item.href}
                       href={item.href}
                       className={cn(
-                        "group flex items-center gap-3 rounded-xl px-3 py-2 text-xs font-semibold tracking-wide transition-all duration-300",
+                        "group flex items-center gap-3 rounded-xl px-3 py-2 text-xs font-medium tracking-wide transition-all duration-300",
                         isActive
-                          ? "bg-primary/20 text-white font-bold border border-primary/30 shadow-lg shadow-primary/10"
+                          ? "bg-primary/10 text-primary border-l-2 border-primary font-bold shadow-md shadow-primary/5"
                           : "text-slate-400 hover:bg-white/[0.02] hover:text-slate-200"
                       )}
                     >
diff --git a/src/components/layout/SidebarData.ts b/src/components/layout/SidebarData.ts
index 40546a9..45f0022 100644
--- a/src/components/layout/SidebarData.ts
+++ b/src/components/layout/SidebarData.ts
@@ -1,6 +1,7 @@
 import {
-  LayoutDashboard, Server, Activity, Globe, Radio, Zap,
-  ShieldAlert, Shield, Lock, AppWindow, Search, Router
+  LayoutDashboard, Server, Activity, Globe, Radio,
+  ShieldAlert, Shield, AppWindow, Search, Router,
+  PieChart, Database, Network, Zap
 } from "lucide-react";
 
 export const NAVIGATION_GROUPS = [
@@ -13,7 +14,7 @@ export const NAVIGATION_GROUPS = [
   {
     title: "INFRASTRUCTURE",
     items: [
-      { name: "Network Topology", href: "/network-infrastructure", icon: Globe },
+      { name: "Network Topology", href: "/network-infrastructure", icon: Network },
       { name: "Agents", href: "/agents", icon: Server },
       { name: "Devices", href: "/devices", icon: Router },
     ]
@@ -23,10 +24,10 @@ export const NAVIGATION_GROUPS = [
     items: [
       { name: "Flows", href: "/flows", icon: Activity },
       { name: "Apps", href: "/apps", icon: AppWindow },
-      { name: "Traffic Categories", href: "/network-intelligence", icon: Activity },
+      { name: "Traffic Categories", href: "/network-intelligence", icon: PieChart },
       { name: "DNS", href: "/dns", icon: Radio },
       { name: "Geo Traffic", href: "/geography", icon: Globe },
-      { name: "DPI MetaData", href: "/dpi-analytics", icon: Activity },
+      { name: "DPI MetaData", href: "/dpi-analytics", icon: Database },
       { name: "App Lookup", href: "/lookup", icon: Search },
     ]
   },
@@ -35,6 +36,7 @@ export const NAVIGATION_GROUPS = [
     items: [
       { name: "Threat Intelligence", href: "/intelligence", icon: Shield },
       { name: "Detected Threats", href: "/threats", icon: ShieldAlert },
+      { name: "Network Events", href: "/events", icon: Zap },
     ]
   }
 ];
@@ -45,4 +47,5 @@ export const TIME_OPTIONS = [
   { value: "1h", label: "Last 1 Hour" },
   { value: "1d", label: "Last 24 Hours" },
   { value: "7d", label: "Last 7 Days" },
+  { value: "30d", label: "Last 30 Days" },
 ] as const;
diff --git a/src/components/layout/SidebarSiteSelector.tsx b/src/components/layout/SidebarSiteSelector.tsx
new file mode 100644
index 0000000..9800767
--- /dev/null
+++ b/src/components/layout/SidebarSiteSelector.tsx
@@ -0,0 +1,103 @@
+"use client";
+
+import { useState, useRef, useEffect } from "react";
+import { cn } from "@/lib/utils";
+import { ChevronDown, Activity } from "lucide-react";
+
+interface SidebarSiteSelectorProps {
+  user: { role?: string } | null;
+  selectedSite: string;
+  handleSiteSelect: (val: string) => void;
+}
+
+export default function SidebarSiteSelector({
+  user,
+  selectedSite,
+  handleSiteSelect,
+}: SidebarSiteSelectorProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (ref.current && !ref.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  if (!user || !['SUPER_ADMIN', 'SOC_ANALYST', 'ENGINEER'].includes(user.role || '')) {
+    return null;
+  }
+
+  const getSiteLabel = (uuid: string) => {
+    return uuid === 'd7902405_0dc2_458b_8584_ed4d24b64f24' ? 'Nexus' : 'SIAB';
+  };
+
+  return (
+    <div className="relative w-full px-2" ref={ref}>
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className={cn(
+          "flex w-full items-center justify-between gap-3 bg-white/[0.03] hover:bg-white/[0.08] border border-white/[0.08] hover:border-white/[0.15] px-3.5 py-2.5 rounded-xl transition-all duration-200 text-left cursor-pointer backdrop-blur-md",
+          isOpen && "border-blue-500/30 ring-1 ring-blue-500/20"
+        )}
+      >
+        <div className="flex items-center gap-3">
+          <Activity className="h-4 w-4 text-slate-400 shrink-0" />
+          <div className="flex flex-col">
+            <span className="text-[8px] font-semibold uppercase tracking-wider text-slate-500 leading-none mb-1">
+              ACTIVE SITE
+            </span>
+            <span className="text-xs font-medium text-slate-300 leading-none">
+              {getSiteLabel(selectedSite)}
+            </span>
+          </div>
+        </div>
+        <ChevronDown className={cn("h-4 w-4 text-slate-600 transition-transform duration-300", isOpen && "rotate-180")} />
+      </button>
+
+      <div
+        className={cn(
+          "absolute top-full left-2 right-2 mt-1.5 rounded-xl border border-white/10 bg-slate-950/85 backdrop-blur-xl p-1.5 shadow-2xl z-50 origin-top transition-all duration-300 ease-out",
+          isOpen
+            ? "opacity-100 scale-100 pointer-events-auto translate-y-0"
+            : "opacity-0 scale-95 pointer-events-none -translate-y-2"
+        )}
+      >
+        <div className="flex flex-col gap-0.5">
+          <button
+            onClick={() => {
+              handleSiteSelect('6681452d_9cae_4ff4_8ae8_0d504774265e');
+              setIsOpen(false);
+            }}
+            className={cn(
+              "w-full rounded-lg px-2.5 py-1.5 text-left text-xs transition-colors",
+              selectedSite === '6681452d_9cae_4ff4_8ae8_0d504774265e'
+                ? "bg-primary/20 text-white font-medium"
+                : "text-slate-400 hover:bg-white/5 hover:text-white"
+            )}
+          >
+            SIAB
+          </button>
+          <button
+            onClick={() => {
+              handleSiteSelect('d7902405_0dc2_458b_8584_ed4d24b64f24');
+              setIsOpen(false);
+            }}
+            className={cn(
+              "w-full rounded-lg px-2.5 py-1.5 text-left text-xs transition-colors",
+              selectedSite === 'd7902405_0dc2_458b_8584_ed4d24b64f24'
+                ? "bg-primary/20 text-white font-medium"
+                : "text-slate-400 hover:bg-white/5 hover:text-white"
+            )}
+          >
+            Nexus
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/layout/SidebarTimeSelector.tsx b/src/components/layout/SidebarTimeSelector.tsx
new file mode 100644
index 0000000..ea54f29
--- /dev/null
+++ b/src/components/layout/SidebarTimeSelector.tsx
@@ -0,0 +1,79 @@
+"use client";
+
+import { useState, useRef, useEffect } from "react";
+import { cn } from "@/lib/utils";
+import { ChevronDown, Calendar } from "lucide-react";
+import { useTimeFilter } from "@/contexts/TimeFilterContext";
+import { TIME_OPTIONS } from "./SidebarData";
+
+export default function SidebarTimeSelector() {
+  const { timeRange, setTimeRange } = useTimeFilter();
+  const [isOpen, setIsOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (ref.current && !ref.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  const selectedTimeOption = TIME_OPTIONS.find(opt => opt.value === timeRange) || TIME_OPTIONS[3];
+
+  return (
+    <div className="relative w-full px-2 pb-2" ref={ref}>
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className={cn(
+          "flex w-full items-center justify-between gap-3 bg-white/[0.03] hover:bg-white/[0.08] border border-white/[0.08] hover:border-white/[0.15] px-3.5 py-2.5 rounded-xl transition-all duration-200 text-left cursor-pointer backdrop-blur-md",
+          isOpen && "border-blue-500/30 ring-1 ring-blue-500/20"
+        )}
+      >
+        <div className="flex items-center gap-3">
+          <Calendar className="h-4 w-4 text-slate-400 shrink-0" />
+          <div className="flex flex-col">
+            <span className="text-[8px] font-semibold uppercase tracking-wider text-slate-500 leading-none mb-1">
+              TIME FILTER
+            </span>
+            <span className="text-xs font-medium text-slate-300 leading-none">
+              {selectedTimeOption.label}
+            </span>
+          </div>
+        </div>
+        <ChevronDown className={cn("h-4 w-4 text-slate-600 transition-transform duration-300", isOpen && "rotate-180")} />
+      </button>
+
+      <div
+        className={cn(
+          "absolute top-full left-2 right-2 mt-1.5 rounded-xl border border-white/10 bg-slate-950/85 backdrop-blur-xl p-1.5 shadow-2xl z-50 origin-top transition-all duration-300 ease-out",
+          isOpen
+            ? "opacity-100 scale-100 pointer-events-auto translate-y-0"
+            : "opacity-0 scale-95 pointer-events-none -translate-y-2"
+        )}
+      >
+        <div className="flex flex-col gap-0.5 max-h-60 overflow-y-auto custom-scrollbar">
+          {TIME_OPTIONS.map((opt) => (
+            <button
+              key={opt.value}
+              onClick={() => {
+                setTimeRange(opt.value);
+                setIsOpen(false);
+              }}
+              className={cn(
+                "w-full rounded-lg px-2.5 py-1.5 text-left text-xs transition-colors",
+                timeRange === opt.value
+                  ? "bg-primary/20 text-white font-medium"
+                  : "text-slate-400 hover:bg-white/5 hover:text-white"
+              )}
+            >
+              {opt.label}
+            </button>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/lookup/AppLookupDetailModal.tsx b/src/components/lookup/AppLookupDetailModal.tsx
new file mode 100644
index 0000000..b66956d
--- /dev/null
+++ b/src/components/lookup/AppLookupDetailModal.tsx
@@ -0,0 +1,134 @@
+"use client";
+
+import { X, Info, Box, Tag, Shield, Server, AppWindow } from "lucide-react";
+import { LookupApp } from "@/lib/api";
+
+interface AppLookupDetailModalProps {
+  selectedApp: LookupApp;
+  isClosingModal: boolean;
+  handleCloseModal: () => void;
+}
+
+export function AppLookupDetailModal({ selectedApp, isClosingModal, handleCloseModal }: AppLookupDetailModalProps) {
+  return (
+    <div className="fixed inset-0 z-[100] flex items-center justify-center p-4 sm:p-6" onClick={handleCloseModal}>
+      <div 
+        className={`absolute inset-0 bg-black/40 dark:bg-black/75 backdrop-blur-sm ${isClosingModal ? 'animate-overlay-out' : 'animate-overlay-in'}`} 
+      />
+      <div 
+        className={`relative w-full max-w-2xl bg-card border border-border rounded-2xl shadow-2xl shadow-black/60 overflow-hidden ${isClosingModal ? 'animate-modal-out' : 'animate-modal-in'}`}
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Header Background */}
+        <div className="h-32 bg-gradient-to-br from-primary/20 via-primary/5 to-transparent relative">
+          <button 
+            onClick={handleCloseModal}
+            className="absolute top-4 right-4 p-2 bg-black/20 hover:bg-black/40 rounded-full text-white/70 hover:text-white transition-colors"
+          >
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+
+        {/* Content */}
+        <div className="px-6 pb-6 sm:px-8 sm:pb-8 relative -mt-16">
+          {/* Icon/Logo */}
+          <div className="w-24 h-24 bg-card rounded-2xl border-4 border-card flex items-center justify-center overflow-hidden shadow-xl relative z-10 mb-4 bg-secondary">
+            {selectedApp.logo || selectedApp.favicon ? (
+              <img 
+                src={selectedApp.logo || selectedApp.favicon} 
+                alt={selectedApp.label} 
+                className="w-16 h-16 object-contain"
+                onError={(e) => {
+                  const img = e.target as HTMLElement;
+                  img.style.display = 'none';
+                  const sibling = img.nextSibling as HTMLElement;
+                  if (sibling) sibling.style.display = 'block';
+                }}
+              />
+            ) : null}
+            <AppWindow className="w-12 h-12 text-slate-400" style={{ display: (selectedApp.logo || selectedApp.favicon) ? 'none' : 'block' }} />
+          </div>
+
+          {/* Title & Category */}
+          <div className="space-y-2">
+            <div className="flex items-center gap-3 flex-wrap">
+              <h2 className="text-2xl sm:text-3xl font-bold text-white tracking-tight">{selectedApp.label}</h2>
+              {selectedApp.application_category?.label && (
+                <span className="px-3 py-1 bg-primary/10 border border-primary/20 text-primary text-xs font-bold uppercase tracking-widest rounded-full">
+                  {selectedApp.application_category.label}
+                </span>
+              )}
+            </div>
+            {selectedApp.full_name && selectedApp.full_name !== selectedApp.label && (
+              <p className="text-slate-400 font-medium">{selectedApp.full_name}</p>
+            )}
+          </div>
+
+          <div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-6">
+            {/* Description */}
+            <div className="space-y-4 md:col-span-2">
+              <div className="flex items-start gap-3 text-slate-300 bg-secondary/30 p-4 rounded-xl border border-border/30">
+                <Info className="w-5 h-5 text-primary shrink-0 mt-0.5" />
+                <p className="text-sm leading-relaxed">
+                  {selectedApp.description || "No detailed description provided for this application or service."}
+                </p>
+              </div>
+            </div>
+
+            {/* Metadata Info */}
+            <div className="space-y-3">
+              <h3 className="text-xs uppercase font-bold text-slate-500 tracking-wider">System Metadata</h3>
+              
+              <div className="flex items-center justify-between p-3 bg-secondary/20 rounded-lg border border-border/20">
+                <div className="flex items-center gap-2 text-slate-400">
+                  <Box className="w-4 h-4" />
+                  <span className="text-sm">App ID</span>
+                </div>
+                <span className="text-sm font-mono text-white bg-secondary/50 px-2 py-0.5 rounded">{selectedApp.id}</span>
+              </div>
+              
+              <div className="flex items-center justify-between p-3 bg-secondary/20 rounded-lg border border-border/20">
+                <div className="flex items-center gap-2 text-slate-400">
+                  <Tag className="w-4 h-4" />
+                  <span className="text-sm">System Name</span>
+                </div>
+                <span className="text-sm font-mono text-white bg-secondary/50 px-2 py-0.5 rounded">{selectedApp.name || 'N/A'}</span>
+              </div>
+              
+              <div className="flex items-center justify-between p-3 bg-secondary/20 rounded-lg border border-border/20">
+                <div className="flex items-center gap-2 text-slate-400">
+                  <Shield className="w-4 h-4" />
+                  <span className="text-sm">Tag / Alias</span>
+                </div>
+                <span className="text-sm font-mono text-white bg-secondary/50 px-2 py-0.5 rounded">{selectedApp.tag || 'N/A'}</span>
+              </div>
+            </div>
+
+            {/* Application Category Detail */}
+            {selectedApp.application_category && (
+              <div className="space-y-3">
+                <h3 className="text-xs uppercase font-bold text-slate-500 tracking-wider">Category Info</h3>
+                
+                <div className="flex items-center justify-between p-3 bg-secondary/20 rounded-lg border border-border/20">
+                  <div className="flex items-center gap-2 text-slate-400">
+                    <Server className="w-4 h-4" />
+                    <span className="text-sm">Category ID</span>
+                  </div>
+                  <span className="text-sm font-mono text-white bg-secondary/50 px-2 py-0.5 rounded">{selectedApp.application_category.id}</span>
+                </div>
+
+                <div className="flex items-center justify-between p-3 bg-secondary/20 rounded-lg border border-border/20">
+                  <div className="flex items-center gap-2 text-slate-400">
+                    <Info className="w-4 h-4" />
+                    <span className="text-sm">Category Tag</span>
+                  </div>
+                  <span className="text-sm font-mono text-white bg-secondary/50 px-2 py-0.5 rounded">{selectedApp.application_category.tag}</span>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/threats/ThreatsContent.tsx b/src/components/threats/ThreatsContent.tsx
index 2971f5d..c9e7df1 100644
--- a/src/components/threats/ThreatsContent.tsx
+++ b/src/components/threats/ThreatsContent.tsx
@@ -3,7 +3,7 @@
 import React, { useState, useEffect, useMemo } from "react";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/Card";
 import { DataTable } from "@/components/ui/DataTable";
-import { ShieldCheck, Loader2, ArrowDownToLine } from "lucide-react";
+import { ShieldCheck, Loader2 } from "lucide-react";
 import { ThreatStat } from "@/lib/api";
 import { useThreats } from "@/lib/api-with-context";
 import { DeviceDetailModal } from "@/components/ui/DeviceDetailModal";
@@ -38,6 +38,7 @@ export default function ThreatsContent() {
 
   useEffect(() => {
     setMounted(true);
+    document.title = "Detected Threats | BackOne - Deep Package Inspection";
   }, []);
 
   const all = threats.data || [];
@@ -100,12 +101,7 @@ export default function ThreatsContent() {
           second: "2-digit",
         }) + " WIB";
 
-      const doc = (
-        <ThreatsSummaryPdfDocument
-          threatsData={filtered}
-          reportDateStr={reportDateStr}
-        />
-      );
+      const doc = <ThreatsSummaryPdfDocument threatsData={filtered} reportDateStr={reportDateStr} />;
 
       const blob = await pdf(doc).toBlob();
       const url = URL.createObjectURL(blob);
@@ -122,24 +118,15 @@ export default function ThreatsContent() {
     }
   };
 
-  const columns = useMemo(() => {
-    return getThreatColumns(setSelectedIp, setSelectedMac, setSelectedThreat, highlightId);
-  }, [highlightId]);
+  const columns = useMemo(() => getThreatColumns(setSelectedIp, setSelectedMac, setSelectedThreat, highlightId), [highlightId]);
 
   const activeFilterCount =
     [fType, fSev, fSrcIp, fDstIp, fMac, fApp, fDomain].filter((v) => v !== "All").length +
     (dateFrom || dateTo ? 1 : 0);
 
   const resetFilters = () => {
-    setFType("All");
-    setFSev("All");
-    setFSrcIp("All");
-    setFDstIp("All");
-    setFMac("All");
-    setFApp("All");
-    setFDomain("All");
-    setDateFrom("");
-    setDateTo("");
+    setFType("All"); setFSev("All"); setFSrcIp("All"); setFDstIp("All");
+    setFMac("All"); setFApp("All"); setFDomain("All"); setDateFrom(""); setDateTo("");
   };
 
   if (!mounted) return null;
@@ -149,24 +136,12 @@ export default function ThreatsContent() {
       <div className="flex items-center justify-between gap-4">
         <div>
           <h2 className="text-3xl font-bold tracking-tight text-white flex items-center gap-3">
-            Threat Intelligence
+            Detected Threats
             {threats.isLoading && <Loader2 className="w-5 h-5 animate-spin text-primary" />}
           </h2>
           <p className="text-muted-foreground mt-1">Monitor and respond to network security threats.</p>
         </div>
         <div className="flex items-center gap-3">
-          <button
-            onClick={exportToPdf}
-            disabled={isExporting || threats.isLoading || filtered.length === 0}
-            className="flex items-center gap-1.5 px-3 py-2 rounded-xl text-xs font-semibold bg-blue-600 hover:bg-blue-500 text-white transition-all shadow-md shadow-blue-600/15 disabled:opacity-50 disabled:cursor-not-allowed"
-          >
-            {isExporting ? (
-              <Loader2 className="w-3.5 h-3.5 animate-spin" />
-            ) : (
-              <ArrowDownToLine className="w-3.5 h-3.5" />
-            )}
-            Export PDF
-          </button>
           <HelpTrigger pageId="intelligence" />
           <div className="flex items-center gap-2 text-sm font-medium text-emerald-400 bg-emerald-500/10 border border-emerald-500/20 px-4 py-2 rounded-lg shadow-[0_0_15px_rgba(16,185,129,0.1)]">
             <ShieldCheck className="h-4 w-4" />
@@ -245,6 +220,10 @@ export default function ThreatsContent() {
                 row.domain || "",
               ],
             }}
+            pdfExport={{
+              onExport: exportToPdf,
+              isExporting,
+            }}
           />
         </CardContent>
       </Card>
diff --git a/src/components/ui/AgentDetailModal.tsx b/src/components/ui/AgentDetailModal.tsx
index 07ad0b2..89a2fcd 100644
--- a/src/components/ui/AgentDetailModal.tsx
+++ b/src/components/ui/AgentDetailModal.tsx
@@ -79,7 +79,7 @@ export function AgentDetailModal({ agentUuid, agentLabel, onClose }: Props) {
 
   return (
     <>
-    <div className="fixed inset-0 z-50 flex items-center justify-center p-4" onClick={handleClose}>
+    <div className="fixed inset-0 z-[9999] flex items-center justify-center p-4" onClick={handleClose}>
       <div className={`absolute inset-0 bg-black/40 dark:bg-black/75 backdrop-blur-sm ${isClosing ? 'animate-overlay-out' : 'animate-overlay-in'}`} />
       <div
         className={`relative bg-card border border-border rounded-2xl w-full max-w-5xl h-[85vh] flex flex-col shadow-2xl shadow-black/60 ${isClosing ? 'animate-modal-out' : 'animate-modal-in'}`}
diff --git a/src/components/ui/AppDetailModal.tsx b/src/components/ui/AppDetailModal.tsx
index b63928e..9b9f70a 100644
--- a/src/components/ui/AppDetailModal.tsx
+++ b/src/components/ui/AppDetailModal.tsx
@@ -90,7 +90,7 @@ export function AppDetailModal({ appLabel, favicon, category, agentUuid, onClose
 
   return (
     <>
-      <div className="fixed inset-0 z-50 flex items-center justify-center p-4" onClick={handleClose}>
+      <div className="fixed inset-0 z-[9999] flex items-center justify-center p-4" onClick={handleClose}>
         <div className={`absolute inset-0 bg-black/40 dark:bg-black/75 backdrop-blur-sm ${isClosing ? 'animate-overlay-out' : 'animate-overlay-in'}`} />
         <div
           className={`relative bg-card border border-border rounded-2xl w-full max-w-3xl h-[85vh] flex flex-col shadow-2xl shadow-black/60 ${isClosing ? 'animate-modal-out' : 'animate-modal-in'}`}
diff --git a/src/components/ui/DataTable.tsx b/src/components/ui/DataTable.tsx
index 42c378b..d114b6a 100644
--- a/src/components/ui/DataTable.tsx
+++ b/src/components/ui/DataTable.tsx
@@ -1,7 +1,8 @@
 "use client";
 
-import { useState } from "react";
-import { Search, Download } from "lucide-react";
+import { useState, useRef, useEffect } from "react";
+import { Search, Download, ChevronDown, FileText, FileSpreadsheet } from "lucide-react";
+import { CsvExportOptions, downloadCsv } from "./DataTableCsvHelper";
 
 export interface Column<T> {
   header: React.ReactNode;
@@ -9,12 +10,7 @@ export interface Column<T> {
   className?: string;
   sortable?: boolean;
   sortAccessor?: (row: T) => number | string | null | undefined;
-}
-
-export interface CsvExportOptions<T> {
-  filename: string;
-  headers: string[];
-  rowSerializer: (row: T) => (string | number | null | undefined)[];
+  tooltip?: (row: T) => string;
 }
 
 interface DataTableProps<T> {
@@ -26,27 +22,12 @@ interface DataTableProps<T> {
   getRowClassName?: (row: T) => string;
   pageSize?: number;
   csvExport?: CsvExportOptions<T>;
+  pdfExport?: { onExport: () => void; isExporting?: boolean; };
   onRowClick?: (row: T) => void;
-}
-
-function escapeCsvCell(val: string | number | null | undefined): string {
-  const str = val == null ? "" : String(val);
-  if (str.includes(",") || str.includes('"') || str.includes("\n")) {
-    return `"${str.replace(/"/g, '""')}"`;
-  }
-  return str;
-}
-
-function downloadCsv(filename: string, rows: (string | number | null | undefined)[][]): void {
-  const bom = "\uFEFF";
-  const csv = bom + rows.map(row => row.map(escapeCsvCell).join(",")).join("\r\n");
-  const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
-  const url = URL.createObjectURL(blob);
-  const link = document.createElement("a");
-  link.href = url;
-  link.download = filename;
-  link.click();
-  URL.revokeObjectURL(url);
+  serverSide?: boolean;
+  totalCount?: number;
+  currentPage?: number;
+  onPageChange?: (page: number) => void;
 }
 
 export function DataTable<T>({
@@ -58,12 +39,20 @@ export function DataTable<T>({
   getRowClassName,
   pageSize = 50,
   csvExport,
+  pdfExport,
   onRowClick,
+  serverSide = false,
+  totalCount = 0,
+  currentPage = 1,
+  onPageChange,
 }: DataTableProps<T>) {
   const [query, setQuery] = useState("");
-  const [currentPage, setCurrentPage] = useState(1);
+  const [localCurrentPage, setLocalCurrentPage] = useState(1);
   const [sortConfig, setSortConfig] = useState<{ key: number; direction: 'asc' | 'desc' } | null>(null);
 
+  const activePage = serverSide ? currentPage : localCurrentPage;
+  const setActivePage = serverSide ? (onPageChange || (() => {})) : setLocalCurrentPage;
+
   const handleSort = (columnIndex: number) => {
     let direction: 'asc' | 'desc' = 'asc';
     if (sortConfig && sortConfig.key === columnIndex && sortConfig.direction === 'asc') {
@@ -74,11 +63,11 @@ export function DataTable<T>({
 
   let processedData = [...data];
 
-  if (searchFilter && query.trim()) {
+  if (!serverSide && searchFilter && query.trim()) {
     processedData = processedData.filter(row => searchFilter(row, query.trim()));
   }
 
-  if (sortConfig !== null) {
+  if (!serverSide && sortConfig !== null) {
     const column = columns[sortConfig.key];
     if (column && column.sortable && column.sortAccessor) {
       processedData.sort((a, b) => {
@@ -96,9 +85,23 @@ export function DataTable<T>({
 
   const filteredData = processedData;
 
-  const totalPages = Math.max(1, Math.ceil(filteredData.length / pageSize));
-  const startIndex = (currentPage - 1) * pageSize;
-  const paginatedData = filteredData.slice(startIndex, startIndex + pageSize);
+  const totalItems = serverSide ? totalCount : filteredData.length;
+  const totalPages = Math.max(1, Math.ceil(totalItems / pageSize));
+  const startIndex = (activePage - 1) * pageSize;
+  const paginatedData = serverSide ? filteredData : filteredData.slice(startIndex, startIndex + pageSize);
+
+  const [exportOpen, setExportOpen] = useState(false);
+  const exportRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (exportRef.current && !exportRef.current.contains(e.target as Node)) {
+        setExportOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
 
   const handleCsvExport = () => {
     if (!csvExport) return;
@@ -107,12 +110,13 @@ export function DataTable<T>({
       ...filteredData.map(row => csvExport.rowSerializer(row)),
     ];
     downloadCsv(csvExport.filename, rows);
+    setExportOpen(false);
   };
 
   return (
     <div className="space-y-4 animate-fade-in">
       <div className="flex items-center justify-between gap-3 flex-wrap">
-        {searchFilter && (
+        {!serverSide && searchFilter && (
           <div className="relative group">
             <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground transition-colors group-focus-within:text-primary" />
             <input
@@ -121,45 +125,75 @@ export function DataTable<T>({
               value={query}
               onChange={(e) => {
                 setQuery(e.target.value);
-                setCurrentPage(1);
+                setActivePage(1);
               }}
               className="w-full max-w-sm rounded-lg border border-border bg-card/30 backdrop-blur-sm pl-9 pr-4 py-2.5 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/50 focus:bg-card/50 transition-all shadow-sm"
             />
           </div>
         )}
-        {csvExport && (
-          <button
-            onClick={handleCsvExport}
-            title={`Export ${filteredData.length} rows to CSV`}
-            className="flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-lg border border-emerald-500/40 bg-emerald-500/10 text-emerald-400 hover:bg-emerald-500/20 hover:border-emerald-500/70 hover:text-emerald-300 transition-all shadow-sm whitespace-nowrap"
-          >
-            <Download className="w-4 h-4" />
-            Export CSV ({filteredData.length})
-          </button>
+        {(csvExport || pdfExport) && (
+          <div className="relative" ref={exportRef}>
+            <button
+              onClick={() => setExportOpen(prev => !prev)}
+              className="flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-lg border border-emerald-500/40 bg-emerald-500/10 text-emerald-400 hover:bg-emerald-500/20 hover:border-emerald-500/70 hover:text-emerald-300 transition-all shadow-sm whitespace-nowrap"
+            >
+              <Download className="w-4 h-4" />
+              Export ({totalItems})
+              <ChevronDown className={`w-3.5 h-3.5 transition-transform ${exportOpen ? 'rotate-180' : ''}`} />
+            </button>
+            {exportOpen && (
+              <div className="absolute right-0 mt-1.5 w-44 rounded-xl border border-border/60 bg-slate-900/95 backdrop-blur-xl shadow-xl z-50 overflow-hidden">
+                {csvExport && (
+                  <button
+                    onClick={handleCsvExport}
+                    className="flex items-center gap-2.5 w-full px-4 py-2.5 text-sm text-emerald-400 hover:bg-emerald-500/10 transition-colors"
+                  >
+                    <FileSpreadsheet className="w-4 h-4" />
+                    Export CSV
+                  </button>
+                )}
+                {pdfExport && (
+                  <button
+                    onClick={() => { pdfExport.onExport(); setExportOpen(false); }}
+                    disabled={pdfExport.isExporting}
+                    className="flex items-center gap-2.5 w-full px-4 py-2.5 text-sm text-blue-400 hover:bg-blue-500/10 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                  >
+                    <FileText className="w-4 h-4" />
+                    {pdfExport.isExporting ? 'Generating...' : 'Export PDF'}
+                  </button>
+                )}
+              </div>
+            )}
+          </div>
         )}
       </div>
       <div className="rounded-xl border border-border bg-card/50 backdrop-blur-xl shadow-sm overflow-hidden">
         <div className="w-full max-h-[400px] overflow-y-auto custom-scrollbar [&::-webkit-scrollbar-track]:mt-[48px]">
-          <table className="w-full text-sm text-left table-fixed">
+          <table className="w-full text-sm text-center table-fixed">
             <thead className="bg-slate-900 text-muted-foreground border-b border-border/50 sticky top-0 z-20">
               <tr>
-                {columns.map((col, i) => (
-                  <th 
-                    key={i} 
-                    onClick={() => col.sortable && handleSort(i)}
-                    className={`px-4 py-3.5 h-[48px] font-medium tracking-wide whitespace-nowrap ${col.className?.includes("text-") ? "" : "text-center"} ${col.className || ""} ${col.sortable ? "cursor-pointer hover:bg-black/5 dark:hover:bg-white/5 transition-colors group select-none" : ""}`}
-                  >
-                    <div className={`flex items-center gap-1 ${col.className?.includes("text-") && !col.className?.includes("text-center") ? "" : "justify-center"}`}>
-                      {col.header}
-                      {col.sortable && (
-                        <div className="flex flex-col text-[10px] opacity-40 group-hover:opacity-100 transition-opacity">
-                          <span className={`${sortConfig?.key === i && sortConfig.direction === 'asc' ? 'text-primary opacity-100' : ''}`}>▲</span>
-                          <span className={`-mt-1 ${sortConfig?.key === i && sortConfig.direction === 'desc' ? 'text-primary opacity-100' : ''}`}>▼</span>
-                        </div>
-                      )}
-                    </div>
-                  </th>
-                ))}
+                {columns.map((col, i) => {
+                  const hasWidth = col.className?.split(' ').some(c => c.startsWith('w-[') || c.startsWith('w-'));
+                  const widthStyle = hasWidth ? undefined : { width: `${100 / columns.length}%` };
+                  return (
+                    <th 
+                      key={i} 
+                      onClick={() => col.sortable && handleSort(i)}
+                      className={`px-4 py-3.5 h-[48px] font-medium tracking-wide whitespace-nowrap text-center ${col.className || ""} ${col.sortable ? "cursor-pointer hover:bg-black/5 dark:hover:bg-white/5 transition-colors group select-none" : ""}`}
+                      style={widthStyle}
+                    >
+                      <div className="flex items-center gap-1 justify-center">
+                        {col.header}
+                        {col.sortable && (
+                          <div className="flex flex-col text-[10px] opacity-40 group-hover:opacity-100 transition-opacity">
+                            <span className={`${sortConfig?.key === i && sortConfig.direction === 'asc' ? 'text-primary opacity-100' : ''}`}>▲</span>
+                            <span className={`-mt-1 ${sortConfig?.key === i && sortConfig.direction === 'desc' ? 'text-primary opacity-100' : ''}`}>▼</span>
+                          </div>
+                        )}
+                      </div>
+                    </th>
+                  );
+                })}
               </tr>
             </thead>
             <tbody className="divide-y divide-border/50">
@@ -184,7 +218,6 @@ export function DataTable<T>({
                     <div className="flex flex-col items-center justify-center text-muted-foreground">
                       <Search className="h-8 w-8 mb-3 opacity-20" />
                       <span className="text-sm font-medium">No data found</span>
-                      {query && <span className="text-xs mt-1 opacity-70">Try adjusting your search query</span>}
                     </div>
                   </td>
                 </tr>
@@ -195,11 +228,24 @@ export function DataTable<T>({
                     onClick={() => onRowClick?.(row)}
                     className={`hover:bg-primary/5 border-b border-border/50 transition-colors duration-200 group h-[48px] ${onRowClick ? "cursor-pointer hover:bg-primary/10" : ""} ${getRowClassName ? getRowClassName(row) : ""}`}
                   >
-                    {columns.map((col, j) => (
-                      <td key={j} className={`px-2 py-3 h-[48px] max-h-[48px] overflow-hidden text-foreground transition-colors truncate whitespace-nowrap ${col.className?.includes("text-") ? "" : "text-center"} ${col.className || ""}`}>
-                        {col.accessor(row, i)}
-                      </td>
-                    ))}
+                    {columns.map((col, j) => {
+                      const hasWidth = col.className?.split(' ').some(c => c.startsWith('w-[') || c.startsWith('w-'));
+                      const widthStyle = hasWidth ? undefined : { width: `${100 / columns.length}%` };
+                      const content = col.accessor(row, (activePage - 1) * pageSize + i);
+                      const tooltipText = col.tooltip
+                        ? col.tooltip(row)
+                        : (typeof content === 'string' || typeof content === 'number' ? String(content) : undefined);
+                      return (
+                        <td 
+                          key={j} 
+                          className={`px-2 py-3 h-[48px] max-h-[48px] overflow-hidden text-foreground text-center transition-colors truncate whitespace-nowrap ${col.className || ""}`}
+                          style={widthStyle}
+                          title={tooltipText}
+                        >
+                          {content}
+                        </td>
+                      );
+                    })}
                   </tr>
                 ))
               )}
@@ -207,29 +253,29 @@ export function DataTable<T>({
           </table>
         </div>
 
-        {filteredData.length > pageSize && (
+        {totalItems > pageSize && (
           <div className="flex items-center justify-between px-4 py-3 border-t border-border/50 bg-card/30">
             <div className="text-sm text-muted-foreground">
               Showing <span className="font-medium text-foreground">{startIndex + 1}</span> to{" "}
               <span className="font-medium text-foreground">
-                {Math.min(startIndex + pageSize, filteredData.length)}
+                {Math.min(startIndex + pageSize, totalItems)}
               </span>{" "}
-              of <span className="font-medium text-foreground">{filteredData.length}</span> results
+              of <span className="font-medium text-foreground">{totalItems}</span> results
             </div>
             <div className="flex items-center space-x-2">
               <button
-                onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
-                disabled={currentPage === 1}
+                onClick={() => setActivePage(Math.max(1, activePage - 1))}
+                disabled={activePage === 1}
                 className="px-3 py-1.5 text-sm font-medium rounded-md bg-secondary/80 text-foreground hover:bg-secondary disabled:opacity-50 disabled:cursor-not-allowed transition-colors border border-border/50"
               >
                 Previous
               </button>
               <div className="text-sm text-muted-foreground font-medium px-2">
-                Page {currentPage} of {totalPages}
+                Page {activePage} of {totalPages}
               </div>
               <button
-                onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}
-                disabled={currentPage === totalPages}
+                onClick={() => setActivePage(Math.min(totalPages, activePage + 1))}
+                disabled={activePage === totalPages}
                 className="px-3 py-1.5 text-sm font-medium rounded-md bg-secondary/80 text-foreground hover:bg-secondary disabled:opacity-50 disabled:cursor-not-allowed transition-colors border border-border/50"
               >
                 Next
diff --git a/src/components/ui/DataTableCsvHelper.ts b/src/components/ui/DataTableCsvHelper.ts
new file mode 100644
index 0000000..bffb49a
--- /dev/null
+++ b/src/components/ui/DataTableCsvHelper.ts
@@ -0,0 +1,25 @@
+export interface CsvExportOptions<T> {
+  filename: string;
+  headers: string[];
+  rowSerializer: (row: T) => (string | number | null | undefined)[];
+}
+
+export function escapeCsvCell(val: string | number | null | undefined): string {
+  const str = val == null ? "" : String(val);
+  if (str.includes(",") || str.includes('"') || str.includes("\n")) {
+    return `"${str.replace(/"/g, '""')}"`;
+  }
+  return str;
+}
+
+export function downloadCsv(filename: string, rows: (string | number | null | undefined)[][]): void {
+  const bom = "\uFEFF";
+  const csv = bom + rows.map(row => row.map(escapeCsvCell).join(",")).join("\r\n");
+  const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = filename;
+  link.click();
+  URL.revokeObjectURL(url);
+}
diff --git a/src/components/ui/DateRangePicker.tsx b/src/components/ui/DateRangePicker.tsx
index e541e00..ef0ce42 100644
--- a/src/components/ui/DateRangePicker.tsx
+++ b/src/components/ui/DateRangePicker.tsx
@@ -119,6 +119,17 @@ export function DateRangePicker({
             >
               7 Days
             </button>
+            <button
+              onClick={() => {
+                const d = new Date();
+                d.setDate(d.getDate() - 29);
+                onChange(d.toISOString().slice(0, 10), today);
+                setOpen(false);
+              }}
+              className="flex-1 px-2 py-1.5 text-xs bg-secondary/50 text-white border border-border/50 rounded-lg hover:bg-secondary transition-colors"
+            >
+              30 Days
+            </button>
             <button
               onClick={() => {
                 onClear();
diff --git a/src/components/ui/DeviceDetailModal.tsx b/src/components/ui/DeviceDetailModal.tsx
index b94f50d..ac74e67 100644
--- a/src/components/ui/DeviceDetailModal.tsx
+++ b/src/components/ui/DeviceDetailModal.tsx
@@ -1,16 +1,15 @@
 "use client";
-
 import { useState, useEffect } from "react";
 import { fetchDeviceDetails, DeviceDetails, DeviceStat } from "@/lib/api";
 import { fmtBytes } from "@/lib/utils";
 import { Loader2, X, Monitor, Activity, Shield, Box, Server, Cpu, Clock, HardDrive, ArrowDownToLine, ArrowUpFromLine, RefreshCcw, Globe, Link2 } from "lucide-react";
 import ActiveDurationDisplay from "./ActiveDurationDisplay";
-
 import DeviceAppsTab from "./DeviceAppsTab";
 import DeviceProtocolsTab from "./DeviceProtocolsTab";
 import DeviceDomainsTab from "./DeviceDomainsTab";
 import DeviceFlowsTab from "./DeviceFlowsTab";
 import DeviceThreatsTab from "./DeviceThreatsTab";
+import DeviceIdentityCard from "./DeviceIdentityCard";
 
 interface Props {
   ip: string;
@@ -21,6 +20,15 @@ interface Props {
 
 type Tab = "info" | "apps" | "protocols" | "domains" | "flows" | "threats";
 
+const tabs: { id: Tab; label: string; icon: any }[] = [
+  { id: "info", label: "Overview", icon: Monitor },
+  { id: "apps", label: "Applications", icon: Box },
+  { id: "protocols", label: "Protocols", icon: Link2 },
+  { id: "domains", label: "Domains / Web", icon: Globe },
+  { id: "flows", label: "Network Flows", icon: Activity },
+  { id: "threats", label: "Threats", icon: Shield }
+];
+
 export function DeviceDetailModal({ ip, mac = '', deviceData, onClose }: Props) {
   const [data, setData] = useState<DeviceDetails | null>(null);
   const [isLoading, setIsLoading] = useState(true);
@@ -54,14 +62,35 @@ export function DeviceDetailModal({ ip, mac = '', deviceData, onClose }: Props)
     loadData(false);
   }, [ip, mac]);
 
-  const tabs: { id: Tab; label: string; icon: any }[] = [
-    { id: "info", label: "Overview", icon: Monitor },
-    { id: "apps", label: "Applications", icon: Box },
-    { id: "protocols", label: "Protocols", icon: Link2 },
-    { id: "domains", label: "Domains / Web", icon: Globe },
-    { id: "flows", label: "Network Flows", icon: Activity },
-    { id: "threats", label: "Threats", icon: Shield }
-  ];
+  const [isExporting, setIsExporting] = useState(false);
+
+  const exportToPdf = async () => {
+    if (!data) return;
+    setIsExporting(true);
+    try {
+      const { pdf } = await import("@react-pdf/renderer");
+      const { default: DevicePdfDocument } = await import("./DevicePdfDocument");
+      const reportDateStr = new Date().toLocaleString("id-ID", {
+        timeZone: "Asia/Jakarta", day: "2-digit", month: "2-digit", year: "numeric",
+        hour: "2-digit", minute: "2-digit", second: "2-digit",
+      }) + " WIB";
+
+      const doc = <DevicePdfDocument data={data} ip={ip || data.ip_address || ""} mac={mac || data.mac_address || ""} deviceData={deviceData} reportDateStr={reportDateStr} />;
+
+      const blob = await pdf(doc).toBlob();
+      const url = URL.createObjectURL(blob);
+      const link = document.createElement("a");
+      link.href = url;
+      link.download = `Device_DPI_Telemetry_Report_${ip || data.ip_address || "device"}.pdf`;
+      link.click();
+      URL.revokeObjectURL(url);
+    } catch (err) {
+      console.error("Failed to export PDF:", err);
+      alert("Failed to generate PDF report. Please try again.");
+    } finally {
+      setIsExporting(false);
+    }
+  };
 
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center p-4" onClick={handleClose}>
@@ -101,9 +130,25 @@ export function DeviceDetailModal({ ip, mac = '', deviceData, onClose }: Props)
               )}
             </div>
           </div>
-          <button onClick={handleClose} className="p-2.5 text-muted-foreground hover:text-card-foreground hover:bg-secondary rounded-xl transition-all">
-            <X className="w-5 h-5" />
-          </button>
+          <div className="flex items-center gap-3">
+            {data && (
+              <button
+                disabled={isExporting}
+                onClick={exportToPdf}
+                className="flex items-center gap-1.5 px-3 py-2 rounded-xl text-xs font-semibold bg-blue-600 hover:bg-blue-500 text-white transition-all shadow-md shadow-blue-600/15 disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                {isExporting ? (
+                  <Loader2 className="w-3.5 h-3.5 animate-spin" />
+                ) : (
+                  <ArrowDownToLine className="w-3.5 h-3.5" />
+                )}
+                Export PDF
+              </button>
+            )}
+            <button onClick={handleClose} className="p-2.5 text-muted-foreground hover:text-card-foreground hover:bg-secondary rounded-xl transition-all">
+              <X className="w-5 h-5" />
+            </button>
+          </div>
         </div>
 
         {/* Body */}
@@ -172,29 +217,12 @@ export function DeviceDetailModal({ ip, mac = '', deviceData, onClose }: Props)
                       </div>
                     </div>
 
-                    <div className="bg-slate-50/50 dark:bg-white/[0.02] border border-border rounded-2xl p-6">
-                      <h4 className="text-sm font-bold text-card-foreground uppercase tracking-wider mb-6 flex items-center gap-2">
-                        <Server className="w-4 h-4 text-blue-500" /> Identity & Metadata
-                      </h4>
-                      <div className="grid grid-cols-2 lg:grid-cols-4 gap-6">
-                        <div>
-                          <p className="text-sm font-medium text-muted-foreground flex items-center gap-1.5 mb-1.5"><Cpu className="w-3.5 h-3.5" /> OS</p>
-                          <p className="text-card-foreground font-medium text-sm">{data.os_label || deviceData?.os_label || 'Unknown'}</p>
-                        </div>
-                        <div>
-                          <p className="text-sm font-medium text-muted-foreground flex items-center gap-1.5 mb-1.5"><Monitor className="w-3.5 h-3.5" /> Type</p>
-                          <p className="text-card-foreground font-medium text-sm">{data.device_type || deviceData?.device_type || 'Unknown'}</p>
-                        </div>
-                        <div>
-                          <p className="text-sm font-medium text-muted-foreground flex items-center gap-1.5 mb-1.5"><HardDrive className="w-3.5 h-3.5" /> Manufacturer</p>
-                          <p className="text-card-foreground font-medium text-sm">{data.manufacturer || deviceData?.manufacturer || 'Unknown'}</p>
-                        </div>
-                        <div>
-                          <p className="text-sm font-medium text-muted-foreground flex items-center gap-1.5 mb-1.5"><Clock className="w-3.5 h-3.5" /> Last Seen</p>
-                          <p className="text-card-foreground font-medium text-sm">{data.last_seen || deviceData?.last_seen ? new Date(data.last_seen || deviceData?.last_seen || '').toLocaleString() : 'Never'}</p>
-                        </div>
-                      </div>
-                    </div>
+                    <DeviceIdentityCard
+                      osLabel={data.os_label || deviceData?.os_label || ""}
+                      deviceType={data.device_type || deviceData?.device_type || ""}
+                      manufacturer={data.manufacturer || deviceData?.manufacturer || ""}
+                      lastSeen={data.last_seen || deviceData?.last_seen || ""}
+                    />
                   </div>
                 )}
 
diff --git a/src/components/ui/DeviceIdentityCard.tsx b/src/components/ui/DeviceIdentityCard.tsx
new file mode 100644
index 0000000..3e86ea8
--- /dev/null
+++ b/src/components/ui/DeviceIdentityCard.tsx
@@ -0,0 +1,54 @@
+"use client";
+
+import React from "react";
+import { Server, Cpu, Monitor, HardDrive, Clock } from "lucide-react";
+
+interface DeviceIdentityCardProps {
+  osLabel: string;
+  deviceType: string;
+  manufacturer: string;
+  lastSeen: string;
+}
+
+export default function DeviceIdentityCard({
+  osLabel,
+  deviceType,
+  manufacturer,
+  lastSeen,
+}: DeviceIdentityCardProps) {
+  return (
+    <div className="bg-slate-50/50 dark:bg-white/[0.02] border border-border rounded-2xl p-6 text-xs">
+      <h4 className="text-sm font-bold text-card-foreground uppercase tracking-wider mb-6 flex items-center gap-2">
+        <Server className="w-4 h-4 text-blue-500" /> Identity & Metadata
+      </h4>
+      <div className="grid grid-cols-2 lg:grid-cols-4 gap-6">
+        <div>
+          <p className="text-sm font-medium text-muted-foreground flex items-center gap-1.5 mb-1.5">
+            <Cpu className="w-3.5 h-3.5" /> OS
+          </p>
+          <p className="text-card-foreground font-medium text-sm">{osLabel || "Unknown"}</p>
+        </div>
+        <div>
+          <p className="text-sm font-medium text-muted-foreground flex items-center gap-1.5 mb-1.5">
+            <Monitor className="w-3.5 h-3.5" /> Type
+          </p>
+          <p className="text-card-foreground font-medium text-sm">{deviceType || "Unknown"}</p>
+        </div>
+        <div>
+          <p className="text-sm font-medium text-muted-foreground flex items-center gap-1.5 mb-1.5">
+            <HardDrive className="w-3.5 h-3.5" /> Manufacturer
+          </p>
+          <p className="text-card-foreground font-medium text-sm">{manufacturer || "Unknown"}</p>
+        </div>
+        <div>
+          <p className="text-sm font-medium text-muted-foreground flex items-center gap-1.5 mb-1.5">
+            <Clock className="w-3.5 h-3.5" /> Last Seen
+          </p>
+          <p className="text-card-foreground font-medium text-sm">
+            {lastSeen ? new Date(lastSeen).toLocaleString() : "Never"}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/ui/DevicePdfDocument.tsx b/src/components/ui/DevicePdfDocument.tsx
index 7149210..b31411f 100644
--- a/src/components/ui/DevicePdfDocument.tsx
+++ b/src/components/ui/DevicePdfDocument.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { Document, Page, Text, View } from "@react-pdf/renderer";
 import { styles } from "./DevicePdfStyles";
+import { formatAppLabel } from "@/lib/utils";
 
 interface DevicePdfDocumentProps {
   data: any;
@@ -191,7 +192,7 @@ export default function DevicePdfDocument({
           title="Top Protocols"
           data={topProtocols}
           columns={[
-            { header: "Protocol / Port", width: "50%", cell: (r) => r.protocol || "—" },
+            { header: "Protocol / Port", width: "50%", cell: (r) => formatAppLabel(r.app_label) },
             { header: "Download", width: "25%", align: "right", cell: (r) => formatBytes(r.download) },
             { header: "Upload", width: "25%", align: "right", cell: (r) => formatBytes(r.upload) },
           ]}
diff --git a/src/components/ui/HelpCenterFAB.tsx b/src/components/ui/HelpCenterFAB.tsx
index 057aca4..7704cec 100644
--- a/src/components/ui/HelpCenterFAB.tsx
+++ b/src/components/ui/HelpCenterFAB.tsx
@@ -2,8 +2,9 @@
 
 import React, { useState } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
-import { HelpCircle, X, Search, PlayCircle, ChevronDown, ChevronUp, FileText, BookOpen } from 'lucide-react';
-import { useTheme } from 'next-themes';
+import { HelpCircle, X, Search, ChevronDown, ChevronUp } from 'lucide-react';
+import { useTenantConfig } from '@/contexts/TenantConfigContext';
+import { FAQS } from '@/lib/helpContent';
 
 const FAQItem = ({ question, answer }: { question: string, answer: string }) => {
   const [isOpen, setIsOpen] = useState(false);
@@ -38,25 +39,16 @@ const FAQItem = ({ question, answer }: { question: string, answer: string }) =>
 export function HelpCenterFAB() {
   const [isOpen, setIsOpen] = useState(false);
   const [searchQuery, setSearchQuery] = useState("");
+  const { tenantConfig } = useTenantConfig();
 
-  const faqs = [
-    {
-      q: "Kenapa data Threats kosong (0)?",
-      a: "Jika indikator Threats menunjukkan angka 0, artinya jaringan Anda aman dalam rentang waktu yang dipilih. Sistem tidak mendeteksi adanya paket data yang cocok dengan profil serangan yang diketahui."
-    },
-    {
-      q: "Apa perbedaan Events dan Threats?",
-      a: "Events adalah semua log aktivitas koneksi biasa yang tercatat di jaringan Anda (termasuk yang aman). Threats adalah sekumpulan Events khusus yang telah difilter dan diklasifikasikan sebagai aktivitas berbahaya oleh sistem Deep Packet Inspection (DPI)."
-    },
-    {
-      q: "Bagaimana cara membaca Heatmap Geo Traffic?",
-      a: "Warna biru muda menunjukkan trafik rendah, sedangkan warna biru pekat/tua menunjukkan volume trafik (download/upload) yang sangat tinggi dari/ke negara tersebut."
-    },
-    {
-      q: "Berapa lama data disimpan?",
-      a: "Untuk menjaga performa sistem, database MongoDB dikonfigurasi untuk secara otomatis menghapus data telemetri jaringan yang usianya lebih dari 7 hari."
-    }
-  ];
+  const brandName = tenantConfig?.brandName || "System";
+  const footerCopyright = tenantConfig?.footerCopyright || `${brandName} &copy; 2026`;
+
+  const filteredFaqs = FAQS.filter(
+    faq =>
+      faq.question.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      faq.answer.toLowerCase().includes(searchQuery.toLowerCase())
+  );
 
   return (
     <>
@@ -97,7 +89,7 @@ export function HelpCenterFAB() {
               <div className="flex items-center justify-between border-b border-border/50 px-6 py-5">
                 <div>
                   <h2 className="text-lg font-bold text-foreground">Help & Resources</h2>
-                  <p className="text-xs text-muted-foreground mt-0.5">BackOne Guide & Documentation</p>
+                  <p className="text-xs text-muted-foreground mt-0.5">{brandName} Guide & Documentation</p>
                 </div>
                 <button
                   onClick={() => setIsOpen(false)}
@@ -122,45 +114,8 @@ export function HelpCenterFAB() {
                   />
                 </div>
 
-                {/* Getting Started Video Cards */}
-                <div className="space-y-3">
-                  <h3 className="text-xs font-bold uppercase tracking-wider text-muted-foreground flex items-center gap-2">
-                    <PlayCircle className="h-4 w-4" /> Getting Started
-                  </h3>
-                  <div className="grid grid-cols-2 gap-3">
-                    <div className="group cursor-pointer space-y-2">
-                      <div className="relative aspect-video w-full overflow-hidden rounded-lg bg-slate-800 dark:bg-slate-900 border border-border flex items-center justify-center group-hover:border-blue-500 transition-colors">
-                        <PlayCircle className="h-8 w-8 text-white/70 group-hover:text-blue-400 group-hover:scale-110 transition-all" />
-                        <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
-                      </div>
-                      <p className="text-xs font-medium text-foreground line-clamp-2 leading-tight">Dashboard Overview Tour</p>
-                    </div>
-                    <div className="group cursor-pointer space-y-2">
-                      <div className="relative aspect-video w-full overflow-hidden rounded-lg bg-slate-800 dark:bg-slate-900 border border-border flex items-center justify-center group-hover:border-blue-500 transition-colors">
-                        <PlayCircle className="h-8 w-8 text-white/70 group-hover:text-blue-400 group-hover:scale-110 transition-all" />
-                        <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
-                      </div>
-                      <p className="text-xs font-medium text-foreground line-clamp-2 leading-tight">How to Analyze Metadata</p>
-                    </div>
-                  </div>
-                </div>
 
-                {/* Documentation Links */}
-                <div className="space-y-3">
-                  <h3 className="text-xs font-bold uppercase tracking-wider text-muted-foreground flex items-center gap-2">
-                    <BookOpen className="h-4 w-4" /> Quick Links
-                  </h3>
-                  <div className="flex flex-col gap-1.5">
-                    <button className="flex items-center gap-3 rounded-lg px-3 py-2 text-sm text-foreground hover:bg-secondary transition-colors text-left">
-                      <FileText className="h-4 w-4 text-blue-500" />
-                      Read the Full Documentation
-                    </button>
-                    <button className="flex items-center gap-3 rounded-lg px-3 py-2 text-sm text-foreground hover:bg-secondary transition-colors text-left">
-                      <FileText className="h-4 w-4 text-emerald-500" />
-                      Integration with BackOne API
-                    </button>
-                  </div>
-                </div>
+
 
                 {/* FAQs */}
                 <div className="space-y-3 pb-8">
@@ -168,9 +123,13 @@ export function HelpCenterFAB() {
                     <HelpCircle className="h-4 w-4" /> Frequently Asked Questions
                   </h3>
                   <div className="rounded-xl border border-border/50 bg-card px-4">
-                    {faqs.map((faq, index) => (
-                      <FAQItem key={index} question={faq.q} answer={faq.a} />
-                    ))}
+                    {filteredFaqs.length === 0 ? (
+                      <p className="text-xs text-muted-foreground py-4 text-center">No matching FAQs found</p>
+                    ) : (
+                      filteredFaqs.map((faq, index) => (
+                        <FAQItem key={index} question={faq.question} answer={faq.answer} />
+                      ))
+                    )}
                   </div>
                 </div>
 
@@ -178,10 +137,7 @@ export function HelpCenterFAB() {
               
               {/* Footer */}
               <div className="border-t border-border/50 bg-secondary/30 p-4 text-center">
-                <p className="text-xs text-muted-foreground">
-                  BackOne &copy; 2026<br/>
-                  PT. Data Bisnis Solusi
-                </p>
+                <p className="text-xs text-muted-foreground" dangerouslySetInnerHTML={{ __html: footerCopyright }} />
               </div>
 
             </motion.div>
diff --git a/src/components/ui/Modal.tsx b/src/components/ui/Modal.tsx
index 6151612..4b22fc6 100644
--- a/src/components/ui/Modal.tsx
+++ b/src/components/ui/Modal.tsx
@@ -49,7 +49,7 @@ export function Modal({ isOpen, onClose, title, children, className }: ModalProp
   if (!isMounted || !visible) return null;
 
   return createPortal(
-    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-0">
+    <div className="fixed inset-0 z-[9999] flex items-center justify-center p-4 sm:p-0">
       {/* Backdrop */}
       <div 
         className={`fixed inset-0 bg-black/40 dark:bg-black/75 backdrop-blur-sm ${isClosing ? 'animate-overlay-out' : 'animate-overlay-in'}`}
@@ -58,7 +58,7 @@ export function Modal({ isOpen, onClose, title, children, className }: ModalProp
       
       {/* Dialog */}
       <div className={cn(
-        "relative z-50 w-full max-w-md transform overflow-hidden rounded-xl border border-border bg-card shadow-2xl sm:my-8",
+        "relative z-[9999] w-full max-w-md transform overflow-hidden rounded-xl border border-border bg-card shadow-2xl sm:my-8",
         isClosing ? 'animate-modal-out' : 'animate-modal-in',
         className
       )}>
diff --git a/src/components/ui/RemoteIpDetailModal.tsx b/src/components/ui/RemoteIpDetailModal.tsx
index 524279b..549ea33 100644
--- a/src/components/ui/RemoteIpDetailModal.tsx
+++ b/src/components/ui/RemoteIpDetailModal.tsx
@@ -63,7 +63,7 @@ export function RemoteIpDetailModal({ ip, onClose }: Props) {
   ];
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center p-4" onClick={handleClose}>
+    <div className="fixed inset-0 z-[9999] flex items-center justify-center p-4" onClick={handleClose}>
       <div className={`absolute inset-0 bg-black/60 backdrop-blur-md ${isClosing ? 'animate-overlay-out' : 'animate-overlay-in'}`} />
       <div
         className={`relative bg-card border border-border rounded-3xl w-full max-w-5xl h-[85vh] flex flex-col shadow-2xl shadow-black/10 dark:shadow-blue-900/20 overflow-hidden backdrop-blur-xl ${isClosing ? 'animate-modal-out' : 'animate-modal-in'}`}
diff --git a/src/components/ui/SafeImage.tsx b/src/components/ui/SafeImage.tsx
index 18dbfee..0e92803 100644
--- a/src/components/ui/SafeImage.tsx
+++ b/src/components/ui/SafeImage.tsx
@@ -45,6 +45,9 @@ export function SafeImage({ src, fallbackName, ...props }: SafeImageProps) {
   }, [src]);
 
   if (error || !imageSrc) {
+    const initials = fallbackName 
+      ? fallbackName.substring(0, 2).toUpperCase() 
+      : "Profile";
     return (
       <div 
         className={props.className} 
@@ -56,7 +59,7 @@ export function SafeImage({ src, fallbackName, ...props }: SafeImageProps) {
         }}
       >
         <span className="text-[10px] text-slate-500 font-bold uppercase tracking-wider">
-          Profile
+          {initials}
         </span>
       </div>
     );
diff --git a/src/components/ui/UniversalFilters.tsx b/src/components/ui/UniversalFilters.tsx
index 9b3996d..82acd49 100644
--- a/src/components/ui/UniversalFilters.tsx
+++ b/src/components/ui/UniversalFilters.tsx
@@ -99,7 +99,12 @@ export function UniversalFilters({
                     value={f.value || "All"}
                     onChange={(val) => onChange(f.id, val)}
                     options={f.options || []}
-                    placeholder={f.placeholder || `All ${f.label}s`}
+                    placeholder={
+                      f.placeholder ||
+                      (f.label.toLowerCase().endsWith('y')
+                        ? `All ${f.label.slice(0, -1)}ies`
+                        : `All ${f.label}s`)
+                    }
                     optionFormatter={f.formatter}
                   />
                 </div>
diff --git a/src/contexts/TimeFilterContext.tsx b/src/contexts/TimeFilterContext.tsx
index 672d636..5e2810e 100644
--- a/src/contexts/TimeFilterContext.tsx
+++ b/src/contexts/TimeFilterContext.tsx
@@ -2,7 +2,7 @@
 
 import React, { createContext, useContext, useState, ReactNode } from 'react';
 
-type TimeRange = '5m' | '30m' | '1h' | '1d' | '7d';
+type TimeRange = '5m' | '30m' | '1h' | '1d' | '7d' | '30d';
 
 interface TimeFilterContextType {
   timeRange: TimeRange;
diff --git a/src/lib/actions/agents.ts b/src/lib/actions/agents.ts
index a51be1e..4b810fe 100644
--- a/src/lib/actions/agents.ts
+++ b/src/lib/actions/agents.ts
@@ -1,63 +1,26 @@
 "use server";
 
-import { revalidatePath } from "next/cache";
+import { 
+  getApiKey, 
+  getSiteUuid, 
+  getHeaders, 
+  API_URL, 
+  createAgent,
+  updateAgent,
+  deleteAgent
+} from "./agentsCore";
+import type { Agent } from "./agentsCore";
 
-const BASE_URL = process.env.BACKONE_BASE_URL || process.env.NETIFY_BASE_URL;
-const API_URL = BASE_URL ? `${BASE_URL}/assets/agents` : "https://manager.netify.ai/api/v1/assets/agents";
-
-const getApiKey = () => process.env.BACKONE_API_KEY || process.env.NETIFY_API_KEY;
-const getJwtToken = () => process.env.BACKONE_JWT_TOKEN || process.env.NETIFY_JWT_TOKEN;
-const getSiteUuid = () => process.env.BACKONE_SITE_UUID || process.env.NETIFY_SITE_UUID;
-
-// Helper function to get headers
-const getHeaders = () => {
-  const API_KEY = getApiKey();
-  const JWT_TOKEN = getJwtToken();
-  const SITE_UUID = getSiteUuid();
-  
-  if (!API_KEY && !JWT_TOKEN) {
-    throw new Error("BACKONE_API_KEY or BACKONE_JWT_TOKEN is not set in environment variables");
-  }
-
-  const headers: Record<string, string> = {
-    "Content-Type": "application/json",
-  };
-
-  // Prioritize long-term API Key as recommended by the DPI API support team
-  if (API_KEY) {
-    headers["x-api-key"] = API_KEY;
-  } else if (JWT_TOKEN) {
-    headers["x-api-key"] = JWT_TOKEN;
-  }
-
-  if (SITE_UUID) {
-    headers["x-net-site"] = SITE_UUID;
-  }
-
-  return headers;
-};
-
-
-export interface Agent {
-  id: number;
-  uuid: string;
-  serial: string;
-  site_uuid: string;
-  organization_uuid: string;
-  provisioned: boolean;
-  activated: boolean;
-  label?: string;
-  created_at: { human: string; date: string; unix_time: number };
-  updated_at: { human: string; date: string; unix_time: number };
-  last_seen_at: { human: string; date: string; unix_time: number };
-}
+// Re-export mutations for backwards compatibility
+export { createAgent, updateAgent, deleteAgent };
 
 export async function getAgents(clientSiteUuid?: string): Promise<Agent[]> {
   try {
     const API_KEY = getApiKey();
     const SITE_UUID = clientSiteUuid || getSiteUuid();
 
-    // All agent data comes from MongoDB (single source of truth per Rule 13)
+    // All agent data comes from MongoDB agent_registry (single source of truth)
+    // agent_registry is populated by the proxy collector every cycle from /data/agents
     if (API_KEY && API_KEY.startsWith("sk_db_")) {
       const mongoose = require('mongoose');
       const MONGODB_URI = process.env.MONGODB_URI || 'mongodb://127.0.0.1:27017/backone_dpi';
@@ -68,44 +31,116 @@ export async function getAgents(clientSiteUuid?: string): Promise<Agent[]> {
       }
       const db = mongoose.connection.db;
 
+      // Build site filter
       const filter: any = {};
-      if (SITE_UUID) {
-        filter.site_uuid = SITE_UUID;
+      if (SITE_UUID) filter.site_uuid = SITE_UUID;
+
+      // 1. Get ALL agents from agent_registry
+      const registryAgents = await db.collection('agent_registry')
+        .find(filter)
+        .sort({ uuid: 1 })
+        .toArray();
+
+      // 2. If agent_registry is empty, fall back to summaries
+      let agentSource = registryAgents;
+      if (registryAgents.length === 0) {
+        const summaryFilter: any = { agent_uuid: { $nin: [null, ''], $exists: true } };
+        if (SITE_UUID) summaryFilter.site_uuid = SITE_UUID;
+        const agentSummaries = await db.collection('summaries')
+          .aggregate([
+            { $match: summaryFilter },
+            { $sort: { timestamp: -1 } },
+            { $group: { _id: '$agent_uuid', lastSeen: { $first: '$timestamp' }, label: { $first: '$agent_label' } } },
+          ]).toArray();
+        // Map summaries to registry-like format
+        agentSource = agentSummaries.map((s: any) => ({
+          uuid: s._id, serial: s._id, label: s.label, site_uuid: SITE_UUID,
+          provisioned: true, activated: true, last_seen_at: s.lastSeen ? { date: s.lastSeen.toISOString() } : null,
+        }));
       }
 
-      // Get all agents from MongoDB summaries collection
-      const agentSummaries = await db.collection('summaries')
+      // 3. Check for any flows recorded in the last 24 hours to determine online status
+      const twentyFourHoursAgo = new Date(Date.now() - 24 * 3600000);
+      const activeAgentUuids = await db.collection('flows').distinct('agent_uuid', {
+        timestamp: { $gte: twentyFourHoursAgo }
+      });
+      const activeSet = new Set(activeAgentUuids);
+
+      // Query latest timestamps from flows and summaries to get exact last seen
+      const lastSeenFlows = await db.collection('flows')
         .aggregate([
-          { $match: filter },
+          { $match: { agent_uuid: { $nin: [null, ''], $exists: true } } },
           { $sort: { timestamp: -1 } },
-          { $group: { _id: '$agent_uuid', lastSeen: { $first: '$timestamp' }, label: { $first: '$agent_label' } } },
+          { $group: { _id: '$agent_uuid', lastSeen: { $first: '$timestamp' } } }
         ]).toArray();
 
-      // Check for any flows recorded in the last 12 hours to determine online status
-      const twelveHoursAgo = new Date(Date.now() - 12 * 3600000);
-      const activeAgents = await db.collection('flows').distinct('agent_uuid', {
-        timestamp: { $gte: twelveHoursAgo }
-      });
-      const activeAgentsSet = new Set(activeAgents);
+      const lastSeenMap = new Map<string, Date>();
+      for (const f of lastSeenFlows) {
+        if (f._id && f.lastSeen) {
+          lastSeenMap.set(f._id, new Date(f.lastSeen));
+        }
+      }
 
-      const agents: Agent[] = agentSummaries.map((item: any, idx: number) => {
-        const lastSeenDate = item.lastSeen ? new Date(item.lastSeen) : null;
-        const isOnline = activeAgentsSet.has(item._id);
-        const statusHuman = isOnline
-          ? 'Online'
-          : lastSeenDate
-            ? `Last Seen ${lastSeenDate.toLocaleString('id-ID', { timeZone: 'Asia/Jakarta', day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' })} WIB`
-            : 'Offline';
+      const lastSeenSummaries = await db.collection('summaries')
+        .aggregate([
+          { $match: { agent_uuid: { $nin: [null, ''], $exists: true } } },
+          { $sort: { timestamp: -1 } },
+          { $group: { _id: '$agent_uuid', lastSeen: { $first: '$timestamp' } } }
+        ]).toArray();
+
+      for (const s of lastSeenSummaries) {
+        if (s._id && s.lastSeen) {
+          const current = lastSeenMap.get(s._id);
+          const date = new Date(s.lastSeen);
+          if (!current || date > current) {
+            lastSeenMap.set(s._id, date);
+          }
+        }
+      }
+
+      const agents: Agent[] = agentSource.map((item: any, idx: number) => {
+        const isOnline = activeSet.has(item.uuid);
+        
+        // Use last_seen_at from registry, enriched with online status and telemetry
+        const lastSeenRaw = item.last_seen_at;
+        let lastSeenDate: Date | null = null;
+        if (lastSeenRaw?.date) {
+          lastSeenDate = new Date(lastSeenRaw.date);
+        } else if (lastSeenRaw instanceof Date) {
+          lastSeenDate = lastSeenRaw;
+        } else if (typeof lastSeenRaw === 'string') {
+          lastSeenDate = new Date(lastSeenRaw);
+        }
+
+        const telemetryLastSeen = lastSeenMap.get(item.uuid || item.serial);
+        if (telemetryLastSeen && (!lastSeenDate || telemetryLastSeen > lastSeenDate)) {
+          lastSeenDate = telemetryLastSeen;
+        }
+
+        let statusHuman = 'No Flows Detected';
+        if (isOnline) {
+          if (lastSeenDate) {
+            const now = new Date();
+            const isToday = lastSeenDate.getDate() === now.getDate() &&
+                            lastSeenDate.getMonth() === now.getMonth() &&
+                            lastSeenDate.getFullYear() === now.getFullYear();
+            const timeStr = lastSeenDate.toLocaleTimeString('id-ID', { timeZone: 'Asia/Jakarta', hour: '2-digit', minute: '2-digit' }) + ' WIB';
+            const dateStr = lastSeenDate.toLocaleDateString('id-ID', { timeZone: 'Asia/Jakarta', day: '2-digit', month: '2-digit' });
+            statusHuman = isToday ? `Last seen: ${timeStr}` : `Last seen: ${dateStr} ${timeStr}`;
+          } else {
+            statusHuman = 'Last seen: Just now';
+          }
+        }
 
         return {
           id: idx + 1,
-          uuid: item._id,
-          serial: item._id,
-          site_uuid: SITE_UUID || '',
+          uuid: item.uuid || item.serial,
+          serial: item.serial || item.uuid,
+          site_uuid: item.site_uuid || SITE_UUID || '',
           organization_uuid: '',
-          provisioned: true,
-          activated: isOnline,
-          label: item.label || item._id,
+          provisioned: item.provisioned ?? true,
+          activated: true, // All retrieved agents are active/activated on the Netify platform
+          label: item.label || item.uuid,
           created_at: { human: 'N/A', date: '', unix_time: 0 },
           updated_at: { human: 'N/A', date: '', unix_time: 0 },
           last_seen_at: {
@@ -169,80 +204,3 @@ export async function getAgent(agentId: string): Promise<Agent | null> {
     return null;
   }
 }
-
-export async function createAgent(agentId: string, label: string) {
-  try {
-    const API_KEY = getApiKey();
-    if (API_KEY && API_KEY.startsWith("sk_db_")) {
-      return { success: false, message: "Aksi ditolak: Site-scoped API Key tidak diperbolehkan membuat Agents." };
-    }
-
-    const url = agentId 
-      ? `${API_URL}/${encodeURIComponent(agentId)}?label=${encodeURIComponent(label)}`
-      : `${API_URL}?label=${encodeURIComponent(label)}`;
-
-    const response = await fetch(url, {
-      method: "POST",
-      headers: getHeaders(),
-    });
-    
-    const result = await response.json();
-    if (!response.ok || result.status_code !== 0) {
-      return { success: false, message: result.status_message || response.statusText };
-    }
-    
-    revalidatePath('/agents');
-    return { success: true, data: result.data };
-  } catch (error: any) {
-    return { success: false, message: error.message };
-  }
-}
-
-export async function updateAgent(agentId: string, label: string) {
-  try {
-    const API_KEY = getApiKey();
-    if (API_KEY && API_KEY.startsWith("sk_db_")) {
-      return { success: false, message: "Aksi ditolak: Site-scoped API Key tidak diperbolehkan mengubah Agents." };
-    }
-
-    const response = await fetch(`${API_URL}/${encodeURIComponent(agentId)}?label=${encodeURIComponent(label)}`, {
-      method: "PATCH",
-      headers: getHeaders(),
-    });
-    
-    const result = await response.json();
-    if (!response.ok || result.status_code !== 0) {
-      return { success: false, message: result.status_message || response.statusText };
-    }
-    
-    revalidatePath('/agents');
-    return { success: true, data: result.data };
-  } catch (error: any) {
-    return { success: false, message: error.message };
-  }
-}
-
-export async function deleteAgent(agentId: string) {
-  try {
-    const API_KEY = getApiKey();
-    if (API_KEY && API_KEY.startsWith("sk_db_")) {
-      return { success: false, message: "Aksi ditolak: Site-scoped API Key tidak diperbolehkan menghapus Agents." };
-    }
-
-    const response = await fetch(`${API_URL}/${encodeURIComponent(agentId)}`, {
-      method: "DELETE",
-      headers: getHeaders(),
-    });
-    
-    const result = await response.json();
-    if (!response.ok || result.status_code !== 0) {
-      return { success: false, message: result.status_message || response.statusText };
-    }
-    
-    revalidatePath('/agents');
-    return { success: true };
-  } catch (error: any) {
-    return { success: false, message: error.message };
-  }
-}
-
diff --git a/src/lib/actions/agentsCore.ts b/src/lib/actions/agentsCore.ts
new file mode 100644
index 0000000..687c48e
--- /dev/null
+++ b/src/lib/actions/agentsCore.ts
@@ -0,0 +1,124 @@
+import { revalidatePath } from "next/cache";
+
+export const BASE_URL = process.env.BACKONE_BASE_URL || process.env.NETIFY_BASE_URL;
+export const API_URL = BASE_URL ? `${BASE_URL}/assets/agents` : "https://manager.netify.ai/api/v1/assets/agents";
+
+export const getApiKey = () => process.env.BACKONE_API_KEY || process.env.NETIFY_API_KEY;
+export const getJwtToken = () => process.env.BACKONE_JWT_TOKEN || process.env.NETIFY_JWT_TOKEN;
+export const getSiteUuid = () => process.env.BACKONE_SITE_UUID || process.env.NETIFY_SITE_UUID;
+
+export interface Agent {
+  id: number;
+  uuid: string;
+  serial: string;
+  site_uuid: string;
+  organization_uuid: string;
+  provisioned: boolean;
+  activated: boolean;
+  label?: string;
+  created_at: { human: string; date: string; unix_time: number };
+  updated_at: { human: string; date: string; unix_time: number };
+  last_seen_at: { human: string; date: string; unix_time: number };
+}
+
+export const getHeaders = () => {
+  const API_KEY = getApiKey();
+  const JWT_TOKEN = getJwtToken();
+  const SITE_UUID = getSiteUuid();
+  
+  if (!API_KEY && !JWT_TOKEN) {
+    throw new Error("BACKONE_API_KEY or BACKONE_JWT_TOKEN is not set in environment variables");
+  }
+
+  const headers: Record<string, string> = {
+    "Content-Type": "application/json",
+  };
+
+  if (API_KEY) {
+    headers["x-api-key"] = API_KEY;
+  } else if (JWT_TOKEN) {
+    headers["x-api-key"] = JWT_TOKEN;
+  }
+
+  if (SITE_UUID) {
+    headers["x-net-site"] = SITE_UUID;
+  }
+
+  return headers;
+};
+
+export async function createAgent(agentId: string, label: string) {
+  try {
+    const API_KEY = getApiKey();
+    if (API_KEY && API_KEY.startsWith("sk_db_")) {
+      return { success: false, message: "Aksi ditolak: Site-scoped API Key tidak diperbolehkan membuat Agents." };
+    }
+
+    const url = agentId 
+      ? `${API_URL}/${encodeURIComponent(agentId)}?label=${encodeURIComponent(label)}`
+      : `${API_URL}?label=${encodeURIComponent(label)}`;
+
+    const response = await fetch(url, {
+      method: "POST",
+      headers: getHeaders(),
+    });
+    
+    const result = await response.json();
+    if (!response.ok || result.status_code !== 0) {
+      return { success: false, message: result.status_message || response.statusText };
+    }
+    
+    revalidatePath('/agents');
+    return { success: true, data: result.data };
+  } catch (error: any) {
+    return { success: false, message: error.message };
+  }
+}
+
+export async function updateAgent(agentId: string, label: string) {
+  try {
+    const API_KEY = getApiKey();
+    if (API_KEY && API_KEY.startsWith("sk_db_")) {
+      return { success: false, message: "Aksi ditolak: Site-scoped API Key tidak diperbolehkan mengubah Agents." };
+    }
+
+    const response = await fetch(`${API_URL}/${encodeURIComponent(agentId)}?label=${encodeURIComponent(label)}`, {
+      method: "PATCH",
+      headers: getHeaders(),
+    });
+    
+    const result = await response.json();
+    if (!response.ok || result.status_code !== 0) {
+      return { success: false, message: result.status_message || response.statusText };
+    }
+    
+    revalidatePath('/agents');
+    return { success: true, data: result.data };
+  } catch (error: any) {
+    return { success: false, message: error.message };
+  }
+}
+
+export async function deleteAgent(agentId: string) {
+  try {
+    const API_KEY = getApiKey();
+    if (API_KEY && API_KEY.startsWith("sk_db_")) {
+      return { success: false, message: "Aksi ditolak: Site-scoped API Key tidak diperbolehkan menghapus Agents." };
+    }
+
+    const response = await fetch(`${API_URL}/${encodeURIComponent(agentId)}`, {
+      method: "DELETE",
+      headers: getHeaders(),
+    });
+    
+    const result = await response.json();
+    if (!response.ok || result.status_code !== 0) {
+      return { success: false, message: result.status_message || response.statusText };
+    }
+    
+    revalidatePath('/agents');
+    return { success: true };
+  } catch (error: any) {
+    return { success: false, message: error.message };
+  }
+}
diff --git a/src/lib/api-advanced.ts b/src/lib/api-advanced.ts
index 7d6a773..5888297 100644
--- a/src/lib/api-advanced.ts
+++ b/src/lib/api-advanced.ts
@@ -38,41 +38,41 @@ export interface IntelVpnDetection { id: number; fetched_at: string; detected_at
 import { useTimeFilter } from '@/contexts/TimeFilterContext';
 import { useCtxFetch } from './api-context-core';
 
-function useGenericFetch<T>(endpoint: string, limit: number) {
+function useGenericFetch<T>(endpoint: string, limit: number = 1000000) {
   const { timeRange } = useTimeFilter();
   return useCtxFetch<T[]>(`${endpoint}?limit=${limit}`, timeRange, []);
 }
 
 // Network Infrastructure Hooks
-export const useRegions = (limit = 50) => useGenericFetch<RegionStat>('/regions', limit);
-export const useCities = (limit = 50) => useGenericFetch<CityStat>('/cities', limit);
-export const useVlans = (limit = 50) => useGenericFetch<VlanStat>('/vlans', limit);
-export const useInterfaces = (limit = 50) => useGenericFetch<InterfaceStat>('/interfaces', limit);
-export const useIpVersions = (limit = 50) => useGenericFetch<IpVersionStat>('/ip-versions', limit);
-export const useRemoteIps = (limit = 50) => useGenericFetch<RemoteIpStat>('/remote-ips', limit);
-export const useMacBandwidth = (limit = 50) => useGenericFetch<MacBandwidthStat>('/mac-bandwidth', limit);
-export const useFlowTypes = (limit = 50) => useGenericFetch<FlowTypeStat>('/flow-types', limit);
-export const useFlowOrigins = (limit = 50) => useGenericFetch<FlowOriginStat>('/flow-origins', limit);
+export const useRegions = (limit = 1000000) => useGenericFetch<RegionStat>('/regions', limit);
+export const useCities = (limit = 1000000) => useGenericFetch<CityStat>('/cities', limit);
+export const useVlans = (limit = 1000000) => useGenericFetch<VlanStat>('/vlans', limit);
+export const useInterfaces = (limit = 1000000) => useGenericFetch<InterfaceStat>('/interfaces', limit);
+export const useIpVersions = (limit = 1000000) => useGenericFetch<IpVersionStat>('/ip-versions', limit);
+export const useRemoteIps = (limit = 1000000) => useGenericFetch<RemoteIpStat>('/remote-ips', limit);
+export const useMacBandwidth = (limit = 1000000) => useGenericFetch<MacBandwidthStat>('/mac-bandwidth', limit);
+export const useFlowTypes = (limit = 1000000) => useGenericFetch<FlowTypeStat>('/flow-types', limit);
+export const useFlowOrigins = (limit = 1000000) => useGenericFetch<FlowOriginStat>('/flow-origins', limit);
 
 // DPI Analytics Hooks
-export const useNetbios = (limit = 50) => useGenericFetch<NetbiosStat>('/netbios', limit);
-export const useDiscoveryOs = (limit = 50) => useGenericFetch<DiscoveryOsStat>('/discovery-os', limit);
-export const useDhcpFingerprints = (limit = 50) => useGenericFetch<DhcpFingerprintStat>('/dhcp-fingerprints', limit);
-export const useHttpUserAgents = (limit = 50) => useGenericFetch<HttpUserAgentStat>('/http-user-agents', limit);
-export const useSniHostnames = (limit = 50) => useGenericFetch<SniHostnameStat>('/sni-hostnames', limit);
-export const useSslServerCn = (limit = 50) => useGenericFetch<SslServerCnStat>('/ssl-server-cn', limit);
-export const useQuicHostnames = (limit = 50) => useGenericFetch<QuicHostnameStat>('/quic-hostnames', limit);
-export const useBittorrentHashes = (limit = 50) => useGenericFetch<BittorrentHashStat>('/bittorrent-hashes', limit);
-export const useSshVersions = (limit = 50) => useGenericFetch<SshVersionStat>('/ssh-versions', limit);
-export const useMdnsHostnames = (limit = 50) => useGenericFetch<MdnsHostnameStat>('/mdns-hostnames', limit);
+export const useNetbios = (limit = 1000000) => useGenericFetch<NetbiosStat>('/netbios', limit);
+export const useDiscoveryOs = (limit = 1000000) => useGenericFetch<DiscoveryOsStat>('/discovery-os', limit);
+export const useDhcpFingerprints = (limit = 1000000) => useGenericFetch<DhcpFingerprintStat>('/dhcp-fingerprints', limit);
+export const useHttpUserAgents = (limit = 1000000) => useGenericFetch<HttpUserAgentStat>('/http-user-agents', limit);
+export const useSniHostnames = (limit = 1000000) => useGenericFetch<SniHostnameStat>('/sni-hostnames', limit);
+export const useSslServerCn = (limit = 1000000) => useGenericFetch<SslServerCnStat>('/ssl-server-cn', limit);
+export const useQuicHostnames = (limit = 1000000) => useGenericFetch<QuicHostnameStat>('/quic-hostnames', limit);
+export const useBittorrentHashes = (limit = 1000000) => useGenericFetch<BittorrentHashStat>('/bittorrent-hashes', limit);
+export const useSshVersions = (limit = 1000000) => useGenericFetch<SshVersionStat>('/ssh-versions', limit);
+export const useMdnsHostnames = (limit = 1000000) => useGenericFetch<MdnsHostnameStat>('/mdns-hostnames', limit);
 
 // Intelligence Detail Hooks
-export const useIntelCryptoMining = (limit = 50) => useGenericFetch<IntelCryptoMining>('/intelligence/crypto-mining', limit);
-export const useIntelDeviceDiscovery = (limit = 50) => useGenericFetch<IntelDeviceDiscovery>('/intelligence/device-discovery', limit);
-export const useIntelEncryptionAudit = (limit = 50) => useGenericFetch<IntelEncryptionAudit>('/intelligence/encryption-audit', limit);
-export const useIntelInsecureProtocols = (limit = 50) => useGenericFetch<IntelInsecureProtocol>('/intelligence/insecure-protocols', limit);
-export const useIntelIpReputation = (limit = 50) => useGenericFetch<IntelIpReputation>('/intelligence/ip-reputation', limit);
-export const useIntelServerDiscovery = (limit = 50) => useGenericFetch<IntelServerDiscovery>('/intelligence/server-discovery', limit);
-export const useIntelTorDetection = (limit = 50) => useGenericFetch<IntelTorDetection>('/intelligence/tor', limit);
-export const useIntelUnencryptedPasswords = (limit = 50) => useGenericFetch<IntelUnencryptedPassword>('/intelligence/unencrypted-passwords', limit);
-export const useIntelVpnDetection = (limit = 50) => useGenericFetch<IntelVpnDetection>('/intelligence/vpn', limit);
+export const useIntelCryptoMining = (limit = 1000000) => useGenericFetch<IntelCryptoMining>('/intelligence/crypto-mining', limit);
+export const useIntelDeviceDiscovery = (limit = 1000000) => useGenericFetch<IntelDeviceDiscovery>('/intelligence/device-discovery', limit);
+export const useIntelEncryptionAudit = (limit = 1000000) => useGenericFetch<IntelEncryptionAudit>('/intelligence/encryption-audit', limit);
+export const useIntelInsecureProtocols = (limit = 1000000) => useGenericFetch<IntelInsecureProtocol>('/intelligence/insecure-protocols', limit);
+export const useIntelIpReputation = (limit = 1000000) => useGenericFetch<IntelIpReputation>('/intelligence/ip-reputation', limit);
+export const useIntelServerDiscovery = (limit = 1000000) => useGenericFetch<IntelServerDiscovery>('/intelligence/server-discovery', limit);
+export const useIntelTorDetection = (limit = 1000000) => useGenericFetch<IntelTorDetection>('/intelligence/tor', limit);
+export const useIntelUnencryptedPasswords = (limit = 1000000) => useGenericFetch<IntelUnencryptedPassword>('/intelligence/unencrypted-passwords', limit);
+export const useIntelVpnDetection = (limit = 1000000) => useGenericFetch<IntelVpnDetection>('/intelligence/vpn', limit);
diff --git a/src/lib/api-with-context-security.ts b/src/lib/api-with-context-security.ts
new file mode 100644
index 0000000..03c8241
--- /dev/null
+++ b/src/lib/api-with-context-security.ts
@@ -0,0 +1,58 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useTimeFilter } from '@/contexts/TimeFilterContext';
+import { useCtxFetch, globalCache, REFRESH_INTERVAL_MS } from './api-context-core';
+import { fetcher } from './api';
+import type { TlsVersionStat, TlsCipherStat, TlsSecurityStat, IntelligenceStats } from './api';
+
+export function useTlsVersions(limit: number = 1000000) {
+  const { timeRange } = useTimeFilter();
+  return useCtxFetch<TlsVersionStat[]>(`/tls-versions?limit=${limit}`, timeRange, []);
+}
+
+export function useTlsCiphers(limit: number = 1000000) {
+  const { timeRange } = useTimeFilter();
+  return useCtxFetch<TlsCipherStat[]>(`/tls-ciphers?limit=${limit}`, timeRange, []);
+}
+
+export function useTlsSecurity(limit: number = 1000000) {
+  const { timeRange } = useTimeFilter();
+  return useCtxFetch<TlsSecurityStat[]>(`/tls-security?limit=${limit}`, timeRange, []);
+}
+
+export function useIntelligenceStats() {
+  const { timeRange } = useTimeFilter();
+  const endpoint = '/intelligence/stats';
+  const cacheKey = `${endpoint}:${timeRange}`;
+
+  const [data, setData] = useState<IntelligenceStats | null>(() => {
+    return (globalCache[cacheKey] as IntelligenceStats) ?? null;
+  });
+  const [error, setError] = useState<Error | null>(null);
+  const [isLoading, setIsLoading] = useState(() => {
+    return !globalCache[cacheKey];
+  });
+  const [tick, setTick] = useState(0);
+
+  useEffect(() => {
+    const t = setInterval(() => setTick(v => v + 1), REFRESH_INTERVAL_MS);
+    return () => clearInterval(t);
+  }, []);
+
+  useEffect(() => {
+    if (!globalCache[cacheKey]) {
+      setIsLoading(true);
+    }
+    fetcher<IntelligenceStats>(endpoint, timeRange)
+      .then(res => {
+        globalCache[cacheKey] = res;
+        setData(res);
+      })
+      .catch(setError)
+      .finally(() => setIsLoading(false));
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [timeRange, tick]);
+
+  return { data, error, isLoading };
+}
diff --git a/src/lib/api-with-context.ts b/src/lib/api-with-context.ts
index 9c813b3..c5a0a4e 100644
--- a/src/lib/api-with-context.ts
+++ b/src/lib/api-with-context.ts
@@ -102,7 +102,7 @@ export function useTimeline(points: number = 60, agentUuid?: string) {
   return { data, error, isLoading };
 }
 
-export function useTopApps(limit: number = 10) {
+export function useTopApps(limit: number = 1000000) {
   const { timeRange } = useTimeFilter();
   return useCtxFetch<AppStat[]>(`/apps?limit=${limit}`, timeRange, []);
 }
@@ -112,17 +112,17 @@ export function useTopProtocols() {
   return useCtxFetch<ProtocolStat[]>('/protocols', timeRange, []);
 }
 
-export function useSslSans(limit: number = 50) {
+export function useSslSans(limit: number = 1000000) {
   const { timeRange } = useTimeFilter();
   return useCtxFetch<SslSanStat[]>(`/ssl-subject-alt-names?limit=${limit}`, timeRange, []);
 }
 
-export function useDevices(limit: number = 0) {
+export function useDevices(limit: number = 1000000) {
   const { timeRange } = useTimeFilter();
   return useCtxFetch<DeviceStat[]>(`/devices?limit=${limit}`, timeRange, []);
 }
 
-export function useThreats(limit: number = 0) {
+export function useThreats(limit: number = 1000000) {
   const { timeRange } = useTimeFilter();
   return useCtxFetch<ThreatStat[]>(`/threats?limit=${limit}`, timeRange, []);
 }
@@ -137,76 +137,72 @@ export function useContinents() {
   return useCtxFetch<ContinentStat[]>('/continents', timeRange, []);
 }
 
-export function useFlows(limit: number = 0) {
+export function useFlows(page: number = 1, pageSize: number = 50, filters: any = {}) {
   const { timeRange } = useTimeFilter();
-  return useCtxFetch<FlowStat[]>(`/flows?limit=${limit}`, timeRange, []);
+  const queryParts = [
+    `limit=${pageSize}`,
+    `skip=${(page - 1) * pageSize}`
+  ];
+  if (filters.protocol) queryParts.push(`protocol=${encodeURIComponent(filters.protocol)}`);
+  if (filters.src_ip) queryParts.push(`src_ip=${encodeURIComponent(filters.src_ip)}`);
+  if (filters.dst_ip) queryParts.push(`dst_ip=${encodeURIComponent(filters.dst_ip)}`);
+  if (filters.dst_port) queryParts.push(`dst_port=${encodeURIComponent(filters.dst_port)}`);
+  if (filters.app) queryParts.push(`app=${encodeURIComponent(filters.app)}`);
+  if (filters.domain) queryParts.push(`domain=${encodeURIComponent(filters.domain)}`);
+  if (filters.sort_download) queryParts.push(`sort_download=${encodeURIComponent(filters.sort_download)}`);
+  if (filters.sort_upload) queryParts.push(`sort_upload=${encodeURIComponent(filters.sort_upload)}`);
+  if (filters.dateFrom) queryParts.push(`date_from=${encodeURIComponent(filters.dateFrom)}`);
+  if (filters.dateTo) queryParts.push(`date_to=${encodeURIComponent(filters.dateTo)}`);
+  if (filters.search) queryParts.push(`search=${encodeURIComponent(filters.search)}`);
+
+  const endpoint = `/flows?${queryParts.join('&')}`;
+  const { data: res, error, isLoading } = useCtxFetch<{ flows: FlowStat[], total: number }>(endpoint, timeRange, { flows: [], total: 0 });
+  return {
+    data: res.flows || [],
+    total: res.total || 0,
+    error,
+    isLoading
+  };
 }
 
-export function useCountries(limit: number = 0) {
+export interface FlowOptions {
+  protocols: string[];
+  srcIps: string[];
+  dstIps: string[];
+  dstPorts: string[];
+  apps: string[];
+  domains: string[];
+}
+
+export function useFlowsOptions() {
+  const { timeRange } = useTimeFilter();
+  return useCtxFetch<FlowOptions>('/flows-options', timeRange, {
+    protocols: [],
+    srcIps: [],
+    dstIps: [],
+    dstPorts: [],
+    apps: [],
+    domains: []
+  });
+}
+
+export function useCountries(limit: number = 1000000) {
   const { timeRange } = useTimeFilter();
   return useCtxFetch<CountryStat[]>(`/countries?limit=${limit}`, timeRange, []);
 }
 
-export function useDNS(limit: number = 0) {
+export function useDNS(limit: number = 1000000) {
   const { timeRange } = useTimeFilter();
   return useCtxFetch<DnsStat[]>(`/dns?limit=${limit}`, timeRange, []);
 }
 
-export function useEvents(limit: number = 0) {
+export function useEvents(limit: number = 1000000) {
   const { timeRange } = useTimeFilter();
   return useCtxFetch<EventStat[]>(`/events?limit=${limit}`, timeRange, []);
 }
 
-export function useTlsVersions(limit: number = 10) {
-  const { timeRange } = useTimeFilter();
-  return useCtxFetch<TlsVersionStat[]>(`/tls-versions?limit=${limit}`, timeRange, []);
-}
-
-export function useTlsCiphers(limit: number = 15) {
-  const { timeRange } = useTimeFilter();
-  return useCtxFetch<TlsCipherStat[]>(`/tls-ciphers?limit=${limit}`, timeRange, []);
-}
-
-export function useTlsSecurity(limit: number = 10) {
-  const { timeRange } = useTimeFilter();
-  return useCtxFetch<TlsSecurityStat[]>(`/tls-security?limit=${limit}`, timeRange, []);
-}
-
-export function useIntelligenceStats() {
-  const { timeRange } = useTimeFilter();
-  const endpoint = '/intelligence/stats';
-  const cacheKey = `${endpoint}:${timeRange}`;
-
-  const [data, setData] = useState<IntelligenceStats | null>(() => {
-    return (globalCache[cacheKey] as IntelligenceStats) ?? null;
-  });
-  const [error, setError] = useState<Error | null>(null);
-  const [isLoading, setIsLoading] = useState(() => {
-    return !globalCache[cacheKey];
-  });
-  const [tick, setTick] = useState(0);
-
-  useEffect(() => {
-    const t = setInterval(() => setTick(v => v + 1), REFRESH_INTERVAL_MS);
-    return () => clearInterval(t);
-  }, []);
-
-  useEffect(() => {
-    if (!globalCache[cacheKey]) {
-      setIsLoading(true);
-    }
-    fetcher<IntelligenceStats>(endpoint, timeRange)
-      .then(res => {
-        globalCache[cacheKey] = res;
-        setData(res);
-      })
-      .catch(setError)
-      .finally(() => setIsLoading(false));
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [timeRange, tick]);
-
-  return { data, error, isLoading };
-}
+// Re-export security-specific hooks
+export { useTlsVersions, useTlsCiphers, useTlsSecurity, useIntelligenceStats } from './api-with-context-security';
 
 // Re-export utilities from api.ts
 export { fetcher, fetchAgentDetails, fetchDeviceDetails, fetchAppDetails, fetchSecurityDevices } from './api';
diff --git a/src/lib/help/conventions.ts b/src/lib/help/conventions.ts
new file mode 100644
index 0000000..d1bee85
--- /dev/null
+++ b/src/lib/help/conventions.ts
@@ -0,0 +1,11 @@
+import { TableColumn } from "./types";
+
+export const UI_CONVENTIONS: { symbol: string; meaning: string }[] = [
+  { symbol: "● (green)", meaning: "Active / Online status / Flows Detected" },
+  { symbol: "● (red)", meaning: "Inactive / Offline status / No Flows Detected" },
+  { symbol: "● (yellow/amber)", meaning: "Warning / Requires attention" },
+  { symbol: "Truncated text (...)", meaning: "Hover over the text cell to view a tooltip with the full, untruncated content" },
+  { symbol: "KB / MB / GB", meaning: "Data size units (1 MB = 1,000 KB, 1 GB = 1,000 MB)" },
+  { symbol: "Time format WIB/WITA/WIT", meaning: "All timestamps displayed in Indonesia local time zone (Asia/Jakarta, Asia/Makassar, or Asia/Jayapura)" },
+  { symbol: "Pagination < 1/N >", meaning: "Page navigation — each page displays a fixed size of 50 rows of data. The sequence index (#) continues across pages (e.g. Page 2 starts at index 51)" },
+];
diff --git a/src/lib/help/faqs.ts b/src/lib/help/faqs.ts
new file mode 100644
index 0000000..8bb6f08
--- /dev/null
+++ b/src/lib/help/faqs.ts
@@ -0,0 +1,59 @@
+import { FAQItem } from "./types";
+
+export const FAQS: FAQItem[] = [
+  {
+    question: "Why is the Threats data empty (0)?",
+    answer:
+      "If the Threats indicator shows 0, it means your network is secure within the selected time range. The system did not detect any data packets matching known attack profiles.",
+  },
+  {
+    question: "What is the difference between Events and Threats?",
+    answer:
+      "Events are all standard connection activity logs recorded on the network (including secure ones). Threats are a subset of specific Events that have been filtered and classified as malicious activity by the Deep Packet Inspection (DPI) engine.",
+  },
+  {
+    question: "How do I read the Geo Traffic Heatmap?",
+    answer:
+      "Light blue indicates low traffic, while deep/dark blue indicates a very high traffic volume (download/upload) to or from that country.",
+  },
+  {
+    question: "How is an Agent's Online or Offline status determined?",
+    answer:
+      "An agent's status is determined in real-time based on active flows. If the agent has successfully transmitted network traffic within the last 24 hours, its Traffic Status column displays a green pulsing beacon with the exact timestamp 'Last seen: HH:MM WIB'. If no traffic has been received beyond that 24-hour window, it is displayed as 'No Flows Detected' with a grey indicator.",
+  },
+  {
+    question: "Why do flow lines on the Agent map only appear between certain agents?",
+    answer:
+      "To avoid visual clutter and represent real-time routing accurately, flow lines are drawn ONLY between agents that have active data transactions. Sibling agents without current traffic flows between them will not show a line. Hovering over an active line opens a detailed tooltip listing the top active sub-flows, data volume, and connection counts.",
+  },
+  {
+    question: "What is the data retention limit for telemetry and flows?",
+    answer:
+      "To maintain system database efficiency and high query performance, all network telemetry, flows, and summary documents older than 30 days are automatically deleted by the database scheduler.",
+  },
+  {
+    question: "Is there a limit on the number of records displayed or analyzed?",
+    answer:
+      "No arbitrary limits are imposed. The database query limits and collection size limits are configured to support the platform's maximum capacity of 1,000,000 (1 million) records.",
+  },
+  {
+    question: "How does server-side pagination work on tables like Flows?",
+    answer:
+      "Large data tables utilize server-side pagination with a fixed page size of 50 items. The sequential index (# column) continues seamlessly across pages (e.g. Page 2 starts at index 51) to maintain structural consistency.",
+  },
+  {
+    question: "How does the \"View As Agent\" mode affect the dashboard data?",
+    answer:
+      "When 'View As Agent' mode is enabled, the entire data scope on the dashboard is locked to that specific agent. You will only see active devices, DNS logs, traffic flows, and threats detected specifically by that agent, rather than the aggregate data of the entire site.",
+  },
+  {
+    question: "Why do some devices show \"Unknown\" for operating system or hostname?",
+    answer:
+      "Hostnames are resolved via local DNS queries, and operating systems are identified passively using HTTP User-Agent and DHCP Fingerprints. If a device has not sent standard HTTP traffic or has recently connected without requesting a new IP, the system will display 'Unknown'.",
+  },
+  {
+    question: "What should I do if the Encryption Audit flags a connection as \"High Risk\"?",
+    answer:
+      "A 'High Risk' status is typically triggered by the use of legacy encryption versions such as TLS 1.0 or TLS 1.1, which are vulnerable to eavesdropping. It is recommended to update the destination server configuration or client systems to use at least TLS 1.2 or TLS 1.3.",
+  }
+];
diff --git a/src/lib/help/guides/infrastructure.ts b/src/lib/help/guides/infrastructure.ts
new file mode 100644
index 0000000..39a930f
--- /dev/null
+++ b/src/lib/help/guides/infrastructure.ts
@@ -0,0 +1,183 @@
+import { PageGuide } from "../types";
+
+export const INFRASTRUCTURE_GUIDES: PageGuide[] = [
+  {
+    id: "overview",
+    title: "Overview Dashboard",
+    url: "/",
+    icon: "🏠",
+    summary: "Real-time network health summary across all monitored agents and sites.",
+    sections: [
+      {
+        heading: "KPI Cards (Key Performance Indicators)",
+        content: "Five cards at the top of the page display core network metrics in real-time. All values refresh automatically when the sidebar time filter changes (e.g., Last 24 Hours, Last 7 Days). A sudden spike or drop in any card value may indicate a traffic anomaly that requires investigation.",
+        columns: [
+          { column: "Download", description: "Total volume of incoming data received by all local devices within the active time range. Displayed in KB, MB, or GB. The 'Speed' sub-label shows the average bit rate (total bytes ÷ total seconds in the filter range)." },
+          { column: "Upload", description: "Total volume of outgoing data sent from the site to external networks. Upload significantly exceeding download may indicate unauthorized data exfiltration or a misconfigured backup job." },
+          { column: "Devices", description: "Count of unique devices (identified by hardware MAC address) that were actively communicating during the active time filter. Unrecognized new devices should be investigated via the Devices tab." },
+          { column: "Flows", description: "Total number of network connection sessions (TCP/UDP) monitored by the DPI probe. The sub-label shows flow rate per hour. A sudden spike may indicate a port scan or DDoS attack." },
+          { column: "Threats", description: "Total active security threats detected (botnet, malware, crypto mining, phishing). A red number means active threats exist — click it to jump directly to the Threat Intelligence page." },
+        ],
+      },
+      {
+        heading: "Globe Map (3D Interactive)",
+        content: "A WebGL 3D Globe displaying routing paths from your site to destination countries worldwide. Each glowing arc represents an active connection. Arc thickness and brightness correspond to bandwidth intensity — thicker and brighter arcs carry more data.",
+        items: [
+          { label: "Rotate", description: "Drag with your mouse to rotate the globe and explore all active destinations." },
+          { label: "Zoom", description: "Scroll the mouse wheel to zoom in or out for more detail." },
+          { label: "Hover on arc", description: "Hover over any arc to see a tooltip with country name, total download/upload volume, and flow count." },
+          { label: "Anomaly signal", description: "Unusually bright arcs to unfamiliar countries warrant investigation via the Geo Traffic page." },
+        ],
+      },
+      {
+        heading: "Top Applications Chart",
+        content: "A bar chart displaying the top 7 applications by bandwidth consumed. Each bar shows the application name (as identified by DPI — e.g., YouTube, WhatsApp, Google Drive, Zoom) and total bandwidth in MB/GB. Applications that could not be specifically identified are labeled 'Unclassified'. Click any application name to jump to the Apps page with that application pre-filtered.",
+      },
+      {
+        heading: "Top Protocols Chart",
+        content: "A donut chart showing the transport layer protocol distribution (TCP, UDP, QUIC, ICMP) as percentages.",
+        items: [
+          { label: "TCP dominance", description: "Normal for web and enterprise applications — connection-oriented and reliable." },
+          { label: "High UDP", description: "Indicates heavy streaming, VoIP, or gaming traffic. Investigate if not expected." },
+          { label: "ICMP spike", description: "A sudden ICMP surge may indicate ping sweep activity or network reconnaissance." },
+        ],
+      },
+      {
+        heading: "How to Read the Dashboard Effectively",
+        steps: [
+          "Check KPI Cards first — look for any value that deviates from your usual baseline (e.g., upload suddenly 10× higher than normal).",
+          "Inspect the Globe — connections to unexpected countries warrant further investigation in Geo Traffic and Threat Intelligence.",
+          "Use the Time Filter — compare different ranges (Last Hour vs Last 24 Hours) to distinguish momentary spikes from sustained anomalies.",
+          "Prioritize the Threats card — if it shows a number greater than 0, investigate before reviewing any other metric.",
+        ],
+      },
+    ],
+  },
+  {
+    id: "agents",
+    title: "Agents Inventory",
+    url: "/agents",
+    icon: "📡",
+    summary: "Full management of all registered DPI Network Agent probes at your site.",
+    sections: [
+      {
+        heading: "Statistic Cards",
+        columns: [
+          { column: "Total Agents", description: "Total number of DPI probe devices registered in the system database for this site." },
+          { column: "Online Agents", description: "Agents that successfully transmitted telemetry within the last 24 hours. Marked with a pulsing green dot and 'Last seen: HH:MM WIB'." },
+          { column: "Offline Agents", description: "Agents that have not sent any data for more than 24 hours. Marked with a grey dot and 'No Flows Detected'. Check whether the device is still powered on." },
+          { column: "Avg. Uptime", description: "Average availability percentage across all agents, calculated from the last 30 days of historical data. Ideal value is >99%. Below 90% indicates persistent connectivity or hardware stability issues." },
+        ],
+      },
+      {
+        heading: "Agent Location Map",
+        content: "An interactive map of Indonesia displaying the geographic position of each agent based on configured GPS coordinates. Online agents show a pulsing green beacon; offline agents show a grey/red beacon.",
+        items: [
+          { label: "Flow lines", description: "Drawn dynamically ONLY between agents that have active traffic flowing between them — not all agents are connected by default." },
+          { label: "Hover on agent", description: "Shows the agent name/label, UUID, online status, and uptime percentage." },
+          { label: "Hover on flow line", description: "Shows a tooltip with top active sub-flows, bandwidth volume, and connection count." },
+          { label: "Blue panel (no GPS)", description: "Lists agents with no GPS coordinates set — click the pin icon (📍) in the table to configure their location." },
+        ],
+      },
+      {
+        heading: "Table: Provisioned Network Agents",
+        columns: [
+          { column: "UUID / Serial", description: "Unique hardware identifier of the DPI probe. Click to open the Agent Detail Modal containing firmware version, OS, CPU/memory utilization, and connection history." },
+          { column: "Label", description: "User-assigned friendly name, typically indicating physical location (e.g., 'Server Room Floor 3'). Used as the identifier across the entire dashboard." },
+          { column: "Provisioned", description: "Whether the agent is registered in the central system. Green 'Yes' = registered. Red 'No' = not registered and data will not be processed." },
+          { column: "Activated", description: "Whether the agent has ever successfully connected and transmitted telemetry at least once. An unactivated agent will not appear on the map or in traffic tables." },
+          { column: "Traffic Status", description: "Real-time indicator: pulsing green dot + 'Last seen: HH:MM WIB' means actively sending data within the last 24 hours. Grey dot + 'No Flows Detected' means no data for over 24 hours." },
+          { column: "Avg Uptime", description: "Historical availability percentage specific to this agent over the last 30 days. Below 90% requires attention." },
+          { column: "Data Size", description: "Total size of telemetry data currently stored in MongoDB for this agent. Data is automatically purged after 30 days per the retention policy." },
+          { column: "Actions", description: "Five action buttons are available per agent row — see the section below for details." },
+        ],
+      },
+      {
+        heading: "Agent Row Actions",
+        items: [
+          { label: "Detail Modal ( > )", description: "Opens the Agent Detail Modal showing firmware version, OS type, CPU/memory utilization, and full connection history." },
+          { label: "User Icon", description: "Manage viewer accounts that are granted access to view this specific agent's data only." },
+          { label: "Pin Icon 📍", description: "Set or update GPS coordinates for this agent so it appears in the correct position on the location map." },
+          { label: "Eye Icon", description: "View As Agent: locks the entire dashboard scope to this agent only. All pages (Flows, Apps, Devices, etc.) will show only data from this agent. Click 'Exit View As' in the sidebar to return to the global view." },
+          { label: "Delete Icon", description: "Permanently removes the agent from the registry. This action cannot be undone." },
+        ],
+      },
+      {
+        heading: "Feature: View As Agent",
+        content: "The eye icon in the Actions column locks the entire dashboard scope to a single specific agent — all pages (Flows, Apps, Devices, etc.) will show only data from that agent. To return to the global view, click 'Exit View As' at the top of the sidebar.",
+      },
+    ],
+  },
+  {
+    id: "network-infrastructure",
+    title: "Network Topology",
+    url: "/network-infrastructure",
+    icon: "🌐",
+    summary: "Physical, logical, and geographical network infrastructure topology details.",
+    sections: [
+      {
+        heading: "Tab: Routing & Geography",
+        content: "Displays Top Regions (continents) and Top Cities (specific cities) where external traffic is routed. Geographic coordinates are resolved from destination IP addresses using MaxMind GeoLite2 databases. Useful for identifying which data centers or countries your organization's data flows to.",
+      },
+      {
+        heading: "Tab: Interfaces & VLANs",
+        content: "Displays statistics for monitored hardware network interfaces (eth0, eth1, wlan0, etc.) including traffic volume per interface. Also shows active VLAN IDs (802.1Q tags) detected in packet headers — helping detect unexpected inter-VLAN traffic.",
+      },
+      {
+        heading: "Tab: IP & MAC",
+        items: [
+          { label: "Top External Server IPs", description: "Highest-traffic destination IPs — clickable for WHOIS and geolocation details." },
+          { label: "IP Protocol Distribution", description: "IPv4 vs IPv6 volume comparison as percentages. High IPv6 adoption may reflect modern cloud connectivity." },
+          { label: "MAC Address Bandwidth", description: "Maps hardware MAC addresses to total bandwidth consumed. Useful for identifying devices without hostnames that are consuming excessive bandwidth." },
+        ],
+      },
+      {
+        heading: "Tab: Flow Profiles",
+        items: [
+          { label: "Local flows", description: "Traffic between devices within the LAN only — no external routing involved." },
+          { label: "Inbound flows", description: "Traffic entering from outside the network to local devices. A high inbound ratio may indicate the network is receiving unexpected external connections." },
+          { label: "Outbound flows", description: "Traffic leaving local devices to the internet. The most common type for regular internet usage." },
+        ],
+      },
+    ],
+  },
+  {
+    id: "lookup",
+    title: "Application Lookup",
+    url: "/lookup",
+    icon: "🔍",
+    summary: "Reference catalog of all applications recognizable by the DPI engine.",
+    sections: [
+      {
+        heading: "Application Catalog & Search",
+        content: "Contains 2,500+ application signatures stored in the DPI engine's database. Use the search bar to find a specific application, or use the category dropdown to filter by functional group (Streaming Video, Social Media, File Transfer, Gaming, Cloud Services, etc.). Each card displays the name, icon, category, and default risk rating.",
+      },
+      {
+        heading: "Application Detail Modal",
+        content: "Click any application card to open a detail modal. The modal contains:",
+        items: [
+          { label: "Description", description: "Full explanation of the application's function and typical use cases." },
+          { label: "Transport Protocols", description: "Whether the application uses TCP, UDP, or both." },
+          { label: "Default Ports", description: "Common port numbers used (e.g., HTTPS = 443, HTTP = 80, DNS = 53, FTP = 21, SSH = 22, RDP = 3389)." },
+          { label: "Risk Rating", description: "Default security risk level: Low, Medium, or High, based on potential for misuse." },
+        ],
+      },
+      {
+        heading: "Blacklist Configuration",
+        content: "The Blacklist tab lets administrators define prohibited applications. When matching traffic is detected, the system will:",
+        steps: [
+          "Record the event as a policy violation in the Security Logs.",
+          "Trigger an alert notification in the Threat Intelligence dashboard.",
+        ],
+      },
+      {
+        heading: "Usage Tips",
+        items: [
+          { label: "Identify unknown apps", description: "If you see an unfamiliar application in Apps or Flows, search for it here to understand its function and risk profile before taking action." },
+          { label: "Verify default ports", description: "If a firewall is blocking an application, verify its default ports here and coordinate with the network team." },
+          { label: "Add blacklist entries gradually", description: "Add one application at a time and monitor the impact in Threat Intelligence to avoid excessive false positives." },
+        ],
+      },
+    ],
+  },
+];
diff --git a/src/lib/help/guides/security.ts b/src/lib/help/guides/security.ts
new file mode 100644
index 0000000..47e8223
--- /dev/null
+++ b/src/lib/help/guides/security.ts
@@ -0,0 +1,221 @@
+import { PageGuide } from "../types";
+
+export const SECURITY_GUIDES: PageGuide[] = [
+  {
+    id: "intelligence",
+    title: "Threat Intelligence",
+    url: "/intelligence",
+    icon: "🛡️",
+    summary: "Detection and analysis of active network security threats identified by the DPI engine.",
+    sections: [
+      {
+        heading: "How Threats Are Detected",
+        content: "The system uses multiple analysis layers to detect threats:",
+        steps: [
+          "Signature-based detection — matching traffic patterns against a database of 10,000+ known threat signatures, updated regularly.",
+          "Behavioral analysis — detecting abnormal patterns such as one device connecting to hundreds of IPs in a short time (port scanning).",
+          "Domain/IP reputation — matching connection destinations against blacklists of known malicious IPs and domains.",
+          "Protocol anomaly — detecting abnormal protocol usage, such as the Stratum mining protocol appearing on non-standard ports.",
+        ],
+      },
+      {
+        heading: "Threat Categories",
+        items: [
+          { label: "Crypto Mining (Illicit)", description: "Traffic matching the Stratum mining protocol — used for communication between mining software and pool servers. Key indicators: connections to domains like 'pool.minexmr.com' or common mining ports (3333, 4444, 5555, 14444). This activity consumes CPU/GPU resources and bandwidth without authorization." },
+          { label: "Botnet Command & Control", description: "Infected devices often make regular heartbeat connections to a C2 server to receive attacker commands. Key indicators: periodic connections to blacklisted botnet IPs/domains, encrypted traffic to non-standard ports, or DNS queries to domains with DGA-like random patterns." },
+          { label: "Malware", description: "Traffic signatures matching known malware communication patterns — Trojans (remote access), Ransomware (file encryption + C2), Spyware (keystroke or screenshot exfiltration), or Worms (self-propagating scanning). Refer to the 'Evidence' column for the specific technical details that triggered the detection." },
+          { label: "Phishing", description: "Connections to domains known to impersonate legitimate services (banking, email, social media) to steal credentials. Domains are matched against a phishing database updated hourly. A detection means a user device accessed a malicious URL." },
+        ],
+      },
+      {
+        heading: "Available Threat Filters",
+        content: "The filter panel above the table allows searching by any combination of the following fields simultaneously:",
+        items: [
+          { label: "Date Range", description: "Filter by specific date and time of occurrence." },
+          { label: "Type", description: "Filter by threat category: Crypto Mining, Botnet C2, Malware, or Phishing." },
+          { label: "Severity", description: "Filter by impact level: Critical, High, Medium, or Low." },
+          { label: "Source IP", description: "Filter by the local infected or suspicious device's IP address." },
+          { label: "Dest IP", description: "Filter by the malicious remote server IP address." },
+          { label: "MAC Address", description: "Filter by hardware identifier of the local device — useful when the IP changes dynamically." },
+          { label: "App", description: "Filter by the application associated with the threat (e.g., 'Stratum', 'BitTorrent')." },
+          { label: "Domain", description: "Filter by the specific malicious domain that was accessed." },
+        ],
+      },
+      {
+        heading: "Table: Detected Threats",
+        columns: [
+          { column: "Timestamp", description: "Date and time the threat was first detected, in Indonesia timezone (WIB). Click the header to sort newest or oldest first." },
+          { column: "#", description: "Sequential row number, continuous across pages (server-side pagination at 50 rows per page)." },
+          { column: "Type", description: "The detected threat category: Crypto Mining, Botnet C2, Malware, Phishing, or another type from the signature database." },
+          { column: "Severity", description: "Impact level — see the Severity Levels section below for response guidance per level." },
+          { column: "Source IP", description: "The local device IP that is the source or victim of the threat. Click to open the Device Detail Modal and view all activity from this device." },
+          { column: "Dest IP", description: "The malicious remote server IP. Hover to see geolocation and ISP information for that server." },
+          { column: "MAC Addr", description: "Hardware MAC address of the local device — useful for physically identifying a device even when its IP changes due to dynamic DHCP." },
+          { column: "App", description: "The application or protocol used in the malicious connection (e.g., 'BitTorrent', 'Stratum', or a specific identified application)." },
+          { column: "Domain", description: "The malicious domain that was accessed. Truncated — hover to see the full domain. This domain has been verified as malicious in the reputation database." },
+          { column: "Action", description: "Click the recommendation icon (💡) to open the Threat Recommendation Drawer — a panel with specific mitigation guidance, incident response steps, and relevant CVE references for this threat type." },
+        ],
+      },
+      {
+        heading: "Severity Levels",
+        items: [
+          { label: "Critical", description: "Active threat with direct and immediate impact. Response required within 1 hour. Isolate the device immediately." },
+          { label: "High", description: "Serious threat confirmed. Investigate and take action within 24 hours before the situation escalates." },
+          { label: "Medium", description: "Suspicious activity detected. Needs further analysis and monitoring. Escalate to High if the pattern repeats." },
+          { label: "Low", description: "Potentially suspicious activity — may be a false positive from a legitimate application. Log and review periodically." },
+        ],
+      },
+      {
+        heading: "Malware Sub-Types",
+        items: [
+          { label: "Trojan", description: "Remote access malware disguised as a legitimate file. Allows attackers to control the infected device silently." },
+          { label: "Ransomware", description: "Encrypts local files and establishes a C2 connection to demand payment. Immediate isolation is critical." },
+          { label: "Spyware", description: "Silently records keystrokes, screenshots, or clipboard content and exfiltrates them to an attacker's server." },
+          { label: "Worm", description: "Self-propagating malware that scans the network for other vulnerable devices to infect automatically." },
+        ],
+      },
+      {
+        heading: "Threat Recommendation Drawer",
+        content: "Click the action icon on any threat row to open the recommendation panel. The drawer contains:",
+        items: [
+          { label: "Technical explanation", description: "A detailed explanation of why this specific activity was classified as a threat, including the matching signatures and evidence." },
+          { label: "Mitigation steps", description: "Step-by-step instructions for IT/security teams to contain and remediate this specific threat type." },
+          { label: "CVE references", description: "Relevant CVE (Common Vulnerabilities and Exposures) IDs where applicable, linking to known vulnerability databases." },
+          { label: "Incident response", description: "Recommended device isolation procedures and incident response workflow." },
+        ],
+      },
+      {
+        heading: "Exporting Threat Data",
+        content: "Click the 'Export ▾' button at the top-right of the table to open the format dropdown. Always apply your desired filters first — both formats only export data matching the active filter.",
+        items: [
+          { label: "Export CSV", description: "Downloads a .csv file with raw threat data columns: Timestamp, Type, Severity, Source IP, Dest IP, MAC Address, App, Domain. Compatible with Excel, Google Sheets, or import into SIEM platforms (Splunk, IBM QRadar, Elastic)." },
+          { label: "Export PDF", description: "Generates a professionally formatted threat summary report as a .pdf with severity breakdown statistics. The button displays 'Generating...' during PDF rendering — wait for the file to download automatically without clicking again." },
+        ],
+      },
+      {
+        heading: "Response Priority Guidelines",
+        items: [
+          { label: "Critical — Respond immediately (<1 hour)", description: "Isolate the device from the network (disconnect cable or block at switch/access point). Document all flow details and take screenshots. Report to the security team or management immediately." },
+          { label: "High — Investigate within 24 hours", description: "Open the Device Detail Modal for the affected device. Review all applications and domains accessed. Determine whether this is a false positive or a genuine threat." },
+          { label: "Medium — Monitor and analyze", description: "Flag for monitoring. Check whether the same pattern recurs over the following days. If it does, escalate to High severity." },
+          { label: "Low — Log and review periodically", description: "Record in the incident log. Review weekly to check for any severity escalation. May be a false positive from a legitimate application." },
+        ],
+      },
+    ],
+  },
+  {
+    id: "events",
+    title: "System Events",
+    url: "/events",
+    icon: "📋",
+    summary: "Audit log of system activity and operational notifications from all platform components.",
+    sections: [
+      {
+        heading: "What Are System Events?",
+        content: "System Events is a non-malicious audit log recording all operational platform activities: agent connection/disconnection, database retention cycles, configuration updates, system capacity warnings, and administrator actions. Unlike Threat Intelligence (which focuses on external security threats), Events focuses on the internal health and operational state of the platform itself.",
+      },
+      {
+        heading: "Event Severity Levels",
+        items: [
+          { label: "Info (Blue)", description: "Normal activity requiring no action. Examples: 'Agent F6-2V-DT-8A connected', 'Database retention cycle completed: 1,234 records deleted', 'Summary data updated for site SIAB'. These logs support audit trails and retrospective troubleshooting." },
+          { label: "Warning (Yellow)", description: "Situations that need attention but are not yet critical. Examples: 'Agent YW-6I-61-LL missing GPS coordinates', 'Database collection approaching size threshold', 'API rate limit warning'. Should be addressed before they escalate into serious problems." },
+          { label: "Critical (Red)", description: "Conditions requiring immediate action. Examples: 'Agent 1T-5Q-RC-AS offline for >24 hours', 'MongoDB connection failed', 'Disk space critical (>95%)'. Ignoring Critical events may result in monitoring data loss." },
+        ],
+      },
+      {
+        heading: "Table: Event Log",
+        columns: [
+          { column: "Timestamp", description: "Date and time the event occurred in Indonesia timezone (WIB/WITA/WIT). Click the header to sort newest or oldest first." },
+          { column: "Severity", description: "Impact level of the event — see the Event Severity Levels section above for the meaning of each level." },
+          { column: "Agent", description: "The DPI probe that reported this event. Displayed as 'System' if the event was generated by the central system (scheduler, database, or API) rather than by a hardware probe." },
+          { column: "Description", description: "A plain-language description of what occurred, understandable without deep technical knowledge." },
+          { column: "Details", description: "Click the icon (📄) to open a side panel containing the complete raw JSON payload of this event — includes technical metadata, stack traces for errors, and specific parameters involved. Useful for deep troubleshooting." },
+        ],
+      },
+      {
+        heading: "Exporting the Event Log",
+        items: [
+          { label: "Export CSV", description: "Exports the filtered event log as a .csv with columns: Timestamp, Severity, Agent, Description. Ideal for audit trails, compliance reporting, or operational incident analysis." },
+          { label: "Export PDF", description: "Generates a formatted event log report as a .pdf with a severity-based breakdown and timeline. Suitable for periodic operational reports to management or the IT team." },
+        ],
+      },
+      {
+        heading: "Event Log Usage Tips",
+        items: [
+          { label: "Troubleshoot agent connectivity", description: "If an agent suddenly goes offline, check Events to find the disconnection log and understand the context (network error, reboot, configuration change) that preceded it." },
+          { label: "Review Critical events daily", description: "Make it a habit to check Critical severity events every morning to detect system issues that may have occurred outside of working hours." },
+          { label: "Use Date Range for incident investigation", description: "When investigating a past incident, filter Events by the specific time range of the incident to reconstruct the exact sequence of events." },
+        ],
+      },
+    ],
+  },
+  {
+    id: "security-audit",
+    title: "Encryption Audit (TLS)",
+    url: "/security-audit",
+    icon: "🔐",
+    summary: "Security audit of TLS encryption versions and cipher suites used across the network.",
+    sections: [
+      {
+        heading: "Why TLS Auditing Matters",
+        content: "TLS (Transport Layer Security) is the encryption protocol protecting data in transit. Outdated TLS versions and weak cipher suites have known security vulnerabilities that can be exploited to decrypt traffic that should be private:",
+        steps: [
+          "TLS 1.0 and TLS 1.1 are vulnerable to POODLE, BEAST, and DROWN attacks — they have been officially deprecated since 2020.",
+          "CBC mode cipher suites are vulnerable to the LUCKY13 and padding oracle attacks under certain conditions.",
+          "RC4 cipher has been cryptographically broken since 2015 and must not be used in any context.",
+          "3DES (Triple DES) has been deprecated due to the SWEET32 birthday attack vulnerability.",
+        ],
+      },
+      {
+        heading: "Table: TLS Versions",
+        columns: [
+          { column: "Version", description: "TLS version detected from ClientHello/ServerHello handshake analysis — see the TLS Version Risk Levels section below." },
+          { column: "Count", description: "Total number of connection sessions using this TLS version within the active time filter." },
+          { column: "Risk", description: "Risk rating for this TLS version — see the TLS Version Risk Levels section below." },
+        ],
+      },
+      {
+        heading: "TLS Version Risk Levels",
+        items: [
+          { label: "SSL 2.0 / SSL 3.0", description: "CRITICAL EMERGENCY — these protocols are completely broken and must never be in use. Shutdown affected servers immediately." },
+          { label: "TLS 1.0", description: "High Risk — deprecated in 2020. Vulnerable to POODLE, BEAST, and DROWN attacks. Upgrade all clients and servers immediately." },
+          { label: "TLS 1.1", description: "High Risk — deprecated in 2020. Vulnerable to BEAST and LUCKY13 attacks. Upgrade all clients and servers immediately." },
+          { label: "TLS 1.2", description: "Medium Risk — still acceptable when paired only with AES-GCM or ChaCha20 ciphers. Disable CBC cipher suites on servers." },
+          { label: "TLS 1.3", description: "Secure — the recommended standard. Perfect Forward Secrecy is mandatory, all legacy ciphers are removed by design." },
+        ],
+      },
+      {
+        heading: "Table: TLS Ciphers",
+        columns: [
+          { column: "Cipher Suite", description: "Full name of the encryption algorithm negotiated between client and server. Long names are truncated — hover to see the full suite name." },
+          { column: "Strength", description: "Cipher strength rating — see the Cipher Strength Ratings section below." },
+          { column: "Count", description: "Frequency of this cipher suite usage within the active time filter. Insecure ciphers with a high count represent the highest remediation priority." },
+        ],
+      },
+      {
+        heading: "Cipher Strength Ratings",
+        items: [
+          { label: "Strong", description: "AES-GCM or ChaCha20-Poly1305 with ECDHE (Elliptic Curve Diffie-Hellman Ephemeral) key exchange. Provides Perfect Forward Secrecy — compromise of the server key does not expose past sessions." },
+          { label: "Weak", description: "CBC (Cipher Block Chaining) mode ciphers, or RSA key exchange without PFS. Vulnerable to padding oracle attacks (LUCKY13). Migrate to AES-GCM as soon as possible." },
+          { label: "Insecure", description: "RC4 (cryptographically broken since 2015), 3DES (vulnerable to SWEET32 birthday attack), MD5 authentication, or NULL cipher (completely unencrypted traffic). These must be disabled immediately on all servers." },
+        ],
+      },
+      {
+        heading: "Remediation Steps",
+        items: [
+          { label: "TLS 1.0 / TLS 1.1 detected", description: "Identify devices and applications still using these versions (check DPI Metadata → HTTP User Agents for outdated browsers or software). Update browsers to the latest version and upgrade applications using outdated TLS libraries." },
+          { label: "RC4 or 3DES ciphers detected", description: "This is a security emergency. Identify servers still advertising these ciphers (check SNI in DPI Metadata) and update their TLS configuration to explicitly disable weak ciphers in the server's SSL settings." },
+          { label: "CBC cipher suites dominating", description: "Prioritize migration to GCM (Galois/Counter Mode) — an AEAD (Authenticated Encryption with Associated Data) cipher that is immune to padding oracle attacks. Configure servers to prefer ECDHE-AESGCM cipher suites." },
+          { label: "Low TLS 1.3 adoption", description: "TLS 1.3 offers faster handshakes (1 round-trip vs. 2 for TLS 1.2) and stronger security by default. Push for infrastructure upgrades on both servers and clients to support TLS 1.3 natively." },
+        ],
+      },
+      {
+        heading: "Exporting the Audit Report",
+        items: [
+          { label: "Export CSV", description: "Exports TLS version and cipher suite data as a .csv for further analysis or input into a vulnerability management or compliance platform." },
+          { label: "Export PDF", description: "Generates a formatted TLS audit report directly suitable for compliance reporting (PCI-DSS, ISO 27001, NIST CSF) or for management presentations about the organization's encryption security posture." },
+        ],
+      },
+    ],
+  },
+];
diff --git a/src/lib/help/guides/traffic-analytics.ts b/src/lib/help/guides/traffic-analytics.ts
new file mode 100644
index 0000000..53850d7
--- /dev/null
+++ b/src/lib/help/guides/traffic-analytics.ts
@@ -0,0 +1,122 @@
+import { PageGuide } from "../types";
+
+export const TRAFFIC_ANALYTICS_GUIDES: PageGuide[] = [
+  {
+    id: "network-intelligence",
+    title: "Traffic Categories",
+    url: "/network-intelligence",
+    icon: "📊",
+    summary: "Traffic distribution grouped by functional application categories.",
+    sections: [
+      {
+        heading: "Application Categorization",
+        content: "This page groups all identified applications into high-level functional categories, providing a broad view of network usage without inspecting each application individually. Categorization is performed automatically based on the DPI signature database. The pie chart visualizes bandwidth proportion per category at a glance.",
+      },
+      {
+        heading: "Traffic Category Reference",
+        items: [
+          { label: "Streaming / Video", description: "Traffic to YouTube, Netflix, TikTok, Twitch, Vimeo, etc. Typically dominates total bandwidth. High volume is expected, but may become a concern if it overwhelms business-critical connections." },
+          { label: "Social Network", description: "Facebook, Instagram, Twitter/X, LinkedIn, WhatsApp, Telegram, etc. Separated from streaming because the bandwidth profile differs (more short video/photo upload activity)." },
+          { label: "Cloud Services", description: "Google Drive, Dropbox, OneDrive, AWS S3, Azure Blob Storage. High upload to this category is normal for automatic backup jobs." },
+          { label: "File Transfer", description: "FTP, SFTP, BitTorrent, and other P2P clients. BitTorrent presence in a corporate environment is a red flag requiring investigation." },
+          { label: "Web Browsing", description: "General HTTP/HTTPS traffic not matched to a specific application. Catch-all category for generic web browsing." },
+          { label: "DNS / System", description: "DNS resolver traffic, NTP time sync, and OS updates (Windows Update, apt, yum). High volume in this category is typically normal." },
+          { label: "Security / VPN", description: "VPN client traffic, antivirus updates, firewall management traffic. Identify unauthorized VPN usage here." },
+          { label: "Unclassified", description: "Traffic that could not be matched to any known signature. A high percentage warrants investigation on the Flows page." },
+        ],
+      },
+      {
+        heading: "Table: Category Breakdown",
+        columns: [
+          { column: "Category", description: "Name of the functional application group." },
+          { column: "Download", description: "Total incoming bandwidth for all applications within this category." },
+          { column: "Upload", description: "Total outgoing bandwidth from all applications within this category." },
+          { column: "Devices", description: "Number of unique devices accessing applications in this category." },
+          { column: "Percentage", description: "This category's share of total network bandwidth. Useful for bandwidth allocation policy reviews." },
+        ],
+      },
+    ],
+  },
+  {
+    id: "dpi-analytics",
+    title: "DPI Metadata",
+    url: "/dpi-analytics",
+    icon: "🔌",
+    summary: "Raw technical metadata extracted by Deep Packet Inspection: hostnames, client fingerprints, and protocol-specific identifiers.",
+    sections: [
+      {
+        heading: "What is DPI Metadata?",
+        content: "DPI Metadata is low-level technical data extracted directly from network packet headers and payloads. This data is more granular than standard flow records — it includes software identity, browser versions, OS types, TLS cipher suites, and protocol-specific identifiers. This page is intended for security teams and network engineers who require deep visibility.",
+      },
+      {
+        heading: "Tab: Hostnames & Servers",
+        items: [
+          { label: "SNI Hostnames", description: "Server names extracted from TLS ClientHello handshakes. This is the most accurate method for identifying target servers, even within encrypted HTTPS traffic." },
+          { label: "SSL Server Common Names", description: "Names listed in the SSL certificate sent by the server. May differ from the SNI if a multi-domain (SAN) certificate is in use." },
+          { label: "QUIC SNIs", description: "SNI values extracted from QUIC (HTTP/3) connections — Google's modern transport protocol that is replacing HTTPS over TCP in many applications." },
+        ],
+      },
+      {
+        heading: "Tab: Client Fingerprints",
+        items: [
+          { label: "Discovered OS", description: "Operating systems passively detected from TCP TTL values and default window sizes. Common signatures: Windows = TTL 128, Linux/Android = TTL 64, macOS/iOS = TTL 64." },
+          { label: "HTTP User Agents", description: "Browser and application version strings from HTTP headers (e.g., 'Mozilla/5.0 Chrome/115'). Useful for detecting outdated software or bots using fake User Agents." },
+          { label: "DHCP Fingerprints", description: "DHCP request patterns that identify device type and OS — useful for classifying devices that do not expose hostnames or User-Agent strings." },
+        ],
+      },
+      {
+        heading: "Tab: Specific Protocols",
+        items: [
+          { label: "SSH Versions", description: "SSH client and server software versions identified from the banner exchange (e.g., 'OpenSSH_8.9', 'PuTTY_Release_0.77'). Outdated SSH versions with known vulnerabilities should be patched immediately." },
+          { label: "BitTorrent Info-Hashes", description: "SHA1 unique identifiers for each active torrent on the network. Info-hashes can be looked up on public torrent sites to identify what content is being downloaded or shared — a policy violation in most corporate environments." },
+        ],
+      },
+      {
+        heading: "Using DPI Metadata for Security",
+        items: [
+          { label: "Detect Outdated Software", description: "Check HTTP User Agents to find browsers or applications with old versions containing known security vulnerabilities (CVEs). Examples: Internet Explorer, or Chrome versions more than 2 years old." },
+          { label: "Identify Unauthorized BYOD Devices", description: "Combine OS fingerprints with MAC OUI lookups to detect personal devices (smartphones, laptops) that are not authorized to connect to the corporate network." },
+          { label: "Detect BitTorrent Activity", description: "The presence of BitTorrent Info-Hashes in a corporate network is a policy violation. Record the info-hash and use it to identify the responsible device and user." },
+          { label: "Audit SSH Server Versions", description: "Verify that all SSH server versions are current and secure (OpenSSH 8.x+). Outdated SSH versions are vulnerable to man-in-the-middle attacks." },
+        ],
+      },
+    ],
+  },
+  {
+    id: "geography",
+    title: "Geo Traffic",
+    url: "/geography",
+    icon: "🗺️",
+    summary: "Bandwidth analysis and traffic distribution by destination country worldwide.",
+    sections: [
+      {
+        heading: "IP Geographic Resolution",
+        content: "The system resolves destination IP addresses to geographic locations using the MaxMind GeoLite2 database. Resolution accuracy: very high for country (>99%), good for city (>80%). IPs belonging to CDNs (e.g., Cloudflare, Akamai) may resolve to their Point of Presence (PoP) location rather than the actual origin server.",
+      },
+      {
+        heading: "Table: Traffic by Country",
+        columns: [
+          { column: "Country", description: "Destination country name with national flag for quick visual identification." },
+          { column: "Download", description: "Total data volume received from servers in this country. Large volumes to CDN countries (USA, Singapore, Netherlands) are entirely normal." },
+          { column: "Upload", description: "Total data sent to servers in this country. Large upload volumes to countries unrelated to your business operations should be investigated." },
+          { column: "Flows", description: "Number of connection sessions directed to servers in this country. A high flow count to a single unfamiliar foreign country indicates intensive communication that warrants review." },
+        ],
+      },
+      {
+        heading: "Normal Traffic Destinations",
+        items: [
+          { label: "USA, Singapore, Netherlands, Japan", description: "Host the major global CDN infrastructure (Cloudflare, AWS, Google, Fastly, Akamai). Traffic to these destinations is typically the result of normal internet usage." },
+          { label: "Indonesia", description: "Traffic to local Indonesian servers (ASN Telkom, Biznet, IDC data centers) for local services and CDN edge nodes." },
+        ],
+      },
+      {
+        heading: "Suspicious Traffic Patterns",
+        items: [
+          { label: "Russia or China (without business context)", description: "If there is no established business relationship with entities in these countries, traffic to them — especially upload — should be investigated as potential C2 communication or data exfiltration." },
+          { label: "Large upload to unknown countries", description: "High upload volume to countries irrelevant to business operations is a classic indicator of data exfiltration. Cross-check immediately with the Threat Intelligence page." },
+          { label: "Traffic changes with time filter", description: "Geographic traffic fluctuates based on user activity. Compare daily vs. weekly patterns to distinguish a consistent anomaly from an incidental spike." },
+        ],
+      },
+    ],
+  },
+];
diff --git a/src/lib/help/guides/traffic.ts b/src/lib/help/guides/traffic.ts
new file mode 100644
index 0000000..b9c985b
--- /dev/null
+++ b/src/lib/help/guides/traffic.ts
@@ -0,0 +1,195 @@
+import { PageGuide } from "../types";
+
+export const TRAFFIC_CORE_GUIDES: PageGuide[] = [
+  {
+    id: "flows",
+    title: "Flows",
+    url: "/flows",
+    icon: "🔀",
+    summary: "Real-time log of all network connection sessions detected by the DPI probe.",
+    sections: [
+      {
+        heading: "What is a Flow?",
+        content: "A 'flow' is a single network connection session between two endpoints (source IP:port ↔ destination IP:port) over a specific protocol. Each time a device on your network opens a new connection (e.g., a browser opening a YouTube tab), the system records a new flow with complete metadata. Flows that remain active are continuously updated with real-time bandwidth volumes.",
+      },
+      {
+        heading: "Filter & Search",
+        content: "The search bar enables instant search by Source IP, Destination IP, protocol, or domain/application name. Queries are processed against a MongoDB index optimized to scan up to 1,000,000 records.",
+        items: [
+          { label: "Subnet filter", description: "Type '192.168.' to filter all connections from local devices in that subnet." },
+          { label: "Port filter", description: "Type '443' to view all HTTPS connections, or '22' to view all SSH sessions." },
+          { label: "Domain filter", description: "Type a partial domain name (e.g., 'google') to match all Google-related connections." },
+        ],
+      },
+      {
+        heading: "Server-Side Pagination",
+        content: "The Flows table uses server-side pagination with a fixed page size of 50 rows per page. The index (#) is continuous across pages — page 1 shows rows 1–50, page 2 shows 51–100, and so on. This allows precise position tracking even when the dataset reaches millions of records.",
+      },
+      {
+        heading: "Table: Active Flows",
+        columns: [
+          { column: "#", description: "Sequential row number, continuous across all pages. Used as an absolute position reference in the paginated dataset." },
+          { column: "Last Seen", description: "Timestamp of the last packet received in this session, in Indonesia timezone (WIB). Click the header to sort newest or oldest first." },
+          { column: "Flow ID", description: "A unique cryptographic hash generated by the DPI probe to identify this specific socket session. Used for log correlation across systems." },
+          { column: "Src IP", description: "IP address of the local device that initiated the connection. Hover to see the resolved hostname or device label in a tooltip. Click to open the device details panel." },
+          { column: "Dst IP", description: "Destination IP address — typically an external server. Hover to see reverse DNS or CDN hostname. IPs in RFC 1918 ranges (10.x, 172.16.x, 192.168.x) indicate internal LAN connections." },
+          { column: "Dst Port", description: "Destination port number. Hover to see the standard service name: 80 = HTTP, 443 = HTTPS, 53 = DNS, 22 = SSH, 25 = SMTP, 3389 = RDP Remote Desktop, 3306 = MySQL. Non-standard ports above 1024 should be examined." },
+          { column: "Protocol", description: "Transport layer protocol: TCP (reliable, handshake-based), UDP (fast, connectionless), QUIC (modern UDP-based for HTTP/3), ICMP (ping and error messages). Excessive UDP may indicate unauthorized streaming or gaming." },
+          { column: "App / Domain", description: "Application name or destination domain identified via SNI analysis from the TLS handshake. Long values are truncated — hover to see the full domain in a tooltip." },
+          { column: "Download / Upload", description: "Data received (Download) and sent (Upload) in this connection. Hover to see the exact byte count (e.g., '12.10 MB (12,687,211 bytes)'). Connections with very large upload volumes should be investigated as potential data exfiltration." },
+        ],
+      },
+      {
+        heading: "Exporting Flow Data",
+        content: "Click the 'Export ▾' button at the top-right of the table to open the format selection dropdown. Always apply filters first — both formats export only the currently filtered records.",
+        items: [
+          { label: "Export CSV", description: "Downloads all displayed flow data as a .csv file, compatible with Excel, Google Sheets, or SIEM platforms. Best for in-depth analysis or reporting." },
+          { label: "Export PDF", description: "Generates a formatted flow summary report as a .pdf with a professional layout suitable for audits or management presentations." },
+          { label: "Tip: Filter before exporting", description: "Always apply relevant filters first to avoid excessively large files. Filter by a specific IP or time range before downloading." },
+        ],
+      },
+    ],
+  },
+  {
+    id: "apps",
+    title: "Applications",
+    url: "/apps",
+    icon: "📦",
+    summary: "Identified applications ranked by total bandwidth consumption.",
+    sections: [
+      {
+        heading: "How DPI Identifies Applications",
+        content: "Deep Packet Inspection analyzes packet content — not just port numbers — to accurately identify applications. The identification pipeline works as follows:",
+        steps: [
+          "SNI (Server Name Indication) from TLS handshake — e.g., 'googlevideo.com' is mapped to YouTube.",
+          "HTTP Host header analysis — identifies the domain being accessed.",
+          "Payload pattern matching against 2,500+ application signatures in the database.",
+          "Behavioral fingerprinting — packet size patterns and timing analysis.",
+        ],
+      },
+      {
+        heading: "Table: Top Applications",
+        columns: [
+          { column: "Application", description: "Application name as identified by the DPI engine. Click any row to open a detail drawer showing: which devices are using it, which agents detected it, total flow count, and bandwidth breakdown per device." },
+          { column: "Download", description: "Total incoming bandwidth consumed by this application. Streaming video applications (YouTube, Netflix) typically dominate this column." },
+          { column: "Upload", description: "Total outgoing bandwidth sent to this application's servers. High upload for non-backup/non-cloud applications warrants investigation." },
+          { column: "Total Bandwidth", description: "Combined Download + Upload. Used as the primary ranking metric for the table." },
+          { column: "Devices", description: "Number of unique devices (local IP addresses) using this application. A high count indicates widespread use across the organization." },
+          { column: "Flows", description: "Total connection sessions associated with this application. Very high Flows with low Bandwidth may indicate repeated polling requests or a C2 beacon pattern." },
+        ],
+      },
+      {
+        heading: "Application Detail Drawer",
+        content: "Click any application row to open the side drawer. It contains three sections:",
+        items: [
+          { label: "Devices tab", description: "Table of devices using this application with their IP, MAC address, and individual bandwidth consumption." },
+          { label: "Agents tab", description: "Which DPI probe agents detected traffic for this application." },
+          { label: "Domains tab", description: "Top domains accessed in the context of this application." },
+        ],
+      },
+      {
+        heading: "Investigating Unknown Applications",
+        items: [
+          { label: "Unclassified Traffic", description: "Applications not matched to any known signature are labeled 'Unclassified'. This may mean a custom or proprietary application, non-standard encryption, or suspicious traffic. Check the Dst IP and Dst Port on the Flows page for further investigation." },
+          { label: "Cross-check with Threat Intelligence", description: "If you find an unknown application with high bandwidth, open Threat Intelligence to check whether any related threat detections exist." },
+          { label: "Look it up in the Lookup page", description: "Use the Application Lookup page to search for the name and understand its function and risk profile before taking action." },
+        ],
+      },
+    ],
+  },
+  {
+    id: "devices",
+    title: "Devices",
+    url: "/devices",
+    icon: "💻",
+    summary: "Inventory of all local devices detected as active on the network.",
+    sections: [
+      {
+        heading: "How Devices Are Discovered",
+        content: "Devices are discovered passively (without sending probe packets) through three mechanisms:",
+        steps: [
+          "Traffic monitoring — every communicating device is detected by its MAC address and IP when it sends or receives any packet.",
+          "ARP (Address Resolution Protocol) — MAC address resolution from IP addresses on the local network.",
+          "DHCP fingerprinting — analysis of DHCP packets when a device requests an IP address from the DHCP server.",
+        ],
+      },
+      {
+        heading: "Table: Device Inventory",
+        columns: [
+          { column: "IP Address", description: "The IPv4/IPv6 address assigned to the device. Click to open the full Device Detail Modal containing communication history, applications used, domains accessed, and flow logs." },
+          { column: "MAC Address", description: "The unique hardware address of the device's network interface card. The first three octets identify the vendor (OUI) — e.g., A4:C3:F0 = Apple, B4:FB:E4 = Intel. Click to open device details." },
+          { column: "Hostname", description: "The device hostname resolved from local DNS or DHCP requests. Displays 'Unknown' if unavailable. Examples: 'LAPTOP-JOHN', 'iPhone-Sarah', 'PRINTER-FLOOR3'." },
+          { column: "Agent", description: "The specific DPI probe that detected and monitored this device. If a device moves to a different network segment, the detecting agent may change." },
+          { column: "Last Seen", description: "The last time this device sent or received a packet. Devices not seen for more than 7 days are likely inactive or have moved to a different network." },
+          { column: "Download / Upload", description: "Total bandwidth consumed by this device within the active time filter. Devices with upload significantly exceeding download should be investigated." },
+        ],
+      },
+      {
+        heading: "Device Detail Modal — Tabs",
+        items: [
+          { label: "Overview", description: "Device identity summary (MAC, IP, hostname, OS type), total bandwidth statistics, and last-seen status." },
+          { label: "Applications", description: "List of applications used by this device with bandwidth per application — answers 'what is this device doing?'." },
+          { label: "Flows", description: "Active connection log for this device with real-time filtering by port, protocol, or domain." },
+          { label: "Domains", description: "Domains most frequently accessed by this device, with access frequency and per-domain bandwidth." },
+          { label: "Protocols", description: "Transport layer protocol distribution (TCP/UDP/QUIC/ICMP) for this specific device." },
+          { label: "Remote IPs", description: "External servers most frequently communicated with by this device and their bandwidth volumes." },
+          { label: "Threats", description: "Security threats associated with this device, cross-referenced from the Threat Intelligence database." },
+        ],
+      },
+      {
+        heading: "Export Device Report (PDF)",
+        content: "Inside the Device Detail Modal, an 'Export PDF' button generates a comprehensive per-device report in .pdf format. The report includes device identity, top applications, bandwidth summary, and most frequently accessed domains. Ideal for device audit reports or per-device incident investigations.",
+      },
+    ],
+  },
+  {
+    id: "dns",
+    title: "DNS Queries",
+    url: "/dns",
+    icon: "🌐",
+    summary: "Log of all domain name resolution queries made by devices on the network.",
+    sections: [
+      {
+        heading: "Why DNS Monitoring Matters",
+        content: "DNS (Domain Name System) is the 'phone book of the internet'. Every connection to a website or server begins with a DNS query. Monitoring DNS provides critical security visibility because:",
+        steps: [
+          "Most malware and botnets use domain resolution to locate C2 (Command & Control) servers — DNS reveals this before the actual connection.",
+          "DNS queries occur before the actual connection is made — allowing earlier detection of threats.",
+          "DNS tunneling is used by attackers to exfiltrate data hidden inside DNS packets, bypassing traditional firewalls.",
+          "Unusual query patterns (high volume, random-looking domains) can indicate active malware on a device.",
+        ],
+      },
+      {
+        heading: "DNS Record Types",
+        items: [
+          { label: "A Record", description: "Resolves a domain to an IPv4 address (e.g., 'google.com' → '142.250.185.46'). The most common type — majority of web connections start with an A record query." },
+          { label: "AAAA Record", description: "Resolves a domain to an IPv6 address. Increasingly common as IPv6 adoption grows. Unusual AAAA queries to unfamiliar foreign domains should be noted." },
+          { label: "CNAME Record", description: "Canonical Name — an alias from one domain to another (e.g., 'www.example.com' → 'example.com'). Commonly used by CDNs for load balancing." },
+          { label: "MX Record", description: "Mail Exchanger — locates the mail server for a domain. MX queries to unknown domains may indicate spam or phishing activity." },
+          { label: "TXT Record", description: "Arbitrary text record used for domain verification and SPF/DKIM email security. DNS tunneling frequently abuses TXT records to hide exfiltrated data." },
+          { label: "PTR Record", description: "Reverse DNS lookup — resolves an IP address back to a hostname. Used for logging and mail server verification." },
+        ],
+      },
+      {
+        heading: "Table: DNS Queries",
+        columns: [
+          { column: "Domain", description: "The domain queried by the local device. Truncated — hover to see the full domain. Domains with random-looking characters (e.g., 'a1b2c3d4.malware.ru') are characteristic of DGA malware." },
+          { column: "Query Type", description: "The type of DNS record requested: A, AAAA, CNAME, MX, TXT, PTR, etc." },
+          { column: "Client IP", description: "The IP of the local device making the query. Click to open that device's full detail panel." },
+          { column: "Response", description: "The IP address or data returned by the DNS server as the query answer." },
+          { column: "Count", description: "Total number of times this domain was queried within the active time filter. Very high frequency to a single domain may indicate automatic polling (malware heartbeat or a misbehaving application)." },
+          { column: "Last Seen", description: "The most recent timestamp when this DNS query occurred. Helps determine whether the activity is still ongoing." },
+        ],
+      },
+      {
+        heading: "Warning Signs in DNS Traffic",
+        items: [
+          { label: "Random-looking domain names", description: "Domains like 'xk2mf9qa.dyndns.com' are characteristic of DGA (Domain Generation Algorithm) malware, which generates new domains daily to evade blacklists." },
+          { label: "High-volume queries to .ru, .tk, .pw, .xyz", description: "These TLDs are frequently abused for C2 servers. Cross-check with Threat Intelligence to confirm whether the traffic is malicious." },
+          { label: "Very high query frequency to a single domain", description: "Malware heartbeat processes typically send DNS queries every few seconds. Sort by Count (descending) to quickly detect this behavior." },
+          { label: "PTR queries to unknown external IPs", description: "Reverse DNS lookups to unrecognized external IPs may indicate a reconnaissance tool is actively running on a device in your network." },
+        ],
+      },
+    ],
+  },
+];
diff --git a/src/lib/help/types.ts b/src/lib/help/types.ts
new file mode 100644
index 0000000..3b21c7a
--- /dev/null
+++ b/src/lib/help/types.ts
@@ -0,0 +1,24 @@
+export interface FAQItem {
+  question: string;
+  answer: string;
+}
+
+export interface TableColumn {
+  column: string;
+  description: string;
+}
+
+export interface PageGuide {
+  id: string;
+  title: string;
+  url: string;
+  icon: string;
+  summary: string;
+  sections: {
+    heading: string;
+    content?: string;
+    steps?: string[];
+    columns?: TableColumn[];
+    items?: { label: string; description: string }[];
+  }[];
+}
diff --git a/src/lib/helpContent.ts b/src/lib/helpContent.ts
index e86bc00..bd16616 100644
--- a/src/lib/helpContent.ts
+++ b/src/lib/helpContent.ts
@@ -4,435 +4,21 @@
 // Used by both HelpCenterFAB (quick FAQs) and the /help page (full guide).
 // ─────────────────────────────────────────────────────────────────────────────
 
-export interface FAQItem {
-  question: string;
-  answer: string;
-}
+import { FAQItem, TableColumn, PageGuide } from "./help/types";
+import { FAQS } from "./help/faqs";
+import { UI_CONVENTIONS } from "./help/conventions";
+import { INFRASTRUCTURE_GUIDES } from "./help/guides/infrastructure";
+import { TRAFFIC_CORE_GUIDES } from "./help/guides/traffic";
+import { TRAFFIC_ANALYTICS_GUIDES } from "./help/guides/traffic-analytics";
+import { SECURITY_GUIDES } from "./help/guides/security";
 
-export interface TableColumn {
-  column: string;
-  description: string;
-}
+export type { FAQItem, TableColumn, PageGuide };
+export { FAQS, UI_CONVENTIONS };
 
-export interface PageGuide {
-  id: string;
-  title: string;
-  url: string;
-  icon: string;
-  summary: string;
-  sections: {
-    heading: string;
-    content?: string;
-    columns?: TableColumn[];
-    items?: { label: string; description: string }[];
-  }[];
-}
-
-// ── FAQ (used in HelpCenterFAB quick panel) ──────────────────────────────────
-export const FAQS: FAQItem[] = [
-  {
-    question: "Why is the Threats data empty (0)?",
-    answer:
-      "If the Threats indicator shows 0, it means your network is secure within the selected time range. The system did not detect any data packets matching known attack profiles.",
-  },
-  {
-    question: "What is the difference between Events and Threats?",
-    answer:
-      "Events are all standard connection activity logs recorded on the network (including secure ones). Threats are a subset of specific Events that have been filtered and classified as malicious activity by the Deep Packet Inspection (DPI) engine.",
-  },
-  {
-    question: "How do I read the Geo Traffic Heatmap?",
-    answer:
-      "Light blue indicates low traffic, while deep/dark blue indicates a very high traffic volume (download/upload) to or from that country.",
-  },
-  {
-    question: "What do the Online/Offline indicators mean for agents?",
-    answer:
-      "An agent is marked Online if it has successfully transmitted data within the last 12 hours. An Offline agent means no data packets have been received beyond that threshold.",
-  },
-  {
-    question: "Why is Download larger than Upload?",
-    answer:
-      "This is normal behavior. Network users generally download (streaming, web browsing) significantly more than they upload. If Upload is larger, it could indicate data exfiltration and should be investigated.",
-  },
-  {
-    question: "How is threat severity (Critical, High, Medium, Low) determined?",
-    answer:
-      "Severity is determined based on standard threat signatures. For example, botnet Command and Control (C2) or malware connections are classified as Critical or High, while protocol policy violations (like using plaintext HTTP or Telnet) are classified as Medium or Low.",
-  },
-  {
-    question: "Why do some devices show \"Unknown\" for operating system or hostname?",
-    answer:
-      "Hostnames are resolved via local DNS queries, and operating systems are identified passively using HTTP User-Agent and DHCP Fingerprints. If a device has not sent standard HTTP traffic or has recently connected without requesting a new IP, the system will display 'Unknown'.",
-  },
-  {
-    question: "How does the \"View As Agent\" mode affect the dashboard data?",
-    answer:
-      "When 'View As Agent' mode is enabled, the entire data scope on the dashboard is locked to that specific agent. You will only see active devices, DNS logs, traffic flows, and threats detected specifically by that agent, rather than the aggregate data of the entire site.",
-  },
-  {
-    question: "What should I do if the Encryption Audit flags a connection as \"High Risk\"?",
-    answer:
-      "A 'High Risk' status is typically triggered by the use of legacy encryption versions such as TLS 1.0 or TLS 1.1, which are vulnerable to eavesdropping. It is recommended to update the destination server configuration or client systems to use at least TLS 1.2 or TLS 1.3.",
-  },
-  {
-    question: "Why does the dashboard only display data up to the last 7 days?",
-    answer:
-      "According to the Deep Package Inspection data retention policy to maintain database capacity and query performance, network telemetry data older than 7 days is automatically deleted on a regular basis.",
-  },
-];
-
-// ── Full Page Guides (used in /help page) ────────────────────────────────────
 export const PAGE_GUIDES: PageGuide[] = [
-  {
-    id: "overview",
-    title: "Overview",
-    url: "/",
-    icon: "🏠",
-    summary: "Overall network condition summary in a single view.",
-    sections: [
-      {
-        heading: "KPI Cards (Header)",
-        columns: [
-          { column: "Total Flows", description: "Number of network connection sessions monitored within the active time range." },
-          { column: "Total Download", description: "Accumulated data received by all devices on the active site." },
-          { column: "Total Upload", description: "Accumulated data sent out from the active site." },
-          { column: "Active Devices", description: "Number of unique devices detected active within the active time range." },
-        ],
-      },
-      {
-        heading: "Globe Map",
-        content:
-          "Interactive global map. Glowing lines represent the flow of traffic from your site to the destination country. Line colors indicate traffic intensity. Hover over a line to see the country name and data volume. Click and drag to rotate the globe.",
-      },
-      {
-        heading: "Top Applications & Top Protocols",
-        content:
-          "Widgets below the globe display the top 7 applications and protocols with the highest traffic volume. The horizontal bars represent relative volume comparisons between entries.",
-      },
-    ],
-  },
-  {
-    id: "agents",
-    title: "Agents Inventory",
-    url: "/agents",
-    icon: "📡",
-    summary: "List and status of all Network Agents registered at your site.",
-    sections: [
-      {
-        heading: "Statistic Cards",
-        columns: [
-          { column: "Total Agents", description: "Total number of Network Agents registered on the active site." },
-          { column: "Online Agents", description: "Agents that successfully sent data within the last 12 hours." },
-          { column: "Offline Agents", description: "Agents not detected active." },
-          { column: "Avg. Historical Uptime", description: "Average uptime percentage of all agents over the 7 days of stored data." },
-        ],
-      },
-      {
-        heading: "Agent Location & Topology Map",
-        content:
-          "Interactive map of Indonesia. Green dots represent Online agents, red dots represent Offline agents. Blue lines show detected traffic flows between agents. Hover over a dot to view agent details. Hover over a line to view flow details (source agent, destination agent, data volume). The blue panel below the map shows agents lacking GPS coordinates — click the agent chip to manually add coordinates.",
-      },
-      {
-        heading: "Table: Provisioned Network Agents",
-        columns: [
-          { column: "UUID / Serial", description: "Unique identifier of the hardware agent device." },
-          { column: "Label", description: "Location name or description provided for this agent." },
-          { column: "Provisioned", description: "Whether the agent has been activated and registered in the system." },
-          { column: "Activated", description: "Whether the agent has connected and ever transmitted data." },
-          { column: "Status", description: "Online (green) or Offline (red) along with the last seen timestamp." },
-          { column: "Historical Uptime", description: "Uptime percentage during the 7 days of stored data." },
-          { column: "Data Size", description: "Total size of data collected by this agent in the system database." },
-          { column: "Actions", description: "Action buttons: Details, GPS Coordinates, Visibility, Delete." },
-        ],
-      },
-    ],
-  },
-  {
-    id: "flows",
-    title: "Flows",
-    url: "/flows",
-    icon: "🔀",
-    summary: "List of all active network connection sessions detected by the DPI.",
-    sections: [
-      {
-        heading: "Filter Bar",
-        content:
-          "Filters at the top of the table: Source IP, Destination IP, Protocol, and App / Domain. Combine multiple filters to narrow search results.",
-      },
-      {
-        heading: "Table: Active Flows",
-        columns: [
-          { column: "#", description: "Row sequence number on the current page." },
-          { column: "Last Seen", description: "Last time a packet from this session was received (Indonesia timezone)." },
-          { column: "Flow ID", description: "Unique identifier of the connection session created by the DPI." },
-          { column: "Src IP", description: "Source IP address — the device or server initiating the connection." },
-          { column: "Dst IP", description: "Destination IP address. Hover to see the device name if known." },
-          { column: "Dst Port", description: "Destination port. Hover to view the service name (443=HTTPS, 53=DNS, etc.)." },
-          { column: "Protocol", description: "Network protocol used in this session (TCP, UDP, QUIC, etc.)." },
-          { column: "App / Domain", description: "Application or domain name identified by the DPI engine." },
-          { column: "Download", description: "Volume of data received from destination to source (in KB/MB)." },
-          { column: "Upload", description: "Volume of data sent from source to destination." },
-        ],
-      },
-    ],
-  },
-  {
-    id: "apps",
-    title: "Apps",
-    url: "/apps",
-    icon: "📦",
-    summary: "List of all applications identified by the DPI along with their traffic volume.",
-    sections: [
-      {
-        heading: "Table: Top Applications",
-        columns: [
-          { column: "Application", description: "Name of the identified application (YouTube, Zoom, WhatsApp, etc.)." },
-          { column: "Download", description: "Total data downloaded through this application within the active time range." },
-          { column: "Upload", description: "Total data uploaded through this application." },
-          { column: "Total Traffic", description: "Combined download + upload for this application." },
-          { column: "Devices", description: "Number of unique devices using this application." },
-          { column: "Flows", description: "Number of active connection sessions for this application." },
-        ],
-      },
-    ],
-  },
-  {
-    id: "devices",
-    title: "Devices",
-    url: "/devices",
-    icon: "💻",
-    summary: "Inventory of all devices detected active on the network.",
-    sections: [
-      {
-        heading: "Table: Device Inventory",
-        columns: [
-          { column: "IP Address", description: "IP address of the device on the local network." },
-          { column: "MAC Address", description: "Physical identity of the device's network card (hardware address)." },
-          { column: "Hostname", description: "Device name if available from the local DNS resolver." },
-          { column: "Agent", description: "Network Agent detecting and monitoring this device." },
-          { column: "Last Seen", description: "When the device was last active sending or receiving traffic." },
-          { column: "Download / Upload", description: "Total traffic volume to and from this device." },
-        ],
-      },
-    ],
-  },
-  {
-    id: "dns",
-    title: "DNS",
-    url: "/dns",
-    icon: "🌐",
-    summary: "DNS query log detected on the network.",
-    sections: [
-      {
-        heading: "Table: DNS Queries",
-        columns: [
-          { column: "Domain", description: "Domain name queried by devices on the network." },
-          { column: "Query Type", description: "Type of DNS query: A (IPv4), AAAA (IPv6), MX (mail), CNAME (alias), etc." },
-          { column: "Client IP", description: "IP address of the device making this DNS query." },
-          { column: "Response", description: "IP address returned by the DNS server as the answer." },
-          { column: "Count", description: "Frequency of queries for this domain within the active time range." },
-          { column: "Last Seen", description: "Timestamp when this domain query last occurred." },
-        ],
-      },
-    ],
-  },
-  {
-    id: "network-intelligence",
-    title: "Traffic Categories",
-    url: "/network-intelligence",
-    icon: "📊",
-    summary: "Traffic classification based on application categories from DPI analysis.",
-    sections: [
-      {
-        heading: "Main Categories",
-        content:
-          "Displays traffic distribution charts for major categories such as Streaming, Social Media, Web, Email, Cloud, File Transfer, etc., and visualizes traffic proportions using a Pie Chart.",
-      },
-      {
-        heading: "Application Categories Table",
-        columns: [
-          { column: "Category", description: "Name of the identified network application category." },
-          { column: "Download", description: "Volume of data downloaded in this category." },
-          { column: "Upload", description: "Volume of data uploaded in this category." },
-          { column: "Total Traffic", description: "Combined download and upload volume." },
-          { column: "Devices", description: "Number of unique devices using this category." },
-        ],
-      },
-    ],
-  },
-  {
-    id: "dpi-analytics",
-    title: "DPI MetaData",
-    url: "/dpi-analytics",
-    icon: "🔌",
-    summary: "Raw metadata analysis from Deep Packet Inspection (DPI) and device fingerprinting.",
-    sections: [
-      {
-        heading: "Tab: Hostnames & Servers",
-        content: "Logs external domains, server IPs, ports, and detecting agents. Helps identify device connection destinations.",
-      },
-      {
-        heading: "Tab: Client Fingerprints",
-        content: "Displays operating system fingerprint data (Discovery OS), dhcpFingerprints, and HTTP User Agent to identify active device types.",
-      },
-      {
-        heading: "Tab: Specific Protocols",
-        content: "Logs specific protocol metadata such as the SSH server version used and BitTorrent Hashes to audit torrenting.",
-      },
-      {
-        heading: "Metadata Detail Table",
-        columns: [
-          { column: "Value / OS / Domain", description: "Metadata value, domain name, User Agent, or operating system name." },
-          { column: "Details / Version", description: "Additional detailed information (such as SSH version or OS details)." },
-          { column: "Count", description: "Frequency of this metadata appearing on the network." },
-          { column: "Last Seen", description: "Last time this metadata was detected in the database." },
-        ],
-      },
-    ],
-  },
-  {
-    id: "geography",
-    title: "Geo Traffic",
-    url: "/geography",
-    icon: "🗺️",
-    summary: "Traffic distribution based on the connection's destination country.",
-    sections: [
-      {
-        heading: "Table: Traffic by Country",
-        columns: [
-          { column: "Country", description: "Connection destination country detected by the geolocation engine." },
-          { column: "Flag", description: "Country flag for visual identification." },
-          { column: "Download / Upload", description: "Traffic volume sent to or received from that country." },
-          { column: "Flows", description: "Number of active connection sessions heading to that country." },
-        ],
-      },
-    ],
-  },
-  {
-    id: "intelligence",
-    title: "Threat Intelligence",
-    url: "/intelligence",
-    icon: "🛡️",
-    summary: "Automatic detection of network security threats by the DPI system.",
-    sections: [
-      {
-        heading: "Threat Categories (Left Sidebar)",
-        items: [
-          { label: "Crypto Mining", description: "Devices detected mining cryptocurrency without authorization." },
-          { label: "Botnet Command & Control", description: "Connections to known malicious Command and Control servers." },
-          { label: "Malware", description: "Traffic matching registered malware signatures." },
-          { label: "Phishing", description: "Access to domains identified as phishing sites." },
-        ],
-      },
-      {
-        heading: "Threat Detail Table",
-        columns: [
-          { column: "Threat Level", description: "Severity level: Critical, High, Medium, or Low." },
-          { column: "Source IP", description: "IP address of the involved device on your network." },
-          { column: "Destination", description: "Destination IP or domain identified as malicious." },
-          { column: "First Seen", description: "When this threat was first detected in the database." },
-          { column: "Last Seen", description: "When this suspicious activity was last observed." },
-          { column: "Evidence", description: "Technical details forming the basis for the system classifying this as a threat." },
-        ],
-      },
-    ],
-  },
-  {
-    id: "events",
-    title: "Events",
-    url: "/events",
-    icon: "📋",
-    summary: "Log of all key events recorded by the system.",
-    sections: [
-      {
-        heading: "Table: Event Log",
-        columns: [
-          { column: "Timestamp", description: "Time the event occurred in Indonesia timezone." },
-          { column: "Severity", description: "Severity level: Info, Warning, or Critical." },
-          { column: "Agent", description: "Network Agent that detected and recorded this event." },
-          { column: "Description", description: "Brief description of the event that occurred." },
-          { column: "Details", description: "Click to open the full event details panel." },
-        ],
-      },
-    ],
-  },
-  {
-    id: "security-audit",
-    title: "Encryption Audit (TLS)",
-    url: "/security-audit",
-    icon: "🔐",
-    summary: "Security audit of TLS encryption across the monitored network.",
-    sections: [
-      {
-        heading: "Table: TLS Versions",
-        columns: [
-          { column: "Version", description: "TLS version used (TLS 1.0, 1.1, 1.2, 1.3)." },
-          { column: "Count", description: "Number of connections using this version within the active time range." },
-          { column: "Risk", description: "TLS 1.0/1.1 = High Risk. TLS 1.2 = Medium Risk. TLS 1.3 = Secure." },
-        ],
-      },
-      {
-        heading: "Table: TLS Ciphers",
-        columns: [
-          { column: "Cipher Suite", description: "Name of the encryption algorithm suite used on the TLS connection." },
-          { column: "Strength", description: "Encryption strength: Strong, Weak, or Insecure." },
-          { column: "Count", description: "Frequency of this cipher suite's usage within the active time range." },
-        ],
-      },
-    ],
-  },
-  {
-    id: "network-infrastructure",
-    title: "Topology (Infrastructure)",
-    url: "/network-infrastructure",
-    icon: "🌐",
-    summary: "Visualization and details of the physical, logical, and geographical network infrastructure topology.",
-    sections: [
-      {
-        heading: "Tab: Routing & Geography",
-        content: "View statistics for regional areas (Top Regions) and cities (Top Cities) source/destination of network traffic.",
-      },
-      {
-        heading: "Tab: Interfaces & VLANs",
-        content: "List of physical network interfaces (Interfaces) and VLAN tags (VLAN Tags) actively transmitting data.",
-      },
-      {
-        heading: "Tab: IP & MAC",
-        content: "List of most active remote IP addresses, IP protocol version statistics (IPv4 vs IPv6), and bandwidth usage by local MAC Address.",
-      },
-      {
-        heading: "Tab: Flow Profiles",
-        content: "Logs data flow characteristics based on flow type (Flow Types) and flow source (Flow Origins) such as Local, Inbound, Outbound.",
-      },
-    ],
-  },
-  {
-    id: "lookup",
-    title: "Application Database (Lookup)",
-    url: "/lookup",
-    icon: "🔍",
-    summary: "Global reference catalog database of applications recognizable by the DPI system.",
-    sections: [
-      {
-        heading: "Catalog & Search",
-        content: "Use the search bar at the top to find specific applications by name, or use the category dropdown filter to filter the list of applications.",
-      },
-      {
-        heading: "Application Detail (Modal)",
-        content: "Click on an application card to open a detailed information modal detailing the application's description, security risk level (Risk Level), default port (Default Port), and transport protocol used.",
-      },
-    ],
-  },
+  ...INFRASTRUCTURE_GUIDES,
+  ...TRAFFIC_CORE_GUIDES,
+  ...TRAFFIC_ANALYTICS_GUIDES,
+  ...SECURITY_GUIDES,
 ];
 
-// ── Global UI Conventions ─────────────────────────────────────────────────────
-export const UI_CONVENTIONS = [
-  { symbol: "● (green)", meaning: "Active / Online status / Secure condition" },
-  { symbol: "● (red)", meaning: "Inactive / Offline status / At risk" },
-  { symbol: "● (yellow/amber)", meaning: "Requires attention / Warning" },
-  { symbol: "Truncated text (...)", meaning: "Hover over the text to view full value" },
-  { symbol: "KB / MB / GB", meaning: "Data size units (1 MB = 1,000 KB)" },
-  { symbol: "Time format WIB/WITA/WIT", meaning: "All timestamps displayed in Indonesia local time zone" },
-  { symbol: "Pagination < 1/N >", meaning: "Page navigation — each page displays up to 50 rows of data" },
-];
diff --git a/test/check-backend-model.js b/test/check-backend-model.js
new file mode 100644
index 0000000..d26fab7
--- /dev/null
+++ b/test/check-backend-model.js
@@ -0,0 +1,15 @@
+const mongoose = require('mongoose');
+const { LookupApp } = require('../backend/models/Schemas');
+
+async function main() {
+  const uri = 'mongodb://127.0.0.1:27017/backone_dpi';
+  await mongoose.connect(uri);
+  console.log('Connected to:', mongoose.connection.name);
+  
+  const count = await LookupApp.countDocuments({});
+  console.log('LookupApp model count in backend schema:', count);
+  
+  await mongoose.disconnect();
+}
+
+main().catch(console.error);
diff --git a/test/check-connection-details.js b/test/check-connection-details.js
new file mode 100644
index 0000000..cca86cc
--- /dev/null
+++ b/test/check-connection-details.js
@@ -0,0 +1,19 @@
+const proxyMongoose = require('../proxy/node_modules/mongoose');
+require('dotenv').config({ path: './.env.local' });
+
+async function main() {
+  const uri = process.env.MONGODB_URI || 'mongodb://127.0.0.1:27017/backone_dpi';
+  await proxyMongoose.connect(uri);
+  console.log('--- CONNECTION DETAILS ---');
+  console.log('Host:', proxyMongoose.connection.host);
+  console.log('Port:', proxyMongoose.connection.port);
+  console.log('DB Name:', proxyMongoose.connection.name);
+  console.log('URI used:', uri);
+  
+  const collections = await proxyMongoose.connection.db.listCollections().toArray();
+  console.log('Collections list:', collections.map(c => c.name));
+  
+  await proxyMongoose.disconnect();
+}
+
+main().catch(console.error);
diff --git a/test/check-fonts-dir.js b/test/check-fonts-dir.js
new file mode 100644
index 0000000..b225394
--- /dev/null
+++ b/test/check-fonts-dir.js
@@ -0,0 +1,33 @@
+module.paths.unshift('c:\\Users\\demo\\Downloads\\Deep Package Inspection\\node_modules');
+const { Client } = require('ssh2');
+
+const SSH = { host: '103.185.47.52', port: 2222, username: 'adminbackend', password: 'htEo7x6LsBQiEHHH', readyTimeout: 60000 };
+
+async function main() {
+  const conn = new Client();
+  await new Promise((resolve, reject) => {
+    conn.on('ready', resolve).on('error', reject).connect(SSH);
+  });
+  console.log('SSH connected.');
+
+  const runCmd = (cmd) => {
+    return new Promise((resolve) => {
+      conn.exec(cmd, (err, stream) => {
+        if (err) { resolve(`Err: ${err.message}`); return; }
+        let out = '';
+        stream.on('data', d => out += d);
+        stream.on('close', () => resolve(out.trim()));
+      });
+    });
+  };
+
+  const lsFonts = await runCmd('ls -la /home/adminbackend/web/demoplace.my.id/public_html/.next/standalone/public/fonts || echo "No fonts folder"');
+  console.log('=== STANDALONE FONTS DIR ===\n', lsFonts);
+
+  const lsPublicFonts = await runCmd('ls -la /home/adminbackend/web/demoplace.my.id/public_html/public/fonts || echo "No public fonts folder"');
+  console.log('=== SOURCE PUBLIC FONTS DIR ===\n', lsPublicFonts);
+
+  conn.end();
+}
+
+main().catch(console.error);
diff --git a/test/check-local-lookupapps.js b/test/check-local-lookupapps.js
new file mode 100644
index 0000000..4615eaa
--- /dev/null
+++ b/test/check-local-lookupapps.js
@@ -0,0 +1,20 @@
+require('dotenv').config({ path: './.env.local' });
+const mongoose = require('mongoose');
+const { LookupApp } = require('../proxy/models/Schemas');
+
+async function main() {
+  const uri = process.env.MONGODB_URI || 'mongodb://127.0.0.1:27017/backone_dpi';
+  console.log('Using URI from env:', uri);
+  await mongoose.connect(uri);
+  console.log('Connected to:', mongoose.connection.name, 'on host:', mongoose.connection.host);
+  
+  const count = await LookupApp.countDocuments({});
+  console.log('LookupApp model count:', count);
+  
+  const rawCount = await mongoose.connection.db.collection('lookupapps').countDocuments({});
+  console.log('Raw collection count:', rawCount);
+  
+  await mongoose.disconnect();
+}
+
+main().catch(console.error);
diff --git a/test/check-pm2-frontend.js b/test/check-pm2-frontend.js
new file mode 100644
index 0000000..b5dd92f
--- /dev/null
+++ b/test/check-pm2-frontend.js
@@ -0,0 +1,22 @@
+const { Client } = require('ssh2');
+
+const SSH = {
+  host: '103.185.47.52',
+  port: 2222,
+  username: 'adminbackend',
+  password: 'htEo7x6LsBQiEHHH',
+  readyTimeout: 60000
+};
+
+const conn = new Client();
+conn.on('ready', () => {
+  conn.exec("/home/adminbackend/.npm-global/bin/pm2 show backone-frontend", (err, stream) => {
+    let out = '';
+    stream.on('data', d => out += d);
+    stream.on('close', () => {
+      console.log('--- PM2 SHOW FRONTEND ---');
+      console.log(out);
+      conn.end();
+    });
+  });
+}).connect(SSH);
diff --git a/test/check-pm2.js b/test/check-pm2.js
new file mode 100644
index 0000000..94d56e1
--- /dev/null
+++ b/test/check-pm2.js
@@ -0,0 +1,22 @@
+const { Client } = require('ssh2');
+
+const SSH = {
+  host: '103.185.47.52',
+  port: 2222,
+  username: 'adminbackend',
+  password: 'htEo7x6LsBQiEHHH',
+  readyTimeout: 60000
+};
+
+const conn = new Client();
+conn.on('ready', () => {
+  conn.exec("/home/adminbackend/.npm-global/bin/pm2 status; ps -ef | grep node", (err, stream) => {
+    let out = '';
+    stream.on('data', d => out += d);
+    stream.on('close', () => {
+      console.log('--- PM2 & PROCESSES ---');
+      console.log(out);
+      conn.end();
+    });
+  });
+}).connect(SSH);
diff --git a/test/check-remote-env-ports.js b/test/check-remote-env-ports.js
new file mode 100644
index 0000000..97470f6
--- /dev/null
+++ b/test/check-remote-env-ports.js
@@ -0,0 +1,23 @@
+const { Client } = require('ssh2');
+
+const SSH = {
+  host: '103.185.47.52',
+  port: 2222,
+  username: 'adminbackend',
+  password: 'htEo7x6LsBQiEHHH',
+  readyTimeout: 60000
+};
+
+const conn = new Client();
+conn.on('ready', () => {
+  console.log('Querying remote Nginx config and PM2 details...');
+  conn.exec("cat /etc/nginx/conf.d/*.conf /etc/nginx/sites-enabled/* /etc/nginx/nginx.conf 2>/dev/null | grep -i -A 10 -B 2 'demoplace.my.id'; /home/adminbackend/.npm-global/bin/pm2 env 2", (err, stream) => {
+    let out = '';
+    stream.on('data', d => out += d);
+    stream.on('close', () => {
+      console.log('--- REMOTE NGINX & PM2 ENV ---');
+      console.log(out);
+      conn.end();
+    });
+  });
+}).connect(SSH);
diff --git a/test/check-remote-error.js b/test/check-remote-error.js
new file mode 100644
index 0000000..70707ab
--- /dev/null
+++ b/test/check-remote-error.js
@@ -0,0 +1,23 @@
+const { Client } = require('ssh2');
+
+const SSH = {
+  host: '103.185.47.52',
+  port: 2222,
+  username: 'adminbackend',
+  password: 'htEo7x6LsBQiEHHH',
+  readyTimeout: 60000
+};
+
+const conn = new Client();
+conn.on('ready', () => {
+  console.log('Checking PM2 status and errors...');
+  conn.exec("/home/adminbackend/.npm-global/bin/pm2 list; tail -n 50 /home/adminbackend/web/demoplace.my.id/public_html/logs/frontend-error.log", (err, stream) => {
+    let out = '';
+    stream.on('data', d => out += d);
+    stream.on('close', () => {
+      console.log('--- PM2 STATUS & FRONTEND ERRORS ---');
+      console.log(out);
+      conn.end();
+    });
+  });
+}).connect(SSH);
diff --git a/test/check-remote-lookup-count.js b/test/check-remote-lookup-count.js
new file mode 100644
index 0000000..60ea0c1
--- /dev/null
+++ b/test/check-remote-lookup-count.js
@@ -0,0 +1,33 @@
+module.paths.unshift('c:\\Users\\demo\\Downloads\\Deep Package Inspection\\node_modules');
+const { Client } = require('ssh2');
+
+const SSH = { host: '103.185.47.52', port: 2222, username: 'adminbackend', password: 'htEo7x6LsBQiEHHH', readyTimeout: 60000 };
+
+async function main() {
+  const conn = new Client();
+  await new Promise((resolve, reject) => {
+    conn.on('ready', resolve).on('error', reject).connect(SSH);
+  });
+  console.log('SSH connected.');
+
+  const runCmd = (cmd) => {
+    return new Promise((resolve) => {
+      conn.exec(cmd, (err, stream) => {
+        if (err) { resolve(`Err: ${err.message}`); return; }
+        let out = '';
+        stream.on('data', d => out += d);
+        stream.stderr.on('data', d => out += `[stderr] ${d}`);
+        stream.on('close', () => resolve(out.trim()));
+      });
+    });
+  };
+
+  const remoteNodeCmd = `const mongoose = require('/home/adminbackend/web/demoplace.my.id/public_html/proxy/node_modules/mongoose'); mongoose.connect('mongodb://127.0.0.1:27017/backone_dpi').then(() => mongoose.connection.db.collection('lookupapps').countDocuments()).then(c => { console.log('COUNT:', c); process.exit(0); }).catch(e => { console.error(e); process.exit(1); })`;
+
+  const countRes = await runCmd(`node -e ${JSON.stringify(remoteNodeCmd)}`);
+  console.log('=== REMOTE LOOKUP COUNT ===\n', countRes);
+
+  conn.end();
+}
+
+main().catch(console.error);
diff --git a/test/check-remote-mongo.js b/test/check-remote-mongo.js
new file mode 100644
index 0000000..098d2eb
--- /dev/null
+++ b/test/check-remote-mongo.js
@@ -0,0 +1,27 @@
+const { Client } = require('ssh2');
+
+const SSH = {
+  host: '103.185.47.52',
+  port: 2222,
+  username: 'adminbackend',
+  password: 'htEo7x6LsBQiEHHH',
+  readyTimeout: 60000
+};
+
+const conn = new Client();
+conn.on('ready', () => {
+  conn.exec('cat /home/adminbackend/web/demoplace.my.id/public_html/proxy/.env /home/adminbackend/web/demoplace.my.id/public_html/backend/.env /home/adminbackend/web/demoplace.my.id/public_html/.env.production', (err, stream) => {
+    if (err) {
+      console.error(err);
+      conn.end();
+      return;
+    }
+    let out = '';
+    stream.on('data', d => out += d);
+    stream.on('close', () => {
+      console.log('--- REMOTE ENVS ---');
+      console.log(out);
+      conn.end();
+    });
+  });
+}).on('error', console.error).connect(SSH);
diff --git a/test/check-remote-next-agents.js b/test/check-remote-next-agents.js
new file mode 100644
index 0000000..f15b7a6
--- /dev/null
+++ b/test/check-remote-next-agents.js
@@ -0,0 +1,22 @@
+const { Client } = require('ssh2');
+
+const SSH = {
+  host: '103.185.47.52',
+  port: 2222,
+  username: 'adminbackend',
+  password: 'htEo7x6LsBQiEHHH',
+  readyTimeout: 60000
+};
+
+const conn = new Client();
+conn.on('ready', () => {
+  conn.exec("find /home/adminbackend/web/demoplace.my.id/public_html/.next/standalone -path '*agents*' -ls", (err, stream) => {
+    let out = '';
+    stream.on('data', d => out += d);
+    stream.on('close', () => {
+      console.log('--- REMOTE NEXT AGENTS FILES ---');
+      console.log(out);
+      conn.end();
+    });
+  });
+}).connect(SSH);
diff --git a/test/check-remote-next-date.js b/test/check-remote-next-date.js
new file mode 100644
index 0000000..96df33e
--- /dev/null
+++ b/test/check-remote-next-date.js
@@ -0,0 +1,22 @@
+const { Client } = require('ssh2');
+
+const SSH = {
+  host: '103.185.47.52',
+  port: 2222,
+  username: 'adminbackend',
+  password: 'htEo7x6LsBQiEHHH',
+  readyTimeout: 60000
+};
+
+const conn = new Client();
+conn.on('ready', () => {
+  conn.exec("ls -ld /home/adminbackend/web/demoplace.my.id/public_html/.next; ls -l /home/adminbackend/web/demoplace.my.id/public_html/.next/standalone/server.js", (err, stream) => {
+    let out = '';
+    stream.on('data', d => out += d);
+    stream.on('close', () => {
+      console.log('--- REMOTE NEXT DATE ---');
+      console.log(out);
+      conn.end();
+    });
+  });
+}).connect(SSH);
diff --git a/test/check-standalone.js b/test/check-standalone.js
new file mode 100644
index 0000000..e5d6b12
--- /dev/null
+++ b/test/check-standalone.js
@@ -0,0 +1,33 @@
+module.paths.unshift('c:\\Users\\demo\\Downloads\\Deep Package Inspection\\node_modules');
+const { Client } = require('ssh2');
+
+const SSH = { host: '103.185.47.52', port: 2222, username: 'adminbackend', password: 'htEo7x6LsBQiEHHH', readyTimeout: 60000 };
+
+async function main() {
+  const conn = new Client();
+  await new Promise((resolve, reject) => {
+    conn.on('ready', resolve).on('error', reject).connect(SSH);
+  });
+  console.log('SSH connected.');
+
+  const runCmd = (cmd) => {
+    return new Promise((resolve) => {
+      conn.exec(cmd, (err, stream) => {
+        if (err) { resolve(`Err: ${err.message}`); return; }
+        let out = '';
+        stream.on('data', d => out += d);
+        stream.on('close', () => resolve(out.trim()));
+      });
+    });
+  };
+
+  const lsStandalone = await runCmd('ls -la /home/adminbackend/web/demoplace.my.id/public_html/.next/standalone');
+  console.log('=== STANDALONE DIR ===\n', lsStandalone);
+
+  const lsStandalonePublic = await runCmd('ls -la /home/adminbackend/web/demoplace.my.id/public_html/.next/standalone/public || echo "No public folder in standalone"');
+  console.log('=== STANDALONE PUBLIC DIR ===\n', lsStandalonePublic);
+
+  conn.end();
+}
+
+main().catch(console.error);
diff --git a/test/delete-remote-backslashes.js b/test/delete-remote-backslashes.js
new file mode 100644
index 0000000..26c5dce
--- /dev/null
+++ b/test/delete-remote-backslashes.js
@@ -0,0 +1,23 @@
+const { Client } = require('ssh2');
+
+const SSH = {
+  host: '103.185.47.52',
+  port: 2222,
+  username: 'adminbackend',
+  password: 'htEo7x6LsBQiEHHH',
+  readyTimeout: 60000
+};
+
+const conn = new Client();
+conn.on('ready', () => {
+  console.log('Cleaning up backslash files/folders on remote server...');
+  conn.exec("find /home/adminbackend/web/demoplace.my.id/public_html -name '*\\\\*' -depth -exec rm -rf {} \\; -print", (err, stream) => {
+    let out = '';
+    stream.on('data', d => out += d);
+    stream.on('close', () => {
+      console.log('--- CLEANED UP REMOTE FILES ---');
+      console.log(out);
+      conn.end();
+    });
+  });
+}).connect(SSH);
diff --git a/test/download-env-prod.js b/test/download-env-prod.js
new file mode 100644
index 0000000..48b392d
--- /dev/null
+++ b/test/download-env-prod.js
@@ -0,0 +1,30 @@
+module.paths.unshift('c:\\Users\\demo\\Downloads\\Deep Package Inspection\\node_modules');
+const { Client } = require('ssh2');
+const fs = require('fs');
+
+const SSH = { host: '103.185.47.52', port: 2222, username: 'adminbackend', password: 'htEo7x6LsBQiEHHH', readyTimeout: 60000 };
+const REMOTE_PATH = '/home/adminbackend/web/demoplace.my.id/public_html/.env.production';
+const LOCAL_PATH = 'c:\\Users\\demo\\Downloads\\Deep Package Inspection\\.env.production';
+
+async function main() {
+  const conn = new Client();
+  await new Promise((resolve, reject) => {
+    conn.on('ready', resolve).on('error', reject).connect(SSH);
+  });
+  console.log('SSH connected. Downloading .env.production...');
+
+  await new Promise((resolve, reject) => {
+    conn.sftp((err, sftp) => {
+      if (err) return reject(err);
+      sftp.fastGet(REMOTE_PATH, LOCAL_PATH, {}, (err2) => {
+        if (err2) return reject(err2);
+        resolve();
+      });
+    });
+  });
+
+  console.log('Downloaded successfully to:', LOCAL_PATH);
+  conn.end();
+}
+
+main().catch(console.error);
diff --git a/test/download-remote-files.js b/test/download-remote-files.js
new file mode 100644
index 0000000..3a62cf6
--- /dev/null
+++ b/test/download-remote-files.js
@@ -0,0 +1,83 @@
+const { Client } = require('ssh2');
+const path = require('path');
+const fs = require('fs');
+
+const SSH = {
+  host: '103.185.47.52',
+  port: 2222,
+  username: 'adminbackend',
+  password: 'htEo7x6LsBQiEHHH',
+  readyTimeout: 60000
+};
+
+const REMOTE_ROOT = '/home/adminbackend/web/demoplace.my.id/public_html';
+const LOCAL_ROOT = path.join(__dirname, '..');
+
+const filesToDownload = [
+  'src/app/(dashboard)/agents/page.tsx',
+  'src/app/(dashboard)/apps/page.tsx',
+  'src/app/(dashboard)/devices/page.tsx',
+  'src/app/(dashboard)/dns/page.tsx',
+  'src/app/(dashboard)/dpi-analytics/page.tsx',
+  'src/app/(dashboard)/events/page.tsx',
+  'src/app/(dashboard)/flows/page.tsx',
+  'src/app/(dashboard)/geography/page.tsx',
+  'src/app/(dashboard)/intelligence/page.tsx',
+  'src/app/(dashboard)/lookup/page.tsx',
+  'src/app/(dashboard)/network-infrastructure/page.tsx',
+  'src/app/(dashboard)/network-intelligence/page.tsx',
+  'src/app/(dashboard)/page.tsx',
+  'src/app/(dashboard)/security-audit/page.tsx',
+  'src/app/(dashboard)/threats/page.tsx',
+  'src/components/admin/ExternalAccountModal.tsx',
+  'src/components/layout/Sidebar.tsx',
+  'src/components/layout/SidebarData.ts',
+  'src/components/ui/SafeImage.tsx',
+  'src/lib/actions/agents.ts',
+  'src/lib/admin-api.ts',
+  'package.json'
+];
+
+const conn = new Client();
+conn.on('ready', () => {
+  console.log('✓ SSH Connection ready for SFTP...');
+  conn.sftp((err, sftp) => {
+    if (err) {
+      console.error('SFTP Error:', err.message);
+      conn.end();
+      return;
+    }
+    
+    let downloadedCount = 0;
+    let failedCount = 0;
+    
+    filesToDownload.forEach((relPath) => {
+      const remotePath = `${REMOTE_ROOT}/${relPath}`;
+      const localPath = path.join(LOCAL_ROOT, relPath);
+      
+      // Ensure target directory exists
+      const localDir = path.dirname(localPath);
+      if (!fs.existsSync(localDir)) {
+        fs.mkdirSync(localDir, { recursive: true });
+      }
+      
+      console.log(`Downloading: ${relPath} ...`);
+      sftp.fastGet(remotePath, localPath, (sftpErr) => {
+        if (sftpErr) {
+          console.error(`✗ Failed to download ${relPath}:`, sftpErr.message);
+          failedCount++;
+        } else {
+          console.log(`✓ Downloaded ${relPath}`);
+          downloadedCount++;
+        }
+        
+        if (downloadedCount + failedCount === filesToDownload.length) {
+          console.log(`\n=========================================`);
+          console.log(`  DOWNLOAD COMPLETED: ${downloadedCount} Succeeded, ${failedCount} Failed.`);
+          console.log(`=========================================\n`);
+          conn.end();
+        }
+      });
+    });
+  });
+}).on('error', console.error).connect(SSH);
diff --git a/test/download-remote-uploads-seq.js b/test/download-remote-uploads-seq.js
new file mode 100644
index 0000000..a62f6a3
--- /dev/null
+++ b/test/download-remote-uploads-seq.js
@@ -0,0 +1,78 @@
+const { Client } = require('ssh2');
+const fs = require('fs');
+const path = require('path');
+
+const SSH_CONFIG = {
+  host: '103.185.47.52',
+  port: 2222,
+  username: 'adminbackend',
+  password: 'htEo7x6LsBQiEHHH'
+};
+
+const remoteDir = '/home/adminbackend/web/demoplace.my.id/public_html/api/uploads';
+const localDir = path.join(__dirname, '../public/api/uploads');
+
+// Ensure local directory exists
+if (!fs.existsSync(localDir)) {
+  fs.mkdirSync(localDir, { recursive: true });
+}
+
+console.log('Connecting to SSH...');
+const conn = new Client();
+conn.on('ready', () => {
+  console.log('SSH Connection ready. Starting SFTP...');
+  conn.sftp(async (err, sftp) => {
+    if (err) {
+      console.error('SFTP Error:', err.message);
+      conn.end();
+      return;
+    }
+
+    console.log('Listing remote uploads directory:', remoteDir);
+    sftp.readdir(remoteDir, async (err, list) => {
+      if (err) {
+        console.error('Readdir Error:', err.message);
+        conn.end();
+        return;
+      }
+
+      const files = list.filter(item => item.attrs.isFile());
+      console.log(`Found ${files.length} upload files on remote server.`);
+      
+      if (files.length === 0) {
+        conn.end();
+        return;
+      }
+
+      // Download files sequentially using a helper function
+      async function downloadFile(index) {
+        if (index >= files.length) {
+          console.log('\n=========================================');
+          console.log('  ALL UPLOADS DOWNLOAD COMPLETED.');
+          console.log('=========================================');
+          conn.end();
+          return;
+        }
+
+        const name = files[index].filename;
+        const remoteFile = path.posix.join(remoteDir, name);
+        const localFile = path.join(localDir, name);
+
+        console.log(`[${index + 1}/${files.length}] Downloading: ${name} ...`);
+        
+        sftp.fastGet(remoteFile, localFile, {}, (err) => {
+          if (err) {
+            console.error(`Failed to download ${name}:`, err.message);
+          } else {
+            console.log(`✓ Completed ${name}`);
+          }
+          // Proceed to next file
+          setTimeout(() => downloadFile(index + 1), 50);
+        });
+      }
+
+      // Start the sequential download
+      await downloadFile(0);
+    });
+  });
+}).connect(SSH_CONFIG);
diff --git a/test/download-remote-uploads.js b/test/download-remote-uploads.js
new file mode 100644
index 0000000..38891ec
--- /dev/null
+++ b/test/download-remote-uploads.js
@@ -0,0 +1,71 @@
+const { Client } = require('ssh2');
+const fs = require('fs');
+const path = require('path');
+
+const SSH_CONFIG = {
+  host: '103.185.47.52',
+  port: 2222,
+  username: 'adminbackend',
+  password: 'htEo7x6LsBQiEHHH'
+};
+
+const remoteDir = '/home/adminbackend/web/demoplace.my.id/public_html/api/uploads';
+const localDir = path.join(__dirname, '../public/api/uploads');
+
+// Ensure local directory exists
+if (!fs.existsSync(localDir)) {
+  fs.mkdirSync(localDir, { recursive: true });
+}
+
+console.log('Connecting to SSH...');
+const conn = new Client();
+conn.on('ready', () => {
+  console.log('SSH Connection ready. Starting SFTP...');
+  conn.sftp((err, sftp) => {
+    if (err) {
+      console.error('SFTP Error:', err.message);
+      conn.end();
+      return;
+    }
+
+    console.log('Listing remote uploads directory:', remoteDir);
+    sftp.readdir(remoteDir, (err, list) => {
+      if (err) {
+        console.error('Readdir Error:', err.message);
+        conn.end();
+        return;
+      }
+
+      const files = list.filter(item => item.attrs.isFile());
+      console.log(`Found ${files.length} upload files on remote server.`);
+      
+      if (files.length === 0) {
+        conn.end();
+        return;
+      }
+
+      let downloaded = 0;
+      files.forEach(fileInfo => {
+        const name = fileInfo.filename;
+        const remoteFile = path.posix.join(remoteDir, name);
+        const localFile = path.join(localDir, name);
+        
+        console.log(`Downloading: ${name} ...`);
+        sftp.fastGet(remoteFile, localFile, {}, (err) => {
+          if (err) {
+            console.error(`Failed to download ${name}:`, err.message);
+          } else {
+            console.log(`✓ Downloaded ${name}`);
+          }
+          downloaded++;
+          if (downloaded === files.length) {
+            console.log('\n=========================================');
+            console.log('  ALL UPLOADS DOWNLOAD COMPLETED.');
+            console.log('=========================================');
+            conn.end();
+          }
+        });
+      });
+    });
+  });
+}).connect(SSH_CONFIG);
diff --git a/test/dump-html.js b/test/dump-html.js
new file mode 100644
index 0000000..04d545c
--- /dev/null
+++ b/test/dump-html.js
@@ -0,0 +1,27 @@
+const axios = require('axios');
+
+async function main() {
+  const loginRes = await axios.post('https://demoplace.my.id/api/auth/login', {
+    username: 'admin',
+    password: 'admin'
+  });
+  
+  const cookie = loginRes.headers['set-cookie'];
+  const pageRes = await axios.get('https://demoplace.my.id/agents', {
+    headers: {
+      Cookie: cookie ? cookie.join('; ') : ''
+    }
+  });
+  
+  const html = pageRes.data;
+  
+  console.log("=== HEADINGS ===");
+  const headings = html.match(/<h[1-6][^>]*>[\s\S]*?<\/h[1-6]>/gi) || [];
+  headings.forEach(h => console.log(h.replace(/<[^>]+>/g, '').trim()));
+
+  console.log("=== CARD TITLES OR TABLE TITLES ===");
+  const textMatches = html.match(/[^>]{5,100}(?:External Accounts|Agents|Inventory|Tenant)[^<]{5,100}/gi) || [];
+  textMatches.slice(0, 30).forEach(t => console.log(t.replace(/<[^>]+>/g, '').trim()));
+}
+
+main().catch(console.error);
diff --git a/test/dump-remote-db.js b/test/dump-remote-db.js
new file mode 100644
index 0000000..bdc207d
--- /dev/null
+++ b/test/dump-remote-db.js
@@ -0,0 +1,90 @@
+const { Client } = require('ssh2');
+
+const SSH = {
+  host: '103.185.47.52',
+  port: 2222,
+  username: 'adminbackend',
+  password: 'htEo7x6LsBQiEHHH',
+  readyTimeout: 60000
+};
+
+const remoteJs = `
+const mongoose = require('/home/adminbackend/web/demoplace.my.id/public_html/backend/node_modules/mongoose');
+
+async function main() {
+  console.log('Remote: Requiring mongoose succeeded. Connecting...');
+  const URI = 'mongodb://backone_user:SusuKudaLiar@103.80.237.29:27017/backone_dpi?authSource=backone_dpi';
+  try {
+    await mongoose.connect(URI, {
+      serverSelectionTimeoutMS: 10000,
+      connectTimeoutMS: 10000,
+    });
+    console.log('Remote: Connected to DB.');
+    const db = mongoose.connection.db;
+    const collections = await db.listCollections().toArray();
+    console.log('Remote: Listed collections.');
+    const result = {};
+    for (const col of collections) {
+      const name = col.name;
+      console.log('Remote: Querying collection ' + name);
+      const count = await db.collection(name).countDocuments({});
+      if (['users', 'tenantconfigs', 'customagentlocations', 'blacklistrules', 'summaries'].includes(name)) {
+        const docs = await db.collection(name).find({}).toArray();
+        result[name] = { count, docs };
+      } else {
+        result[name] = { count };
+      }
+    }
+    console.log('--- JSON_START ---');
+    console.log(JSON.stringify(result));
+    console.log('--- JSON_END ---');
+  } catch (err) {
+    console.error('Remote Error:', err.message);
+  } finally {
+    await mongoose.disconnect();
+    console.log('Remote: Mongoose disconnected.');
+  }
+}
+main();
+`;
+
+const conn = new Client();
+conn.on('ready', () => {
+  const b64 = Buffer.from(remoteJs).toString('base64');
+  conn.exec(`echo "${b64}" | base64 -d | node`, (err, stream) => {
+    if (err) {
+      console.error(err);
+      conn.end();
+      return;
+    }
+    let out = '';
+    stream.on('data', d => {
+      const chunk = d.toString();
+      process.stdout.write(chunk);
+      out += chunk;
+    });
+    stream.stderr.on('data', d => {
+      process.stderr.write(d.toString());
+    });
+    stream.on('close', () => {
+      const startIdx = out.indexOf('--- JSON_START ---');
+      const endIdx = out.indexOf('--- JSON_END ---');
+      if (startIdx !== -1 && endIdx !== -1) {
+        const jsonStr = out.substring(startIdx + '--- JSON_START ---'.length, endIdx).trim();
+        try {
+          const parsed = JSON.parse(jsonStr);
+          console.log('\n--- REMOTE COLLECTIONS INFO ---');
+          for (const [name, info] of Object.entries(parsed)) {
+            console.log(`- ${name}: ${info.count} documents`);
+          }
+          const fs = require('fs');
+          fs.writeFileSync('C:\\Users\\demo\\.gemini\\antigravity-ide\\scratch\\remote_db_dump.json', jsonStr);
+          console.log('\n✓ Saved full DB dump locally to scratch/remote_db_dump.json');
+        } catch (e) {
+          console.error('\nFailed to parse JSON segment:', e.message);
+        }
+      }
+      conn.end();
+    });
+  });
+}).on('error', console.error).connect(SSH);
diff --git a/test/fetch-remote-headers.js b/test/fetch-remote-headers.js
new file mode 100644
index 0000000..fed1bff
--- /dev/null
+++ b/test/fetch-remote-headers.js
@@ -0,0 +1,25 @@
+const axios = require('axios');
+
+async function main() {
+  try {
+    console.log('Fetching https://demoplace.my.id/ ...');
+    const res1 = await axios.get('https://demoplace.my.id/', { maxRedirects: 0, validateStatus: () => true });
+    console.log('Status /:', res1.status);
+    console.log('Headers /:', res1.headers);
+    console.log('Body snippet /:', res1.data.substring(0, 500));
+  } catch (err) {
+    console.error('Error /:', err.message);
+  }
+
+  try {
+    console.log('\nFetching https://demoplace.my.id/login ...');
+    const res2 = await axios.get('https://demoplace.my.id/login', { maxRedirects: 0, validateStatus: () => true });
+    console.log('Status /login:', res2.status);
+    console.log('Headers /login:', res2.headers);
+    console.log('Body snippet /login:', res2.data.substring(0, 500));
+  } catch (err) {
+    console.error('Error /login:', err.message);
+  }
+}
+
+main().catch(console.error);
diff --git a/test/fetch-remote-page.js b/test/fetch-remote-page.js
new file mode 100644
index 0000000..33695e4
--- /dev/null
+++ b/test/fetch-remote-page.js
@@ -0,0 +1,39 @@
+const axios = require('axios');
+
+async function main() {
+  console.log('Logging in to remote server...');
+  const loginRes = await axios.post('https://demoplace.my.id/api/auth/login', {
+    username: 'admin',
+    password: 'admin'
+  });
+  
+  const cookie = loginRes.headers['set-cookie'];
+  console.log('Login successful. Cookies:', cookie);
+  
+  console.log('Fetching /agents page...');
+  const pageRes = await axios.get('https://demoplace.my.id/agents', {
+    headers: {
+      Cookie: cookie ? cookie.join('; ') : ''
+    }
+  });
+  
+  const html = pageRes.data;
+  console.log('Page HTML length:', html.length);
+  
+  const hasSuperadminTable = html.includes('Superadmin (BackOne) External Accounts');
+  const hasInventoryTable = html.includes('External Accounts Inventory');
+  console.log('Contains Superadmin table:', hasSuperadminTable);
+  console.log('Contains Inventory table:', hasInventoryTable);
+  
+  // Find where table title is mentioned
+  const idx1 = html.indexOf('Superadmin (BackOne)');
+  if (idx1 !== -1) {
+    console.log('Snippet around Superadmin:', html.substring(idx1 - 100, idx1 + 200));
+  }
+  const idx2 = html.indexOf('External Accounts Inventory');
+  if (idx2 !== -1) {
+    console.log('Snippet around Inventory:', html.substring(idx2 - 100, idx2 + 200));
+  }
+}
+
+main().catch(console.error);
diff --git a/test/find-long-files.js b/test/find-long-files.js
new file mode 100644
index 0000000..f00e79e
--- /dev/null
+++ b/test/find-long-files.js
@@ -0,0 +1,39 @@
+const fs = require('fs');
+const path = require('path');
+
+const excludeDirs = ['node_modules', '.next', 'scratch', 'test', '.git', 'dist'];
+
+function getFiles(dir, fileList = []) {
+  const files = fs.readdirSync(dir);
+  for (const file of files) {
+    const filePath = path.join(dir, file);
+    const stat = fs.statSync(filePath);
+    if (stat.isDirectory()) {
+      if (!excludeDirs.includes(file)) {
+        getFiles(filePath, fileList);
+      }
+    } else {
+      if (['.ts', '.tsx', '.js', '.jsx'].includes(path.extname(file))) {
+        fileList.push(filePath);
+      }
+    }
+  }
+  return fileList;
+}
+
+const allFiles = getFiles('C:\\Users\\demo\\Downloads\\Deep Package Inspection');
+
+console.log('--- Checking file sizes (Rule 3: 256-LOC limit) ---');
+const longFiles = [];
+allFiles.forEach(file => {
+  const content = fs.readFileSync(file, 'utf8');
+  const lines = content.split('\n').length;
+  if (lines > 256) {
+    longFiles.push({ file, lines });
+  }
+});
+
+console.log(`Found ${longFiles.length} files exceeding 256 lines:`);
+longFiles.forEach(f => {
+  console.log(`- ${path.relative('C:\\Users\\demo\\Downloads\\Deep Package Inspection', f.file)}: ${f.lines} lines`);
+});
diff --git a/test/find-lookupapps.js b/test/find-lookupapps.js
new file mode 100644
index 0000000..ccd69b9
--- /dev/null
+++ b/test/find-lookupapps.js
@@ -0,0 +1,26 @@
+const mongoose = require('mongoose');
+require('dotenv').config({ path: './.env.local' });
+
+async function main() {
+  const uri = process.env.MONGODB_URI || 'mongodb://127.0.0.1:27017/backone_dpi';
+  await mongoose.connect(uri);
+  
+  const dbsList = await new mongoose.mongo.Admin(mongoose.connection.db).listDatabases();
+  console.log('--- All Databases ---');
+  for (const dbInfo of dbsList.databases) {
+    const conn = mongoose.createConnection(`mongodb://127.0.0.1:27017/${dbInfo.name}`);
+    await new Promise(resolve => conn.once('open', resolve));
+    const collections = await conn.db.listCollections().toArray();
+    for (const col of collections) {
+      if (col.name === 'lookupapps') {
+        const count = await conn.db.collection('lookupapps').countDocuments({});
+        console.log(`DB: ${dbInfo.name} -> collection: lookupapps -> count: ${count}`);
+      }
+    }
+    await conn.close();
+  }
+  
+  await mongoose.disconnect();
+}
+
+main().catch(console.error);
diff --git a/test/find-nginx-conf.js b/test/find-nginx-conf.js
new file mode 100644
index 0000000..1cad81e
--- /dev/null
+++ b/test/find-nginx-conf.js
@@ -0,0 +1,33 @@
+module.paths.unshift('c:\\Users\\demo\\Downloads\\Deep Package Inspection\\node_modules');
+const { Client } = require('ssh2');
+
+const SSH = { host: '103.185.47.52', port: 2222, username: 'adminbackend', password: 'htEo7x6LsBQiEHHH', readyTimeout: 60000 };
+
+async function main() {
+  const conn = new Client();
+  await new Promise((resolve, reject) => {
+    conn.on('ready', resolve).on('error', reject).connect(SSH);
+  });
+  console.log('SSH connected.');
+
+  const runCmd = (cmd) => {
+    return new Promise((resolve) => {
+      conn.exec(cmd, (err, stream) => {
+        if (err) { resolve(`Err: ${err.message}`); return; }
+        let out = '';
+        stream.on('data', d => out += d);
+        stream.on('close', () => resolve(out.trim()));
+      });
+    });
+  };
+
+  const findConf = await runCmd('find /home/adminbackend -name "*nginx*.conf" -o -name "nginx.conf" 2>/dev/null');
+  console.log('=== NGINX CONFS ===\n', findConf);
+
+  const nginxV = await runCmd('nginx -t 2>&1 || cat /etc/nginx/nginx.conf 2>/dev/null || echo "No nginx read access"');
+  console.log('=== NGINX CONF OR STATUS ===\n', nginxV.substring(0, 1500));
+
+  conn.end();
+}
+
+main().catch(console.error);
diff --git a/test/find-nginx-configs.js b/test/find-nginx-configs.js
new file mode 100644
index 0000000..60f1429
--- /dev/null
+++ b/test/find-nginx-configs.js
@@ -0,0 +1,23 @@
+const { Client } = require('ssh2');
+
+const SSH = {
+  host: '103.185.47.52',
+  port: 2222,
+  username: 'adminbackend',
+  password: 'htEo7x6LsBQiEHHH',
+  readyTimeout: 60000
+};
+
+const conn = new Client();
+conn.on('ready', () => {
+  console.log('Searching for Nginx configurations under home directory...');
+  conn.exec("find /home/adminbackend -name '*nginx*.conf' -o -name 'nginx.ssl.conf' 2>/dev/null", (err, stream) => {
+    let out = '';
+    stream.on('data', d => out += d);
+    stream.on('close', () => {
+      console.log('--- REMOTE NGINX CONFIGS ---');
+      console.log(out);
+      conn.end();
+    });
+  });
+}).connect(SSH);
diff --git a/test/find-null-agent.js b/test/find-null-agent.js
new file mode 100644
index 0000000..215955a
--- /dev/null
+++ b/test/find-null-agent.js
@@ -0,0 +1,24 @@
+const mongoose = require('mongoose');
+
+async function main() {
+  const LOCAL_URI = 'mongodb://127.0.0.1:27017/backone_dpi';
+  await mongoose.connect(LOCAL_URI);
+  const db = mongoose.connection.db;
+  
+  console.log('--- Summaries with null/empty agent_uuid ---');
+  const nullSummaries = await db.collection('summaries').find({
+    $or: [
+      { agent_uuid: null },
+      { agent_uuid: '' },
+      { agent_uuid: { $exists: false } }
+    ]
+  }).toArray();
+  
+  console.log(`Found ${nullSummaries.length} documents:`);
+  nullSummaries.forEach(s => {
+    console.log(`_id: ${s._id}, timestamp: ${s.timestamp}, site_uuid: ${s.site_uuid}, agent_label: ${s.agent_label}`);
+  });
+  
+  await mongoose.disconnect();
+}
+main();
diff --git a/test/find-remote-backslashes.js b/test/find-remote-backslashes.js
new file mode 100644
index 0000000..24e5543
--- /dev/null
+++ b/test/find-remote-backslashes.js
@@ -0,0 +1,22 @@
+const { Client } = require('ssh2');
+
+const SSH = {
+  host: '103.185.47.52',
+  port: 2222,
+  username: 'adminbackend',
+  password: 'htEo7x6LsBQiEHHH',
+  readyTimeout: 60000
+};
+
+const conn = new Client();
+conn.on('ready', () => {
+  conn.exec("find /home/adminbackend/web/demoplace.my.id/public_html -name '*\\\\*'", (err, stream) => {
+    let out = '';
+    stream.on('data', d => out += d);
+    stream.on('close', () => {
+      console.log('--- REMOTE FILES WITH BACKSLASHES ---');
+      console.log(out);
+      conn.end();
+    });
+  });
+}).connect(SSH);
diff --git a/test/find-remote-confs.js b/test/find-remote-confs.js
new file mode 100644
index 0000000..0684474
--- /dev/null
+++ b/test/find-remote-confs.js
@@ -0,0 +1,22 @@
+const { Client } = require('ssh2');
+
+const SSH = {
+  host: '103.185.47.52',
+  port: 2222,
+  username: 'adminbackend',
+  password: 'htEo7x6LsBQiEHHH',
+  readyTimeout: 60000
+};
+
+const conn = new Client();
+conn.on('ready', () => {
+  conn.exec("find /home/adminbackend/conf -type f 2>/dev/null", (err, stream) => {
+    let out = '';
+    stream.on('data', d => out += d);
+    stream.on('close', () => {
+      console.log('--- REMOTE CONF FILES ---');
+      console.log(out);
+      conn.end();
+    });
+  });
+}).connect(SSH);
diff --git a/test/fix-fonts-copy.js b/test/fix-fonts-copy.js
new file mode 100644
index 0000000..48fc307
--- /dev/null
+++ b/test/fix-fonts-copy.js
@@ -0,0 +1,34 @@
+module.paths.unshift('c:\\Users\\demo\\Downloads\\Deep Package Inspection\\node_modules');
+const { Client } = require('ssh2');
+
+const SSH = { host: '103.185.47.52', port: 2222, username: 'adminbackend', password: 'htEo7x6LsBQiEHHH', readyTimeout: 60000 };
+
+async function main() {
+  const conn = new Client();
+  await new Promise((resolve, reject) => {
+    conn.on('ready', resolve).on('error', reject).connect(SSH);
+  });
+  console.log('SSH connected.');
+
+  const runCmd = (cmd) => {
+    return new Promise((resolve) => {
+      conn.exec(cmd, (err, stream) => {
+        if (err) { resolve(`Err: ${err.message}`); return; }
+        let out = '';
+        stream.on('data', d => out += d);
+        stream.on('close', () => resolve(out.trim()));
+      });
+    });
+  };
+
+  // Copy fonts directory to public_html root
+  const copyRes = await runCmd('cp -r /home/adminbackend/web/demoplace.my.id/public_html/public/fonts /home/adminbackend/web/demoplace.my.id/public_html/ && echo "Copy successful" || echo "Copy failed"');
+  console.log('=== COPY FONTS ===\n', copyRes);
+
+  const checkFile = await runCmd('ls -la /home/adminbackend/web/demoplace.my.id/public_html/fonts/BackOneLogo-Regular.ttf');
+  console.log('=== CHECK FILE ===\n', checkFile);
+
+  conn.end();
+}
+
+main().catch(console.error);
diff --git a/test/force-pm2-restart.js b/test/force-pm2-restart.js
new file mode 100644
index 0000000..0b7f3a1
--- /dev/null
+++ b/test/force-pm2-restart.js
@@ -0,0 +1,33 @@
+module.paths.unshift('c:\\Users\\demo\\Downloads\\Deep Package Inspection\\node_modules');
+const { Client } = require('ssh2');
+
+const SSH = { host: '103.185.47.52', port: 2222, username: 'adminbackend', password: 'htEo7x6LsBQiEHHH', readyTimeout: 60000 };
+
+async function main() {
+  const conn = new Client();
+  await new Promise((resolve, reject) => {
+    conn.on('ready', resolve).on('error', reject).connect(SSH);
+  });
+  console.log('SSH connected.');
+
+  const runCmd = (cmd) => {
+    return new Promise((resolve) => {
+      conn.exec(cmd, (err, stream) => {
+        if (err) { resolve(`Err: ${err.message}`); return; }
+        let out = '';
+        stream.on('data', d => out += d);
+        stream.on('close', () => resolve(out.trim()));
+      });
+    });
+  };
+
+  const restartRes = await runCmd('/home/adminbackend/.npm-global/bin/pm2 restart all');
+  console.log('=== PM2 RESTART ALL ===\n', restartRes);
+
+  const pm2List = await runCmd('/home/adminbackend/.npm-global/bin/pm2 list');
+  console.log('=== PM2 LIST ===\n', pm2List);
+
+  conn.end();
+}
+
+main().catch(console.error);
diff --git a/test/get-remote-keys.js b/test/get-remote-keys.js
new file mode 100644
index 0000000..e775529
--- /dev/null
+++ b/test/get-remote-keys.js
@@ -0,0 +1,22 @@
+const { Client } = require('ssh2');
+const path = require('path');
+
+const SSH = {
+  host: '103.185.47.52',
+  port: 2222,
+  username: 'adminbackend',
+  password: 'htEo7x6LsBQiEHHH',
+  readyTimeout: 60000
+};
+
+const conn = new Client();
+conn.on('ready', () => {
+  conn.exec("node -e \"const fs = require('fs'); const path = require('path'); const root = '/home/adminbackend/web/demoplace.my.id/public_html'; function getFiles(dir, files = {}) { try { const list = fs.readdirSync(dir); for (const item of list) { const fullPath = path.join(dir, item); const stat = fs.statSync(fullPath); if (stat.isDirectory()) { if (item !== 'node_modules' && item !== '.next' && item !== '.git') getFiles(fullPath, files); } else { files[path.relative(root, fullPath)] = true; } } } catch(e) {} return files; } console.log(JSON.stringify(Object.keys(getFiles(path.join(root, 'src')))));\"", (err, stream) => {
+    let out = '';
+    stream.on('data', d => out += d);
+    stream.on('close', () => {
+      console.log('Remote keys:', out);
+      conn.end();
+    });
+  });
+}).connect(SSH);
diff --git a/test/git-log-remote.js b/test/git-log-remote.js
new file mode 100644
index 0000000..490a5c6
--- /dev/null
+++ b/test/git-log-remote.js
@@ -0,0 +1,34 @@
+module.paths.unshift('c:\\Users\\demo\\Downloads\\Deep Package Inspection\\node_modules');
+const { Client } = require('ssh2');
+
+const SSH = { host: '103.185.47.52', port: 2222, username: 'adminbackend', password: 'htEo7x6LsBQiEHHH', readyTimeout: 60000 };
+
+async function main() {
+  const conn = new Client();
+  await new Promise((resolve, reject) => {
+    conn.on('ready', resolve).on('error', reject).connect(SSH);
+  });
+  console.log('SSH connected.');
+
+  const runCmd = (cmd) => {
+    return new Promise((resolve) => {
+      conn.exec(cmd, (err, stream) => {
+        if (err) { resolve(`Err: ${err.message}`); return; }
+        let out = '';
+        stream.on('data', d => out += d);
+        stream.stderr.on('data', d => out += `[stderr] ${d}`);
+        stream.on('close', () => resolve(out.trim()));
+      });
+    });
+  };
+
+  const gitLog = await runCmd('cd /home/adminbackend/web/demoplace.my.id/public_html && git log -n 5 --oneline');
+  console.log('=== GIT LOG REMOTE ===\n', gitLog);
+
+  const gitStatus = await runCmd('cd /home/adminbackend/web/demoplace.my.id/public_html && git status');
+  console.log('=== GIT STATUS REMOTE ===\n', gitStatus);
+
+  conn.end();
+}
+
+main().catch(console.error);
diff --git a/test/inspect-sync-mongoose.js b/test/inspect-sync-mongoose.js
new file mode 100644
index 0000000..a5f661f
--- /dev/null
+++ b/test/inspect-sync-mongoose.js
@@ -0,0 +1,34 @@
+const rootMongoose = require('mongoose');
+const proxyMongoose = require('../proxy/node_modules/mongoose');
+const { LookupApp } = require('../proxy/models/Schemas');
+
+async function main() {
+  const uri = 'mongodb://127.0.0.1:27017/backone_dpi';
+  console.log('Connecting Root Mongoose...');
+  await rootMongoose.connect(uri);
+  console.log('Root Mongoose connection state:', rootMongoose.connection.readyState);
+  console.log('Proxy Mongoose connection state BEFORE:', proxyMongoose.connection.readyState);
+  
+  try {
+    const count = await LookupApp.countDocuments({});
+    console.log('Count from LookupApp:', count);
+  } catch (err) {
+    console.log('Error counting from LookupApp:', err.message);
+  }
+  
+  console.log('Connecting Proxy Mongoose...');
+  await proxyMongoose.connect(uri);
+  console.log('Proxy Mongoose connection state AFTER:', proxyMongoose.connection.readyState);
+  
+  try {
+    const count = await LookupApp.countDocuments({});
+    console.log('Count from LookupApp after proxy connect:', count);
+  } catch (err) {
+    console.log('Error counting from LookupApp after proxy connect:', err.message);
+  }
+  
+  await rootMongoose.disconnect();
+  await proxyMongoose.disconnect();
+}
+
+main().catch(console.error);
diff --git a/test/load-local-db.js b/test/load-local-db.js
new file mode 100644
index 0000000..de02987
--- /dev/null
+++ b/test/load-local-db.js
@@ -0,0 +1,64 @@
+const fs = require('fs');
+const mongoose = require('mongoose');
+
+async function main() {
+  const dumpPath = 'C:\\Users\\demo\\.gemini\\antigravity-ide\\scratch\\remote_db_dump.json';
+  if (!fs.existsSync(dumpPath)) {
+    console.error('Error: Dump file not found.');
+    return;
+  }
+  
+  const rawData = fs.readFileSync(dumpPath, 'utf8');
+  const data = JSON.parse(rawData);
+  
+  const LOCAL_URI = 'mongodb://127.0.0.1:27017/backone_dpi';
+  console.log('Connecting to local MongoDB...');
+  await mongoose.connect(LOCAL_URI);
+  console.log('✓ Connected to local MongoDB.');
+  
+  const db = mongoose.connection.db;
+  
+  for (const [colName, info] of Object.entries(data)) {
+    if (info.docs) {
+      console.log(`\n--- Loading collection "${colName}" (${info.docs.length} docs) ---`);
+      
+      // Clear local collection first
+      await db.collection(colName).deleteMany({});
+      console.log(`- Cleared local "${colName}"`);
+      
+      // If we have documents to insert, convert any _id strings to ObjectIds (if appropriate) and insert
+      if (info.docs.length > 0) {
+        const cleanedDocs = info.docs.map(doc => {
+          // MongoDB serialization via JSON converts ObjectId to string/object representation.
+          // Let's restore _id to ObjectId.
+          if (doc._id) {
+            try {
+              if (typeof doc._id === 'string') {
+                doc._id = new mongoose.Types.ObjectId(doc._id);
+              } else if (doc._id.$oid) {
+                doc._id = new mongoose.Types.ObjectId(doc._id.$oid);
+              }
+            } catch (e) {
+              // fallback to original if not a valid ObjectId format
+            }
+          }
+          // Also restore date fields
+          for (const key of Object.keys(doc)) {
+            if (typeof doc[key] === 'string' && doc[key].match(/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}/)) {
+              doc[key] = new Date(doc[key]);
+            }
+          }
+          return doc;
+        });
+        
+        await db.collection(colName).insertMany(cleanedDocs);
+        console.log(`- Inserted ${cleanedDocs.length} documents into "${colName}"`);
+      }
+    }
+  }
+  
+  await mongoose.disconnect();
+  console.log('\n✓ Successfully loaded remote dump into local database!');
+}
+
+main().catch(console.error);
diff --git a/test/pm2-show-frontend.js b/test/pm2-show-frontend.js
new file mode 100644
index 0000000..4899380
--- /dev/null
+++ b/test/pm2-show-frontend.js
@@ -0,0 +1,30 @@
+module.paths.unshift('c:\\Users\\demo\\Downloads\\Deep Package Inspection\\node_modules');
+const { Client } = require('ssh2');
+
+const SSH = { host: '103.185.47.52', port: 2222, username: 'adminbackend', password: 'htEo7x6LsBQiEHHH', readyTimeout: 60000 };
+
+async function main() {
+  const conn = new Client();
+  await new Promise((resolve, reject) => {
+    conn.on('ready', resolve).on('error', reject).connect(SSH);
+  });
+  console.log('SSH connected.');
+
+  const runCmd = (cmd) => {
+    return new Promise((resolve) => {
+      conn.exec(cmd, (err, stream) => {
+        if (err) { resolve(`Err: ${err.message}`); return; }
+        let out = '';
+        stream.on('data', d => out += d);
+        stream.on('close', () => resolve(out.trim()));
+      });
+    });
+  };
+
+  const showFront = await runCmd('pm2 show demoplace-frontend || npx pm2 show demoplace-frontend');
+  console.log('=== PM2 SHOW FRONTEND ===\n', showFront);
+
+  conn.end();
+}
+
+main().catch(console.error);
diff --git a/test/print-distinct-agents.js b/test/print-distinct-agents.js
new file mode 100644
index 0000000..703d139
--- /dev/null
+++ b/test/print-distinct-agents.js
@@ -0,0 +1,14 @@
+const mongoose = require('mongoose');
+
+async function main() {
+  const LOCAL_URI = 'mongodb://127.0.0.1:27017/backone_dpi';
+  await mongoose.connect(LOCAL_URI);
+  const db = mongoose.connection.db;
+  
+  const distinctUuids = await db.collection('summaries').distinct('agent_uuid');
+  console.log('Distinct agent_uuid values in summaries:');
+  console.log(distinctUuids.map(u => typeof u === 'string' ? `"${u}"` : u));
+  
+  await mongoose.disconnect();
+}
+main();
diff --git a/test/print-null-doc.js b/test/print-null-doc.js
new file mode 100644
index 0000000..f8959ab
--- /dev/null
+++ b/test/print-null-doc.js
@@ -0,0 +1,21 @@
+const mongoose = require('mongoose');
+
+async function main() {
+  const LOCAL_URI = 'mongodb://127.0.0.1:27017/backone_dpi';
+  await mongoose.connect(LOCAL_URI);
+  const db = mongoose.connection.db;
+  
+  const doc = await db.collection('summaries').findOne({
+    $or: [
+      { agent_uuid: null },
+      { agent_uuid: '' },
+      { agent_uuid: { $exists: false } }
+    ]
+  });
+  
+  console.log('Document with null/empty agent_uuid:');
+  console.log(JSON.stringify(doc, null, 2));
+  
+  await mongoose.disconnect();
+}
+main();
diff --git a/test/query-applications.js b/test/query-applications.js
new file mode 100644
index 0000000..0597f25
--- /dev/null
+++ b/test/query-applications.js
@@ -0,0 +1,30 @@
+const jwt = require('jsonwebtoken');
+const axios = require('axios');
+require('dotenv').config({ path: './.env.local' });
+
+const JWT_SECRET = process.env.JWT_SECRET || 'super-secret-backone-key';
+
+async function main() {
+  console.log('Generating auth token...');
+  // Create a mock authenticated user token
+  const payload = {
+    id: 'mock-admin-id',
+    role: 'SUPER_ADMIN',
+    email: 'admin@backone.local',
+    site_uuid: 'mock-site-uuid'
+  };
+  const token = jwt.sign(payload, JWT_SECRET, { expiresIn: '1h' });
+  
+  console.log('Querying local backend `/api/dashboard/lookup/applications` with token...');
+  const res = await axios.get('http://127.0.0.1:3001/api/dashboard/lookup/applications', {
+    params: { limit: 5 },
+    headers: {
+      Cookie: `token=${token}`
+    }
+  });
+  
+  console.log('Response Status:', res.status);
+  console.log('Response Data:', JSON.stringify(res.data, null, 2));
+}
+
+main().catch(console.error);
diff --git a/test/read-all-pm2-logs.js b/test/read-all-pm2-logs.js
new file mode 100644
index 0000000..9cac104
--- /dev/null
+++ b/test/read-all-pm2-logs.js
@@ -0,0 +1,23 @@
+const { Client } = require('ssh2');
+
+const SSH = {
+  host: '103.185.47.52',
+  port: 2222,
+  username: 'adminbackend',
+  password: 'htEo7x6LsBQiEHHH',
+  readyTimeout: 60000
+};
+
+const conn = new Client();
+conn.on('ready', () => {
+  console.log('Reading PM2 default log files...');
+  conn.exec("ls -l ~/.pm2/logs/; tail -n 50 ~/.pm2/logs/backone-frontend-out.log; tail -n 50 ~/.pm2/logs/backone-frontend-error.log", (err, stream) => {
+    let out = '';
+    stream.on('data', d => out += d);
+    stream.on('close', () => {
+      console.log('--- DEFAULT PM2 LOG FILES ---');
+      console.log(out);
+      conn.end();
+    });
+  });
+}).connect(SSH);
diff --git a/test/read-apache-conf.js b/test/read-apache-conf.js
new file mode 100644
index 0000000..6c6cd67
--- /dev/null
+++ b/test/read-apache-conf.js
@@ -0,0 +1,22 @@
+const { Client } = require('ssh2');
+
+const SSH = {
+  host: '103.185.47.52',
+  port: 2222,
+  username: 'adminbackend',
+  password: 'htEo7x6LsBQiEHHH',
+  readyTimeout: 60000
+};
+
+const conn = new Client();
+conn.on('ready', () => {
+  conn.exec("cat /home/adminbackend/conf/web/demoplace.my.id/apache2.ssl.conf", (err, stream) => {
+    let out = '';
+    stream.on('data', d => out += d);
+    stream.on('close', () => {
+      console.log('--- REMOTE APACHE SSL CONF CONTENT ---');
+      console.log(out);
+      conn.end();
+    });
+  });
+}).connect(SSH);
diff --git a/test/read-backend-logs.js b/test/read-backend-logs.js
new file mode 100644
index 0000000..7f372f3
--- /dev/null
+++ b/test/read-backend-logs.js
@@ -0,0 +1,22 @@
+const { Client } = require('ssh2');
+
+const SSH = {
+  host: '103.185.47.52',
+  port: 2222,
+  username: 'adminbackend',
+  password: 'htEo7x6LsBQiEHHH',
+  readyTimeout: 60000
+};
+
+const conn = new Client();
+conn.on('ready', () => {
+  conn.exec("tail -n 50 /home/adminbackend/web/demoplace.my.id/public_html/logs/backend-out.log; tail -n 50 /home/adminbackend/web/demoplace.my.id/public_html/logs/backend-error.log", (err, stream) => {
+    let out = '';
+    stream.on('data', d => out += d);
+    stream.on('close', () => {
+      console.log('--- REMOTE BACKEND LOG FILES ---');
+      console.log(out);
+      conn.end();
+    });
+  });
+}).connect(SSH);
diff --git a/test/read-custom-nginx.js b/test/read-custom-nginx.js
new file mode 100644
index 0000000..5fcbd46
--- /dev/null
+++ b/test/read-custom-nginx.js
@@ -0,0 +1,22 @@
+const { Client } = require('ssh2');
+
+const SSH = {
+  host: '103.185.47.52',
+  port: 2222,
+  username: 'adminbackend',
+  password: 'htEo7x6LsBQiEHHH',
+  readyTimeout: 60000
+};
+
+const conn = new Client();
+conn.on('ready', () => {
+  conn.exec("ls -l /home/adminbackend/conf/web/demoplace.my.id/nginx.ssl.conf_* /home/adminbackend/conf/web/demoplace.my.id/apache2.ssl.conf_* 2>/dev/null; cat /home/adminbackend/conf/web/demoplace.my.id/nginx.ssl.conf_* 2>/dev/null", (err, stream) => {
+    let out = '';
+    stream.on('data', d => out += d);
+    stream.on('close', () => {
+      console.log('--- REMOTE NGINX CUSTOM CONFIG ---');
+      console.log(out);
+      conn.end();
+    });
+  });
+}).connect(SSH);
diff --git a/test/read-frontend-log-files.js b/test/read-frontend-log-files.js
new file mode 100644
index 0000000..85c0e65
--- /dev/null
+++ b/test/read-frontend-log-files.js
@@ -0,0 +1,22 @@
+const { Client } = require('ssh2');
+
+const SSH = {
+  host: '103.185.47.52',
+  port: 2222,
+  username: 'adminbackend',
+  password: 'htEo7x6LsBQiEHHH',
+  readyTimeout: 60000
+};
+
+const conn = new Client();
+conn.on('ready', () => {
+  conn.exec("tail -n 50 /home/adminbackend/web/demoplace.my.id/public_html/logs/frontend-out.log; tail -n 50 /home/adminbackend/web/demoplace.my.id/public_html/logs/frontend-error.log", (err, stream) => {
+    let out = '';
+    stream.on('data', d => out += d);
+    stream.on('close', () => {
+      console.log('--- REMOTE FRONTEND LOG FILES ---');
+      console.log(out);
+      conn.end();
+    });
+  });
+}).connect(SSH);
diff --git a/test/read-htaccess.js b/test/read-htaccess.js
new file mode 100644
index 0000000..f8abc2f
--- /dev/null
+++ b/test/read-htaccess.js
@@ -0,0 +1,22 @@
+const { Client } = require('ssh2');
+
+const SSH = {
+  host: '103.185.47.52',
+  port: 2222,
+  username: 'adminbackend',
+  password: 'htEo7x6LsBQiEHHH',
+  readyTimeout: 60000
+};
+
+const conn = new Client();
+conn.on('ready', () => {
+  conn.exec("cat /home/adminbackend/web/demoplace.my.id/public_html/.htaccess", (err, stream) => {
+    let out = '';
+    stream.on('data', d => out += d);
+    stream.on('close', () => {
+      console.log('--- REMOTE HTACCESS ---');
+      console.log(out);
+      conn.end();
+    });
+  });
+}).connect(SSH);
diff --git a/test/read-latest-backend-logs.js b/test/read-latest-backend-logs.js
new file mode 100644
index 0000000..3ee8120
--- /dev/null
+++ b/test/read-latest-backend-logs.js
@@ -0,0 +1,23 @@
+const { Client } = require('ssh2');
+
+const SSH = {
+  host: '103.185.47.52',
+  port: 2222,
+  username: 'adminbackend',
+  password: 'htEo7x6LsBQiEHHH',
+  readyTimeout: 60000
+};
+
+const conn = new Client();
+conn.on('ready', () => {
+  console.log('Fetching latest backend logs from PM2 default dir...');
+  conn.exec("tail -n 100 ~/.pm2/logs/backone-backend-out.log; tail -n 100 ~/.pm2/logs/backone-backend-error.log", (err, stream) => {
+    let out = '';
+    stream.on('data', d => out += d);
+    stream.on('close', () => {
+      console.log('--- LATEST BACKEND LOGS ---');
+      console.log(out);
+      conn.end();
+    });
+  });
+}).connect(SSH);
diff --git a/test/read-latest-errors.js b/test/read-latest-errors.js
new file mode 100644
index 0000000..0b78607
--- /dev/null
+++ b/test/read-latest-errors.js
@@ -0,0 +1,23 @@
+const { Client } = require('ssh2');
+
+const SSH = {
+  host: '103.185.47.52',
+  port: 2222,
+  username: 'adminbackend',
+  password: 'htEo7x6LsBQiEHHH',
+  readyTimeout: 60000
+};
+
+const conn = new Client();
+conn.on('ready', () => {
+  console.log('Fetching latest frontend error logs from PM2...');
+  conn.exec("tail -n 150 ~/.pm2/logs/backone-frontend-error.log", (err, stream) => {
+    let out = '';
+    stream.on('data', d => out += d);
+    stream.on('close', () => {
+      console.log('--- LATEST FRONTEND ERRORS ---');
+      console.log(out);
+      conn.end();
+    });
+  });
+}).connect(SSH);
diff --git a/test/read-nginx-conf.js b/test/read-nginx-conf.js
new file mode 100644
index 0000000..47c9afb
--- /dev/null
+++ b/test/read-nginx-conf.js
@@ -0,0 +1,22 @@
+const { Client } = require('ssh2');
+
+const SSH = {
+  host: '103.185.47.52',
+  port: 2222,
+  username: 'adminbackend',
+  password: 'htEo7x6LsBQiEHHH',
+  readyTimeout: 60000
+};
+
+const conn = new Client();
+conn.on('ready', () => {
+  conn.exec("cat /home/adminbackend/conf/web/demoplace.my.id/nginx.ssl.conf", (err, stream) => {
+    let out = '';
+    stream.on('data', d => out += d);
+    stream.on('close', () => {
+      console.log('--- REMOTE NGINX SSL CONF CONTENT ---');
+      console.log(out);
+      conn.end();
+    });
+  });
+}).connect(SSH);
diff --git a/test/read-nginx-domain-conf.js b/test/read-nginx-domain-conf.js
new file mode 100644
index 0000000..3753099
--- /dev/null
+++ b/test/read-nginx-domain-conf.js
@@ -0,0 +1,34 @@
+module.paths.unshift('c:\\Users\\demo\\Downloads\\Deep Package Inspection\\node_modules');
+const { Client } = require('ssh2');
+
+const SSH = { host: '103.185.47.52', port: 2222, username: 'adminbackend', password: 'htEo7x6LsBQiEHHH', readyTimeout: 60000 };
+
+async function main() {
+  const conn = new Client();
+  await new Promise((resolve, reject) => {
+    conn.on('ready', resolve).on('error', reject).connect(SSH);
+  });
+  console.log('SSH connected.');
+
+  const runCmd = (cmd) => {
+    return new Promise((resolve) => {
+      conn.exec(cmd, (err, stream) => {
+        if (err) { resolve(`Err: ${err.message}`); return; }
+        let out = '';
+        stream.on('data', d => out += d);
+        stream.on('close', () => resolve(out.trim()));
+      });
+    });
+  };
+
+  // Find Nginx confs for demoplace.my.id
+  const findConf = await runCmd('find /etc/nginx/ -name "*demoplace*" 2>/dev/null || echo "No find access"');
+  console.log('=== FIND DEMOPLACE NGINX ===\n', findConf);
+
+  const confContent = await runCmd('cat /etc/nginx/conf.d/domains/demoplace.my.id.conf || cat /etc/nginx/sites-enabled/demoplace.my.id || echo "No read access"');
+  console.log('=== DEMOPLACE CONF CONTENT ===\n', confContent);
+
+  conn.end();
+}
+
+main().catch(console.error);
diff --git a/test/read-pm2-logs.js b/test/read-pm2-logs.js
new file mode 100644
index 0000000..75d14f6
--- /dev/null
+++ b/test/read-pm2-logs.js
@@ -0,0 +1,22 @@
+const { Client } = require('ssh2');
+
+const SSH = {
+  host: '103.185.47.52',
+  port: 2222,
+  username: 'adminbackend',
+  password: 'htEo7x6LsBQiEHHH',
+  readyTimeout: 60000
+};
+
+const conn = new Client();
+conn.on('ready', () => {
+  conn.exec("/home/adminbackend/.npm-global/bin/pm2 logs backone-frontend --lines 50 --raw --nobuster", (err, stream) => {
+    let out = '';
+    stream.on('data', d => out += d);
+    stream.on('close', () => {
+      console.log('--- PM2 FRONTEND LOGS ---');
+      console.log(out);
+      conn.end();
+    });
+  });
+}).connect(SSH);
diff --git a/test/read-proxy-php.js b/test/read-proxy-php.js
new file mode 100644
index 0000000..e66c6ea
--- /dev/null
+++ b/test/read-proxy-php.js
@@ -0,0 +1,22 @@
+const { Client } = require('ssh2');
+
+const SSH = {
+  host: '103.185.47.52',
+  port: 2222,
+  username: 'adminbackend',
+  password: 'htEo7x6LsBQiEHHH',
+  readyTimeout: 60000
+};
+
+const conn = new Client();
+conn.on('ready', () => {
+  conn.exec("cat /home/adminbackend/web/demoplace.my.id/public_html/proxy.php", (err, stream) => {
+    let out = '';
+    stream.on('data', d => out += d);
+    stream.on('close', () => {
+      console.log('--- REMOTE PROXY PHP ---');
+      console.log(out);
+      conn.end();
+    });
+  });
+}).connect(SSH);
diff --git a/test/read-remote-client.js b/test/read-remote-client.js
new file mode 100644
index 0000000..6643345
--- /dev/null
+++ b/test/read-remote-client.js
@@ -0,0 +1,31 @@
+module.paths.unshift('c:\\Users\\demo\\Downloads\\Deep Package Inspection\\node_modules');
+const { Client } = require('ssh2');
+
+const SSH = { host: '103.185.47.52', port: 2222, username: 'adminbackend', password: 'htEo7x6LsBQiEHHH', readyTimeout: 60000 };
+
+async function main() {
+  const conn = new Client();
+  await new Promise((resolve, reject) => {
+    conn.on('ready', resolve).on('error', reject).connect(SSH);
+  });
+  console.log('SSH connected.');
+
+  const runCmd = (cmd) => {
+    return new Promise((resolve) => {
+      conn.exec(cmd, (err, stream) => {
+        if (err) { resolve(`Err: ${err.message}`); return; }
+        let out = '';
+        stream.on('data', d => out += d);
+        stream.stderr.on('data', d => out += d);
+        stream.on('close', () => resolve(out.trim()));
+      });
+    });
+  };
+
+  const code = await runCmd('cat /home/adminbackend/web/demoplace.my.id/public_html/proxy/netifyClient.js');
+  console.log(code);
+
+  conn.end();
+}
+
+main().catch(console.error);
diff --git a/test/read-remote-file.js b/test/read-remote-file.js
new file mode 100644
index 0000000..de8090c
--- /dev/null
+++ b/test/read-remote-file.js
@@ -0,0 +1,22 @@
+const { Client } = require('ssh2');
+
+const SSH = {
+  host: '103.185.47.52',
+  port: 2222,
+  username: 'adminbackend',
+  password: 'htEo7x6LsBQiEHHH',
+  readyTimeout: 60000
+};
+
+const conn = new Client();
+conn.on('ready', () => {
+  conn.exec("cat /home/adminbackend/web/demoplace.my.id/public_html/src/app/\\(dashboard\\)/agents/page.tsx", (err, stream) => {
+    let out = '';
+    stream.on('data', d => out += d);
+    stream.on('close', () => {
+      console.log('--- REMOTE FILE CONTENT ---');
+      console.log(out);
+      conn.end();
+    });
+  });
+}).connect(SSH);
diff --git a/test/read-remote-telemetry.js b/test/read-remote-telemetry.js
new file mode 100644
index 0000000..33c47cb
--- /dev/null
+++ b/test/read-remote-telemetry.js
@@ -0,0 +1,31 @@
+module.paths.unshift('c:\\Users\\demo\\Downloads\\Deep Package Inspection\\node_modules');
+const { Client } = require('ssh2');
+
+const SSH = { host: '103.185.47.52', port: 2222, username: 'adminbackend', password: 'htEo7x6LsBQiEHHH', readyTimeout: 60000 };
+
+async function main() {
+  const conn = new Client();
+  await new Promise((resolve, reject) => {
+    conn.on('ready', resolve).on('error', reject).connect(SSH);
+  });
+  console.log('SSH connected.');
+
+  const runCmd = (cmd) => {
+    return new Promise((resolve) => {
+      conn.exec(cmd, (err, stream) => {
+        if (err) { resolve(`Err: ${err.message}`); return; }
+        let out = '';
+        stream.on('data', d => out += d);
+        stream.stderr.on('data', d => out += d);
+        stream.on('close', () => resolve(out.trim()));
+      });
+    });
+  };
+
+  const code = await runCmd('cat /home/adminbackend/web/demoplace.my.id/public_html/proxy/netifyTelemetry.js');
+  console.log(code);
+
+  conn.end();
+}
+
+main().catch(console.error);
diff --git a/test/read-start-with-env.js b/test/read-start-with-env.js
new file mode 100644
index 0000000..e14163a
--- /dev/null
+++ b/test/read-start-with-env.js
@@ -0,0 +1,22 @@
+const { Client } = require('ssh2');
+
+const SSH = {
+  host: '103.185.47.52',
+  port: 2222,
+  username: 'adminbackend',
+  password: 'htEo7x6LsBQiEHHH',
+  readyTimeout: 60000
+};
+
+const conn = new Client();
+conn.on('ready', () => {
+  conn.exec("cat /home/adminbackend/web/demoplace.my.id/public_html/start-with-env.js", (err, stream) => {
+    let out = '';
+    stream.on('data', d => out += d);
+    stream.on('close', () => {
+      console.log('--- start-with-env.js CONTENT ---');
+      console.log(out);
+      conn.end();
+    });
+  });
+}).connect(SSH);
diff --git a/test/remote-pm2-check.js b/test/remote-pm2-check.js
new file mode 100644
index 0000000..ada8b13
--- /dev/null
+++ b/test/remote-pm2-check.js
@@ -0,0 +1,36 @@
+module.paths.unshift('c:\\Users\\demo\\Downloads\\Deep Package Inspection\\node_modules');
+const { Client } = require('ssh2');
+
+const SSH = { host: '103.185.47.52', port: 2222, username: 'adminbackend', password: 'htEo7x6LsBQiEHHH', readyTimeout: 60000 };
+
+async function main() {
+  const conn = new Client();
+  await new Promise((resolve, reject) => {
+    conn.on('ready', resolve).on('error', reject).connect(SSH);
+  });
+  console.log('SSH connected.');
+
+  const runCmd = (cmd) => {
+    return new Promise((resolve) => {
+      conn.exec(cmd, (err, stream) => {
+        if (err) { resolve(`Err: ${err.message}`); return; }
+        let out = '';
+        stream.on('data', d => out += d);
+        stream.on('close', () => resolve(out.trim()));
+      });
+    });
+  };
+
+  const pm2List = await runCmd('pm2 list || npx pm2 list');
+  console.log('=== PM2 LIST ===\n', pm2List);
+
+  const psAux = await runCmd('ps aux | grep node');
+  console.log('\n=== PS AUX NODE ===\n', psAux);
+
+  const pwdInfo = await runCmd('ls -la /home/adminbackend/web/demoplace.my.id/public_html');
+  console.log('\n=== PUBLIC_HTML DIR ===\n', pwdInfo.substring(0, 1000));
+
+  conn.end();
+}
+
+main().catch(console.error);
diff --git a/test/sidebar_styling_test.js b/test/sidebar_styling_test.js
new file mode 100644
index 0000000..63494f2
--- /dev/null
+++ b/test/sidebar_styling_test.js
@@ -0,0 +1,118 @@
+// test/sidebar_styling_test.js
+const fs = require('fs');
+const path = require('path');
+
+const sidebarPath = path.join(__dirname, '../src/components/layout/Sidebar.tsx');
+const siteSelectorPath = path.join(__dirname, '../src/components/layout/SidebarSiteSelector.tsx');
+const timeSelectorPath = path.join(__dirname, '../src/components/layout/SidebarTimeSelector.tsx');
+const globalsCssPath = path.join(__dirname, '../src/app/globals.css');
+const agentsPagePath = path.join(__dirname, '../src/app/(dashboard)/agents/page.tsx');
+
+let testCount = 0;
+let passedCount = 0;
+
+function assert(label, condition) {
+  testCount++;
+  if (condition) {
+    console.log(`  ✓ PASSED: ${label}`);
+    passedCount++;
+  } else {
+    console.error(`  ✗ FAILED: ${label}`);
+  }
+}
+
+function runTests() {
+  console.log('\n=========================================');
+  console.log('  RUNNING TDD TESTS FOR SIDEBAR & PAGE STYLING');
+  console.log('=========================================\n');
+
+  try {
+    const sidebarContent = fs.readFileSync(sidebarPath, 'utf8');
+    assert(
+      'Sidebar.tsx should use Times New Roman font family stack',
+      sidebarContent.includes("'Times New Roman', Times, serif")
+    );
+    assert(
+      'Sidebar.tsx link items should be compact (text-xs or text-[13px])',
+      sidebarContent.includes('text-xs') || sidebarContent.includes('text-[13px]')
+    );
+  } catch (err) {
+    assert(`Sidebar.tsx read error: ${err.message}`, false);
+  }
+
+  try {
+    const siteSelectorContent = fs.readFileSync(siteSelectorPath, 'utf8');
+    assert(
+      'SidebarSiteSelector.tsx should use Times New Roman font family stack',
+      siteSelectorContent.includes("'Times New Roman', Times, serif")
+    );
+    assert(
+      'SidebarSiteSelector.tsx label should use correct size (text-[9.5px] to text-[10.5px])',
+      siteSelectorContent.includes('text-[10px]') || siteSelectorContent.includes('text-[10.5px]') || siteSelectorContent.includes('text-[9.5px]')
+    );
+    assert(
+      'SidebarSiteSelector.tsx value should use correct size (text-xs or text-sm)',
+      siteSelectorContent.includes('text-xs') || siteSelectorContent.includes('text-sm') || siteSelectorContent.includes('text-[13.5px]')
+    );
+  } catch (err) {
+    assert(`SidebarSiteSelector.tsx read error: ${err.message}`, false);
+  }
+
+  try {
+    const timeSelectorContent = fs.readFileSync(timeSelectorPath, 'utf8');
+    assert(
+      'SidebarTimeSelector.tsx should use Times New Roman font family stack',
+      timeSelectorContent.includes("'Times New Roman', Times, serif")
+    );
+    assert(
+      'SidebarTimeSelector.tsx label should use correct size (text-[9.5px] to text-[10.5px])',
+      timeSelectorContent.includes('text-[10px]') || timeSelectorContent.includes('text-[10.5px]') || timeSelectorContent.includes('text-[9.5px]')
+    );
+    assert(
+      'SidebarTimeSelector.tsx value should use correct size (text-xs or text-sm)',
+      timeSelectorContent.includes('text-xs') || timeSelectorContent.includes('text-sm') || timeSelectorContent.includes('text-[13.5px]')
+    );
+  } catch (err) {
+    assert(`SidebarTimeSelector.tsx read error: ${err.message}`, false);
+  }
+
+  try {
+    const globalsCssContent = fs.readFileSync(globalsCssPath, 'utf8');
+    assert(
+      'globals.css body rule should enforce Times New Roman font-family',
+      globalsCssContent.includes("font-family: 'Times New Roman', Times, serif;")
+    );
+  } catch (err) {
+    assert(`globals.css read error: ${err.message}`, false);
+  }
+
+  try {
+    const agentsPageContent = fs.readFileSync(agentsPagePath, 'utf8');
+    assert(
+      'agents/page.tsx should display "Agents Inventory" title',
+      agentsPageContent.includes('Agents Inventory')
+    );
+    assert(
+      'agents/page.tsx should display subtitle description',
+      agentsPageContent.includes('Managed DPI probes, remote collectors, and probe infrastructure.')
+    );
+    assert(
+      'agents/page.tsx header should not render the Server icon',
+      !agentsPageContent.includes('<Server className=') && !agentsPageContent.includes('<Server ')
+    );
+  } catch (err) {
+    assert(`agents/page.tsx read error: ${err.message}`, false);
+  }
+
+  console.log('\n=========================================');
+  console.log(`  RESULT: ${passedCount}/${testCount} tests passed`);
+  console.log('=========================================\n');
+
+  if (passedCount !== testCount) {
+    process.exit(1);
+  } else {
+    process.exit(0);
+  }
+}
+
+runTests();
diff --git a/test/sync_test.js b/test/sync_test.js
new file mode 100644
index 0000000..fc6502b
--- /dev/null
+++ b/test/sync_test.js
@@ -0,0 +1,197 @@
+// test/sync_test.js
+// TDD Integration Test: Verifikasi sinkronisasi 100% file antara Localhost dan Domain
+'use strict';
+
+const { Client } = require('ssh2');
+const fs = require('fs');
+const path = require('path');
+const crypto = require('crypto');
+
+// Load environment variables if available
+try {
+  require('dotenv').config({ path: path.join(__dirname, '../.env.local') });
+} catch (e) {}
+
+const SSH = {
+  host: '103.185.47.52',
+  port: 2222,
+  username: 'adminbackend',
+  password: 'htEo7x6LsBQiEHHH',
+  readyTimeout: 60000
+};
+
+const REMOTE_ROOT = '/home/adminbackend/web/demoplace.my.id/public_html';
+const LOCAL_ROOT = path.join(__dirname, '..');
+
+let testCount = 0;
+let passedCount = 0;
+
+function assert(label, condition) {
+  testCount++;
+  if (condition) {
+    console.log(`  ✓ PASSED: ${label}`);
+    passedCount++;
+  } else {
+    console.error(`  ✗ FAILED: ${label}`);
+  }
+}
+
+function getMD5(filePath) {
+  try {
+    const data = fs.readFileSync(filePath);
+    return crypto.createHash('md5').update(data).digest('hex');
+  } catch (e) {
+    return null;
+  }
+}
+
+function getFilesLocal(dir, files = []) {
+  const list = fs.readdirSync(dir);
+  for (const item of list) {
+    const fullPath = path.join(dir, item);
+    const stat = fs.statSync(fullPath);
+    if (stat.isDirectory()) {
+      if (item !== 'node_modules' && item !== '.next' && item !== '.git') {
+        getFilesLocal(fullPath, files);
+      }
+    } else {
+      files.push(path.relative(LOCAL_ROOT, fullPath).replace(/\\/g, '/'));
+    }
+  }
+  return files;
+}
+
+const remoteScript = `
+const fs = require('fs');
+const path = require('path');
+const crypto = require('crypto');
+
+const root = '/home/adminbackend/web/demoplace.my.id/public_html';
+
+function getMD5(filePath) {
+  try {
+    const data = fs.readFileSync(filePath);
+    return crypto.createHash('md5').update(data).digest('hex');
+  } catch (e) {
+    return null;
+  }
+}
+
+function getFilesRemote(dir, files = {}) {
+  try {
+    const list = fs.readdirSync(dir);
+    for (const item of list) {
+      const fullPath = path.join(dir, item);
+      const stat = fs.statSync(fullPath);
+      if (stat.isDirectory()) {
+        if (item !== 'node_modules' && item !== '.next' && item !== '.git') {
+          getFilesRemote(fullPath, files);
+        }
+      } else {
+        const rel = path.relative(root, fullPath);
+        files[rel] = { md5: getMD5(fullPath), size: stat.size };
+      }
+    }
+  } catch(e) {}
+  return files;
+}
+
+const filesMap = {};
+getFilesRemote(path.join(root, 'src'), filesMap);
+getFilesRemote(path.join(root, 'public'), filesMap);
+getFilesRemote(path.join(root, 'backend'), filesMap);
+getFilesRemote(path.join(root, 'proxy'), filesMap);
+
+const rootConfigs = ['package.json', 'tsconfig.json', 'next.config.ts', '.env.production'];
+for (const f of rootConfigs) {
+  const full = path.join(root, f);
+  if (fs.existsSync(full)) {
+    const stat = fs.statSync(full);
+    filesMap[f] = { md5: getMD5(full), size: stat.size };
+  }
+}
+
+console.log(JSON.stringify(filesMap));
+`;
+
+async function runTests() {
+  console.log('\n=========================================');
+  console.log('  RUNNING TDD SYNC COMPARISON TESTS');
+  console.log('=========================================\n');
+
+  let remoteFiles = {};
+  try {
+    const conn = new Client();
+    const remoteFilesStr = await new Promise((resolve, reject) => {
+      conn.on('ready', () => {
+        const b64 = Buffer.from(remoteScript).toString('base64');
+        conn.exec(`echo "${b64}" | base64 -d | node`, (err, stream) => {
+          if (err) return reject(err);
+          let out = '';
+          let errOut = '';
+          stream.on('data', d => out += d);
+          stream.stderr.on('data', d => errOut += d);
+          stream.on('close', () => {
+            conn.end();
+            if (errOut.trim()) {
+              reject(new Error(errOut));
+            } else {
+              resolve(out);
+            }
+          });
+        });
+      }).on('error', reject).connect(SSH);
+    });
+    
+    remoteFiles = JSON.parse(remoteFilesStr);
+    console.log('✓ Connected to remote server and retrieved remote file list.');
+  } catch (err) {
+    console.error('✗ Failed to connect to remote server:', err.message);
+    process.exit(1);
+  }
+
+  // Get local files
+  const localFiles = {};
+  const pathsToCheck = ['src', 'public', 'backend', 'proxy'];
+  for (const p of pathsToCheck) {
+    const full = path.join(LOCAL_ROOT, p);
+    if (fs.existsSync(full)) {
+      const files = getFilesLocal(full);
+      for (const f of files) {
+        const localPath = path.join(LOCAL_ROOT, f);
+        localFiles[f] = { md5: getMD5(localPath) };
+      }
+    }
+  }
+  const rootConfigs = ['package.json', 'tsconfig.json', 'next.config.ts', '.env.production'];
+  for (const f of rootConfigs) {
+    const full = path.join(LOCAL_ROOT, f);
+    if (fs.existsSync(full)) {
+      localFiles[f] = { md5: getMD5(full) };
+    }
+  }
+
+  // Perform assertions
+  for (const [relPath, info] of Object.entries(remoteFiles)) {
+    const localInfo = localFiles[relPath];
+    assert(`File "${relPath}" should exist locally`, !!localInfo);
+    if (localInfo) {
+      assert(`File "${relPath}" content should match remote exactly`, localInfo.md5 === info.md5);
+    }
+  }
+
+  console.log(`\n=========================================`);
+  console.log(`  RESULT: ${passedCount} / ${testCount} tests passed.`);
+  console.log(`=========================================\n`);
+
+  if (passedCount !== testCount) {
+    process.exit(1);
+  } else {
+    process.exit(0);
+  }
+}
+
+runTests().catch(e => {
+  console.error('[FATAL]', e.message);
+  process.exit(1);
+});
diff --git a/test/test-actions-agents.js b/test/test-actions-agents.js
new file mode 100644
index 0000000..c104631
--- /dev/null
+++ b/test/test-actions-agents.js
@@ -0,0 +1,20 @@
+const path = require('path');
+require('dotenv').config({ path: path.join(__dirname, '../.env.local') });
+
+const { getAgents } = require('../src/lib/actions/agents');
+
+async function main() {
+  const siteUuid = '6681452d_9cae_4ff4_8ae8_0d504774265e';
+  console.log('Calling getAgents with site_uuid:', siteUuid);
+  try {
+    const agents = await getAgents(siteUuid);
+    console.log(`Returned ${agents.length} agents:`);
+    agents.forEach(a => {
+      console.log(`- ID: ${a.id}, UUID: ${a.uuid}, Label: ${a.label}, Status: ${a.last_seen_at?.human}`);
+    });
+  } catch (err) {
+    console.error('Error:', err.message);
+  }
+}
+
+main();
diff --git a/test/test-assets.js b/test/test-assets.js
new file mode 100644
index 0000000..7c3159b
--- /dev/null
+++ b/test/test-assets.js
@@ -0,0 +1,28 @@
+const axios = require('axios');
+
+async function main() {
+  console.log('Fetching /login HTML to find asset paths...');
+  const res = await axios.get('https://demoplace.my.id/login');
+  const html = res.data;
+  
+  // Find a CSS asset path
+  const cssMatch = html.match(/\/_next\/static\/chunks\/[a-zA-Z0-9_-]+\.css/);
+  if (cssMatch) {
+    const cssPath = cssMatch[0];
+    console.log('Found CSS path:', cssPath);
+    console.log('Fetching CSS asset from domain...');
+    try {
+      const cssRes = await axios.get(`https://demoplace.my.id${cssPath}`);
+      console.log('CSS Status:', cssRes.status);
+      console.log('CSS Content-Type:', cssRes.headers['content-type']);
+      console.log('CSS Content-Length:', cssRes.headers['content-length']);
+      console.log('CSS Content snippet:', cssRes.data.substring(0, 200));
+    } catch (err) {
+      console.error('Failed to fetch CSS:', err.message);
+    }
+  } else {
+    console.log('No CSS asset path match found in HTML!');
+  }
+}
+
+main().catch(console.error);
diff --git a/test/test-domain-endpoints.js b/test/test-domain-endpoints.js
new file mode 100644
index 0000000..d787516
--- /dev/null
+++ b/test/test-domain-endpoints.js
@@ -0,0 +1,48 @@
+const axios = require('axios');
+
+async function main() {
+  console.log('Logging in to remote server...');
+  const loginRes = await axios.post('https://demoplace.my.id/api/auth/login', {
+    username: 'admin',
+    password: 'admin'
+  });
+  
+  const cookie = loginRes.headers['set-cookie'];
+  const headers = {
+    Cookie: cookie ? cookie.join('; ') : ''
+  };
+
+  console.log('\n--- API: /api/auth/me ---');
+  try {
+    const res = await axios.get('https://demoplace.my.id/api/auth/me', { headers });
+    console.log(JSON.stringify(res.data, null, 2));
+  } catch (err) {
+    console.error(err.message);
+  }
+
+  console.log('\n--- API: /api/auth/admin/users ---');
+  try {
+    const res = await axios.get('https://demoplace.my.id/api/auth/admin/users', { headers });
+    console.log(JSON.stringify(res.data, null, 2));
+  } catch (err) {
+    console.error(err.message);
+  }
+
+  console.log('\n--- API: /api/dashboard/agents ---');
+  try {
+    const res = await axios.get('https://demoplace.my.id/api/dashboard/agents', { headers });
+    console.log(JSON.stringify(res.data, null, 2));
+  } catch (err) {
+    console.error(err.message);
+  }
+
+  console.log('\n--- API: /api/dashboard/agents/uptime ---');
+  try {
+    const res = await axios.get('https://demoplace.my.id/api/dashboard/agents/uptime', { headers });
+    console.log(JSON.stringify(res.data, null, 2));
+  } catch (err) {
+    console.error(err.message);
+  }
+}
+
+main().catch(console.error);
diff --git a/test/test-fetch.js b/test/test-fetch.js
new file mode 100644
index 0000000..5c25ee5
--- /dev/null
+++ b/test/test-fetch.js
@@ -0,0 +1,15 @@
+const path = require('path');
+require('dotenv').config({ path: './.env.local' });
+const { netifyFetch } = require('../proxy/netifyClientCore');
+
+async function main() {
+  console.log('Testing netifyFetch...');
+  console.log('API Key:', process.env.NETIFY_API_KEY);
+  
+  const start = Date.now();
+  const data = await netifyFetch('/lookup/applications', { settings_limit: 5 });
+  console.log('Done in:', Date.now() - start, 'ms');
+  console.log('Data:', data);
+}
+
+main().catch(console.error);
diff --git a/test/test-filter.js b/test/test-filter.js
new file mode 100644
index 0000000..e861ddf
--- /dev/null
+++ b/test/test-filter.js
@@ -0,0 +1,20 @@
+const mongoose = require('mongoose');
+
+async function main() {
+  const LOCAL_URI = 'mongodb://127.0.0.1:27017/backone_dpi';
+  await mongoose.connect(LOCAL_URI);
+  const db = mongoose.connection.db;
+  
+  const filter = { agent_uuid: { $ne: null } };
+  
+  const results = await db.collection('summaries')
+    .aggregate([
+      { $match: filter },
+      { $sort: { timestamp: -1 } },
+      { $group: { _id: '$agent_uuid', lastSeen: { $first: '$timestamp' }, label: { $first: '$agent_label' } } },
+    ]).toArray();
+    
+  console.log('Aggregated agents without site filter:', results);
+  await mongoose.disconnect();
+}
+main();
diff --git a/test/test-limit-all.js b/test/test-limit-all.js
new file mode 100644
index 0000000..18dfcf2
--- /dev/null
+++ b/test/test-limit-all.js
@@ -0,0 +1,16 @@
+const { netifyFetch } = require('../proxy/netifyClientCore');
+require('dotenv').config({ path: './.env.local' });
+
+async function main() {
+  console.log('Fetching with limit 5000...');
+  const start = Date.now();
+  const data = await netifyFetch('/lookup/applications', { settings_limit: 5000 });
+  console.log('Done in:', Date.now() - start, 'ms');
+  console.log('Returned items count:', data?.length);
+  if (data && data.length > 0) {
+    console.log('First item:', data[0].id, data[0].name);
+    console.log('Last item:', data[data.length - 1].id, data[data.length - 1].name);
+  }
+}
+
+main().catch(console.error);
diff --git a/test/test-local-api.js b/test/test-local-api.js
new file mode 100644
index 0000000..9495e99
--- /dev/null
+++ b/test/test-local-api.js
@@ -0,0 +1,30 @@
+const axios = require('axios');
+
+async function main() {
+  console.log('Logging in to localhost...');
+  const loginRes = await axios.post('http://localhost:3001/api/auth/login', {
+    username: 'admin',
+    password: 'admin'
+  });
+  
+  const cookie = loginRes.headers['set-cookie'];
+  console.log('Login successful. Cookies:', cookie);
+  
+  console.log('Fetching /api/auth/me...');
+  const meRes = await axios.get('http://localhost:3001/api/auth/me', {
+    headers: {
+      Cookie: cookie ? cookie.join('; ') : ''
+    }
+  });
+  console.log('/api/auth/me response:', meRes.data);
+  
+  console.log('Fetching /api/auth/admin/users...');
+  const usersRes = await axios.get('http://localhost:3001/api/auth/admin/users', {
+    headers: {
+      Cookie: cookie ? cookie.join('; ') : ''
+    }
+  });
+  console.log('/api/auth/admin/users response:', usersRes.data);
+}
+
+main().catch(console.error);
diff --git a/test/test-localhost-page.js b/test/test-localhost-page.js
new file mode 100644
index 0000000..41dd612
--- /dev/null
+++ b/test/test-localhost-page.js
@@ -0,0 +1,24 @@
+const axios = require('axios');
+
+async function main() {
+  console.log('Logging in to localhost Next.js server on port 3000...');
+  const loginRes = await axios.post('http://localhost:3000/api/auth/login', {
+    username: 'admin',
+    password: 'admin'
+  });
+  
+  const cookie = loginRes.headers['set-cookie'];
+  const headers = {
+    Cookie: cookie ? cookie.join('; ') : ''
+  };
+
+  console.log('Fetching localhost /api/auth/admin/users...');
+  const res = await axios.get('http://localhost:3000/api/auth/admin/users', { headers });
+  console.log('Total users returned:', res.data.data.length);
+  console.log('Users list:');
+  res.data.data.forEach(u => {
+    console.log(`- Username: ${u.username}, Role: ${u.role}, Site: ${u.site_uuid}`);
+  });
+}
+
+main().catch(console.error);
diff --git a/test/test-mongoose-instances.js b/test/test-mongoose-instances.js
new file mode 100644
index 0000000..ce7ad80
--- /dev/null
+++ b/test/test-mongoose-instances.js
@@ -0,0 +1,6 @@
+const rootMongoose = require('mongoose');
+const proxyMongoose = require('../proxy/node_modules/mongoose');
+
+console.log('Root Mongoose === Proxy Mongoose:', rootMongoose === proxyMongoose);
+console.log('Root Mongoose version:', rootMongoose.version);
+console.log('Proxy Mongoose version:', proxyMongoose.version);
diff --git a/test/test-page-items.js b/test/test-page-items.js
new file mode 100644
index 0000000..ddd1ba8
--- /dev/null
+++ b/test/test-page-items.js
@@ -0,0 +1,12 @@
+const { netifyFetch } = require('../proxy/netifyClientCore');
+require('dotenv').config({ path: './.env.local' });
+
+async function main() {
+  const p1 = await netifyFetch('/lookup/applications', { settings_limit: 5, settings_page: 1 });
+  const p2 = await netifyFetch('/lookup/applications', { settings_limit: 5, settings_page: 2 });
+  
+  console.log('Page 1 items:', p1.map(x => ({ id: x.id, name: x.name })));
+  console.log('Page 2 items:', p2.map(x => ({ id: x.id, name: x.name })));
+}
+
+main().catch(console.error);
diff --git a/test/test-page.js b/test/test-page.js
new file mode 100644
index 0000000..cb3697e
--- /dev/null
+++ b/test/test-page.js
@@ -0,0 +1,18 @@
+const { netifyFetch } = require('../proxy/netifyClientCore');
+require('dotenv').config({ path: './.env.local' });
+
+async function main() {
+  const p1 = await netifyFetch('/lookup/applications', { settings_limit: 5, settings_page: 1 });
+  const p2 = await netifyFetch('/lookup/applications', { settings_limit: 5, settings_page: 2 });
+  
+  console.log('Page 1 length:', p1?.length);
+  console.log('Page 2 length:', p2?.length);
+  if (p1 && p1.length > 0) {
+    console.log('Page 1 first item:', p1[0].id, p1[0].name);
+  }
+  if (p2 && p2.length > 0) {
+    console.log('Page 2 first item:', p2[0].id, p2[0].name);
+  }
+}
+
+main().catch(console.error);
diff --git a/test/test-read-persistence.js b/test/test-read-persistence.js
new file mode 100644
index 0000000..ff90791
--- /dev/null
+++ b/test/test-read-persistence.js
@@ -0,0 +1,16 @@
+const mongoose = require('mongoose');
+
+async function main() {
+  const uri = 'mongodb://127.0.0.1:27017/backone_dpi';
+  await mongoose.connect(uri);
+  
+  const count = await mongoose.connection.db.collection('lookupapps').countDocuments({});
+  console.log('Count inside reader:', count);
+  
+  const doc = await mongoose.connection.db.collection('lookupapps').findOne({ id: 99999 });
+  console.log('Found document:', doc);
+  
+  await mongoose.disconnect();
+}
+
+main().catch(console.error);
diff --git a/test/test-remote-db-connection.js b/test/test-remote-db-connection.js
new file mode 100644
index 0000000..44118c9
--- /dev/null
+++ b/test/test-remote-db-connection.js
@@ -0,0 +1,38 @@
+const { Client } = require('ssh2');
+
+const SSH = {
+  host: '103.185.47.52',
+  port: 2222,
+  username: 'adminbackend',
+  password: 'htEo7x6LsBQiEHHH',
+  readyTimeout: 60000
+};
+
+const remoteJs = `
+const net = require('net');
+const s = net.createConnection(27017, 'mongodb.prod.proit.id', () => {
+  console.log('SUCCESS: Connected to mongodb.prod.proit.id from remote server!');
+  s.destroy();
+}).on('error', e => {
+  console.error('FAILED: ' + e.message);
+});
+`;
+
+const conn = new Client();
+conn.on('ready', () => {
+  const b64 = Buffer.from(remoteJs).toString('base64');
+  conn.exec(`echo "${b64}" | base64 -d | node`, (err, stream) => {
+    if (err) {
+      console.error(err);
+      conn.end();
+      return;
+    }
+    let out = '';
+    stream.on('data', d => out += d);
+    stream.on('close', () => {
+      console.log('Result from remote:');
+      console.log(out.trim());
+      conn.end();
+    });
+  });
+}).on('error', console.error).connect(SSH);
diff --git a/test/test-remote-db-size-direct.js b/test/test-remote-db-size-direct.js
new file mode 100644
index 0000000..f589124
--- /dev/null
+++ b/test/test-remote-db-size-direct.js
@@ -0,0 +1,61 @@
+const { Client } = require('ssh2');
+const net = require('net');
+const { MongoClient } = require('mongodb');
+
+const sshConfig = {
+  host: '103.185.47.52',
+  port: 2222,
+  username: 'adminbackend',
+  password: 'htEo7x6LsBQiEHHH',
+  readyTimeout: 60000
+};
+
+const LOCAL_PORT = 27019;
+const REMOTE_MONGO_HOST = 'mongodb.prod.proit.id';
+const REMOTE_MONGO_PORT = 27017;
+
+const conn = new Client();
+const server = net.createServer((sock) => {
+  conn.forwardOut(
+    '127.0.0.1',
+    sock.remotePort,
+    REMOTE_MONGO_HOST,
+    REMOTE_MONGO_PORT,
+    (err, stream) => {
+      if (err) {
+        sock.destroy();
+        return;
+      }
+      sock.pipe(stream);
+      stream.pipe(sock);
+    }
+  );
+});
+
+conn.on('ready', () => {
+  server.listen(LOCAL_PORT, '127.0.0.1', async () => {
+    console.log(`SSH Tunnel established on port ${LOCAL_PORT}`);
+    try {
+      const REMOTE_URI = `mongodb://backone_user:SusuKudaLiar@127.0.0.1:${LOCAL_PORT}/backone_dpi?authSource=backone_dpi&directConnection=true`;
+      const client = new MongoClient(REMOTE_URI, { serverSelectionTimeoutMS: 5000 });
+      await client.connect();
+      const db = client.db('backone_dpi');
+      console.log('Connected to remote database.');
+      const collections = await db.listCollections().toArray();
+      console.log('\nCollections and document counts:');
+      for (const col of collections) {
+        const count = await db.collection(col.name).countDocuments({});
+        console.log(`- ${col.name}: ${count} documents`);
+      }
+      await client.close();
+    } catch (e) {
+      console.error('Error:', e.message);
+    } finally {
+      server.close();
+      conn.end();
+      console.log('Tunnel closed.');
+    }
+  });
+}).on('error', (err) => {
+  console.error('SSH Error:', err.message);
+}).connect(sshConfig);
diff --git a/test/test-remote-db-size.js b/test/test-remote-db-size.js
new file mode 100644
index 0000000..567fdea
--- /dev/null
+++ b/test/test-remote-db-size.js
@@ -0,0 +1,61 @@
+const { Client } = require('ssh2');
+const net = require('net');
+const { MongoClient } = require('mongodb');
+
+const sshConfig = {
+  host: '103.185.47.52',
+  port: 2222,
+  username: 'adminbackend',
+  password: 'htEo7x6LsBQiEHHH',
+  readyTimeout: 60000
+};
+
+const LOCAL_PORT = 27019; // use 27019 to avoid conflicts
+const REMOTE_MONGO_HOST = 'mongodb.prod.proit.id';
+const REMOTE_MONGO_PORT = 27017;
+
+const conn = new Client();
+const server = net.createServer((sock) => {
+  conn.forwardOut(
+    '127.0.0.1',
+    sock.remotePort,
+    REMOTE_MONGO_HOST,
+    REMOTE_MONGO_PORT,
+    (err, stream) => {
+      if (err) {
+        sock.destroy();
+        return;
+      }
+      sock.pipe(stream);
+      stream.pipe(sock);
+    }
+  );
+});
+
+conn.on('ready', () => {
+  server.listen(LOCAL_PORT, '127.0.0.1', async () => {
+    console.log(`SSH Tunnel established on port ${LOCAL_PORT}`);
+    try {
+      const REMOTE_URI = `mongodb://backone_user:SusuKudaLiar@127.0.0.1:${LOCAL_PORT}/backone_dpi?authSource=backone_dpi`;
+      const client = new MongoClient(REMOTE_URI, { serverSelectionTimeoutMS: 5000 });
+      await client.connect();
+      const db = client.db('backone_dpi');
+      console.log('Connected to remote database.');
+      const collections = await db.listCollections().toArray();
+      console.log('\nCollections and document counts:');
+      for (const col of collections) {
+        const count = await db.collection(col.name).countDocuments({});
+        console.log(`- ${col.name}: ${count} documents`);
+      }
+      await client.close();
+    } catch (e) {
+      console.error('Error:', e.message);
+    } finally {
+      server.close();
+      conn.end();
+      console.log('Tunnel closed.');
+    }
+  });
+}).on('error', (err) => {
+  console.error('SSH Error:', err.message);
+}).connect(sshConfig);
diff --git a/test/test-remote-me.js b/test/test-remote-me.js
new file mode 100644
index 0000000..e67c710
--- /dev/null
+++ b/test/test-remote-me.js
@@ -0,0 +1,31 @@
+const axios = require('axios');
+
+async function main() {
+  console.log('Logging in to remote server...');
+  const loginRes = await axios.post('https://demoplace.my.id/api/auth/login', {
+    username: 'admin',
+    password: 'admin'
+  });
+  
+  const cookie = loginRes.headers['set-cookie'];
+  console.log('Login successful. Cookies:', cookie);
+  
+  console.log('Fetching /api/auth/me ...');
+  try {
+    const meRes = await axios.get('https://demoplace.my.id/api/auth/me', {
+      headers: {
+        Cookie: cookie ? cookie.join('; ') : ''
+      }
+    });
+    console.log('Me status:', meRes.status);
+    console.log('Me response:', meRes.data);
+  } catch (err) {
+    if (err.response) {
+      console.error('Me failed. Status:', err.response.status, 'Response:', err.response.data);
+    } else {
+      console.error('Me failed. Error:', err.message);
+    }
+  }
+}
+
+main().catch(console.error);
diff --git a/test/test-retention.js b/test/test-retention.js
new file mode 100644
index 0000000..0736464
--- /dev/null
+++ b/test/test-retention.js
@@ -0,0 +1,19 @@
+const proxyMongoose = require('../proxy/node_modules/mongoose');
+require('dotenv').config({ path: './.env.local' });
+const { LookupApp } = require('../proxy/models/Schemas');
+
+async function main() {
+  const uri = process.env.MONGODB_URI || 'mongodb://127.0.0.1:27017/backone_dpi';
+  await proxyMongoose.connect(uri);
+  
+  console.log('Count at start:', await LookupApp.countDocuments({}));
+  
+  console.log('Sleeping for 10 seconds...');
+  await new Promise(resolve => setTimeout(resolve, 10000));
+  
+  console.log('Count after 10 seconds:', await LookupApp.countDocuments({}));
+  
+  await proxyMongoose.disconnect();
+}
+
+main().catch(console.error);
diff --git a/test/test-ssh.js b/test/test-ssh.js
new file mode 100644
index 0000000..e5e3497
--- /dev/null
+++ b/test/test-ssh.js
@@ -0,0 +1,32 @@
+const { Client } = require('ssh2');
+
+const SSH = {
+  host: '103.185.47.52',
+  port: 2222,
+  username: 'adminbackend',
+  password: 'htEo7x6LsBQiEHHH',
+  readyTimeout: 60000
+};
+
+const conn = new Client();
+conn.on('ready', () => {
+  console.log('SSH Connection ready.');
+  conn.exec('node -v && which node && pwd', (err, stream) => {
+    if (err) {
+      console.error('Exec error:', err.message);
+      conn.end();
+      return;
+    }
+    let out = '';
+    let errOut = '';
+    stream.on('data', d => out += d);
+    stream.stderr.on('data', d => errOut += d);
+    stream.on('close', () => {
+      console.log('Stdout:', out);
+      console.log('Stderr:', errOut);
+      conn.end();
+    });
+  });
+}).on('error', (err) => {
+  console.error('SSH Error:', err.message);
+}).connect(SSH);
diff --git a/test/test-sync.js b/test/test-sync.js
new file mode 100644
index 0000000..e675489
--- /dev/null
+++ b/test/test-sync.js
@@ -0,0 +1,22 @@
+const proxyMongoose = require('../proxy/node_modules/mongoose');
+require('dotenv').config({ path: './.env.local' });
+const { syncApplicationDictionary } = require('../proxy/netifyClient');
+const { LookupApp } = require('../proxy/models/Schemas');
+
+async function test() {
+  const uri = process.env.MONGODB_URI || 'mongodb://127.0.0.1:27017/backone_dpi';
+  console.log('Connecting Proxy Mongoose to:', uri);
+  await proxyMongoose.connect(uri);
+  console.log('Connected to DB:', proxyMongoose.connection.name);
+  
+  await syncApplicationDictionary();
+  
+  const count = await LookupApp.countDocuments();
+  console.log('Total LookupApps in DB inside test:', count);
+  const sample = await LookupApp.findOne({}).lean();
+  console.log('Sample LookupApp document:', sample);
+  
+  await proxyMongoose.disconnect();
+}
+
+test().catch(console.error);
diff --git a/test/test-tunnel-debug.js b/test/test-tunnel-debug.js
new file mode 100644
index 0000000..c1a3aa1
--- /dev/null
+++ b/test/test-tunnel-debug.js
@@ -0,0 +1,71 @@
+const { Client } = require('ssh2');
+const net = require('net');
+
+const sshConfig = {
+  host: '103.185.47.52',
+  port: 2222,
+  username: 'adminbackend',
+  password: 'htEo7x6LsBQiEHHH',
+  readyTimeout: 60000
+};
+
+const LOCAL_PORT = 27020;
+const REMOTE_MONGO_HOST = 'mongodb.prod.proit.id';
+const REMOTE_MONGO_PORT = 27017;
+
+const conn = new Client();
+const server = net.createServer((sock) => {
+  console.log('Local client connected to tunnel.');
+  conn.forwardOut(
+    '127.0.0.1',
+    sock.remotePort,
+    REMOTE_MONGO_HOST,
+    REMOTE_MONGO_PORT,
+    (err, stream) => {
+      if (err) {
+        console.error('forwardOut error:', err.message);
+        sock.destroy();
+        return;
+      }
+      console.log('forwardOut stream opened successfully.');
+      sock.pipe(stream);
+      stream.pipe(sock);
+    }
+  );
+});
+
+conn.on('ready', () => {
+  server.listen(LOCAL_PORT, '127.0.0.1', () => {
+    console.log(`Tunnel listening on port ${LOCAL_PORT}`);
+    
+    // Connect a raw net socket to test it
+    console.log('Connecting test client to local port...');
+    const client = net.createConnection(LOCAL_PORT, '127.0.0.1', () => {
+      console.log('Test client connected locally.');
+      // Send a dummy byte to trigger forwarding
+      client.write('hello');
+    });
+    
+    client.on('data', (d) => {
+      console.log('Received data from tunnel:', d.toString());
+      client.destroy();
+      server.close();
+      conn.end();
+    });
+    
+    client.on('error', (e) => {
+      console.error('Test client error:', e.message);
+      server.close();
+      conn.end();
+    });
+    
+    setTimeout(() => {
+      console.log('Timeout reached, closing.');
+      client.destroy();
+      server.close();
+      conn.end();
+    }, 10000);
+  });
+}).on('error', (err) => {
+  console.error('SSH Error:', err.message);
+}).connect(sshConfig);
diff --git a/test/test-write-persistence.js b/test/test-write-persistence.js
new file mode 100644
index 0000000..2c840dd
--- /dev/null
+++ b/test/test-write-persistence.js
@@ -0,0 +1,26 @@
+const proxyMongoose = require('../proxy/node_modules/mongoose');
+const { LookupApp } = require('../proxy/models/Schemas');
+
+async function main() {
+  const uri = 'mongodb://127.0.0.1:27017/backone_dpi';
+  await proxyMongoose.connect(uri);
+  
+  console.log('Inserting dummy LookupApp...');
+  await LookupApp.deleteMany({});
+  const doc = await LookupApp.create({
+    id: 99999,
+    tag: 'netify.dummytest',
+    label: 'Dummy Test App',
+    name: 'Dummy Test App',
+    description: 'A test document to verify write persistence',
+    application_category: { id: 1, name: 'test', label: 'Test', tag: 'test' }
+  });
+  console.log('Created document id:', doc._id);
+  
+  const count = await LookupApp.countDocuments({});
+  console.log('Count inside writer:', count);
+  
+  await proxyMongoose.disconnect();
+}
+
+main().catch(console.error);