diff --git a/app/components/modal/base.hbs b/app/components/modal/base.hbs
index dd0e4513fbd208a971ec9c4d0666e224de55e213..7cddfa37031ce09f19f1dc84ae8baef55ff54d83 100644
--- a/app/components/modal/base.hbs
+++ b/app/components/modal/base.hbs
@@ -12,8 +12,8 @@
         <button
           type="button"
           class="btn btn-secondary"
-          data-bs-dismiss="modal">Cancel
-        </button>
+          data-bs-dismiss="modal"
+          {{on "click" @onCancel}}>Cancel</button>
         <button
           type="button"
           class="btn btn-primary"
diff --git a/app/components/modal/new_folder.hbs b/app/components/modal/new_folder.hbs
index 58c7af9885d26a5359ae820fd68601f69a80041b..281d0cfca2d7dbb19475fa5028d37c881efa8fd1 100644
--- a/app/components/modal/new_folder.hbs
+++ b/app/components/modal/new_folder.hbs
@@ -4,6 +4,7 @@
   @actionTitle="Create"
   @onClose={{@onClose}}
   @onSubmit={{this.onSubmit}}
+  @onCancel={{this.onCancel}}
   ...attributes
 >
   <label for="folder-title" class="form-label">Folder title:</label>
diff --git a/app/components/modal/new_folder.js b/app/components/modal/new_folder.js
index 959912a4ff2b70825472ab50034b9aba05a0d021..8a3897efbc82dadd4ccd52aba2785e2ba397aa24 100644
--- a/app/components/modal/new_folder.js
+++ b/app/components/modal/new_folder.js
@@ -11,6 +11,12 @@ export default class NewFolderComponent extends Component {
   onSubmit() {
     console.log(`title=${this.title}`);
     this.args.onClose();
+    this.title = '';
   }
 
+  @action
+  onCancel() {
+    this.args.onClose();
+    this.title = '';
+  }
 }
diff --git a/app/controllers/authenticated/index.js b/app/controllers/authenticated/index.js
index 5baa15547bd9aa6f3afc8b7f7ea1fcc1ef245632..443ccef70d95fdce73082f31529e40809d11dc16 100644
--- a/app/controllers/authenticated/index.js
+++ b/app/controllers/authenticated/index.js
@@ -4,15 +4,15 @@ import { tracked } from "@glimmer/tracking";
 
 export default class IndexController extends Controller {
 
-  @tracked show_new_folder = false;
+  @tracked show_new_folder_modal = false;
 
   @action
-  newFolder() {
-    this.show_new_folder = true;
+  openNewFolderModal() {
+    this.show_new_folder_modal = true;
   }
 
   @action
-  closeNewFolder() {
-    this.show_new_folder = false;
+  closeNewFolderModal() {
+    this.show_new_folder_modal = false;
   }
 }
diff --git a/app/templates/authenticated/index.hbs b/app/templates/authenticated/index.hbs
index e3ad06b945052f041cb60b864b1fb5bb64851f76..96cffdf229dfcdc6c942e62cc91de9a6d5e3d493 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" this.newFolder }}>
+  type="button" {{on "click" this.openNewFolderModal }}>
     <i class="fa fa-plus mr-1 text-success"></i>
     New Folder
   </button>
@@ -16,5 +16,5 @@ Documents and Folders will be displayed here!
 
 <Modal::NewFolder
   id="new-folder"
-  @onClose={{this.closeNewFolder}}
-  {{show-when this.show_new_folder}} />
\ No newline at end of file
+  @onClose={{this.closeNewFolderModal}}
+  {{show-when this.show_new_folder_modal}} />
\ No newline at end of file