diff --git a/public/updates-script.js b/public/updates-script.js
index f2f68e920..68830c767 100644
--- a/public/updates-script.js
+++ b/public/updates-script.js
@@ -1,13 +1,19 @@
 $(window).on('load', function () {
-  let url = 'ws://' + window.location.hostname + ':' + window.location.port + '/updates/ws';
+  let wsProtcol = "ws";
+  if (window.location.protocol === 'https') {
+    wsProtcol = 'wss';
+  }
+
+  let url = wsProtcol + '://' + window.location.hostname + ':' + window.location.port + '/updates/ws';
   var socket = new WebSocket(url);
 
   socket.onmessage = function (event) {
-    console.log(event.data);
+    let status = JSON.parse(event.data);
 
-    if (event.data.endsWith("processed")) {
+    if (status.type == 'Pending') {
       const elem = document.createElement('li');
       elem.classList.add("document");
+      elem.setAttribute("id", 'update-' + status.update_id);
 
       const ol = document.createElement('ol');
       const field = document.createElement('li');
@@ -19,7 +25,7 @@ $(window).on('load', function () {
 
       const content = document.createElement('div');
       content.classList.add("content");
-      content.innerHTML = event.data;
+      content.innerHTML = 'Pending ' + status.update_id;
 
       field.appendChild(attribute);
       field.appendChild(content);
@@ -29,6 +35,18 @@ $(window).on('load', function () {
 
       prependChild(results, elem);
     }
+
+    if (status.type == "Processing") {
+      const id = 'update-' + status.update_id;
+      const content = $(`#${id} .content`);
+      content.html('Processing ' + status.update_id);
+    }
+
+    if (status.type == "Processed") {
+      const id = 'update-' + status.update_id;
+      const content = $(`#${id} .content`);
+      content.html('Processed ' + status.update_id);
+    }
   }
 });
 
diff --git a/src/subcommand/serve.rs b/src/subcommand/serve.rs
index 2662cdd56..64c9edf20 100644
--- a/src/subcommand/serve.rs
+++ b/src/subcommand/serve.rs
@@ -11,7 +11,7 @@ use askama_warp::Template;
 use futures::{FutureExt, StreamExt};
 use futures::stream;
 use heed::EnvOpenOptions;
-use serde::Deserialize;
+use serde::{Serialize, Deserialize};
 use structopt::StructOpt;
 use tokio::fs::File as TFile;
 use tokio::io::AsyncWriteExt;
@@ -84,9 +84,19 @@ struct IndexTemplate {
 
 #[derive(Template)]
 #[template(path = "updates.html")]
-struct UpdatesTemplate {
+struct UpdatesTemplate<M: Serialize + Send> {
     db_name: String,
-    updates: Vec<String>,
+    db_size: usize,
+    docs_count: usize,
+    updates: Vec<UpdateStatus<M>>,
+}
+
+#[derive(Debug, Clone, Serialize)]
+#[serde(tag = "type")]
+enum UpdateStatus<M> {
+    Pending { update_id: u64, meta: M },
+    Processing { update_id: u64, meta: M },
+    Processed { update_id: u64, meta: M },
 }
 
 pub fn run(opt: Opt) -> anyhow::Result<()> {
@@ -116,10 +126,14 @@ pub fn run(opt: Opt) -> anyhow::Result<()> {
     let update_store = UpdateStore::open(
         update_store_options,
         update_store_path,
-        move |uid, meta: String, _content| {
-            let _ = update_status_sender_cloned.send(format!("processing update {}", uid));
+        move |update_id, meta: String, _content| {
+            let processing = UpdateStatus::Processing { update_id, meta: meta.clone() };
+            let _ = update_status_sender_cloned.send(processing);
+
             std::thread::sleep(Duration::from_secs(3));
-            let _ = update_status_sender_cloned.send(format!("update {} processed", uid));
+
+            let processed = UpdateStatus::Processed { update_id, meta: meta.clone() };
+            let _ = update_status_sender_cloned.send(processed);
             Ok(meta)
         })?;
 
@@ -149,19 +163,24 @@ pub fn run(opt: Opt) -> anyhow::Result<()> {
             let mut updates = update_store.iter_metas(|processed, pending| {
                 let mut updates = Vec::new();
                 for result in processed {
-                    let (id, _) = result?;
-                    updates.push(format!("update {} processed", id.get()));
+                    let (uid, meta) = result?;
+                    updates.push(UpdateStatus::Processed { update_id: uid.get(), meta });
                 }
                 for result in pending {
-                    let (id, _) = result?;
-                    updates.push(format!("update {} pending", id.get()));
+                    let (uid, meta) = result?;
+                    updates.push(UpdateStatus::Pending { update_id: uid.get(), meta });
                 }
                 Ok(updates)
             }).unwrap();
 
             if header.contains("text/html") {
                 updates.reverse();
-                let template = UpdatesTemplate { db_name: db_name.clone(), updates };
+                let template = UpdatesTemplate {
+                    db_name: db_name.clone(),
+                    db_size,
+                    docs_count,
+                    updates,
+                };
                 Box::new(template) as Box<dyn warp::Reply>
             } else {
                 Box::new(warp::reply::json(&updates))
@@ -289,7 +308,7 @@ pub fn run(opt: Opt) -> anyhow::Result<()> {
 
     async fn buf_stream(
         update_store: Arc<UpdateStore<String>>,
-        update_status_sender: broadcast::Sender<String>,
+        update_status_sender: broadcast::Sender<UpdateStatus<String>>,
         mut stream: impl futures::Stream<Item=Result<impl bytes::Buf, warp::Error>> + Unpin,
     ) -> Result<impl warp::Reply, warp::Rejection>
     {
@@ -305,9 +324,9 @@ pub fn run(opt: Opt) -> anyhow::Result<()> {
         let mmap = unsafe { memmap::Mmap::map(&file).unwrap() };
 
         let meta = String::from("I am the metadata");
-        let uid = update_store.register_update(&meta, &mmap[..]).unwrap();
-        update_status_sender.send(format!("update {} pending", uid)).unwrap();
-        eprintln!("Registering update {}", uid);
+        let update_id = update_store.register_update(&meta, &mmap[..]).unwrap();
+        update_status_sender.send(UpdateStatus::Pending { update_id, meta }).unwrap();
+        eprintln!("update {} registered", update_id);
 
         Ok(warp::reply())
     }
@@ -331,8 +350,11 @@ pub fn run(opt: Opt) -> anyhow::Result<()> {
                 update_status_receiver
                     .into_stream()
                     .flat_map(|result| {
-                        match result{
-                            Ok(msg) => stream::iter(Some(Ok(Message::text(msg)))),
+                        match result {
+                            Ok(status) => {
+                                let msg = serde_json::to_string(&status).unwrap();
+                                stream::iter(Some(Ok(Message::text(msg))))
+                            },
                             Err(e) => {
                                 eprintln!("channel error: {:?}", e);
                                 stream::iter(None)
diff --git a/templates/updates.html b/templates/updates.html
index ec83af4e0..55c8088c3 100644
--- a/templates/updates.html
+++ b/templates/updates.html
@@ -11,7 +11,7 @@
 </head>
 <body>
 
-  <section class="hero is-light">
+    <section class="hero is-light">
     <div class="hero-body">
       <div class="container">
 
@@ -21,6 +21,27 @@
                 <img id="logo-black" src="logo-black.svg" alt="milli logo in black">
             </figure>
         </div>
+
+        <nav class="level">
+          <div class="level-item has-text-centered">
+            <div>
+              <p class="heading">Database Name</p>
+              <p class="title">{{ db_name }}</p>
+            </div>
+          </div>
+          <div class="level-item has-text-centered">
+            <div>
+              <p class="heading">Database Size</p>
+              <p class="title" id="db-size">{{ db_size }}</p>
+            </div>
+          </div>
+          <div class="level-item has-text-centered">
+            <div>
+              <p class="heading">Number of Documents</p>
+              <p class="title" id="docs-count">{{ docs_count }}</p>
+            </div>
+          </div>
+        </nav>
       </div>
     </div>
   </section>
@@ -29,13 +50,25 @@
     <ol id="results" class="content">
 
       {% for update in updates %}
-        <li class="document">
-          <ol>
-            <li class="field">
-              <div class="attribute">text</div><div class="content">{{ update }}</div>
-            </li>
-          </ol>
-        </li>
+        {% match update %}
+        {% when UpdateStatus::Pending with { update_id , meta } %}
+          <li id="update-{{ update_id }}" class="document">
+            <ol>
+              <li class="field">
+                <div class="attribute">text</div><div class="content">Pending {{ update_id }}</div>
+              </li>
+            </ol>
+          </li>
+        {% when UpdateStatus::Processed with { update_id , meta } %}
+          <li id="update-{{ update_id }}" class="document">
+            <ol>
+              <li class="field">
+                <div class="attribute">text</div><div class="content">Processed {{ update_id }}</div>
+              </li>
+            </ol>
+          </li>
+        {% else %}
+        {% endmatch %}
       {% endfor %}
 
     </ol>