diff --git a/components/lib/message/Message.vue b/components/lib/message/Message.vue
index 3c59ce59d..2e66bd6e2 100755
--- a/components/lib/message/Message.vue
+++ b/components/lib/message/Message.vue
@@ -39,6 +39,13 @@ export default {
             visible: true
         };
     },
+    watch: {
+        sticky(newValue) {
+            if (!newValue) {
+                this.closeAfterDelay();
+            }
+        }
+    },
     mounted() {
         if (!this.sticky) {
             this.closeAfterDelay();
diff --git a/doc/message/ClosableDoc.vue b/doc/message/ClosableDoc.vue
index 2aaaa98ba..adcaa92b0 100644
--- a/doc/message/ClosableDoc.vue
+++ b/doc/message/ClosableDoc.vue
@@ -1,9 +1,9 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Messages are closable by default resulting in a close icon being displayed on top right corner. In order to disable closable messages, set <i>closable</i> to false.</p>
+        <p>Messages are closable by default, disable <i>closable</i> option to remove the close button.</p>
     </DocSectionText>
     <div class="card">
-        <Message :closable="false">Message Content</Message>
+        <Message :closable="false">Not Closable</Message>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -14,12 +14,12 @@ export default {
         return {
             code: {
                 basic: `
-<Message :closable="false">Message Content</Message>
+<Message :closable="false">Not Closable</Message>
 `,
                 options: `
 <template>
     <div class="card">
-        <Message :closable="false">Message Content</Message>
+        <Message :closable="false">Not Closable</Message>
     </div>
 </template>
 
@@ -29,7 +29,7 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <Message :closable="false">Message Content</Message>
+        <Message :closable="false">Not Closable</Message>
     </div>
 </template>
 
diff --git a/doc/message/CustomIconDoc.vue b/doc/message/CustomIconDoc.vue
index 19f35a901..7039dfbce 100644
--- a/doc/message/CustomIconDoc.vue
+++ b/doc/message/CustomIconDoc.vue
@@ -1,9 +1,15 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>The <i>icon</i> property can change the icon of the message.</p>
+        <p>Icon property and the <i>messageicon</i> slots are available to customize the icon of the message</p>
     </DocSectionText>
     <div class="card">
-        <Message severity="info" icon="pi pi-send">Info Message Content</Message>
+        <Message severity="info" icon="pi pi-send">Info Message</Message>
+        <Message severity="success">
+            <template #messageicon>
+                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+            </template>
+            <span class="ml-2">How may I help you?</span>
+        </Message>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -14,12 +20,24 @@ export default {
         return {
             code: {
                 basic: `
-<Message severity="info" icon="pi pi-send">Info Message Content</Message>
+<Message severity="info" icon="pi pi-send">Info Message</Message>
+<Message severity="success">
+    <template #messageicon>
+        <Avatar image="/images/avatar/amyelsner.png" shape="circle" />
+    </template>
+    <span class="ml-2">How may I help you?</span>
+</Message>
 `,
                 options: `
 <template>
     <div class="card">
-        <Message severity="info" icon="pi pi-send">Info Message Content</Message>
+        <Message severity="info" icon="pi pi-send">Info Message</Message>
+        <Message severity="success">
+            <template #messageicon>
+                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+            </template>
+            <span class="ml-2">How may I help you?</span>
+        </Message>
     </div>
 </template>
 
@@ -29,7 +47,13 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <Message severity="info" icon="pi pi-send">Info Message Content</Message>
+        <Message severity="info" icon="pi pi-send">Info Message</Message>
+        <Message severity="success">
+            <template #messageicon>
+                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+            </template>
+            <span class="ml-2">How may I help you?</span>
+        </Message>
     </div>
 </template>
 
diff --git a/doc/message/SeverityDoc.vue b/doc/message/SeverityDoc.vue
index 28b567e62..9bc7d4ee1 100644
--- a/doc/message/SeverityDoc.vue
+++ b/doc/message/SeverityDoc.vue
@@ -3,10 +3,10 @@
         <p>The <i>severity</i> option specifies the type of the message.</p>
     </DocSectionText>
     <div class="card">
-        <Message severity="success">Success Message Content</Message>
-        <Message severity="info">Info Message Content</Message>
-        <Message severity="warn">Warning Message Content</Message>
-        <Message severity="error">Error Message Content</Message>
+        <Message severity="success">Success Message</Message>
+        <Message severity="info">Info Message</Message>
+        <Message severity="warn">Warning Message</Message>
+        <Message severity="error">Error Message</Message>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -17,18 +17,18 @@ export default {
         return {
             code: {
                 basic: `
-<Message severity="success">Success Message Content</Message>
-<Message severity="info">Info Message Content</Message>
-<Message severity="warn">Warning Message Content</Message>
-<Message severity="error">Error Message Content</Message>
+<Message severity="success">Success Message</Message>
+<Message severity="info">Info Message</Message>
+<Message severity="warn">Warning Message</Message>
+<Message severity="error">Error Message</Message>
 `,
                 options: `
 <template>
     <div class="card">
-        <Message severity="success">Success Message Content</Message>
-        <Message severity="info">Info Message Content</Message>
-        <Message severity="warn">Warning Message Content</Message>
-        <Message severity="error">Error Message Content</Message>
+        <Message severity="success">Success Message</Message>
+        <Message severity="info">Info Message</Message>
+        <Message severity="warn">Warning Message</Message>
+        <Message severity="error">Error Message</Message>
     </div>
 </template>
 
@@ -38,10 +38,10 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <Message severity="success">Success Message Content</Message>
-        <Message severity="info">Info Message Content</Message>
-        <Message severity="warn">Warning Message Content</Message>
-        <Message severity="error">Error Message Content</Message>
+        <Message severity="success">Success Message</Message>
+        <Message severity="info">Info Message</Message>
+        <Message severity="warn">Warning Message</Message>
+        <Message severity="error">Error Message</Message>
     </div>
 </template>
 
diff --git a/doc/message/StickyDoc.vue b/doc/message/StickyDoc.vue
index bfe2a41a5..475ef0734 100644
--- a/doc/message/StickyDoc.vue
+++ b/doc/message/StickyDoc.vue
@@ -1,15 +1,13 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>
-            Messages are sticky by default, if you require them to be cleared automatically, disable <i>sticky</i> property and optionally configure the <i>life</i> property to specify how long the message should be displayed which is 3000 ms by
-            default.
-        </p>
+        <p>Messages can disappear automatically by turning the <i>sticky</i> option off. The timeout duration is defined using the <i>life</i> property in milliseconds.</p>
     </DocSectionText>
     <div class="card">
-        <Message severity="success" sticky>Success Message Content</Message>
-        <Message severity="info" sticky>Info Message Content</Message>
-        <Message severity="warn" sticky>Warning Message Content</Message>
-        <Message severity="error" sticky>Error Message Content</Message>
+        <Button label="Turn off Sticky" @click="sticky = false" />
+        <Message severity="success" :sticky="sticky" :life="1000">Success Message</Message>
+        <Message severity="info" :sticky="sticky" :life="2000">Info Message</Message>
+        <Message severity="warn" :sticky="sticky" :life="3000">Warning Message</Message>
+        <Message severity="error" :sticky="sticky" :life="4000">Error Message</Message>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -18,37 +16,51 @@
 export default {
     data() {
         return {
+            sticky: true,
             code: {
                 basic: `
-<Message severity="success" sticky>Success Message Content</Message>
-<Message severity="info" sticky>Info Message Content</Message>
-<Message severity="warn" sticky>Warning Message Content</Message>
-<Message severity="error" sticky>Error Message Content</Message>
+<Button label="Turn off Sticky" @click="sticky = false" />
+<Message severity="success" :sticky="sticky" :life="1000">Success Message</Message>
+<Message severity="info" :sticky="sticky" :life="2000">Info Message</Message>
+<Message severity="warn" :sticky="sticky" :life="3000">Warning Message</Message>
+<Message severity="error" :sticky="sticky" :life="4000">Error Message</Message>
 `,
                 options: `
 <template>
     <div class="card">
-        <Message severity="success" sticky>Success Message Content</Message>
-        <Message severity="info" sticky>Info Message Content</Message>
-        <Message severity="warn" sticky>Warning Message Content</Message>
-        <Message severity="error" sticky>Error Message Content</Message>
+        <Button label="Turn off Sticky" @click="sticky = false" />
+        <Message severity="success" :sticky="sticky" :life="1000">Success Message</Message>
+        <Message severity="info" :sticky="sticky" :life="2000">Info Message</Message>
+        <Message severity="warn" :sticky="sticky" :life="3000">Warning Message</Message>
+        <Message severity="error" :sticky="sticky" :life="4000">Error Message</Message>
     </div>
 </template>
 
 <script>
+export default {
+    data() {
+        return {
+            sticky: false
+        };
+    }
+};
 <\/script>
 `,
                 composition: `
 <template>
     <div class="card">
-        <Message severity="success" sticky>Success Message Content</Message>
-        <Message severity="info" sticky>Info Message Content</Message>
-        <Message severity="warn" sticky>Warning Message Content</Message>
-        <Message severity="error" sticky>Error Message Content</Message>
+        <Button label="Turn off Sticky" @click="sticky.value = false" />
+        <Message severity="success" :sticky="sticky" :life="1000">Success Message</Message>
+        <Message severity="info" :sticky="sticky" :life="2000">Info Message</Message>
+        <Message severity="warn" :sticky="sticky" :life="3000">Warning Message</Message>
+        <Message severity="error" :sticky="sticky" :life="4000">Error Message</Message>
     </div>
 </template>
 
 <script setup>
+import { ref } from 'vue';
+
+let sticky = ref(true);
 <\/script>
 `
             }
diff --git a/doc/message/TemplateDoc.vue b/doc/message/TemplateDoc.vue
deleted file mode 100644
index 9dd2a89ee..000000000
--- a/doc/message/TemplateDoc.vue
+++ /dev/null
@@ -1,176 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Custom content inside a message is defined with the <i>default</i> slot.</p>
-        <div class="card">
-            <Message
-                :style="{
-                    border: 'solid #696cff',
-                    borderWidth: '0 0 0 6px',
-                    color: '#696cff'
-                }"
-                class="border-primary w-full justify-content-start"
-                severity="info"
-            >
-                <div class="flex align-items-center">
-                    <img alt="logo" src="https://primefaces.org/cdn/primevue/images/logo.svg" width="20" />
-                    <div class="ml-2">Always bet on Prime.</div>
-                </div>
-            </Message>
-        </div>
-        <DocSectionCode :code="code1" />
-
-        <p><i>container</i> templating allows customizing the Message component.</p>
-        <div class="card">
-            <Message style="border: none">
-                <template #container>
-                    <div class="flex lg:align-items-start flex-column lg:flex-row p-4 bg-blue-100 border-round border-1 border-blue-300">
-                        <div class="flex align-items-start">
-                            <i class="pi pi-check-circle text-blue-900 text-2xl mr-3"></i>
-                            <div class="mr-3 flex lg:align-items-start flex-column lg:flex-row">
-                                <div class="text-blue-900 font-medium mr-0 lg:mr-2 mb-2 lg:mb-0 line-height-3">Information</div>
-                                <p class="m-0 p-0 text-blue-700 line-height-3">Bibendum enim facilisis gravida neque convallis a cras semper.</p>
-                            </div>
-                        </div>
-                        <a v-ripple class="flex align-items-center ml-auto no-underline text-blue-900 font-medium mt-3 lg:mt-0 cursor-pointer p-ripple">
-                            <span>Learn More</span>
-                            <i class="pi pi-arrow-right text-blue-900 ml-2"></i>
-                        </a>
-                    </div>
-                </template>
-            </Message>
-        </div>
-        <DocSectionCode :code="code2" />
-    </DocSectionText>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code1: {
-                basic: `
-<Message
-    :style="{
-        border: 'solid #696cff',
-        borderWidth: '0 0 0 6px',
-        color: '#696cff'
-    }"
-    class="border-primary w-full justify-content-start"
-    severity="info"
->
-    <div class="flex align-items-center">
-        <img alt="logo" src="/images/logo.svg" width="20" />
-        <div class="ml-2">Always bet on Prime.</div>
-    </div>
-</Message>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Message
-            :style="{
-                border: 'solid #696cff',
-                borderWidth: '0 0 0 6px',
-                color: '#696cff'
-            }"
-            class="border-primary w-full justify-content-start"
-            severity="info"
-        >
-            <div class="flex align-items-center">
-                <img alt="logo" src="https://primefaces.org/cdn/primevue/images/logo.svg" width="20" />
-                <div class="ml-2">Always bet on Prime.</div>
-            </div>
-        </Message>
-    </div>
-</template>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Message
-            :style="{
-                border: 'solid #696cff',
-                borderWidth: '0 0 0 6px',
-                color: '#696cff'
-            }"
-            class="border-primary w-full justify-content-start"
-            severity="info"
-        >
-            <div class="flex align-items-center">
-                <img alt="logo" src="https://primefaces.org/cdn/primevue/images/logo.svg" width="20" />
-                <div class="ml-2">Always bet on Prime.</div>
-            </div>
-        </Message>
-    </div>
-</template>`
-            },
-            code2: {
-                basic: `
-<Message style="border: none">
-    <template #container>
-        <div class="flex lg:align-items-start flex-column lg:flex-row p-4 bg-blue-100 border-round border-1 border-blue-300">
-            <div class="flex align-items-start">
-                <i class="pi pi-check-circle text-blue-900 text-2xl mr-3"></i>
-                <div class="mr-3 flex lg:align-items-start flex-column lg:flex-row">
-                    <div class="text-blue-900 font-medium mr-0 lg:mr-2 mb-2 lg:mb-0 line-height-3">Information</div>
-                    <p class="m-0 p-0 text-blue-700 line-height-3">Bibendum enim facilisis gravida neque convallis a cras semper.</p>
-                </div>
-            </div>
-            <a v-ripple class="flex align-items-center ml-auto no-underline text-blue-900 font-medium mt-3 lg:mt-0 cursor-pointer p-ripple">
-                <span>Learn More</span>
-                <i class="pi pi-arrow-right text-blue-900 ml-2"></i>
-            </a>
-        </div>
-    </template>
-</Message>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Message style="border: none">
-            <template #container>
-                <div class="flex lg:align-items-start flex-column lg:flex-row p-4 bg-blue-100 border-round border-1 border-blue-300">
-                    <div class="flex align-items-start">
-                        <i class="pi pi-check-circle text-blue-900 text-2xl mr-3"></i>
-                        <div class="mr-3 flex lg:align-items-start flex-column lg:flex-row">
-                            <div class="text-blue-900 font-medium mr-0 lg:mr-2 mb-2 lg:mb-0 line-height-3">Information</div>
-                            <p class="m-0 p-0 text-blue-700 line-height-3">Bibendum enim facilisis gravida neque convallis a cras semper.</p>
-                        </div>
-                    </div>
-                    <a v-ripple class="flex align-items-center ml-auto no-underline text-blue-900 font-medium mt-3 lg:mt-0 cursor-pointer p-ripple">
-                        <span>Learn More</span>
-                        <i class="pi pi-arrow-right text-blue-900 ml-2"></i>
-                    </a>
-                </div>
-            </template>
-        </Message>
-    </div>
-</template>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Message style="border: none">
-            <template #container>
-                <div class="flex lg:align-items-start flex-column lg:flex-row p-4 bg-blue-100 border-round border-1 border-blue-300">
-                    <div class="flex align-items-start">
-                        <i class="pi pi-check-circle text-blue-900 text-2xl mr-3"></i>
-                        <div class="mr-3 flex lg:align-items-start flex-column lg:flex-row">
-                            <div class="text-blue-900 font-medium mr-0 lg:mr-2 mb-2 lg:mb-0 line-height-3">Information</div>
-                            <p class="m-0 p-0 text-blue-700 line-height-3">Bibendum enim facilisis gravida neque convallis a cras semper.</p>
-                        </div>
-                    </div>
-                    <a v-ripple class="flex align-items-center ml-auto no-underline text-blue-900 font-medium mt-3 lg:mt-0 cursor-pointer p-ripple">
-                        <span>Learn More</span>
-                        <i class="pi pi-arrow-right text-blue-900 ml-2"></i>
-                    </a>
-                </div>
-            </template>
-        </Message>
-    </div>
-</template>`
-            }
-        };
-    }
-};
-</script>
diff --git a/pages/message/index.vue b/pages/message/index.vue
index 38ada6c73..5c28eeb51 100755
--- a/pages/message/index.vue
+++ b/pages/message/index.vue
@@ -11,7 +11,6 @@ import DynamicDoc from '@/doc/message/DynamicDoc.vue';
 import ImportDoc from '@/doc/message/ImportDoc.vue';
 import SeverityDoc from '@/doc/message/SeverityDoc.vue';
 import StickyDoc from '@/doc/message/StickyDoc.vue';
-import TemplateDoc from '@/doc/message/TemplateDoc.vue';
 import PTComponent from '@/doc/message/pt/index.vue';
 import ThemingDoc from '@/doc/message/theming/index.vue';
 
@@ -54,11 +53,6 @@ export default {
                     label: 'Custom Icon',
                     component: CustomIconDoc
                 },
-                {
-                    id: 'template',
-                    label: 'Template',
-                    component: TemplateDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',