diff --git a/components/lib/confirmdialog/ConfirmDialog.vue b/components/lib/confirmdialog/ConfirmDialog.vue
index 5347f9a1c..60e82c2bb 100644
--- a/components/lib/confirmdialog/ConfirmDialog.vue
+++ b/components/lib/confirmdialog/ConfirmDialog.vue
@@ -15,6 +15,7 @@
         :unstyled="unstyled"
     >
         <template v-if="$slots.container" #container="slotProps">
+            sds
             <slot name="container" :message="confirmation" :onClose="slotProps.onClose" :onAccept="accept" :onReject="reject" />
         </template>
         <template v-if="!$slots.container">
diff --git a/doc/confirmdialog/AccessibilityDoc.vue b/doc/confirmdialog/AccessibilityDoc.vue
index 904e80b0e..40ba80f6d 100644
--- a/doc/confirmdialog/AccessibilityDoc.vue
+++ b/doc/confirmdialog/AccessibilityDoc.vue
@@ -78,7 +78,8 @@ export default {
                 basic: `
 <ConfirmDialog id="confirm" />
 
-<Button @click="openDialog()" label="Confirm" :aria-expanded="visible" :aria-controls="visible ? 'confirm' : null"></Button>`
+<Button @click="openDialog()" label="Confirm" :aria-expanded="visible" :aria-controls="visible ? 'confirm' : null"></Button>
+`
             },
             code2: {
                 basic: `
diff --git a/doc/confirmdialog/BasicDoc.vue b/doc/confirmdialog/BasicDoc.vue
index bfbcb4bbf..e5b213d6b 100644
--- a/doc/confirmdialog/BasicDoc.vue
+++ b/doc/confirmdialog/BasicDoc.vue
@@ -1,11 +1,11 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>ConfirmDialog is displayed by calling the <i>require</i> method of the <i>$confirm</i> instance by passing the options to customize the Dialog. <i>target</i> attribute is mandatory to align the popup to its caller.</p>
+        <p>ConfirmDialog is displayed by calling the <i>require</i> method of the <i>$confirm</i> instance by passing the options to customize the Dialog. The <i>target</i> attribute is mandatory to align the popup to its referrer.</p>
     </DocSectionText>
     <ConfirmDialog></ConfirmDialog>
     <div class="card flex flex-wrap gap-2 justify-content-center">
         <Button @click="confirm1()" icon="pi pi-check" label="Confirm"></Button>
-        <Button @click="confirm2()" icon="pi pi-times" label="Delete"></Button>
+        <Button @click="confirm2()" icon="pi pi-times" label="Delete" severity="danger"></Button>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -18,7 +18,7 @@ export default {
                 basic: `
 <ConfirmDialog></ConfirmDialog>
 <Button @click="confirm1()" icon="pi pi-check" label="Confirm"></Button>
-<Button @click="confirm2()" icon="pi pi-times" label="Delete"></Button>
+<Button @click="confirm2()" icon="pi pi-times" label="Delete" severity="danger"></Button>
 `,
                 options: `
 <template>
@@ -26,7 +26,7 @@ export default {
     <ConfirmDialog></ConfirmDialog>
     <div class="card flex flex-wrap gap-2 justify-content-center">
         <Button @click="confirm1()" icon="pi pi-check" label="Confirm"></Button>
-        <Button @click="confirm2()" icon="pi pi-times" label="Delete"></Button>
+        <Button @click="confirm2()" icon="pi pi-times" label="Delete" severity="danger"></Button>
     </div>
 </template>
 
@@ -51,7 +51,8 @@ export default {
                 message: 'Do you want to delete this record?',
                 header: 'Delete Confirmation',
                 icon: 'pi pi-info-circle',
-                acceptClass: 'p-button-danger',
+                rejectClass: 'p-button-text p-button-text',
+                acceptClass: 'p-button-danger p-button-text',
                 accept: () => {
                     this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 });
                 },
@@ -70,7 +71,7 @@ export default {
     <ConfirmDialog></ConfirmDialog>
     <div class="card flex flex-wrap gap-2 justify-content-center">
         <Button @click="confirm1()" icon="pi pi-check" label="Confirm"></Button>
-        <Button @click="confirm2()" icon="pi pi-times" label="Delete"></Button>
+        <Button @click="confirm2()" icon="pi pi-times" label="Delete" severity="danger"></Button>
     </div>
 </template>
 
@@ -100,7 +101,8 @@ const confirm2 = () => {
         message: 'Do you want to delete this record?',
         header: 'Delete Confirmation',
         icon: 'pi pi-info-circle',
-        acceptClass: 'p-button-danger',
+        rejectClass: 'p-button-text p-button-text',
+        acceptClass: 'p-button-danger p-button-text',
         accept: () => {
             toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 });
         },
@@ -133,7 +135,8 @@ const confirm2 = () => {
                 message: 'Do you want to delete this record?',
                 header: 'Delete Confirmation',
                 icon: 'pi pi-info-circle',
-                acceptClass: 'p-button-danger',
+                rejectClass: 'p-button-text p-button-text',
+                acceptClass: 'p-button-danger p-button-text',
                 accept: () => {
                     this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 });
                 },
diff --git a/doc/confirmdialog/ConfirmationServiceDoc.vue b/doc/confirmdialog/ConfirmationServiceDoc.vue
index f5d29058f..e5a8935e2 100644
--- a/doc/confirmdialog/ConfirmationServiceDoc.vue
+++ b/doc/confirmdialog/ConfirmationServiceDoc.vue
@@ -4,7 +4,7 @@
     </DocSectionText>
     <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
     <div class="doc-section-description">
-        <p><i>$confirm</i> is available as a property in the application instance for Options API. The service can be injected with the <i>useConfirm</i> function for Composition API.</p>
+        <p>The service is available with the <i>useConfirm</i> function for Composition API or using the <i>$confirm</i> property of the application for Options API.</p>
     </div>
     <DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
diff --git a/doc/confirmdialog/HeadlessDoc.vue b/doc/confirmdialog/HeadlessDoc.vue
new file mode 100644
index 000000000..6cb7d74af
--- /dev/null
+++ b/doc/confirmdialog/HeadlessDoc.vue
@@ -0,0 +1,156 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Headless mode is enabled by defining a <i>container</i> slot that lets you implement entire confirmation UI instead of the default elements.</p>
+    </DocSectionText>
+    <ConfirmDialog group="headless">
+        <template #container="{ message, onAccept, onReject }">
+            <div class="flex flex-column align-items-center p-5 surface-overlay border-round">
+                <div class="border-circle bg-primary inline-flex justify-content-center align-items-center h-6rem w-6rem -mt-8">
+                    <i class="pi pi-question text-5xl"></i>
+                </div>
+                <span class="font-bold text-2xl block mb-2 mt-4">{{ message.header }}</span>
+                <p class="mb-0">{{ message.message }}</p>
+                <div class="flex align-items-center gap-2 mt-4">
+                    <Button label="Save" @click="onAccept"></Button>
+                    <Button label="Cancel" outlined @click="onReject"></Button>
+                </div>
+            </div>
+        </template>
+    </ConfirmDialog>
+    <div class="card flex justify-content-center">
+        <Button @click="requireConfirmation()" icon="pi pi-check" label="Confirm"></Button>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<ConfirmDialog group="headless">
+    <template #container="{ message, onAccept, onReject }">
+        <div class="flex flex-column align-items-center p-5 surface-overlay border-round">
+            <div class="border-circle bg-primary inline-flex justify-content-center align-items-center h-6rem w-6rem -mt-8">
+                <i class="pi pi-question text-5xl"></i>
+            </div>
+            <span class="font-bold text-2xl block mb-2 mt-4">{{ message.header }}</span>
+            <p class="mb-0">{{ message.message }}</p>
+            <div class="flex align-items-center gap-2 mt-4">
+                <Button label="Save" @click="onAccept"></Button>
+                <Button label="Cancel" outlined @click="onReject"></Button>
+            </div>
+        </div>
+    </template>
+</ConfirmDialog>
+<Button @click="requireConfirmation()" icon="pi pi-check" label="Confirm"></Button>
+`,
+                options: `
+<template>
+    <ConfirmDialog group="headless">
+        <template #container="{ message, onAccept, onReject }">
+            <div class="flex flex-column align-items-center p-5 surface-overlay border-round">
+                <div class="border-circle bg-primary inline-flex justify-content-center align-items-center h-6rem w-6rem -mt-8">
+                    <i class="pi pi-question text-5xl"></i>
+                </div>
+                <span class="font-bold text-2xl block mb-2 mt-4">{{ message.header }}</span>
+                <p class="mb-0">{{ message.message }}</p>
+                <div class="flex align-items-center gap-2 mt-4">
+                    <Button label="Save" @click="onAccept"></Button>
+                    <Button label="Cancel" outlined @click="onReject"></Button>
+                </div>
+            </div>
+        </template>
+    </ConfirmDialog>
+    <div class="card flex justify-content-center">
+        <Button @click="requireConfirmation()" icon="pi pi-check" label="Confirm"></Button>
+    </div>
+    <Toast />
+</template>
+
+<script>
+export default {
+    methods: {
+        requireConfirmation() {
+            this.$confirm.require({
+                group: 'headless',
+                header: 'Are you sure?',
+                message: 'Please confirm to proceed.',
+                accept: () => {
+                    this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
+                },
+                reject: () => {
+                    this.$toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+                }
+            });
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <ConfirmDialog group="headless">
+        <template #container="{ message, onAccept, onReject }">
+            <div class="flex flex-column align-items-center p-5 surface-overlay border-round">
+                <div class="border-circle bg-primary inline-flex justify-content-center align-items-center h-6rem w-6rem -mt-8">
+                    <i class="pi pi-question text-5xl"></i>
+                </div>
+                <span class="font-bold text-2xl block mb-2 mt-4">{{ message.header }}</span>
+                <p class="mb-0">{{ message.message }}</p>
+                <div class="flex align-items-center gap-2 mt-4">
+                    <Button label="Save" @click="onAccept"></Button>
+                    <Button label="Cancel" outlined @click="onReject"></Button>
+                </div>
+            </div>
+        </template>
+    </ConfirmDialog>
+    <div class="card flex justify-content-center">
+        <Button @click="requireConfirmation()" icon="pi pi-check" label="Confirm"></Button>
+    </div>
+    <Toast />
+</template>
+
+<script setup>
+import { useConfirm } from "primevue/useconfirm";
+import { useToast } from "primevue/usetoast";
+
+const confirm = useConfirm();
+const toast = useToast();
+
+const requireConfirmation = () => {
+    confirm.require({
+        group: 'headless',
+        header: 'Are you sure?',
+        message: 'Please confirm to proceed.',
+        accept: () => {
+            toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
+        },
+        reject: () => {
+            toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+        }
+    });
+};
+<\/script>
+`
+            }
+        };
+    },
+    methods: {
+        requireConfirmation() {
+            this.$confirm.require({
+                group: 'headless',
+                header: 'Are you sure?',
+                message: 'Please confirm to proceed.',
+                accept: () => {
+                    this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
+                },
+                reject: () => {
+                    this.$toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+                }
+            });
+        }
+    }
+};
+</script>
diff --git a/doc/confirmdialog/PositionDoc.vue b/doc/confirmdialog/PositionDoc.vue
index adef71079..3688c8d54 100644
--- a/doc/confirmdialog/PositionDoc.vue
+++ b/doc/confirmdialog/PositionDoc.vue
@@ -1,14 +1,14 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>The <i>position</i> property of the confirm options is used to display a Dialog at all edges and corners of the screen.</p>
+        <p>The <i>position</i> property of the confirm options specifies the location of the Dialog.</p>
     </DocSectionText>
-    <ConfirmDialog group="positionDialog"></ConfirmDialog>
+    <ConfirmDialog group="positioned"></ConfirmDialog>
     <div class="card">
-        <div class="flex flex-wrap justify-content-center gap-2 mb-2">
+        <div class="flex flex-wrap justify-content-center gap-2 mb-3">
             <Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" severity="help" style="min-width: 10rem"></Button>
             <Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" severity="help" style="min-width: 10rem"></Button>
         </div>
-        <div class="flex flex-wrap justify-content-center gap-2 mb-2">
+        <div class="flex flex-wrap justify-content-center gap-2 mb-3">
             <Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" severity="warning" style="min-width: 10rem"></Button>
             <Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" severity="warning" style="min-width: 10rem"></Button>
             <Button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" severity="warning" style="min-width: 10rem"></Button>
@@ -28,12 +28,12 @@ export default {
         return {
             code: {
                 basic: `
-<ConfirmDialog group="positionDialog"></ConfirmDialog>
-<div class="flex flex-wrap justify-content-center gap-2 mb-2">
+<ConfirmDialog group="positioned"></ConfirmDialog>
+<div class="flex flex-wrap justify-content-center gap-2 mb-3">
     <Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" severity="help" style="min-width: 10rem"></Button>
     <Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" severity="help" style="min-width: 10rem"></Button>
 </div>
-<div class="flex flex-wrap justify-content-center gap-2 mb-2">
+<div class="flex flex-wrap justify-content-center gap-2 mb-3">
     <Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" severity="warning" style="min-width: 10rem"></Button>
     <Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" severity="warning" style="min-width: 10rem"></Button>
     <Button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" severity="warning" style="min-width: 10rem"></Button>
@@ -47,13 +47,13 @@ export default {
                 options: `
 <template>
     <Toast />
-    <ConfirmDialog group="positionDialog"></ConfirmDialog>
+    <ConfirmDialog group="positioned"></ConfirmDialog>
     <div class="card">
-        <div class="flex flex-wrap justify-content-center gap-2 mb-2">
+        <div class="flex flex-wrap justify-content-center gap-2 mb-3">
             <Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" severity="help" style="min-width: 10rem"></Button>
             <Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" severity="help" style="min-width: 10rem"></Button>
         </div>
-        <div class="flex flex-wrap justify-content-center gap-2 mb-2">
+        <div class="flex flex-wrap justify-content-center gap-2 mb-3">
             <Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" severity="warning" style="min-width: 10rem"></Button>
             <Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" severity="warning" style="min-width: 10rem"></Button>
             <Button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" severity="warning" style="min-width: 10rem"></Button>
@@ -71,16 +71,16 @@ export default {
     methods: {
         confirmPosition(position) {
             this.$confirm.require({
-                group: 'positionDialog',
-                message: 'Do you want to delete this record?',
-                header: 'Delete Confirmation',
+                group: 'positioned',
+                message: 'Are you sure you want to proceed?',
+                header: 'Confirmation',
                 icon: 'pi pi-info-circle',
                 position: position,
                 accept: () => {
-                    this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 });
+                    this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Request submitted', life: 3000 });
                 },
                 reject: () => {
-                    this.$toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+                    this.$toast.add({ severity: 'error', summary: 'Rejected', detail: 'Process incomplete', life: 3000 });
                 }
             });
         },
@@ -91,13 +91,13 @@ export default {
                 composition: `
 <template>
     <Toast />
-    <ConfirmDialog group="positionDialog"></ConfirmDialog>
+    <ConfirmDialog group="positioned"></ConfirmDialog>
     <div class="card">
-        <div class="flex flex-wrap justify-content-center gap-2 mb-2">
+        <div class="flex flex-wrap justify-content-center gap-2 mb-3">
             <Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" severity="help" style="min-width: 10rem"></Button>
             <Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" severity="help" style="min-width: 10rem"></Button>
         </div>
-        <div class="flex flex-wrap justify-content-center gap-2 mb-2">
+        <div class="flex flex-wrap justify-content-center gap-2 mb-3">
             <Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" severity="warning" style="min-width: 10rem"></Button>
             <Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" severity="warning" style="min-width: 10rem"></Button>
             <Button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" severity="warning" style="min-width: 10rem"></Button>
@@ -119,16 +119,16 @@ const toast = useToast();
 
 const confirmPosition = (position) => {
     confirm.require({
-        group: 'positionDialog',
-        message: 'Do you want to delete this record?',
-        header: 'Delete Confirmation',
+        group: 'positioned',
+        message: 'Are you sure you want to proceed?',
+        header: 'Confirmation',
         icon: 'pi pi-info-circle',
         position: position,
         accept: () => {
-            toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 });
+            toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Request submitted', life: 3000 });
         },
         reject: () => {
-            toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+            toast.add({ severity: 'error', summary: 'Rejected', detail: 'Process incomplete', life: 3000 });
         }
     });
 };
@@ -140,16 +140,16 @@ const confirmPosition = (position) => {
     methods: {
         confirmPosition(position) {
             this.$confirm.require({
-                group: 'positionDialog',
-                message: 'Do you want to delete this record?',
-                header: 'Delete Confirmation',
+                group: 'positioned',
+                message: 'Are you sure you want to proceed?',
+                header: 'Confirmation',
                 icon: 'pi pi-info-circle',
                 position: position,
                 accept: () => {
-                    this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 });
+                    this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Request submitted', life: 3000 });
                 },
                 reject: () => {
-                    this.$toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+                    this.$toast.add({ severity: 'error', summary: 'Rejected', detail: 'Process incomplete', life: 3000 });
                 }
             });
         }
diff --git a/doc/confirmdialog/TemplateDoc.vue b/doc/confirmdialog/TemplateDoc.vue
index 8fe5300af..f852685c6 100644
--- a/doc/confirmdialog/TemplateDoc.vue
+++ b/doc/confirmdialog/TemplateDoc.vue
@@ -1,17 +1,17 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Templating allows customizing the content where the message instance is available as the implicit variable.</p>
+        <p>Templating allows customizing the message content.</p>
     </DocSectionText>
-    <ConfirmDialog group="templating" :pt="{ headertitle: 'mr-4' }">
+    <ConfirmDialog group="templating">
         <template #message="slotProps">
-            <div class="flex p-4">
-                <i :class="slotProps.message.icon" style="font-size: 1.5rem"></i>
-                <p class="pl-2">{{ slotProps.message.message }}</p>
+            <div class="flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border">
+                <i :class="slotProps.message.icon" class="text-5xl text-primary-500"></i>
+                <p>{{ slotProps.message.message }}</p>
             </div>
         </template>
     </ConfirmDialog>
-    <div class="card flex flex-wrap gap-2 justify-content-center">
-        <Button @click="showTemplate()" icon="pi pi-check" label="Terms and Conditions" class="mr-2"></Button>
+    <div class="card flex justify-content-center">
+        <Button @click="showTemplate()" icon="pi pi-check" label="Confirm"></Button>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -22,28 +22,28 @@ export default {
         return {
             code: {
                 basic: `
-<ConfirmDialog group="templating" :pt="{ headertitle: 'mr-4' }">
+<ConfirmDialog group="templating">
     <template #message="slotProps">
-        <div class="flex p-4">
-            <i :class="slotProps.message.icon" style="font-size: 1.5rem"></i>
-            <p class="pl-2">{{ slotProps.message.message }}</p>
+        <div class="flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border">
+            <i :class="slotProps.message.icon" class="text-5xl text-primary-500"></i>
+            <p>{{ slotProps.message.message }}</p>
         </div>
     </template>
 </ConfirmDialog>
-<Button @click="showTemplate()" icon="pi pi-check" label="Terms and Conditions" class="mr-2"></Button>
+<Button @click="showTemplate()" icon="pi pi-check" label="Confirm"></Button>
 `,
                 options: `
 <template>
-    <ConfirmDialog group="templating" :pt="{ headertitle: 'mr-4' }">
+    <ConfirmDialog group="templating">
         <template #message="slotProps">
-            <div class="flex p-4">
-                <i :class="slotProps.message.icon" style="font-size: 1.5rem"></i>
-                <p class="pl-2">{{ slotProps.message.message }}</p>
+            <div class="flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border">
+                <i :class="slotProps.message.icon" class="text-5xl text-primary-500"></i>
+                <p>{{ slotProps.message.message }}</p>
             </div>
         </template>
     </ConfirmDialog>
-    <div class="card flex flex-wrap gap-2 justify-content-center">
-        <Button @click="showTemplate()" icon="pi pi-check" label="Terms and Conditions" class="mr-2"></Button>
+    <div class="card flex justify-content-center">
+        <Button @click="showTemplate()" icon="pi pi-check" label="Confirm"></Button>
     </div>
     <Toast />
 </template>
@@ -54,11 +54,12 @@ export default {
         showTemplate() {
             this.$confirm.require({
                 group: 'templating',
-                header: 'Terms and Conditions',
-                message: 'Do you accept that?',
+                header: 'Confirmation',
+                message: 'Please confirm to proceed moving forward.',
                 icon: 'pi pi-question-circle',
                 acceptIcon: 'pi pi-check',
                 rejectIcon: 'pi pi-times',
+                acceptClass: 'p-button-outlined',
                 accept: () => {
                     this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
                 },
@@ -73,16 +74,16 @@ export default {
 `,
                 composition: `
 <template>
-    <ConfirmDialog group="templating" :pt="{ headertitle: 'mr-4' }">
+    <ConfirmDialog group="templating">
         <template #message="slotProps">
-            <div class="flex p-4">
-                <i :class="slotProps.message.icon" style="font-size: 1.5rem"></i>
-                <p class="pl-2">{{ slotProps.message.message }}</p>
+            <div class="flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border">
+                <i :class="slotProps.message.icon" class="text-5xl text-primary-500"></i>
+                <p>{{ slotProps.message.message }}</p>
             </div>
         </template>
     </ConfirmDialog>
-    <div class="card flex flex-wrap gap-2 justify-content-center">
-        <Button @click="showTemplate()" icon="pi pi-check" label="Terms and Conditions" class="mr-2"></Button>
+    <div class="card flex justify-content-center">
+        <Button @click="showTemplate()" icon="pi pi-check" label="Confirm"></Button>
     </div>
     <Toast />
 </template>
@@ -97,11 +98,12 @@ const toast = useToast();
 const showTemplate = () => {
     confirm.require({
         group: 'templating',
-        header: 'Terms and Conditions',
-        message: 'Do you accept that?',
+        header: 'Confirmation',
+        message: 'Please confirm to proceed moving forward.',
         icon: 'pi pi-question-circle',
         acceptIcon: 'pi pi-check',
         rejectIcon: 'pi pi-times',
+        acceptClass: 'p-button-outlined',
         accept: () => {
             toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
         },
@@ -119,11 +121,12 @@ const showTemplate = () => {
         showTemplate() {
             this.$confirm.require({
                 group: 'templating',
-                header: 'Terms and Conditions',
-                message: 'Do you accept that?',
+                header: 'Confirmation',
+                message: 'Please confirm to proceed moving forward.',
                 icon: 'pi pi-question-circle',
                 acceptIcon: 'pi pi-check',
                 rejectIcon: 'pi pi-times',
+                acceptClass: 'p-button-outlined',
                 accept: () => {
                     this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
                 },
diff --git a/pages/confirmdialog/index.vue b/pages/confirmdialog/index.vue
index b7e2ed136..9c0a01844 100644
--- a/pages/confirmdialog/index.vue
+++ b/pages/confirmdialog/index.vue
@@ -14,6 +14,7 @@
 import AccessibilityDoc from '@/doc/confirmdialog/AccessibilityDoc.vue';
 import BasicDoc from '@/doc/confirmdialog/BasicDoc.vue';
 import ConfirmationServiceDoc from '@/doc/confirmdialog/ConfirmationServiceDoc.vue';
+import HeadlessDoc from '@/doc/confirmdialog/HeadlessDoc.vue';
 import ImportDoc from '@/doc/confirmdialog/ImportDoc.vue';
 import PositionDoc from '@/doc/confirmdialog/PositionDoc.vue';
 import TemplateDoc from '@/doc/confirmdialog/TemplateDoc.vue';
@@ -31,7 +32,7 @@ export default {
                 },
                 {
                     id: 'confirmation-service',
-                    label: 'Confirmation Service',
+                    label: 'Service',
                     component: ConfirmationServiceDoc
                 },
                 {
@@ -49,6 +50,11 @@ export default {
                     label: 'Template',
                     component: TemplateDoc
                 },
+                {
+                    id: 'headless',
+                    label: 'Headless',
+                    component: HeadlessDoc
+                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',