diff --git a/doc/accordion/pt/PTImage.vue b/doc/accordion/pt/PTImage.vue
index c50e6a19e..0fa365701 100644
--- a/doc/accordion/pt/PTImage.vue
+++ b/doc/accordion/pt/PTImage.vue
@@ -3,6 +3,6 @@
         <p>{{ $attrs.description }}</p>
     </DocSectionText>
     <div>
-        <img class="w-full" src="/images/pt/accordion.jpg" />
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/accordion.jpg" />
     </div>
 </template>
diff --git a/doc/card/pt/PTImage.vue b/doc/card/pt/PTImage.vue
index da0c40243..514b14243 100644
--- a/doc/card/pt/PTImage.vue
+++ b/doc/card/pt/PTImage.vue
@@ -3,6 +3,6 @@
         <p>{{ $attrs.description }}</p>
     </DocSectionText>
     <div>
-        <img class="w-full" src="/images/pt/card.jpg" />
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/card.jpg" />
     </div>
 </template>
diff --git a/doc/deferredcontent/pt/PTImage.vue b/doc/deferredcontent/pt/PTImage.vue
index 803a964d0..34f68865d 100644
--- a/doc/deferredcontent/pt/PTImage.vue
+++ b/doc/deferredcontent/pt/PTImage.vue
@@ -3,6 +3,6 @@
         <p>{{ $attrs.description }}</p>
     </DocSectionText>
     <div>
-        <img class="w-full" src="/images/pt/deferred.jpg" />
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/deferred.jpg" />
     </div>
 </template>
diff --git a/doc/divider/pt/PTImage.vue b/doc/divider/pt/PTImage.vue
index 4cd1855be..de6f933a9 100644
--- a/doc/divider/pt/PTImage.vue
+++ b/doc/divider/pt/PTImage.vue
@@ -3,6 +3,6 @@
         <p>{{ $attrs.description }}</p>
     </DocSectionText>
     <div>
-        <img class="w-full" src="/images/pt/divider.jpg" />
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/divider.jpg" />
     </div>
 </template>
diff --git a/doc/fieldset/pt/PTImage.vue b/doc/fieldset/pt/PTImage.vue
index 889386693..b451ba9e4 100644
--- a/doc/fieldset/pt/PTImage.vue
+++ b/doc/fieldset/pt/PTImage.vue
@@ -3,6 +3,6 @@
         <p>{{ $attrs.description }}</p>
     </DocSectionText>
     <div>
-        <img class="w-full" src="/images/pt/fieldset.jpg" />
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/fieldset.jpg" />
     </div>
 </template>
diff --git a/doc/panel/pt/PTImage.vue b/doc/panel/pt/PTImage.vue
index bcae401cf..f178fde7d 100644
--- a/doc/panel/pt/PTImage.vue
+++ b/doc/panel/pt/PTImage.vue
@@ -3,6 +3,6 @@
         <p>{{ $attrs.description }}</p>
     </DocSectionText>
     <div>
-        <img class="w-full" src="/images/pt/panel.jpg" />
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/panel.jpg" />
     </div>
 </template>
diff --git a/doc/scrollpanel/pt/PTImage.vue b/doc/scrollpanel/pt/PTImage.vue
index 74ea95aa2..608c732f7 100644
--- a/doc/scrollpanel/pt/PTImage.vue
+++ b/doc/scrollpanel/pt/PTImage.vue
@@ -3,6 +3,6 @@
         <p>{{ $attrs.description }}</p>
     </DocSectionText>
     <div>
-        <img class="w-full" src="/images/pt/scrollpanel.jpg" />
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/scrollpanel.jpg" />
     </div>
 </template>
diff --git a/doc/splitter/pt/PTImage.vue b/doc/splitter/pt/PTImage.vue
index 2ae4fa407..6104f1daa 100644
--- a/doc/splitter/pt/PTImage.vue
+++ b/doc/splitter/pt/PTImage.vue
@@ -3,6 +3,6 @@
         <p>{{ $attrs.description }}</p>
     </DocSectionText>
     <div>
-        <img class="w-full" src="/images/pt/splitter.jpg" />
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/splitter.jpg" />
     </div>
 </template>
diff --git a/doc/tabview/pt/PTImage.vue b/doc/tabview/pt/PTImage.vue
index 2e2025a8b..7cc9f0fed 100644
--- a/doc/tabview/pt/PTImage.vue
+++ b/doc/tabview/pt/PTImage.vue
@@ -3,6 +3,6 @@
         <p>{{ $attrs.description }}</p>
     </DocSectionText>
     <div>
-        <img class="w-full" src="/images/pt/tabview.jpg" />
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/tabview.jpg" />
     </div>
 </template>
diff --git a/doc/toolbar/pt/PTDoc.vue b/doc/toolbar/pt/PTDoc.vue
index 8d983b49c..8f41ced5c 100644
--- a/doc/toolbar/pt/PTDoc.vue
+++ b/doc/toolbar/pt/PTDoc.vue
@@ -1,12 +1,14 @@
 <template>
     <DocSectionText v-bind="$attrs"> </DocSectionText>
     <div class="card">
-        <Toolbar :pt="{ root: { class: 'p-1' }, groupleft: { class: 'p-2 text-primary' } }">
+        <Toolbar :pt="{ root: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)', borderRadius: '24px' } } }">
             <template #start>
-                <span>PrimeVue</span>
+                <Button label="New" icon="pi pi-plus" class="p-button-help" />
             </template>
+
             <template #end>
-                <Button label="Logout" />
+                <Button icon="pi pi-search" class="mr-2" />
+                <Button icon="pi pi-times" severity="danger" />
             </template>
         </Toolbar>
     </div>
@@ -20,24 +22,28 @@ export default {
             code: {
                 basic: `
 <TabView>
-    <Toolbar :pt="{ root: { class: 'p-1' }, groupleft: { class: 'p-2 text-primary' } }">
+    <Toolbar :pt="{ root: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)', borderRadius: '24px' } } }">
         <template #start>
-            <span>PrimeVue</span>
+            <Button label="New" icon="pi pi-plus" class="p-button-help" />
         </template>
+
         <template #end>
-            <Button label="Logout" />
+            <Button icon="pi pi-search" class="mr-2" />
+            <Button icon="pi pi-times" severity="danger" />
         </template>
     </Toolbar>
 </TabView>`,
                 options: `
 <template>
     <div class="card">
-        <Toolbar :pt="{ root: { class: 'p-1' }, groupleft: { class: 'p-2 text-primary' } }">
+        <Toolbar :pt="{ root: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)', borderRadius: '24px' } } }">
             <template #start>
-                <span>PrimeVue</span>
+                <Button label="New" icon="pi pi-plus" class="p-button-help" />
             </template>
+
             <template #end>
-                <Button label="Logout" />
+                <Button icon="pi pi-search" class="mr-2" />
+                <Button icon="pi pi-times" severity="danger" />
             </template>
         </Toolbar>
     </div>
@@ -45,27 +51,20 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <Toolbar :pt="{ root: { class: 'p-1' }, groupleft: { class: 'p-2 text-primary' } }">
+        <Toolbar :pt="{ root: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)', borderRadius: '24px' } } }">
             <template #start>
-                <span>PrimeVue</span>
+                <Button label="New" icon="pi pi-plus" class="p-button-help" />
             </template>
+
             <template #end>
-                <Button label="Logout" />
+                <Button icon="pi pi-search" class="mr-2" />
+                <Button icon="pi pi-times" severity="danger" />
             </template>
         </Toolbar>
     </div>
 </template>`
             }
         };
-    },
-    methods: {
-        panelClass(props, parent, index) {
-            return [
-                {
-                    'bg-primary': parent.state.d_activeIndex === index
-                }
-            ];
-        }
     }
 };
 </script>
diff --git a/doc/toolbar/pt/PTImage.vue b/doc/toolbar/pt/PTImage.vue
index ceaa8c303..0bbef1596 100644
--- a/doc/toolbar/pt/PTImage.vue
+++ b/doc/toolbar/pt/PTImage.vue
@@ -3,6 +3,6 @@
         <p>{{ $attrs.description }}</p>
     </DocSectionText>
     <div>
-        <img class="w-full" src="/images/pt/toolbar.jpg" />
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/toolbar.jpg" />
     </div>
 </template>