diff --git a/src/visualizers/panels/ElectricCircuitsEditor/ElectricCircuitEditorControl.Joint.js b/src/visualizers/panels/ElectricCircuitsEditor/ElectricCircuitEditorControl.Joint.js
index 3864f3b..e6a400d 100644
--- a/src/visualizers/panels/ElectricCircuitsEditor/ElectricCircuitEditorControl.Joint.js
+++ b/src/visualizers/panels/ElectricCircuitsEditor/ElectricCircuitEditorControl.Joint.js
@@ -244,11 +244,15 @@ define([], function () {
             return this.client.isTypeOf(nodeId, this.META_NAMES['Circuit']);
         }
 
+        isCircuitFolder(nodeId) {
+            return this.client.isTypeOf(nodeId, this.META_NAMES['ElectricCircuitsFolder']);
+        }
+
         isSubCircuit(nodeId) {
             const node = this.client.getNode(nodeId);
 
             if (node) {
-                return this.isCircuit(node.getId()) && nodeId !== this._currentNodeId;
+                return this.isCircuit(node.getId()) && nodeId !== this._currentNodeId && !this.isCircuitFolder(nodeId);
             }
         }
 
@@ -321,11 +325,15 @@ define([], function () {
         changeActiveObject(nodeId) {
             if(this.isCircuit(nodeId)){
                 this.selectedObjectChanged(nodeId);
+                this._widget.showPartBrowser();
+            } else if(this.isCircuitFolder(nodeId)) {
+                this.selectedObjectChanged(nodeId);
+                this._widget.hidePartBrowser();
             }
         }
 
         canBeActiveObject(nodeId) {
-            return this.isCircuit(nodeId);
+            return this.isCircuit(nodeId) || this.isCircuitFolder(nodeId);
         }
 
         showParent() {
@@ -337,7 +345,7 @@ define([], function () {
 
         isNestedDisplay () {
             const node = this._client.getNode(this._currentNodeId);
-            if(this.isCircuit(node.getParentId())) {
+            if(this.isCircuit(node.getParentId()) || this.isCircuitFolder(node.getParentId())) {
                 return true;
             }
             return false;
diff --git a/src/visualizers/panels/ElectricCircuitsEditor/ElectricCircuitsEditorControl.js b/src/visualizers/panels/ElectricCircuitsEditor/ElectricCircuitsEditorControl.js
index b7d2889..b4bcdc9 100644
--- a/src/visualizers/panels/ElectricCircuitsEditor/ElectricCircuitsEditorControl.js
+++ b/src/visualizers/panels/ElectricCircuitsEditor/ElectricCircuitsEditorControl.js
@@ -125,6 +125,11 @@ define([
 
         _getObjectDescriptor(nodeId) {
             if (this.isCircuit(nodeId) && !this.isSubCircuit(nodeId)) {
+                console.log('here', this.isCircuitFolder(nodeId));
+                return;
+            }
+            if (this.isCircuitFolder(nodeId)){
+                console.log('here');
                 return;
             }
             if (this.isPin(nodeId) && !this.isCircuitPin(nodeId)) {
@@ -167,7 +172,7 @@ define([
             if (desc) {
                 this._widget.addNode(desc);
             }
-            if (this.isCircuit(gmeId) && !this.isSubCircuit(gmeId)) {
+            if (this.isCircuit(gmeId) && !this.isSubCircuit(gmeId) || this.isCircuitFolder(gmeId)) {
                 const name = this._client.getNode(gmeId).getAttribute('name');
                 this._widget.setDashboardTitle(name);
             }
diff --git a/src/visualizers/widgets/ElectricCircuitsEditor/CircuitEditorDashboard/src/CircuitEditorDashboard.svelte b/src/visualizers/widgets/ElectricCircuitsEditor/CircuitEditorDashboard/src/CircuitEditorDashboard.svelte
index dc25545..7407ce6 100644
--- a/src/visualizers/widgets/ElectricCircuitsEditor/CircuitEditorDashboard/src/CircuitEditorDashboard.svelte
+++ b/src/visualizers/widgets/ElectricCircuitsEditor/CircuitEditorDashboard/src/CircuitEditorDashboard.svelte
@@ -23,7 +23,8 @@
     let activeObjectChangeFn,
         goToParentFn,
         isNested,
-        parentName;
+        parentName,
+        displayPartBrowser = false;
     let showRecommendationConfig,
         recommendationPluginMetadata,
         recommendationPluginRunning,
@@ -47,6 +48,7 @@
         recommendationPluginSuccess = false;
         isNested = false;
         parentName = '';
+        displayPartBrowser = false;
         defineElectricCircuitsDomain(joint);
         if (opts.activeObjectChangeFn && opts.goToParentFn) {
             activeObjectChangeFn = opts.activeObjectChangeFn;
@@ -54,10 +56,14 @@
         }
     }
 
-    export function render(opts) {
+    export function render(opts={}) {
         renderCircuit(opts.width, opts.height);
-        renderComponents(opts.validComponents);
-        recommendationPluginMetadata = opts.recommendationPluginMetadata;
+        if(displayPartBrowser){
+            renderComponents(opts.validComponents);
+        }
+        if(opts.recommendationPluginMetadata){
+            recommendationPluginMetadata = opts.recommendationPluginMetadata;
+        }
     }
 
     export function adjustPaperDimensions(width, height) {
@@ -66,8 +72,13 @@
         if (navBarWidth < width) {
             width = navBarWidth;
         }
-        circuitPaper.setDimensions(width * 10 / 12, height - navBarHeight);
-        layoutComponentBrowser();
+        if(displayPartBrowser){
+            circuitPaper.setDimensions(width * 10 / 12, height - navBarHeight);
+            layoutComponentBrowser();
+        } else {
+            circuitPaper.setDimensions(width, height - navBarHeight);
+        }
+
         zoom(currentZoomLevel);
     }
 
@@ -187,6 +198,16 @@
         ).sort();
     }
 
+    export function showPartBrowser(opts){
+        displayPartBrowser = true;
+        setTimeout(() => render(opts), 100);
+    }
+
+    export function hidePartBrowser() {
+        displayPartBrowser = false;
+        setTimeout(() => render(), 100);
+    }
+
     function renderCircuit(width, height) {
         circuitGraph = new joint.dia.Graph();
 
@@ -441,9 +462,11 @@
             </div>
         </div>
     </nav>
+
     <div class="container-fluid">
         <div class="row row-list">
-            <div class="col-md-2" id="componentBrowserContainer">
+            {#if displayPartBrowser}
+                <div class="col-md-2" id="componentBrowserContainer">
                 <div class="text-center"
                      style="position:fixed; z-index:100; width: 15.3%; height: 40px; background: #FEFEF8">
                     <h4>Component Browser
@@ -467,12 +490,14 @@
                 </div>
                 <div class="components-div" style="height: 4000px;" bind:this={componentBrowserContainer}></div>
             </div>
-            <div class="col-md-10" id="circuitEditorContainer">
+            {/if}
+            <div class="{displayPartBrowser ? 'col-md-10' : 'col-md-12'}" id="circuitEditorContainer">
                 <div class="paper-div" bind:this={circuitContainer}></div>
             </div>
         </div>
     </div>
 
+    {#if displayPartBrowser}
     <div id="flyPaper"
          style="display: {flyDragged ? 'block': 'none'}; background-color:transparent;position:fixed;z-index:100;opacity:1.0;pointer-event:none;"></div>
 
@@ -496,6 +521,7 @@
             {/each}
         </form>
     {/if}
+    {/if}
 
 </main>
 
diff --git a/src/visualizers/widgets/ElectricCircuitsEditor/ElectricCircuitsEditorWidget.js b/src/visualizers/widgets/ElectricCircuitsEditor/ElectricCircuitsEditorWidget.js
index d290313..222f5f5 100644
--- a/src/visualizers/widgets/ElectricCircuitsEditor/ElectricCircuitsEditorWidget.js
+++ b/src/visualizers/widgets/ElectricCircuitsEditor/ElectricCircuitsEditorWidget.js
@@ -141,5 +141,19 @@ define([
         this.dashboard.clearGraph();
     };
 
+    ElectricCircuitsEditorWidget.prototype.showPartBrowser = function () {
+        this.dashboard.showPartBrowser({
+            validComponents: this.getValidComponents(),
+            width: this._el.width(),
+            height: this._el.height()
+        });
+    };
+
+    ElectricCircuitsEditorWidget.prototype.hidePartBrowser = function () {
+        this.dashboard.hidePartBrowser();
+    };
+
+
+
     return ElectricCircuitsEditorWidget;
 });