diff --git a/public/app.js b/public/app.js
new file mode 100644
index 0000000..fbb6a09
--- /dev/null
+++ b/public/app.js
@@ -0,0 +1,53 @@
+const socket = new WebSocket('ws://localhost:3000');
+
+const nodes = new vis.DataSet();
+const edges = new vis.DataSet();
+const network = new vis.Network(document.getElementById('network'), { nodes, edges }, {
+  physics: {
+    enabled: true,
+    solver: 'forceAtlas2Based',
+    forceAtlas2Based: {
+      gravitationalConstant: -50,
+      centralGravity: 0.01,
+      springConstant: 0.08,
+      springLength: 100,
+      damping: 0.4,
+      avoidOverlap: 0
+    },
+    stabilization: {
+      enabled: true,
+      iterations: 1000,
+      updateInterval: 100,
+      onlyDynamicEdges: false,
+      fit: true
+    }
+  }
+});
+
+socket.addEventListener('message', (event) => {
+  const logData = JSON.parse(event.data);
+  const { msg_hash, receivedTime, nodeId, newNode } = logData;
+
+  if (newNode) {
+    nodes.add({ id: nodeId, label: `Node ${nodeId}` });
+  }
+
+  const edgeId = `${msg_hash}-${receivedTime}`;
+  if (!edges.get(edgeId)) {
+    edges.add({
+      id: edgeId,
+      from: 1,
+      to: nodeId,
+      label: `${msg_hash.slice(0, 6)}...`,
+      color: {
+        color: '#ff0000',
+        highlight: '#ff4c4c',
+        hover: '#ff4c4c'
+      }
+    });
+
+    setTimeout(() => {
+      edges.remove(edgeId);
+    }, 3000);
+  }
+});