diff --git a/app/components/documents-list.hbs b/app/components/documents-list.hbs
deleted file mode 100644
index 4fb59e41e067adb30c4b153a8c0872c7655098b7..0000000000000000000000000000000000000000
--- a/app/components/documents-list.hbs
+++ /dev/null
@@ -1,9 +0,0 @@
-<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
deleted file mode 100644
index aa9f31c4e16be811d20d356964ef366f56902820..0000000000000000000000000000000000000000
--- a/app/components/documents-list.js
+++ /dev/null
@@ -1,9 +0,0 @@
-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}!`);
-  }
-}
diff --git a/app/components/documents.hbs b/app/components/documents.hbs
new file mode 100644
index 0000000000000000000000000000000000000000..02eeedf6f6841cab84002c3d677d4c1408497d58
--- /dev/null
+++ b/app/components/documents.hbs
@@ -0,0 +1,15 @@
+<label>
+  <span>Search</span>
+  <Input @value={{this.query}} class="light" />
+</label>
+
+
+<div class="documents">
+  <ul class="results">
+    <Documents::Filter @docs={{@docs}} @query={{this.query}} as |results|>
+      {{#each results as |doc|}}
+        <li><Document @doc={{doc}} /></li>
+      {{/each}}
+    </Documents::Filter>
+  </ul>
+</div>
\ No newline at end of file
diff --git a/app/components/documents.js b/app/components/documents.js
new file mode 100644
index 0000000000000000000000000000000000000000..e73b1d5ead3ab515eb127c2c887ef3c91ad8f38b
--- /dev/null
+++ b/app/components/documents.js
@@ -0,0 +1,6 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+export default class DocumentsComponent extends Component {
+  @tracked query = '';
+}
\ No newline at end of file
diff --git a/app/components/documents/filter.hbs b/app/components/documents/filter.hbs
new file mode 100644
index 0000000000000000000000000000000000000000..b40a82295ae5380615f8f716561aeafc5e895b52
--- /dev/null
+++ b/app/components/documents/filter.hbs
@@ -0,0 +1 @@
+{{yield this.results}}
\ No newline at end of file
diff --git a/app/components/documents/filter.js b/app/components/documents/filter.js
new file mode 100644
index 0000000000000000000000000000000000000000..b7398dbf5de69bdc3138d8aa3d50711f853f88b6
--- /dev/null
+++ b/app/components/documents/filter.js
@@ -0,0 +1,13 @@
+import Component from '@glimmer/component';
+
+export default class documentssFilterComponent extends Component {
+  get results() {
+    let { docs, query } = this.args;
+
+    if (query) {
+      docs = docs.filter((doc) => doc.title.includes(query));
+    }
+
+    return docs;
+  }
+}
\ No newline at end of file
diff --git a/app/routes/documents.js b/app/routes/documents.js
deleted file mode 100644
index 50aadacd29317ba2138ee5260afe88b12bf6df31..0000000000000000000000000000000000000000
--- a/app/routes/documents.js
+++ /dev/null
@@ -1,7 +0,0 @@
-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/index.hbs b/app/templates/index.hbs
index 4ca283fb739205e81072c25e216fb6848550b473..ecc1703593d53309dcef4ff706eb3b08da1fe9c9 100644
--- a/app/templates/index.hbs
+++ b/app/templates/index.hbs
@@ -1,14 +1,8 @@
 <Jumbo>
   <h2>Welcome to Papermerge!</h2>
   <p>We hope you find exactly what you're looking for in a place to stay.</p>
-
   <LinkTo @route="about" class="button">About Us</LinkTo>
 </Jumbo>
 
-<div class="documents">
-  <ul class="results">
-    {{#each @model as |model|}}
-      <li><Document @doc={{model}} /></li>
-    {{/each}}
-  </ul>
-</div>
\ No newline at end of file
+
+<Documents @docs={{@model}} />
\ No newline at end of file
diff --git a/public/api/documents.json b/public/api/documents.json
index e3af1fe06af16b747fd49427ec09281c1c32bc8c..26cc35583eb75d61bb108905199bdf511fbb599a 100644
--- a/public/api/documents.json
+++ b/public/api/documents.json
@@ -15,7 +15,14 @@
                 "title": "Invoice 2.pdf",
                 "image": "https://upload.wikimedia.org/wikipedia/commons/c/cb/Crane_estate_(5).jpg"
             }
+        },
+        {
+            "type": "document",
+            "id": 3,
+            "attributes": {
+                "title": "Some.pdf",
+                "image": "https://upload.wikimedia.org/wikipedia/commons/c/cb/Crane_estate_(5).jpg"
+            }
         }
-
     ]
 }
\ No newline at end of file