diff --git a/templates/hostlist_template.html b/templates/hostlist_template.html
index 5c7417f..15ecff7 100644
--- a/templates/hostlist_template.html
+++ b/templates/hostlist_template.html
@@ -3,14 +3,7 @@
     <title>Host list</title>
     
     <link rel="stylesheet" type="text/css" href="vendor/bootstrap/dist/css/bootstrap.min.css"> 
-    <link rel="stylesheet" type="text/css" href="../vendor/datatables/media/css/jquery.dataTables.css"> 
-    
-    <script type="text/javascript" language="javascript" src="vendor/jquery/dist/jquery.min.js"></script>
-    <script type="text/javascript" language="javascript" src="vendor/bootstrap/dist/js/bootstrap.min.js"></script>
-    <script type="text/javascript" language="javascript" src="vendor/jquery-number/jquery.number.min.js"></script>
-    <script type="text/javascript" language="javascript" src="vendor/datatables/media/js/jquery.dataTables.min.js"></script>
-    <script type="text/javascript" language="javascript" src="vendor/datatables/media/js/dataTables.bootstrap.min.js"></script>
-    <script type="text/javascript" language="javascript" src="res/inittable.js"></script>
+    <link rel="stylesheet" type="text/css" href="vendor/datatables/media/css/dataTables.bootstrap.min.css">
   </head>
   <body>
     <div class="container">
@@ -30,25 +23,23 @@
       <div class="panel panel-default">
         <div class="panel-body">
           <h2>Available minions</h2>
-          <table id="hostlist" class="table table-striped table-bordered">
+          <div class="table-responsive"><table id="hostlist" class="table table-striped table-bordered">
               <thead>
                 <tr>
                   <th>Name</th>
-                  <th>Machine type</th>
-                  <th>OS</th>
+                  <th class="hidden-xs hidden-sm">OS</th>
                   <th>Roles</th>
                   <th>IP</th>
-                  <th>RAM (MB)</th>
-                  <th># CPUs</th>
+                  <th class="hidden-xs hidden-sm">RAM (MB)</th>
+                  <th>Salt</th>
                 </tr>
                 <tr>
                   <td>Name</td>
-                  <td>Machine type</td>
-                  <td>OS</td>
+                  <td class="hidden-xs hidden-sm">OS</td>
                   <td>Roles</td>
                   <td>IP</td>
-                  <td>RAM (MB)</td>
-                  <td># CPUs</td>
+                  <td class="hidden-xs hidden-sm">RAM (MB)</td>
+                  <td>Salt</td>
                 </tr>
               </thead>
               <tbody>
@@ -58,29 +49,28 @@
                       <button type="button" class="btn btn-info" data-toggle="modal" data-target="#{{ name.translate(None, '.') }}">
                       <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                       </button>
+                      <span class="glyphicon {% if data.virtual != "physical" %} glyphicon-cloud {% else %} glyphicon-hdd {% endif %}" aria-hidden="true"></span>
                       {{ name }}
                   </td>
-                  <td>{% if data.virtual != "physical" %} Virtual ({{ data.virtual }}) {% else %} Physical {% endif %}</td>
-                  <td>{{ data.lsb_distrib_description }}</td>
+                  <td class="hidden-xs hidden-sm" style="white-space: nowrap">{{ data.lsb_distrib_description }}</td>
                   <td>{% for role in data.roles %} {{ role }} {% endfor %}</td>
                   <td>{{ data.fqdn_ip }}</td>
-                  <td class="right number">{{ data.mem_total }}</td>
-                  <td class="right">{{ data.num_cpus }}</td>
+                  <td class="right number hidden-xs hidden-sm">{{ data.mem_total }}</td>
+                  <td>{{ data.saltversion }}</td>
               </tr>
               {% endfor %}
               </tbody>
               <tfoot>
                 <tr>
                   <td style="font-weight: bold;">Total:</th>
+                  <td class="hidden-xs hidden-sm" style="font-weight: bold;"></th>
                   <td style="font-weight: bold;"></th>
                   <td style="font-weight: bold;"></th>
-                  <td style="font-weight: bold;"></th>
-                  <td style="font-weight: bold;"></th>
-                  <td style="font-weight: bold;"></th>
+                  <td class="hidden-xs hidden-sm" style="font-weight: bold;"></th>
                   <td style="font-weight: bold;"></th>
                 </tr>
               </tfoot>
-          </table>
+          </table></div>
           <div class="row">
             <div class="col-md-6">
               <h2>Disconnected minions</h2>
@@ -121,32 +111,37 @@
           <div class="row">
             <div class="col-md-12">
               <h2>Previous jobs</h2>
-              <table id="joblist" class="table table-striped table-bordered">
+              <div class="table-responsive"><table id="joblist" class="table table-striped table-bordered">
                   <thead>
                     <tr>
                       <th>Name</th>
-                      <th>Arguments</th>
                       <th>Function</th>
                       <th>StartTime</th>
                       <th>Target</th>
-                      <th>Target type</th>
-                      <th>User</th>
+                    </tr>
+                    <tr>
+                      <td>Name</td>
+                      <td>Function</td>
+                      <td>StartTime</td>
+                      <td>Target</td>
                     </tr>
                   </thead>
                   <tbody>
                   {% for id, data in joblist|dictsort|reverse %}
                   <tr class="info">
-                    <td>{{ id }}</td>
-                    <td>{{ data.Arguments }}</td>
+                    <td>
+                      <button type="button" class="btn btn-info" data-toggle="modal" data-target="#{{ id.translate(None, '.') }}">
+                      <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
+                      </button>
+                        {{ id }}
+                    </td>
                     <td>{{ data.Function }}</td>
                     <td>{{ data.StartTime }}</td>
                     <td>{{ data.Target }}</td>
-                    <td>{{ data['Target-type'] }}</td>
-                    <td>{{ data.User }}</td>
                   </tr>
                   {% endfor %}
                   </tbody>
-              </table>
+              </table></div>
             </div>
           </div>
         </div>
@@ -192,7 +187,35 @@
       </div>
     </div>
   {% endfor %}
-    
+  {% for id, data in joblist.iteritems() %}
+    <div class="modal" id="{{ id.translate(None, '.') }}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
+      <div class="modal-dialog modal-lg" role="document">
+        <div class="modal-content">
+          <div class="modal-header">
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+            <h1 class="modal-title" id="myModalLabel">{{ id }}</h1>
+          </div>
+          <div class="modal-body">
+              <h2>Job information</h2>
+              <ul>
+                <li>Function: {{ data['Function'] }}</li>
+                <li>Target: {{ data['Target'] }}</li>
+                <li>User: {{ data['User'] }}</li>
+                <li>StartTime: {{ data['StartTime'] }}</li>
+                <li>Target-type: {{ data['Target-type'] }}</li>
+                <li>Arguments: {{ data['Arguments'] }}</li>
+              </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  {% endfor %}
+    <script type="text/javascript" language="javascript" src="vendor/jquery/dist/jquery.min.js"></script>
+    <script type="text/javascript" language="javascript" src="vendor/jquery-number/jquery.number.min.js"></script>
+    <script type="text/javascript" language="javascript" src="vendor/bootstrap/dist/js/bootstrap.min.js"></script>
+    <script type="text/javascript" language="javascript" src="vendor/datatables/media/js/jquery.dataTables.min.js"></script>
+    <script type="text/javascript" language="javascript" src="vendor/datatables/media/js/dataTables.bootstrap.min.js"></script>
+    <script type="text/javascript" language="javascript" src="res/inittable.js"></script>
     
   </body>
 </html>
diff --git a/www/res/inittable.js b/www/res/inittable.js
index 3c53966..92ca69f 100644
--- a/www/res/inittable.js
+++ b/www/res/inittable.js
@@ -1,14 +1,30 @@
 $(document).ready(function() {
-    $('#hostlist thead td').each( function () {
-        var title = $('#hostlist thead th').eq( $(this).index() ).text();
-        $(this).html( '<input type="text" class="form-control" placeholder="Search '+title+'" />' );
-    } );
+    var addSearch = function(elemId) {
+        $('#' + elemId + ' thead td').each( function () {
+            var title = $('#' + elemId + ' thead th').eq( $(this).index() ).text();
+            $(this).html( '<input type="text" class="form-control" placeholder="Search '+title+'" />' );
+        });
+    }
+    var applySearch = function(obj) {
+        obj.columns().eq( 0 ).each( function ( colIdx ) {
+            $( 'input', obj.column( colIdx ).header() ).on( 'keyup change', function () {
+                obj
+                    .column( colIdx )
+                    .search( this.value, true )
+                    .draw();
+            } );
+        });
+    }
+    
+    addSearch('hostlist');
+    addSearch('joblist');
 
     var jobTable = $('#joblist').DataTable({
         'paging': true,
         'info': false,
         'dom': 'tp',
-        'pagingType': 'full'
+        'pagingType': 'full',
+        'ordering': false
     });
 
     var table = $('#hostlist').DataTable({
@@ -33,14 +49,7 @@ $(document).ready(function() {
             
             // mem
             memTotal = api
-                .column( 5, { page: 'current'} )
-                .data()
-                .reduce( function (a, b) {
-                    return intVal(a) + intVal(b);
-                }, 0 );
-             // cpu
-            cpuTotal = api
-                .column( 6, { page: 'current'} )
+                .column( 4, { page: 'current'} )
                 .data()
                 .reduce( function (a, b) {
                     return intVal(a) + intVal(b);
@@ -51,25 +60,14 @@ $(document).ready(function() {
                 $.number(hostsTotal, 0, '.', ' ')
             );
             
-            $( api.column( 5 ).footer() ).html(
+            $( api.column( 4 ).footer() ).html(
                 $.number(memTotal, 0, '.', ' ')
             );
-      
-            $( api.column( 6 ).footer() ).html(
-                cpuTotal
-            );
         }
     });
-
-    // Apply the search
-    table.columns().eq( 0 ).each( function ( colIdx ) {
-        $( 'input', table.column( colIdx ).header() ).on( 'keyup change', function () {
-            table
-                .column( colIdx )
-                .search( this.value, true )
-                .draw();
-        } );
-    } );
+    
+    applySearch(table);
+    applySearch(jobTable);
 
     $('td.number').number( true, 0, '.', ' ' );
 });

Name	Machine type	OS	OS	Roles	IP	RAM (MB)	# CPUs	RAM (MB)	Salt
Name	Machine type	OS	OS	Roles	IP	RAM (MB)	# CPUs	RAM (MB)	Salt
{% if data.virtual != "physical" %} Virtual ({{ data.virtual }}) {% else %} Physical {% endif %}	{{ data.lsb_distrib_description }}	{{ data.lsb_distrib_description }}	{% for role in data.roles %} {{ role }} {% endfor %}	{{ data.fqdn_ip }}	{{ data.mem_total }}	{{ data.num_cpus }}	{{ data.mem_total }}	{{ data.saltversion }}
Total: +			-	-	-	+
Name	Arguments	Function	StartTime	Target	Target type	User
Name	Function	StartTime	Target
{{ id }}	{{ data.Arguments }}	+ + {{ id }} +	{{ data.Function }}	{{ data.StartTime }}	{{ data.Target }}	{{ data['Target-type'] }}	{{ data.User }}