diff --git a/app/components/breadcrumb.hbs b/app/components/breadcrumb.hbs
index 47d819c9a41e5fe3312642aac614fd9cf7846a23..ff30575ec827cf2069a014edbb480c9701398163 100644
--- a/app/components/breadcrumb.hbs
+++ b/app/components/breadcrumb.hbs
@@ -2,9 +2,12 @@
    <ol class="breadcrumb">
     {{#each this.nodes as |node|}}
       <li class="breadcrumb-item">
-        <LinkTo
-          @route="authenticated.nodes"
-          @model={{node}}>{{node.title}}</LinkTo>
+          <LinkTo
+            @route="authenticated.nodes"
+            @model={{node.id}}
+            @query={{this.query}}>
+              {{node.title}}
+          </LinkTo>
       </li>
     {{/each}}
   </ol>
diff --git a/app/components/breadcrumb.js b/app/components/breadcrumb.js
index 89fb74219b3ad785bf40ab95e73c8f955da4bcca..e1b6bc9380fd656a88969001d57535640455cfbe 100644
--- a/app/components/breadcrumb.js
+++ b/app/components/breadcrumb.js
@@ -20,4 +20,13 @@ export default class BreadcrumbComponent extends Component {
     return _nodes.reverse();
   }
 
+  get query() {
+    if (this.args.extranode) {
+      return {
+        extranode_id: this.args.extranode.id
+      }
+    }
+
+    return {};
+  }
 }
diff --git a/app/components/folder.hbs b/app/components/folder.hbs
index ed43bb691807c5792021e06fe9b93b1d82388e43..b417d257373c1d90e1c6af822ebbc787dc570494 100644
--- a/app/components/folder.hbs
+++ b/app/components/folder.hbs
@@ -2,8 +2,10 @@
     <div class="icon folder"></div>
     <div class="title">
         <LinkTo
-            @route="authenticated.nodes" @model={{@model}}>
-            {{@model.title}}
+            @route="authenticated.nodes"
+            @model={{@model.id}}
+            @query={{this.query}}>
+                {{@model.title}}
         </LinkTo>
     </div>
 </div>
\ No newline at end of file
diff --git a/app/components/folder.js b/app/components/folder.js
new file mode 100644
index 0000000000000000000000000000000000000000..1e2015b2457ded4fce82fb9f429fb4106189288f
--- /dev/null
+++ b/app/components/folder.js
@@ -0,0 +1,18 @@
+import { A } from '@ember/array';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+
+export default class FolderComponent extends Component {
+
+  get query() {
+    if (this.args.extranode) {
+      return {
+        extranode_id: this.args.extranode.id
+      }
+    }
+
+    return {};
+  }
+}
diff --git a/app/components/panel.hbs b/app/components/panel.hbs
index 5f81e45ef97d8ccd72c129e92984d76262235f39..eedc625dd75499067624a18a5afad1f1a3180115 100644
--- a/app/components/panel.hbs
+++ b/app/components/panel.hbs
@@ -1,25 +1,27 @@
-<div>
-  <button class="btn btn-bordered btn-light btn-flat"
-  type="button">
-    <i class="fa fa-upload mr-1 text-success"></i>
-    Upload
-  </button>
+<div class="panel">
+  <div>
+    <button class="btn btn-bordered btn-light btn-flat"
+    type="button">
+      <i class="fa fa-upload mr-1 text-success"></i>
+      Upload
+    </button>
 
-  <button class="btn btn-bordered btn-light btn-flat"
-  type="button" {{on "click" this.openNewFolderModal }}>
-    <i class="fa fa-plus mr-1 text-success"></i>
-    New Folder
-  </button>
-</div>
+    <button class="btn btn-bordered btn-light btn-flat"
+    type="button" {{on "click" this.openNewFolderModal }}>
+      <i class="fa fa-plus mr-1 text-success"></i>
+      New Folder
+    </button>
+  </div>
 
-<Modal::NewFolder
-  id="new-folder"
-  @node={{@node}}
-  @onClose={{this.closeNewFolderModal}}
-  {{show-when this.show_new_folder_modal}} />
+  <Modal::NewFolder
+    id="new-folder"
+    @node={{@node}}
+    @onClose={{this.closeNewFolderModal}}
+    {{show-when this.show_new_folder_modal}} />
 
-<Breadcrumb @node={{@node}} />
+  <Breadcrumb @node={{@node}} @extranode={{@extranode}} />
 
-{{#each @nodes as |node|}}
-  <Folder @model={{node}} />
-{{/each}}
\ No newline at end of file
+  {{#each @nodes as |node|}}
+    <Folder @model={{node}} @extranode={{@extranode}} />
+  {{/each}}
+</div>
\ No newline at end of file
diff --git a/app/controllers/authenticated/nodes.js b/app/controllers/authenticated/nodes.js
index 7de981325c237e29d6905531440d840e2b330c7f..540d587e994d85c862c4d4979135418dc8ffafc0 100644
--- a/app/controllers/authenticated/nodes.js
+++ b/app/controllers/authenticated/nodes.js
@@ -4,7 +4,5 @@ import { tracked } from "@glimmer/tracking";
 
 
 export default class NodesController extends Controller {
-  queryParams = ['extrapanelc'];
-
-  @tracked extrapanelc = null;
+  queryParams = ['extranode_id'];
 }
diff --git a/app/routes/authenticated/nodes.js b/app/routes/authenticated/nodes.js
index efeefe2fa2bb5a16a5439aa8ecffa076c9531eab..da928bb96a215c464296a312bd189b901c76389b 100644
--- a/app/routes/authenticated/nodes.js
+++ b/app/routes/authenticated/nodes.js
@@ -1,25 +1,43 @@
 import Route from '@ember/routing/route';
 import { inject as service } from '@ember/service';
 import { tracked } from "@glimmer/tracking";
+import RSVP from 'rsvp';
 
 
 export default class FolderRoute extends Route {
   @service store;
 
-  queryParams = ['extra'];
-  @tracked extra = null;
+  queryParams = {
+    extranode_id: {
+      refreshModel: true
+    }
+  };
 
-
-  async model(params) {
-    let response, adapter, query_params;
-
-
-    query_params = this.paramsFor('authenticated.nodes');
-    console.log(`query_params=${this.query_params}`);
-    console.log(`extra=${this.extra}`);
+  model(params) {
+    let response, adapter;
 
     adapter = this.store.adapterFor('node');
 
+    if (params.extranode_id) {
+      return RSVP.hash({
+        node: adapter.findNode(params.node_id),
+        extranode: adapter.findNode(params.extranode_id)
+      });
+    }
+
     return adapter.findNode(params.node_id);
   }
+
+  setupController(controller, model) {
+    let _controller = this.controllerFor('authenticated.nodes');
+
+    if (model.extranode) {
+      _controller.set('dualpanel_mode', true);
+      _controller.set('mainnode', model.node);
+      _controller.set('extranode', model.extranode);
+    } else {
+      _controller.set('dualpanel_mode', false);
+      _controller.set('mainnode', model);
+    }
+  }
 }
diff --git a/app/templates/authenticated/nodes.hbs b/app/templates/authenticated/nodes.hbs
index e6cc6446403049471cfe63f62b57ed73136d4914..370225244253b3457faa954a426dad0cf87fb837 100644
--- a/app/templates/authenticated/nodes.hbs
+++ b/app/templates/authenticated/nodes.hbs
@@ -1,7 +1,13 @@
-<Panel
-  @node={{@model}}
-  @nodes={{@model.children}} />
+<div class="panels d-flex">
+  <Panel
+    @node={{this.mainnode}}
+    @nodes={{this.mainnode.children}}
+    @extranode={{this.extranode}} />
 
-{{#if this.extrapanelc}}
-  Extra Panel={{this.extrapanelc}}!
-{{/if}}
\ No newline at end of file
+  {{#if this.extranode}}
+    <Panel
+      @node={{this.extranode}}
+      @nodes={{this.extranode.children}}
+      @mainnode={{this.mainnode}} />
+  {{/if}}
+</div>
\ No newline at end of file