diff --git a/app/components/modal/base.hbs b/app/components/modal/base.hbs
new file mode 100644
index 0000000000000000000000000000000000000000..78453e6947c7ee15cba66135e29e16f6e9e001c6
--- /dev/null
+++ b/app/components/modal/base.hbs
@@ -0,0 +1,17 @@
+<div class="modal" tabindex="-1" ...attributes>
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title">{{@title}}</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body">
+        {{yield}}
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+        <button type="button" class="btn btn-primary">{{@actionTitle}}</button>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/app/components/modal/new_folder.hbs b/app/components/modal/new_folder.hbs
new file mode 100644
index 0000000000000000000000000000000000000000..cc4f9dc4f2af8f43b9fa40508e96e02f220c52ac
--- /dev/null
+++ b/app/components/modal/new_folder.hbs
@@ -0,0 +1,13 @@
+<Modal::Base
+  @title="Create Folder"
+  @actionTitle="Create"
+  ...attributes
+>
+  <label for="folder-title" class="form-label">Folder title:</label>
+  <Input
+    id="folder-title"
+     class="form-control"
+    @type="text"
+    @value="{{this.title}}"
+  />
+</Modal::Base>
\ No newline at end of file
diff --git a/app/controllers/authenticated/index.js b/app/controllers/authenticated/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..5e5c1c26f991b66cd92948b32caa034f0c2af459
--- /dev/null
+++ b/app/controllers/authenticated/index.js
@@ -0,0 +1,16 @@
+import { Modal } from 'bootstrap';
+import Controller from '@ember/controller';
+import { action } from '@ember/object';
+
+export default class IndexController extends Controller {
+
+  @action
+  newFolder(modal_elem_id) {
+    let modal, dom_elem;
+
+    dom_elem = document.getElementById(modal_elem_id);
+
+    modal = new Modal(dom_elem, {});
+    modal.show();
+  }
+}
\ No newline at end of file
diff --git a/app/templates/authenticated/index.hbs b/app/templates/authenticated/index.hbs
index 603c3bc4af573dfa6b3596fae0081f445a1f4445..97974836849f27ccff52683394c81498adde5654 100644
--- a/app/templates/authenticated/index.hbs
+++ b/app/templates/authenticated/index.hbs
@@ -1,2 +1,17 @@
+<div>
+  <button class="btn btn-bordered btn-light btn-flat"
+  type="button">
+    <i class="fa fa-upload mr-1 text-success"></i>
+    Upload
+  </button>
 
-Documents and Folders will be displayed here!
\ No newline at end of file
+  <button class="btn btn-bordered btn-light btn-flat"
+  type="button" {{on "click" (fn this.newFolder 'new-folder') }}>
+    <i class="fa fa-plus mr-1 text-success"></i>
+    New Folder
+  </button>
+</div>
+
+Documents and Folders will be displayed here!
+
+<Modal::NewFolder id="new-folder"/>
\ No newline at end of file