diff --git a/app/components/dual_link_to.js b/app/components/dual_link_to.js
deleted file mode 100644
index c4a1d251399643fe1281d38a9f6dd86964245b63..0000000000000000000000000000000000000000
--- a/app/components/dual_link_to.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import Component from '@glimmer/component';
-
-
-export default class DualLinkToComponent extends Component {
-
-  get route() {
-    let node,
-      hint;
-
-    hint = this.args.hint;
-    node = this.args.node;
-    if (hint == 'left') {
-      if (node && node.get('nodeType') === 'document') {
-        return 'authenticated.document';
-      }
-
-      if (node && node.get('nodeType') === 'folder') {
-        return 'authenticated.nodes';
-      }
-    }
-
-    return 'authenticated.nodes';
-  }
-
-  get model() {
-    if (this.args.hint == 'left') {
-      return this.args.node;
-    }
-
-    return this.args.extranode;
-  }
-
-  get title() {
-    return this.args.node.get('title');
-  }
-
-  get query() {
-    let node,
-      extranode,
-      hint;
-
-    node = this.args.node;
-    extranode = this.args.extranode;
-    hint = this.args.hint;
-
-    if ((hint === 'left') && extranode) {
-      return {
-        'extranode_id': extranode.get('id')
-      };
-    }
-
-    if (hint === 'right' && node) {
-      return {
-        'extranode_id': node.get('id')
-      }
-    }
-
-    return {};
-  } // end of query
-
-} // end of DualLinkToComponent
diff --git a/app/components/dual_link_to.hbs b/app/components/dual_link_to/index.hbs
similarity index 100%
rename from app/components/dual_link_to.hbs
rename to app/components/dual_link_to/index.hbs
diff --git a/app/components/dual_link_to/index.js b/app/components/dual_link_to/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..72f96eae2e1a8d57b70027d20db08db8858788f8
--- /dev/null
+++ b/app/components/dual_link_to/index.js
@@ -0,0 +1,93 @@
+import Component from '@glimmer/component';
+
+
+export default class DualLinkToComponent extends Component {
+  /*
+    Like LinkTo component, but for dual panel mode
+
+    Arguments:
+
+      @node - main node, which is visually located on left panel
+      @extranode - extra node, visually on right panel
+      @hint = can be either "left" "right". Indicates in which panel
+      is current <DualLinkTo /> located at this very moment.
+
+      URL has one of following forms:
+
+      Single panel modes:
+
+        /nodes/<node_id> - opens commander single panel model, with <node_id>
+          root folder/node
+        /documents/<node_id> - opens viewer in single panel mode, with <node_id>
+          as current document/node
+
+      Dual panel models:
+
+        /nodes/<node_id>?extranode_id=<extranode_id> - opens dual panel mode. On left side
+          commander is opened with <node_id> as root folder/node. On right panel
+          there will be opened a commander or a viewer, depending on what node type is
+          <extranode_id>.
+
+        /documents/<node_id>?extranode_id=<extranode_id> - opens dual panel mode. On left side
+          document viewer is opened with <node_id> as root document/node. On right panel
+          there will be opened a commander or a viewer, depending on what node type is
+          <extranode_id>.
+  */
+
+  get route() {
+    let node,
+      hint;
+
+    hint = this.args.hint;
+    node = this.args.node;
+
+    if (hint == 'left') {
+      if (node && node.get('nodeType') === 'document') {
+        return 'authenticated.document';
+      }
+
+      if (node && node.get('nodeType') === 'folder') {
+        return 'authenticated.nodes';
+      }
+    }
+
+    return 'authenticated.nodes';
+  }
+
+  get model() {
+    if (this.args.hint == 'left') {
+      return this.args.node;
+    }
+
+    return this.args.extranode;
+  }
+
+  get title() {
+    return this.args.node.get('title');
+  }
+
+  get query() {
+    let node,
+      extranode,
+      hint;
+
+    node = this.args.node;
+    extranode = this.args.extranode;
+    hint = this.args.hint;
+
+    if ((hint === 'left') && extranode) {
+      return {
+        'extranode_id': extranode.get('id')
+      };
+    }
+
+    if (hint === 'right' && node) {
+      return {
+        'extranode_id': node.get('id')
+      }
+    }
+
+    return {};
+  } // end of query
+
+} // end of DualLinkToComponent
diff --git a/app/components/login.hbs b/app/components/login/index.hbs
similarity index 100%
rename from app/components/login.hbs
rename to app/components/login/index.hbs
diff --git a/app/components/login.js b/app/components/login/index.js
similarity index 100%
rename from app/components/login.js
rename to app/components/login/index.js
diff --git a/app/components/viewer/action_buttons.hbs b/app/components/viewer/action_buttons.hbs
new file mode 100644
index 0000000000000000000000000000000000000000..1eb75bf9f5cb7f14d50b65b4a9701f263e731245
--- /dev/null
+++ b/app/components/viewer/action_buttons.hbs
@@ -0,0 +1,8 @@
+<div>
+  <button
+    class="btn btn-success"
+    type="button">
+      <i class="fa fa-upload mr-1"></i>
+    Upload
+  </button>
+</div>
\ No newline at end of file
diff --git a/app/components/viewer/index.hbs b/app/components/viewer/index.hbs
index 3588d26ac22be9786a0e61322fe2d6ee48881691..41c7f0b46b8ff3dc4cdf29ebf9a404099f12fac8 100644
--- a/app/components/viewer/index.hbs
+++ b/app/components/viewer/index.hbs
@@ -1,9 +1,14 @@
 <div class="panel viewer col m-2 p-2">
-  <Breadcrumb
+  <div class="d-flex justify-content-between">
+    <Viewer::ActionButtons />
+  </div>
+
+    <Breadcrumb
     @node={{@model.document_version.document}}
     @extranode={{@extranode}}
     @hint="left" />
 
+
   <div class="d-flex">
     <Viewer::Thumbnails @pages={{@model.pages}} />
     <Viewer::Pages @pages={{@model.pages}} />