diff --git a/src/blenderbim/blenderbim/bim/data/webui/sioserver.py b/src/blenderbim/blenderbim/bim/data/webui/sioserver.py
new file mode 100644
index 0000000000..62f41b8382
--- /dev/null
+++ b/src/blenderbim/blenderbim/bim/data/webui/sioserver.py
@@ -0,0 +1,93 @@
+import argparse
+from aiohttp import web
+import socketio
+import pystache
+
+sio_port = 8080
+
+sio = socketio.AsyncServer(
+    cors_allowed_origins="*",
+    async_mode="aiohttp",
+)
+
+# sio.instrument(
+#     auth={
+#         "username": "admin",
+#         "password": "admin",
+#     }
+# )
+
+app = web.Application()
+sio.attach(app)
+
+blender_messages = {}
+
+
+# Web namespace
+class WebNamespace(socketio.AsyncNamespace):
+    def __init__(self, namespace):
+        super().__init__(namespace)
+
+    async def on_connect(self, sid, environ):
+        print(f"Web client connected: {sid}")
+
+    async def on_disconnect(self, sid):
+        print(f"Web client disconnected: {sid}")
+
+
+# Blender namespace
+class BlenderNamespace(socketio.AsyncNamespace):
+    def __init__(self, namespace):
+        super().__init__(namespace)
+
+    async def on_connect(self, sid, environ):
+        print(f"Blender client connected: {sid}")
+        # Notify web client about new connection
+        await sio.emit("blender_connect", sid, namespace="/web")
+
+    async def on_disconnect(self, sid):
+        print(f"Blender client disconnected: {sid}")
+        # Remove client message and notify web client about disconnection
+        if sid in blender_messages:
+            del blender_messages[sid]
+        await sio.emit("blender_disconnect", sid, namespace="/web")
+
+    async def on_data(self, sid, data):
+        print(f"Data from Blender client {sid}: {data}")
+        # Store the message and forward it to the web client
+        blender_messages[sid] = data
+        await sio.emit("blender_data", {"blenderId": sid, "data": data}, namespace="/web")
+
+
+# Attach namespaces
+sio.register_namespace(WebNamespace("/web"))
+sio.register_namespace(BlenderNamespace("/blender"))
+
+
+# Define a route to render the index.html template
+async def index(request):
+    with open("templates/index.html", "r") as f:
+        template = f.read()
+    html_content = pystache.render(template, {"port": sio_port})
+    return web.Response(text=html_content, content_type="text/html")
+
+
+app.router.add_get("/", index)
+app.router.add_static("/static/", path="./static", name="static")
+
+
+def main():
+    global sio_port
+
+    parser = argparse.ArgumentParser(description="SocketIO server")
+    parser.add_argument("--host", type=str, default="127.0.0.1", help="Host to run the server on")
+    parser.add_argument("--port", type=int, default=8080, help="Port to run the server on")
+
+    args = parser.parse_args()
+    sio_port = args.port
+    web.run_app(app, host=args.host, port=sio_port)
+
+
+if __name__ == "__main__":
+    main()
+    # web.run_app(app, host="127.0.0.1", port=sio_port)
diff --git a/src/blenderbim/blenderbim/bim/data/webui/static/css/styles.css b/src/blenderbim/blenderbim/bim/data/webui/static/css/styles.css
new file mode 100644
index 0000000000..7ff01e7032
--- /dev/null
+++ b/src/blenderbim/blenderbim/bim/data/webui/static/css/styles.css
@@ -0,0 +1,12 @@
+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 20px;
+}
+
+.message {
+    margin-bottom: 10px;
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+}
\ No newline at end of file
diff --git a/src/blenderbim/blenderbim/bim/data/webui/static/js/index.js b/src/blenderbim/blenderbim/bim/data/webui/static/js/index.js
new file mode 100644
index 0000000000..86083d7c43
--- /dev/null
+++ b/src/blenderbim/blenderbim/bim/data/webui/static/js/index.js
@@ -0,0 +1,61 @@
+$(document).ready(function () {
+  // Connect to the Socket.IO server
+  const url = "ws://localhost:" + SOCKET_PORT + "/web";
+
+  const socket = io(url);
+
+  console.log("socket: ", socket);
+
+  const connectedClients = {};
+
+  function addMessageElement(blenderId, message) {
+    const messageDiv = $("<div></div>")
+      .addClass("message")
+      .attr("id", blenderId)
+      .text(message);
+
+    $("#messages").append(messageDiv);
+  }
+
+  function updateMessageElement(blenderId, message) {
+    $("#" + blenderId).text(message);
+  }
+
+  function removeMessageElement(blenderId) {
+    $("#" + blenderId).remove();
+  }
+
+  socket.on("blender_connect", (blenderId) => {
+    console.log("blender_connect: ", blenderId);
+
+    if (!connectedClients[blenderId]) {
+      connectedClients[blenderId] = true;
+      addMessageElement(blenderId, "");
+    }
+  });
+
+  // Listen for client disconnect events
+  socket.on("blender_disconnect", (blenderId) => {
+    console.log("blender_disconnect: ", blenderId);
+
+    if (connectedClients[blenderId]) {
+      delete connectedClients[blenderId];
+      removeMessageElement(blenderId);
+    }
+  });
+
+  // Listen for messages from the server
+  socket.on("blender_data", (data) => {
+    blenderId = data["blenderId"];
+    message = data["data"]["IFC_File"];
+
+    console.log(data);
+
+    if (connectedClients[blenderId] == true) {
+      updateMessageElement(blenderId, message);
+    } else {
+      connectedClients[blenderId] = true;
+      addMessageElement(blenderId, message);
+    }
+  });
+});
diff --git a/src/blenderbim/blenderbim/bim/data/webui/templates/index.html b/src/blenderbim/blenderbim/bim/data/webui/templates/index.html
new file mode 100644
index 0000000000..bbdaa8e311
--- /dev/null
+++ b/src/blenderbim/blenderbim/bim/data/webui/templates/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Web Client</title>
+    <link rel="stylesheet" href="/static/css/styles.css" />
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <script src="https://cdn.socket.io/4.0.0/socket.io.min.js"></script>
+    <script>
+      var SOCKET_PORT = {{port}};
+    </script>
+    <script defer src="./static/js/index.js"></script>
+  </head>
+  <body>
+    <h1>IFC Files</h1>
+    <div id="messages"></div>
+  </body>
+</html>