diff --git a/app/javascript/controllers/admin_controller.js b/app/javascript/controllers/admin_controller.js
index 5af0bb3..82f186f 100644
--- a/app/javascript/controllers/admin_controller.js
+++ b/app/javascript/controllers/admin_controller.js
@@ -1,16 +1,20 @@
+/* eslint-disable no-unused-vars */
 import { Controller } from '@hotwired/stimulus';
-
-require('datatables.net');
-require('datatables.net-bs5');
+import $ from 'jquery';
+import DataTable from 'datatables.net-bs5';
 
 export default class extends Controller {
   connect() {
-    this.table = document.getElementsByClassName('table-admin').DataTable();
+    this.initializeDataTable();
+  }
+
+  initializeDataTable() {
+    $(this.element).find('.table-admin').DataTable({
+      pageLength: 50,
+    });
   }
 
-  disconnect() {
-    if (this.table) {
-      this.table.destroy();
-    }
+  destroy() {
+    $(this.element).find('.table-admin').DataTable().destroy();
   }
 }