diff --git a/src/blenderbim/blenderbim/bim/data/webui/sioserver.py b/src/blenderbim/blenderbim/bim/data/webui/sioserver.py
index 7b57057caf..fc09437f36 100644
--- a/src/blenderbim/blenderbim/bim/data/webui/sioserver.py
+++ b/src/blenderbim/blenderbim/bim/data/webui/sioserver.py
@@ -57,6 +57,13 @@ class WebNamespace(socketio.AsyncNamespace):
             room=data.get("blenderId", None),
         )
 
+    async def on_get_svg(self, sid, data):
+        print("hello world!")
+        file_path = data["path"]
+        with open(file_path, "r") as file:
+            svg_data = file.read()
+        await sio.emit("svg_data", svg_data, room=sid, namespace="/web")
+
     async def send_cached_messages(self, sid):
         # Send cached messages to the connected web client
         for blenderId, messages in blender_messages.items():
diff --git a/src/blenderbim/blenderbim/bim/data/webui/static/css/drawings.css b/src/blenderbim/blenderbim/bim/data/webui/static/css/drawings.css
index 340cb9ef56..9dd2437ecf 100644
--- a/src/blenderbim/blenderbim/bim/data/webui/static/css/drawings.css
+++ b/src/blenderbim/blenderbim/bim/data/webui/static/css/drawings.css
@@ -190,6 +190,7 @@ nav ul li a.active {
 
 
 .left {
+    flex: 1;
     background-color: var(--bg-color);
     display: flex;
     flex-direction: column;
@@ -197,10 +198,15 @@ nav ul li a.active {
 }
 
 .right {
+    flex: 4;
     background-color: var(--bg-color);
     border: 1px solid var(--border-color);
 }
 
+#svg-container {
+    height: 100%;
+}
+
 .panel {
     background-color: var(--nav-bg-color);
     border: 1px solid var(--border-color);
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 8ce3265cfc..8a865dcab1 100644
--- a/src/blenderbim/blenderbim/bim/data/webui/static/js/drawings.js
+++ b/src/blenderbim/blenderbim/bim/data/webui/static/js/drawings.js
@@ -31,6 +31,7 @@ function connectSocket() {
   socket.on("blender_disconnect", handleBlenderDisconnect);
   socket.on("connect", handleWebConnect);
   socket.on("drawings_data", handleDrawingsData);
+  socket.on("svg_data", handleSvgData);
   //   socket.on("default_data", handleDefaultData);
 }
 
@@ -101,6 +102,31 @@ function handleDrawingsData(data) {
   }
 }
 
+function handleSvgData(data) {
+  const svgContainer = document.getElementById("svg-container");
+  svgContainer.innerHTML = "";
+  svgContainer.style.backgroundColor = "white";
+
+  const dom = SVG(svgContainer).svg(data);
+  const svgElement = dom.node.children[0];
+
+  // to make the svg not grow outside the svg container
+  svgElement.setAttribute("width", "100%");
+  svgElement.setAttribute("height", "100%");
+  svgElement.style.maxWidth = "100%";
+  svgElement.style.maxHeight = "100%";
+  svgElement.style.width = "100%";
+  svgElement.style.height = "100%";
+  svgElement.style.boxSizing = "border-box"; // Ensure padding and borders are included in the element's total width and height
+
+  const panZoomControls = svgPanZoom(svgElement, {
+    zoomEnabled: true,
+    controlIconsEnabled: true,
+    fit: true,
+    center: true,
+  });
+}
+
 function addSelectOption(blenderId, filename) {
   const filenameOption = $("<option></option>")
     .attr("id", "blender-" + blenderId)
@@ -116,10 +142,27 @@ function displayDrawingsNames(blenderId, ifcFile) {
   function createSvgNames(text, index, type) {
     var label = $("<li></lio>")
       .text(text)
-      .attr("id", index)
+      .attr("id", type + "-" + index)
       .addClass("svg-name")
       .click(function () {
-        console.log("ID:", $(this).attr("id"), "Name:", text);
+        const id = $(this).attr("id").split("-");
+        const index = parseInt(id[1]);
+        const type = id[0];
+        const ifcFile = $("#dropdown-menu").val();
+
+        var path = "";
+
+        if (type === "drawing") {
+          path = allDrawings[ifcFile].drawings[index].path;
+        } else if (type === "sheet") {
+          path = allDrawings[ifcFile].sheets[index].path;
+        }
+
+        const msg = {
+          path: path,
+        };
+        console.log(msg);
+        socket.emit("get_svg", msg);
       });
 
     if (type === "drawing") $("#drawings-sub-panel").append(label);
diff --git a/src/blenderbim/blenderbim/bim/data/webui/templates/drawings.html b/src/blenderbim/blenderbim/bim/data/webui/templates/drawings.html
index 4b9b034614..41eebcd93a 100644
--- a/src/blenderbim/blenderbim/bim/data/webui/templates/drawings.html
+++ b/src/blenderbim/blenderbim/bim/data/webui/templates/drawings.html
@@ -17,7 +17,18 @@
       type="text/javascript"
       src="https://code.jquery.com/jquery-3.6.0.min.js"
     ></script>
-    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+    <script
+      type="text/javascript"
+      src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/3.1.1/svg.min.js"
+    ></script>
+    <script
+      type="text/javascript"
+      src="https://cdn.jsdelivr.net/npm/svg-pan-zoom@3.6.1/dist/svg-pan-zoom.min.js"
+    ></script>
+    <script
+      type="text/javascript"
+      src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
+    ></script>
     <script
       type="text/javascript"
       src="https://cdn.socket.io/4.0.0/socket.io.min.js"
@@ -104,7 +115,7 @@
           </div>
         </div>
       </div>
-      <div class="col-10 right p-3">
+      <div class="col-10 right pl-3">
         <div id="svg-container"></div>
       </div>
     </div>