diff --git a/resources/views/components/domain-conflict-modal.blade.php b/resources/views/components/domain-conflict-modal.blade.php
index 218a7ef16..fe55a8ba5 100644
--- a/resources/views/components/domain-conflict-modal.blade.php
+++ b/resources/views/components/domain-conflict-modal.blade.php
@@ -30,14 +30,12 @@ class="flex absolute top-2 right-2 justify-center items-center w-8 h-8 rounded-f
                         </button>
                     </div>
                     <div class="relative w-auto">
-                        <div class="p-4 mb-4 text-white border-l-4 border-red-500 bg-red-600" role="alert">
-                            <p class="font-bold">Warning: Domain Conflict Detected</p>
-                            <p>{{ $slot ?? 'The following domain(s) are already in use by other resources. Using the same domain for multiple resources can cause routing conflicts and unpredictable behavior.' }}
-                            </p>
-                        </div>
+                        <x-callout type="danger" title="Domain Conflict Detected" class="mb-4">
+                            The following domain(s) are already in use by other resources. Using the same domain for
+                            multiple resources can cause routing conflicts and unpredictable behavior.
+                        </x-callout>
 
                         <div class="mb-4">
-                            <h4 class="mb-2 font-semibold">Conflicting Resources:</h4>
                             <ul class="space-y-2">
                                 @foreach ($conflicts as $conflict)
                                     <li class="flex items-start text-red-500">
@@ -58,9 +56,7 @@ class="underline hover:text-red-400">
                             </ul>
                         </div>
 
-                        <div class="p-4 mb-4 text-yellow-800 dark:text-yellow-200 border-l-4 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-700 rounded-lg"
-                            role="alert">
-                            <p class="font-bold">What will happen if you continue?</p>
+                        <x-callout type="warning" title="What will happen if you continue?" class="mb-4">
                             @if (isset($consequences))
                                 {{ $consequences }}
                             @else
@@ -71,7 +67,7 @@ class="underline hover:text-red-400">
                                     <li>SSL certificates might not work correctly</li>
                                 </ul>
                             @endif
-                        </div>
+                        </x-callout>
 
                         <div class="flex flex-wrap gap-2 justify-between mt-4">
                             <x-forms.button @click="modalOpen = false; $wire.set('showDomainConflictModal', false)"
diff --git a/resources/views/components/modal-confirmation.blade.php b/resources/views/components/modal-confirmation.blade.php
index 1c82614a6..1a3c88f80 100644
--- a/resources/views/components/modal-confirmation.blade.php
+++ b/resources/views/components/modal-confirmation.blade.php
@@ -201,9 +201,6 @@ class="flex absolute top-2 right-2 justify-center items-center w-8 h-8 rounded-f
                     @if (!empty($checkboxes))
                         <!-- Step 1: Select actions -->
                         <div x-show="step === 1">
-                            <div class="flex justify-between items-center">
-                                <h4>Actions</h4>
-                            </div>
                             @foreach ($checkboxes as $index => $checkbox)
                                 <div class="flex justify-between items-center mb-2">
                                     <x-forms.checkbox fullWidth :label="$checkbox['label']" :id="$checkbox['id']"
@@ -227,11 +224,9 @@ class="w-24 dark:bg-coolgray-200 dark:hover:bg-coolgray-300">
 
                     <!-- Step 2: Confirm deletion -->
                     <div x-show="step === 2">
-                        <div class="p-4 mb-4 text-white border-l-4 border-red-500 bg-error" role="alert">
-                            <p class="font-bold">Warning</p>
-                            <p>{!! $warningMessage ?: 'This operation is permanent and cannot be undone. Please think again before proceeding!' !!}
-                            </p>
-                        </div>
+                        <x-callout type="danger" title="Warning" class="mb-4">
+                            {!! $warningMessage ?: 'This operation is permanent and cannot be undone. Please think again before proceeding!' !!}
+                        </x-callout>
                         <div class="mb-4">The following actions will be performed:</div>
                         <ul class="mb-4 space-y-2">
                             @foreach ($actions as $action)
@@ -325,10 +320,9 @@ class="w-auto" isError
                     <!-- Step 3: Password confirmation -->
                     @if (!$disableTwoStepConfirmation)
                         <div x-show="step === 3 && confirmWithPassword">
-                            <div class="p-4 mb-4 text-white border-l-4 border-red-500 bg-error" role="alert">
-                                <p class="font-bold">Final Confirmation</p>
-                                <p>Please enter your password to confirm this destructive action.</p>
-                            </div>
+                            <x-callout type="danger" title="Final Confirmation" class="mb-4">
+                                Please enter your password to confirm this destructive action.
+                            </x-callout>
                             <div class="flex flex-col gap-2 mb-4">
                                 @php
                                     $passwordConfirm = Str::uuid();
diff --git a/resources/views/livewire/destination/new/docker.blade.php b/resources/views/livewire/destination/new/docker.blade.php
index 795b33e81..953c4d42e 100644
--- a/resources/views/livewire/destination/new/docker.blade.php
+++ b/resources/views/livewire/destination/new/docker.blade.php
@@ -18,8 +18,7 @@
         </form>
     </div>
 @else
-    <div class="text-gray-500 p-4 text-center">
-        <p>You don't have permission to create new destinations.</p>
-        <p class="text-sm">Please contact your team administrator for access.</p>
-    </div>
+    <x-callout type="warning" title="Permission Required">
+        You don't have permission to create new destinations. Please contact your team administrator for access.
+    </x-callout>
 @endcan
diff --git a/resources/views/livewire/project/shared/danger.blade.php b/resources/views/livewire/project/shared/danger.blade.php
index 3562caa02..11afe0b41 100644
--- a/resources/views/livewire/project/shared/danger.blade.php
+++ b/resources/views/livewire/project/shared/danger.blade.php
@@ -11,17 +11,8 @@
             confirmationLabel="Please confirm the execution of the actions by entering the Resource Name below"
             shortConfirmationLabel="Resource Name" />
     @else
-        <div class="flex items-center gap-2 p-4 border border-red-500 rounded-lg bg-red-50 dark:bg-red-900/20">
-            <svg class="w-5 h-5 text-red-500" fill="currentColor" viewBox="0 0 20 20">
-                <path fill-rule="evenodd"
-                    d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z"
-                    clip-rule="evenodd"></path>
-            </svg>
-            <div>
-                <div class="font-semibold text-red-700 dark:text-red-300">Insufficient Permissions</div>
-                <div class="text-sm text-red-600 dark:text-red-400">You don't have permission to delete this resource.
-                    Contact your team administrator for access.</div>
-            </div>
-        </div>
+        <x-callout type="danger" title="Insufficient Permissions">
+            You don't have permission to delete this resource. Contact your team administrator for access.
+        </x-callout>
     @endif
 </div>
diff --git a/resources/views/livewire/project/shared/destination.blade.php b/resources/views/livewire/project/shared/destination.blade.php
index 245449557..68ae44dc0 100644
--- a/resources/views/livewire/project/shared/destination.blade.php
+++ b/resources/views/livewire/project/shared/destination.blade.php
@@ -80,21 +80,11 @@ class="absolute bg-error -top-1 -left-1 badge "></div>
         <div class="flex flex-col gap-2">
             @if ($resource->persistentStorages()->count() > 0)
                 <h3>Add another server</h3>
-                <div
-                    class="p-4 bg-yellow-50 border border-yellow-200 rounded-lg dark:bg-yellow-900/20 dark:border-yellow-800">
-                    <div class="flex items-center">
-
-                        <div>
-                            <h4 class="text-sm font-medium text-yellow-800 dark:text-yellow-200">Cannot add additional
-                                servers</h4>
-                            <p class="text-sm text-yellow-700 dark:text-yellow-300 mt-1">
-                                This application has persistent storage volumes configured. Applications with persistent
-                                storage cannot be deployed to multiple servers as the storage would not be accessible
-                                across different servers.
-                            </p>
-                        </div>
-                    </div>
-                </div>
+                <x-callout type="warning" title="Cannot add additional servers">
+                    This application has persistent storage volumes configured. Applications with persistent
+                    storage cannot be deployed to multiple servers as the storage would not be accessible
+                    across different servers.
+                </x-callout>
             @elseif (count($networks) > 0)
                 <h3>Add another server</h3>
                 <div class="grid grid-cols-1 gap-4">
diff --git a/resources/views/livewire/project/shared/resource-operations.blade.php b/resources/views/livewire/project/shared/resource-operations.blade.php
index aa8f536ce..be7cbd7dc 100644
--- a/resources/views/livewire/project/shared/resource-operations.blade.php
+++ b/resources/views/livewire/project/shared/resource-operations.blade.php
@@ -28,13 +28,9 @@
                     @endforeach
                 @endforeach
             @else
-                <div
-                    class="p-4 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-700 rounded-lg">
-                    <div class="text-yellow-800 dark:text-yellow-200">
-                        <strong>Access Restricted:</strong> You don't have permission to clone resources. Contact your team
-                        administrator to request access.
-                    </div>
-                </div>
+                <x-callout type="warning" title="Access Restricted">
+                    You don't have permission to clone resources. Contact your team administrator to request access.
+                </x-callout>
             @endcan
         </div>
     </div>
@@ -71,13 +67,9 @@ class="font-bold dark:text-warning">{{ $resource->environment->project->name }}
                     <div>No projects found to move to</div>
                 @endforelse
             @else
-                <div
-                    class="p-4 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-700 rounded-lg">
-                    <div class="text-yellow-800 dark:text-yellow-200">
-                        <strong>Access Restricted:</strong> You don't have permission to move resources between projects or
-                        environments. Contact your team administrator to request access.
-                    </div>
-                </div>
+                <x-callout type="warning" title="Access Restricted">
+                    You don't have permission to move resources between projects or environments. Contact your team administrator to request access.
+                </x-callout>
             @endcan
         </div>
     </div>
diff --git a/resources/views/livewire/project/shared/tags.blade.php b/resources/views/livewire/project/shared/tags.blade.php
index 2c75deab9..85208b75b 100644
--- a/resources/views/livewire/project/shared/tags.blade.php
+++ b/resources/views/livewire/project/shared/tags.blade.php
@@ -10,12 +10,9 @@
             <x-forms.button type="submit">Add</x-forms.button>
         </form>
     @else
-        <div class="p-4 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-700 rounded-lg mt-4">
-            <div class="text-yellow-800 dark:text-yellow-200">
-                <strong>Access Restricted:</strong> You don't have permission to manage tags. Contact your team
-                administrator to request access.
-            </div>
-        </div>
+        <x-callout type="warning" title="Access Restricted" class="mt-4">
+            You don't have permission to manage tags. Contact your team administrator to request access.
+        </x-callout>
     @endcan
     @if (data_get($this->resource, 'tags') && count(data_get($this->resource, 'tags')) > 0)
         <h3 class="pt-4">Assigned Tags</h3>
diff --git a/resources/views/livewire/project/shared/webhooks.blade.php b/resources/views/livewire/project/shared/webhooks.blade.php
index f3403a402..ede1725b1 100644
--- a/resources/views/livewire/project/shared/webhooks.blade.php
+++ b/resources/views/livewire/project/shared/webhooks.blade.php
@@ -73,7 +73,9 @@
                     @endcan
                 </form>
             @else
-                You are using an official Git App. You do not need manual webhooks.
+                <x-callout type="info" title="Information">
+                    You are using an official Git App. You do not need manual webhooks.
+                </x-callout>
             @endif
         </div>
     @endif
diff --git a/resources/views/livewire/server/cloudflare-tunnel.blade.php b/resources/views/livewire/server/cloudflare-tunnel.blade.php
index ce1cb7e58..a56d77926 100644
--- a/resources/views/livewire/server/cloudflare-tunnel.blade.php
+++ b/resources/views/livewire/server/cloudflare-tunnel.blade.php
@@ -23,15 +23,11 @@ class="px-2 py-1 text-xs font-semibold text-green-800 bg-green-100 rounded dark:
             <div class="flex flex-col gap-2 pt-6">
                 @if ($isCloudflareTunnelsEnabled)
                     <div class="flex flex-col gap-4">
-                        <div
-                            class="w-full px-4 py-2 text-yellow-800 rounded-xs border-l-4 border-yellow-500 bg-yellow-50 dark:bg-yellow-900/30 dark:text-yellow-300 dark:border-yellow-600">
-                            <p class="font-bold">Warning!</p>
-                            <p>If you disable Cloudflare Tunnel, you will need to update the server's IP address back
-                                to
-                                its real IP address in the server "General" settings. The server may become inaccessible
-                                if the IP
-                                address is not updated correctly.</p>
-                        </div>
+                        <x-callout type="warning" title="Warning!">
+                            If you disable Cloudflare Tunnel, you will need to update the server's IP address back
+                            to its real IP address in the server "General" settings. The server may become inaccessible
+                            if the IP address is not updated correctly.
+                        </x-callout>
                         <div class="w-64">
                             @if ($server->ip_previous)
                                 <x-modal-confirmation title="Disable Cloudflare Tunnel?"
@@ -60,10 +56,9 @@ class="w-full px-4 py-2 text-yellow-800 rounded-xs border-l-4 border-yellow-500
                         </div>
                     </div>
                 @elseif (!$server->isFunctional())
-                    <div
-                        class="p-4 mb-4 w-full text-sm text-yellow-800 bg-yellow-100 rounded-sm dark:bg-yellow-900 dark:text-yellow-300">
+                    <x-callout type="info" title="Configuration Options" class="mb-4">
                         To <span class="font-semibold">automatically</span> configure Cloudflare Tunnel, please
-                        validate your server first.</span> Then you will need a Cloudflare token and an SSH
+                        validate your server first. Then you will need a Cloudflare token and an SSH
                         domain configured.
                         <br />
                         To <span class="font-semibold">manually</span> configure Cloudflare Tunnel, please
@@ -72,8 +67,8 @@ class="p-4 mb-4 w-full text-sm text-yellow-800 bg-yellow-100 rounded-sm dark:bg-
                         <br /><br />
                         For more information, please read our <a
                             href="https://coolify.io/docs/knowledge-base/cloudflare/tunnels/server-ssh" target="_blank"
-                            class="underline ">documentation</a>.
-                    </div>
+                            class="underline">documentation</a>.
+                    </x-callout>
                 @endif
                 @if (!$isCloudflareTunnelsEnabled && $server->isFunctional())
                     <div class="flex  flex-col pb-2">
@@ -97,10 +92,9 @@ class="flex flex-col gap-2 w-full">
                                 <x-forms.button type="submit" isHighlighted>Continue</x-forms.button>
                             </form>
                         @else
-                            <div
-                                class="p-4 mb-4 text-sm text-yellow-800 bg-yellow-100 rounded-sm dark:bg-yellow-900 dark:text-yellow-300">
+                            <x-callout type="warning" title="Permission Required" class="mb-4">
                                 You don't have permission to configure Cloudflare Tunnel for this server.
-                            </div>
+                            </x-callout>
                         @endcan
                     </div>
                     @script
@@ -128,10 +122,9 @@ class="p-4 mb-4 text-sm text-yellow-800 bg-yellow-100 rounded-sm dark:bg-yellow-
                         confirmationLabel="Please type the confirmation text to confirm that you manually configured Cloudflare Tunnel."
                         shortConfirmationLabel="Confirmation text" />
                 @else
-                    <div
-                        class="p-4 mb-4 text-sm text-yellow-800 bg-yellow-100 rounded-sm dark:bg-yellow-900 dark:text-yellow-300">
+                    <x-callout type="warning" title="Permission Required" class="mb-4">
                         You don't have permission to configure Cloudflare Tunnel for this server.
-                    </div>
+                    </x-callout>
                 @endcan
             </div>
             @endif
diff --git a/resources/views/livewire/server/proxy.blade.php b/resources/views/livewire/server/proxy.blade.php
index c40bdd31b..c46a114d8 100644
--- a/resources/views/livewire/server/proxy.blade.php
+++ b/resources/views/livewire/server/proxy.blade.php
@@ -119,10 +119,9 @@
                         </x-forms.button> --}}
                     </div>
                 @else
-                    <div
-                        class="p-4 mb-4 text-sm text-yellow-800 bg-yellow-100 rounded-sm dark:bg-yellow-900 dark:text-yellow-300">
+                    <x-callout type="warning" title="Permission Required" class="mb-4">
                         You don't have permission to configure proxy settings for this server.
-                    </div>
+                    </x-callout>
                 @endcan
             </div>
     @endif
diff --git a/resources/views/livewire/server/show.blade.php b/resources/views/livewire/server/show.blade.php
index 29eacf627..a25e245e9 100644
--- a/resources/views/livewire/server/show.blade.php
+++ b/resources/views/livewire/server/show.blade.php
@@ -62,9 +62,10 @@ class="mt-8 mb-4 w-full font-bold box-without-bg bg-coollabs hover:bg-coollabs-1
                     </x-forms.button>
                 @endif
                 @if ($server->isForceDisabled() && isCloud())
-                    <div class="pt-4 font-bold text-red-500">The system has disabled the server because you have
-                        exceeded the
-                        number of servers for which you have paid.</div>
+                    <x-callout type="danger" title="Server Disabled" class="mt-4">
+                        The system has disabled the server because you have exceeded the
+                        number of servers for which you have paid.
+                    </x-callout>
                 @endif
                 <div class="flex flex-col gap-2 pt-4">
                     <div class="flex flex-col gap-2 w-full lg:flex-row">
diff --git a/resources/views/livewire/settings/advanced.blade.php b/resources/views/livewire/settings/advanced.blade.php
index b68370a09..65d7181c6 100644
--- a/resources/views/livewire/settings/advanced.blade.php
+++ b/resources/views/livewire/settings/advanced.blade.php
@@ -66,12 +66,10 @@
                             confirmationLabel="Please type the confirmation text to disable two step confirmation."
                             shortConfirmationLabel="Confirmation text" />
                     </div>
-                    <div class="w-full px-4 py-2 mb-4 text-white rounded-xs border-l-4 border-red-500 bg-error">
-                        <p class="font-bold">Warning!</p>
-                        <p>Disabling two step confirmation reduces security (as anyone can easily delete anything) and
-                            increases
-                            the risk of accidental actions. This is not recommended for production servers.</p>
-                    </div>
+                    <x-callout type="danger" title="Warning!" class="mb-4">
+                        Disabling two step confirmation reduces security (as anyone can easily delete anything) and
+                        increases the risk of accidental actions. This is not recommended for production servers.
+                    </x-callout>
                 @endif
             </div>
         </form>
diff --git a/resources/views/livewire/source/github/change.blade.php b/resources/views/livewire/source/github/change.blade.php
index ba610eacd..e4d5e5228 100644
--- a/resources/views/livewire/source/github/change.blade.php
+++ b/resources/views/livewire/source/github/change.blade.php
@@ -269,19 +269,9 @@ class=""
                             helper="Necessary for adding Github Runners to repositories.<br><br>Administration: read & write" /> --}}
                         </div>
                     @else
-                        <div
-                            class="flex items-center gap-2 p-4 border border-red-500 rounded-lg bg-red-50 dark:bg-red-900/20">
-                            <svg class="w-5 h-5 text-red-500" fill="currentColor" viewBox="0 0 20 20">
-                                <path fill-rule="evenodd"
-                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z"
-                                    clip-rule="evenodd"></path>
-                            </svg>
-                            <div>
-                                <div class="font-semibold text-red-700 dark:text-red-300">Insufficient Permissions</div>
-                                <div class="text-sm text-red-600 dark:text-red-400">You don't have permission to create
-                                    new GitHub Apps. Please contact your team administrator.</div>
-                            </div>
-                        </div>
+                        <x-callout type="danger" title="Insufficient Permissions">
+                            You don't have permission to create new GitHub Apps. Please contact your team administrator.
+                        </x-callout>
                     @endcan
                 </div>
             </div>
diff --git a/resources/views/livewire/source/github/create.blade.php b/resources/views/livewire/source/github/create.blade.php
index 154e93a27..f47575784 100644
--- a/resources/views/livewire/source/github/create.blade.php
+++ b/resources/views/livewire/source/github/create.blade.php
@@ -52,8 +52,7 @@ class="flex items-center justify-between w-full px-1 py-2 text-left select-none
         </x-forms.button>
     </form>
 @else
-    <div class="text-gray-500 p-4 text-center">
-        <p>You don't have permission to create new GitHub Apps.</p>
-        <p class="text-sm">Please contact your team administrator for access.</p>
-    </div>
+    <x-callout type="warning" title="Permission Required">
+        You don't have permission to create new GitHub Apps. Please contact your team administrator for access.
+    </x-callout>
 @endcan
diff --git a/resources/views/livewire/storage/create.blade.php b/resources/views/livewire/storage/create.blade.php
index 735e040eb..d4a12cf4b 100644
--- a/resources/views/livewire/storage/create.blade.php
+++ b/resources/views/livewire/storage/create.blade.php
@@ -24,8 +24,7 @@
         </form>
     </div>
 @else
-    <div class="text-gray-500 p-4 text-center">
-        <p>You don't have permission to create new S3 storage configurations.</p>
-        <p class="text-sm">Please contact your team administrator for access.</p>
-    </div>
+    <x-callout type="warning" title="Permission Required">
+        You don't have permission to create new S3 storage configurations. Please contact your team administrator for access.
+    </x-callout>
 @endcan
diff --git a/resources/views/livewire/subscription/actions.blade.php b/resources/views/livewire/subscription/actions.blade.php
index e54cb0bd4..516a57dd3 100644
--- a/resources/views/livewire/subscription/actions.blade.php
+++ b/resources/views/livewire/subscription/actions.blade.php
@@ -26,10 +26,11 @@
                 <div class="text-xl font-bold dark:text-white">{{ currentTeam()->servers->count() }}</div>
             </div>
             @if (currentTeam()->serverOverflow())
-                <div class="py-4"><span class="font-bold text-red-500">WARNING:</span> You must delete
-                    {{ currentTeam()->servers->count() - $server_limits }} servers,
+                <x-callout type="danger" title="WARNING" class="my-4">
+                    You must delete {{ currentTeam()->servers->count() - $server_limits }} servers,
                     or upgrade your subscription. {{ currentTeam()->servers->count() - $server_limits }} servers will be
-                    deactivated.</div>
+                    deactivated.
+                </x-callout>
             @endif
             <x-forms.button class="gap-2" wire:click='stripeCustomerPortal'>Change Server Quantity
             </x-forms.button>
diff --git a/resources/views/livewire/subscription/index.blade.php b/resources/views/livewire/subscription/index.blade.php
index 0ca786988..d1d933e04 100644
--- a/resources/views/livewire/subscription/index.blade.php
+++ b/resources/views/livewire/subscription/index.blade.php
@@ -55,10 +55,10 @@
             <div class="flex gap-2">
                 <h1>Subscription</h1>
             </div>
-            <div>You are not an admin so you cannot manage your Team's subscription. If this does not make sense, please
-                <span class="underline cursor-pointer dark:text-white" wire:click="help">contact
-                    us</span>.
-            </div>
+            <x-callout type="warning" title="Permission Required">
+                You are not an admin so you cannot manage your Team's subscription. If this does not make sense, please
+                <span class="underline cursor-pointer dark:text-white" wire:click="help">contact us</span>.
+            </x-callout>
         </div>
     @endif
 </div>