diff --git a/app/results/templates/_table_select.html b/app/results/templates/_table_select.html
index 4a2bbd3..3279715 100644
--- a/app/results/templates/_table_select.html
+++ b/app/results/templates/_table_select.html
@@ -7,17 +7,22 @@
     </div>
 </div>
 <table id="file-table"
-       class="table table-striped table-hover table-bordered">
+       class="table table-striped table-hover table-bordered bg-light"
+       data-toggle="table"
+       data-sticky-header="true"
+       data-sticky-header-offset-y="50"
+       data-sortable="true"
+       data-search="true">
     <thead>
-        <tr class="table-primary">
-            <th>Model</th>
-            <th>Metric</th>
-            <th>Platform</th>
-            <th>Date</th>
-            <th>Time</th>
-            <th>Stratified</th>
-            <th>Title</th>
-            <th>Score</th>
+        <tr class="bg-primary text-white">
+            <th data-field="model" data-sortable="true">Model</th>
+            <th data-field="metric" data-sortable="true">Metric</th>
+            <th data-field="platform" data-sortable="true">Platform</th>
+            <th data-field="date" data-sortable="true">Date</th>
+            <th data-field="time" data-sortable="true">Time</th>
+            <th data-field="stratified" data-sortable="true">Stratified</th>
+            <th data-field="title" data-sortable="true">Title</th>
+            <th data-field="score" data-sortable="true">Score</th>
             <th>
                 <button class="btn btn-primary btn-small btn-danger"
                         onclick="setCheckBoxes(false)">
@@ -37,9 +42,9 @@
                     <td>{{ parts[2] }}</td>
                     <td>{{ parts[1] }}</td>
                     <td>{{ parts[3] }}</td>
-                    <td>{{ parts[4] }}</td>
-                    <td>{{ parts[5] }}</td>
-                    <td>{{ 'True' if stratified =='1' else 'False' }}</td>
+                    <td class="text-center">{{ parts[4] }}</td>
+                    <td class="text-center">{{ parts[5] }}</td>
+                    <td class="text-center">{{ 'True' if stratified =='1' else 'False' }}</td>
                     <td>{{ "%s" % data["title"] }}</td>
                     <td class="text-end">{{ "%.6f" % data["score"] }}</td>
                     <td>
diff --git a/app/results/templates/report.html b/app/results/templates/report.html
index 261eafb..e1bc7ce 100644
--- a/app/results/templates/report.html
+++ b/app/results/templates/report.html
@@ -10,15 +10,6 @@
 {% endblock %}
 {% block content %}
     {% include "_table_report.html" %}
-    <table data-url="https://examples.wenzhixin.net.cn/examples/bootstrap_table/data">
-        <thead>
-            <tr>
-                <th data-field="id">ID</th>
-                <th data-field="name">Item Name</th>
-                <th data-field="price" data-sortable="true">Item Price</th>
-            </tr>
-        </thead>
-    </table>
 {% endblock %}
 {% block jscript %}
     {{ super() }}
diff --git a/app/results/templates/select.html b/app/results/templates/select.html
index bc281df..a85efbc 100644
--- a/app/results/templates/select.html
+++ b/app/results/templates/select.html
@@ -2,16 +2,19 @@
 {% block styles %}
     {{ super() }}
     <link rel="stylesheet"
-          href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css">
+          href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
+    <link rel="stylesheet"
+          href="https://unpkg.com/bootstrap-table@1.21.4/dist/bootstrap-table.min.css">
+    <link href="https://unpkg.com/bootstrap-table@1.21.4/dist/extensions/sticky-header/bootstrap-table-sticky-header.css"
+          rel="stylesheet">
 {% endblock %}
 {% block content %}
     {% include "_table_select.html" %}
 {% endblock %}
 {% block jscript %}
     {{ super() }}
-    <script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
-    <script rel="stylesheet"
-            href="https://cdn.datatables.net/1.13.4/js/dataTables.bootstrap5.min.js"></script>
+    <script src="https://unpkg.com/bootstrap-table@1.21.4/dist/bootstrap-table.min.js"></script>
+    <script src="https://unpkg.com/bootstrap-table@1.21.4/dist/extensions/sticky-header/bootstrap-table-sticky-header.min.js"></script>
     <script src="{{ url_for('static', filename="js/select.js") }}"></script>
     <script src="{{ url_for('static', filename="js/excelFiles.js") }}"></script>
 {% endblock %}
diff --git a/app/static/js/select.js b/app/static/js/select.js
index b432d28..2a481b1 100644
--- a/app/static/js/select.js
+++ b/app/static/js/select.js
@@ -1,33 +1,11 @@
 $(document).ready(function () {
-    var table = $("#file-table").DataTable({
-      paging: true,
-      searching: true,
-      ordering: true,
-      info: true,
-      "select.items": "row",
-      pageLength: 25,
-      columnDefs: [
-        {
-          targets: 8,
-          orderable: false,
-        },
-      ],
-      //"language": {
-      //    "lengthMenu": "_MENU_"
-      //}
-    });
-    $('#file-table').on( 'draw.dt', function () {
-      enable_disable_best_buttons();
-    } );
     // Check if row is selected
-    $("#file-table tbody").on("click", "tr", function () {
-      if ($(this).hasClass("selected")) {
-        $(this).removeClass("selected");
+    $('#file-table tbody').on('click', 'tr', function () {
+      if ($(this).hasClass('selected')) {
+          $(this).removeClass('selected');
       } else {
-        table
-          .$("tr.selected")
-          .removeClass("selected");
-        $(this).addClass("selected");
+          $('#file-table tbody tr.selected').removeClass("selected")
+          $(this).addClass('selected');
       }
     });
     // Show file with doubleclick