diff --git a/src/ui/c-alert/c-alert.demo.vue b/src/ui/c-alert/c-alert.demo.vue
index 546c7852..844d8703 100644
--- a/src/ui/c-alert/c-alert.demo.vue
+++ b/src/ui/c-alert/c-alert.demo.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-const variants = ['warning'] as const;
+const variants = ['warning', 'error'] as const;
 </script>
 
 <template>
diff --git a/src/ui/c-alert/c-alert.theme.ts b/src/ui/c-alert/c-alert.theme.ts
index 36d5d348..2176a102 100644
--- a/src/ui/c-alert/c-alert.theme.ts
+++ b/src/ui/c-alert/c-alert.theme.ts
@@ -3,6 +3,7 @@ import { defineThemes } from '../theme/theme.models';
 import { appThemes } from '../theme/themes';
 
 import WarningIcon from '~icons/mdi/alert-circle-outline';
+import ErrorIcon from '~icons/mdi/close-circle-outline';
 
 export const { useTheme } = defineThemes({
   dark: {
@@ -12,6 +13,12 @@ export const { useTheme } = defineThemes({
       textColor: appThemes.dark.warning.color,
       icon: WarningIcon,
     },
+    error: {
+      backgroundColor: appThemes.dark.error.colorFaded,
+      borderColor: appThemes.dark.error.color,
+      textColor: appThemes.dark.error.color,
+      icon: ErrorIcon,
+    },
   },
   light: {
     warning: {
@@ -20,5 +27,11 @@ export const { useTheme } = defineThemes({
       textColor: darken(appThemes.light.warning.color, 40),
       icon: WarningIcon,
     },
+    error: {
+      backgroundColor: appThemes.light.error.colorFaded,
+      borderColor: appThemes.light.error.color,
+      textColor: darken(appThemes.light.error.color, 40),
+      icon: ErrorIcon,
+    },
   },
 });