diff --git a/app/assets/images/card-headers/document-mini-alt.jpg b/app/assets/images/card-headers/document-mini-alt.jpg
new file mode 100644
index 00000000..4571891b
Binary files /dev/null and b/app/assets/images/card-headers/document-mini-alt.jpg differ
diff --git a/app/assets/images/card-headers/document-mini.jpg b/app/assets/images/card-headers/document-mini.jpg
new file mode 100644
index 00000000..d5b6584b
Binary files /dev/null and b/app/assets/images/card-headers/document-mini.jpg differ
diff --git a/app/views/documents/edit.html.erb b/app/views/documents/edit.html.erb
index 30e164cf..ea98d3a5 100644
--- a/app/views/documents/edit.html.erb
+++ b/app/views/documents/edit.html.erb
@@ -64,7 +64,7 @@
           url: '<%= document_url(@document) %>',
           data: {
             document: {
-              title: $('#document_title').text(),
+              title: $('#document_title').val(),
               body:  $('#editor').find('.ql-editor').html()
             }
           },
diff --git a/app/views/documents/index.html.erb b/app/views/documents/index.html.erb
index 8eaca93f..12902e08 100644
--- a/app/views/documents/index.html.erb
+++ b/app/views/documents/index.html.erb
@@ -15,14 +15,18 @@
     <div class="col s12 m6 l4">
       <div class="card sticky-action">
         <div class="card-image waves-effect waves-block waves-light">
-          <img class="activator" src="images/office.jpg">
+          <%= image_tag "card-headers/document-mini.jpg", class: 'activator' %>
         </div>
         <div class="card-content">
           <span class="card-title activator grey-text text-darken-4">
             <%= document.title.presence || 'Untitled document' %>
             <i class="material-icons right">more_vert</i>
           </span>
-          <p><a href="#">This is a link</a></p>
+          <p class="grey-text">
+            <%= (document.body || "").split(/\s+/).count %> words
+            &middot;
+            created <%= time_ago_in_words document.created_at %> ago
+          </p>
         </div>
         <div class="card-action">
           <%= link_to edit_document_path(document), class: 'green-text' do %>
@@ -39,8 +43,13 @@
           <% end %>
         </div>
         <div class="card-reveal">
-          <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
-          <p>Here is some more information about this product that is only revealed once clicked on.</p>
+          <span class="card-title grey-text text-darken-4">
+            <%= document.title.presence || 'Document preview' %>
+            <i class="material-icons right">close</i>
+          </span>
+          <p>
+            <%= sanitize truncate(document.body, escape: false, length: 420) %>
+          </p>
         </div>
       </div>
     </div>