diff --git a/README.md b/README.md
index f3e40c3eb84632e487c520c466e23b2261b940a7..419e81c7203cb99e4c3d9433277294a7b9a5546a 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# papermerge
+# PapermergeJS
 
 This README outlines the details of collaborating on this Ember application.
 A short introduction of this app could easily go here.
@@ -14,8 +14,8 @@ You will need the following things properly installed on your computer.
 
 ## Installation
 
-* `git clone <repository-url>` this repository
-* `cd papermerge`
+* `git clone git@github.com:papermerge/papermerge.js.git` this repository
+* `cd papermerge.js`
 * `npm install`
 
 ## Running / Development
diff --git a/app/components/documents-list.hbs b/app/components/documents-list.hbs
new file mode 100644
index 0000000000000000000000000000000000000000..4fb59e41e067adb30c4b153a8c0872c7655098b7
--- /dev/null
+++ b/app/components/documents-list.hbs
@@ -0,0 +1,9 @@
+<h2>{{@title}}</h2>
+
+<ul>
+  {{#each @document as |doc|}}
+    <li>
+         <button type="button" {{on 'click' (fn this.showDocument doc)}}>{{doc}}</button>
+    </li>
+  {{/each}}
+</ul>
\ No newline at end of file
diff --git a/app/components/documents-list.js b/app/components/documents-list.js
new file mode 100644
index 0000000000000000000000000000000000000000..54fdc9f71de5a6885d96475d35dbfe0ca1e0795a
--- /dev/null
+++ b/app/components/documents-list.js
@@ -0,0 +1,9 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+
+export default class DocumentsListComponent extends Component {
+  @action
+  showDocument(doc) {
+    alert(`The person's name is ${doc}!`);
+  }
+}
\ No newline at end of file
diff --git a/app/router.js b/app/router.js
index fba10332d120978761637e3e72d5ec7ede9aafcc..2dadb5422e6220e1a1f7e6ba0ada11ee96b11331 100644
--- a/app/router.js
+++ b/app/router.js
@@ -6,4 +6,6 @@ export default class Router extends EmberRouter {
   rootURL = config.rootURL;
 }
 
-Router.map(function () {});
+Router.map(function () {
+  this.route('documents');
+});
diff --git a/app/routes/documents.js b/app/routes/documents.js
new file mode 100644
index 0000000000000000000000000000000000000000..50aadacd29317ba2138ee5260afe88b12bf6df31
--- /dev/null
+++ b/app/routes/documents.js
@@ -0,0 +1,7 @@
+import Route from '@ember/routing/route';
+
+export default class DocumentsRoute extends Route {
+  model() {
+    return ['Marie Curie', 'Mae Jemison', 'Albert Hofmann'];
+  }
+}
diff --git a/app/templates/application.hbs b/app/templates/application.hbs
index 64631d81b6516157f72fcbe8f4fc16b1caef81cd..1248fa123c8b33c96cb9896034d4473314164f4a 100644
--- a/app/templates/application.hbs
+++ b/app/templates/application.hbs
@@ -1,7 +1,2 @@
-{{page-title "Papermerge"}}
-
-{{!-- The following component displays Ember's default welcome message. --}}
-<WelcomePage />
-{{!-- Feel free to remove this! --}}
-
+<h1>People Tracker</h1>
 {{outlet}}
\ No newline at end of file
diff --git a/app/templates/documents.hbs b/app/templates/documents.hbs
new file mode 100644
index 0000000000000000000000000000000000000000..e0822b2861df10d41d27198d44823adbcbda4991
--- /dev/null
+++ b/app/templates/documents.hbs
@@ -0,0 +1,5 @@
+{{page-title "Documents"}}
+<DocumentsList
+  @title="List of Documents"
+  @document={{@model}}
+/>
\ No newline at end of file
diff --git a/tests/integration/components/documents-list-test.js b/tests/integration/components/documents-list-test.js
new file mode 100644
index 0000000000000000000000000000000000000000..8c9955bab4726c69d76063646fc5cb72c18c3cf8
--- /dev/null
+++ b/tests/integration/components/documents-list-test.js
@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | documents-list', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+    await render(hbs`<DocumentsList />`);
+
+    assert.dom(this.element).hasText('');
+
+    // Template block usage:
+    await render(hbs`
+      <DocumentsList>
+        template block text
+      </DocumentsList>
+    `);
+
+    assert.dom(this.element).hasText('template block text');
+  });
+});
diff --git a/tests/unit/routes/documents-test.js b/tests/unit/routes/documents-test.js
new file mode 100644
index 0000000000000000000000000000000000000000..13d673bd6516c889d70fb6b481037a6ac5e6276d
--- /dev/null
+++ b/tests/unit/routes/documents-test.js
@@ -0,0 +1,11 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Unit | Route | documents', function (hooks) {
+  setupTest(hooks);
+
+  test('it exists', function (assert) {
+    let route = this.owner.lookup('route:documents');
+    assert.ok(route);
+  });
+});