diff --git a/app/components/viewer/index.hbs b/app/components/viewer/index.hbs
index cc0ba551ef50994850ca8d239dbe3035de15e64f..3588d26ac22be9786a0e61322fe2d6ee48881691 100644
--- a/app/components/viewer/index.hbs
+++ b/app/components/viewer/index.hbs
@@ -1,8 +1,11 @@
-<Breadcrumb
-  @node={{@model.document_version.document}}
-  @hint="left" />
+<div class="panel viewer col m-2 p-2">
+  <Breadcrumb
+    @node={{@model.document_version.document}}
+    @extranode={{@extranode}}
+    @hint="left" />
 
-<div class="d-flex">
-  <Viewer::Thumbnails @pages={{@model.pages}} />
-  <Viewer::Pages @pages={{@model.pages}} />
+  <div class="d-flex">
+    <Viewer::Thumbnails @pages={{@model.pages}} />
+    <Viewer::Pages @pages={{@model.pages}} />
+  </div>
 </div>
diff --git a/app/controllers/authenticated/document.js b/app/controllers/authenticated/document.js
new file mode 100644
index 0000000000000000000000000000000000000000..3bc20b4ae6e4c22eb73d0a3b2e893be6d4a9911e
--- /dev/null
+++ b/app/controllers/authenticated/document.js
@@ -0,0 +1,23 @@
+import Controller from '@ember/controller';
+import { action } from '@ember/object';
+import { tracked } from "@glimmer/tracking";
+import { inject as service } from '@ember/service';
+
+
+export default class DocumentController extends Controller {
+
+  @service currentUser;
+  @tracked extranode_id = null;
+  queryParams = ['extranode_id']
+
+  @action
+  onPanelToggle() {
+
+    if (this.extranode_id) {
+      this.extranode_id = null;
+    } else {
+      // TODO: get home folder ID from this.currentUser;
+      this.extranode_id = 75;
+    }
+  }
+}
diff --git a/app/routes/authenticated/document.js b/app/routes/authenticated/document.js
index 09e3c88767e4ea2049e6c5e73b45eba551a69f01..57e4207722190c42e1df1e0dbd27aafe63b371f7 100644
--- a/app/routes/authenticated/document.js
+++ b/app/routes/authenticated/document.js
@@ -1,17 +1,27 @@
 import Route from '@ember/routing/route';
 import { inject as service } from '@ember/service';
+import RSVP from 'rsvp';
 
 
 export default class DocumentRoute extends Route {
   @service store;
 
+  queryParams = {
+    extranode_id: {
+      refreshModel: true
+    }
+  };
+
   async model(params) {
     let doc_adapter,
       page_adapter,
+      node_adapter,
+      extranode,
       document_version,
       pages,
       pages_with_url;
 
+    node_adapter = this.store.adapterFor('node');
     page_adapter = this.store.adapterFor('page');
     doc_adapter = this.store.adapterFor('document');
 
@@ -19,6 +29,17 @@ export default class DocumentRoute extends Route {
     pages = await document_version.pages;
     pages_with_url = await page_adapter.loadBinaryImages(pages);
 
+    if (params.extranode_id) {
+
+      extranode = await node_adapter.findNode(params.extranode_id)
+
+      return {
+        'document_version': document_version,
+        'pages': pages_with_url,
+        'extranode': extranode
+      };
+    }
+
     return {
       'document_version': document_version,
       'pages': pages_with_url
@@ -28,4 +49,21 @@ export default class DocumentRoute extends Route {
   renderTemplate() {
     this.render('authenticated.viewer');
   }
+
+  setupController(controller, model) {
+    let _controller = this.controllerFor('authenticated.document'),
+      _auth_controller = this.controllerFor('authenticated');
+
+    if (model.extranode) {
+      console.log("Document controller setting dualpanel_mode to true");
+      _controller.set('dualpanel_mode', true);
+      _controller.set('extranode', model.extranode);
+    } else {
+      _controller.set('dualpanel_mode', false);
+      _controller.set('extranode', undefined);
+    }
+
+    _controller.set('document_version', model.document_version);
+    _controller.set('pages', model.pages);
+  }
 }
diff --git a/app/templates/authenticated/nodes.hbs b/app/templates/authenticated/nodes.hbs
index fedbd648baae57907be8ece778b2aca528476203..81f376e2144501bc50ebf7e5042d7dee319bc539 100644
--- a/app/templates/authenticated/nodes.hbs
+++ b/app/templates/authenticated/nodes.hbs
@@ -1,5 +1,3 @@
-
-
 <div class="panels d-flex row">
   <Commander
     @node={{this.mainnode}}
diff --git a/app/templates/authenticated/viewer.hbs b/app/templates/authenticated/viewer.hbs
index 2e069ccb3fd6acd599ab4506c7945947e980578c..ce1018ed44e8e3366bcc3ae1ee619c2b500cfa47 100644
--- a/app/templates/authenticated/viewer.hbs
+++ b/app/templates/authenticated/viewer.hbs
@@ -1 +1,17 @@
-<Viewer @model={{@model}} />
\ No newline at end of file
+<div class="panels d-flex row">
+  <Viewer
+    @model={{@model}}
+    @extranode={{this.extranode}}
+    @onPanelToggle={{this.onPanelToggle}}
+    @dualPanelMode={{this.dualpanel_mode}}
+    @hint="left" />
+
+  {{#if this.dualpanel_mode}}
+    <Commander
+      @node={{this.extranode}}
+      @extranode={{this.mainnode}}
+      @onPanelToggle={{this.onPanelToggle}}
+      @dualPanelMode={{this.dualpanel_mode}}
+      @hint="right" />
+  {{/if}}
+</div>