diff --git a/composer.json b/composer.json
index 3a301df..4f14069 100644
--- a/composer.json
+++ b/composer.json
@@ -15,7 +15,7 @@
     ],
     "require": {
         "php": "^8.0",
-        "filament/filament": "^2.9.15"
+        "filament/filament": "^3.0-stable"
     },
     "require-dev": {
         "laravel/pint": "^1.10"
diff --git a/readme.md b/readme.md
index 84db849..5c9ac71 100644
--- a/readme.md
+++ b/readme.md
@@ -14,18 +14,33 @@ Never confuse your tabs with different Filament environments again.
 
 ## Installation via Composer
 
-**Requires PHP > 8.0 and Filament > 2.9.15**
+| Plugin Version | Filament Version | PHP Version |
+|----------------|-----------------|-------------|
+| 1.x            | ^2.9.15   | \> 8.0      |
+| 2.x            | 3.x             | \> 8.1      |
 
 ```bash
 composer require pxlrbt/filament-environment-indicator
 ```
 
+## Usage
+
+To use this plugin register it in your panel configuration:
+
+```php
+use pxlrbt\FilamentEnvironmentIndicator\EnvironmentIndicatorPlugin;
+
+$panel
+    ->plugins([
+        EnvironmentIndicatorPlugin::make(),
+    ]);
+```
+
 ## Configuration
 
 Out of the box, this plugin adds a colored border to the top of the admin panel and a badge next to the search bar.
 
-
-You can customize any behaviour, by using Filament's `::configureUsing()` syntax inside your ServiceProviders `boot()` method.
+You can customize any behaviour via the plugin object.
 
 ### Customizing the view
 Use `php artisan vendor:publish --tag="filament-environment-indicator-views"` to publish the view to the `resources/views/vendor/filament-environment-indicator` folder. After this you can customize it as you wish!
@@ -35,27 +50,30 @@ Use `php artisan vendor:publish --tag="filament-environment-indicator-views"` to
 By default, the package checks whether you have Spatie permissions plugin installed and checks for a role called `super_admin`. You can further customize whether the indicators should be shown.
 
 ```php
-use pxlrbt\FilamentEnvironmentIndicator\FilamentEnvironmentIndicator;
+use pxlrbt\FilamentEnvironmentIndicator\EnvironmentIndicatorPlugin;
 
-FilamentEnvironmentIndicator::configureUsing(function (FilamentEnvironmentIndicator $indicator) {
-    $indicator->visible = fn () => auth()->user()?->can('see_indicator');
-}, isImportant: true);
+$panel->plugins([
+    EnvironmentIndicatorPlugin::make()
+        ->visible(fn () => auth()->user()?->can('see_indicator'))
+]);
 ```
 
 ### Colors
 
-You can overwrite the default colors if you want your own colors or need to add more. The color accepts any CSS color value.
+You can overwrite the default colors if you want your own colors or need to add more. The `->color()`method accepts any Filament's Color object or a closure that returns a color object.
 
 ```php
-use pxlrbt\FilamentEnvironmentIndicator\FilamentEnvironmentIndicator;
-
-FilamentEnvironmentIndicator::configureUsing(function (FilamentEnvironmentIndicator $indicator) {
-    $indicator->color = fn () => match (app()->environment()) {
-        'production' => null,
-        'staging' => 'orange',
-        default => 'blue',
-    };
-}, isImportant: true);
+use pxlrbt\FilamentEnvironmentIndicator\EnvironmentIndicatorPlugin;
+use Filament\Support\Colors\Color;
+
+$panel->plugins([
+    EnvironmentIndicatorPlugin::make()
+        ->color(fn () => match (app()->environment()) {
+            'production' => null,
+            'staging' => Color::Orange,
+            default => Color::Blue,
+        })
+]);
 ```
 
 ### Indicators
@@ -63,12 +81,14 @@ FilamentEnvironmentIndicator::configureUsing(function (FilamentEnvironmentIndica
 By default, both indicators are displayed. You can turn them off separately.
 
 ```php
-use pxlrbt\FilamentEnvironmentIndicator\FilamentEnvironmentIndicator;
-
-FilamentEnvironmentIndicator::configureUsing(function (FilamentEnvironmentIndicator $indicator) {
-    $indicator->showBadge = fn () => false;
-    $indicator->showBorder = fn () => true;
-}, isImportant: true);
+use pxlrbt\FilamentEnvironmentIndicator\EnvironmentIndicatorPlugin;
+use Filament\Support\Colors\Color;
+
+$panel->plugins([
+    EnvironmentIndicatorPlugin::make()
+        ->showBadge(false)
+        ->showBorder(true)            
+]);
 ```
 
 ## Contributing
diff --git a/resources/views/badge.blade.php b/resources/views/badge.blade.php
index 8adc7c1..131a3a0 100644
--- a/resources/views/badge.blade.php
+++ b/resources/views/badge.blade.php
@@ -1,6 +1,17 @@
 <div
-    class="environment-indicator hidden sm:flex items-center h-10 rounded-lg px-3 text-white text-sm font-medium"
-    style="background-color: {{ $color }}; margin-right: 1rem;"
+    class="
+        environment-indicator hidden sm:flex items-center h-9 mr-4 px-3 text-sm font-medium
+        rounded-lg shadow-sm ring-1
+        ring-custom-600/20 bg-custom-50 text-custom-600
+        dark:ring-custom-400/30 dark:bg-custom-400/10 dark:text-custom-400
+    "
+    style="
+        --c-50: {{ $color[50] }};
+        --c-300: {{ $color[300] }};
+        --c-400: {{ $color[400] }};
+        --c-600: {{ $color[600] }};
+        margin-right: 1rem;
+    "
 >
     {{ $environment }}
 </div>
diff --git a/src/EnvironmentIndicatorPlugin.php b/src/EnvironmentIndicatorPlugin.php
new file mode 100644
index 0000000..187fb2f
--- /dev/null
+++ b/src/EnvironmentIndicatorPlugin.php
@@ -0,0 +1,143 @@
+<?php
+
+namespace pxlrbt\FilamentEnvironmentIndicator;
+
+use Closure;
+use Filament\Contracts\Plugin;
+use Filament\Panel;
+use Filament\Support\Colors\Color;
+use Filament\Support\Concerns\EvaluatesClosures;
+use Illuminate\Support\Facades\View;
+use Illuminate\Support\HtmlString;
+
+class EnvironmentIndicatorPlugin implements Plugin
+{
+    use EvaluatesClosures;
+
+    public bool | Closure | null $visible = null;
+    public bool | Closure | null $showBadge = null;
+    public bool | Closure | null $showBorder = null;
+
+    public array | Closure | null $color = null;
+
+    public static function make(): static
+    {
+        $plugin = app(static::class);
+
+        // Defaults
+        $plugin->visible(function () {
+            if (($user = auth()->user()) === null) {
+                return false;
+            }
+
+            if (method_exists($user, 'hasRole')) {
+                return $user->hasRole('super_admin');
+            }
+
+            return true;
+        });
+
+        $plugin->color(fn () => match (app()->environment()) {
+            'production' => Color::Red,
+            'staging' => Color::Orange,
+            'development' => Color::Blue,
+            default => Color::Pink,
+        });
+
+        $plugin->showBadge(fn () => match (app()->environment()) {
+            'production', 'prod' => false,
+            default => true,
+        });
+
+        $plugin->showBorder(fn () => match (app()->environment()) {
+            'production', 'prod' => false,
+            default => true,
+        });
+
+        return $plugin;
+    }
+
+    public function getId(): string
+    {
+        return 'environment-indicator';
+    }
+
+    public function boot(Panel $panel): void
+    {
+        //
+    }
+
+    public function register(Panel $panel): void
+    {
+        $panel->renderHook('panels::global-search.start', function () {
+            if (! $this->evaluate($this->visible)) {
+                return '';
+            }
+
+            if (! $this->evaluate($this->showBadge)) {
+                return '';
+            }
+
+            return View::make('filament-environment-indicator::badge', [
+                'color' => $this->getColor(),
+                'environment' => ucfirst(app()->environment()),
+            ]);
+        });
+
+        $panel->renderHook('panels::styles.after', function () {
+            if (! $this->evaluate($this->visible)) {
+                return '';
+            }
+
+            if (! $this->evaluate($this->showBorder)) {
+                return '';
+            }
+
+            return new HtmlString("
+                <style>
+                    .fi-topbar,
+                    .fi-sidebar {
+                        border-top: 5px solid rgb({$this->getColor()['500']}) !important;
+                    }
+
+                    .fi-topbar {
+                        height: calc(4rem + 5px) !important;
+                    }
+                </style>
+            ");
+        });
+    }
+
+    public function visible(bool|Closure $visible): static
+    {
+        $this->visible = $visible;
+
+        return $this;
+    }
+
+    public function showBadge(bool|Closure $showBadge = true): static
+    {
+        $this->showBadge = $showBadge;
+
+        return $this;
+    }
+
+    public function showBorder(bool|Closure $showBorder = true): static
+    {
+        $this->showBorder = $showBorder;
+
+        return $this;
+    }
+
+    public function color(array|Closure $color = Color::Pink): static
+    {
+        $this->color = $color;
+
+        return $this;
+    }
+
+    protected function getColor(): array
+    {
+        return $this->evaluate($this->color);
+    }
+}
diff --git a/src/FilamentEnvironmentIndicator.php b/src/FilamentEnvironmentIndicator.php
deleted file mode 100644
index a2bd2c6..0000000
--- a/src/FilamentEnvironmentIndicator.php
+++ /dev/null
@@ -1,122 +0,0 @@
-<?php
-
-namespace pxlrbt\FilamentEnvironmentIndicator;
-
-use Closure;
-use Filament\Facades\Filament;
-use Filament\Support\Concerns\Configurable;
-use Illuminate\Support\Facades\View;
-use Illuminate\Support\HtmlString;
-
-class FilamentEnvironmentIndicator
-{
-    use Configurable;
-
-    public Closure $color;
-
-    public Closure $visible;
-
-    public Closure $showBadge;
-
-    public Closure $showBorder;
-
-    protected function setUp(): void
-    {
-        $this->color = Closure::fromCallable([$this, 'color']);
-        $this->visible = Closure::fromCallable([$this, 'visible']);
-        $this->showBadge = Closure::fromCallable([$this, 'showBadge']);
-        $this->showBorder = Closure::fromCallable([$this, 'showBorder']);
-    }
-
-    public static function boot(): void
-    {
-        $self = new static();
-        $self->configure();
-
-        if (! ($self->visible)()) {
-            return;
-        }
-
-        $self->injectBadge();
-        $self->injectBorderStyle();
-    }
-
-    public function injectBadge(): void
-    {
-        if (! ($this->showBadge)()) {
-            return;
-        }
-
-        $color = ($this->color)();
-
-        if ($color === null) {
-            return;
-        }
-
-        Filament::registerRenderHook('global-search.start', fn () => View::make('filament-environment-indicator::badge', [
-            'color' => $color,
-            'environment' => ucfirst(app()->environment()),
-        ]));
-    }
-
-    public function injectBorderStyle(): void
-    {
-        if (! ($this->showBorder)()) {
-            return;
-        }
-
-        $color = ($this->color)();
-
-        if ($color === null) {
-            return;
-        }
-
-        Filament::registerRenderHook('styles.end', fn () => new HtmlString("
-            <style>
-                .filament-app-layout,
-                .filament-sidebar {
-                    border-top: 5px solid {$color} !important;
-                }
-            </style>
-        "));
-    }
-
-    public function visible(): bool
-    {
-        if (($user = auth()->user()) === null) {
-            return false;
-        }
-
-        if (method_exists($user, 'hasRole')) {
-            return $user->hasRole('super_admin');
-        }
-
-        return true;
-    }
-
-    public function showBorder(): bool
-    {
-        return match (app()->environment()) {
-            'production', 'prod' => false,
-            default => true,
-        };
-    }
-
-    public function showBadge(): bool
-    {
-        return match (app()->environment()) {
-            'production', 'prod' => false,
-            default => true,
-        };
-    }
-
-    public function color(): string
-    {
-        return match (app()->environment()) {
-            'production' => '#dc2626',
-            'staging' => '#f97316',
-            'development' => '#2563eb',
-            default => '#c026d3',
-        };
-    }
-}
diff --git a/src/FilamentEnvironmentIndicatorServiceProvider.php b/src/FilamentEnvironmentIndicatorServiceProvider.php
index bbb62a0..0f0eb02 100644
--- a/src/FilamentEnvironmentIndicatorServiceProvider.php
+++ b/src/FilamentEnvironmentIndicatorServiceProvider.php
@@ -2,11 +2,10 @@
 
 namespace pxlrbt\FilamentEnvironmentIndicator;
 
-use Filament\Facades\Filament;
-use Filament\PluginServiceProvider;
+use Spatie\LaravelPackageTools\PackageServiceProvider;
 use Spatie\LaravelPackageTools\Package;
 
-class FilamentEnvironmentIndicatorServiceProvider extends PluginServiceProvider
+class FilamentEnvironmentIndicatorServiceProvider extends PackageServiceProvider
 {
     public static string $name = 'filament-environment-indicator';
 
@@ -16,9 +15,4 @@ public function configurePackage(Package $package): void
             ->name(static::$name)
             ->hasViews();
     }
-
-    public function packageBooted(): void
-    {
-        Filament::serving(fn () => FilamentEnvironmentIndicator::boot());
-    }
 }