diff --git a/app/View/Components/Alert.php b/app/View/Components/Alert.php
new file mode 100644
index 000000000..eba2d61af
--- /dev/null
+++ b/app/View/Components/Alert.php
@@ -0,0 +1,96 @@
+<?php
+
+namespace App\View\Components;
+
+use App\Abstracts\View\Component;
+
+class Alert extends Component
+{
+    /** @var bool */
+    public $rounded;
+
+    /** @var bool */
+    public $border;
+
+    /** @var string */
+    public $color;
+
+    /** @var string */
+    public $icon;
+
+    /** @var string */
+    public $title;
+
+    /** @var string */
+    public $description;
+
+    /** @var array */
+    public $list;
+
+    /** @var array */
+    public $actions;
+
+    /** @var bool */
+    public $dismiss;
+
+    /**
+     * Create a new component instance.
+     *
+     * @return void
+     */
+    public function __construct(
+        bool $rounded = true, bool $border = false,
+        
+        string $color = '', string $icon = '',
+        
+        string $title = '', string $description = '',
+        array $list = [], array $actions = [],
+        bool $dismiss = false
+    ) {
+        $this->rounded = $rounded;
+        $this->border = $border;
+
+        $this->color = $this->getColor($color);
+        $this->icon = $this->getIcon($icon);
+
+        $this->title = $title;
+        $this->description = $description;
+
+        $this->list = $list;
+        $this->actions = $actions;
+
+        $this->dismiss = $dismiss;
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     *
+     * @return \Illuminate\Contracts\View\View|string
+     */
+    public function render()
+    {
+        return view('components.alert.index');
+    }
+
+    protected function getColor($color)
+    {
+        if (! empty($color)) {
+            return $color;
+        }
+
+        $color = 'green';
+
+        return $color;
+    }
+
+    protected function getIcon($icon)
+    {
+        if (! empty($icon)) {
+            return $icon;
+        }
+
+        $icon = 'check_circle';
+
+        return $icon;
+    }
+}
diff --git a/resources/lang/en-GB/general.php b/resources/lang/en-GB/general.php
index 07819fa41..849f76b98 100644
--- a/resources/lang/en-GB/general.php
+++ b/resources/lang/en-GB/general.php
@@ -228,6 +228,7 @@ return [
     'preview_mode'          => 'Preview Mode',
     'go_back'               => 'Go back to :type',
     'validation_error'      => 'Validation error',
+    'dismiss'               => 'Dismiss',
 
     'card' => [
         'cards'                 => 'Card|Cards',
diff --git a/resources/views/components/alert/index.blade.php b/resources/views/components/alert/index.blade.php
new file mode 100644
index 000000000..85b70dc39
--- /dev/null
+++ b/resources/views/components/alert/index.blade.php
@@ -0,0 +1,104 @@
+<div 
+    @class([
+        'rounded-md' => $rounded,
+        'border-l-4 border-' . $color . '-400' => $border,
+        'bg-' . $color . '-50',
+        'p-4',
+    ])
+    x-data
+>
+    <div class="flex">
+        <div class="flex-shrink-0">
+            <x-icon icon="{{ $icon }}" sharp class="h-5 w-5 text-{{ $color }}-400" />
+        </div>
+
+        <div class="ml-3">
+            <h3 class="text-sm font-medium text-{{ $color }}-800">
+                {{ $title }}
+            </h3>
+
+            <div class="mt-2 text-sm text-{{ $color }}-700">
+                <p>{{ $description }}</p>
+
+                @if ($list)
+                    <ul role="list" class="list-disc space-y-1 pl-5">
+                        @foreach ($list as $message)
+                            <li>{{ $message }}</li>
+                        @endforeach
+                    </ul>
+                @endif
+            </div>
+
+            @if ($actions) 
+                <div class="mt-4">
+                    <div class="-mx-2 -my-1.5 flex">
+                        @foreach ($actions as $action)
+                            @if ($action['type'] == 'button')
+                                <button type="button"
+                                    {{ $action['attributes'] }}
+                                    @class([
+                                        'ml-3' => ! $loop->first,
+                                        'rounded-md',
+                                        'bg-' . $color . '-50',
+                                        'px-2 py-1.5',
+                                        'text-sm font-medium',
+                                        'text-' . $color . '-800 hover:bg-' . $color . '-100',
+                                        'focus:outline-none focus:ring-2',
+                                        'focus:ring-' . $color . '-600',
+                                        'focus:ring-offset-2',
+                                        'focus:ring-offset-' . $color . '-50',
+                                    ])
+                                >
+                                    {{ $action['text'] }}
+                                </button>
+                            @else
+                                <a href="{{ $action['url'] }}"
+                                    @class([
+                                        'ml-3' => ! $loop->first,
+                                        'rounded-md',
+                                        'bg-' . $color . '-50',
+                                        'px-2 py-1.5',
+                                        'text-sm font-medium',
+                                        'text-' . $color . '-800 hover:bg-' . $color . '-100',
+                                        'focus:outline-none focus:ring-2',
+                                        'focus:ring-' . $color . '-600',
+                                        'focus:ring-offset-2',
+                                        'focus:ring-offset-' . $color . '-50',
+                                    ])
+                                >
+                                    {{ $action['text'] }}
+                                </a>
+                            @endif
+                        @endforeach
+                    </div>
+                </div>
+            @endif
+        </div>
+
+        @if ($dismiss)
+            <div class="ml-auto pl-3">
+                <div class="-mx-1.5 -my-1.5">
+                    <button type="button"
+                        x-on:click="$el.remove()"
+                        @class([
+                            'inline-flex',
+                            'rounded-md',
+                            'bg-' . $color . '-50',
+                            'p-1.5',
+                            'text-sm font-medium',
+                            'text-' . $color . '-500 hover:bg-' . $color . '-100',
+                            'focus:outline-none focus:ring-2',
+                            'focus:ring-' . $color . '-600',
+                            'focus:ring-offset-2',
+                            'focus:ring-offset-' . $color . '-50',
+                        ])
+                    >
+                        <span class="sr-only">{{ trans('general.dismiss') }}</span>
+
+                        <x-icon icon="close" sharp class="h-5 w-5 text-{{ $color }}-400" />
+                    </button>
+                </div>
+            </div>
+        @endif
+    </div>
+</div>