diff --git a/resources/views/administrator/layout/master.blade.php b/resources/views/administrator/layout/master.blade.php
index a01de98..e578edb 100644
--- a/resources/views/administrator/layout/master.blade.php
+++ b/resources/views/administrator/layout/master.blade.php
@@ -79,6 +79,17 @@
     @vite(['resources/js/pages/template.js'])
     <!-- end common js -->
 
+    <!-- Global Select2 initialization -->
+    <script>
+        window.initSelect2 = function() {
+            $(".select2.single__select").select2({
+                allowClear: true,
+                width: "100%",
+                height: "100%",
+            });
+        };
+    </script>
+
     @include('administrator.layout.partials.toast')
 
     @stack('custom-scripts')
diff --git a/resources/views/administrator/pages/package/group/add.blade.php b/resources/views/administrator/pages/package/group/add.blade.php
index a120443..2b8de8c 100644
--- a/resources/views/administrator/pages/package/group/add.blade.php
+++ b/resources/views/administrator/pages/package/group/add.blade.php
@@ -1,73 +1,96 @@
-@extends("admin.main")
-@section("content")
-@if(auth()->guard('admins')->user()->can("add package module"))
-    <div class="card card-outline card-primary">
-        <form action="{{ route('package.group.store') }}" method="post">
-            @csrf
-            <div class="card-body">
-                <div class="row">
-                    <div class="col">
-                        {{--Name--}}
-                        <div class="row form-group align-items-center mb-0">
-                            <label for="name" class="col-md-3 text-right">Group Name</label>
-                            <div class="col-md-9 p-1 bg-customer">
-                                <input type="text" id="name" name="name" placeholder="" value="" class="form-control">
+@extends('administrator.layout.master')
+@push('plugin-styles')
+    <link href="{{ asset('build/plugins/select2/select2.min.css') }}" rel="stylesheet" />
+@endpush
+
+@php
+    use App\Enums\Status;
+@endphp
+
+@section('breadcrumb')
+    @php
+        $breadcrumbItems = [
+            ['label' => 'Modules'],
+            ['label' => 'Package vCenter'],
+            ['label' => 'OS Group'],
+            ['label' => 'Add New', 'active' => true],
+        ];
+    @endphp
+    <x-breabcrumb :items="$breadcrumbItems" />
+@endsection
+@section('content')
+    @if (auth()->guard('admins')->user()->can('add package module'))
+        <div class="card card-outline card-primary">
+            <form action="{{ route('package.group.store') }}" method="post">
+                @csrf
+                <div class="card-body">
+                    <div class="row">
+                        <div class="col">
+                            {{-- Name --}}
+                            <div class="row form-group align-items-center mb-0">
+                                <label for="name" class="col-md-3 text-right">Group Name</label>
+                                <div class="col-md-9 bg-customer p-1">
+                                    <input type="text" id="name" name="name" placeholder="" value=""
+                                        class="form-control">
+                                </div>
                             </div>
-                        </div>
-                        {{--Thumbnail--}}
-                        <div class="row form-group align-items-center mb-0">
-                            <label for="thumbnail" class="col-md-3 text-right">Thumbnail</label>
-                            <div class="col-md-9">
-                                <div class="row">
-                                    <div class="col-md-8 bg-customer">
-                                        <input type="text" data-choise="upload-images" name="thumbnail"
-                                            value="{{ old('thumbnail') }}" class="form-control" placeholder="Chọn File">
-                                    </div>
-                                    <div class="col-md-4">
-                                        <button type="button" class="btn btn-outline-secondary btn-open-thumb">
-                                            <i class="fas fa-folder-open"></i> Chọn hình ảnh
-                                        </button>
+                            {{-- Thumbnail --}}
+                            <div class="row form-group align-items-center mb-0">
+                                <label for="thumbnail" class="col-md-3 text-right">Thumbnail</label>
+                                <div class="col-md-9 p-1">
+                                    <div class="row">
+                                        <div class="col-md-8 bg-customer">
+                                            <input type="text" data-choise="upload-images" name="thumbnail"
+                                                value="{{ old('thumbnail') }}" class="form-control" placeholder="Chọn File">
+                                        </div>
+                                        <div class="col-md-4">
+                                            <button type="button" class="btn btn-outline-secondary btn-open-thumb">
+                                                <i class="fas fa-folder-open"></i> Chọn hình ảnh
+                                            </button>
+                                        </div>
                                     </div>
                                 </div>
                             </div>
-                        </div>
 
-                        <x-module.v-center :model="null" />
-                        <x-module.datacenter :model="null" />
-                        <x-module.host :model="null" />
-                        {{--Status--}}
-                        <div class="row form-group align-items-center mb-0">
-                            <label for="status" class="col-md-3 text-right">Status</label>
-                            <div class="col-md-9 bg-customer">
-                                <select class="custom-select" id="status" name="status">
-                                    <option value="1" @selected(old('status') === 1)>Active</option>
-                                    <option value="0" @selected(old('status') === 0)>No Active</option>
-                                </select>
+                            <x-module.v-center :model="null" />
+                            <x-module.datacenter :model="null" />
+                            <x-module.host :model="null" />
+                            {{-- Status --}}
+                            <div class="row form-group align-items-center mb-0">
+                                <label for="status" class="col-md-3 text-right">Status</label>
+                                <div class="col-md-9 p-1 bg-customer">
+                                    <select class="custom-select select2" id="status" name="status">
+                                        @foreach (Status::getOptions() as $value => $label)
+                                            <option value="{{ $value }}">
+                                                {{ $label }}
+                                            </option>
+                                        @endforeach
+                                    </select>
+                                </div>
                             </div>
                         </div>
                     </div>
                 </div>
-            </div>
-            <div class="card-footer">
-                <a href="{{ route('package.group.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 Package
-            management department</h5>
-    </div>
-@endif
+                <div class="card-footer">
+                    <a href="{{ route('package.group.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 Package
+                management department</h5>
+        </div>
+    @endif
 @endsection
 @push('scripts')
     <script type="text/javascript">
-        $('.btn-open-thumb').click(function () {
+        $('.btn-open-thumb').click(function() {
             CKFinder.popup({
                 chooseFiles: true,
-                onInit: function (finder) {
-                    finder.on('files:choose', function (evt) {
+                onInit: function(finder) {
+                    finder.on('files:choose', function(evt) {
                         let img = $('input[name="thumbnail"]');
                         if (img.length) {
                             img.val(evt.data.files.first().getUrl())
@@ -76,6 +99,20 @@
                     });
                 }
             });
-        })
+        });
+        // Initialize Select2
+        $(document).ready(function() {
+            $('.select2').select2({
+                theme: 'bootstrap4',
+                width: '100%'
+            });
+        });
     </script>
-@endpush
\ No newline at end of file
+@endpush
+
+@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
diff --git a/resources/views/administrator/pages/package/group/edit.blade.php b/resources/views/administrator/pages/package/group/edit.blade.php
index 55647b4..b54a3d8 100644
--- a/resources/views/administrator/pages/package/group/edit.blade.php
+++ b/resources/views/administrator/pages/package/group/edit.blade.php
@@ -1,74 +1,97 @@
-@extends("admin.main")
-@section("content")
-@if(auth()->guard('admins')->user()->can("add package module"))
-    <div class="card card-outline card-primary">
-        <form action="{{ route('package.group.update',['id' => $group->id]) }}" method="post">
-            @csrf
-            @method('put')
-            <div class="card-body">
-                <div class="row">
-                    <div class="col">
-                        {{--Name--}}
-                        <div class="row form-group align-items-center mb-0">
-                            <label for="name" class="col-md-3 text-right">Group Name</label>
-                            <div class="col-md-9 p-1 bg-customer">
-                                <input type="text" id="name" name="name" placeholder="" value="{{$group->name}}" class="form-control">
+@extends('administrator.layout.master')
+@push('plugin-styles')
+    <link href="{{ asset('build/plugins/select2/select2.min.css') }}" rel="stylesheet" />
+@endpush
+
+@php
+    use App\Enums\Status;
+@endphp
+
+@section('breadcrumb')
+    @php
+        $breadcrumbItems = [
+            ['label' => 'Modules'],
+            ['label' => 'Package vCenter'],
+            ['label' => 'OS Group', 'active' => true],
+        ];
+    @endphp
+    <x-breabcrumb :items="$breadcrumbItems" />
+@endsection
+@section('content')
+    @if (auth()->guard('admins')->user()->can('add package module'))
+        <div class="card card-outline card-primary">
+            <form action="{{ route('package.group.update', ['id' => $group->id]) }}" method="post">
+                @csrf
+                @method('put')
+                <div class="card-body">
+                    <div class="row">
+                        <div class="col">
+                            {{-- Name --}}
+                            <div class="row form-group align-items-center mb-0">
+                                <label for="name" class="col-md-3 text-right">Group Name</label>
+                                <div class="col-md-9 bg-customer p-1">
+                                    <input type="text" id="name" name="name" placeholder=""
+                                        value="{{ $group->name }}" class="form-control">
+                                </div>
                             </div>
-                        </div>
-                        {{--Thumbnail--}}
-                        <div class="row form-group align-items-center mb-0">
-                            <label for="thumbnail" class="col-md-3 text-right">Thumbnail</label>
-                            <div class="col-md-9">
-                                <div class="row">
-                                    <div class="col-md-8 bg-customer">
-                                        <input type="text" data-choise="upload-images" name="thumbnail"
-                                            value="{{$group->thumbnail ?? old('thumbnail')}}" class="form-control" placeholder="Chọn File">
-                                    </div>
-                                    <div class="col-md-4">
-                                        <button type="button" class="btn btn-outline-secondary btn-open-thumb">
-                                            <i class="fas fa-folder-open"></i> Chọn hình ảnh
-                                        </button>
+                            {{-- Thumbnail --}}
+                            <div class="row form-group align-items-center mb-0">
+                                <label for="thumbnail" class="col-md-3 text-right">Thumbnail</label>
+                                <div class="col-md-9 p-1">
+                                    <div class="row">
+                                        <div class="col-md-8 bg-customer">
+                                            <input type="text" data-choise="upload-images" name="thumbnail"
+                                                value="{{ $group->thumbnail ?? old('thumbnail') }}" class="form-control"
+                                                placeholder="Chọn File">
+                                        </div>
+                                        <div class="col-md-4">
+                                            <button type="button" class="btn btn-outline-secondary btn-open-thumb">
+                                                <i class="fas fa-folder-open"></i> Chọn hình ảnh
+                                            </button>
+                                        </div>
                                     </div>
                                 </div>
                             </div>
-                        </div>
 
-                        <x-module.v-center :model="$group->host->datacenter" />
-                        <x-module.datacenter :model="$group->host" />
-                        <x-module.host :model="$group" />
-                        {{--Status--}}
-                        <div class="row form-group align-items-center mb-0">
-                            <label for="status" class="col-md-3 text-right">Status</label>
-                            <div class="col-md-9 bg-customer">
-                                <select class="custom-select" id="status" name="status">
-                                    <option value="1" @selected($group->status === 1)>Active</option>
-                                    <option value="0" @selected($group->status === 0)>No Active</option>
-                                </select>
+                            <x-module.v-center :model="$group->host->datacenter" />
+                            <x-module.datacenter :model="$group->host" />
+                            <x-module.host :model="$group" />
+                            {{-- Status --}}
+                            <div class="row form-group align-items-center mb-0">
+                                <label for="status" class="col-md-3 text-right">Status</label>
+                                <div class="col-md-9 bg-customer p-1">
+                                    <select class="form-control select2" id="status" name="status">
+                                        @foreach(Status::getOptions() as $value => $label)
+                                            <option value="{{ $value }}" @selected($group->status === $value)>
+                                                {{ $label }}
+                                            </option>
+                                        @endforeach
+                                    </select>
+                                </div>
                             </div>
                         </div>
                     </div>
                 </div>
-            </div>
-            <div class="card-footer">
-                <a href="{{ route('package.group.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 Package
-            management department</h5>
-    </div>
-@endif
+                <div class="card-footer">
+                    <a href="{{ route('package.group.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 Package
+                management department</h5>
+        </div>
+    @endif
 @endsection
 @push('scripts')
     <script type="text/javascript">
-        $('.btn-open-thumb').click(function () {
+        $('.btn-open-thumb').click(function() {
             CKFinder.popup({
                 chooseFiles: true,
-                onInit: function (finder) {
-                    finder.on('files:choose', function (evt) {
+                onInit: function(finder) {
+                    finder.on('files:choose', function(evt) {
                         let img = $('input[name="thumbnail"]');
                         if (img.length) {
                             img.val(evt.data.files.first().getUrl())
@@ -77,6 +100,20 @@
                     });
                 }
             });
-        })
+        });
+
+        // Initialize Select2
+        $(document).ready(function() {
+            $('.select2').select2({
+                theme: 'bootstrap4',
+                width: '100%'
+            });
+        });
     </script>
+@endpush
+@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/group/index.blade.php b/resources/views/administrator/pages/package/group/index.blade.php
index 294fa96..3a49cbb 100644
--- a/resources/views/administrator/pages/package/group/index.blade.php
+++ b/resources/views/administrator/pages/package/group/index.blade.php
@@ -8,7 +8,7 @@
         $breadcrumbItems = [
             ['label' => 'Modules'],
             ['label' => 'Package vCenter'],
-            ['label' => 'Datacenter', 'active' => true],
+            ['label' => 'OS Group', 'active' => true],
         ];
     @endphp
     <x-breabcrumb :items="$breadcrumbItems" />
diff --git a/resources/views/components/module/host.blade.php b/resources/views/components/module/host.blade.php
index b6e1942..e7f8108 100644
--- a/resources/views/components/module/host.blade.php
+++ b/resources/views/components/module/host.blade.php
@@ -22,8 +22,10 @@ $selectedHostId = old('module_host_id') ?? ($model?->module_host_id ?? ($model?-
             }
             window.hostComponentInitialized = true;
 
-            // Initialize Select2
-            initSelect2();
+            // Initialize Select2 using global function
+            if (typeof window.initSelect2 === 'function') {
+                window.initSelect2();
+            }
 
             const $datacenter = $('.datacenter_id');
             const $host = $('.host_id');
diff --git a/resources/views/components/module/os.blade.php b/resources/views/components/module/os.blade.php
index 4c923ae..d33a7c3 100644
--- a/resources/views/components/module/os.blade.php
+++ b/resources/views/components/module/os.blade.php
@@ -30,8 +30,10 @@ $selectedOsGroupId = old('os_group_id') ?? ($model?->os?->os_group_id ?? null);
             }
             window.osComponentInitialized = true;
 
-            // Initialize Select2
-            initSelect2();
+            // Initialize Select2 using global function
+            if (typeof window.initSelect2 === 'function') {
+                window.initSelect2();
+            }
             
             const $host = $('.host_id');
             const $osGroup = $('.os_group_id');
diff --git a/resources/views/livewire/module/vcenter.blade.php b/resources/views/livewire/module/vcenter.blade.php
index 47374c7..b2177a1 100644
--- a/resources/views/livewire/module/vcenter.blade.php
+++ b/resources/views/livewire/module/vcenter.blade.php
@@ -21,7 +21,10 @@
 @push('scripts')
     <script>
         $(document).ready(function () {
-            initSelect2();
+            // Initialize Select2 using global function
+            if (typeof window.initSelect2 === 'function') {
+                window.initSelect2();
+            }
             const $vcenter = $('#vcenter_id');
             const $datacenter = $('#datacenter_id');
             const $host = $('#host_id');