diff --git a/composer.json b/composer.json
index 6869427..4f95e91 100644
--- a/composer.json
+++ b/composer.json
@@ -5,7 +5,7 @@
     "require": {
         "php": "^8.1",
         "spatie/laravel-package-tools": "^1.13",
-        "filament/filament": "^2.16"
+        "filament/filament": "^3.0"
     },
     "require-dev": {
         "laravel/pint": "^1.3",
@@ -40,7 +40,7 @@
             ]
         }
     },
-    "minimum-stability": "stable",
+    "minimum-stability": "dev",
     "config": {
         "allow-plugins": {
             "pestphp/pest-plugin": true
diff --git a/resources/views/components/base-alert-box.blade.php b/resources/views/components/base-alert-box.blade.php
index 71f3e44..a8c2192 100644
--- a/resources/views/components/base-alert-box.blade.php
+++ b/resources/views/components/base-alert-box.blade.php
@@ -2,11 +2,11 @@
 
 @php
     $backgroundClass = match($type) {
-        'primary' => 'bg-primary-500',
-        'success' => 'bg-success-500',
-        'warning' => 'bg-warning-500',
-        'danger' => 'bg-danger-500',
-        'secondary' => 'bg-gray-500',
+        'primary' => '--c-300: var(--primary-300);--c-400: var(--primary-400);--c-500: var(--primary-500);--c-600: var(--primary-600);',
+        'success' => '--c-300: var(--success-300);--c-400: var(--success-400);--c-500: var(--success-500);--c-600: var(--success-600);',
+        'warning' => '--c-300: var(--warning-300);--c-400: var(--warning-400);--c-500: var(--warning-500);--c-600: var(--warning-600);',
+        'danger' => '--c-300: var(--danger-300);--c-400: var(--danger-400);--c-500: var(--danger-500);--c-600: var(--danger-600);',
+        'secondary' => '--c-300: var(--gray-300);--c-400: var(--gray-400);--c-500: var(--gray-500);--c-600: var(--gray-600);',
     };
 
     $textColor = 'text-gray-50';
@@ -14,11 +14,11 @@
 @endphp
 <div {{ $attributes
         ->merge($extraAttributes)
+        ->style(styleList: $backgroundClass)
         ->class(
             [
-                'filament-forms-text-input-component flex items-center space-x-2 rtl:space-x-reverse group p-5 rounded-lg',
-                $backgroundClass,
-                $textColor
+                'filament-forms-text-input-component flex items-center space-x-2 rtl:space-x-reverse group p-4 rounded-lg bg-custom-600',
+                'text-white'
             ]
         )
     }}
diff --git a/resources/views/widgets/filament-alertbox.blade.php b/resources/views/widgets/filament-alertbox.blade.php
index 748d23b..4f01856 100644
--- a/resources/views/widgets/filament-alertbox.blade.php
+++ b/resources/views/widgets/filament-alertbox.blade.php
@@ -1,4 +1,4 @@
-<x-filament::widget class="filament-alert-box-widget">
+<x-filament-widgets::widget class="filament-alert-box-widget">
     <x-filament-alertbox::base-alert-box
         :type="$this->getType()"
         :extraAttributes="$this->getExtraAttributes()"
@@ -6,4 +6,4 @@
         :label="$this->getLabel()"
         :helperText="$this->getHelperText()"
     />
-</x-filament::widget>
\ No newline at end of file
+</x-filament-widgets::widget>
\ No newline at end of file
diff --git a/src/Concerns/Forms/HasType.php b/src/Concerns/Forms/HasType.php
index 638a241..4d2dc80 100644
--- a/src/Concerns/Forms/HasType.php
+++ b/src/Concerns/Forms/HasType.php
@@ -24,7 +24,7 @@ public function warning(): static
     {
         $this->type = 'warning';
 
-        $this->icon = 'heroicon-o-exclamation';
+        $this->icon = 'heroicon-o-exclamation-triangle';
 
         return $this;
     }
diff --git a/src/FilamentAlertBoxServiceProvider.php b/src/FilamentAlertBoxServiceProvider.php
index a1cf3ce..44235c6 100644
--- a/src/FilamentAlertBoxServiceProvider.php
+++ b/src/FilamentAlertBoxServiceProvider.php
@@ -2,11 +2,13 @@
 
 namespace KoalaFacade\FilamentAlertBox;
 
-use Filament\PluginServiceProvider;
 use Spatie\LaravelPackageTools\Package;
+use Spatie\LaravelPackageTools\PackageServiceProvider;
 
-class FilamentAlertBoxServiceProvider extends PluginServiceProvider
+class FilamentAlertBoxServiceProvider extends PackageServiceProvider
 {
+    public static string $name = 'filament-alertbox';
+
     /**
      * @var string[]
      */
@@ -17,7 +19,7 @@ class FilamentAlertBoxServiceProvider extends PluginServiceProvider
     public function configurePackage(Package $package): void
     {
         $package
-            ->name(name: 'filament-alertbox')
+            ->name(name: static::$name)
             ->hasViews();
     }
 }
diff --git a/src/Widgets/AlertBoxWidget.php b/src/Widgets/AlertBoxWidget.php
index dc4b8a7..c612ad3 100644
--- a/src/Widgets/AlertBoxWidget.php
+++ b/src/Widgets/AlertBoxWidget.php
@@ -6,13 +6,12 @@
 use Filament\Support\Concerns\EvaluatesClosures;
 use Filament\Support\Concerns\HasExtraAttributes;
 use Filament\Tables\Columns\Concerns\HasLabel;
-use Illuminate\Contracts\View\Factory;
+use Filament\Widgets\ChartWidget;
 use Illuminate\Contracts\View\View;
 use KoalaFacade\FilamentAlertBox\Concerns\HasIcon;
 use KoalaFacade\FilamentAlertBox\Concerns\HasType;
-use Livewire\Component;
 
-class AlertBoxWidget extends Component
+class AlertBoxWidget extends ChartWidget
 {
     use EvaluatesClosures,
         HasExtraAttributes,
@@ -23,12 +22,8 @@ class AlertBoxWidget extends Component
 
     protected static string $view = 'filament-alertbox::widgets.filament-alertbox';
 
-    /** @var int | string | array<int, string> */
     protected int | string | array $columnSpan = 1;
 
-    /**
-     * @return int | string | array<int, string>
-     */
     public function getColumnSpan(): int | string | array
     {
         return $this->columnSpan;
@@ -39,8 +34,11 @@ public static function canView(): bool
         return true;
     }
 
-    public function render(): Factory | View
+    public function render(): View
     {
+        /**
+         * @phpstan-ignore-next-line
+         */
         return view(static::$view);
     }
 }
diff --git a/tests/Livewire/Forms/AlertBoxBackgroundColorTest.php b/tests/Livewire/Forms/AlertBoxBackgroundColorTest.php
index ae8c449..8454316 100644
--- a/tests/Livewire/Forms/AlertBoxBackgroundColorTest.php
+++ b/tests/Livewire/Forms/AlertBoxBackgroundColorTest.php
@@ -15,7 +15,7 @@
         ];
 
         livewire(name: CreatePost::class)
-            ->assertSee(values: baseClassWith(backgroundColor: 'bg-success-500', textColor: 'text-gray-50'));
+            ->assertSee(values: '--c-300: var(--success-300);--c-400: var(--success-400);--c-500: var(--success-500);--c-600: var(--success-600);');
     });
 
 it(description: 'can show success background color when type is warning')
@@ -27,7 +27,7 @@
         ];
 
         livewire(name: CreatePost::class)
-            ->assertSee(values: baseClassWith(backgroundColor: 'bg-warning-500', textColor: 'text-gray-50'));
+            ->assertSee(values: '--c-300: var(--warning-300);--c-400: var(--warning-400);--c-500: var(--warning-500);--c-600: var(--warning-600);');
     });
 
 it(description: 'can show success background color when type is primary')
@@ -35,11 +35,11 @@
         CreatePost::$formSchema = [
             AlertBox::make()
                 ->helperText(text: 'tests')
-                ->primary(),
+                ->info(),
         ];
 
         livewire(name: CreatePost::class)
-            ->assertSee(values: baseClassWith(backgroundColor: 'bg-primary-500', textColor: 'text-gray-50'));
+            ->assertSee(values: '--c-300: var(--primary-300);--c-400: var(--primary-400);--c-500: var(--primary-500);--c-600: var(--primary-600);');
     });
 
 it(description: 'can show success background color when type is danger')
@@ -51,5 +51,5 @@
         ];
 
         livewire(name: CreatePost::class)
-            ->assertSee(values: baseClassWith(backgroundColor: 'bg-danger-500', textColor: 'text-gray-50'));
+            ->assertSee(values: '--c-300: var(--danger-300);--c-400: var(--danger-400);--c-500: var(--danger-500);--c-600: var(--danger-600);');
     });
diff --git a/tests/Livewire/Widget/WidgetOkTest.php b/tests/Livewire/Widget/WidgetOkTest.php
index a6b3c1d..6bff816 100644
--- a/tests/Livewire/Widget/WidgetOkTest.php
+++ b/tests/Livewire/Widget/WidgetOkTest.php
@@ -8,6 +8,6 @@
     ->tap(callable: function () {
         livewire(name: WidgetTestComponent::class)->assertOk()
             ->assertSee(values: ['Test', 'please shut u freakin mouth', 'icon px-3 mr-2'])
-            ->assertSee(values: baseClassWith(backgroundColor: 'bg-success-500', textColor: 'text-gray-50'));
+            ->assertSee(values: '--c-300: var(--success-300);--c-400: var(--success-400);--c-500: var(--success-500);--c-600: var(--success-600);');
     })
     ->group('widget');
diff --git a/tests/Livewire/Widget/WidgetTestComponent.php b/tests/Livewire/Widget/WidgetTestComponent.php
index 2e8f28b..7eaf620 100644
--- a/tests/Livewire/Widget/WidgetTestComponent.php
+++ b/tests/Livewire/Widget/WidgetTestComponent.php
@@ -4,12 +4,11 @@
 
 use Closure;
 use Illuminate\Contracts\Support\Htmlable;
-use Illuminate\Support\HtmlString;
 use KoalaFacade\FilamentAlertBox\Widgets\AlertBoxWidget;
 
 class WidgetTestComponent extends AlertBoxWidget
 {
-    public string | Closure | null $icon = 'heroicon-o-exclamation';
+    public string | Closure | null $icon = 'heroicon-o-exclamation-triangle';
 
     public string $type = 'success';
 
diff --git a/tests/TestCase.php b/tests/TestCase.php
index 3f660bb..4a97891 100644
--- a/tests/TestCase.php
+++ b/tests/TestCase.php
@@ -7,6 +7,7 @@
 use Filament\FilamentServiceProvider;
 use Filament\Forms\FormsServiceProvider;
 use Filament\Support\SupportServiceProvider;
+use Filament\Widgets\WidgetsServiceProvider;
 use Illuminate\Encryption\Encrypter;
 use Illuminate\Foundation\Application;
 use Illuminate\Support\ServiceProvider;
@@ -27,6 +28,7 @@ protected function getPackageProviders($app): array
         return [
             FilamentAlertBoxServiceProvider::class,
             FilamentServiceProvider::class,
+            WidgetsServiceProvider::class,
             ViewServiceProvider::class,
             LivewireServiceProvider::class,
             FormsServiceProvider::class,
diff --git a/tests/Unit/AlertBoxIconTest.php b/tests/Unit/AlertBoxIconTest.php
index 1b1ea07..5c1eb03 100644
--- a/tests/Unit/AlertBoxIconTest.php
+++ b/tests/Unit/AlertBoxIconTest.php
@@ -44,5 +44,5 @@
         $alertBox = AlertBox::make()
             ->warning();
 
-        expect(value: $alertBox->getIcon())->toEqual(expected: 'heroicon-o-exclamation');
+        expect(value: $alertBox->getIcon())->toEqual(expected: 'heroicon-o-exclamation-triangle');
     });