diff --git a/templates/index.html.ep b/templates/index.html.ep
index 6f1d6c4dd951e457c125bc65ad1334f1bb1f0c19..45a12ad92d48b9750922dd2d1fe80402d18cad7f 100644
--- a/templates/index.html.ep
+++ b/templates/index.html.ep
@@ -1,11 +1,80 @@
 % layout 'default';
 % title 'Piratské vysílání';
-<div id="streams">
-</div>
+
+<table id="Streams"
+    data-detail-view="true"
+    data-detail-view-icon="false"
+    data-detail-view-by-click="true"
+    data-detail-formatter="streamInfo"
+    data-detail-filter="streamInfoAllowed"
+    data-row-style="rowStyle"
+    data-url="/streams">
+  <thead>
+    <tr>
+      <th data-field="id" data-width="30" data-formatter="statusFormatter"></th>
+      <th data-field="name" data-width="70" data-width-unit="%">Stream</th>
+      <th data-field="publish_user_name" data-width="30" data-width-unit="%">Vysílá</th>
+    </tr>
+  </thead>
+</table>
+
 <script>
-function load_streams() {
- $( "#streams" ).load( "/streams" );
+var expandedRows = 0;
+
+$('#Streams').bootstrapTable({
+    onExpandRow:   function () { ++expandedRows },
+    onCollapseRow: function () { --expandedRows },
+    onClickRow: function (row) {
+        if ( row.is_live ) {
+            window.location.href = '/play/' + row.key;
+        }
+    },
+});
+
+function streamInfoAllowed(index, row) {
+    return row.is_live ? 0 : 1;
 }
-load_streams();
-setInterval(load_streams, 5000);
+
+function streamInfo(index, row, element) {
+   $.ajax({
+       url: '/streams/' + row.id,
+       type: 'get',
+       success: function(response){
+           element.html(response)
+       }
+   });
+}
+
+function rowStyle(row, index) {
+    var classes = ''
+
+    if ( row.is_live ) {
+        classes = 'Live'
+    }
+
+    return { classes: classes }
+}
+
+function statusFormatter(value, row) {
+    if (row.is_live ) {
+        return '<i class="fa fa-play-circle"></i>';
+    }
+    else if (row.is_writeable ) {
+        return '<i class="fa fa-video"></i>';
+    }
+    else {
+        return '';
+    }
+}
+
+setInterval(
+    function() {
+        if ( expandedRows == 0 ) {
+            $('#Streams').bootstrapTable('refresh', {silent: true})
+        }
+    },
+    5000
+);
+
+
 </script>