diff --git a/app/components/commander/index.hbs b/app/components/commander/index.hbs
index 9f35210e120b2b621d5eda57434366a22cb64a82..45ed1cbc3537f6ddda90e365a6daf5ed0b624a11 100644
--- a/app/components/commander/index.hbs
+++ b/app/components/commander/index.hbs
@@ -11,6 +11,8 @@
   <ContextMenu
     @openNewFolderModal={{this.openNewFolderModal}}
     @openConfirmDeletionModal={{this.openConfirmDeletionModal}}
+    @onSelectionChanged={{this.onSelectionChanged}}
+    @nodes={{this.children}}
     @selectedNodes={{this.selected_nodes}}
     @onDownloadNodes={{this.onDownloadNodes}}
     @openRenameModal={{this.openRenameModal}} />
diff --git a/app/components/commander/index.js b/app/components/commander/index.js
index d21c6f97950c01f904f27b5526b0d54f94d6c0df..eea132a69cee3ae6122d5f34ad2c8b2257f9615b 100644
--- a/app/components/commander/index.js
+++ b/app/components/commander/index.js
@@ -41,7 +41,7 @@ export default class CommanderComponent extends Component {
   @tracked __new_record; // used as workaround for an ember bug
 
   @tracked deleted_records = A([]);
-  @tracked __deleted_records; // used as workaround for an ember bug
+  @tracked __deleted_record; // used as workaround for an ember bug
 
   constructor(owner, args) {
     super(owner, args);
@@ -88,7 +88,7 @@ export default class CommanderComponent extends Component {
 
   _substract_nodes(node_ids) {
     let that = this, doc;
-
+    console.log(`substract_nodes ${node_ids}`);
     node_ids.forEach(node_id => {
       // maybe document ?
       doc = that.store.peekRecord('document', node_id);
@@ -103,9 +103,10 @@ export default class CommanderComponent extends Component {
     });
   }
 
-  _substract_node(doc) {
-    this.deleted_records.push(doc);
-    this.__deleted_record = doc;
+  _substract_node(node) {
+    this.deleted_records.push(node);
+    this.__deleted_record = node;
+    this.selected_nodes = [];
   }
 
   _add_nodes(node_ids) {
@@ -189,6 +190,11 @@ export default class CommanderComponent extends Component {
     this.view_mode = new_view_mode;
   }
 
+  @action
+  onSelectionChanged(selected_nodes) {
+    this.selected_nodes = selected_nodes;
+  }
+
   @action
   onCheckboxChange({node, is_selected}) {
     /**
@@ -323,7 +329,6 @@ export default class CommanderComponent extends Component {
         );
       }
     }
-
     if (this.deleted_records.length > 0) {
       children_copy = children_copy.filter(
         item => !this.deleted_records.includes(item)
@@ -338,7 +343,7 @@ export default class CommanderComponent extends Component {
       // pass
     }
 
-    if (this.__deleted_records) {
+    if (this.__deleted_record) {
       // similar to ``this.__new_record`` - it is used
       // here to help ember with tracking of ``this.deleted_records`` array
     }
diff --git a/app/components/context_menu/index.js b/app/components/context_menu/index.js
index 71443df888a5fab64751e412065adfc1fb80eb93..ff6e9124087148fab40f8a7e396d575d78c0fc21 100644
--- a/app/components/context_menu/index.js
+++ b/app/components/context_menu/index.js
@@ -29,43 +29,47 @@ export default class ContextMenuComponent extends Component {
 
   @action
   onSelectAll() {
-    let nodes_arr = Array.from(
-      document.getElementsByClassName('node')
-    );
+    let new_selection = Array.from(this.args.nodes);
 
-    this.select_nodes(nodes_arr);
+    this.args.onSelectionChanged(new_selection);
   }
 
   @action
   onSelectFolders() {
-    let nodes_arr = Array.from(
-      document.querySelectorAll('.node.folder')
-    );
+    let new_selection;
 
-    this.select_nodes(nodes_arr);
+    new_selection = this.args.nodes.filter(
+      node => node.nodeType == 'folder'
+    );
+    this.args.onSelectionChanged(new_selection);
   }
 
   @action
   onSelectDocuments() {
-    let nodes_arr = Array.from(
-      document.querySelectorAll('.node.document')
-    );
+    let new_selection;
 
-    this.select_nodes(nodes_arr);
+    new_selection = this.args.nodes.filter(
+      node => node.nodeType == 'document'
+    );
+    this.args.onSelectionChanged(new_selection);
   }
 
   @action
   onInvertSelection() {
-    console.log('Invert Selection');
+    let new_selection, current_sel;
+
+    current_sel = this.args.selectedNodes;
+
+    new_selection = this.args.nodes.filter(node => {
+      return !current_sel.includes(node);
+    });
+
+    this.args.onSelectionChanged(new_selection);
   }
 
   @action
   onSelectNone() {
-    let nodes_arr = Array.from(
-      document.getElementsByClassName('node')
-    );
-
-    this.deselect_all_nodes(nodes_arr);
+    this.args.onSelectionChanged([]);
   }
 
   @action
diff --git a/app/components/nav/topbar.hbs b/app/components/nav/topbar.hbs
index ef5c0a03156778fc91614e553b9fa85d90cc065d..7ec66d421a748ff468540c9a930441fad6695465 100644
--- a/app/components/nav/topbar.hbs
+++ b/app/components/nav/topbar.hbs
@@ -11,6 +11,14 @@
               <i class="fa fa-user mx-2"></i><span>{{this.currentUser.user.username}}</span>
             </button>
           <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton1">
+            <li class="dropdown-item">
+              <i class="fa fa-user-secret mx-2"></i>
+              <LinkTo
+                @route='authenticated.tokens'
+                class="text-decoration-none">
+                  API Tokens
+              </LinkTo>
+            </li>
             <li class="dropdown-item">
               <i class="fa fa-cogs mx-2"></i>
               <LinkTo
diff --git a/app/modifiers/droppable.js b/app/modifiers/droppable.js
index 3ec0d98161b392f1c73456a33318813a47533f3f..02f25601c049f0e48b286979a1e63028623ba1c5 100644
--- a/app/modifiers/droppable.js
+++ b/app/modifiers/droppable.js
@@ -41,9 +41,9 @@ export default class DrappableModifier extends Modifier {
       // drop incoming from another panel
       data = event.dataTransfer.getData('application/x.node');
       if (data) {
-        callback(JSON.parse({
-          'application/x.node': data
-        }));
+        callback({
+          'application/x.node': JSON.parse(data)
+        });
       }
     } else if (this._is_desktop_drop(event)) {
       files_list = this._get_desktop_files(event);
diff --git a/app/router.js b/app/router.js
index 3fee799a1c771487890661c3c587854fe016152c..35b438d2df0b73d96e673c69f48d0c426415ac58 100644
--- a/app/router.js
+++ b/app/router.js
@@ -43,6 +43,11 @@ Router.map(function () {
       this.route('index', { path: '/' });
       this.route('section', { path: '/:section_name' });
     });
+
+    this.route('tokens', function() {
+      this.route('add');
+      this.route('index', { path: '/' });
+    });
   });
 
   this.route('login');
diff --git a/app/templates/authenticated/tokens/add.hbs b/app/templates/authenticated/tokens/add.hbs
new file mode 100644
index 0000000000000000000000000000000000000000..a319583b787f290640b8f796d95982887e4438c9
--- /dev/null
+++ b/app/templates/authenticated/tokens/add.hbs
@@ -0,0 +1 @@
+Add
\ No newline at end of file
diff --git a/app/templates/authenticated/tokens/index.hbs b/app/templates/authenticated/tokens/index.hbs
new file mode 100644
index 0000000000000000000000000000000000000000..9f7cda8ed5fcaff95eb3e5566a6609dc61696f6b
--- /dev/null
+++ b/app/templates/authenticated/tokens/index.hbs
@@ -0,0 +1 @@
+Index
\ No newline at end of file