diff --git a/apps/static/css/jumpserver.css b/apps/static/css/jumpserver.css
index da3354188..c3459298f 100644
--- a/apps/static/css/jumpserver.css
+++ b/apps/static/css/jumpserver.css
@@ -78,4 +78,25 @@ th a {
   border-top: none !important;
 }
 
+table.dataTable tbody > tr.selected, table.dataTable tbody > tr > .selected {
+    background-color: #1ab394;
+}
+table.dataTable tbody tr.selected a,
+table.dataTable tbody th.selected a,
+table.dataTable tbody td.selected a,
+table.dataTable tbody tr.selected td i.text-navy,
+table.dataTable tbody th.selected td i.text-navy,
+table.dataTable tbody td.selected td i.text-navy
+{
+    color: white;
+}
 
+
+div.dataTables_wrapper div.dataTables_filter,
+.dataTables_length {
+    float: right !important;
+}
+
+div.dataTables_wrapper div.dataTables_filter {
+  margin-left: 15px;
+}
diff --git a/apps/templates/_head_css_js.html b/apps/templates/_head_css_js.html
index 0fc1ac92c..4bb984ae3 100644
--- a/apps/templates/_head_css_js.html
+++ b/apps/templates/_head_css_js.html
@@ -7,17 +7,9 @@
 <link href="{% static "css/plugins/sweetalert/sweetalert.css" %}" rel="stylesheet">
 <link href="{% static "css/style.css" %}" rel="stylesheet">
 <link href="{% static "css/plugins/vaildator/jquery.validator.css" %}" rel="stylesheet">
-
-
-
 <!-- scripts -->
 <script src="{% static 'js/jquery-2.1.1.js' %}"></script>
 
-
 <!-- Sweet alert -->
 <script src="{% static 'js/plugins/sweetalert/sweetalert.min.js' %}"></script>
-
 <script src="{% static 'js/bootstrap.min.js' %}"></script>
-
-
-
diff --git a/apps/users/templates/users/user_list.html b/apps/users/templates/users/user_list.html
index a1369ee73..082debc2a 100644
--- a/apps/users/templates/users/user_list.html
+++ b/apps/users/templates/users/user_list.html
@@ -2,16 +2,14 @@
 {% load i18n static %}
 {% get_current_language as LANGUAGE_CODE %}
 {% load common_tags %}
-{% block content_left_head %}
-    <a href="{% url 'users:user-create' %}" class="btn btn-sm btn-primary "> {% trans "Create user" %} </a>
-{% endblock %}
 {% block table_search %}{% endblock %}
 {% block table_container %}
+<div class="uc pull-left"><a href="{% url "users:user-create" %}" class="btn btn-sm btn-primary"> {% trans "Create user" %} </a></div>
 <table class="table table-striped table-bordered table-hover " id="user_list_table" >
     <thead>
         <tr>
             <th class="text-center">
-                <div class="checkbox checkbox-success"><input id="" type="checkbox" class="ipt_check_all"><label></label></div>
+                <div class="checkbox checkbox-default"><input id="" type="checkbox" class="ipt_check_all"><label></label></div>
             </th>
             <th class="text-center">{% trans 'Name' %}</a></th>
             <th class="text-center">{% trans 'Username' %}</a></th>
@@ -25,28 +23,31 @@
     <tbody>
     </tbody>
 </table>
+<div id="actions" class="hide">
+    <div class="input-group">
+        <select class="form-control m-b" style="width: auto" id="slct_bulk_update">
+            <option value="delete">{% trans 'Delete selected' %}</option>
+            <option value="update">{% trans 'Update selected' %}</option>
+            <option value="deactive">{% trans 'Deactive selected' %}</option>
+        </select>
+        <div class="input-group-btn pull-left" style="padding-left: 5px;">
+            <button id='btn_bulk_update' style="height: 32px;"  class="btn btn-sm btn-primary">
+             {% trans 'Submit' %}
+            </button>
+        </div>
+    </div>
+</div>
 {% include "users/_user_bulk_update_modal.html" %}
 {% endblock %}
 {% block content_bottom_left %}
-        <div class="input-group">
-            <select class="form-control m-b" style="width: auto" id="slct_bulk_update">
-                <option value="delete">{% trans 'Delete selected' %}</option>
-                <option value="update">{% trans 'Update selected' %}</option>
-                <option value="deactive">{% trans 'Deactive selected' %}</option>
-            </select>
-            <div class="input-group-btn pull-left" style="padding-left: 5px;">
-                <button id='btn_bulk_update' style="height: 32px;"  class="btn btn-sm btn-primary">
-                 {% trans 'Submit' %}
-                </button>
-            </div>
-        </div>
 {% endblock %}
 {% block custom_foot_js %}
 <script>
 jumpserver.checked = false;
 $(document).ready(function(){
     var table = $('#user_list_table').DataTable({
-        dom: '<"html5buttons"B>lftip',
+        pageLength: 25,
+        dom: '<"uc pull-left"><"html5buttons"B>flti<"row m-t"<"#sth.col-md-6"><"col-md-6"p>>',
         language: {
             url: "{% static 'js/plugins/dataTables/i18n/language_code.json' %}".replace('language_code', '{{ LANGUAGE_CODE }}')
         },
@@ -79,7 +80,7 @@ $(document).ready(function(){
         columnDefs: [
             {targets: 0, orderable: false,
              createdCell: function(td) {
-                $(td).html('<div class="checkbox checkbox-success"><input type="checkbox" class="ipt_check"><label></label></div>');
+                $(td).html('<div class="checkbox checkbox-default"><input type="checkbox" class="ipt_check"><label></label></div>');
              }
             },
             {className: 'text-center', targets: [0, 1, 2, 3, 4, 5, 6, 7]},
@@ -103,7 +104,7 @@ $(document).ready(function(){
                 }
              }
             },
-            {targets: 2,
+            {targets: 1,
              createdCell: function (td, cellData, rowData) {
                 var detail_btn = '<a href="{% url "users:user-detail" pk=99991937 %}">' + cellData + '</a>';
                 $(td).html(detail_btn.replace('99991937', rowData.id));
@@ -117,8 +118,8 @@ $(document).ready(function(){
         },
         columns: [
             {data: function(){return ""} },
-            {data: "name" },
             {data: "username" },
+            {data: "name" },
             {data: "get_role_display" },
             {data: "group_display" },
             {data: function(){return 999} },
@@ -132,6 +133,8 @@ $(document).ready(function(){
     }).on('deselect', function(e, dt, type, indexes) {
         var $node = table[ type ]( indexes ).nodes().to$();
         $node.find('input.ipt_check').prop('checked', false);
+    }).on('draw', function(){
+        $('#sth').html($('#actions').html());
     });
 }).on('click', '#btn_bulk_update', function(){
     var action = $('#slct_bulk_update').val();