diff --git a/resources/views/administrator/pages/package/datacenter/add.blade.php b/resources/views/administrator/pages/package/datacenter/add.blade.php
index d6057ce..2c5c5e7 100644
--- a/resources/views/administrator/pages/package/datacenter/add.blade.php
+++ b/resources/views/administrator/pages/package/datacenter/add.blade.php
@@ -4,55 +4,55 @@
         <link href="{{ asset($css) }}" rel="stylesheet" />
     @endforeach
 @endpush
-    @section('breadcrumb')
-        @php
-            $breadcrumbItems = [
-                ['label' => 'Modules',],
-                ['label' => 'Package vCenter', 'url' => route('package.datacenter.index')],
-                ['label' => 'Datacenter', 'active' => true],
-            ];
-        @endphp
-        <x-admin-breadcrumb :items="$breadcrumbItems" />
-    @endsection
-    @section("content")
-        @if(auth()->guard('admins')->user()->can("add module vcenter"))
-            <div class="card card-outline card-primary">
-                <form action="{{ route('package.datacenter.store') }}" method="post">
-                    @csrf
-                    <div class="card-body">
-                        <x-module.v-center :model="null" />
+@section('breadcrumb')
+    @php
+        $breadcrumbItems = [
+            ['label' => 'Modules',],
+            ['label' => 'Package vCenter', 'url' => route('package.datacenter.index')],
+            ['label' => 'Datacenter', 'active' => true],
+        ];
+    @endphp
+    <x-admin-breadcrumb :items="$breadcrumbItems" />
+@endsection
+@section("content")
+    @if(auth()->guard('admins')->user()->can("add module vcenter"))
+        <div class="card card-outline card-primary">
+            <form action="{{ route('package.datacenter.store') }}" method="post">
+                @csrf
+                <div class="card-body">
+                    <x-module.v-center :model="null" />
 
-                        {{--Name--}}
-                        <div class="row form-group align-items-center mb-0">
-                            <label for="name" class="col-md-3 text-right">Name</label>
-                            <div class="col-md-9 p-1 bg-customer">
-                                <input type="text" id="name" name="name" placeholder="" value="" class="form-control">
-                            </div>
-                        </div>
-                        {{--Datacenter ID--}}
-                        <div class="row form-group align-items-center mb-0">
-                            <label for="datacenter_id" class="col-md-3 text-right">Datacenter ID</label>
-                            <div class="col-md-9 p-1 bg-customer">
-                                <input type="text" id="datacenter_id" name="datacenter_id" placeholder="" value=""
-                                    class="form-control">
-                            </div>
+                    {{--Name--}}
+                    <div class="row form-group align-items-center mb-0">
+                        <label for="name" class="col-md-3 text-right">Name</label>
+                        <div class="col-md-9 p-1 bg-customer">
+                            <input type="text" id="name" name="name" placeholder="" value="" class="form-control">
                         </div>
                     </div>
-                    <div class="card-footer">
-                        <a href="{{ route('package.datacenter.index') }}" class="btn btn-outline-secondary">Trở về</a>
-                        <button type="submit" class="btn btn-outline-primary">Lưu dữ liệu</button>
+                    {{--Datacenter ID--}}
+                    <div class="row form-group align-items-center mb-0">
+                        <label for="datacenter_id" class="col-md-3 text-right">Datacenter ID</label>
+                        <div class="col-md-9 p-1 bg-customer">
+                            <input type="text" id="datacenter_id" name="datacenter_id" placeholder="" value=""
+                                class="form-control">
+                        </div>
                     </div>
-                </form>
-            </div>
-        @else
-            <div class="alert alert-danger alert-dismissible">
-                <h5 class="mb-0"><i class="icon fas fa-ban"></i> Access Denied - You are not assigned to any Module vCenter
-                    management department</h5>
-            </div>
-        @endif
-    @endsection
-    @push('plugin-scripts')
-        @foreach (config('assets.datatable.js') as $js)
-            <script src="{{ asset($js) }}"></script>
-        @endforeach
-    @endpush
\ No newline at end of file
+                </div>
+                <div class="card-footer">
+                    <a href="{{ route('package.datacenter.index') }}" class="btn btn-outline-secondary">Trở về</a>
+                    <button type="submit" class="btn btn-outline-primary">Lưu dữ liệu</button>
+                </div>
+            </form>
+        </div>
+    @else
+        <div class="alert alert-danger alert-dismissible">
+            <h5 class="mb-0"><i class="icon fas fa-ban"></i> Access Denied - You are not assigned to any Module vCenter
+                management department</h5>
+        </div>
+    @endif
+@endsection
+@push('plugin-scripts')
+    @foreach (config('assets.datatable.js') as $js)
+        <script src="{{ asset($js) }}"></script>
+    @endforeach
+@endpush
\ No newline at end of file
diff --git a/resources/views/administrator/pages/package/datacenter/edit.blade.php b/resources/views/administrator/pages/package/datacenter/edit.blade.php
index 9d69090..fe5896a 100644
--- a/resources/views/administrator/pages/package/datacenter/edit.blade.php
+++ b/resources/views/administrator/pages/package/datacenter/edit.blade.php
@@ -1,60 +1,61 @@
 @extends("administrator.layout.master")
 @push('plugin-styles')
-    <link href="{{ asset('build/plugins/select2/select2.min.css') }}" rel="stylesheet" />
+    @foreach (config('assets.datatable.css') as $css)
+        <link href="{{ asset($css) }}" rel="stylesheet" />
+    @endforeach
 @endpush
-@section('breadcrumb')
-    @php
-        $breadcrumbItems = [
-            ['label' => 'Modules'],
-            ['label' => 'Package vCenter'],
-            ['label' => 'Datacenter', 'active' => true],
-        ];
-    @endphp
-    <x-admin-breadcrumb :items="$breadcrumbItems" />
-@endsection
-@section("content")
-    @if(auth()->guard('admins')->user()->can("add module vcenter"))
-        <div class="card card-outline card-primary">
-            <form action="{{ route('package.datacenter.update', ['id' => $datacenter->id]) }}" method="post">
-                @csrf
-                @method('put')
-                <div class="card-body">
-                    <x-module.v-center :model="$datacenter" />
-                    {{--Name--}}
-                    <div class="row form-group align-items-center mb-0">
-                        <label for="name" class="col-md-3 text-right">Name</label>
-                        <div class="col-md-9 p-1 bg-customer">
-                            <input type="text" id="name" name="name" placeholder="" value="{{$datacenter->name}}"
-                                class="form-control">
+    @section('breadcrumb')
+        @php
+            $breadcrumbItems = [
+                ['label' => 'Modules',],
+                ['label' => 'Package vCenter', 'url' => route('package.datacenter.index')],
+                ['label' => 'Datacenter'],
+                ['label' => 'Edit', 'active' => true],
+            ];
+        @endphp
+        <x-admin-breadcrumb :items="$breadcrumbItems" />
+    @endsection
+    @section("content")
+        @if(auth()->guard('admins')->user()->can("add module vcenter"))
+            <div class="card card-outline card-primary">
+                <form action="{{ route('package.datacenter.update', ['id' => $datacenter->id]) }}" method="post">
+                    @csrf
+                    @method('put')
+                    <div class="card-body">
+                        <x-module.v-center :model="$datacenter" />
+                        {{--Name--}}
+                        <div class="row form-group align-items-center mb-0">
+                            <label for="name" class="col-md-3 text-right">Name</label>
+                            <div class="col-md-9 p-1 bg-customer">
+                                <input type="text" id="name" name="name" placeholder="" value="{{$datacenter->name}}"
+                                    class="form-control">
+                            </div>
+                        </div>
+                        {{--Datacenter ID--}}
+                        <div class="row form-group align-items-center mb-0">
+                            <label for="datacenter_id" class="col-md-3 text-right">Datacenter ID</label>
+                            <div class="col-md-9 p-1 bg-customer">
+                                <input type="text" id="datacenter_id" name="datacenter_id" placeholder=""
+                                    value="{{$datacenter->datacenter_id}}" class="form-control">
+                            </div>
                         </div>
                     </div>
-                    {{--Datacenter ID--}}
-                    <div class="row form-group align-items-center mb-0">
-                        <label for="datacenter_id" class="col-md-3 text-right">Datacenter ID</label>
-                        <div class="col-md-9 p-1 bg-customer">
-                            <input type="text" id="datacenter_id" name="datacenter_id" placeholder=""
-                                value="{{$datacenter->datacenter_id}}" class="form-control">
-                        </div>
+                    <div class="card-footer">
+                        <a href="{{ route('package.datacenter.index') }}" class="btn btn-outline-secondary">Trở về</a>
+                        <button type="submit" class="btn btn-outline-primary">Lưu dữ liệu</button>
                     </div>
-                </div>
-                <div class="card-footer">
-                    <a href="{{ route('package.datacenter.index') }}" class="btn btn-outline-secondary">Trở về</a>
-                    <button type="submit" class="btn btn-outline-primary">Lưu dữ liệu</button>
-                </div>
-            </form>
-        </div>
-    @else
-        <div class="alert alert-danger alert-dismissible">
-            <h5 class="mb-0"><i class="icon fas fa-ban"></i> Access Denied - You are not assigned to any Module vCenter
-                management department</h5>
-        </div>
-    @endif
-@endsection
-
-
-@push('plugin-scripts')
-    <script src="{{ asset('build/plugins/jquery/jquery.min.js') }}"></script>
-    <script src="{{ asset('build/plugins/select2/select2.min.js') }}"></script>
-    <script src="{{ asset('build/plugins/datatables.net/dataTables.min.js') }}"></script>
-    <script src="{{ asset('build/plugins/datatables.net-bs5/dataTables.bootstrap5.min.js') }}"></script>
-@endpush
\ No newline at end of file
+                </form>
+            </div>
+        @else
+            <div class="alert alert-danger alert-dismissible">
+                <h5 class="mb-0"><i class="icon fas fa-ban"></i> Access Denied - You are not assigned to any Module vCenter
+                    management department</h5>
+            </div>
+        @endif
+    @endsection
+    
+    @push('plugin-scripts')
+        @foreach (config('assets.datatable.js') as $js)
+            <script src="{{ asset($js) }}"></script>
+        @endforeach
+    @endpush
\ No newline at end of file
diff --git a/resources/views/administrator/pages/package/datacenter/index.blade.php b/resources/views/administrator/pages/package/datacenter/index.blade.php
index f79a347..3649b89 100644
--- a/resources/views/administrator/pages/package/datacenter/index.blade.php
+++ b/resources/views/administrator/pages/package/datacenter/index.blade.php
@@ -17,7 +17,7 @@ $breadcrumbItems = [
 @endsection
 @section('content')
     @if (auth()->guard('admins')->user()->can('manager package module'))
-        <div class="card card-primary card-outline rounded-4">
+        <div class="card card-primary card-outline rounded-3 border-primary-subtle">
             <div class="card-header d-flex justify-content-end gap-2">
                 @include('administrator.pages.block.Sync.Datacenter')
             </div>
diff --git a/resources/views/components/admin-breadcrumb.blade.php b/resources/views/components/admin-breadcrumb.blade.php
index ef81205..958dec0 100644
--- a/resources/views/components/admin-breadcrumb.blade.php
+++ b/resources/views/components/admin-breadcrumb.blade.php
@@ -1,7 +1,7 @@
 @props(['items' => []])
 
 <nav aria-label="breadcrumb">
-    <ol class="breadcrumb bg-white shadow-sm p-3 rounded-4 d-flex align-items-center mb-4">
+    <ol class="breadcrumb bg-white shadow-sm p-3 rounded-3 d-flex align-items-center mb-4">
         <li class="breadcrumb-item">
             <a href="{{ route('dashboard') }}"
                 class="d-flex align-items-center text-muted text-decoration-none transition-colors hover-text-primary">
diff --git a/resources/views/components/data-table.blade.php b/resources/views/components/data-table.blade.php
index 844f982..0e96f0a 100644
--- a/resources/views/components/data-table.blade.php
+++ b/resources/views/components/data-table.blade.php
@@ -1,95 +1,256 @@
+@props(['id', 'columns', 'ajax'])
+
 @php
-$dtColumns = collect($columns)->map(function ($c) {
-  return [
-    'data' => $c['key'],
-    'name' => $c['key'],
-    'orderable' => $c['orderable'] ?? true,
-    'searchable' => $c['searchable'] ?? true,
-  ];
-})->values();
+  $dtColumns = collect($columns)->map(function ($c) {
+    return [
+      'data' => $c['key'],
+      'name' => $c['key'],
+      'orderable' => $c['orderable'] ?? true,
+      'searchable' => $c['searchable'] ?? true,
+      'className' => $c['className'] ?? '',
+    ];
+  })->values();
 @endphp
-    <table id="{{ $id }}" class="table table-hover table-bordered w-100 align-middle my-3">
-      <thead>
-        <tr>
-          @foreach($columns as $col)
-            <th>{{ $col['label'] }}</th>
-          @endforeach
-        </tr>
-    <tr>
-      @foreach($columns as $col)
-        <th>
-          @if(($col['searchable'] ?? true))
-            <input type="text" class="form-control form-control-sm column-search" placeholder="Search {{ $col['label'] }}"
-              data-column="{{ $loop->index }}">
-          @endif
-        </th>
-      @endforeach
-    </tr>
-    </thead>
-    </table>
-    @push('custom-scripts')
-      <script>
-        document.addEventListener('DOMContentLoaded', function () {
-          $.fn.DataTable.ext.pager.numbers_length = 7;
+      <div class="data-table-wrapper rounded-3 overflow-hidden border border-light">
+        <table id="{{ $id }}" class="table table-hover align-middle mb-0 bg-white"
+          style="width:100%; border-collapse: separate; border-spacing: 0;">
+          <thead class="bg-light">
+            <tr>
+              @foreach($columns as $col)
+                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-3 py-3 border-bottom"
+                  style="font-size: 0.75rem; letter-spacing: 0.5px;">
+                  {{ $col['label'] }}
+                </th>
+              @endforeach
+                </tr>
+            <tr class="filter-row bg-light">
+              @foreach($columns as $col)
+                <th class="p-2 border-bottom">
+                  @if(($col['searchable'] ?? true))
+                    <div class="input-group input-group-sm">
+                      <span class="input-group-text bg-white border-end-0 ps-2 pe-2 text-muted border-light">
+                        <i data-lucide="search" style="font-size: 0.75rem;"></i>
+                      </span>
+                      <input type="text"
+                        class="form-control form-control-sm border-start-0 ps-0 column-search shadow-none border-light bg-white"
+                        placeholder="Filter..." data-column="{{ $loop->index }}" style="font-size: 0.8125rem;">
+                    </div>
+                  @endif
+                    </th>
+              @endforeach
+                    </tr>
+                    </thead>
+          <tbody>
+            {{-- DataTables will populate this --}}
+          </tbody>
+        </table>
+      </div>
+      @push('custom-scripts')
+        <script>
+          document.addEventListener('DOMContentLoaded', function () {
+            $.fn.DataTable.ext.pager.numbers_length = 7;
 
-          var table = $('#{{ $id }}').DataTable({
-            processing: true,
-            serverSide: true,
-            ajax: '{{ $ajax }}',
-            columns: @json($dtColumns),
-            orderCellsTop: true,
-            fixedHeader: true,
-            pagingType: 'full_numbers',
-            language: { 
-              searchPlaceholder: "Search records",
-              search: "",
-              lengthMenu: "_MENU_",
-            },
-            dom: "<'row'<'col-sm-12'<'table-responsive'tr>>>" +
-          "<'row mt-3 align-items-center'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7 d-flex align-items-center justify-content-end gap-2'lp>>",
-            initComplete: function () {
-              // Initialize select2 for length menu
-              $('.dataTables_length select').select2({
+            var table = $('#{{ $id }}').DataTable({
+              processing: true,
+              serverSide: true,
+              ajax: '{{ $ajax }}',
+              columns: @json($dtColumns),
+              orderCellsTop: true,
+              fixedHeader: false,
+              pagingType: 'full_numbers',
+              language: {
+                processing: '<div class="spinner-border text-primary" role="status" style="width: 2rem; height: 2rem;"><span class="visually-hidden">Loading...</span></div>',
+                searchPlaceholder: "Search...",
+                search: "",
+                lengthMenu: "_MENU_",
+                info: "Showing <span class='fw-bold'>_START_</span> to <span class='fw-bold'>_END_</span> of <span class='fw-bold'>_TOTAL_</span> entries",
+                paginate: {
+                  first: '<span class="d-flex align-items-center justify-content-center"><i data-lucide="chevrons-left" width="16" height="16"></i></span>',
+                  last: '<span class="d-flex align-items-center justify-content-center"><i data-lucide="chevrons-right" width="16" height="16"></i></span>',
+                  next: '<span class="d-flex align-items-center justify-content-center"><i data-lucide="chevron-right" width="16" height="16"></i></span>',
+                  previous: '<span class="d-flex align-items-center justify-content-center"><i data-lucide="chevron-left" width="16" height="16"></i></span>'
+                },
+                zeroRecords: "No matching records found",
+                emptyTable: "No data available in table"
+              },
+              dom: "<'row p-3'<'col-sm-12'tr>>" +
+                "<'row px-3 pb-3 pt-1 align-items-center'<'col-sm-12 col-md-5 text-muted small'i><'col-sm-12 col-md-7 d-flex align-items-center justify-content-end gap-2'lp>>",
+              initComplete: function () {
+                // Initialize select2 with custom styling
+                $('.dataTables_length select').select2({
                   minimumResultsForSearch: Infinity,
-                  width: '60px'
-              });
-
-              // Apply the search
-              this.api().columns().every(function () {
-                var that = this;
-                $('input', this.header()).on('keyup change clear', function () {
-                  if (that.search() !== this.value) {
-                    that
-                      .search(this.value)
-                      .draw();
-                  }
+                  width: '80px',
+                  dropdownCssClass: 'small-select-dropdown',
+                  selectionCssClass: 'small-select-selection'
                 });
-              });
-            },
-            drawCallback: function() {
-                 if ($('.dataTables_length select').data('select2')) {
-                     $('.dataTables_length select').select2('destroy');
-                 }
-                 $('.dataTables_length select').select2({
-                     minimumResultsForSearch: Infinity,
-                     width: '60px'
-                 });
-              if (window.lucide) {
-                lucide.createIcons();
+
+                // Debounced search for column inputs
+                this.api().columns().every(function () {
+                  var that = this;
+                  $('input', this.header()).on('keyup change clear', function () {
+                    if (that.search() !== this.value) {
+                      that.search(this.value).draw();
+                    }
+                  });
+                });
+              },
+              drawCallback: function () {
+                // Re-initialize Select2 on draw (if lost)
+                if ($('.dataTables_length select').data('select2')) {
+                  $('.dataTables_length select').select2('destroy');
+                }
+                $('.dataTables_length select').select2({
+                  minimumResultsForSearch: Infinity,
+                  width: '80px'
+                });
+
+                // Re-initialize icons with slight delay to ensuring DOM is ready
+                setTimeout(function () {
+                  if (window.lucide) {
+                    lucide.createIcons();
+                  }
+                }, 50);
               }
-            }
-          });
+            });
 
-          // Prevent sorting when clicking on the input
-          $('#{{ $id }} thead tr:eq(1) th').on('click', function (e) {
-            e.stopPropagation();
-          });
+            // Prevent sorting when clicking on the input
+            $('#{{ $id }} thead tr:eq(1) th').on('click', function (e) {
+              e.stopPropagation();
+            });
 
-          // Custom search logic for the individual inputs
-          $('#{{ $id }} .column-search').on('keyup change', function () {
-            var columnIndex = $(this).data('column');
-            table.column(columnIndex).search(this.value).draw();
+            // External trigger for column search (redundant but kept for manual binding if needed)
+            $('#{{ $id }} .column-search').on('keyup change', function () {
+              var columnIndex = $(this).data('column');
+              table.column(columnIndex).search(this.value).draw();
+            });
           });
-        });
-      </script>
-    @endpush
\ No newline at end of file
+        </script>
+
+        <style>
+          /* Custom SAAS DataTable Styles */
+          .data-table-wrapper {
+            background: #fff;
+            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+            overflow-y: auto;
+            position: relative;
+          }
+
+          .pagination button.page-link {
+            height: 100%;
+          }
+
+          .data-table-wrapper .table thead th {
+            border-color: #f1f5f9 !important;
+            font-family: 'Inter', sans-serif;
+            vertical-align: middle;
+            position: sticky;
+            top: 0;
+            z-index: 5;
+            background-color: #f8f9fa;
+            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+          }
+
+          /* Sticky for second row (filter inputs) if present */
+          .data-table-wrapper .table thead tr:nth-child(2) th {
+            top: 45px;
+            /* Adjust based on typical header height */
+            z-index: 4;
+          }
+
+          .data-table-wrapper .input-group-text {
+            color: #94a3b8;
+            /* Slate 400 */
+          }
+
+          .data-table-wrapper .form-control::placeholder {
+            color: #cbd5e1;
+            /* Slate 300 */
+          }
+
+          .dataTables_wrapper .pagination .page-item .page-link {
+            border: 1px solid transparent;
+            border-radius: 6px;
+            margin: 0 2px;
+            color: #64748b;
+            padding: 0;
+            font-size: 0.875rem;
+            transition: all 0.2s ease;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: 38px;
+            min-width: 38px;
+          }
+
+          .dataTables_wrapper .pagination .page-item.active .page-link {
+            background-color: #0f172a;
+            /* Slate 900 or Primary Color */
+            color: white;
+            font-weight: 500;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+            border-color: #0f172a;
+          }
+
+          .dataTables_wrapper .pagination .page-item.disabled .page-link {
+            color: #cbd5e1;
+            background-color: transparent;
+          }
+
+          .dataTables_wrapper .pagination .page-item:not(.active) .page-link:hover {
+            background-color: #f8fafc;
+            color: #0f172a;
+            border-color: #e2e8f0;
+          }
+
+          /* Select2 Customization for Table Length */
+          .dataTables_length {
+            margin-right: 1rem;
+          }
+
+          .select2-container--default .select2-selection--single {
+            border: 1px solid #e2e8f0;
+            border-radius: 6px;
+            height: 32px;
+            display: flex;
+            align-items: center;
+            outline: none;
+          }
+
+          .select2-container--default .select2-selection--single:focus {
+            border-color: #94a3b8;
+          }
+
+          .select2-container--default .select2-selection--single .select2-selection__arrow {
+            height: 30px;
+          }
+
+          .select2-container--default .select2-selection--single .select2-selection__rendered {
+            color: #475569;
+            font-size: 0.8125rem;
+            padding-left: 10px;
+            line-height: normal;
+          }
+
+          /* Processing Indicator with improved look - Centered */
+          div.dataTables_processing {
+            position: absolute;
+            top: 50% !important;
+            left: 50% !important;
+            transform: translate(-50%, -50%);
+            width: auto !important;
+            margin: 0 !important;
+            padding: 1rem 2rem;
+            text-align: center;
+            font-size: 1.2em;
+            background: rgba(255, 255, 255, 0.9);
+            border-radius: 8px;
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+            z-index: 100;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border: 1px solid #e2e8f0;
+            color: #0f172a;
+          }
+        </style>
+      @endpush
\ No newline at end of file