diff --git a/src/blenderbim/blenderbim/bim/data/webui/sioserver.py b/src/blenderbim/blenderbim/bim/data/webui/sioserver.py
index 269f355fce..5521a8c182 100644
--- a/src/blenderbim/blenderbim/bim/data/webui/sioserver.py
+++ b/src/blenderbim/blenderbim/bim/data/webui/sioserver.py
@@ -47,6 +47,13 @@ class WebNamespace(socketio.AsyncNamespace):
     async def on_disconnect(self, sid):
         print(f"Web client disconnected: {sid}")
 
+    async def on_join_room(self, sid, data):
+        room = data["room"]
+        await sio.enter_room(sid, room=room)
+
+        if room == "drawings":
+            await sio.emit("get_drawings_data", namespace="/blender")
+
     async def on_web_operator(self, sid, data):
         await sio.emit(
             "web_operator",
@@ -98,6 +105,11 @@ class BlenderNamespace(socketio.AsyncNamespace):
         blender_messages[sid]["gantt_data"] = data
         await sio.emit("gantt_data", {"blenderId": sid, "data": data}, namespace="/web")
 
+    async def on_drawings_data(self, sid, data):
+        print(f"Drawings directory from Blender client {sid}")
+        blender_messages[sid]["drwings_data"] = data
+        await sio.emit("drawings_data", {"blenderId": sid, "data": data}, namespace="/web")
+
 
 # Attach namespaces
 sio.register_namespace(WebNamespace("/web"))
diff --git a/src/blenderbim/blenderbim/bim/data/webui/static/js/drawings.js b/src/blenderbim/blenderbim/bim/data/webui/static/js/drawings.js
index 3733c4a0bb..71a335e973 100644
--- a/src/blenderbim/blenderbim/bim/data/webui/static/js/drawings.js
+++ b/src/blenderbim/blenderbim/bim/data/webui/static/js/drawings.js
@@ -1,5 +1,6 @@
 // keeps track of blenders connected
 const connectedClients = {};
+const allDrawings = {};
 let socket;
 
 // Document ready function
@@ -22,17 +23,23 @@ function connectSocket() {
   // Register socket event handlers
   socket.on("blender_connect", handleBlenderConnect);
   socket.on("blender_disconnect", handleBlenderDisconnect);
-  //   socket.on("csv_data", handleCsvData);
+  socket.on("connect", handleWebConnect);
+  socket.on("drawings_data", handleDrawingsData);
   //   socket.on("default_data", handleDefaultData);
 }
 
+// function used to join drawings room
+function handleWebConnect() {
+  socket.emit("join_room", { room: "drawings" });
+}
+
 // Function to handle 'blender_connect' event
 function handleBlenderConnect(blenderId) {
   console.log("blender_connect: ", blenderId);
   if (!connectedClients.hasOwnProperty(blenderId)) {
     connectedClients[blenderId] = {
       shown: false,
-      filename: "",
+      ifc_file: "",
     };
   }
 }
@@ -42,7 +49,7 @@ function handleBlenderDisconnect(blenderId) {
   console.log("blender_disconnect: ", blenderId);
   if (connectedClients.hasOwnProperty(blenderId)) {
     delete connectedClients[blenderId];
-    removeGanttElement(blenderId);
+    // remove(blenderId);
   }
 
   $("#blender-count").text(function (i, text) {
@@ -50,20 +57,41 @@ function handleBlenderDisconnect(blenderId) {
   });
 }
 
+function handleDrawingsData(blenderId) {
+  const blenderId = data["blenderId"];
+
+  console.log(data);
+
+  const filename = data["data"]["ifc_file"];
+  const drawings = data["data"]["drawings_data"]["drawings"];
+  const sheets = data["data"]["drawings_data"]["sheets"];
+
+  allDrawings[filename] = { drawings: drawings, sheets: sheets };
+
+  if (connectedClients.hasOwnProperty(blenderId)) {
+    if (!connectedClients[blenderId].shown) {
+      connectedClients[blenderId] = {
+        shown: true,
+        ifc_file: filename,
+      };
+      // add(blenderId, data, filename);
+    } else {
+      // update(blenderId, data, filename);
+    }
+  } else {
+    connectedClients[blenderId] = {
+      shown: true,
+      ifc_file: filename,
+    };
+    // add(blenderId, data, filename);
+  }
+}
+
 function setTheme(theme) {
-  var stylesheet = $("#tabulator-stylesheet");
   if (theme === "light") {
-    stylesheet.attr(
-      "href",
-      "https://unpkg.com/tabulator-tables/dist/css/tabulator_site.min.css"
-    );
     $("html").removeClass("dark").addClass("light");
     $("#toggle-theme").html('<i class="fas fa-sun"></i>');
   } else {
-    stylesheet.attr(
-      "href",
-      "https://unpkg.com/tabulator-tables/dist/css/tabulator_site_dark.min.css"
-    );
     $("html").removeClass("light").addClass("dark");
     $("#toggle-theme").html('<i class="fas fa-moon"></i>');
   }
diff --git a/src/blenderbim/blenderbim/bim/data/webui/templates/drawings.html b/src/blenderbim/blenderbim/bim/data/webui/templates/drawings.html
index b6b26dc441..3ca89f6744 100644
--- a/src/blenderbim/blenderbim/bim/data/webui/templates/drawings.html
+++ b/src/blenderbim/blenderbim/bim/data/webui/templates/drawings.html
@@ -56,15 +56,20 @@
         <!-- Dropdown menu -->
         <div class="dropdown mb-3">
           <label for="dropdown-menu">IFC File</label>
-          <select class="w-50 p-0 pl-2" id="dropdown-menu"></select>
+          <select class="w-50 p-0 pl-2" id="dropdown-menu">
+            <!-- IFC files will be dynamically populated here -->
+            <option value="option1">Option 1</option>
+            <option value="option2">Option 2</option>
+            <option value="option3">Option 3</option>
+          </select>
         </div>
         <!-- Panel with sub-panels -->
         <div class="panel">
           <div id="accordion">
             <div class="card pb-2">
-              <div class="card-header" id="headingOne">
+              <div class="card-header overflow-hidden" id="headingOne">
                 <button
-                  class="btn p-0"
+                  class="btn p-0 w-100 text-left"
                   data-toggle="collapse"
                   data-target="#collapseOne"
                 >
@@ -74,14 +79,19 @@
 
               <div id="collapseOne" class="collapse show">
                 <div class="card-body">
-                  <ul class="sub-panel" id="sub-panel-1"></ul>
+                  <div class="sub-panel" id="sub-panel-1">
+                    <label>Item 1</label>
+                    <label>Item 2</label>
+                    <label>Item 3</label>
+                    <!-- Drawings will be dynamically populated here -->
+                  </div>
                 </div>
               </div>
             </div>
             <div class="card">
-              <div class="card-header" id="headingTwo">
+              <div class="card-header overflow-hidden" id="headingTwo">
                 <button
-                  class="btn p-0"
+                  class="btn p-0 w-100 text-left"
                   data-toggle="collapse"
                   data-target="#collapseTwo"
                 >
@@ -90,7 +100,9 @@
               </div>
               <div id="collapseTwo" class="collapse show">
                 <div class="card-body">
-                  <ul class="sub-panel" id="sub-panel-2"></ul>
+                  <ul class="sub-panel" id="sub-panel-2">
+                    <!-- Sheets will be dynamically populated here -->
+                  </ul>
                 </div>
               </div>
             </div>