diff --git a/app/Http/Controllers/admin/package/Host.php b/app/Http/Controllers/admin/package/Host.php
index 50ecb3f..d35f868 100644
--- a/app/Http/Controllers/admin/package/Host.php
+++ b/app/Http/Controllers/admin/package/Host.php
@@ -27,7 +27,7 @@ class Host extends Controller
     public function index(Request $request)
     {
         $title = 'List all Host';
-        return view("admin.package.host.index", compact('title'));
+        return view("administrator.pages.package.host.index", compact('title'));
     }
 
     public function datatable(Request $request)
@@ -44,6 +44,9 @@ class Host extends Controller
             ->editColumn('updated_at', function ($d) {
                 return $d->updated_at ? $d->updated_at->format('d/m/Y') : '';
             })
+            ->editColumn('datacenter.name', function ($d) {
+                return $d->datacenter->name . ' - ' . $d->datacenter->datacenter_id;
+            })
             ->addColumn('action', function ($d) {
                 $editUrl = route('package.host.edit', ['id' => $d->id]);
                 $deleteBtn = '';
@@ -92,7 +95,7 @@ HTML;
     {
         $title = 'Add host';
 
-        return view('admin.package.host.add', compact('title'));
+        return view('administrator.pages.package.host.add', compact('title'));
     }
     public function store(HostRequest $request)
     {
@@ -123,7 +126,7 @@ HTML;
         }
         $title = "View Host Information";
 
-        return view('admin.package.host.edit', compact('host', 'title'));
+        return view('administrator.pages.package.host.edit', compact('host', 'title'));
     }
     public function update(int $id = 0, HostRequest $request)
     {
diff --git a/resources/views/administrator/pages/block/Sync/Host.blade.php b/resources/views/administrator/pages/block/Sync/Host.blade.php
index 54ce5a7..1a5be41 100644
--- a/resources/views/administrator/pages/block/Sync/Host.blade.php
+++ b/resources/views/administrator/pages/block/Sync/Host.blade.php
@@ -1,3 +1,3 @@
 <a href="{{ route('package.host.create') }}" class="btn btn-outline-secondary"><i class="fas fa-plus-circle"></i> Add Host</a>
-@include("admin.block.Sync.All")
+@include("administrator.pages.block.Sync.All")
 <a href="{{ route('package.host.sync') }}" class="btn btn-outline-secondary"><i class="fas fa-sync"></i> Sync Host</a>
diff --git a/resources/views/administrator/pages/package/host/add.blade.php b/resources/views/administrator/pages/package/host/add.blade.php
index be510bc..9af4e6f 100644
--- a/resources/views/administrator/pages/package/host/add.blade.php
+++ b/resources/views/administrator/pages/package/host/add.blade.php
@@ -1,51 +1,73 @@
-@extends("admin.main")
-@section("content")
-@if(auth()->guard('admins')->user()->can("add module vcenter"))
-    <div class="card card-outline card-primary">
-        <form action="{{ route('package.host.store') }}" method="post">
-            @csrf
-            <div class="card-body">
-                <x-module.v-center :model="null" />
-                <x-module.datacenter :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>
-                {{--Host ID--}}
-                <div class="row form-group align-items-center mb-0">
-                    <label for="host_id" class="col-md-3 text-right">Host ID</label>
-                    <div class="col-md-9 p-1 bg-customer">
-                        <input type="text" id="host_id" name="host_id" placeholder="" value="" class="form-control">
-                    </div>
-                </div>
-                {{--Template ID--}}
-                <div class="row form-group align-items-center mb-0">
-                    <label for="template" class="col-md-3 text-right">Template ID</label>
-                    <div class="col-md-9 p-1 bg-customer">
-                        <input type="text" id="template" name="template" placeholder="" value="" class="form-control">
-                    </div>
-                </div>
-                {{--Console ID--}}
-                <div class="row form-group align-items-center mb-0">
-                    <label for="console" class="col-md-3 text-right">Console Name</label>
-                    <div class="col-md-9 p-1 bg-customer">
-                        <input type="text" id="console" name="console" placeholder="consolenode129.tgs.com.vn" value="" class="form-control">
-                    </div>
-                </div>
-            </div>
-            <div class="card-footer">
-                <a href="{{ route('package.host.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
+@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' => 'Host', 'active' => true],
+        ];
+    @endphp
+    <x-breabcrumb :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.host.store') }}" method="post">
+                @csrf
+                <div class="card-body">
+                    <x-module.v-center :model="null" />
+                    <x-module.datacenter :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>
+                    {{--Host ID--}}
+                    <div class="row form-group align-items-center mb-0">
+                        <label for="host_id" class="col-md-3 text-right">Host ID</label>
+                        <div class="col-md-9 p-1 bg-customer">
+                            <input type="text" id="host_id" name="host_id" placeholder="" value="" class="form-control">
+                        </div>
+                    </div>
+                    {{--Template ID--}}
+                    <div class="row form-group align-items-center mb-0">
+                        <label for="template" class="col-md-3 text-right">Template ID</label>
+                        <div class="col-md-9 p-1 bg-customer">
+                            <input type="text" id="template" name="template" placeholder="" value="" class="form-control">
+                        </div>
+                    </div>
+                    {{--Console ID--}}
+                    <div class="row form-group align-items-center mb-0">
+                        <label for="console" class="col-md-3 text-right">Console Name</label>
+                        <div class="col-md-9 p-1 bg-customer">
+                            <input type="text" id="console" name="console" placeholder="consolenode129.tgs.com.vn" value=""
+                                class="form-control">
+                        </div>
+                    </div>
+                </div>
+                <div class="card-footer">
+                    <a href="{{ route('package.host.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
diff --git a/resources/views/administrator/pages/package/host/edit.blade.php b/resources/views/administrator/pages/package/host/edit.blade.php
index 113c9f9..94375d8 100644
--- a/resources/views/administrator/pages/package/host/edit.blade.php
+++ b/resources/views/administrator/pages/package/host/edit.blade.php
@@ -1,53 +1,77 @@
-@extends("admin.main")
-@section("content")
-@if(auth()->guard('admins')->user()->can("add module vcenter"))
-    <div class="card card-outline card-primary">
-        <form action="{{ route('package.host.update',['id' => $host->id]) }}" method="post">
-            @csrf
-            @method('put')
-            <div class="card-body">
-                <x-module.v-center :model="$host->datacenter" />
-                <x-module.datacenter :model="$host" />
-   
-                {{--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="{{ $host->name}}" class="form-control">
-                    </div>
-                </div>
-                {{--Host ID--}}
-                <div class="row form-group align-items-center mb-0">
-                    <label for="host_id" class="col-md-3 text-right">Host ID</label>
-                    <div class="col-md-9 p-1 bg-customer">
-                        <input type="text" id="host_id" name="host_id" placeholder="" value="{{ $host->host_id}}" class="form-control">
-                    </div>
-                </div>
-                {{--Template ID--}}
-                <div class="row form-group align-items-center mb-0">
-                    <label for="template" class="col-md-3 text-right">Template ID</label>
-                    <div class="col-md-9 p-1 bg-customer">
-                        <input type="text" id="template" name="template" placeholder="" value="{{ $host->template}}" class="form-control">
-                    </div>
-                </div>
-                {{--Console ID--}}
-                <div class="row form-group align-items-center mb-0">
-                    <label for="console" class="col-md-3 text-right">Console Name</label>
-                    <div class="col-md-9 p-1 bg-customer">
-                        <input type="text" id="console" name="console" placeholder="consolenode129.tgs.com.vn" value="{{ $host->console}}" class="form-control">
-                    </div>
-                </div>
-            </div>
-            <div class="card-footer">
-                <a href="{{ route('package.host.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
+@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' => 'Host', 'active' => true],
+        ];
+    @endphp
+    <x-breabcrumb :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.host.update', ['id' => $host->id]) }}" method="post">
+                @csrf
+                @method('put')
+                <div class="card-body">
+                    <x-module.v-center :model="$host->datacenter" />
+                    <x-module.datacenter :model="$host" />
+
+                    {{--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="{{ $host->name}}"
+                                class="form-control">
+                        </div>
+                    </div>
+                    {{--Host ID--}}
+                    <div class="row form-group align-items-center mb-0">
+                        <label for="host_id" class="col-md-3 text-right">Host ID</label>
+                        <div class="col-md-9 p-1 bg-customer">
+                            <input type="text" id="host_id" name="host_id" placeholder="" value="{{ $host->host_id}}"
+                                class="form-control">
+                        </div>
+                    </div>
+                    {{--Template ID--}}
+                    <div class="row form-group align-items-center mb-0">
+                        <label for="template" class="col-md-3 text-right">Template ID</label>
+                        <div class="col-md-9 p-1 bg-customer">
+                            <input type="text" id="template" name="template" placeholder="" value="{{ $host->template}}"
+                                class="form-control">
+                        </div>
+                    </div>
+                    {{--Console ID--}}
+                    <div class="row form-group align-items-center mb-0">
+                        <label for="console" class="col-md-3 text-right">Console Name</label>
+                        <div class="col-md-9 p-1 bg-customer">
+                            <input type="text" id="console" name="console" placeholder="consolenode129.tgs.com.vn"
+                                value="{{ $host->console}}" class="form-control">
+                        </div>
+                    </div>
+                </div>
+                <div class="card-footer">
+                    <a href="{{ route('package.host.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
diff --git a/resources/views/administrator/pages/package/host/index.blade.php b/resources/views/administrator/pages/package/host/index.blade.php
index 3e6cf50..d52732c 100644
--- a/resources/views/administrator/pages/package/host/index.blade.php
+++ b/resources/views/administrator/pages/package/host/index.blade.php
@@ -1,79 +1,32 @@
-@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' => 'Host', '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.Host")
+                @include("administrator.pages.block.Sync.Host")
             </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">Host Name</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(count($hosts) > 0)
-                        @foreach($hosts->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->datacenter->name)
-                                        {{$item->datacenter->name}}
-                                    @endisset
-                                </td>
-                                <td class="text-center">
-                                    @isset($item->datacenter->vCenter->host)
-                                        {{$item->datacenter->vCenter->host}}
-                                    @endisset
-                                </td>
-                                <td class="text-center">
-                                    @time($item->updated_at)
-                                </td>
-                                <td class="text-center">
-                                    <a class="btn btn-warning btn-sm"
-                                       href="{{ route('package.host.edit', ['id' => $item->id]) }}">
-                                        <i class="fas fa-search"></i>
-                                    </a>
-                                </td>
-                                <td>
-                                    @if(auth()->guard('admins')->user()->can("delete module vcenter"))
-                                        <form method="post" class="d-inline"
-                                              action="{{ route('package.host.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">
-                {{ $hosts->withQueryString()->links() }}
+                <x-datatable id="hostTable" ajax="{{ route('package.host.datatable') }}" :columns="[
+                    ['key' => 'name', 'label' => 'Name'],
+                    ['key' => 'host_id', 'label' => 'Host ID'],
+                    ['key' => 'datacenter.name', 'label' => 'Datacenter'],
+                    ['key' => 'datacenter.v_center.host', 'label' => 'vCenter Host'],
+                    ['key' => 'action', 'label' => 'Action']
+                ]" />
             </div>
         </div>
     @else
@@ -83,3 +36,9 @@
         </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