diff --git a/README.md b/README.md
index bf2066e..22cc514 100644
--- a/README.md
+++ b/README.md
@@ -59,4 +59,4 @@ Each node collects:
 ### Additional Features
 
 - Alarm suppression capabilities
-- Ticket creation system integration
+- Ticket creation system integration
\ No newline at end of file
diff --git a/app.py b/app.py
new file mode 100644
index 0000000..bd6b2f2
--- /dev/null
+++ b/app.py
@@ -0,0 +1,20 @@
+from flask import Flask, jsonify, render_template
+from monitor.node import check_network_health, measure_latency, check_bandwidth
+
+app = Flask(__name__)
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/api/metrics')
+def get_metrics():
+    metrics = {
+        'network_health': check_network_health(),
+        'latency': measure_latency(),
+        'bandwidth': check_bandwidth()
+    }
+    return jsonify(metrics)
+
+if __name__ == '__main__':
+    app.run(debug=True)
diff --git a/static/app.js b/static/app.js
new file mode 100644
index 0000000..e2c05ee
--- /dev/null
+++ b/static/app.js
@@ -0,0 +1,34 @@
+function updateMetrics() {
+    fetch('/api/metrics')
+        .then(response => response.json())
+        .then(data => {
+            document.getElementById('network-health').innerHTML = `
+                <div class="metric-card">
+                    <h2>Network Health</h2>
+                    <p>CPU: ${data.network_health.cpu_percent}%</p>
+                    <p>Memory: ${data.network_health.memory_percent}%</p>
+                    <p>Connections: ${data.network_health.network_connections}</p>
+                </div>
+            `;
+            
+            document.getElementById('latency').innerHTML = `
+                <div class="metric-card">
+                    <h2>Latency</h2>
+                    <p>${data.latency.toFixed(2)} ms</p>
+                </div>
+            `;
+            
+            document.getElementById('bandwidth').innerHTML = `
+                <div class="metric-card">
+                    <h2>Bandwidth</h2>
+                    <p>Download: ${data.bandwidth.download.toFixed(2)} Mbps</p>
+                    <p>Upload: ${data.bandwidth.upload.toFixed(2)} Mbps</p>
+                </div>
+            `;
+        });
+}
+
+// Update metrics every 30 seconds
+setInterval(updateMetrics, 30000);
+// Initial update
+updateMetrics();
diff --git a/static/style.css b/static/style.css
new file mode 100644
index 0000000..a5d0bac
--- /dev/null
+++ b/static/style.css
@@ -0,0 +1,19 @@
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 20px;
+}
+
+.metrics-container {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 20px;
+    margin-top: 20px;
+}
+
+.metric-card {
+    background: #f5f5f5;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
diff --git a/templates/index.html b/templates/index.html
new file mode 100644
index 0000000..e47dd89
--- /dev/null
+++ b/templates/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>GANDALF Network Monitor</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+</head>
+<body>
+    <div class="container">
+        <h1>GANDALF Network Monitor</h1>
+        <div class="metrics-container">
+            <div id="network-health"></div>
+            <div id="latency"></div>
+            <div id="bandwidth"></div>
+        </div>
+    </div>
+    <script src="{{ url_for('static', filename='app.js') }}"></script>
+</body>
+</html>
