diff --git a/app/components/commander/index.hbs b/app/components/commander/index.hbs
index ec5b18878d030cd5ce1950d3fba7139e1146c410..e18a28e30a38e12ee276e07f0998fbaee20dd79f 100644
--- a/app/components/commander/index.hbs
+++ b/app/components/commander/index.hbs
@@ -1,7 +1,10 @@
 <div class="panel commander col m-2 p-2"
   {{droppable
     onDrop=this.onDrop
-    onDragOver=this.onDragOver }}>
+    onDragOver=this.onDragOver }}
+
+  {{uiSelect}}>
+
   <div class="d-flex justify-content-between">
     <Commander::ActionButtons
       @openNewFolderModal={{this.openNewFolderModal}}
diff --git a/app/modifiers/ui_select.js b/app/modifiers/ui_select.js
new file mode 100644
index 0000000000000000000000000000000000000000..21020e9f4c45930f7f0ac2660245b721cf373291
--- /dev/null
+++ b/app/modifiers/ui_select.js
@@ -0,0 +1,47 @@
+import { action } from '@ember/object';
+import Modifier from 'ember-modifier';
+
+
+export default class UISelectModifier extends Modifier {
+
+  ui_select = undefined; 
+
+  addEventListener() {
+    this.element.addEventListener('mousedown', this.onMouseDown);
+    this.element.addEventListener('mouseup', this.onMouseUp);
+    this.element.addEventListener('mousemove', this.onMouseMove);
+  }
+
+  removeEventListener() {
+    this.element.removeEventListener('mousedown', this.onMouseDown);
+    this.element.removeEventListener('mouseup', this.onMouseUp);
+    this.element.removeEventListener('mousemove', this.onMouseMove);
+  }
+
+  // lifecycle hooks
+  didReceiveArguments() {
+    this.removeEventListener();
+    this.addEventListener();
+  }
+
+  willDestroy() {
+    this.removeEventListener();
+  }
+
+  @action
+  onMouseMove(event) {
+    if (this.ui_select) {
+      console.log('on mouse move');
+    }
+  }
+
+  @action
+  onMouseUp(event) {
+    this.ui_select = false;
+  }
+
+  @action
+  onMouseDown(event) {
+    this.ui_select = true;
+  }
+}
\ No newline at end of file