diff --git a/src/functions/codeEditor.js b/src/functions/codeEditor.js
index 64f5bf90ab6a09e615a8123c35c4e24cdd269fb6..3c5329db9a8bbbe143b4739c332c644866a58e0e 100644
--- a/src/functions/codeEditor.js
+++ b/src/functions/codeEditor.js
@@ -20,6 +20,29 @@ export const codeEditor = (instance) => {
     containerHeading.appendChild(document.createTextNode("CODE EDITOR"));
     editorContainer.appendChild(containerHeading);
 
+    const pipesDiv = document.createElement("div");
+    pipesDiv.classList.add("pipes");
+
+    const incomingPipesDiv = document.createElement("div");
+    const incomingPipesHeading = document.createElement("h5");
+    incomingPipesHeading.appendChild(document.createTextNode("Incoming Pipes"));
+    incomingPipesDiv.appendChild(incomingPipesHeading);
+
+    // TODO: for each pipe in incomingPipes usw...
+    // const pipeButton = document.createElement("button");
+    // pipeButton.appendChild(document.createTextNode("[Pipe Name 123]"));
+    // incomingPipesDiv.appendChild(pipeButton);
+
+    const outgoingPipesDiv = document.createElement("div");
+    const outgoingPipesHeading = document.createElement("h5");
+    outgoingPipesHeading.appendChild(document.createTextNode("Outgoing Pipes"));
+    outgoingPipesDiv.appendChild(outgoingPipesHeading);
+
+    pipesDiv.appendChild(incomingPipesDiv);
+    pipesDiv.appendChild(outgoingPipesDiv);
+
+    editorContainer.appendChild(pipesDiv);
+
     const filterToCode = {
       type: document
         .getElementById(window.selectedFilter)
diff --git a/src/style.css b/src/style.css
index b9bb7a4d8926a39add3d5a6b3e6d1d27a7c82d33..a190381e9fca42ac5da4efded21aa63410084e68 100644
--- a/src/style.css
+++ b/src/style.css
@@ -317,3 +317,8 @@
 .fa-docker:before {
   background-color: ghostwhite;
 }
+
+.pipes {
+  display: flex;
+  justify-content: space-between;
+}