diff --git a/packages/stage-ui/src/components/Misc/Alert.vue b/packages/stage-ui/src/components/Misc/Alert.vue
index a7c542084..35598076f 100644
--- a/packages/stage-ui/src/components/Misc/Alert.vue
+++ b/packages/stage-ui/src/components/Misc/Alert.vue
@@ -8,9 +8,9 @@ const props = defineProps<{
 const containerClass = computed(() => {
   switch (props.type) {
     case 'error':
-      return 'border-solid border-2 border-red-200 bg-red-50 dark:border-red-800 dark:bg-red-900/20'
+      return 'border-solid border-2 border-red-200 bg-red-50 dark:border-red-800/30 dark:bg-red-900/20'
     case 'warning':
-      return 'border-solid border-2 border-amber-200 bg-amber-50 dark:border-amber-800 dark:bg-amber-900/20'
+      return 'border-solid border-2 border-amber-200 bg-amber-50 dark:border-amber-800/30 dark:bg-amber-900/20'
   }
   return ''
 })
@@ -18,21 +18,21 @@ const containerClass = computed(() => {
 const iconClass = computed(() => {
   switch (props.type) {
     case 'error':
-      return 'i-solar:close-circle-line-duotone text-red-500 dark:text-red-400'
+      return 'i-solar:close-circle-bold-duotone text-red-500 dark:text-red-400'
     case 'warning':
-      return 'i-solar:danger-circle-line-duotone text-amber-500 dark:text-amber-400'
+      return 'i-solar:danger-circle-bold-duotone text-amber-500 dark:text-amber-400'
   }
   return ''
 })
 </script>
 
 <template>
-  <div class="flex flex-col gap-3 rounded-lg p-4" :class="containerClass">
-    <div class="flex items-center gap-1 font-medium">
+  <div class="flex flex-col gap-3 rounded-xl p-2" :class="containerClass">
+    <div class="flex items-center gap-2 font-medium">
       <div class="text-2xl" :class="iconClass" />
       <slot name="title" />
     </div>
-    <div class="text-sm">
+    <div class="px-1 text-sm">
       <slot name="content" />
     </div>
   </div>