diff --git a/app/Http/Controllers/admin/package/OsVersion.php b/app/Http/Controllers/admin/package/OsVersion.php
index 8013224..fc29410 100644
--- a/app/Http/Controllers/admin/package/OsVersion.php
+++ b/app/Http/Controllers/admin/package/OsVersion.php
@@ -15,6 +15,7 @@ use App\Repositories\Os\OsRepositoryInterface;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\DB;
 use Illuminate\Support\Facades\Validator;
+use Yajra\DataTables\Facades\DataTables;
 
 class OsVersion extends Controller
 {
@@ -39,10 +40,10 @@ class OsVersion extends Controller
     public function store(OsVersionRequest $request)
     {
         $validatedData = $request->validated();
-        
+
         // Remove unnecessary fields
         unset($validatedData['vcenter_id'], $validatedData['module_datacenter_id']);
-        
+
         DB::beginTransaction();
         try {
             $this->osRepository->create($validatedData);
@@ -55,14 +56,11 @@ class OsVersion extends Controller
     }
     public function edit(int $id = 0)
     {
-        
-
         $version = $this->osRepository->findWithRelationships($id, ['osGroup.host.datacenter.vCenter']);
         if (! $version) {
             return back()->withErrors('Can\'t find version os by ID #' . $id);
         }
 
-
         $title = "Edit version OS";
 
         return view('administrator.pages.package.version.edit', compact('title', 'version'));
@@ -73,12 +71,12 @@ class OsVersion extends Controller
         if (! $version) {
             return back()->withErrors('Can\'t find version os by ID #' . $id);
         }
-        
+
         $validatedData = $request->validated();
-        
+
         // Remove unnecessary fields
         unset($validatedData['vcenter_id'], $validatedData['module_datacenter_id']);
-        
+
         DB::beginTransaction();
         try {
             $this->osRepository->update($id, $validatedData);
@@ -106,4 +104,36 @@ class OsVersion extends Controller
 
         return back()->with('success', 'Delete success');
     }
+
+    public function datatable(Request $request)
+    {
+        $query = $this->osRepository->filter(
+            [],
+            ['osGroup'],
+            [],
+            ['*'],
+            true
+        );
+
+        return DataTables::eloquent($query)
+            ->editColumn('os_group', function ($d) {
+                return $d->osGroup ? $d->osGroup->name . ' - ' . $d->osGroup->host->name : '';
+            })
+            ->editColumn('status', function ($d) {
+                return $d->getStatus();
+            })
+            ->addColumn('action', function ($d) {
+                return '<a href="' . route('package.version.edit', $d->id) . '" 
+                    class="btn btn-primary btn-sm">
+                    Edit
+                </a>';
+            })
+            ->filterColumn('host', function ($query, $keyword) {
+                $query->whereHas('host', function ($q) use ($keyword) {
+                    $q->where('host', 'like', "%{$keyword}%");
+                });
+            })
+            ->rawColumns(['action', 'status'])
+            ->make(true);
+    }
 }
diff --git a/app/Repositories/Os/OsCachedRepository.php b/app/Repositories/Os/OsCachedRepository.php
index 4d1d45a..031d37a 100644
--- a/app/Repositories/Os/OsCachedRepository.php
+++ b/app/Repositories/Os/OsCachedRepository.php
@@ -15,19 +15,32 @@ class OsCachedRepository extends BaseCachedRepository implements OsRepositoryInt
     {
         return $this->osRepository->getModel();
     }
-    public function filter(array $data = [], array $relationships = [], array $withCount = [], array $select = ['*'])
-    {
+    public function filter(
+        array $data = [],
+        array $relationships = [],
+        array $withCount = [],
+        array $select = ['*'],
+        bool $returnQuery = false
+    ) {
+        if (
+            $returnQuery ||
+            !empty($data['paginate'])
+        ) {
+            return $this->osRepository
+                ->filter($data, $relationships, $withCount, $select, $returnQuery);
+        }
+
         $cacheKey = $this->getCacheKey(md5(json_encode([
-            'filterItem' => [
-                'data' => $data,
-                'relationships' => $relationships,
-                'select' => $select,
-                'withCount' => $withCount
-            ]
+            'filter' => compact('data', 'relationships', 'withCount', 'select')
         ])));
-        return Cache::remember($cacheKey, $this->cacheTime, function () use ($data, $relationships, $select, $withCount) {
-            return $this->osRepository->filter($data, $relationships, $withCount, $select);
-        });
+
+        return Cache::remember(
+            $cacheKey,
+            $this->cacheTime,
+            fn() =>
+            $this->osRepository
+                ->filter($data, $relationships, $withCount, $select, $returnQuery)
+        );
     }
     public function findWithRelationships(int $id = 0, array $relationships = [],array $withCount = [], array $withSum = [])
     {
diff --git a/app/Repositories/Os/OsRepository.php b/app/Repositories/Os/OsRepository.php
index 97e18af..f9fb884 100644
--- a/app/Repositories/Os/OsRepository.php
+++ b/app/Repositories/Os/OsRepository.php
@@ -11,34 +11,36 @@ class OsRepository extends BaseRepository implements OsRepositoryInterface
     {
         return Os::class;
     }
-    public function filter(array $data = [], array $relationships = [], array $withCount = [], array $select = ['*'])
-    {
-        $model = $this->model->with($relationships)->select($select);
-        
-        // Apply filters from $data
-        if (isset($data['os_id'])) {
-            $model = $model->where('os_group_id', $data['os_id']);
+    public function filter(
+        array $data = [],
+        array $relationships = [],
+        array $withCount = [],
+        array $select = ['*'],
+        bool $returnQuery = false
+    ) {
+        $query = $this->model
+            ->select($select)
+            ->with($relationships);
+
+        if (!empty($data['module_host_id'])) {
+            $query->where('module_host_id', $data['module_host_id']);
         }
-        
-        if (isset($data['os_group_id'])) {
-            $model = $model->where('os_group_id', $data['os_group_id']);
+
+        if (!empty($withCount)) {
+            $query->withCount($withCount);
         }
-        
-        if (isset($data['module_host_id'])) {
-            $model = $model->where('module_host_id', $data['module_host_id']);
+
+        if ($returnQuery) {
+            return $query;
         }
-        
-        if (isset($data['status'])) {
-            $model = $model->where('status', $data['status']);
+
+        if (!empty($data['paginate'])) {
+            return $query->paginate(
+                $data['per_page'] ?? 15
+            );
         }
-    
-        if (count($withCount) > 0) {
-            $model = $model->withCount($withCount);
-        }
-        if(isset($data['page'])) {
-            return $model->paginate(15);
-        }
-        return $model->get();
+
+        return $query->get();
     }
     public function findWithRelationships(int $id = 0, array $relationships = [], array $withCount = [], array $withSum = [])
     {
diff --git a/app/Repositories/Os/OsRepositoryInterface.php b/app/Repositories/Os/OsRepositoryInterface.php
index d2faf81..f957fc5 100644
--- a/app/Repositories/Os/OsRepositoryInterface.php
+++ b/app/Repositories/Os/OsRepositoryInterface.php
@@ -5,7 +5,13 @@ namespace App\Repositories\Os;
 use App\Repositories\BaseRepositoryInterface;
 
 interface OsRepositoryInterface extends BaseRepositoryInterface {
-    public function filter(array $data = [],array $relationships = [],array $withCount = [],array $select = ['*']);
+    public function filter(
+        array $data = [],
+        array $relationships = [],
+        array $withCount = [],
+        array $select = ['*'],
+        bool $returnQuery = false
+    );
     public function findWithRelationships(int $id = 0, array $relationships = [],array $withCount = [], array $withSum = []);
 
 }
\ No newline at end of file
diff --git a/app/View/Components/Breabcrumb.php b/app/View/Components/AdminBreadcrumb.php
similarity index 80%
rename from app/View/Components/Breabcrumb.php
rename to app/View/Components/AdminBreadcrumb.php
index da186b0..0853bff 100644
--- a/app/View/Components/Breabcrumb.php
+++ b/app/View/Components/AdminBreadcrumb.php
@@ -6,7 +6,7 @@ use Closure;
 use Illuminate\Contracts\View\View;
 use Illuminate\View\Component;
 
-class Breabcrumb extends Component
+class AdminBreadcrumb extends Component
 {
     /**
      * Create a new component instance.
@@ -21,6 +21,6 @@ class Breabcrumb extends Component
      */
     public function render(): View|Closure|string
     {
-        return view('components.breabcrumb');
+        return view('components.admin-breadcrumb');
     }
 }
diff --git a/database/migrations/2024_02_02_395629_os.php b/database/migrations/2024_02_02_395629_os.php
index fe36563..5cc5643 100644
--- a/database/migrations/2024_02_02_395629_os.php
+++ b/database/migrations/2024_02_02_395629_os.php
@@ -13,12 +13,10 @@ return new class extends Migration {
     public function up()
     {
         Schema::create('os', function (Blueprint $table) {
-            $table->id()->autoIncrement();
+            $table->id();
             $table->string('version', 100)->nullable();
-            $table->string('os_id', 100)->nullable();
-            $table->integer('os_group_id')->index()->default(0);
+            $table->foreignId('os_group_id')->constrained('os_group')->index();
             $table->string('template_id')->nullable();
-            $table->integer('module_host_id')->index()->default(0);
             $table->tinyInteger('status')->default(1);
             $table->timestamps();
         });
diff --git a/resources/views/administrator/pages/package/datacenter/add.blade.php b/resources/views/administrator/pages/package/datacenter/add.blade.php
index d65362f..9532b70 100644
--- a/resources/views/administrator/pages/package/datacenter/add.blade.php
+++ b/resources/views/administrator/pages/package/datacenter/add.blade.php
@@ -10,7 +10,7 @@
             ['label' => 'Datacenter', 'active' => true],
         ];
     @endphp
-    <x-breabcrumb :items="$breadcrumbItems" />
+    <x-admin-breadcrumb :items="$breadcrumbItems" />
 @endsection
 @section("content")
     @if(auth()->guard('admins')->user()->can("add module vcenter"))
diff --git a/resources/views/administrator/pages/package/datacenter/edit.blade.php b/resources/views/administrator/pages/package/datacenter/edit.blade.php
index f0a67d9..9d69090 100644
--- a/resources/views/administrator/pages/package/datacenter/edit.blade.php
+++ b/resources/views/administrator/pages/package/datacenter/edit.blade.php
@@ -10,7 +10,7 @@
             ['label' => 'Datacenter', 'active' => true],
         ];
     @endphp
-    <x-breabcrumb :items="$breadcrumbItems" />
+    <x-admin-breadcrumb :items="$breadcrumbItems" />
 @endsection
 @section("content")
     @if(auth()->guard('admins')->user()->can("add module vcenter"))
diff --git a/resources/views/administrator/pages/package/datacenter/index.blade.php b/resources/views/administrator/pages/package/datacenter/index.blade.php
index f841fd5..6ed5d75 100644
--- a/resources/views/administrator/pages/package/datacenter/index.blade.php
+++ b/resources/views/administrator/pages/package/datacenter/index.blade.php
@@ -11,29 +11,29 @@
             ['label' => 'Datacenter', 'active' => true],
         ];
     @endphp
-    <x-breabcrumb :items="$breadcrumbItems" />
+    <x-admin-breadcrumb :items="$breadcrumbItems" />
 @endsection
 @section('content')
-    @if(auth()->guard('admins')->user()->can("manager package module"))
+    @if (auth()->guard('admins')->user()->can('manager package module'))
         <div class="card card-primary card-outline">
             <div class="card-header">
-                @include("administrator.pages.block.Sync.Datacenter")
-                    </div>
-                    <div class="card-body">
-                        <x-datatable id="datacenterTable" ajax="{{ route('package.datacenter.datatable') }}" :columns="[
+                @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']
+                    ['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')
@@ -41,4 +41,4 @@
     <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
+@endpush
diff --git a/resources/views/administrator/pages/package/datastore/add.blade.php b/resources/views/administrator/pages/package/datastore/add.blade.php
index dded2fc..3042484 100644
--- a/resources/views/administrator/pages/package/datastore/add.blade.php
+++ b/resources/views/administrator/pages/package/datastore/add.blade.php
@@ -11,7 +11,7 @@
             ['label' => 'Datastore', 'active' => true],
         ];
     @endphp
-    <x-breabcrumb :items="$breadcrumbItems" />
+    <x-admin-breadcrumb :items="$breadcrumbItems" />
 @endsection
 @section('content')
     @if (auth()->guard('admins')->user()->can('add module vcenter'))
diff --git a/resources/views/administrator/pages/package/datastore/edit.blade.php b/resources/views/administrator/pages/package/datastore/edit.blade.php
index efc7349..cc8c7e8 100644
--- a/resources/views/administrator/pages/package/datastore/edit.blade.php
+++ b/resources/views/administrator/pages/package/datastore/edit.blade.php
@@ -11,7 +11,7 @@
             ['label' => 'Datastore', 'active' => true],
         ];
     @endphp
-    <x-breabcrumb :items="$breadcrumbItems" />
+    <x-admin-breadcrumb :items="$breadcrumbItems" />
 @endsection
 @section("content")
     @if(auth()->guard('admins')->user()->can("add module vcenter"))
diff --git a/resources/views/administrator/pages/package/datastore/index.blade.php b/resources/views/administrator/pages/package/datastore/index.blade.php
index bc06c3f..1034be1 100644
--- a/resources/views/administrator/pages/package/datastore/index.blade.php
+++ b/resources/views/administrator/pages/package/datastore/index.blade.php
@@ -12,7 +12,7 @@
             ['label' => 'Datastore', 'active' => true],
         ];
     @endphp
-    <x-breabcrumb :items="$breadcrumbItems" />
+    <x-admin-breadcrumb :items="$breadcrumbItems" />
 @endsection
 @section('content')
     @if(auth()->guard('admins')->user()->can("manager package module"))
diff --git a/resources/views/administrator/pages/package/folder/edit.blade.php b/resources/views/administrator/pages/package/folder/edit.blade.php
index 624a34b..d98d83c 100644
--- a/resources/views/administrator/pages/package/folder/edit.blade.php
+++ b/resources/views/administrator/pages/package/folder/edit.blade.php
@@ -11,7 +11,7 @@
             ['label' => 'Folder', 'active' => true],
         ];
     @endphp
-    <x-breabcrumb :items="$breadcrumbItems" />
+    <x-admin-breadcrumb :items="$breadcrumbItems" />
 @endsection
 @section("content")
     @if(auth()->guard('admins')->user()->can("add module vcenter"))
diff --git a/resources/views/administrator/pages/package/folder/index.blade.php b/resources/views/administrator/pages/package/folder/index.blade.php
index 355524d..d5c9ff5 100644
--- a/resources/views/administrator/pages/package/folder/index.blade.php
+++ b/resources/views/administrator/pages/package/folder/index.blade.php
@@ -11,7 +11,7 @@
             ['label' => 'Folder', 'active' => true],
         ];
     @endphp
-    <x-breabcrumb :items="$breadcrumbItems" />
+    <x-admin-breadcrumb :items="$breadcrumbItems" />
 @endsection
 @section('content')
     @if(auth()->guard('admins')->user()->can("manager package module"))
diff --git a/resources/views/administrator/pages/package/group/add.blade.php b/resources/views/administrator/pages/package/group/add.blade.php
index 2b8de8c..3f90976 100644
--- a/resources/views/administrator/pages/package/group/add.blade.php
+++ b/resources/views/administrator/pages/package/group/add.blade.php
@@ -16,7 +16,7 @@
             ['label' => 'Add New', 'active' => true],
         ];
     @endphp
-    <x-breabcrumb :items="$breadcrumbItems" />
+    <x-admin-breadcrumb :items="$breadcrumbItems" />
 @endsection
 @section('content')
     @if (auth()->guard('admins')->user()->can('add package module'))
diff --git a/resources/views/administrator/pages/package/group/edit.blade.php b/resources/views/administrator/pages/package/group/edit.blade.php
index b54a3d8..7ce17e1 100644
--- a/resources/views/administrator/pages/package/group/edit.blade.php
+++ b/resources/views/administrator/pages/package/group/edit.blade.php
@@ -15,7 +15,7 @@
             ['label' => 'OS Group', 'active' => true],
         ];
     @endphp
-    <x-breabcrumb :items="$breadcrumbItems" />
+    <x-admin-breadcrumb :items="$breadcrumbItems" />
 @endsection
 @section('content')
     @if (auth()->guard('admins')->user()->can('add package module'))
diff --git a/resources/views/administrator/pages/package/group/index.blade.php b/resources/views/administrator/pages/package/group/index.blade.php
index 3a49cbb..c292a99 100644
--- a/resources/views/administrator/pages/package/group/index.blade.php
+++ b/resources/views/administrator/pages/package/group/index.blade.php
@@ -11,7 +11,7 @@
             ['label' => 'OS Group', 'active' => true],
         ];
     @endphp
-    <x-breabcrumb :items="$breadcrumbItems" />
+    <x-admin-breadcrumb :items="$breadcrumbItems" />
 @endsection
 @section('content')
     @if (auth()->guard('admins')->user()->can('manager package module'))
diff --git a/resources/views/administrator/pages/package/host/add.blade.php b/resources/views/administrator/pages/package/host/add.blade.php
index 9af4e6f..cb7f276 100644
--- a/resources/views/administrator/pages/package/host/add.blade.php
+++ b/resources/views/administrator/pages/package/host/add.blade.php
@@ -11,7 +11,7 @@
             ['label' => 'Host', 'active' => true],
         ];
     @endphp
-    <x-breabcrumb :items="$breadcrumbItems" />
+    <x-admin-breadcrumb :items="$breadcrumbItems" />
 @endsection
 @section("content")
     @if(auth()->guard('admins')->user()->can("add module vcenter"))
diff --git a/resources/views/administrator/pages/package/host/edit.blade.php b/resources/views/administrator/pages/package/host/edit.blade.php
index 94375d8..6c495a3 100644
--- a/resources/views/administrator/pages/package/host/edit.blade.php
+++ b/resources/views/administrator/pages/package/host/edit.blade.php
@@ -11,7 +11,7 @@
             ['label' => 'Host', 'active' => true],
         ];
     @endphp
-    <x-breabcrumb :items="$breadcrumbItems" />
+    <x-admin-breadcrumb :items="$breadcrumbItems" />
 @endsection
 @section("content")
     @if(auth()->guard('admins')->user()->can("add module vcenter"))
diff --git a/resources/views/administrator/pages/package/host/index.blade.php b/resources/views/administrator/pages/package/host/index.blade.php
index d52732c..f1dc219 100644
--- a/resources/views/administrator/pages/package/host/index.blade.php
+++ b/resources/views/administrator/pages/package/host/index.blade.php
@@ -11,7 +11,7 @@
             ['label' => 'Host', 'active' => true],
         ];
     @endphp
-    <x-breabcrumb :items="$breadcrumbItems" />
+    <x-admin-breadcrumb :items="$breadcrumbItems" />
 @endsection
 @section('content')
     @if(auth()->guard('admins')->user()->can("manager package module"))
diff --git a/resources/views/administrator/pages/package/network/add.blade.php b/resources/views/administrator/pages/package/network/add.blade.php
index 6c51636..087c03f 100644
--- a/resources/views/administrator/pages/package/network/add.blade.php
+++ b/resources/views/administrator/pages/package/network/add.blade.php
@@ -11,7 +11,7 @@
             ['label' => 'Datacenter', 'active' => true],
         ];
     @endphp
-    <x-breabcrumb :items="$breadcrumbItems" />
+    <x-admin-breadcrumb :items="$breadcrumbItems" />
 @endsection
 @section("content")
     @if(auth()->guard('admins')->user()->can("add module vcenter"))
diff --git a/resources/views/administrator/pages/package/network/edit.blade.php b/resources/views/administrator/pages/package/network/edit.blade.php
index cdf0ae1..65936ea 100644
--- a/resources/views/administrator/pages/package/network/edit.blade.php
+++ b/resources/views/administrator/pages/package/network/edit.blade.php
@@ -11,7 +11,7 @@
             ['label' => 'Datacenter', 'active' => true],
         ];
     @endphp
-    <x-breabcrumb :items="$breadcrumbItems" />
+    <x-admin-breadcrumb :items="$breadcrumbItems" />
 @endsection
 @section("content")
     @if(auth()->guard('admins')->user()->can("add module vcenter"))
diff --git a/resources/views/administrator/pages/package/network/index.blade.php b/resources/views/administrator/pages/package/network/index.blade.php
index 2ba7a5e..f5c24a6 100644
--- a/resources/views/administrator/pages/package/network/index.blade.php
+++ b/resources/views/administrator/pages/package/network/index.blade.php
@@ -11,7 +11,7 @@
             ['label' => 'Datacenter', 'active' => true],
         ];
     @endphp
-    <x-breabcrumb :items="$breadcrumbItems" />
+    <x-admin-breadcrumb :items="$breadcrumbItems" />
 @endsection
 @section('content')
     @if(auth()->guard('admins')->user()->can("manager package module"))
diff --git a/resources/views/administrator/pages/package/version/add.blade.php b/resources/views/administrator/pages/package/version/add.blade.php
index b6184d7..8ffc7ab 100644
--- a/resources/views/administrator/pages/package/version/add.blade.php
+++ b/resources/views/administrator/pages/package/version/add.blade.php
@@ -1,4 +1,22 @@
-@extends('admin.main')
+@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 Version', 'active' => true],
+        ];
+    @endphp
+    <x-admin-breadcrumb :items="$breadcrumbItems" />
+@endsection
 @section('content')
     @if (auth()->guard('admins')->user()->can('add package module'))
         <div class="card card-outline card-primary">
@@ -20,7 +38,6 @@
                             <x-module.datacenter :model="null" />
                             <x-module.host :model="null" />
                             <x-module.os :model="null" />
-                            <x-module.os-server-version :model="null" />
 
                             <div class="row form-group align-items-center mb-0">
                                 <label for="version" class="col-md-3 text-right">Template</label>
@@ -32,9 +49,12 @@
                             <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" id="status" name="status">
-                                        <option value="1" @selected(old('status') === 1)>Active</option>
-                                        <option value="0" @selected(old('status') === 0)>No Active</option>
+                                    <select class="custom-select select2" id="status" name="status">
+                                        @foreach(Status::getOptions() as $value => $label)
+                                            <option value="{{ $value }}" @selected(old('status') == $value)>
+                                                {{ $label }}
+                                            </option>
+                                        @endforeach
                                     </select>
                                 </div>
                             </div>
@@ -54,3 +74,27 @@
         </div>
     @endif
 @endsection
+
+@push('scripts')
+    <script type="text/javascript">
+        $(document).ready(function() {
+            // Initialize Select2 using global function
+            if (typeof window.initSelect2 === 'function') {
+                window.initSelect2();
+            }
+            
+            // Initialize other Select2 elements
+            $('.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/version/edit.blade.php b/resources/views/administrator/pages/package/version/edit.blade.php
index 8a836b2..f039608 100644
--- a/resources/views/administrator/pages/package/version/edit.blade.php
+++ b/resources/views/administrator/pages/package/version/edit.blade.php
@@ -1,4 +1,18 @@
-@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-admin-breadcrumb :items="$breadcrumbItems" />
+@endsection
 @section('content')
     @if (auth()->guard('admins')->user()->can('add package module'))
         <div class="card card-outline card-primary">
@@ -54,3 +68,11 @@
         </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
diff --git a/resources/views/administrator/pages/package/version/index.blade.php b/resources/views/administrator/pages/package/version/index.blade.php
index c4ccbc7..8f31efb 100644
--- a/resources/views/administrator/pages/package/version/index.blade.php
+++ b/resources/views/administrator/pages/package/version/index.blade.php
@@ -1,7 +1,20 @@
-@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-admin-breadcrumb :items="$breadcrumbItems" />
+@endsection
 @section('content')
-    @if(auth()->guard('admins')->user()->can("manager package module"))
+    @if (auth()->guard('admins')->user()->can('manager package module'))
         <div class="card card-primary card-outline">
             <div class="card-header">
                 <a href="{{ route('package.version.create') }}" class="btn btn-outline-secondary">
@@ -9,73 +22,14 @@
                 </a>
             </div>
             <div class="card-body">
-                <table class="table table-invoice table-bordered">
-                    <thead>
-                    <tr>
-                        <th>
-                            <label>
-                                <input type="checkbox" name="check" class="check-all">
-                            </label>
-                        </th>
-                        <th>Version</th>
-                        <th>Group Name</th>
-                        <th>Host Location</th>
-                        <th>Status</th>
-                        <th style="width: 40px"></th>
-                        <th style="width: 40px"></th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                    @if(count($versions))
-                        @foreach($versions->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->version }}
-                                </td>
-                                <td class="text-center">
-                                    @isset($item->osGroup->name)
-                                        {{$item->osGroup->name}}
-                                    @endisset
-                                </td>
-                                <td class="text-center">
-                                    @isset($item->osGroup->host->name)
-                                        {{$item->osGroup->host->name}}
-                                    @endisset
-                                </td>
-                                <td class="text-center">
-                                    {!! $item->getStatus() !!}
-                                </td>
-                                <td class="text-center">
-                                    <a class="btn btn-warning btn-sm"
-                                       href="{{ route('package.version.edit',['id' => $item->id]) }}">
-                                        <i class="fas fa-user-edit"></i>
-                                    </a>
-                                </td>
-                                <td class="text-center">
-                                    <form method="post"
-                                          class="d-inline"
-                                          action="{{ route('package.version.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>
-                                </td>
-                            </tr>
-                        @endforeach
-                    @endif
-                    </tbody>
-                </table>
-            </div>
-            <div class="card-footer">
-                {{ $versions->withQueryString()->links() }}
+                <x-datatable id="osVerisionTable" ajax="{{ route('package.version.datatable') }}" :columns="[
+                    ['key' => 'version', 'label' => 'Version'],
+                    ['key' => 'os_group', 'label' => 'OS Group'],
+                    ['key' => 'status', 'label' => 'Status'],
+                    ['key' => 'action', 'label' => 'Action'],
+                ]" />
             </div>
+
         </div>
     @else
         <div class="alert alert-danger alert-dismissible">
@@ -84,3 +38,10 @@
         </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
diff --git a/resources/views/components/breabcrumb.blade.php b/resources/views/components/admin-breadcrumb.blade.php
similarity index 100%
rename from resources/views/components/breabcrumb.blade.php
rename to resources/views/components/admin-breadcrumb.blade.php
diff --git a/resources/views/components/breadcrumb.blade.php b/resources/views/components/breadcrumb.blade.php
new file mode 100644
index 0000000..9dffd8d
--- /dev/null
+++ b/resources/views/components/breadcrumb.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/routes/admin.php b/routes/admin.php
index 36549c1..48af6b8 100644
--- a/routes/admin.php
+++ b/routes/admin.php
@@ -305,6 +305,7 @@ Route::prefix('administrator')->group(function () {
                 Route::get('edit/{id}', 'edit')->name('edit');
                 Route::put('edit/{id}', 'update')->name('update');
                 Route::delete('remove-os-version/{id}', 'destroy')->name('destroy');
+                Route::get('datatable', 'datatable')->name('datatable');
             });
             Route::group([
                 'prefix' => 'ipaddress',