diff --git a/app/views/heartbeat/index.html.haml b/app/views/heartbeat/index.html.haml
new file mode 100644
--- /dev/null
+++ b/app/views/heartbeat/index.html.haml
@@ -0,0 +1,30 @@
+- content_for :header do
+  = javascript_include_tag 'local_jquery'
+  = stylesheet_link_tag 'tablesorter-theme.cafe'
+
+%script{:type=>"text/javascript"}
+  $(function () {
+  $('#since_datetime').datetimepicker({ showButtonPanel: true, dateFormat: "yy-mm-dd", controlType: "slider"} );
+  $('#until_datetime').datetimepicker({ showButtonPanel: true, dateFormat: "yy-mm-dd", controlType: "slider"} );
+  $('#my_table').tablesorter({widgets: ['zebra']});
+  });
+
+%h1 Heart Beat Count
+= "Last 5 minutes distinct user count = #{@num}"
+
+%h1 Heart Beat List
+
+%table.tablesorter-cafe#my_table
+  %thead
+    %tr
+      %th Login
+      %th Full name
+      %th IP
+      %th Last Update
+  %tbody
+    - @hb.each do |hb|
+      %tr{class: cycle('info-even','info-odd')}
+        %td= link_to hb.user.login, controller: :users, :action => 'profile', :id => hb.user.id
+        %td= hb.user.full_name
+        %td= hb.ip_address
+        %td= "#{time_ago_in_words(hb.updated_at)} ago"