diff --git a/run.py b/run.py
index cf99d5b..72f4c80 100644
--- a/run.py
+++ b/run.py
@@ -2,6 +2,7 @@
 
 import os
 import sys
+import ujson
 import asyncio
 
 import random
@@ -15,6 +16,8 @@ from websockets.exceptions import ConnectionClosed
 
 from sanic import Sanic, response
 
+from playhouse.shortcuts import model_to_dict, dict_to_model
+
 from models import Repo, BuildTask, db
 
 app = Sanic()
@@ -100,7 +103,11 @@ async def run_jobs():
         build_task.end_time = datetime.now()
         build_task.save()
 
-        await broadcast_to_ws(all_index_ws, f"done for {build_task.repo.name}")
+        await broadcast_to_ws(all_index_ws, {
+                "target": "build_task",
+                "id": build_task.id,
+                "data": model_to_dict(build_task),
+            })
 
         await asyncio.sleep(3)
 
@@ -110,13 +117,14 @@ async def broadcast_to_ws(ws_list, message):
 
     for ws in ws_list:
         try:
-            await ws.send(message)
+            await ws.send(ujson.dumps(message))
         except ConnectionClosed:
             dead_ws.append(ws)
 
     for to_remove in dead_ws:
         ws_list.remove(to_remove)
 
+
 @app.websocket('/index-ws')
 async def index_ws(request, websocket):
     all_index_ws.append(websocket)
@@ -126,6 +134,11 @@ async def index_ws(request, websocket):
         await websocket.send(f"echo {data}")
 
 
+@app.route("/api/tasks")
+async def api_tasks(request):
+    return response.json(map(model_to_dict, BuildTask.select()))
+
+
 @app.route('/')
 async def index(request):
     return response.html(open("./templates/index.html", "r").read())
diff --git a/templates/index.html b/templates/index.html
index f27017b..be781ab 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,37 +1,64 @@
 <html>
+    <head>
+        <title>YunoRunner for CI</title>
+        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+        <script src="https://code.jquery.com/jquery-3.3.1.min.js"
+                integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
+                crossorigin="anonymous"></script>
+    </head>
     <body>
         <h1>Tasks</h1>
-        <table border="0" cellspacing="5" cellpadding="5">
-            <tr>
-                <th>App</th>
-                <th>State</th>
-                <th>Revision</th>
-                <th>Ynh Version</th>
-                <th>Created time</th>
-                <th>Started time</th>
-                <th>End time</th>
-            </tr>
-            {% for build_task in build_tasks %}
-            <tr id="build_task_{{ build_task.id }}">
-                <td>{{build_task.repo.name}}</td>
-                <td>{{build_task.state}}</td>
-                <td>{{build_task.target_revision}}</td>
-                <td>{{build_task.yunohost_version}}</td>
-                <td>{{build_task.created_time}}</td>
-                <td>{{build_task.started_time}}</td>
-                <td>{{build_task.end_time}}</td>
-            </tr>
-            {% endfor %}
-        </table>
+        <div id="jobs">
+            <table border="0" cellspacing="5" cellpadding="5">
+                <tr>
+                    <th>App</th>
+                    <th>State</th>
+                    <th>Revision</th>
+                    <th>Ynh Version</th>
+                    <th>Created time</th>
+                    <th>Started time</th>
+                    <th>End time</th>
+                </tr>
+                <tr v-for="build_task in build_tasks" :id="build_task.id">
+                    <td>{{build_task.repo.name}}</td>
+                    <td>{{build_task.state}}</td>
+                    <td>{{build_task.target_revision}}</td>
+                    <td>{{build_task.yunohost_version}}</td>
+                    <td>{{build_task.created_time}}</td>
+                    <td>{{build_task.started_time}}</td>
+                    <td>{{build_task.end_time}}</td>
+                </tr>
+            </table>
+        </div>
     <script>
         (function() {
-            console.log('ws://' + document.domain + ':' + location.port + '/index-ws')
-            ws = new WebSocket('ws://' + document.domain + ':' + location.port + '/index-ws');
-            ws.onmessage = function (event) {
-                console.log(event.data);
-            };
+            var app = new Vue({
+                el: '#jobs',
+                data: {
+                    build_tasks: []
+                },
+            })
 
-            ws.send('bob');
+            $.getJSON("/api/tasks").done(function(data) {
+                app.build_tasks = data;
+            })
+
+            ws = new WebSocket('ws://' + document.domain + ':' + location.port + '/index-ws');
+
+            ws.onmessage = function (event) {
+                var message = JSON.parse(event.data);
+                var data = message.data;
+                var target = message.target;
+
+                if (target == "build_task") {
+                    for (var i = 0; i < app.build_tasks.length; ++i) {
+                        if (app.build_tasks[i].id == data.id) {
+                            Vue.set(app.build_tasks, i, data);
+                            return;
+                        }
+                    }
+                }
+            };
         })()
     </script>
     </body>
