diff --git a/apps/showcase/doc/toast/pt/PTImage.vue b/apps/showcase/doc/toast/pt/PTImage.vue
deleted file mode 100644
index d274a920b..000000000
--- a/apps/showcase/doc/toast/pt/PTImage.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>{{ $attrs.description }}</p>
-    </DocSectionText>
-    <div class="card">
-        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/toast.jpg" />
-    </div>
-</template>
diff --git a/apps/showcase/doc/toast/pt/PTViewer.vue b/apps/showcase/doc/toast/pt/PTViewer.vue
new file mode 100644
index 000000000..1cf507704
--- /dev/null
+++ b/apps/showcase/doc/toast/pt/PTViewer.vue
@@ -0,0 +1,47 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="docs">
+        <div class="p-toast p-component" data-pc-name="toast">
+            <div>
+                <div class="p-toast-message p-toast-message-info" data-pc-section="message">
+                    <div class="p-toast-message-content" data-pc-section="messagecontent">
+                        <InfoCircleIcon class="p-toast-message-icon" data-pc-section="messageicon" />
+                        <div class="p-toast-message-text" data-pc-section="messagetext">
+                            <span class="p-toast-summary" data-pc-section="summary">Message Summary</span>
+                            <div class="p-toast-detail" data-pc-section="detail">Message Detail</div>
+                        </div>
+                        <div data-pc-section="buttoncontainer">
+                            <button class="p-toast-close-button" type="button" data-pc-section="closebutton">
+                                <TimesIcon class="p-toast-close-icon" data-pc-section="closeicon" />
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+import InfoCircleIcon from '@primevue/icons/infocircle';
+import TimesIcon from '@primevue/icons/times';
+import { markRaw } from 'vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    data: getPTOptions('Toast'),
+                    key: 'Toast'
+                }
+            ]
+        };
+    },
+    components: {
+        InfoCircleIcon: markRaw(InfoCircleIcon),
+        TimesIcon: markRaw(TimesIcon)
+    }
+};
+</script>
diff --git a/apps/showcase/doc/toast/pt/index.vue b/apps/showcase/doc/toast/pt/index.vue
index e236ed26a..d8d30b040 100644
--- a/apps/showcase/doc/toast/pt/index.vue
+++ b/apps/showcase/doc/toast/pt/index.vue
@@ -11,16 +11,16 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOptions } from '@/components/doc/helpers';
-import PTImage from './PTImage.vue';
+import PTViewer from './PTViewer.vue';
 
 export default {
     data() {
         return {
             docs: [
                 {
-                    id: 'pt.image',
-                    label: 'Wireframe',
-                    component: PTImage
+                    id: 'pt.viewer',
+                    label: 'Viewer',
+                    component: PTViewer
                 },
                 {
                     id: 'pt.doc.toast',