diff --git a/app.py b/app.py
index 9469088..7428093 100644
--- a/app.py
+++ b/app.py
@@ -17,14 +17,41 @@ def load_config():
         return json.load(f)
 
 device_status = {}
-
 def update_status():
     while True:
         config = load_config()
         for device in config['devices']:
-            device_status[device['name']] = ping(device['ip'])
+            current_status = ping(device['ip'])
+            previous_status = device_status.get(device['name'], True)
+            
+            if current_status != previous_status:
+                diagnostics = run_diagnostics(device)
+                send_webhook(device, current_status, diagnostics)
+            
+            device_status[device['name']] = current_status
         time.sleep(config['check_interval'])
 
+def send_webhook(device, status, diagnostics):
+    config = load_config()
+    webhook_data = {
+        "device": device,
+        "status": status,
+        "timestamp": datetime.now().isoformat(),
+        "diagnostics": diagnostics
+    }
+    requests.post(config['webhook_url'], json=webhook_data)
+
+def run_diagnostics(device):
+    diagnostics = {}
+    if device['connection_type'] == 'fiber':
+        # Add your fiber diagnostic commands here
+        diagnostics['optical_power'] = subprocess.getoutput('optical-power-check ' + device['ip'])
+        diagnostics['light_levels'] = subprocess.getoutput('light-level-check ' + device['ip'])
+    else:
+        # Add your copper diagnostic commands here
+        diagnostics['cable_test'] = subprocess.getoutput('ethtool ' + device['ip'])
+        diagnostics['signal_quality'] = subprocess.getoutput('signal-quality-check ' + device['ip'])
+    return diagnostics
 @app.route('/')
 def home():
     return render_template('index.html')
diff --git a/index.html b/index.html
index 0e00ba2..dd770fa 100644
--- a/index.html
+++ b/index.html
@@ -51,6 +51,14 @@
                 <h2>Connected Clients</h2>
                 <div id="client-count"></div>
             </div>
+
+            <div class="metric-card">
+                <h2>Diagnostics</h2>
+                <div id="diagnostics-panel">
+                    <div class="diagnostics-content"></div>
+                </div>
+            </div>
+            
         </div>
     </div>
     <script src="{{ url_for('static', filename='app.js') }}"></script>
diff --git a/static/app.js b/static/app.js
index f22b965..8f99b77 100644
--- a/static/app.js
+++ b/static/app.js
@@ -1,18 +1,23 @@
-function updateDeviceStatus() {
-    fetch('/api/status')
+function updateDiagnostics() {
+    fetch('/api/diagnostics')
         .then(response => response.json())
         .then(data => {
-            Object.entries(data).forEach(([deviceName, isUp]) => {
-                const deviceElement = document.querySelector(`.device-status:has(span:contains("${deviceName}"))`);
-                if (deviceElement) {
-                    const indicator = deviceElement.querySelector('.status-indicator');
-                    indicator.className = `status-indicator status-${isUp ? 'up' : 'down'}`;
-                }
+            const diagnosticsPanel = document.querySelector('.diagnostics-content');
+            diagnosticsPanel.innerHTML = '';
+            
+            Object.entries(data).forEach(([device, diagnostics]) => {
+                const diagElement = document.createElement('div');
+                diagElement.className = `diagnostic-item ${diagnostics.type}-diagnostic`;
+                diagElement.innerHTML = `
+                    <h3>${device}</h3>
+                    <pre>${JSON.stringify(diagnostics.results, null, 2)}</pre>
+                `;
+                diagnosticsPanel.appendChild(diagElement);
             });
         });
 }
 
-// Update every 30 seconds
-setInterval(updateDeviceStatus, 30000);
+// Update diagnostics every minute
+setInterval(updateDiagnostics, 60000);
 // Initial update
 updateDeviceStatus();
diff --git a/style.css b/style.css
index 1bc8698..844b4f0 100644
--- a/style.css
+++ b/style.css
@@ -67,4 +67,23 @@ body {
 
 .status-down {
     background-color: #EF4444;
+}
+
+.diagnostics-panel {
+    margin-top: 15px;
+}
+
+.diagnostic-item {
+    padding: 10px;
+    border-left: 4px solid var(--primary-color);
+    margin: 10px 0;
+    background: rgba(0,111,255,0.1);
+}
+
+.fiber-diagnostic {
+    border-color: #10B981;
+}
+
+.copper-diagnostic {
+    border-color: #F59E0B;
 }
\ No newline at end of file