diff --git a/app/Http/Controllers/admin/vm/VirtualMachineController.php b/app/Http/Controllers/admin/vm/VirtualMachineController.php
index c63e075..b6b55fa 100644
--- a/app/Http/Controllers/admin/vm/VirtualMachineController.php
+++ b/app/Http/Controllers/admin/vm/VirtualMachineController.php
@@ -35,7 +35,8 @@ class VirtualMachineController extends Controller
     public function create()
     {
         $title = 'Add Virtual Machine';
-        return view('administrator.pages.package.vm.add', compact('title'));
+        $vcenters = \App\Models\Vcenter::where('status', 1)->get();
+        return view('administrator.pages.package.vm.add', compact('title', 'vcenters'));
     }
 
     public function store(Request $request)
@@ -67,8 +68,9 @@ class VirtualMachineController extends Controller
             return back()->withErrors('Invalid request.');
         }
         $vm->load('datacenter', 'host');
+        $vcenters = \App\Models\Vcenter::where('status', 1)->get();
         $title = 'Edit Virtual Machine';
-        return view('administrator.pages.package.vm.edit', compact('title', 'vm'));
+        return view('administrator.pages.package.vm.edit', compact('title', 'vm', 'vcenters'));
     }
 
     public function update(Request $request, $id)
diff --git a/resources/views/administrator/pages/package/vm/add.blade.php b/resources/views/administrator/pages/package/vm/add.blade.php
index 6e63854..b37bf57 100644
--- a/resources/views/administrator/pages/package/vm/add.blade.php
+++ b/resources/views/administrator/pages/package/vm/add.blade.php
@@ -1,51 +1,101 @@
-@extends("administrator.layout.master")
-@section("content")
+@extends('administrator.layout.master')
+@push('plugin-styles')
+    @foreach (config('assets.datatable.css') as $datatable)
+        <link href="{{ asset($datatable) }}" rel="stylesheet" />
+    @endforeach
+@endpush
+
+@section('breadcrumb')
+    @php
+        $breadcrumbItems = [
+            ['label' => 'Modules'],
+            ['label' => 'Package vCenter', 'route' => 'package.vm.index'],
+            ['label' => 'Virtual Machine', 'route' => 'package.vm.index'],
+            ['label' => 'Add VM', 'active' => true],
+        ];
+    @endphp
+    <x-admin-breadcrumb :items="$breadcrumbItems" />
+@endsection
+
+@section('content')
 @if(auth()->guard('admins')->user()->can("add module vcenter"))
-    <div class="card card-outline card-primary">
-        <form action="{{ route('package.host.store') }}" method="post">
-            @csrf
-            <div class="card-body">
-                <x-module.v-center :model="null" />
-                <x-module.datacenter :model="null" />
-                {{--Name--}}
-                <div class="row form-group align-items-center mb-0">
-                    <label for="name" class="col-md-3 text-right">Name</label>
-                    <div class="col-md-9 p-1 bg-customer">
-                        <input type="text" id="name" name="name" placeholder="" value="" class="form-control">
+    <form action="{{ route('package.vm.store') }}" method="post">
+        @csrf
+        <div class="row align-items-start">
+            <div class="col-md-8">
+                <div class="card card-primary card-outline">
+                    <div class="card-header bg-white">
+                        <h5 class="card-title m-0">Add Virtual Machine</h5>
                     </div>
-                </div>
-                {{--Host ID--}}
-                <div class="row form-group align-items-center mb-0">
-                    <label for="host_id" class="col-md-3 text-right">Host ID</label>
-                    <div class="col-md-9 p-1 bg-customer">
-                        <input type="text" id="host_id" name="host_id" placeholder="" value="" class="form-control">
-                    </div>
-                </div>
-                {{--Template ID--}}
-                <div class="row form-group align-items-center mb-0">
-                    <label for="template" class="col-md-3 text-right">Template ID</label>
-                    <div class="col-md-9 p-1 bg-customer">
-                        <input type="text" id="template" name="template" placeholder="" value="" class="form-control">
-                    </div>
-                </div>
-                {{--Console ID--}}
-                <div class="row form-group align-items-center mb-0">
-                    <label for="console" class="col-md-3 text-right">Console Name</label>
-                    <div class="col-md-9 p-1 bg-customer">
-                        <input type="text" id="console" name="console" placeholder="consolenode129.tgs.com.vn" value="" class="form-control">
+                    <div class="card-body">
+                        <div class="mb-4">
+                            <h5 class="text-primary border-bottom mb-3 pb-2">vCenter Configuration</h5>
+                            <x-module.v-center :model="null" />
+                            <x-module.datacenter :model="null" />
+                            <x-module.host :model="null" />
+                        </div>
+
+                        <div class="mb-4">
+                            <h5 class="text-primary border-bottom mb-3 pb-2">VM Information</h5>
+                            <div class="row mb-3">
+                                <div class="col-md-6">
+                                    <div class="form-group">
+                                        <label for="vm_id">VM ID <span class="text-danger">*</span></label>
+                                        <input type="text" id="vm_id" name="vm_id" value="{{ old('vm_id') }}"
+                                            class="form-control" required placeholder="vm-XXXX" />
+                                    </div>
+                                </div>
+                                <div class="col-md-6">
+                                    <div class="form-group">
+                                        <label for="name">Name <span class="text-danger">*</span></label>
+                                        <input type="text" id="name" name="name" value="{{ old('name') }}"
+                                            class="form-control" required placeholder="VM Name" />
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="row mb-3">
+                                <div class="col-md-6">
+                                    <div class="form-group">
+                                        <label for="cpu">CPU (cores)</label>
+                                        <input type="number" id="cpu" name="cpu" value="{{ old('cpu') }}"
+                                            class="form-control" placeholder="Number of cores" />
+                                    </div>
+                                </div>
+                                <div class="col-md-6">
+                                    <div class="form-group">
+                                        <label for="ram_mb">RAM (MB)</label>
+                                        <input type="number" id="ram_mb" name="ram_mb" value="{{ old('ram_mb') }}"
+                                            class="form-control" placeholder="RAM in MB" />
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
-            <div class="card-footer">
-                <a href="{{ route('package.host.index') }}" class="btn btn-outline-secondary">Trở về</a>
-                <button type="submit" class="btn btn-outline-primary">Lưu dữ liệu</button>
+
+            <div class="col-md-4">
+                <div class="card card-primary card-outline">
+                    <div class="card-header bg-white">
+                        <h5 class="card-title m-0">Actions</h5>
+                    </div>
+                    <div class="card-body">
+                        <x-button-crm type="submit" variant="primary" size="lg" icon="plus-circle" class="w-100 mb-2">Create VM</x-button-crm>
+                        <x-button-crm type="button" variant="outline-secondary" size="lg" route="package.vm.index" icon="arrow-left" class="w-100">Cancel</x-button-crm>
+                    </div>
+                </div>
             </div>
-        </form>
-    </div>
+        </div>
+    </form>
 @else
     <div class="alert alert-danger alert-dismissible">
-        <h5 class="mb-0"><i class="icon fas fa-ban"></i> Access Denied - You are not assigned to any Module vCenter
-            management department</h5>
+        <h5 class="mb-0"><i class="icon fas fa-ban"></i> Access Denied - You are not assigned to any Module vCenter management department</h5>
     </div>
 @endif
 @endsection
+
+@push('plugin-scripts')
+    @foreach (config('assets.datatable.js') as $datatable)
+        <script src="{{ asset($datatable) }}"></script>
+    @endforeach
+@endpush
diff --git a/resources/views/administrator/pages/package/vm/edit.blade.php b/resources/views/administrator/pages/package/vm/edit.blade.php
index a559448..e94c3e2 100644
--- a/resources/views/administrator/pages/package/vm/edit.blade.php
+++ b/resources/views/administrator/pages/package/vm/edit.blade.php
@@ -1,99 +1,128 @@
-@extends("administrator.layout.master")
+@extends('administrator.layout.master')
+@push('plugin-styles')
+    @foreach (config('assets.datatable.css') as $datatable)
+        <link href="{{ asset($datatable) }}" rel="stylesheet" />
+    @endforeach
+@endpush
 
 @section('breadcrumb')
     @php
         $breadcrumbItems = [
             ['label' => 'Modules'],
-            ['label' => 'Package vCenter'],
+            ['label' => 'Package vCenter', 'route' => 'package.vm.index'],
             ['label' => 'Virtual Machine', 'route' => 'package.vm.index'],
-            ['label' => $vm->name ?? $vm->vm_id ?? 'Edit', 'active' => true],
+            ['label' => 'Edit VM', 'active' => true],
         ];
     @endphp
     <x-admin-breadcrumb :items="$breadcrumbItems" />
 @endsection
 
-@section("content")
+@section('content')
 @if(auth()->guard('admins')->user()->can("add module vcenter"))
-    <div class="card card-outline card-primary">
-        <form action="{{ route('package.vm.update',['id' => $vm->id]) }}" method="post">
-            @csrf
-            @method('put')
-            <div class="card-body">
-                {{--Name--}}
-                <div class="row form-group align-items-center mb-0">
-                    <label for="name" class="col-md-3 text-right">Name</label>
-                    <div class="col-md-9 p-1 bg-customer">
-                        <input type="text" id="name" name="name" placeholder="" value="{{ $vm->name}}" class="form-control">
+    <form action="{{ route('package.vm.update', $vm->id) }}" method="post">
+        @csrf
+        @method('PUT')
+        <div class="row align-items-start">
+            <div class="col-md-8">
+                <div class="card card-primary card-outline">
+                    <div class="card-header bg-white">
+                        <h5 class="card-title m-0">Edit Virtual Machine</h5>
+                    </div>
+                    <div class="card-body">
+                        <div class="mb-4">
+                            <h5 class="text-primary border-bottom mb-3 pb-2">vCenter Configuration</h5>
+                            <x-module.v-center :model="$vm" />
+                            <x-module.datacenter :model="$vm" />
+                            <x-module.host :model="$vm" />
+                        </div>
+
+                        <div class="mb-4">
+                            <h5 class="text-primary border-bottom mb-3 pb-2">VM Information</h5>
+                            <div class="row mb-3">
+                                <div class="col-md-6">
+                                    <div class="form-group">
+                                        <label for="vm_id">VM ID <span class="text-danger">*</span></label>
+                                        <input type="text" id="vm_id" name="vm_id" value="{{ old('vm_id', $vm->vm_id) }}"
+                                            class="form-control" required placeholder="vm-XXXX" />
+                                    </div>
+                                </div>
+                                <div class="col-md-6">
+                                    <div class="form-group">
+                                        <label for="name">Name <span class="text-danger">*</span></label>
+                                        <input type="text" id="name" name="name" value="{{ old('name', $vm->name) }}"
+                                            class="form-control" required placeholder="VM Name" />
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="row mb-3">
+                                <div class="col-md-6">
+                                    <div class="form-group">
+                                        <label for="cpu">CPU (cores)</label>
+                                        <input type="number" id="cpu" name="cpu" value="{{ old('cpu', $vm->cpu) }}"
+                                            class="form-control" placeholder="Number of cores" />
+                                    </div>
+                                </div>
+                                <div class="col-md-6">
+                                    <div class="form-group">
+                                        <label for="ram_mb">RAM (MB)</label>
+                                        <input type="number" id="ram_mb" name="ram_mb" value="{{ old('ram_mb', $vm->ram_mb) }}"
+                                            class="form-control" placeholder="RAM in MB" />
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="mb-4">
+                            <h5 class="text-primary border-bottom mb-3 pb-2">Status</h5>
+                            <div class="row mb-3">
+                                <div class="col-md-12">
+                                    <div class="form-group">
+                                        <label>Power State</label>
+                                        <div>
+                                            @if($vm->power_state == 'POWERED_ON')
+                                                <span class="badge bg-success">Đang bật</span>
+                                            @elseif($vm->power_state == 'POWERED_OFF')
+                                                <span class="badge bg-secondary">Đang tắt</span>
+                                            @else
+                                                <span class="badge bg-info">{{ $vm->power_state ?? 'N/A' }}</span>
+                                            @endif
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
                     </div>
                 </div>
-                {{--VM ID--}}
-                <div class="row form-group align-items-center mb-0">
-                    <label for="vm_id" class="col-md-3 text-right">VM ID</label>
-                    <div class="col-md-9 p-1 bg-customer">
-                        <input type="text" id="vm_id" name="vm_id" placeholder="" value="{{ $vm->vm_id}}" class="form-control">
+            </div>
+
+            <div class="col-md-4">
+                <div class="card card-primary card-outline">
+                    <div class="card-header bg-white">
+                        <h5 class="card-title m-0">Actions</h5>
                     </div>
-                </div>
-                {{--Power State--}}
-                <div class="row form-group align-items-center mb-0">
-                    <label for="power_state" class="col-md-3 text-right">Power State</label>
-                    <div class="col-md-9 p-1 bg-customer">
-                        @if($vm->power_state == 'POWERED_ON')
-                            <span class="badge bg-success">Đang bật</span>
-                        @elseif($vm->power_state == 'POWERED_OFF')
-                            <span class="badge bg-secondary">Đang tắt</span>
-                        @else
-                            {{ $vm->power_state }}
+                    <div class="card-body">
+                        <x-button-crm type="submit" variant="primary" size="lg" icon="save" class="w-100 mb-2">Save Changes</x-button-crm>
+                        <x-button-crm type="button" variant="outline-secondary" size="lg" route="package.vm.index" icon="arrow-left" class="w-100 mb-2">Cancel</x-button-crm>
+                        
+                        @if($vm->vm_id && $vm->power_state == 'POWERED_ON')
+                            <x-button-crm type="button" variant="outline-info" size="lg" icon="monitor" route="admin.vm.console" :params="['vm_id' => $vm->vm_id]" class="w-100">Open Console</x-button-crm>
+                        @elseif($vm->vm_id)
+                            <span class="btn btn-outline-secondary disabled w-100">Console (VM Off)</span>
                         @endif
                     </div>
                 </div>
-                {{--CPU--}}
-                <div class="row form-group align-items-center mb-0">
-                    <label for="cpu" class="col-md-3 text-right">CPU</label>
-                    <div class="col-md-9 p-1 bg-customer">
-                        <input type="text" id="cpu" name="cpu" placeholder="" value="{{ $vm->cpu}}" class="form-control">
-                    </div>
-                </div>
-                {{--RAM (MB)--}}
-                <div class="row form-group align-items-center mb-0">
-                    <label for="ram_mb" class="col-md-3 text-right">RAM (MB)</label>
-                    <div class="col-md-9 p-1 bg-customer">
-                        <input type="text" id="ram_mb" name="ram_mb" placeholder="" value="{{ $vm->ram_mb}}" class="form-control">
-                    </div>
-                </div>
-                {{--Datacenter--}}
-                <div class="row form-group align-items-center mb-0">
-                    <label for="datacenter_id" class="col-md-3 text-right">Datacenter</label>
-                    <div class="col-md-9 p-1 bg-customer">
-                        <input type="text" id="datacenter_id" name="datacenter_id" placeholder="" value="{{ $vm->datacenter_id}}" class="form-control">
-                    </div>
-                </div>
-                {{--Host--}}
-                <div class="row form-group align-items-center mb-0">
-                    <label for="host_id" class="col-md-3 text-right">Host</label>
-                    <div class="col-md-9 p-1 bg-customer">
-                        <input type="text" id="host_id" name="host_id" placeholder="" value="{{ $vm->host_id}}" class="form-control">
-                    </div>
-                </div>
             </div>
-            <div class="card-footer">
-                <a href="{{ route('package.vm.index') }}" class="btn btn-secondary">Back</a>
-                <button type="submit" class="btn btn-primary">Save</button>
-                @if($vm->vm_id && $vm->power_state == 'POWERED_ON')
-                <a href="{{ route('admin.vm.console', ['vm_id' => $vm->vm_id]) }}" target="_blank" class="btn btn-info">
-                    <i class="fas fa-terminal"></i> Console
-                </a>
-                @elseif($vm->vm_id)
-                <span class="btn btn-secondary disabled">
-                    <i class="fas fa-terminal"></i> Console (Off)
-                </span>
-                @endif
-            </div>
-        </form>
-    </div>
+        </div>
+    </form>
 @else
     <div class="alert alert-danger alert-dismissible">
-        <h5 class="mb-0"><i class="icon fas fa-ban"></i> Access Denied - You are not assigned to any Module vCenter
-            management department</h5>
+        <h5 class="mb-0"><i class="icon fas fa-ban"></i> Access Denied - You are not assigned to any Module vCenter management department</h5>
     </div>
 @endif
 @endsection
+
+@push('plugin-scripts')
+    @foreach (config('assets.datatable.js') as $datatable)
+        <script src="{{ asset($datatable) }}"></script>
+    @endforeach
+@endpush
diff --git a/resources/views/components/module/datacenter.blade.php b/resources/views/components/module/datacenter.blade.php
index baa901a..bc530c5 100644
--- a/resources/views/components/module/datacenter.blade.php
+++ b/resources/views/components/module/datacenter.blade.php
@@ -10,6 +10,8 @@ if (!$selectedDatacenterId && $model) {
         $selectedDatacenterId = $model->host?->module_datacenter_id;
     } elseif ($model instanceof \App\Models\ModuleIpAddress) {
         $selectedDatacenterId = $model->host?->module_datacenter_id;
+    } elseif ($model instanceof \App\Models\VirtualMachines) {
+        $selectedDatacenterId = $model->datacenter_id;
     } elseif (isset($model->module_datacenter_id)) {
         $selectedDatacenterId = $model->module_datacenter_id;
     } elseif (method_exists($model, 'host') && $model->host) {
diff --git a/resources/views/components/module/host.blade.php b/resources/views/components/module/host.blade.php
index 79d9cb5..82fd546 100644
--- a/resources/views/components/module/host.blade.php
+++ b/resources/views/components/module/host.blade.php
@@ -1,5 +1,5 @@
 @php
-$selectedHostId = old('module_host_id') ?? ($model?->module_host_id ?? ($model?->ipaddress?->module_host_id ?? null));
+$selectedHostId = old('module_host_id') ?? ($model?->module_host_id ?? ($model?->host_id ?? ($model?->ipaddress?->module_host_id ?? null)));
 @endphp
 
 
diff --git a/resources/views/components/module/v-center.blade.php b/resources/views/components/module/v-center.blade.php
index cdbda1c..7c71a4f 100644
--- a/resources/views/components/module/v-center.blade.php
+++ b/resources/views/components/module/v-center.blade.php
@@ -1,8 +1,9 @@
 @php
 $selectedVcenterId = old('vcenter_id') ??
     ($model?->host?->datacenter?->vcenter_id ?? (
-        $model?->ipaddress?->host?->datacenter?->vcenter?->id ??
-        $model?->vcenter_id ?? null
+        $model?->datacenter?->vcenter_id ??
+        ($model?->ipaddress?->host?->datacenter?->vcenter?->id ??
+        $model?->vcenter_id ?? null)
     ));
 @endphp