diff --git a/docs/content/5.overlays/6.notification.md b/docs/content/5.overlays/6.notification.md
index 873e67cb..4e23db6d 100644
--- a/docs/content/5.overlays/6.notification.md
+++ b/docs/content/5.overlays/6.notification.md
@@ -92,8 +92,8 @@ baseProps:
   id: 4
   timeout: 0
   title: 'Notification'
-  description: 'This is a notification.'
 props:
+  description: 'This is a notification.'
   avatar:
     src: 'https://avatars.githubusercontent.com/u/739984?v=4'
 excludedProps:
@@ -118,7 +118,9 @@ props:
 ---
 ::
 
-You can change the color of the progress bar through the `progress-color` prop.
+### Color
+
+Use the `color` prop to change the progress and icon color of the Notification.
 
 ::component-card
 ---
@@ -128,7 +130,10 @@ baseProps:
   description: 'This is a notification.'
   timeout: 600000
 props:
-  progressColor: 'primary'
+  icon: 'i-heroicons-x-circle'
+  color: 'red'
+excludedProps:
+  - icon
 ---
 ::
 
diff --git a/src/runtime/app.config.ts b/src/runtime/app.config.ts
index 9ccc1492..6edebe11 100644
--- a/src/runtime/app.config.ts
+++ b/src/runtime/app.config.ts
@@ -700,13 +700,17 @@ const notification = {
   rounded: 'rounded-lg',
   padding: 'p-4',
   ring: 'ring-1 ring-gray-200 dark:ring-gray-800',
-  icon: 'flex-shrink-0 w-5 h-5 text-gray-900 dark:text-white',
-  avatar: 'flex-shrink-0 pt-0.5',
+  icon: {
+    base: 'flex-shrink-0 w-5 h-5 text-gray-900 dark:text-white',
+    color: 'text-{color}-500 dark:text-{color}-400'
+  },
+  avatar: {
+    base: 'flex-shrink-0 self-center',
+    size: 'md'
+  },
   progress: {
     base: 'absolute bottom-0 left-0 right-0 h-1',
-    variant: {
-      solid: 'bg-{color}-500 dark:bg-{color}-400',
-    }
+    background: 'bg-{color}-500 dark:bg-{color}-400'
   },
   transition: {
     enterActiveClass: 'transform ease-out duration-300 transition',
@@ -717,8 +721,8 @@ const notification = {
     leaveToClass: 'opacity-0'
   },
   default: {
-    progressColor: 'primary',
-    progressVariant: 'solid',
+    color: 'primary',
+    icon: null,
     close: {
       icon: 'i-heroicons-x-mark-20-solid',
       color: 'gray',
diff --git a/src/runtime/components/overlays/Notification.vue b/src/runtime/components/overlays/Notification.vue
index cce894f1..8b8ec308 100644
--- a/src/runtime/components/overlays/Notification.vue
+++ b/src/runtime/components/overlays/Notification.vue
@@ -4,8 +4,8 @@
       <div :class="[ui.container, ui.rounded, ui.ring]">
         <div :class="ui.padding">
           <div class="flex gap-3" :class="{ 'items-start': description, 'items-center': !description }">
-            <UIcon v-if="icon" :name="icon" :class="ui.icon" />
-            <UAvatar v-if="avatar" v-bind="avatar" :class="ui.avatar" />
+            <UIcon v-if="icon" :name="icon" :class="iconClass" />
+            <UAvatar v-if="avatar" v-bind="{ size: ui.avatar.size, ...avatar }" :class="ui.avatar.base" />
 
             <div class="w-0 flex-1">
               <p :class="ui.title">
@@ -74,7 +74,7 @@ export default defineComponent({
     },
     icon: {
       type: String,
-      default: null
+      default: () => appConfig.ui.notification.default.icon
     },
     avatar: {
       type: Object as PropType<Partial<Avatar>>,
@@ -96,20 +96,13 @@ export default defineComponent({
       type: Function,
       default: null
     },
-    progressColor: {
+    color: {
       type: String,
-      default: () => appConfig.ui.notification.default.progressColor,
+      default: () => appConfig.ui.notification.default.color,
       validator (value: string) {
         return ['gray', ...appConfig.ui.colors].includes(value)
       }
     },
-    progressVariant: {
-      type: String,
-      default: () => appConfig.ui.notification.default.progressVariant,
-      validator (value: string) {
-        return Object.keys(appConfig.ui.notification.progress.variant).includes(value)
-      }
-    },
     ui: {
       type: Object as PropType<Partial<typeof appConfig.ui.notification>>,
       default: () => appConfig.ui.notification
@@ -134,7 +127,14 @@ export default defineComponent({
     const progressClass = computed(() => {
       return classNames(
         ui.value.progress.base,
-        ui.value.progress.variant[props.progressVariant]?.replaceAll('{color}', props.progressColor)
+        ui.value.progress.background?.replaceAll('{color}', props.color)
+      )
+    })
+
+    const iconClass = computed(() => {
+      return classNames(
+        ui.value.icon.base,
+        ui.value.icon.color?.replaceAll('{color}', props.color)
       )
     })
 
@@ -199,6 +199,7 @@ export default defineComponent({
       ui,
       progressStyle,
       progressClass,
+      iconClass,
       onMouseover,
       onMouseleave,
       onClose,
diff --git a/src/runtime/types/notification.d.ts b/src/runtime/types/notification.d.ts
index ad4dbcf8..3add0e10 100644
--- a/src/runtime/types/notification.d.ts
+++ b/src/runtime/types/notification.d.ts
@@ -17,7 +17,6 @@ export interface Notification {
   actions?: NotificationAction[]
   click?: Function
   callback?: Function
-  progressColor?: string
-  progressVariant?: string
+  color?: string
   ui?: Partial<typeof appConfig.ui.notification>
 }