diff --git a/app/Http/Controllers/rest/ModuleController.php b/app/Http/Controllers/rest/ModuleController.php
index 367ff37..0aa00a6 100644
--- a/app/Http/Controllers/rest/ModuleController.php
+++ b/app/Http/Controllers/rest/ModuleController.php
@@ -57,7 +57,7 @@ class ModuleController extends Controller
             ],
             [],
             [],
-            ['id', 'name']
+            ['id', 'name', 'datacenter_id']
         );
 
         if (count($datacenter) > 0) {
diff --git a/resources/views/administrator/pages/package/network/add.blade.php b/resources/views/administrator/pages/package/network/add.blade.php
index 52b2463..6c51636 100644
--- a/resources/views/administrator/pages/package/network/add.blade.php
+++ b/resources/views/administrator/pages/package/network/add.blade.php
@@ -1,47 +1,68 @@
+@extends('administrator.layout.master')
+@push('plugin-styles')
+    <link href="{{ asset('build/plugins/select2/select2.min.css') }}" rel="stylesheet" />
+@endpush
 
-@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.network.store') }}" method="post">
-            @csrf
-            <div class="card-body">
-                <x-module.v-center :model="null" />
-                <x-module.datacenter :model="null" />
-                <x-module.host :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>
-                {{--Network--}}
-                <div class="row form-group align-items-center mb-0">
-                    <label for="network" class="col-md-3 text-right">Network ID</label>
-                    <div class="col-md-9 p-1 bg-customer">
-                        <input type="text" id="network" name="network" placeholder="" value="" class="form-control">
-                    </div>
-                </div>
-                {{--Type--}}
-                <div class="row form-group align-items-center mb-0">
-                    <label for="type" class="col-md-3 text-right">Network Type</label>
-                    <div class="col-md-9 p-1 bg-customer">
-                        <input type="text" id="type" name="type" placeholder="" value="STANDARD_PORTGROUP" class="form-control">
-                    </div>
-                </div>
-               
-            </div>
-            <div class="card-footer">
-                <a href="{{ route('package.network.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
+@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("add module vcenter"))
+        <div class="card card-outline card-primary">
+            <form action="{{ route('package.network.store') }}" method="post">
+                @csrf
+                <div class="card-body">
+                    <x-module.v-center :model="null" />
+                    <x-module.datacenter :model="null" />
+                    <x-module.host :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>
+                    {{--Network--}}
+                    <div class="row form-group align-items-center mb-0">
+                        <label for="network" class="col-md-3 text-right">Network ID</label>
+                        <div class="col-md-9 p-1 bg-customer">
+                            <input type="text" id="network" name="network" placeholder="" value="" class="form-control">
+                        </div>
+                    </div>
+                    {{--Type--}}
+                    <div class="row form-group align-items-center mb-0">
+                        <label for="type" class="col-md-3 text-right">Network Type</label>
+                        <div class="col-md-9 p-1 bg-customer">
+                            <input type="text" id="type" name="type" placeholder="" value="STANDARD_PORTGROUP"
+                                class="form-control">
+                        </div>
+                    </div>
+
+                </div>
+                <div class="card-footer">
+                    <a href="{{ route('package.network.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/network/edit.blade.php b/resources/views/administrator/pages/package/network/edit.blade.php
index 89d86f2..cdf0ae1 100644
--- a/resources/views/administrator/pages/package/network/edit.blade.php
+++ b/resources/views/administrator/pages/package/network/edit.blade.php
@@ -1,48 +1,71 @@
+@extends('administrator.layout.master')
+@push('plugin-styles')
+    <link href="{{ asset('build/plugins/select2/select2.min.css') }}" rel="stylesheet" />
+@endpush
 
-@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.network.update',['id' => $network->id]) }}" method="post">
-            @csrf
-            @method('put')
-            <div class="card-body">
-                <x-module.v-center :model="$network->host->datacenter" />
-                <x-module.datacenter :model="$network->host" />
-                <x-module.host :model="$network" />
-                {{--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="{{$network->name}}" class="form-control">
-                    </div>
-                </div>
-                {{--Network--}}
-                <div class="row form-group align-items-center mb-0">
-                    <label for="network" class="col-md-3 text-right">Network ID</label>
-                    <div class="col-md-9 p-1 bg-customer">
-                        <input type="text" id="network" name="network" placeholder="" value="{{$network->network}}" class="form-control">
-                    </div>
-                </div>
-                {{--Type--}}
-                <div class="row form-group align-items-center mb-0">
-                    <label for="type" class="col-md-3 text-right">Network Type</label>
-                    <div class="col-md-9 p-1 bg-customer">
-                        <input type="text" id="type" name="type" placeholder="" value="{{$network->type ?? 'STANDARD_PORTGROUP'}}" class="form-control">
-                    </div>
-                </div>
-               
-            </div>
-            <div class="card-footer">
-                <a href="{{ route('package.network.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
+@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("add module vcenter"))
+        <div class="card card-outline card-primary">
+            <form action="{{ route('package.network.update', ['id' => $network->id]) }}" method="post">
+                @csrf
+                @method('put')
+                <div class="card-body">
+
+                    <x-module.v-center :model="$network->host->datacenter" />
+                    <x-module.datacenter :model="$network->host->datacenter" />
+                    <x-module.host :model="$network->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="{{$network->name}}"
+                                class="form-control">
+                        </div>
+                    </div>
+                    {{--Network--}}
+                    <div class="row form-group align-items-center mb-0">
+                        <label for="network" class="col-md-3 text-right">Network ID</label>
+                        <div class="col-md-9 p-1 bg-customer">
+                            <input type="text" id="network" name="network" placeholder="" value="{{$network->network}}"
+                                class="form-control">
+                        </div>
+                    </div>
+                    {{--Type--}}
+                    <div class="row form-group align-items-center mb-0">
+                        <label for="type" class="col-md-3 text-right">Network Type</label>
+                        <div class="col-md-9 p-1 bg-customer">
+                            <input type="text" id="type" name="type" placeholder=""
+                                value="{{$network->type ?? 'STANDARD_PORTGROUP'}}" class="form-control">
+                        </div>
+                    </div>
+
+                </div>
+                <div class="card-footer">
+                    <a href="{{ route('package.network.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/components/module/datacenter.blade.php b/resources/views/components/module/datacenter.blade.php
index 5345625..e829762 100644
--- a/resources/views/components/module/datacenter.blade.php
+++ b/resources/views/components/module/datacenter.blade.php
@@ -26,7 +26,7 @@
         </div>
     </div>
     
-    @push('scripts')
+    @push('custom-scripts')
         <script>
             $(document).ready(function () {
                 // Prevent multiple initializations using namespace
@@ -75,7 +75,7 @@
                                 response.data.forEach(dc => {
                                     const selected = preselect == dc.id ? 'selected' : '';
                                     options +=
-                                        `<option value="${dc.id}" ${selected}>${dc.name}</option>`;
+                                        `<option value="${dc.id}" ${selected}>${dc.name} - ${dc.datacenter_id}</option>`;
                                 });
                                 $datacenter.html(options).prop('disabled', false);
 
@@ -108,14 +108,14 @@
                 $datacenter.off('change.datacenterComponent').on('change.datacenterComponent', function () {
                     const datacenterId = $(this).val();
 
-                    // Reset and disable host
-                    $host.html('<option value="">--- Chọn Host ---</option>').prop('disabled', true);
+                        // Reset and disable host
+                        $host.html('<option value="">--- Chọn Host ---</option>').prop('disabled', true);
 
-                    // Enable host if datacenter is selected
-                    if (datacenterId) {
-                        $host.prop('disabled', false);
-                    }
-                });
+                        // Enable host if datacenter is selected
+                        if (datacenterId) {
+                            $host.prop('disabled', false);
+                        }
+                    });
 
                 // Initial load logic
                 const selectedDatacenterId = $datacenter.data('selected');
@@ -126,5 +126,5 @@
                     debounceLoadDatacenters($vcenter.val());
                 }
             });
-        </script>
+                    </script>
     @endpush
\ No newline at end of file
diff --git a/resources/views/components/module/host.blade.php b/resources/views/components/module/host.blade.php
index 0b74226..b6e1942 100644
--- a/resources/views/components/module/host.blade.php
+++ b/resources/views/components/module/host.blade.php
@@ -1,5 +1,5 @@
 @php
-    $selectedHostId = old('module_host_id') ?? ($model?->module_host_id ?? ($model?->ipaddress?->module_host_id ?? null));
+$selectedHostId = old('module_host_id') ?? ($model?->module_host_id ?? ($model?->ipaddress?->module_host_id ?? null));
 @endphp
 
 
@@ -13,7 +13,7 @@
         </select>
     </div>
 </div>
-@push('scripts')
+@push('custom-scripts')
     <script>
         $(document).ready(function () {
             // Prevent multiple initializations using namespace
diff --git a/resources/views/components/module/os-version.blade.php b/resources/views/components/module/os-version.blade.php
index 03f79d7..e1bdc0e 100644
--- a/resources/views/components/module/os-version.blade.php
+++ b/resources/views/components/module/os-version.blade.php
@@ -35,7 +35,7 @@
         </div>
     </div>
 
-    @push('scripts')
+    @push('custom-scripts')
         <script>
             // Initialize Select2 for Operating Systems in OS Version Component
             function initializeOSVersionSelect() {
diff --git a/resources/views/components/module/os.blade.php b/resources/views/components/module/os.blade.php
index babdaee..4c923ae 100644
--- a/resources/views/components/module/os.blade.php
+++ b/resources/views/components/module/os.blade.php
@@ -1,6 +1,6 @@
 @php
-    // Fix: Get os_group_id from the relationship correctly
-    $selectedOsGroupId = old('os_group_id') ?? ($model?->os?->os_group_id ?? null);
+// Fix: Get os_group_id from the relationship correctly
+$selectedOsGroupId = old('os_group_id') ?? ($model?->os?->os_group_id ?? null);
 @endphp
 
 
@@ -21,7 +21,7 @@
 </div>
 
 
-@push('scripts')
+@push('custom-scripts')
     <script>
         $(document).ready(function() {
             // Prevent multiple initializations using namespace