diff --git a/src/functions/codeEditor.js b/src/functions/codeEditor.js
index 6b9df980a15073def5b8cb8aa6fe8b3faf18a6d4..bc5b39a3c30c7bcfbb8df73209e540c6f88247a2 100644
--- a/src/functions/codeEditor.js
+++ b/src/functions/codeEditor.js
@@ -6,7 +6,7 @@ import { showCheck } from "./visualValidation";
 import { handlePipeBinding, getPipesForFilter } from "./pipeBinding";
 
 let editorValues = {
-  doc: "const amqp = require('amqplib/callback_api');\n\nconst rabbitmqUrl = 'amqp://mquser:mqpass@rabbit:5672';\n\namqp.connect(rabbitmqUrl, (error0, connection) => {\n    if (error0) {\n        throw error0;\n    }\n    connection.createChannel((error1, channel) => {\n        if (error1) {\n            throw error1;\n        }\n\n\n\n        //TODO: Code logic here\n});\n",
+  doc: "const amqp = require('amqplib/callback_api');\n\nconst rabbitmqUrl = 'amqp://mquser:mqpass@rabbit:5672';\n\namqp.connect(rabbitmqUrl, (error0, connection) => {\n    if (error0) {\n        throw error0;\n    }\n    connection.createChannel((error1, channel) => {\n        if (error1) {\n            throw error1;\n        }\n\n\n\n        //TODO: Code logic here\n\t});\n});\n",
   extensions: [basicSetup, javascript()],
 };
 
@@ -35,6 +35,38 @@ export const codeEditorElement = (instance) => {
     containerHeading.style.marginBottom = "0px";
     editorContainer.appendChild(containerHeading);
 
+    const pipesElement = document.createElement("div");
+    pipesElement.style.display = "flex";
+    pipesElement.style.justifyContent = "space-between";
+
+    const incomingElement = document.createElement("div");
+    incomingElement.id = "incomingPipes";
+    const incomingHeadingElement = document.createElement("h5");
+    incomingHeadingElement.style.margin = "0px";
+    incomingHeadingElement.style.marginBottom = "6px";
+
+    incomingHeadingElement.appendChild(
+      document.createTextNode("Incoming Pipes")
+    );
+    incomingElement.appendChild(incomingHeadingElement);
+    incomingElement.appendChild(document.createElement("hr"));
+    pipesElement.appendChild(incomingElement);
+
+    const outgoingElement = document.createElement("div");
+    outgoingElement.id = "outgoingPipes";
+    outgoingElement.style.textAlign = "right";
+    const outgoingHeadingElement = document.createElement("h5");
+    outgoingHeadingElement.style.margin = "0px";
+    outgoingHeadingElement.style.marginBottom = "6px";
+    outgoingHeadingElement.appendChild(
+      document.createTextNode("OutgoingPipes")
+    );
+    outgoingElement.appendChild(outgoingHeadingElement);
+    outgoingElement.appendChild(document.createElement("hr"));
+    pipesElement.appendChild(outgoingElement);
+
+    editorContainer.appendChild(pipesElement);
+
     diagram.appendChild(editorContainer);
 
     const filterToCode = {
diff --git a/src/functions/pipeBinding.js b/src/functions/pipeBinding.js
index 2abb677d942db3c2e58f29719d4d5199441e8f63..b8b880de8bafcfac349c28d033e53149449b37a7 100644
--- a/src/functions/pipeBinding.js
+++ b/src/functions/pipeBinding.js
@@ -11,6 +11,7 @@ export const getPipesForFilter = (instance) => {
       pipeId: connection.sourceId,
       pipeType:
         connection.source.dataset.type === "Default" ? "Queue" : "Topic",
+      pipeDirection: "in",
     }));
   const outgoingConnections = allConnections
     .filter((connection) => connection.sourceId === filter)
@@ -18,12 +19,11 @@ export const getPipesForFilter = (instance) => {
       pipeId: connection.targetId,
       pipeType:
         connection.target.dataset.type === "Default" ? "Queue" : "Topic",
+      pipeDirection: "out",
     }));
 
   const connectionsForFilter = incomingConnections.concat(outgoingConnections);
 
-  // buildPipesElements();
-
   const pipeMapping = [];
   let defaultCount = 1;
   connectionsForFilter &&
@@ -32,7 +32,7 @@ export const getPipesForFilter = (instance) => {
       if (!pipeName) {
         const pipeName = `Default${defaultCount}`;
         appState.addPipe(connection, pipeName);
-        const pipe = { pipeName, connection };
+        const pipe = { pipeName, ...connection };
         pipeMapping.push(pipe);
         const spanToChange = document.querySelector(
           `#${connection.pipeId} #PipeName`
@@ -41,10 +41,11 @@ export const getPipesForFilter = (instance) => {
         showCheck(connection.pipeId);
         defaultCount++;
       } else {
-        const pipe = { pipeName, connection };
+        const pipe = { pipeName, ...connection };
         pipeMapping.push(pipe);
       }
     });
+  buildPipesElements(pipeMapping);
   return pipeMapping;
 };
 
@@ -59,7 +60,7 @@ export const handlePipeBinding = (pipeMapping, editor) => {
     ) {
       return;
     } else {
-      let queue = pipe.connection.pipeType === "Queue" ? true : false;
+      let queue = pipe.pipeType === "Queue" ? true : false;
       let line = editor.state.doc.line(lineNumber);
       let position = line.from;
       let pipeNameUserGiven = pipe.pipeName;
@@ -120,7 +121,28 @@ const makeValidConstName = (str) => {
   return validStr;
 };
 
-const buildPipesElements = (incoming, outgoing) => {
-  console.log("### in: ", incoming);
-  console.log("### out: ", outgoing);
+const buildPipesElements = (pipeMapping) => {
+  const incomingPipes = pipeMapping.filter(
+    (pipe) => pipe.pipeDirection === "in"
+  );
+  const outgoingPipes = pipeMapping.filter(
+    (pipe) => pipe.pipeDirection === "out"
+  );
+
+  const incomingPipesElement = document.getElementById("incomingPipes");
+  const outgoingPipesElement = document.getElementById("outgoingPipes");
+
+  incomingPipes.forEach((pipe) => {
+    console.log(pipe);
+    const pipeElement = document.createElement("span");
+    pipeElement.appendChild(document.createTextNode(pipe.pipeName));
+    pipeElement.style.marginRight = "6px";
+    incomingPipesElement.appendChild(pipeElement);
+  });
+  outgoingPipes.forEach((pipe) => {
+    const pipeElement = document.createElement("span");
+    pipeElement.appendChild(document.createTextNode(pipe.pipeName));
+    pipeElement.style.marginLeft = "6px";
+    outgoingPipesElement.appendChild(pipeElement);
+  });
 };