diff --git a/app/adapters/application.js b/app/adapters/application.js
index 90c4dd233996a62848d7fe263efd162cd2078124..14f50f8a62604620255fc7d10e1c09cadcfe08e4 100644
--- a/app/adapters/application.js
+++ b/app/adapters/application.js
@@ -2,7 +2,6 @@ import JSONAPIAdapter from '@ember-data/adapter/json-api';
 import { computed } from '@ember/object';
 import { inject as service } from '@ember/service';
 
-
 export default class ApplicationAdapter extends JSONAPIAdapter {
   namespace = 'api';
   host = 'http://127.0.0.1:8000';
@@ -12,7 +11,7 @@ export default class ApplicationAdapter extends JSONAPIAdapter {
     return `${super.buildURL(...args)}/`;
   }
 
-  @computed('session.data.authenticated.token')
+  @computed('session.data.authenticated.token', 'session.isAuthenticated')
   get headers() {
     let _headers = {},
       token;
diff --git a/app/adapters/node.js b/app/adapters/node.js
index 48bbf44b511db1d48d6b4cf816c3edc01a5e9c85..6dffdad523d76d120c4333fe6477231c28a8967a 100644
--- a/app/adapters/node.js
+++ b/app/adapters/node.js
@@ -1,8 +1,6 @@
 import ApplicationAdapter from './application';
 
-
 export default class NodeAdapter extends ApplicationAdapter {
-
   findNode(node_id) {
     let url, ret;
 
@@ -11,4 +9,4 @@ export default class NodeAdapter extends ApplicationAdapter {
 
     return ret;
   }
-}
\ No newline at end of file
+}
diff --git a/app/adapters/user.js b/app/adapters/user.js
index 6cd8639c4a61dfc2c3a771a72b7192b29d1cd8e6..249c17340a6dc0941ada84ef84db42f0da2f9268 100644
--- a/app/adapters/user.js
+++ b/app/adapters/user.js
@@ -1,18 +1,16 @@
 import ApplicationAdapter from './application';
 
-
 export default class UserAdapter extends ApplicationAdapter {
-
   changePassword(model, new_password) {
     const url = this.buildURL('user', model.id) + 'change-password/';
 
-    return this.ajax(url, 'POST',  {
+    return this.ajax(url, 'POST', {
       data: {
-        'password': new_password
+        password: new_password,
       },
       headers: {
-        'Content-Type': 'application/json'
-      }
+        'Content-Type': 'application/json',
+      },
     });
   }
 
@@ -30,5 +28,4 @@ export default class UserAdapter extends ApplicationAdapter {
 
     return originalUrl;
   }
-
-}
\ No newline at end of file
+}
diff --git a/app/app.js b/app/app.js
index 32770b8f712b7e4a917b2e6797f4435703f68ebd..1953ae5ba950f9ac5eff5a4bfc7cc361330eb894 100644
--- a/app/app.js
+++ b/app/app.js
@@ -4,7 +4,6 @@ import loadInitializers from 'ember-load-initializers';
 import config from 'papermerge/config/environment';
 import 'bootstrap';
 
-
 export default class App extends Application {
   modulePrefix = config.modulePrefix;
   podModulePrefix = config.podModulePrefix;
diff --git a/app/authenticators/auth-token.js b/app/authenticators/auth-token.js
index b70e2724598fa6baca126afb795f4552e77ebe5c..37044799ef2a166cb1de2052f5b1197387abeb55 100644
--- a/app/authenticators/auth-token.js
+++ b/app/authenticators/auth-token.js
@@ -1,6 +1,5 @@
 import Base from 'ember-simple-auth/authenticators/base';
 
-
 export default class AuthToken extends Base {
   /*
   Simple token based authenticator
@@ -13,7 +12,7 @@ export default class AuthToken extends Base {
   async restore(data) {
     /**
      * Restores session token from the cookie.
-    */
+     */
     let { token } = data;
 
     if (token) {
@@ -27,11 +26,11 @@ export default class AuthToken extends Base {
     let response, error;
 
     response = await fetch('http://localhost:8000/api/auth-token/', {
-      'method': 'POST',
-      'headers': {
-        'Content-Type': 'application/json'
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
       },
-      body: JSON.stringify({username, password})
+      body: JSON.stringify({ username, password }),
     });
 
     if (response.ok) {
diff --git a/app/base/routing.js b/app/base/routing.js
index 35434d09debc8308a2b072443592fd19b2fe56e5..3078d32affe373ba7b729aa917d5bea1c59aaa93 100644
--- a/app/base/routing.js
+++ b/app/base/routing.js
@@ -1,9 +1,7 @@
 import Route from '@ember/routing/route';
 import { inject as service } from '@ember/service';
 
-
 export default class BaseRoute extends Route {
-
   @service session;
 
   beforeModel(transition) {
diff --git a/app/components/modal/new_folder.hbs b/app/components/modal/new_folder.hbs
index 220319aa9076f7bac1e08dfa9df9a5c6fb647225..58c7af9885d26a5359ae820fd68601f69a80041b 100644
--- a/app/components/modal/new_folder.hbs
+++ b/app/components/modal/new_folder.hbs
@@ -1,6 +1,8 @@
+
 <Modal::Base
   @title="Create Folder"
   @actionTitle="Create"
+  @onClose={{@onClose}}
   @onSubmit={{this.onSubmit}}
   ...attributes
 >
@@ -9,6 +11,6 @@
     id="folder-title"
     class="form-control"
     @type="text"
-    @value="{{this.title}}"
+    @value={{this.title}}
   />
 </Modal::Base>
\ No newline at end of file
diff --git a/app/components/modal/new_folder.js b/app/components/modal/new_folder.js
index c68a4cf9b8fac6bf8c9f36aa3cb7f725fac0c920..959912a4ff2b70825472ab50034b9aba05a0d021 100644
--- a/app/components/modal/new_folder.js
+++ b/app/components/modal/new_folder.js
@@ -2,12 +2,15 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 
+import { Modal } from 'bootstrap';
 
 export default class NewFolderComponent extends Component {
   @tracked title = '';
 
   @action
   onSubmit() {
-    console.log(`title ${this.title}`);
+    console.log(`title=${this.title}`);
+    this.args.onClose();
   }
+
 }
diff --git a/app/components/nav/topbar.js b/app/components/nav/topbar.js
index 7782d6c561e4bef53d8361056116783c0c4e8e34..6147a6662858207f63716df77a8da6b883f0610c 100644
--- a/app/components/nav/topbar.js
+++ b/app/components/nav/topbar.js
@@ -1,7 +1,6 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
-import {inject as service} from '@ember/service';
-
+import { inject as service } from '@ember/service';
 
 export default class TopbarComponent extends Component {
   @service session;
@@ -11,4 +10,4 @@ export default class TopbarComponent extends Component {
   logout() {
     this.session.invalidate();
   }
-}
\ No newline at end of file
+}
diff --git a/app/components/role/add.js b/app/components/role/add.js
index 48c903d1ee0e3d2069a9406a4704e4f20cea79eb..708dad838b4c4cfa69e08a5605a0a31fc99e334e 100644
--- a/app/components/role/add.js
+++ b/app/components/role/add.js
@@ -4,7 +4,6 @@ import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 import { group_perms_by_model } from 'papermerge/utils';
 
-
 class AddRoleComponent extends Component {
   @service store;
   @service router;
diff --git a/app/components/role/edit.js b/app/components/role/edit.js
index 25f6fafed0ca50b510aa6f058445332ad8849e06..4096a3660ddff7ef63ccbe8b4ea8507450529868 100644
--- a/app/components/role/edit.js
+++ b/app/components/role/edit.js
@@ -4,7 +4,6 @@ import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 import { group_perms_by_model } from 'papermerge/utils';
 
-
 class EditRoleComponent extends Component {
   @service router;
 
diff --git a/app/components/role/permission.js b/app/components/role/permission.js
index 498a204fea8a6842c84fc71485cd6d87b18968b1..f82ee2e41ac8a920559c3b82669e82377357017c 100644
--- a/app/components/role/permission.js
+++ b/app/components/role/permission.js
@@ -1,9 +1,7 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
 
-
 class PermissionComponent extends Component {
-
   get isChecked() {
     /*
     A permission is checked only if given current permission
@@ -11,7 +9,7 @@ class PermissionComponent extends Component {
     */
     let role_perm_ids;
 
-    role_perm_ids = this.args.role.permissions.map(p => p.id);
+    role_perm_ids = this.args.role.permissions.map((p) => p.id);
 
     return role_perm_ids.includes(this.args.permission.id);
   }
@@ -21,11 +19,7 @@ class PermissionComponent extends Component {
     Just forwards the event to parent component, which will take care of
     adding/removing permission.
     */
-    this.args.onChange(
-      value,
-      this.args.role,
-      this.args.permission
-    );
+    this.args.onChange(value, this.args.role, this.args.permission);
   }
 }
 
diff --git a/app/components/role/permission_group.js b/app/components/role/permission_group.js
index 8ecd6be5970b6155b41413c33f6b8e60f7d25a65..a3562897630c9d6ffa08a52df4b2aeca876bc036 100644
--- a/app/components/role/permission_group.js
+++ b/app/components/role/permission_group.js
@@ -1,8 +1,6 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
 
-
-
 class PermissionGroupComponent extends Component {
   /*
   A permission group is a set of four permissions
@@ -28,13 +26,12 @@ class PermissionGroupComponent extends Component {
     `this.args.perm_group.perms`) are included in
     `this.args.role.permissions`.
     */
-    let role_perm_ids,
-      group_perm_ids;
+    let role_perm_ids, group_perm_ids;
 
-    role_perm_ids = this.args.role.permissions.map(p => p.id);
-    group_perm_ids = this.args.perm_group.perms.map(p => p.id);
+    role_perm_ids = this.args.role.permissions.map((p) => p.id);
+    group_perm_ids = this.args.perm_group.perms.map((p) => p.id);
 
-    return group_perm_ids.every(v => role_perm_ids.includes(v));
+    return group_perm_ids.every((v) => role_perm_ids.includes(v));
   }
 
   set isChecked(value) {
@@ -72,13 +69,13 @@ class PermissionGroupComponent extends Component {
     if (value) {
       // user chose to select (he checked) all
       // permissions in the group
-      this.args.perm_group.perms.forEach(perm => {
+      this.args.perm_group.perms.forEach((perm) => {
         that.addPermission(role, perm);
       });
     } else {
       // user chose to unselect (i.e. he unchecked) all
       // permissions in the group
-      this.args.perm_group.perms.forEach(perm => {
+      this.args.perm_group.perms.forEach((perm) => {
         that.removePermission(role, perm);
       });
     }
diff --git a/app/components/role/table_row.js b/app/components/role/table_row.js
index fe61b63ed1b7f9a0a5216af341ace532058bd7e5..11c80865d821b70c8766cd2bbf69f5f7cf8647a6 100644
--- a/app/components/role/table_row.js
+++ b/app/components/role/table_row.js
@@ -10,4 +10,4 @@ class TableRowComponent extends Component {
   }
 }
 
-export default TableRowComponent;
\ No newline at end of file
+export default TableRowComponent;
diff --git a/app/components/tag/new.js b/app/components/tag/new.js
index 81465c4acd98cbdd9d99f3611ece52834101e0bd..a4e7bd09adff0d6754b9687926421dfe9790001d 100644
--- a/app/components/tag/new.js
+++ b/app/components/tag/new.js
@@ -50,13 +50,15 @@ export default class NewTagComponent extends Component {
 
   @action
   onCreate() {
-    this.store.createRecord('tag', {
-      name: this.new_name,
-      description: this.new_description,
-      pinned: this.new_pinned,
-      bg_color: this.new_bg_color,
-      fg_color: this.new_fg_color,
-    }).save();
+    this.store
+      .createRecord('tag', {
+        name: this.new_name,
+        description: this.new_description,
+        pinned: this.new_pinned,
+        bg_color: this.new_bg_color,
+        fg_color: this.new_fg_color,
+      })
+      .save();
 
     this._empty_form();
   }
diff --git a/app/components/user/add.js b/app/components/user/add.js
index ad5227a4c68b67d8223b239fb410fb4f8cbdafde..7509b05294f5d0a9737f55ecc61e43e4b2753ca0 100644
--- a/app/components/user/add.js
+++ b/app/components/user/add.js
@@ -3,7 +3,6 @@ import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 
-
 class AddUserComponent extends Component {
   /*
   Form component to add new user.
@@ -49,7 +48,6 @@ class AddUserComponent extends Component {
 
     this.router.transitionTo('authenticated.users');
   }
-
 }
 
 export default AddUserComponent;
diff --git a/app/components/user/change_password.js b/app/components/user/change_password.js
index cb4b6241c45728eece3aec0be523bfecdd6dc44c..a385f69ee3c4c7c4f88c08316dc34fdf68aad4ff 100644
--- a/app/components/user/change_password.js
+++ b/app/components/user/change_password.js
@@ -3,7 +3,6 @@ import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 
-
 class ChangeUserPasswordComponent extends Component {
   @service router;
 
@@ -12,10 +11,10 @@ class ChangeUserPasswordComponent extends Component {
 
   get disabled() {
     /**
-    * If both password inputs are empty submit button is disabled.
-    * Also, submit form button will be disabled if given
-    * passwords do not match.
-    */
+     * If both password inputs are empty submit button is disabled.
+     * Also, submit form button will be disabled if given
+     * passwords do not match.
+     */
     if (this.new_password_1 && new_password_2) {
       if (this.new_password_1 === this.new_password_2) {
         return false;
diff --git a/app/components/user/edit.js b/app/components/user/edit.js
index 59751888eb9dcd8ed089da2b6c3ae0607b5cd4b4..5dceeb93f62c4b8039132b81d41230f2c2251c06 100644
--- a/app/components/user/edit.js
+++ b/app/components/user/edit.js
@@ -4,7 +4,6 @@ import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 import { group_perms_by_model } from 'papermerge/utils';
 
-
 class EditUserComponent extends Component {
   @service router;
 
diff --git a/app/components/user/table_row.js b/app/components/user/table_row.js
index 03bb3400f9e96e3e510bb2f0ac33a6415904cce2..17b64cf1c069e52b923e195a9f2ac37c0bbf8385 100644
--- a/app/components/user/table_row.js
+++ b/app/components/user/table_row.js
@@ -1,7 +1,6 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
 
-
 class TableRowComponent extends Component {
   @action
   async onRemove(user) {
@@ -9,4 +8,4 @@ class TableRowComponent extends Component {
   }
 }
 
-export default TableRowComponent;
\ No newline at end of file
+export default TableRowComponent;
diff --git a/app/controllers/authenticated/index.js b/app/controllers/authenticated/index.js
index 5e5c1c26f991b66cd92948b32caa034f0c2af459..5baa15547bd9aa6f3afc8b7f7ea1fcc1ef245632 100644
--- a/app/controllers/authenticated/index.js
+++ b/app/controllers/authenticated/index.js
@@ -1,16 +1,18 @@
-import { Modal } from 'bootstrap';
 import Controller from '@ember/controller';
 import { action } from '@ember/object';
+import { tracked } from "@glimmer/tracking";
 
 export default class IndexController extends Controller {
 
-  @action
-  newFolder(modal_elem_id) {
-    let modal, dom_elem;
+  @tracked show_new_folder = false;
 
-    dom_elem = document.getElementById(modal_elem_id);
+  @action
+  newFolder() {
+    this.show_new_folder = true;
+  }
 
-    modal = new Modal(dom_elem, {});
-    modal.show();
+  @action
+  closeNewFolder() {
+    this.show_new_folder = false;
   }
-}
\ No newline at end of file
+}
diff --git a/app/controllers/login.js b/app/controllers/login.js
index 2463c00a2ef4d2ee5ccfc3c8a6f02a0987b9d0a3..00a4bd5fc33f8795cd6f5c6542fd0ed6a370488c 100644
--- a/app/controllers/login.js
+++ b/app/controllers/login.js
@@ -1,8 +1,7 @@
 import Controller from '@ember/controller';
 import { inject as service } from '@ember/service';
-import { action } from "@ember/object";
-import { tracked } from "@glimmer/tracking";
-
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
 
 export default class LoginController extends Controller {
   @tracked errorMessage;
@@ -14,7 +13,6 @@ export default class LoginController extends Controller {
 
     let { identification, password } = this;
 
-
     try {
       await this.session.authenticate(
         'authenticator:auth-token',
@@ -40,4 +38,4 @@ export default class LoginController extends Controller {
   updatePassword(event) {
     this.password = event.target.value;
   }
-}
\ No newline at end of file
+}
diff --git a/app/models/automate.js b/app/models/automate.js
index e908b678485f14a86208748cab49e26446f9c4ff..6ed85b1f30e997e85a409aceb4aed432790e6dcb 100644
--- a/app/models/automate.js
+++ b/app/models/automate.js
@@ -1,6 +1,5 @@
 import Model, { attr, hasMany } from '@ember-data/model';
 
-
 export default class AutomateModel extends Model {
   @attr name;
   @attr match;
diff --git a/app/models/content_type.js b/app/models/content_type.js
index b0a1f60e2dad9cd264eb33e96ebef8adde015d65..c5b500e4905881097588eddf0428e30d0b0bce73 100644
--- a/app/models/content_type.js
+++ b/app/models/content_type.js
@@ -1,6 +1,5 @@
 import Model, { attr, hasMany } from '@ember-data/model';
 
-
 class ContentTypeModel extends Model {
   @attr model;
   @hasMany('permission') permissions;
diff --git a/app/models/document.js b/app/models/document.js
index 43a56f46a418b1768d1d8ebd9c775596dd23ac20..e69bcf6173798d650f4fac2b4efa79212565b294 100644
--- a/app/models/document.js
+++ b/app/models/document.js
@@ -1,7 +1,6 @@
 import { attr } from '@ember-data/model';
 import NodeModel from './node';
 
-
 export default class DocumentModel extends NodeModel {
   @attr image;
 
diff --git a/app/models/folder.js b/app/models/folder.js
index 26882fc905137a8b8d6db4433da76cf333992ad1..4a127eef1d9e0300727b022d42101ad4be297898 100644
--- a/app/models/folder.js
+++ b/app/models/folder.js
@@ -1,5 +1,4 @@
 import { attr } from '@ember-data/model';
 import NodeModel from './node';
 
-
 export default class FolderModel extends NodeModel {}
diff --git a/app/models/group.js b/app/models/group.js
index 1ea5b297f0e5b83efae01f24ee74393c99f0a2ca..5e1589c727d3a6a4d15192d0f42e4b80a344cc14 100644
--- a/app/models/group.js
+++ b/app/models/group.js
@@ -1,6 +1,5 @@
 import Model, { attr } from '@ember-data/model';
 
-
 class GroupModel extends Model {
   @attr name;
 }
diff --git a/app/models/node.js b/app/models/node.js
index 4c95f9e85f0c357bbf3ab58e9448f7d2bc2014b1..45e35cb547c10b4e33e0a99590ed844bd1ad1252 100644
--- a/app/models/node.js
+++ b/app/models/node.js
@@ -1,6 +1,5 @@
 import Model, { attr, hasMany, belongsTo } from '@ember-data/model';
 
-
 export default class NodeModel extends Model {
   @attr title;
   @attr model;
diff --git a/app/models/permission.js b/app/models/permission.js
index 8340fa69b0c3ba1c909b88b02c4c6f2e4f164d06..259e0889ef3aae1370ee4ea4c752fe04651b5efd 100644
--- a/app/models/permission.js
+++ b/app/models/permission.js
@@ -1,6 +1,5 @@
 import Model, { attr, belongsTo } from '@ember-data/model';
 
-
 class PermissionModel extends Model {
   @attr name;
   @attr codename;
diff --git a/app/models/role.js b/app/models/role.js
index 6186f2b95ed9c2bee418199799fcd781c1063e0b..2cd30fb3fd680510eced2143cff2fd3a4b2a1c14 100644
--- a/app/models/role.js
+++ b/app/models/role.js
@@ -1,6 +1,5 @@
 import Model, { attr, hasMany } from '@ember-data/model';
 
-
 class RoleModel extends Model {
   @attr name;
   @hasMany('permission') permissions;
diff --git a/app/models/user.js b/app/models/user.js
index 3121cee1f642b14446b0319d3cb9d64e08f526ec..c5a153a19a4cbb67f151f96688c425fff64b3708 100644
--- a/app/models/user.js
+++ b/app/models/user.js
@@ -1,6 +1,5 @@
 import Model, { attr, belongsTo } from '@ember-data/model';
 
-
 class UserModel extends Model {
   @attr username;
   @attr email;
diff --git a/app/modifiers/show-when.js b/app/modifiers/show-when.js
new file mode 100644
index 0000000000000000000000000000000000000000..e6044276f555255f0449af8a2cd60ec6fcab32dd
--- /dev/null
+++ b/app/modifiers/show-when.js
@@ -0,0 +1,14 @@
+import { Modal } from 'bootstrap';
+import { modifier } from 'ember-modifier';
+
+export default modifier((element, [isDisplayed]) => {
+  let modal;
+
+  modal = Modal.getOrCreateInstance(element);
+
+  if (isDisplayed) {
+    modal.show();
+  } else {
+    modal.hide();
+  }
+});
diff --git a/app/router.js b/app/router.js
index b99ae90090d03763295fb6e4daa757e0bf5c6424..b46490efee02cf461b859fd3dbd461d18de56925 100644
--- a/app/router.js
+++ b/app/router.js
@@ -7,7 +7,7 @@ export default class Router extends EmberRouter {
 }
 
 Router.map(function () {
-  this.route('authenticated', { path: '' }, function() {
+  this.route('authenticated', { path: '' }, function () {
     this.route('documents');
     this.route('inbox');
     this.route('document', { path: '/document/:document_id' });
@@ -15,7 +15,6 @@ Router.map(function () {
     this.route('nodes', { path: '/nodes/:node_id' });
     this.route('nodes', { path: '/nodes/' });
 
-
     this.route('tags');
 
     this.route('automates', function () {
@@ -33,7 +32,7 @@ Router.map(function () {
     this.route('users', function () {
       this.route('add');
       this.route('edit', { path: '/:user_id/edit' });
-      this.route('change_password', { path: '/:user_id/change-password'});
+      this.route('change_password', { path: '/:user_id/change-password' });
       this.route('index', { path: '/' });
     });
 
diff --git a/app/routes/application.js b/app/routes/application.js
index 90d85fb7dccb63384a1c6d6ee267009e26356a51..6768ea9f7a0b15799da4e549964e4f7e219d63bf 100644
--- a/app/routes/application.js
+++ b/app/routes/application.js
@@ -12,8 +12,8 @@ export default class ApplicationRoute extends Route {
   async _loadCurrentUser() {
     try {
       await this.currentUser.loadCurrentUser();
-    } catch(err) {
+    } catch (err) {
       await this.session.invalidate();
     }
   }
-};
\ No newline at end of file
+}
diff --git a/app/routes/authenticated/automates/index.js b/app/routes/authenticated/automates/index.js
index 9f39aa0a2777a29d6a1bb4b7e26756f381f7e419..2168ce0ab60b12aa50912c8f25ddc31e1c8d93a7 100644
--- a/app/routes/authenticated/automates/index.js
+++ b/app/routes/authenticated/automates/index.js
@@ -1,7 +1,6 @@
 import { inject as service } from '@ember/service';
 import BaseRoute from 'papermerge/base/routing';
 
-
 export default class AutomatesRoute extends BaseRoute {
   @service store;
 
diff --git a/app/routes/authenticated/groups.js b/app/routes/authenticated/groups.js
index 1163f4a1ec30b7b6fcd9001197110f31e262cb1e..9fda41c190db796ea47ac5d69e43cdd68a0fd268 100644
--- a/app/routes/authenticated/groups.js
+++ b/app/routes/authenticated/groups.js
@@ -1,6 +1,5 @@
 import { inject as service } from '@ember/service';
-import BaseRoute from 'papermerge/base/routing'
-
+import BaseRoute from 'papermerge/base/routing';
 
 export default class GroupsRoute extends BaseRoute {
   @service store;
diff --git a/app/routes/authenticated/index.js b/app/routes/authenticated/index.js
index 83a0ecae45b9ca49cc5376dc3ff37c55ef4b5c06..0ddce9e16122337f389a2735e4a778e3e881b83c 100644
--- a/app/routes/authenticated/index.js
+++ b/app/routes/authenticated/index.js
@@ -1,9 +1,7 @@
 import { inject as service } from '@ember/service';
 import BaseRoute from 'papermerge/base/routing';
 
-
 export default class IndexRoute extends BaseRoute {
-
   @service store;
   @service currentUser;
 
diff --git a/app/routes/authenticated/roles/add.js b/app/routes/authenticated/roles/add.js
index 5c8578c16cbd58decd902704bb2f77dddecca4ed..2024071d607354d0f093459dc5575578467aca0a 100644
--- a/app/routes/authenticated/roles/add.js
+++ b/app/routes/authenticated/roles/add.js
@@ -1,7 +1,6 @@
 import { inject as service } from '@ember/service';
 import BaseRoute from 'papermerge/base/routing';
 
-
 export default class AddRoleRoute extends BaseRoute {
   @service store;
 
diff --git a/app/routes/authenticated/roles/edit.js b/app/routes/authenticated/roles/edit.js
index 742fbd1ae1bfe8d9df6cadd0bb927906d7de5b3c..c8b0f7fe34cb00ee08a7f77b69c5ed84e4a5de46 100644
--- a/app/routes/authenticated/roles/edit.js
+++ b/app/routes/authenticated/roles/edit.js
@@ -1,19 +1,16 @@
 import { inject as service } from '@ember/service';
 import RSVP from 'rsvp';
-import BaseRoute from 'papermerge/base/routing'
-
+import BaseRoute from 'papermerge/base/routing';
 
 export default class EditRoleRoute extends BaseRoute {
   @service store;
 
   async model(params) {
     return RSVP.hash({
-      role: this.store.findRecord(
-        'role',
-        params.role_id,
-        { include: 'permissions' }
-      ),
-      all_permissions: this.store.findAll('permission')
+      role: this.store.findRecord('role', params.role_id, {
+        include: 'permissions',
+      }),
+      all_permissions: this.store.findAll('permission'),
     });
   }
 }
diff --git a/app/routes/authenticated/roles/index.js b/app/routes/authenticated/roles/index.js
index d20a63d7881b1af300a8c0be7c9ae5758515fc5b..dfdd7a94b4ef654dd77979f6fb476cd5685f1d0e 100644
--- a/app/routes/authenticated/roles/index.js
+++ b/app/routes/authenticated/roles/index.js
@@ -1,7 +1,6 @@
 import Route from '@ember/routing/route';
 import { inject as service } from '@ember/service';
 
-
 export default class RolesRoute extends Route {
   @service store;
   @service session;
diff --git a/app/routes/authenticated/tags.js b/app/routes/authenticated/tags.js
index 67f9b06ab7684cf18b30f2a8ab136ad8cb46ed7f..e5afb598f3500584a18f3aa3f5f3a64a2ef70377 100644
--- a/app/routes/authenticated/tags.js
+++ b/app/routes/authenticated/tags.js
@@ -1,7 +1,6 @@
 import { inject as service } from '@ember/service';
 import BaseRoute from 'papermerge/base/routing';
 
-
 export default class TagsRoute extends BaseRoute {
   @service store;
 
diff --git a/app/routes/authenticated/users/add.js b/app/routes/authenticated/users/add.js
index ad858ea16d71bb70970de37a7888ae7856e91e06..08bf1cb7cb8c6ea35149de78e1c98939996d3bb3 100644
--- a/app/routes/authenticated/users/add.js
+++ b/app/routes/authenticated/users/add.js
@@ -2,16 +2,15 @@ import { inject as service } from '@ember/service';
 import RSVP from 'rsvp';
 import BaseRoute from 'papermerge/base/routing';
 
-
 class AddUserRoute extends BaseRoute {
   @service store;
 
   async model() {
     return RSVP.hash({
       groups: this.store.findAll('group'),
-      roles: this.store.findAll('role')
+      roles: this.store.findAll('role'),
     });
   }
 }
 
-export default AddUserRoute;
\ No newline at end of file
+export default AddUserRoute;
diff --git a/app/routes/authenticated/users/change_password.js b/app/routes/authenticated/users/change_password.js
index da9cdc9f1362a9a958cb084d0ab44cebe4fc3288..30477db2919a8069cf7330ba827cd7b805c08edd 100644
--- a/app/routes/authenticated/users/change_password.js
+++ b/app/routes/authenticated/users/change_password.js
@@ -1,6 +1,5 @@
 import { inject as service } from '@ember/service';
-import BaseRoute from 'papermerge/base/routing'
-
+import BaseRoute from 'papermerge/base/routing';
 
 export default class ChangeUserPasswordRoute extends BaseRoute {
   @service store;
diff --git a/app/routes/authenticated/users/edit.js b/app/routes/authenticated/users/edit.js
index 3ad9e43a058e7ef2c1697d0f1c0269ab367ea94e..b08d399ea7709d7e42a067643342702fe23e94a6 100644
--- a/app/routes/authenticated/users/edit.js
+++ b/app/routes/authenticated/users/edit.js
@@ -1,7 +1,6 @@
 import { inject as service } from '@ember/service';
 import RSVP from 'rsvp';
-import BaseRoute from 'papermerge/base/routing'
-
+import BaseRoute from 'papermerge/base/routing';
 
 export default class EditUserRoute extends BaseRoute {
   @service store;
@@ -10,8 +9,7 @@ export default class EditUserRoute extends BaseRoute {
     return RSVP.hash({
       user: this.store.findRecord('user', params.user_id),
       roles: this.store.findAll('role'),
-      groups: this.store.findAll('group')
+      groups: this.store.findAll('group'),
     });
   }
 }
-
diff --git a/app/routes/authenticated/users/index.js b/app/routes/authenticated/users/index.js
index e09404b9ebfb9e7d312161c246dfa9c202b6a497..44691a495694ffcc4f117cd46067479c0e08f62f 100644
--- a/app/routes/authenticated/users/index.js
+++ b/app/routes/authenticated/users/index.js
@@ -1,7 +1,6 @@
 import { inject as service } from '@ember/service';
 import BaseRoute from 'papermerge/base/routing';
 
-
 export default class UsersRoute extends BaseRoute {
   @service store;
 
@@ -9,4 +8,3 @@ export default class UsersRoute extends BaseRoute {
     return this.store.findAll('user');
   }
 }
-
diff --git a/app/routes/login.js b/app/routes/login.js
index 049b8a6b8605aae310cc8844a9c65d86d4a74b03..18a93029ac9261309be2a2ac94975ff3b715ef65 100644
--- a/app/routes/login.js
+++ b/app/routes/login.js
@@ -1,11 +1,10 @@
 import Route from '@ember/routing/route';
 import { inject as service } from '@ember/service';
 
-
 export default class LoginRoute extends Route {
   @service session;
 
   beforeModel(transition) {
-    this.get('session').prohibitAuthentication('roles');
+    this.session.prohibitAuthentication('roles');
   }
-}
\ No newline at end of file
+}
diff --git a/app/services/current-user.js b/app/services/current-user.js
index a95b85ee2235eb4330c457f18765e2f91a83d0da..e805e33162aa708a93c29d586c33c6124514f678 100644
--- a/app/services/current-user.js
+++ b/app/services/current-user.js
@@ -1,7 +1,6 @@
 import Service from '@ember/service';
 import { inject as service } from '@ember/service';
 
-
 export default class CurrentUserService extends Service {
   @service session;
   @service store;
@@ -12,4 +11,4 @@ export default class CurrentUserService extends Service {
       this.set('user', user);
     }
   }
-};
+}
diff --git a/app/services/session.js b/app/services/session.js
index 6c94ff98be69b1b34f30ac6d29e10a567bc7957c..25d70a730e26ba7305e5bb12855f77991bfde7b6 100644
--- a/app/services/session.js
+++ b/app/services/session.js
@@ -1,7 +1,6 @@
 import { inject as service } from '@ember/service';
 import BaseSessionService from 'ember-simple-auth/services/session';
 
-
 export default class SessionService extends BaseSessionService {
   @service currentUser;
 
@@ -9,8 +8,8 @@ export default class SessionService extends BaseSessionService {
     super.handleAuthentication(...arguments);
     try {
       await this.currentUser.loadCurrentUser();
-    } catch(err) {
+    } catch (err) {
       await this.invalidate();
     }
   }
-}
\ No newline at end of file
+}
diff --git a/app/session-stores/application.js b/app/session-stores/application.js
index 9bb1495666de2002cc487636f8fd8f21befe7333..d4207bafdd74901bcf3803c2be4ff78b13a14323 100644
--- a/app/session-stores/application.js
+++ b/app/session-stores/application.js
@@ -1,6 +1,5 @@
 import CookieStore from 'ember-simple-auth/session-stores/cookie';
 
-
 export default class ApplicationSessionStore extends CookieStore {
   // pass
-}
\ No newline at end of file
+}
diff --git a/app/templates/authenticated/index.hbs b/app/templates/authenticated/index.hbs
index 3f05b2777866b857d92be6ae564837b9287165d7..e3ad06b945052f041cb60b864b1fb5bb64851f76 100644
--- a/app/templates/authenticated/index.hbs
+++ b/app/templates/authenticated/index.hbs
@@ -6,7 +6,7 @@
   </button>
 
   <button class="btn btn-bordered btn-light btn-flat"
-  type="button" {{on "click" (fn this.newFolder 'new-folder') }}>
+  type="button" {{on "click" this.newFolder }}>
     <i class="fa fa-plus mr-1 text-success"></i>
     New Folder
   </button>
@@ -15,4 +15,6 @@
 Documents and Folders will be displayed here!
 
 <Modal::NewFolder
-  id="new-folder" />
\ No newline at end of file
+  id="new-folder"
+  @onClose={{this.closeNewFolder}}
+  {{show-when this.show_new_folder}} />
\ No newline at end of file
diff --git a/ember-cli-build.js b/ember-cli-build.js
index 348678654a9f681f0cb86d16b96c668f0fe290b5..380097e74e7dbfcb4b7857b8bfca502f6c3dd926 100644
--- a/ember-cli-build.js
+++ b/ember-cli-build.js
@@ -1,7 +1,5 @@
 'use strict';
 
-
-
 const EmberApp = require('ember-cli/lib/broccoli/ember-app');
 
 module.exports = function (defaults) {
diff --git a/package-lock.json b/package-lock.json
index 9b4ff3283c67c8cfda3091f862e6e663af6a7a46..46bc145950185c00b9209cd612f75c0fc4e83f11 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10727,6 +10727,136 @@
         }
       }
     },
+    "ember-modifier": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/ember-modifier/-/ember-modifier-3.0.0.tgz",
+      "integrity": "sha512-ccXfMnjWhjEUCB5taeIPQmf0h1zPUIMbmsCV7W+JZ2BioPUZTLhE1WuHspmV0iEOiX3Fwx8jMOx6b74sFcKJ0g==",
+      "dev": true,
+      "requires": {
+        "ember-cli-babel": "^7.26.6",
+        "ember-cli-normalize-entity-name": "^1.0.0",
+        "ember-cli-string-utils": "^1.1.0",
+        "ember-cli-typescript": "^4.2.1",
+        "ember-compatibility-helpers": "^1.2.5"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "4.3.2",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz",
+          "integrity": "sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==",
+          "dev": true,
+          "requires": {
+            "ms": "2.1.2"
+          }
+        },
+        "ember-cli-typescript": {
+          "version": "4.2.1",
+          "resolved": "https://registry.npmjs.org/ember-cli-typescript/-/ember-cli-typescript-4.2.1.tgz",
+          "integrity": "sha512-0iKTZ+/wH6UB/VTWKvGuXlmwiE8HSIGcxHamwNhEC5x1mN3z8RfvsFZdQWYUzIWFN2Tek0gmepGRPTwWdBYl/A==",
+          "dev": true,
+          "requires": {
+            "ansi-to-html": "^0.6.15",
+            "broccoli-stew": "^3.0.0",
+            "debug": "^4.0.0",
+            "execa": "^4.0.0",
+            "fs-extra": "^9.0.1",
+            "resolve": "^1.5.0",
+            "rsvp": "^4.8.1",
+            "semver": "^7.3.2",
+            "stagehand": "^1.0.0",
+            "walk-sync": "^2.2.0"
+          }
+        },
+        "execa": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/execa/-/execa-4.1.0.tgz",
+          "integrity": "sha512-j5W0//W7f8UxAn8hXVnwG8tLwdiUy4FJLcSupCg6maBYZDpyBvTApK7KyuI4bKj8KOh1r2YH+6ucuYtJv1bTZA==",
+          "dev": true,
+          "requires": {
+            "cross-spawn": "^7.0.0",
+            "get-stream": "^5.0.0",
+            "human-signals": "^1.1.1",
+            "is-stream": "^2.0.0",
+            "merge-stream": "^2.0.0",
+            "npm-run-path": "^4.0.0",
+            "onetime": "^5.1.0",
+            "signal-exit": "^3.0.2",
+            "strip-final-newline": "^2.0.0"
+          }
+        },
+        "fs-extra": {
+          "version": "9.1.0",
+          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
+          "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
+          "dev": true,
+          "requires": {
+            "at-least-node": "^1.0.0",
+            "graceful-fs": "^4.2.0",
+            "jsonfile": "^6.0.1",
+            "universalify": "^2.0.0"
+          }
+        },
+        "human-signals": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-1.1.1.tgz",
+          "integrity": "sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==",
+          "dev": true
+        },
+        "jsonfile": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+          "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^4.1.6",
+            "universalify": "^2.0.0"
+          }
+        },
+        "matcher-collection": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/matcher-collection/-/matcher-collection-2.0.1.tgz",
+          "integrity": "sha512-daE62nS2ZQsDg9raM0IlZzLmI2u+7ZapXBwdoeBUKAYERPDDIc0qNqA8E0Rp2D+gspKR7BgIFP52GeujaGXWeQ==",
+          "dev": true,
+          "requires": {
+            "@types/minimatch": "^3.0.3",
+            "minimatch": "^3.0.2"
+          }
+        },
+        "ms": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+          "dev": true
+        },
+        "npm-run-path": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
+          "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
+          "dev": true,
+          "requires": {
+            "path-key": "^3.0.0"
+          }
+        },
+        "universalify": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
+          "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
+          "dev": true
+        },
+        "walk-sync": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/walk-sync/-/walk-sync-2.2.0.tgz",
+          "integrity": "sha512-IC8sL7aB4/ZgFcGI2T1LczZeFWZ06b3zoHH7jBPyHxOtIIz1jppWHjjEXkOFvFojBVAK9pV7g47xOZ4LW3QLfg==",
+          "dev": true,
+          "requires": {
+            "@types/minimatch": "^3.0.3",
+            "ensure-posix-path": "^1.1.0",
+            "matcher-collection": "^2.0.0",
+            "minimatch": "^3.0.4"
+          }
+        }
+      }
+    },
     "ember-page-title": {
       "version": "6.2.2",
       "resolved": "https://registry.npmjs.org/ember-page-title/-/ember-page-title-6.2.2.tgz",
diff --git a/package.json b/package.json
index c17c7ab11b2953943a5321417da18d9d662bcace..e068682fdc50c49c26b83a1dcd4d64e5f8bc9d61 100644
--- a/package.json
+++ b/package.json
@@ -46,6 +46,7 @@
     "ember-fetch": "^8.1.1",
     "ember-load-initializers": "^2.1.2",
     "ember-maybe-import-regenerator": "^0.1.6",
+    "ember-modifier": "^3.0.0",
     "ember-page-title": "^6.2.2",
     "ember-qunit": "^5.1.4",
     "ember-resolver": "^8.0.2",
diff --git a/tests/acceptance/roles-test.js b/tests/acceptance/roles-test.js
index 3aeffeb9568748cd9c27ab0a4d2e4deb71c21700..fa36877af199970c2567aaa93f7250020e44b5d9 100644
--- a/tests/acceptance/roles-test.js
+++ b/tests/acceptance/roles-test.js
@@ -9,8 +9,6 @@ module('Acceptance | roles', function (hooks) {
     await visit('/roles');
 
     assert.equal(currentURL(), '/roles');
-    assert
-      .dom('.add-role')
-      .hasText('New', 'The user can add new role');
+    assert.dom('.add-role').hasText('New', 'The user can add new role');
   });
 });
diff --git a/tests/acceptance/tags-test.js b/tests/acceptance/tags-test.js
index ba9df11ac40337f65dd6efa54cea2423fd527782..359cb667beff87b3cafb243f1e651f08a83e6d9b 100644
--- a/tests/acceptance/tags-test.js
+++ b/tests/acceptance/tags-test.js
@@ -9,8 +9,6 @@ module('Acceptance | tags', function (hooks) {
     await visit('/tags');
 
     assert.equal(currentURL(), '/tags');
-    assert
-      .dom('.add-tag')
-      .hasText('New', 'The user can add new tag');
+    assert.dom('.add-tag').hasText('New', 'The user can add new tag');
   });
 });
diff --git a/tests/integration/modifiers/show-when-test.js b/tests/integration/modifiers/show-when-test.js
new file mode 100644
index 0000000000000000000000000000000000000000..be9758427d0d0b0f7a3a3b63c1a6522acd1e7e3d
--- /dev/null
+++ b/tests/integration/modifiers/show-when-test.js
@@ -0,0 +1,15 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Modifier | show-when', function (hooks) {
+  setupRenderingTest(hooks);
+
+  // Replace this with your real tests.
+  test('it renders', async function (assert) {
+    await render(hbs`<div {{show-when}}></div>`);
+
+    assert.ok(true);
+  });
+});