diff --git a/app/View/Components/ButtonCRM.php b/app/View/Components/ButtonCRM.php
new file mode 100644
index 0000000..f922653
--- /dev/null
+++ b/app/View/Components/ButtonCRM.php
@@ -0,0 +1,37 @@
+<?php
+
+namespace App\View\Components;
+
+use Closure;
+use Illuminate\Contracts\View\View;
+use Illuminate\View\Component;
+
+class ButtonCRM extends Component
+{
+    /**
+     * Create a new component instance.
+     */
+    public $type;
+    public $route;
+    public $url;
+    public $icon;
+    public $variant;
+    public $size;
+    public function __construct($type = 'button', $route = null, $url = null, $icon = null, $variant = 'primary', $size = 'md')
+    {
+        $this->type = $type;
+        $this->route = $route;
+        $this->url = $url;
+        $this->icon = $icon;
+        $this->variant = $variant;
+        $this->size = $size;
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     */
+    public function render(): View|Closure|string
+    {
+        return view('components.button-c-r-m');
+    }
+}
diff --git a/public/css/style.css b/public/css/style.css
index 374fb1d..1b486c4 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -20447,4 +20447,4 @@ div.tox .tox-button::before {
 
 .wizard.vertical > .actions > ul > li {
   margin: 0 0 0 0.7em;
-}
+}
\ No newline at end of file
diff --git a/resources/views/administrator/pages/block/Sync/All.blade.php b/resources/views/administrator/pages/block/Sync/All.blade.php
index d0e61e5..a701a80 100644
--- a/resources/views/administrator/pages/block/Sync/All.blade.php
+++ b/resources/views/administrator/pages/block/Sync/All.blade.php
@@ -1 +1 @@
-<a href="{{ route('package.sync.all') }}" class="btn btn-outline-secondary"><i class="fas fa-sync"></i> Sync All Package</a>
+<x-button-crm type="button" variant="primary" size="sm" route="package.sync.all" icon="refresh-cw">Sync All Package</x-button-crm>
\ No newline at end of file
diff --git a/resources/views/administrator/pages/block/Sync/Datacenter.blade.php b/resources/views/administrator/pages/block/Sync/Datacenter.blade.php
index 56ed9a8..4980956 100644
--- a/resources/views/administrator/pages/block/Sync/Datacenter.blade.php
+++ b/resources/views/administrator/pages/block/Sync/Datacenter.blade.php
@@ -1,3 +1,3 @@
-<a href="{{ route('package.datacenter.create') }}" class="btn btn-outline-secondary"><i class="fas fa-plus-circle"></i> Add Datacenter</a>
+<x-button-crm type="button" variant="primary" size="sm" route="package.datacenter.create" icon="plus-circle">Add Datacenter</x-button-crm>
 @include("administrator.pages.block.Sync.All")
-<a href="{{ route('package.datacenter.sync') }}" class="btn btn-outline-secondary"><i class="fas fa-sync"></i> Sync Datacenter</a>
+<x-button-crm type="button" variant="primary" size="sm" route="package.datacenter.sync" icon="refresh-cw">Sync Datacenter</x-button-crm>
\ No newline at end of file
diff --git a/resources/views/administrator/pages/package/datacenter/index.blade.php b/resources/views/administrator/pages/package/datacenter/index.blade.php
index 6ed5d75..9455199 100644
--- a/resources/views/administrator/pages/package/datacenter/index.blade.php
+++ b/resources/views/administrator/pages/package/datacenter/index.blade.php
@@ -21,10 +21,10 @@
             </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' => 'name', 'label' => 'Name'],
+            ['key' => 'v_center.host', 'label' => 'Vcenter Host'],
+            ['key' => 'action', 'label' => 'Action'],
+        ]" />
             </div>
 
         </div>
@@ -35,10 +35,9 @@
         </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
+        @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/components/README.md b/resources/views/components/README.md
deleted file mode 100644
index d2d477e..0000000
--- a/resources/views/components/README.md
+++ /dev/null
@@ -1,127 +0,0 @@
-# Service Card Component
-
-## Overview
-The `service-card` component is a reusable Blade component designed to display service statistics in a clean, modern card format with hover effects and tooltips.
-
-## Usage
-
-### Basic Usage
-```blade
-<x-service-card 
-    icon="box"
-    iconColor="text-green-400"
-    badgeColor="bg-green-400"
-    title="Services"
-    value="5"
-    label="Active Services"
-    tooltip="Total active services"
-/>
-```
-
-### With Animation Delay
-```blade
-<x-service-card 
-    icon="credit-card"
-    iconColor="text-primary"
-    badgeColor="bg-primary"
-    title="Balance"
-    value="1,000,000 đ"
-    label="Account Balance"
-    tooltip="Current account balance"
-    :animationDelay="0.2"
-/>
-```
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `icon` | string | `'box'` | Lucide icon name |
-| `iconColor` | string | `'text-green-400'` | Tailwind CSS color class for icon |
-| `badgeColor` | string | `'bg-green-400'` | Tailwind CSS color class for badge |
-| `title` | string | `''` | Badge title text |
-| `value` | mixed | `0` | Main value to display |
-| `label` | string | `''` | Label text below value |
-| `tooltip` | string | `''` | Tooltip text on hover |
-| `animationDelay` | float | `0` | Animation delay in seconds |
-
-## Features
-
-- **Responsive Design**: Adapts to different screen sizes
-- **Hover Effects**: Scale animation on hover
-- **Tooltips**: Alpine.js powered tooltips with smooth transitions
-- **Animation**: Staggered fade-in animations
-- **Accessibility**: Proper ARIA attributes and keyboard navigation
-- **Internationalization**: Supports Laravel's translation system
-
-## Styling
-
-The component uses Tailwind CSS classes and includes:
-- Shadow effects
-- Rounded corners
-- Smooth transitions
-- Background decorations
-- Responsive grid layout
-
-## Dependencies
-
-- **Laravel Blade**: For component rendering
-- **Tailwind CSS**: For styling
-- **Alpine.js**: For interactive features
-- **Lucide Icons**: For icon display
-- **Animate.css**: For animations (optional)
-
-## Example Implementation
-
-```php
-// In your controller
-$serviceCards = [
-    [
-        'icon' => 'box',
-        'iconColor' => 'text-green-400',
-        'badgeColor' => 'bg-green-400',
-        'title' => __('Services'),
-        'value' => count($services),
-        'label' => __('Services'),
-        'tooltip' => __('Total active services')
-    ],
-    // ... more cards
-];
-
-return view('dashboard', compact('serviceCards'));
-```
-
-```blade
-<!-- In your Blade view -->
-<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-5">
-    @foreach($serviceCards as $index => $card)
-        <x-service-card 
-            :icon="$card['icon']"
-            :iconColor="$card['iconColor']"
-            :badgeColor="$card['badgeColor']"
-            :title="$card['title']"
-            :value="$card['value']"
-            :label="$card['label']"
-            :tooltip="$card['tooltip']"
-            :animationDelay="$index * 0.1"
-        />
-    @endforeach
-</div>
-```
-
-## Customization
-
-You can customize the component by:
-1. Modifying the component file directly
-2. Publishing the component to your app directory
-3. Creating a new component that extends this one
-4. Using CSS custom properties for theming
-
-## Best Practices
-
-1. **Use meaningful icons**: Choose Lucide icons that represent the data
-2. **Consistent colors**: Use a consistent color scheme across cards
-3. **Proper translations**: Always use Laravel's translation system
-4. **Accessible text**: Provide meaningful tooltips and labels
-5. **Performance**: Keep animation delays reasonable (0.1s intervals)
-6. **Mobile-first**: Ensure cards work well on mobile devices 
\ No newline at end of file
diff --git a/resources/views/components/button-c-r-m.blade.php b/resources/views/components/button-c-r-m.blade.php
new file mode 100644
index 0000000..7e1061b
--- /dev/null
+++ b/resources/views/components/button-c-r-m.blade.php
@@ -0,0 +1,54 @@
+@php
+    $tag = 'button';
+    $href = null;
+
+    if ($route) {
+        $href = route($route);
+        $tag = 'a';
+    } elseif ($url) {
+        $href = $url;
+        $tag = 'a';
+    } elseif ($attributes->has('href')) {
+        $href = $attributes->get('href');
+        $tag = 'a';
+    }
+
+    $baseClasses = 'd-inline-flex gap-2 align-items-center justify-content-center text-white border-0 shadow-md px-2 py-1 rounded-2';
+
+    $variants = [
+        'primary' => 'bg-primary',
+        'secondary' => 'bg-secondary',
+        'outline' => 'bg-outline',
+        'ghost' => 'bg-ghost',
+        'link' => 'bg-link',
+        'destructive' => 'bg-destructive',
+    ];
+
+    $sizes = [
+        'default' => 'h-10',
+        'sm' => 'h-6',
+        'lg' => 'h-12',
+        'icon' => 'h-10',
+    ];
+
+    $variantClass = $variants[$variant] ?? $variants['primary'];
+    $sizeClass = $sizes[$size] ?? $sizes['default'];
+
+    $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="{{ $type }}" {{ $attributes->merge(['class' => $classes]) }}>
+        @if($icon)
+            <i data-lucide="{{ $icon }}" class="w-1 h-1 mr-2"></i>
+        @endif
+        {{ $slot }}
+    </button>
+@endif
\ No newline at end of file