diff --git a/app/Http/Controllers/admin/SupportController.php b/app/Http/Controllers/admin/SupportController.php
index 8e9dd28..d2da05b 100644
--- a/app/Http/Controllers/admin/SupportController.php
+++ b/app/Http/Controllers/admin/SupportController.php
@@ -23,7 +23,7 @@ class SupportController extends Controller
 
         $tickets = $this->ticketRepository->filter($request->merge(['page' => $request->get('1') ?? 1])->all());
         $title = "All Support Ticket";
-        return view('administrator.pagesupport.index', compact('title', 'tickets'));
+        return view('administrator.pages.support.index', compact('title', 'tickets'));
     }
 
     public function edit(int $ticket_num = 0)
@@ -40,7 +40,7 @@ class SupportController extends Controller
 
         $title = "Ticket #" . $ticket_num;
 
-        return view("administrator.pagesupport.view", compact('title', 'ticket'));
+        return view("administrator.pages.support.view", compact('title', 'ticket'));
     }
 
     public function reply(int $id = 0, TicketReplyRequest $request)
diff --git a/resources/sass/_variables.scss b/resources/sass/_variables.scss
index f61661f..19c82cf 100644
--- a/resources/sass/_variables.scss
+++ b/resources/sass/_variables.scss
@@ -36,7 +36,7 @@ $cyan:    #0dcaf0 !default;
 $primary:         #F16723 !default;
 $secondary:       $gray-600 !default;
 $success:         #10B981 !default;
-$info:            #66d1d1 !default;
+$info:            #0F172A !default;
 $warning:         #F59E0B !default;
 $danger:          #dc3545 !default;
 $light:           $gray-200 !default;
diff --git a/resources/views/administrator/pages/block/ModuleIPPool.blade.php b/resources/views/administrator/pages/block/ModuleIPPool.blade.php
index f3e80ad..6453a92 100644
--- a/resources/views/administrator/pages/block/ModuleIPPool.blade.php
+++ b/resources/views/administrator/pages/block/ModuleIPPool.blade.php
@@ -1,9 +1,10 @@
-<a href="{{ route('module.ippool.create') }}" class="btn btn-outline-secondary"><i class="fas fa-plus-circle"></i> Add New IP Pool</a>
+<x-button-crm type="button" variant="primary" size="sm" route="module.ippool.create" icon="plus-circle">Add
+    IP Pool</x-button-crm>
 <form action="{{ route('module.ippool.import') }}" class="d-lg-inline" enctype="multipart/form-data" method="post">
     @csrf
-    <input type="file" name="file" class="d-none file-selector" accept=".csv,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" onchange="form.submit()" />
-    <button type="button" class="btn btn-outline-secondary btn-import__from">
-        <i class="fas fa-plus-circle"></i> Import From Excel
-    </button>
+    <input type="file" name="file" class="d-none file-selector"
+        accept=".csv,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" onchange="form.submit()" />
+    <x-button-crm type="submit" variant="secondary" size="sm" icon="download">Import From Excel</x-button-crm>
 </form>
-<a href="{{ url('file/IPPool.xlsx') }}"  class="btn btn-outline-secondary"><i class="fas fa-download"></i> File Import Demo</a>
+<x-button-crm type="button" variant="info" size="sm" url="file/IPPool.xlsx" icon="download">Download
+    Template</x-button-crm>
\ No newline at end of file
diff --git a/resources/views/administrator/pages/module/dns/index.blade.php b/resources/views/administrator/pages/module/dns/index.blade.php
index 431fcc1..f3c4f03 100644
--- a/resources/views/administrator/pages/module/dns/index.blade.php
+++ b/resources/views/administrator/pages/module/dns/index.blade.php
@@ -14,6 +14,33 @@
     @endphp
     <x-admin-breadcrumb :items="$breadcrumbItems" />
 @endsection
+@section('tab')
+    @php
+        $tabs = [
+            [
+                'label' => 'DNS',
+                'route' => 'module.dns.index',
+                'icon' => 'server',
+            ],
+            [
+                'label' => 'Hosting',
+                'route' => 'module.hosting.index',
+                'icon' => 'server',
+            ],
+            [
+                'label' => 'vCenter',
+                'route' => 'module.vcenter.index',
+                'icon' => 'server',
+            ],
+            [
+                'label' => 'IpPool',
+                'route' => 'module.ippool.index',
+                'icon' => 'server',
+            ],
+        ];
+    @endphp
+    <x-admin-tab :items="$tabs" />
+@endsection
 @section('content')
     @if(auth()->guard('admins')->user()->can("manager module dns"))
         <div class="card card-primary card-outline">
diff --git a/resources/views/administrator/pages/module/hosting/index.blade.php b/resources/views/administrator/pages/module/hosting/index.blade.php
index 4e2fe9e..512567a 100644
--- a/resources/views/administrator/pages/module/hosting/index.blade.php
+++ b/resources/views/administrator/pages/module/hosting/index.blade.php
@@ -9,12 +9,38 @@
     @php
         $breadcrumbItems = [
             ['label' => 'Modules'],
-            ['label' => 'Package vCenter'],
-            ['label' => 'Datacenter', 'active' => true],
+            ['label' => 'Hosting', 'active' => true],
         ];
     @endphp
     <x-admin-breadcrumb :items="$breadcrumbItems" />
 @endsection
+@section('tab')
+    @php
+        $tabs = [
+            [
+                'label' => 'DNS',
+                'route' => 'module.dns.index',
+                'icon' => 'server',
+            ],
+            [
+                'label' => 'Hosting',
+                'route' => 'module.hosting.index',
+                'icon' => 'server',
+            ],
+            [
+                'label' => 'vCenter',
+                'route' => 'module.vcenter.index',
+                'icon' => 'server',
+            ],
+            [
+                'label' => 'IpPool',
+                'route' => 'module.ippool.index',
+                'icon' => 'server',
+            ],
+        ];
+    @endphp
+    <x-admin-tab :items="$tabs" />
+@endsection
 @section('content')
     @if (auth()->guard('admins')->user()->can('manager module hosting'))
         <div class="card card-primary card-outline">
diff --git a/resources/views/administrator/pages/module/ippool/index.blade.php b/resources/views/administrator/pages/module/ippool/index.blade.php
index f419375..f01fdb6 100644
--- a/resources/views/administrator/pages/module/ippool/index.blade.php
+++ b/resources/views/administrator/pages/module/ippool/index.blade.php
@@ -1,5 +1,46 @@
-@php use App\Http\Helpers\Helper; @endphp
 @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' => 'IP Pools', 'active' => true],
+        ];
+    @endphp
+    <x-admin-breadcrumb :items="$breadcrumbItems" />
+@endsection
+@section('tab')
+    @php
+        $tabs = [
+            [
+                'label' => 'DNS',
+                'route' => 'module.dns.index',
+                'icon' => 'server',
+            ],
+            [
+                'label' => 'Hosting',
+                'route' => 'module.hosting.index',
+                'icon' => 'server',
+            ],
+            [
+                'label' => 'vCenter',
+                'route' => 'module.vcenter.index',
+                'icon' => 'server',
+            ],
+            [
+                'label' => 'IpPool',
+                'route' => 'module.ippool.index',
+                'icon' => 'server',
+            ],
+        ];
+    @endphp
+    <x-admin-tab :items="$tabs" />
+@endsection
 @section('content')
     @if (auth()->guard('admins')->user()->can('manager module ippool'))
         <div class="card card-primary card-outline">
@@ -27,8 +68,7 @@
                             @foreach ($modules as $item)
                                 <tr>
                                     <td class="text-center">
-                                        <label for=""></label><input type="checkbox" name="id[]"
-                                            value="{{ $item->id }}" id="">
+                                        <label for=""></label><input type="checkbox" name="id[]" value="{{ $item->id }}" id="">
                                     </td>
                                     <td class="text-center">
                                         {{ $item->ip_address }}
@@ -40,8 +80,7 @@
                                         {{ $item->network->host->datacenter->vCenter->host }}
                                     </td>
                                     <td>
-                                        <a class="btn btn-warning btn-sm"
-                                            href="{{ route('module.ippool.edit', ['id' => $item->id]) }}">
+                                        <a class="btn btn-warning btn-sm" href="{{ route('module.ippool.edit', ['id' => $item->id]) }}">
                                             <i class="fas fa-user-edit"></i>
                                         </a>
                                     </td>
@@ -51,8 +90,8 @@
                                                 action="{{ route('module.ippool.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á">
+                                                <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>
@@ -75,3 +114,8 @@
         </div>
     @endif
 @endsection
+@push('plugin-scripts')
+    @foreach (config('assets.datatable.js') as $datatable)
+        <script src="{{ asset($datatable) }}"></script>
+    @endforeach
+@endpush
\ No newline at end of file
diff --git a/resources/views/administrator/pages/module/vcenter/index.blade.php b/resources/views/administrator/pages/module/vcenter/index.blade.php
index 7aac200..39428ff 100644
--- a/resources/views/administrator/pages/module/vcenter/index.blade.php
+++ b/resources/views/administrator/pages/module/vcenter/index.blade.php
@@ -14,6 +14,33 @@
     @endphp
     <x-admin-breadcrumb :items="$breadcrumbItems" />
 @endsection
+@section('tab')
+    @php
+        $tabs = [
+            [
+                'label' => 'DNS',
+                'route' => 'module.dns.index',
+                'icon' => 'server',
+            ],
+            [
+                'label' => 'Hosting',
+                'route' => 'module.hosting.index',
+                'icon' => 'server',
+            ],
+            [
+                'label' => 'vCenter',
+                'route' => 'module.vcenter.index',
+                'icon' => 'server',
+            ],
+            [
+                'label' => 'IpPool',
+                'route' => 'module.ippool.index',
+                'icon' => 'server',
+            ],
+        ];
+    @endphp
+    <x-admin-tab :items="$tabs" />
+@endsection
 @section('content')
     @if(auth()->guard('admins')->user()->can("manager module vcenter"))
         <div class="card card-primary card-outline">
diff --git a/resources/views/components/button-c-r-m.blade.php b/resources/views/components/button-c-r-m.blade.php
index 64f7861..d26197f 100644
--- a/resources/views/components/button-c-r-m.blade.php
+++ b/resources/views/components/button-c-r-m.blade.php
@@ -32,6 +32,7 @@
         'destructive' => 'bg-destructive',
         'success' => 'bg-success',
         'warning' => 'bg-warning',
+        'info' => 'bg-info'
     ];
 
     $sizes = [
@@ -46,19 +47,19 @@
 
     $classes = "{$baseClasses} {$variantClass} {$sizeClass}";
 @endphp
-    
-    @if($tag === 'a')
-        <a href="{{ $href }}" {{ $attributes->merge(['class' => $classes]) }}>
-            @if($icon)
-                <i data-lucide="{{ $icon }}" class="mr-2" style="height: 15px; width: 15px"></i>
-            @endif
-            {{ $slot }}
-        </a>
-    @else
-        <button type="{{ $buttonType }}" {{ $attributes->merge(['class' => $classes]) }}>
-            @if($icon)
-                <i data-lucide="{{ $icon }}" class="mr-2" style="height: 15px; width: 15px"></i>
-            @endif
-            {{ $slot }}
-        </button>
-    @endif
\ No newline at end of file
+
+@if($tag === 'a')
+    <a href="{{ $href }}" {{ $attributes->merge(['class' => $classes]) }}>
+        @if($icon)
+            <i data-lucide="{{ $icon }}" class="mr-2" style="height: 15px; width: 15px"></i>
+        @endif
+        {{ $slot }}
+    </a>
+@else
+    <button type="{{ $buttonType }}" {{ $attributes->merge(['class' => $classes]) }}>
+        @if($icon)
+            <i data-lucide="{{ $icon }}" class="mr-2" style="height: 15px; width: 15px"></i>
+        @endif
+        {{ $slot }}
+    </button>
+@endif
\ No newline at end of file