diff --git a/app/View/Components/Breabcrumb.php b/app/View/Components/Breabcrumb.php
new file mode 100644
index 0000000..da186b0
--- /dev/null
+++ b/app/View/Components/Breabcrumb.php
@@ -0,0 +1,26 @@
+<?php
+
+namespace App\View\Components;
+
+use Closure;
+use Illuminate\Contracts\View\View;
+use Illuminate\View\Component;
+
+class Breabcrumb extends Component
+{
+    /**
+     * Create a new component instance.
+     */
+    public function __construct()
+    {
+        //
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     */
+    public function render(): View|Closure|string
+    {
+        return view('components.breabcrumb');
+    }
+}
diff --git a/resources/views/admin/package/datacenter/add.blade.php b/resources/views/admin/package/datacenter/add.blade.php
index 601ebba..4bd178f 100644
--- a/resources/views/admin/package/datacenter/add.blade.php
+++ b/resources/views/admin/package/datacenter/add.blade.php
@@ -1,38 +1,53 @@
-@extends("admin.main")
+@extends("administrator.layout.master")
+@push('plugin-styles')
+    <link href="{{ asset('build/plugins/select2/select2.min.css') }}" rel="stylesheet" />
+@endpush
 @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"/>
-                {{--                <livewire:module.vcenter :model="$model ?? null" />--}}
+    @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" />
+                    {{--
+                    <livewire:module.vcenter :model="$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">
+                    {{--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>
                     </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>
+                <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
+            </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
+
+@push('custom-scripts')
+@endpush
\ No newline at end of file
diff --git a/resources/views/admin/package/datacenter/edit.blade.php b/resources/views/admin/package/datacenter/edit.blade.php
index 6222595..a692dda 100644
--- a/resources/views/admin/package/datacenter/edit.blade.php
+++ b/resources/views/admin/package/datacenter/edit.blade.php
@@ -1,37 +1,53 @@
-@extends("admin.main")
+@extends("administrator.layout.master")
+@push('plugin-styles')
+    <link href="{{ asset('build/plugins/select2/select2.min.css') }}" rel="stylesheet" />
+@endpush
+
 @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">
+    @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
\ 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')
+    <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
+
+@push('custom-scripts')
+@endpush
\ No newline at end of file
diff --git a/resources/views/admin/package/datacenter/index.blade.php b/resources/views/admin/package/datacenter/index.blade.php
index bdccd09..ed64bf3 100644
--- a/resources/views/admin/package/datacenter/index.blade.php
+++ b/resources/views/admin/package/datacenter/index.blade.php
@@ -4,6 +4,17 @@
     <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">
@@ -12,13 +23,13 @@
             </div>
             <div class="card-body p-5">
                 <x-datatable id="datacenterTable" ajax="{{ route('package.datacenter.datatable') }}" :columns="[
-            ['key' => 'id', 'label' => 'ID'],
-            ['key' => 'name', 'label' => 'Name'],
-            ['key' => 'v_center.host', 'label' => 'vCenter Host'],
-            ['key' => 'action', 'label' => 'Action']
-        ]" />
-            </div>
+                    ['key' => 'id', 'label' => 'ID'],
+                    ['key' => 'name', 'label' => 'Name'],
+                    ['key' => 'v_center.host', 'label' => 'vCenter Host'],
+                    ['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
diff --git a/resources/views/administrator/layout/master.blade.php b/resources/views/administrator/layout/master.blade.php
index dc30f51..a01de98 100644
--- a/resources/views/administrator/layout/master.blade.php
+++ b/resources/views/administrator/layout/master.blade.php
@@ -56,6 +56,7 @@
         <div class="page-wrapper">
             @include('administrator.layout.partials.header')
             <div class="page-content">
+                @yield('breadcrumb')
                 @yield('content')
                 <div id="fui-toast"></div>
             </div>
diff --git a/resources/views/components/breabcrumb.blade.php b/resources/views/components/breabcrumb.blade.php
new file mode 100644
index 0000000..9dffd8d
--- /dev/null
+++ b/resources/views/components/breabcrumb.blade.php
@@ -0,0 +1,19 @@
+@props(['items' => []])
+
+<nav class="page-breadcrumb">
+    <ol class="breadcrumb">
+        @foreach($items as $item)
+            @if(!empty($item['active']))
+                <li class="breadcrumb-item active" aria-current="page">{{ $item['label'] }}</li>
+            @else
+                <li class="breadcrumb-item">
+                    @if(isset($item['url']))
+                        <a href="{{ $item['url'] }}">{{ $item['label'] }}</a>
+                    @else
+                        {{ $item['label'] }}
+                    @endif
+                </li>
+            @endif
+        @endforeach
+    </ol>
+</nav>
diff --git a/resources/views/components/module/v-center.blade.php b/resources/views/components/module/v-center.blade.php
index 072d505..2e97b3e 100644
--- a/resources/views/components/module/v-center.blade.php
+++ b/resources/views/components/module/v-center.blade.php
@@ -21,44 +21,57 @@
     </div>
 </div>
 
-@push('scripts')
+@push('custom-scripts')
     <script>
-        $(document).ready(function() {
+            $(document).ready(function () {
             // Prevent multiple initializations using namespace
             if (window.vcenterComponentInitialized) {
                 return;
             }
             window.vcenterComponentInitialized = true;
 
-            initSelect2();
+            $('.select2').select2({
+                width: '100%'
+            });
+
             const $vcenter = $('.vcenter_id');
             const $datacenter = $('.datacenter_id');
             const $host = $('.host_id');
 
             // Disable datacenter and host initially
-            $datacenter.prop('disabled', true);
-            $host.prop('disabled', true);
+            // Note: In edit view these might be inputs not selects, so this logic might need adjustment if intended for cascading selects.
+            // For now, keeping logic but ensuring it doesn't break if elements aren't selects.
+            if ($datacenter.is('select')) {
+                $datacenter.prop('disabled', true);
+            }
+            if ($host.is('select')) {
+                $host.prop('disabled', true);
+            }
 
             // Remove existing event handlers and bind new ones with namespace
-            $vcenter.off('change.vcenterComponent').on('change.vcenterComponent', function() {
+            $vcenter.off('change.vcenterComponent').on('change.vcenterComponent', function () {
                 const vcenterId = $(this).val();
 
-                // Reset and disable datacenter and host
-                $datacenter.html('<option value="">--- Chọn Datacenter ---</option>').prop('disabled', true);
-                $host.html('<option value="">--- Chọn Host ---</option>').prop('disabled', true);
+                // Reset and disable datacenter and host if they are selects
+                if ($datacenter.is('select')) {
+                    $datacenter.html('<option value="">--- Chọn Datacenter ---</option>').prop('disabled', true);
+                }
+                if ($host.is('select')) {
+                    $host.html('<option value="">--- Chọn Host ---</option>').prop('disabled', true);
+                }
 
                 // Enable datacenter if vcenter is selected
                 if (vcenterId) {
-                    $datacenter.prop('disabled', false);
+                    if ($datacenter.is('select')) $datacenter.prop('disabled', false);
                 }
             });
 
             // Trigger initial state
             if ($vcenter.val()) {
-                $datacenter.prop('disabled', false);
+                if ($datacenter.is('select')) $datacenter.prop('disabled', false);
             }
         });
-    </script>
+                </script>
 @endpush