diff --git a/apps/showcase/doc/datatable/pt/PTImage.vue b/apps/showcase/doc/datatable/pt/PTViewer.vue
similarity index 100%
rename from apps/showcase/doc/datatable/pt/PTImage.vue
rename to apps/showcase/doc/datatable/pt/PTViewer.vue
diff --git a/apps/showcase/doc/datatable/pt/index.vue b/apps/showcase/doc/datatable/pt/index.vue
index 12488a615..b70251d82 100644
--- a/apps/showcase/doc/datatable/pt/index.vue
+++ b/apps/showcase/doc/datatable/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.datatable',
diff --git a/apps/showcase/doc/dataview/pt/PTImage.vue b/apps/showcase/doc/dataview/pt/PTImage.vue
deleted file mode 100644
index 926c301e0..000000000
--- a/apps/showcase/doc/dataview/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/dataview.jpg" />
-    </div>
-</template>
diff --git a/apps/showcase/doc/dataview/pt/PTViewer.vue b/apps/showcase/doc/dataview/pt/PTViewer.vue
new file mode 100644
index 000000000..37fef276a
--- /dev/null
+++ b/apps/showcase/doc/dataview/pt/PTViewer.vue
@@ -0,0 +1,81 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="docs">
+        <DataView :value="products">
+            <template #list="slotProps">
+                <div class="flex flex-col">
+                    <div v-for="(item, index) in slotProps.items" :key="index">
+                        <div class="flex flex-col sm:flex-row sm:items-center gap-4">
+                            <div class="md:w-40 relative">
+                                <img class="rounded w-36" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" />
+                                <div class="dark:bg-surface-900 absolute rounded-border" style="left: 4px; top: 4px">
+                                    <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
+                                </div>
+                            </div>
+                            <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
+                                <div class="flex flex-row md:flex-col justify-between items-start gap-2">
+                                    <div>
+                                        <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
+                                        <div class="text-lg font-medium mt-2">{{ item.name }}</div>
+                                    </div>
+                                    <div class="bg-surface-100 p-1" style="border-radius: 30px">
+                                        <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
+                                            <span class="text-surface-900 font-medium text-sm">{{ item.rating }}</span>
+                                            <i class="pi pi-star-fill text-yellow-500"></i>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="flex flex-col md:items-end gap-8">
+                                    <span class="text-xl font-semibold">${{ item.price }}</span>
+                                    <div class="flex flex-row-reverse md:flex-row gap-2">
+                                        <Button icon="pi pi-heart" outlined></Button>
+                                        <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </template>
+        </DataView>
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null,
+            docs: [
+                {
+                    data: getPTOptions('DataView'),
+                    key: 'DataView'
+                }
+            ]
+        };
+    },
+    mounted() {
+        ProductService.getProductsSmall().then((data) => (this.products = data.slice(0, 3)));
+    },
+    methods: {
+        getSeverity(product) {
+            switch (product.inventoryStatus) {
+                case 'INSTOCK':
+                    return 'success';
+
+                case 'LOWSTOCK':
+                    return 'warn';
+
+                case 'OUTOFSTOCK':
+                    return 'danger';
+
+                default:
+                    return null;
+            }
+        }
+    }
+};
+</script>
diff --git a/apps/showcase/doc/dataview/pt/index.vue b/apps/showcase/doc/dataview/pt/index.vue
index 349307a62..929f50a59 100644
--- a/apps/showcase/doc/dataview/pt/index.vue
+++ b/apps/showcase/doc/dataview/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.dataview',
diff --git a/apps/showcase/doc/orderlist/pt/PTImage.vue b/apps/showcase/doc/orderlist/pt/PTImage.vue
deleted file mode 100644
index ad360d574..000000000
--- a/apps/showcase/doc/orderlist/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/orderlist.jpg" />
-    </div>
-</template>
diff --git a/apps/showcase/doc/orderlist/pt/PTViewer.vue b/apps/showcase/doc/orderlist/pt/PTViewer.vue
new file mode 100644
index 000000000..d07e8b624
--- /dev/null
+++ b/apps/showcase/doc/orderlist/pt/PTViewer.vue
@@ -0,0 +1,32 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="docs">
+        <OrderList v-model="products" dataKey="id" breakpoint="575px" pt:pcList:root="w-full sm:w-56">
+            <template #option="{ option }">
+                {{ option.name }}
+            </template>
+        </OrderList>
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null,
+            docs: [
+                {
+                    data: getPTOptions('OrderList'),
+                    key: 'OrderList'
+                }
+            ]
+        };
+    },
+    mounted() {
+        ProductService.getProductsSmall().then((data) => (this.products = data));
+    }
+};
+</script>
diff --git a/apps/showcase/doc/orderlist/pt/index.vue b/apps/showcase/doc/orderlist/pt/index.vue
index dc3eba575..66e916e96 100644
--- a/apps/showcase/doc/orderlist/pt/index.vue
+++ b/apps/showcase/doc/orderlist/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.orderlist',
diff --git a/apps/showcase/doc/picklist/pt/PTImage.vue b/apps/showcase/doc/picklist/pt/PTImage.vue
deleted file mode 100644
index 9b4a28738..000000000
--- a/apps/showcase/doc/picklist/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/picklist.jpg" />
-    </div>
-</template>
diff --git a/apps/showcase/doc/picklist/pt/PTViewer.vue b/apps/showcase/doc/picklist/pt/PTViewer.vue
new file mode 100644
index 000000000..34217f1fa
--- /dev/null
+++ b/apps/showcase/doc/picklist/pt/PTViewer.vue
@@ -0,0 +1,32 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="ptViewerDoc">
+        <PickList v-model="products" dataKey="id" breakpoint="1400px" class="w-full">
+            <template #option="{ option }">
+                {{ option.name }}
+            </template>
+        </PickList>
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null,
+            ptViewerDoc: [
+                {
+                    data: getPTOptions('PickList'),
+                    key: 'PickList'
+                }
+            ]
+        };
+    },
+    mounted() {
+        ProductService.getProductsSmall().then((data) => (this.products = [data, []]));
+    }
+};
+</script>
diff --git a/apps/showcase/doc/picklist/pt/index.vue b/apps/showcase/doc/picklist/pt/index.vue
index 9fd7671e3..007c05cc1 100644
--- a/apps/showcase/doc/picklist/pt/index.vue
+++ b/apps/showcase/doc/picklist/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.picklist',