diff --git a/resources/views/administrator/pages/module/dns/add.blade.php b/resources/views/administrator/pages/module/dns/add.blade.php
index e2d0f56..3f85d5e 100644
--- a/resources/views/administrator/pages/module/dns/add.blade.php
+++ b/resources/views/administrator/pages/module/dns/add.blade.php
@@ -1,57 +1,91 @@
-@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' => 'DNS Server', 'url' => route('module.dns.index')],
+            ['label' => 'Add DNS Server', 'active' => true],
+        ];
+    @endphp
+    <x-admin-breadcrumb :items="$breadcrumbItems" />
+@endsection
 @section("content")
     @if(auth()->guard('admins')->user()->can("add module dns"))
-    <div class="card card-outline card-primary">
-        <form action="{{ route('module.dns.store') }}" method="post">
-            @csrf
-            <div class="card-body">
-                <div class="row">
-                    <div class="col">
-                        {{--Server Host--}}
-                        <div class="form-group row">
-                            <label class="col-md-3" for="name">Server Host</label>
-                            <div class="col-md-9">
-                                <input type="text" id="name" name="name" placeholder="103.42.xx.xxx"
-                                       value="{{ old('name') }}" class="form-control">
+        <div class="card card-outline card-primary">
+            <form action="{{ route('module.dns.store') }}" method="post">
+                @csrf
+                <div class="card-body p-4">
+                    <div class="row g-4">
+                        {{-- Server Host --}}
+                        <div class="col-12 col-md-6">
+                            <label class="form-label fw-medium" for="name">Server Host <span
+                                    class="text-danger">*</span></label>
+                            <div class="input-group">
+                                <span class="input-group-text bg-light border-end-0">
+                                    <i data-lucide="server" width="18" height="18"></i>
+                                </span>
+                                <input type="text" id="name" name="name" class="form-control border-start-0 ps-3 text-sm"
+                                    placeholder="e.g. 103.42.xx.xxx" value="{{ old('name') }}" required>
                             </div>
                         </div>
-                        {{--User--}}
-                        <div class="form-group row">
-                            <label class="col-md-3" for="user">User</label>
-                            <div class="col-md-9">
-                                <input type="text" id="user" name="user" placeholder="root"
-                                       value="{{ old('user') }}" class="form-control">
+                        {{-- User --}}
+                        <div class="col-12 col-md-6">
+                            <label class="form-label fw-medium" for="user">User <span class="text-danger">*</span></label>
+                            <div class="input-group">
+                                <span class="input-group-text bg-light border-end-0">
+                                    <i data-lucide="user" width="18" height="18"></i>
+                                </span>
+                                <input type="text" id="user" name="user" class="form-control border-start-0 ps-3 text-sm"
+                                    placeholder="e.g. root" value="{{ old('user') }}" required>
                             </div>
                         </div>
-                        {{--Password--}}
-                        <div class="form-group row">
-                            <label class="col-md-3" for="password">Password</label>
-                            <div class="col-md-9">
-                                <input type="password" id="password" name="password" placeholder="*********"
-                                       value="{{ old('password') }}" class="form-control">
+                        {{-- Password --}}
+                        <div class="col-12 col-md-6">
+                            <label class="form-label fw-medium" for="password">Password <span
+                                    class="text-danger">*</span></label>
+                            <div class="input-group">
+                                <span class="input-group-text bg-light border-end-0">
+                                    <i data-lucide="lock" width="18" height="18"></i>
+                                </span>
+                                <input type="password" id="password" name="password"
+                                    class="form-control border-start-0 ps-3 text-sm" placeholder="•••••••••"
+                                    value="{{ old('password') }}" required>
                             </div>
                         </div>
-                        {{--Status--}}
-                        <div class="form-group row">
-                            <label class="col-md-3" for="password">Status</label>
-                            <div class="col-md-9">
-                                <label>
-                                    <select class="custom-select" name="status">
-                                        <option value="1">Active</option>
-                                        <option value="0">No Active</option>
-                                    </select>
-                                </label>
+
+                        {{-- Status --}}
+                        <div class="col-12 col-md-6">
+                            <label class="form-label fw-medium" for="status">Status</label>
+                            <div class="input-group flex-nowrap">
+                                <span class="input-group-text bg-light border-end-0">
+                                    <i data-lucide="activity" width="18" height="18"></i>
+                                </span>
+                                <select class="form-control select2 single__select border-start-0 ps-3" name="status"
+                                    id="status" style="width: 100%;">
+                                    @foreach(App\Enums\Status::getOptions() as $value => $label)
+                                        <option value="{{ $value }}">{{ $label }}</option>
+                                    @endforeach
+                                </select>
                             </div>
                         </div>
                     </div>
                 </div>
-            </div>
-            <div class="card-footer">
-                <a href="{{ route('module.dns.index') }}" class="btn btn-outline-secondary">Trở về</a>
-                <button type="submit" class="btn btn-outline-primary">Lưu dữ liệu</button>
-            </div>
-        </form>
-    </div>
+                <div class="card-footer bg-white border-top p-3 d-flex justify-content-end gap-2">
+                    <x-button-c-r-m route="module.dns.index" variant="secondary" icon="arrow-left">
+                        Cancel
+                    </x-button-c-r-m>
+                    <x-button-c-r-m type="submit" variant="primary" icon="save">
+                        Save DNS Server
+                    </x-button-c-r-m>
+                </div>
+            </form>
+        </div>
     @else
         <div class="alert alert-danger alert-dismissible">
             <h5 class="mb-0"><i class="icon fas fa-ban"></i> Access Denied - You are not assigned to any Module dns
@@ -59,3 +93,13 @@
         </div>
     @endif
 @endsection
+@push('plugin-scripts')
+    @foreach (config('assets.datatable.js') as $datatable)
+        <script src="{{ asset($datatable) }}"></script>
+    @endforeach
+    <script>
+        $(document).ready(function () {
+            $('.select2').select2();
+        });
+    </script>
+@endpush
\ No newline at end of file
diff --git a/resources/views/administrator/pages/module/dns/edit.blade.php b/resources/views/administrator/pages/module/dns/edit.blade.php
index 9c90cf8..51d73a1 100644
--- a/resources/views/administrator/pages/module/dns/edit.blade.php
+++ b/resources/views/administrator/pages/module/dns/edit.blade.php
@@ -1,58 +1,94 @@
-@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' => 'DNS Server', 'url' => route('module.dns.index')],
+    ['label' => 'Edit DNS Server', 'active' => true],
+];
+    @endphp
+    <x-admin-breadcrumb :items="$breadcrumbItems" />
+@endsection
 @section("content")
     @if(auth()->guard('admins')->user()->can("edit module dns"))
-    <div class="card card-outline card-primary">
-        <form action="{{ route('module.dns.update',['id' => $server->id]) }}" method="post">
-            @csrf
-            @method('put')
-            <div class="card-body">
-                <div class="row">
-                    <div class="col">
-                        {{--Server Host--}}
-                        <div class="form-group row">
-                            <label class="col-md-3" for="name">Server Host</label>
-                            <div class="col-md-9">
-                                <input type="text" id="name" name="name" placeholder="103.42.xx.xxx"
-                                       value="{{ $server->name }}" class="form-control">
+        <div class="card card-outline card-primary">
+            <form action="{{ route('module.dns.update', ['id' => $server->id]) }}" method="post">
+                @csrf
+                @method('put')
+                <div class="card-body p-4">
+                    <div class="row g-4">
+                        {{-- Server Host --}}
+                        <div class="col-12 col-md-6">
+                            <label class="form-label fw-medium" for="name">Server Host <span
+                                    class="text-danger">*</span></label>
+                            <div class="input-group">
+                                <span class="input-group-text bg-light border-end-0">
+                                    <i data-lucide="server" width="18" height="18"></i>
+                                </span>
+                                <input type="text" id="name" name="name" class="form-control border-start-0 ps-0 text-sm"
+                                    placeholder="e.g. 103.42.xx.xxx" value="{{ $server->name }}" required>
                             </div>
                         </div>
-                        {{--User--}}
-                        <div class="form-group row">
-                            <label class="col-md-3" for="user">User</label>
-                            <div class="col-md-9">
-                                <input type="text" id="user" name="user" placeholder="root"
-                                       value="{{ $server->user }}" class="form-control">
+
+                        {{-- User --}}
+                        <div class="col-12 col-md-6">
+                            <label class="form-label fw-medium" for="user">User <span class="text-danger">*</span></label>
+                            <div class="input-group">
+                                <span class="input-group-text bg-light border-end-0">
+                                    <i data-lucide="user" width="18" height="18"></i>
+                                </span>
+                                <input type="text" id="user" name="user" class="form-control border-start-0 ps-0 text-sm"
+                                    placeholder="e.g. root" value="{{ $server->user }}" required>
                             </div>
                         </div>
-                        {{--Password--}}
-                        <div class="form-group row">
-                            <label class="col-md-3" for="password">Password</label>
-                            <div class="col-md-9">
-                                <input type="password" id="password" name="password" placeholder="*********"
-                                       value="" class="form-control">
+
+                        {{-- Password --}}
+                        <div class="col-12 col-md-6">
+                            <label class="form-label fw-medium" for="password">Password</label>
+                            <div class="input-group">
+                                <span class="input-group-text bg-light border-end-0">
+                                    <i data-lucide="lock" width="18" height="18"></i>
+                                </span>
+                                <input type="password" id="password" name="password"
+                                    class="form-control border-start-0 ps-0 text-sm"
+                                    placeholder="Leave blank to keep current password" value="">
                             </div>
                         </div>
-                        {{--Status--}}
-                        <div class="form-group row">
-                            <label class="col-md-3" for="password">Status</label>
-                            <div class="col-md-9">
-                                <label>
-                                    <select class="custom-select" name="status">
-                                        <option value="1" @selected($server->status === 1)>Active</option>
-                                        <option value="0" @selected($server->status === 0)>No Active</option>
-                                    </select>
-                                </label>
+
+                        {{-- Status --}}
+                        <div class="col-12 col-md-6">
+                            <label class="form-label fw-medium" for="status">Status</label>
+                            <div class="input-group">
+                                <span class="input-group-text bg-light border-end-0">
+                                    <i data-lucide="activity" width="18" height="18"></i>
+                                </span>
+                                <select class="form-control select2 single__select border-start-0 ps-0" name="status"
+                                    id="status" style="width: 100%;">
+                                    @foreach(App\Enums\Status::getOptions() as $value => $label)
+                                        <option value="{{ $value }}" {{ $server->status === $value ? 'selected' : '' }}>{{ $label }}
+                                        </option>
+                                    @endforeach
+                                </select>
                             </div>
                         </div>
                     </div>
                 </div>
-            </div>
-            <div class="card-footer">
-                <a href="{{ route('module.dns.index') }}" class="btn btn-outline-secondary">Trở về</a>
-                <button type="submit" class="btn btn-outline-primary">Lưu dữ liệu</button>
-            </div>
-        </form>
-    </div>
+                <div class="card-footer bg-white border-top p-3 d-flex justify-content-end gap-2">
+                    <x-button-c-r-m route="module.dns.index" variant="secondary" icon="arrow-left">
+                        Cancel
+                    </x-button-c-r-m>
+                    <x-button-c-r-m type="submit" variant="primary" icon="save">
+                        Save Changes
+                    </x-button-c-r-m>
+                </div>
+                </form>
+                </div>
     @else
         <div class="alert alert-danger alert-dismissible">
             <h5 class="mb-0"><i class="icon fas fa-ban"></i> Access Denied - You are not assigned to any Module dns
@@ -60,3 +96,13 @@
         </div>
     @endif
 @endsection
+@push('plugin-scripts')
+    @foreach (config('assets.datatable.js') as $datatable)
+        <script src="{{ asset($datatable) }}"></script>
+    @endforeach
+    <script>
+        $(document).ready(function () {
+            $('.select2').select2();
+        });
+    </script>
+@endpush
diff --git a/resources/views/administrator/pages/module/dns/index.blade.php b/resources/views/administrator/pages/module/dns/index.blade.php
index d5049c9..431fcc1 100644
--- a/resources/views/administrator/pages/module/dns/index.blade.php
+++ b/resources/views/administrator/pages/module/dns/index.blade.php
@@ -9,7 +9,6 @@
     @php
         $breadcrumbItems = [
             ['label' => 'Modules'],
-            ['label' => 'Package vCenter'],
             ['label' => 'DNS Server', 'active' => true],
         ];
     @endphp
@@ -23,11 +22,11 @@
             </div>
             <div class="card-body">
                 <x-datatable id="dnsTable" ajax="{{ route('module.dns.datatable') }}" :columns="[
-            ['key' => 'name', 'label' => 'IP Host'],
-            ['key' => 'counter', 'label' => 'Domain Created'],
-            ['key' => 'status', 'label' => 'Status'],
-            ['key' => 'action', 'label' => 'Action'],
-        ]" />
+                    ['key' => 'name', 'label' => 'IP Host'],
+                    ['key' => 'counter', 'label' => 'Domain Created'],
+                    ['key' => 'status', 'label' => 'Status'],
+                    ['key' => 'action', 'label' => 'Action'],
+                ]" />
             </div>
         </div>
     @else