diff --git a/apps/showcase/doc/drawer/pt/PTImage.vue b/apps/showcase/doc/drawer/pt/PTImage.vue
deleted file mode 100644
index 5f4489a0e..000000000
--- a/apps/showcase/doc/drawer/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/sidebar.jpg" />
-    </div>
-</template>
diff --git a/apps/showcase/doc/drawer/pt/PTViewer.vue b/apps/showcase/doc/drawer/pt/PTViewer.vue
new file mode 100644
index 000000000..819ed29cb
--- /dev/null
+++ b/apps/showcase/doc/drawer/pt/PTViewer.vue
@@ -0,0 +1,56 @@
+<template>
+    <DocPTViewer :docs="docs" class="!justify-start">
+        <div class="">
+            <div class="p-drawer p-component h-[450px] w-80" role="complementary" aria-modal="true" data-pc-name="drawer" data-pc-section="root">
+                <span class="p-hidden-accessible p-hidden-focusable" tabindex="0" role="presentation" aria-hidden="true" data-p-hidden-accessible="true" data-p-hidden-focusable="true" data-pc-section="firstfocusableelement"></span>
+                <div class="p-drawer-header" data-pc-section="header">
+                    <div class="p-drawer-title" data-pc-section="title">Drawer</div>
+                    <button
+                        class="p-button p-component p-button-icon-only p-button-secondary p-button-rounded p-button-text p-drawer-close-button"
+                        type="button"
+                        aria-label="Close"
+                        data-pc-name="pcclosebutton"
+                        data-p-disabled="false"
+                        data-p-severity="secondary"
+                        data-pc-group-section="iconcontainer"
+                        data-pc-extend="button"
+                        data-pc-section="root"
+                    >
+                        <TimesIcon class="p-button-icon" />
+                    </button>
+                </div>
+                <div class="p-drawer-content" data-pc-section="content">
+                    <p>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat.
+                    </p>
+                </div>
+                <div class="p-drawer-footer" data-pc-section="footer">Footer</div>
+                <span class="p-hidden-accessible p-hidden-focusable" tabindex="0" role="presentation" aria-hidden="true" data-p-hidden-accessible="true" data-p-hidden-focusable="true" data-pc-section="lastfocusableelement"></span>
+            </div>
+        </div>
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+import TimesIcon from '@primevue/icons/times';
+import { markRaw } from 'vue';
+
+export default {
+    data() {
+        return {
+            visible: true,
+            docs: [
+                {
+                    data: getPTOptions('Drawer'),
+                    key: 'Drawer'
+                }
+            ]
+        };
+    },
+    components: {
+        TimesIcon: markRaw(TimesIcon)
+    }
+};
+</script>
diff --git a/apps/showcase/doc/drawer/pt/index.vue b/apps/showcase/doc/drawer/pt/index.vue
index 3e5778b96..fc6d7922a 100644
--- a/apps/showcase/doc/drawer/pt/index.vue
+++ b/apps/showcase/doc/drawer/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.drawer',
diff --git a/apps/showcase/doc/toast/pt/PTViewer.vue b/apps/showcase/doc/toast/pt/PTViewer.vue
index 315039b02..341912cbf 100644
--- a/apps/showcase/doc/toast/pt/PTViewer.vue
+++ b/apps/showcase/doc/toast/pt/PTViewer.vue
@@ -1,6 +1,6 @@
 <template>
     <DocPTViewer :docs="docs">
-        <div class="p-toast p-component" data-pc-name="toast">
+        <div class="p-toast p-component" data-pc-name="toast" data-pc-section="root">
             <div>
                 <div class="p-toast-message p-toast-message-info" data-pc-section="message">
                     <div class="p-toast-message-content" data-pc-section="messagecontent">