diff --git a/app/Http/Controllers/admin/product/ProductCategoryController.php b/app/Http/Controllers/admin/product/ProductCategoryController.php
index a75f01a..b0bf0aa 100644
--- a/app/Http/Controllers/admin/product/ProductCategoryController.php
+++ b/app/Http/Controllers/admin/product/ProductCategoryController.php
@@ -27,7 +27,10 @@ class ProductCategoryController extends Controller
 
     public function create()
     {
-        $categories = \App\Models\ProductCategories::all();
+        $categories = \App\Models\ProductCategories::with('children')
+            ->whereNull('parent_id')
+            ->orderBy('sort_order')
+            ->get();
         return view('administrator.pages.product.categories.create', compact('categories'));
     }
 
@@ -43,7 +46,11 @@ class ProductCategoryController extends Controller
         if (!$category) {
             return redirect()->route('products.group.index')->with('error', 'Category not found');
         }
-        $categories = \App\Models\ProductCategories::where('id', '!=', $id)->get();
+        $categories = \App\Models\ProductCategories::with('children')
+            ->whereNull('parent_id')
+            ->where('id', '!=', $id)
+            ->orderBy('sort_order')
+            ->get();
         return view('administrator.pages.product.categories.edit', compact('category', 'categories'));
     }
 
diff --git a/resources/views/administrator/pages/product/categories/create.blade.php b/resources/views/administrator/pages/product/categories/create.blade.php
index cf6e79f..cf57a1b 100644
--- a/resources/views/administrator/pages/product/categories/create.blade.php
+++ b/resources/views/administrator/pages/product/categories/create.blade.php
@@ -11,7 +11,7 @@
             ['label' => 'Product'],
             ['label' => 'Product / Services', 'url' => route('products.index')],
             ['label' => 'Product Categories', 'url' => route('products.group.index')],
-            ['label' => 'Add Product Group', 'active' => true],
+            ['label' => 'Create Category', 'active' => true],
         ];
     @endphp
     <x-admin-breadcrumb :items="$breadcrumbItems" />
@@ -39,51 +39,53 @@
         @csrf
         <div class="row">
             <div class="col-md-8">
-                <div class="card card-primary card-outline rounded-4 shadow-none">
+                <div class="card card-primary card-outline rounded-4 mb-3 shadow-none">
                     <div class="card-header">
                         <h5 class="card-title m-0">Basic Information</h5>
                     </div>
                     <div class="card-body">
                         <div class="form-group mb-3">
-                            <label for="name">Group Name <span class="text-danger">*</span></label>
-                            <input type="text" id="name" name="name" value="{{ old('name') }}" class="form-control" required
+                            <label for="name">Category Name <span class="text-danger">*</span></label>
+                            <input type="text" id="name" name="name" value="{{ old('name') }}"
+                                class="form-control @error('name') is-invalid @enderror" required
                                 placeholder="Enter category name">
+                            @error('name')
+                                <div class="invalid-feedback">{{ $message }}</div>
+                            @enderror
                         </div>
+                    </div>
+                </div>
 
-                        <div class="form-group mb-3">
-                            <label for="slug">Slug</label>
-                            <input type="text" id="slug" name="slug" value="{{ old('slug') }}" class="form-control"
-                                placeholder="auto-generated-if-empty">
-                        </div>
-
-                        <div class="form-group mb-3">
-                            <label for="parent_id">Parent Category</label>
-                            <select name="parent_id" id="parent_id" class="form-control select2">
-                                <option value="">-- Root --</option>
-                                @if(isset($categories))
-                                    @foreach($categories as $category)
-                                        <option value="{{ $category->id }}" {{ old('parent_id') == $category->id ? 'selected' : '' }}>
-                                            {{ $category->name }}
-                                        </option>
-                                    @endforeach
-                                @endif
-                            </select>
-                        </div>
+                <div class="card card-outline rounded-4 shadow-none">
+                    <div class="card-header">
+                        <h5 class="card-title m-0">Parent Category</h5>
+                    </div>
+                    <div class="card-body">
+                        @include('administrator.pages.product.categories.partials.category-tree', [
+                            'categories' => $categories,
+                            'selected' => old('parent_id'),
+                            'name' => 'parent_id',
+                        ])
+                        @error('parent_id')
+                            <div class="text-danger small mt-1">{{ $message }}</div>
+                        @enderror
                     </div>
                 </div>
             </div>
 
             <div class="col-md-4">
-                <div class="card card-secondary card-outline shadow-none rounded-4">
+                <div class="card card-secondary card-outline rounded-4 shadow-none">
                     <div class="card-header">
-                        <h5 class="card-title m-0">Classification</h5>
+                        <h5 class="card-title m-0">Settings</h5>
                     </div>
                     <div class="card-body">
                         <div class="form-group mb-3">
-                            <label for="is_active">Status</label>
+
+                            <label for="  is_active">Status</label>
                             <select name="is_active" id="is_active" class="form-control select2">
-                                @foreach(\App\Enums\Status::cases() as $status)
-                                    <option value="{{ $status->value }}" {{ old('is_active', \App\Enums\Status::ACTIVE->value) == $status->value ? 'selected' : '' }}>
+                                @foreach (\App\Enums\Status::cases() as $status)
+                                    <option value="{{ $status->value }}"
+                                        {{ old('is_active', \App\Enums\Status::ACTIVE->value) == $status->value ? 'selected' : '' }}>
                                         {{ $status->label() }}
                                     </option>
                                 @endforeach
@@ -92,20 +94,24 @@
 
                         <div class="form-group mb-3">
                             <label for="sort_order">Sort Order</label>
-                            <input type="number" name="sort_order" id="sort_order" class="form-control"
-                                value="{{ old('sort_order', 0) }}">
+                            <input type="number" name="sort_order" id="sort_order"
+                                class="form-control @error('sort_order') is-invalid @enderror"
+                                    value="{{ old('sort_order', 0) }}" min="0">
+                                    @error('sort_order')
+                                        <div class="invalid-feedback">{{ $message }}</div>
+                                    @enderror
+                            </div>
                         </div>
                     </div>
                 </div>
             </div>
-        </div>
 
-        <x-fixed-action-bar>
-            <x-button-crm type="button" variant="outline-info" size="sm" icon="arrow-left"
-                route="products.group.index">Back</x-button-crm>
-            <x-button-crm type="submit" variant="outline-primary" size="sm" icon="plus-circle">Create
-                Category</x-button-crm>
-        </x-fixed-action-bar>
+            <x-fixed-action-bar>
+                <x-button-crm type="button" variant="outline-info" size="sm" icon="arrow-left"
+                    route="products.group.index">Back</x-button-crm>
+                <x-button-crm type="submit" variant="outline-primary" size="sm" icon="plus-circle">Create
+                    Category</x-button-crm>
+            </x-fixed-action-bar>
     </form>
 @endsection
 
@@ -113,11 +119,7 @@
     @foreach (config('assets.datatable.js') as $datatable)
         <script src="{{ asset($datatable) }}"></script>
     @endforeach
-    <script>
-        $(document).ready(function () {
-            if ($(".select2").length) {
-                $(".select2").select2();
-            }
-        });
-    </script>
-@endpush
\ No newline at end of file
+@endpush
+@push('custom-scripts')
+    @include('administrator.pages.product.categories.partials.category-tree-scripts')
+@endpush
diff --git a/resources/views/administrator/pages/product/categories/edit.blade.php b/resources/views/administrator/pages/product/categories/edit.blade.php
index 48ed5d6..3bd0320 100644
--- a/resources/views/administrator/pages/product/categories/edit.blade.php
+++ b/resources/views/administrator/pages/product/categories/edit.blade.php
@@ -16,104 +16,111 @@
     @endphp
     <x-admin-breadcrumb :items="$breadcrumbItems" />
 @endsection
-    @section('tab')
-        @php
-            $tabs = [
-                [
-                    'label' => 'Product',
-                    'route' => 'products.index',
-                    'icon' => 'server',
-                ],
-                [
-                    'label' => 'Product Group',
-                    'route' => 'products.group.index',
-                    'icon' => 'server',
-                ],
-            ];
-        @endphp
-        <x-admin-tab :items="$tabs" />
-    @endsection
-    
-    @section('content')
-        <form action="{{ route('products.group.update', ['id' => $category->id]) }}" method="post">
-            @csrf
-            @method('PUT')
-            <div class="row">
-                <div class="col-md-8">
-                    <div class="card card-primary card-outline">
-                        <div class="card-header">
-                            <h5 class="card-title m-0">Basic Information</h5>
-                        </div>
-                        <div class="card-body">
-                            <div class="form-group mb-3">
-                                <label for="name">Group Name <span class="text-danger">*</span></label>
-                                <input type="text" id="name" name="name" value="{{ old('name', $category->name) }}"
-                                    class="form-control" required placeholder="Enter category name">
-                            </div>
+@section('tab')
+    @php
+        $tabs = [
+            [
+                'label' => 'Product',
+                'route' => 'products.index',
+                'icon' => 'server',
+            ],
+            [
+                'label' => 'Product Group',
+                'route' => 'products.group.index',
+                'icon' => 'server',
+            ],
+        ];
+    @endphp
+    <x-admin-tab :items="$tabs" />
+@endsection
 
-                            <div class="form-group mb-3">
-                                <label for="slug">Slug</label>
-                                <input type="text" id="slug" name="slug" value="{{ old('slug', $category->slug) }}"
-                                    class="form-control" placeholder="auto-generated-if-empty">
-                            </div>
-
-                            <div class="form-group mb-3">
-                                <label for="parent_id">Parent Category</label>
-                                <select name="parent_id" id="parent_id" class="form-control select2">
-                                    <option value="">-- Root --</option>
-                                    @if(isset($categories))
-                                        @foreach($categories as $cat)
-                                            <option value="{{ $cat->id }}" {{ old('parent_id', $category->parent_id) == $cat->id ? 'selected' : '' }}>{{ $cat->name }}</option>
-                                        @endforeach
-                                    @endif
-                                </select>
-                            </div>
+@section('content')
+    <form action="{{ route('products.group.update', ['id' => $category->id]) }}" method="post">
+        @csrf
+        @method('PUT')
+        <div class="row">
+            <div class="col-md-8">
+                <div class="card card-primary card-outline rounded-4 shadow-none">
+                    <div class="card-header">
+                        <h5 class="card-title m-0">Basic Information</h5>
+                    </div>
+                    <div class="card-body">
+                        <div class="form-group mb-3">
+                            <label for="name">Category Name <span class="text-danger">*</span></label>
+                            <input type="text" id="name" name="name" value="{{ old('name', $category->name) }}"
+                                class="form-control @error('name') is-invalid @enderror" required
+                                placeholder="Enter category name">
+                            @error('name')
+                                <div class="invalid-feedback">{{ $message }}</div>
+                            @enderror
                         </div>
                     </div>
                 </div>
 
-                <div class="col-md-4">
-                    <div class="card card-secondary card-outline">
-                        <div class="card-header">
-                            <h5 class="card-title m-0">Classification</h5>
-                        </div>
-                        <div class="card-body">
-                            <div class="form-group mb-3">
-                                <label for="is_active">Status</label>
-                                <select name="is_active" id="is_active" class="form-control select2">
-                                    @foreach(\App\Enums\Status::cases() as $status)
-                                        <option value="{{ $status->value }}" {{ old('is_active', $category->is_active) == $status->value ? 'selected' : '' }}>
-                                            {{ $status->label() }}
-                                        </option>
-                                    @endforeach
-                                   </select>
-                               </div>
-
-                               <div class="form-group mb-3">
-                                   <label for="sort_order">Sort Order</label>
-                                   <input type="number" name="sort_order" id="sort_order" class="form-control" value="{{ old('sort_order', $category->sort_order) }}">
-                               </div>
-                          </div>
-                     </div>
+                <div class="card card-outline rounded-4 shadow-none">
+                    <div class="card-header">
+                        <h5 class="card-title m-0">Parent Category</h5>
+                    </div>
+                    <div class="card-body">
+                        @include('administrator.pages.product.categories.partials.category-tree', [
+                            'categories' => $categories,
+                            'selected' => old('parent_id', $category->parent_id),
+                            'name' => 'parent_id',
+                            'exclude' => $category->id,
+                        ])
+                        @error('parent_id')
+                            <div class="text-danger small mt-1">{{ $message }}</div>
+                        @enderror
+                    </div>
                 </div>
             </div>
 
-            <x-fixed-action-bar>
-                <x-button-crm type="button" variant="secondary" size="sm" icon="arrow-left" route="products.group.index">Cancel</x-button-crm>
-                <x-button-crm type="submit" variant="primary" size="sm" icon="save">Update Category</x-button-crm>
-            </x-fixed-action-bar>
-        </form>
-    @endsection
+            <div class="col-md-4">
+                <div class="card card-secondary card-outline shadow-none rounded-4">
+                    <div class="card-header">
+                        <h5 class="card-title m-0">Settings</h5>
+                    </div>
+                    <div class="card-body">
+                        <div class="form-group mb-3">
+                            <label for="is_active">Status</label>
+                            <select name="is_active" id="is_active" class="form-control select2">
+                                @foreach(\App\Enums\Status::cases() as $status)
+                                    <option value="{{ $status->value }}" {{ old('is_active', $category->is_active) == $status->value ? 'selected' : '' }}>
+                                        {{ $status->label() }}
+                                    </option>
+                                @endforeach
+                            </select>
+                        </div>
+
+                        <div class="form-group mb-3">
+                            <label for="sort_order">Sort Order</label>
+                            <input type="number" name="sort_order" id="sort_order"
+                                class="form-control @error('sort_order') is-invalid @enderror"
+                                value="{{ old('sort_order', $category->sort_order) }}" min="0">
+                            @error('sort_order')
+                                <div class="invalid-feedback">{{ $message }}</div>
+                            @enderror
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <x-fixed-action-bar>
+            <x-button-crm type="button" variant="secondary" size="sm" icon="arrow-left"
+                route="products.group.index">Cancel</x-button-crm>
+            <x-button-crm type="submit" variant="primary" size="sm" icon="save">Update
+                Category</x-button-crm>
+        </x-fixed-action-bar>
+    </form>
+@endsection
 
 @push('plugin-scripts')
     @foreach (config('assets.datatable.js') as $datatable)
         <script src="{{ asset($datatable) }}"></script>
     @endforeach
-    <script>
-        $(document).ready(function() {
-            if ($(".select2").length) {
-                $(".select2").select2();
-            }
-        });
-    </script>
+@endpush
+
+@push('custom-scripts')
+    @include('administrator.pages.product.categories.partials.category-tree-scripts')
 @endpush
diff --git a/resources/views/administrator/pages/product/categories/partials/category-option.blade.php b/resources/views/administrator/pages/product/categories/partials/category-option.blade.php
new file mode 100644
index 0000000..1fcce81
--- /dev/null
+++ b/resources/views/administrator/pages/product/categories/partials/category-option.blade.php
@@ -0,0 +1,12 @@
+<option value="{{ $category->id }}" {{ $selected == $category->id ? 'selected' : '' }}>
+    {{ str_repeat('— ', $depth) }}{{ $category->name }}
+</option>
+@if($category->children->isNotEmpty())
+    @foreach($category->children as $child)
+        @include('administrator.pages.product.categories.partials.category-option', [
+            'category' => $child,
+            'depth' => $depth + 1,
+            'selected' => $selected,
+        ])
+    @endforeach
+@endif
diff --git a/resources/views/administrator/pages/product/categories/partials/category-tree-item.blade.php b/resources/views/administrator/pages/product/categories/partials/category-tree-item.blade.php
new file mode 100644
index 0000000..1141548
--- /dev/null
+++ b/resources/views/administrator/pages/product/categories/partials/category-tree-item.blade.php
@@ -0,0 +1,32 @@
+@if(!$exclude || $category->id != $exclude)
+    <a href="#" class="list-group-item list-group-item-action category-tree-item py-2 px-3 {{ $selected == $category->id ? 'active' : '' }}"
+        data-id="{{ $category->id }}" data-name="{{ $category->name }}">
+        <div class="d-flex align-items-center" style="padding-left: {{ $depth * 20 }}px;">
+            @if($category->children->isNotEmpty())
+                <span class="category-tree-toggle me-1" data-target="{{ $treeId }}-children-{{ $category->id }}">
+                    <i data-lucide="chevron-right" width="14" height="14" class="tree-arrow"></i>
+                </span>
+            @else
+                <span class="me-1" style="width: 14px; display: inline-block;"></span>
+            @endif
+            <i data-lucide="folder" width="14" height="14" class="me-2 text-warning"></i>
+            <span>{{ $category->name }}</span>
+            @if(!$category->is_active)
+                <span class="badge bg-secondary ms-2" style="font-size: 0.65rem;">Inactive</span>
+            @endif
+        </div>
+    </a>
+    @if($category->children->isNotEmpty())
+        <div class="category-tree-children" id="{{ $treeId }}-children-{{ $category->id }}" style="display: none;">
+            @foreach($category->children as $child)
+                @include('administrator.pages.product.categories.partials.category-tree-item', [
+                    'category' => $child,
+                    'depth' => $depth + 1,
+                    'selected' => $selected,
+                    'exclude' => $exclude,
+                    'treeId' => $treeId,
+                ])
+            @endforeach
+        </div>
+    @endif
+@endif
diff --git a/resources/views/administrator/pages/product/categories/partials/category-tree-scripts.blade.php b/resources/views/administrator/pages/product/categories/partials/category-tree-scripts.blade.php
new file mode 100644
index 0000000..d99cebd
--- /dev/null
+++ b/resources/views/administrator/pages/product/categories/partials/category-tree-scripts.blade.php
@@ -0,0 +1,131 @@
+<script>
+    document.addEventListener('DOMContentLoaded', function () {
+        document.querySelectorAll('.category-tree-picker').forEach(function (picker) {
+            var treeId = picker.dataset.treeId;
+            var hiddenInput = document.getElementById(treeId + '-input');
+            var selectedDisplay = picker.querySelector('.tree-selected-display');
+            var selectedLabel = picker.querySelector('.tree-selected-label');
+            var clearBtn = picker.querySelector('.tree-clear-btn');
+            var searchInput = picker.querySelector('.tree-search-input');
+
+            function expandParents(el) {
+                var parent = el.closest('.category-tree-children');
+                while (parent) {
+                    parent.style.display = '';
+                    var prev = parent.previousElementSibling;
+                    if (prev) {
+                        var toggleIcon = prev.querySelector('.tree-arrow');
+                        if (toggleIcon) {
+                            toggleIcon.style.transform = 'rotate(90deg)';
+                        }
+                    }
+                    parent = parent.parentElement
+                        ? parent.parentElement.closest('.category-tree-children')
+                        : null;
+                }
+            }
+
+            var activeItem = picker.querySelector('.category-tree-item.active');
+            if (activeItem && activeItem.dataset.id) {
+                expandParents(activeItem);
+                selectedLabel.textContent = activeItem.dataset.name;
+                selectedDisplay.style.display = '';
+            }
+
+            picker.querySelectorAll('.category-tree-toggle').forEach(function (toggle) {
+                toggle.addEventListener('click', function (e) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    var target = document.getElementById(this.dataset.target);
+                    var arrow = this.querySelector('.tree-arrow');
+                    if (target) {
+                        if (target.style.display === 'none') {
+                            target.style.display = '';
+                            arrow.style.transform = 'rotate(90deg)';
+                        } else {
+                            target.style.display = 'none';
+                            arrow.style.transform = 'rotate(0deg)';
+                        }
+                    }
+                });
+            });
+
+            picker.querySelectorAll('.category-tree-item').forEach(function (item) {
+                item.addEventListener('click', function (e) {
+                    e.preventDefault();
+                    picker.querySelectorAll('.category-tree-item').forEach(function (i) {
+                        i.classList.remove('active');
+                    });
+                    this.classList.add('active');
+                    hiddenInput.value = this.dataset.id;
+
+                    if (this.dataset.id) {
+                        selectedLabel.textContent = this.dataset.name;
+                        selectedDisplay.style.display = '';
+                    } else {
+                        selectedDisplay.style.display = 'none';
+                    }
+                });
+            });
+
+            clearBtn.addEventListener('click', function () {
+                hiddenInput.value = '';
+                selectedDisplay.style.display = 'none';
+                picker.querySelectorAll('.category-tree-item').forEach(function (i) {
+                    i.classList.remove('active');
+                });
+                picker.querySelector('.category-tree-item[data-id=""]').classList.add('active');
+            });
+
+            searchInput.addEventListener('input', function () {
+                var query = this.value.toLowerCase().trim();
+                picker.querySelectorAll('.category-tree-children').forEach(function (el) {
+                    el.style.display = query ? '' : 'none';
+                });
+                picker.querySelectorAll('.tree-arrow').forEach(function (arrow) {
+                    arrow.style.transform = query ? 'rotate(90deg)' : 'rotate(0deg)';
+                });
+
+                picker.querySelectorAll('.category-tree-item').forEach(function (item) {
+                    if (!item.dataset.id && item.dataset.id !== '0') {
+                        item.style.display = query ? 'none' : '';
+                        return;
+                    }
+                    var name = (item.dataset.name || '').toLowerCase();
+                    item.style.display = (!query || name.includes(query)) ? '' : 'none';
+                });
+            });
+        });
+
+        if (typeof lucide !== 'undefined') {
+            lucide.createIcons();
+        }
+    });
+</script>
+<style>
+    .category-tree-container .list-group-item {
+        border-left: 0;
+        border-right: 0;
+        font-size: 0.875rem;
+        transition: all 0.15s ease;
+    }
+    .category-tree-container .list-group-item:first-child {
+        border-top: 0;
+    }
+    .category-tree-container .list-group-item:hover {
+        background-color: #f8f9fa;
+    }
+    .category-tree-container .list-group-item.active {
+        background-color: #e8f0fe;
+        border-color: transparent;
+        color: #1a73e8;
+    }
+    .category-tree-toggle {
+        cursor: pointer;
+        display: inline-flex;
+        align-items: center;
+    }
+    .tree-arrow {
+        transition: transform 0.2s ease;
+    }
+</style>
diff --git a/resources/views/administrator/pages/product/categories/partials/category-tree.blade.php b/resources/views/administrator/pages/product/categories/partials/category-tree.blade.php
new file mode 100644
index 0000000..e604d43
--- /dev/null
+++ b/resources/views/administrator/pages/product/categories/partials/category-tree.blade.php
@@ -0,0 +1,45 @@
+@props(['categories', 'selected' => null, 'name' => 'parent_id', 'exclude' => null])
+
+@php $treeId = str_replace(['[', ']', '.'], '-', $name); @endphp
+
+<input type="hidden" name="{{ $name }}" id="{{ $treeId }}-input" value="{{ $selected }}">
+
+<div class="category-tree-picker" data-tree-id="{{ $treeId }}">
+    <div class="category-tree-search mb-2">
+        <div class="input-group input-group-sm">
+            <span class="input-group-text bg-white border-end-0">
+                <i data-lucide="search" width="14" height="14"></i>
+            </span>
+            <input type="text" class="form-control border-start-0 shadow-none tree-search-input"
+                placeholder="Search categories...">
+        </div>
+    </div>
+
+    <div class="category-tree-selected-display mb-2 tree-selected-display" style="display: none;">
+        <span class="badge bg-primary d-inline-flex align-items-center gap-1 px-2 py-1">
+            <span class="tree-selected-label"></span>
+            <button type="button" class="btn-close btn-close-white ms-1 tree-clear-btn" style="font-size: 0.5rem;"></button>
+        </span>
+    </div>
+
+    <div class="category-tree-container border rounded" style="max-height: 300px; overflow-y: auto;">
+        <div class="list-group list-group-flush">
+            <a href="#" class="list-group-item list-group-item-action category-tree-item py-2 px-3 {{ !$selected ? 'active' : '' }}"
+                data-id="" data-name="Root (No Parent)">
+                <div class="d-flex align-items-center">
+                    <i data-lucide="home" width="14" height="14" class="me-2 text-muted"></i>
+                    <span class="fw-medium">Root (No Parent)</span>
+                </div>
+            </a>
+            @foreach($categories as $category)
+                @include('administrator.pages.product.categories.partials.category-tree-item', [
+                    'category' => $category,
+                    'depth' => 0,
+                    'selected' => $selected,
+                    'exclude' => $exclude,
+                    'treeId' => $treeId,
+                ])
+            @endforeach
+        </div>
+    </div>
+</div>
diff --git a/resources/views/administrator/pages/product/create.blade.php b/resources/views/administrator/pages/product/create.blade.php
index b16bc51..2a47b4d 100644
--- a/resources/views/administrator/pages/product/create.blade.php
+++ b/resources/views/administrator/pages/product/create.blade.php
@@ -204,18 +204,20 @@
                         <div class="form-group mb-3">
                             <div class="d-flex justify-content-between align-items-center mb-2">
                                 <label for="product_categories_id">Group</label>
-                                <a href={{ route('products.group.index') }}
+                                <a href="{{ route('products.group.index') }}"
                                     class="text-primary text-decoration-underline">
                                     <i data-lucide="plus" class="w-12px h-12px"></i>
                                     Thêm Group
                                 </a>
                             </div>
-                            <select class="form-control select2" name="product_categories_id" id="product_categories_id">
-                                <option value="">-- Select Group --</option>
-                                @foreach ($group as $item)
-                                    @include('administrator.pages.product.partials.category_options', ['item' => $item, 'level' => 0, 'selected' => old('product_categories_id')])
-                                @endforeach
-                            </select>
+                            @include('administrator.pages.product.categories.partials.category-tree', [
+                                'categories' => $group,
+                                'selected' => old('product_categories_id'),
+                                'name' => 'product_categories_id',
+                            ])
+                            @error('product_categories_id')
+                                <div class="text-danger small mt-1">{{ $message }}</div>
+                            @enderror
                         </div>
                         {{-- Product Type --}}
                         <div class="form-group mb-3">
@@ -406,3 +408,7 @@
         });
     </script>
 @endpush
+
+@push('custom-scripts')
+    @include('administrator.pages.product.categories.partials.category-tree-scripts')
+@endpush
diff --git a/resources/views/administrator/pages/product/edit.blade.php b/resources/views/administrator/pages/product/edit.blade.php
index 59686f4..af438a7 100644
--- a/resources/views/administrator/pages/product/edit.blade.php
+++ b/resources/views/administrator/pages/product/edit.blade.php
@@ -209,12 +209,14 @@ $breadcrumbItems = [
                                         Thêm Group
                                     </a>
                                 </div>
-                                <select class="form-control select2" name="product_categories_id" id="product_categories_id">
-                                    <option value="">-- Select Group --</option>
-                                    @foreach ($group as $item)
-                                        @include('administrator.pages.product.partials.category_options', ['item' => $item, 'level' => 0, 'selected' => old('product_categories_id', $product->product_categories_id)])
-                                    @endforeach
-                                </select>
+                                @include('administrator.pages.product.categories.partials.category-tree', [
+                                    'categories' => $group,
+                                    'selected' => old('product_categories_id', $product->product_categories_id),
+                                    'name' => 'product_categories_id',
+                                ])
+                                @error('product_categories_id')
+                                    <div class="text-danger small mt-1">{{ $message }}</div>
+                                @enderror
                             </div>
 
                             {{-- Operating System (for VPS) --}}
@@ -424,3 +426,7 @@ $breadcrumbItems = [
         });
     </script>
 @endpush
+
+@push('custom-scripts')
+    @include('administrator.pages.product.categories.partials.category-tree-scripts')
+@endpush
\ No newline at end of file