diff --git a/app/Http/Controllers/admin/package/Datacenter.php b/app/Http/Controllers/admin/package/Datacenter.php
index 9a56ed7..e8ecf7f 100644
--- a/app/Http/Controllers/admin/package/Datacenter.php
+++ b/app/Http/Controllers/admin/package/Datacenter.php
@@ -30,12 +30,12 @@ class Datacenter extends Controller
         );
         $title = 'List all datacenter';
 
-        return view('admin.package.datacenter.index', compact('datacenter', 'title'));
+        return view('administrator.pages.package.datacenter.index', compact('datacenter', 'title'));
     }
     public function create()
     {
         $title = 'Add datacenter';
-        return view('admin.package.datacenter.add', compact('title'));
+        return view('administrator.pages.package.datacenter.add', compact('title'));
     }
     public function store(DatacenterRequest $request)
     {
@@ -67,7 +67,7 @@ class Datacenter extends Controller
             return back()->withErrors('Invalid request.');
         }
         $title = 'Edit Datacenter';
-        return view('admin.package.datacenter.edit', compact('title', 'datacenter'));
+        return view('administrator.pages.package.datacenter.edit', compact('title', 'datacenter'));
     }
     public function update(int $id = 0, DatacenterRequest $request)
     {
diff --git a/resources/views/administrator/pages/block/Sync/Datacenter.blade.php b/resources/views/administrator/pages/block/Sync/Datacenter.blade.php
index 9ddca44..56ed9a8 100644
--- a/resources/views/administrator/pages/block/Sync/Datacenter.blade.php
+++ b/resources/views/administrator/pages/block/Sync/Datacenter.blade.php
@@ -1,3 +1,3 @@
 <a href="{{ route('package.datacenter.create') }}" class="btn btn-outline-secondary"><i class="fas fa-plus-circle"></i> Add Datacenter</a>
-@include("admin.block.Sync.All")
+@include("administrator.pages.block.Sync.All")
 <a href="{{ route('package.datacenter.sync') }}" class="btn btn-outline-secondary"><i class="fas fa-sync"></i> Sync Datacenter</a>
diff --git a/resources/views/administrator/pages/package/datacenter/index.blade.php b/resources/views/administrator/pages/package/datacenter/index.blade.php
index 3d9a87a..f841fd5 100644
--- a/resources/views/administrator/pages/package/datacenter/index.blade.php
+++ b/resources/views/administrator/pages/package/datacenter/index.blade.php
@@ -1,80 +1,44 @@
-@php use App\Http\Helpers\Helper; @endphp
-@extends('admin.main')
+@extends('administrator.layout.master')
+@push('plugin-styles')
+    <link href="{{ asset('build/plugins/select2/select2.min.css') }}" rel="stylesheet" />
+@endpush
+
+@section('breadcrumb')
+    @php
+        $breadcrumbItems = [
+            ['label' => 'Modules'],
+            ['label' => 'Package vCenter'],
+            ['label' => 'Datacenter', 'active' => true],
+        ];
+    @endphp
+    <x-breabcrumb :items="$breadcrumbItems" />
+@endsection
 @section('content')
     @if(auth()->guard('admins')->user()->can("manager package module"))
         <div class="card card-primary card-outline">
             <div class="card-header">
-                @include("admin.block.Sync.Datacenter")
-            </div>
-            <div class="card-body">
-                <table class="table table-invoice table-bordered">
-                    <thead>
-                    <tr>
-                        <th class="text-center">
-                            <label>
-                                <input type="checkbox" name="check" class="check-all">
-                            </label>
-                        </th>
-                        <th class="text-center">Datacenter Name</th>
-                        <th class="text-center">vCenter Host</th>
-                        <th class="text-center">Last Updated</th>
-                        <th style="width:40px"></th>
-                        <th style="width: 40px"></th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                    @if($datacenter->count())
-                        @foreach($datacenter->all() as $item)
-                            <tr>
-                                <td class="text-center">
-                                    <label for=""></label><input type="checkbox" name="id[]" value="{{ $item->id }}"
-                                                                 id="">
-                                </td>
-                                <td class="text-center">
-                                    {{ $item->name }}
-                                </td>
-                                <td class="text-center">
-                                    @isset($item->vCenter->host)
+                @include("administrator.pages.block.Sync.Datacenter")
+                    </div>
+                    <div class="card-body">
+                        <x-datatable id="datacenterTable" ajax="{{ route('package.datacenter.datatable') }}" :columns="[
+                    ['key' => 'name', 'label' => 'Name'],
+                    ['key' => 'v_center.host', 'label' => 'Vcenter Host'],
+                    ['key' => 'action', 'label' => 'Action']
+                ]" />
+                    </div>
 
-                                        {{ $item->vCenter->host }}
-                                    @endisset
-                                </td>
-                                <td class="text-center">
-                                    @time($item->created_at)
-                                </td>
-                                <td>
-                                    <a class="btn btn-warning btn-sm"
-                                       href="{{ route('package.datacenter.edit', ['id' => $item->id]) }}">
-                                        <i class="fas fa-user-edit"></i>
-                                    </a>
-                                </td>
-                                <td>
-                                    @if(auth()->guard('admins')->user()->can("delete module vcenter"))
-                                        <form method="post" class="d-inline"
-                                              action="{{ route('package.datacenter.destroy', ['id' => $item->id]) }}">
-                                            @method('delete')
-                                            @csrf
-                                            <button type="submit" data-toggle="tooltip" data-placement="top" title=""
-                                                    class="btn btn-sm btn-danger" data-original-title="Xoá">
-                                                <i class="fas fa-trash"></i>
-                                            </button>
-                                        </form>
-                                    @endif
-                                </td>
-                            </tr>
-                        @endforeach
-                    @endif
-                    </tbody>
-                </table>
-            </div>
-            <div class="card-footer">
-{{--                {{ $datacenter->withQueryString()->links() }}--}}
-            </div>
-        </div>
+                </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 Package
-                management department</h5>
-        </div>
-    @endif
+            <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 Package
+                    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
diff --git a/resources/views/administrator/pages/package/datastore/index.blade.php b/resources/views/administrator/pages/package/datastore/index.blade.php
index 6649d83..bc06c3f 100644
--- a/resources/views/administrator/pages/package/datastore/index.blade.php
+++ b/resources/views/administrator/pages/package/datastore/index.blade.php
@@ -19,23 +19,23 @@
         <div class="card card-primary card-outline">
             <div class="card-header">
                 @include("administrator.pages.block.Sync.Datastore")
-                    </div>
-                    <div class="card-body">
-                        <x-datatable id="datastoreTable" ajax="{{ route('package.datastore.datatable') }}" :columns="[
+            </div>
+            <div class="card-body">
+                <x-datatable id="datastoreTable" ajax="{{ route('package.datastore.datatable') }}" :columns="[
                     ['key' => 'name', 'label' => 'Name'],
                     ['key' => 'host.name', 'label' => 'Host Name'],
                     ['key' => 'host.datacenter.v_center.host', 'label' => 'vCenter Host'],
                     ['key' => 'space', 'label' => 'Free Space'],
                     ['key' => 'action', 'label' => 'Action']
                 ]" />
-                    </div>
-                </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 Package
-                    management department</h5>
             </div>
-        @endif
+        </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 Package
+                management department</h5>
+        </div>
+    @endif
 @endsection
 
 @push('plugin-scripts')