diff --git a/app.vue b/app.vue
index ec1f57b06..ef308c3b9 100644
--- a/app.vue
+++ b/app.vue
@@ -39,8 +39,10 @@ export default {
                 this.$appState.announcement = data;
 
                 const itemString = localStorage.getItem(this.storageKey);
+
                 if (itemString) {
                     const item = JSON.parse(itemString);
+
                     if (item.hiddenNews && item.hiddenNews !== data.id) {
                         this.$appState.newsActive = true;
                     } else this.$appState.newsActive = false;
diff --git a/layouts/AppMenu.vue b/layouts/AppMenu.vue
index 6dcea1863..61f49aa7e 100755
--- a/layouts/AppMenu.vue
+++ b/layouts/AppMenu.vue
@@ -1,7 +1,7 @@
 <template>
     <div :class="['layout-sidebar', { active: active }]">
         <nuxt-link to="/" class="logo">
-            <img :src="'demo/images/primevue-logo-' + `${$appState.darkTheme ? 'light' : 'dark'}` + '.svg'" alt="primevue logo" />
+            <img :src="'/demo/images/primevue-logo-' + `${$appState.darkTheme ? 'light' : 'dark'}` + '.svg'" alt="primevue logo" />
         </nuxt-link>
         <div class="layout-sidebar-filter p-fluid">
             <AutoComplete
diff --git a/layouts/AppNews.vue b/layouts/AppNews.vue
index 17fff2162..67632ec3f 100644
--- a/layouts/AppNews.vue
+++ b/layouts/AppNews.vue
@@ -1,20 +1,18 @@
 <template>
-    <ClientOnly>
-        <div class="layout-news" :style="$appState?.announcement?.backgroundStyle">
-            <i></i>
-            <div class="layout-news-content">
-                <span class="layout-news-text" :style="$appState?.announcement?.textStyle">{{ $appState?.announcement?.content }}</span>
-                <a class="layout-news-link" :href="$appState?.announcement?.linkHref">{{ $appState?.announcement?.linkText }}</a>
-            </div>
-            <a class="layout-news-close" :style="$appState?.announcement?.textStyle" @click="onClose">
-                <span class="pi pi-times"></span>
-            </a>
+    <div class="layout-news" :style="$appState.announcement.backgroundStyle">
+        <i></i>
+        <div class="layout-news-content">
+            <span class="layout-news-text" :style="$appState.announcement.textStyle">{{ $appState.announcement.content }}</span>
+            <a class="layout-news-link" :href="$appState.announcement.linkHref">{{ $appState.announcement.linkText }}</a>
         </div>
-    </ClientOnly>
+        <a class="layout-news-close" :style="$appState.announcement.textStyle" @click="onClose">
+            <span class="pi pi-times"></span>
+        </a>
+    </div>
 </template>
 
 <script>
-import EventBus from './AppEventBus';
+import EventBus from '@/layouts/AppEventBus';
 
 export default {
     data() {
@@ -33,6 +31,7 @@ export default {
             const item = {
                 hiddenNews: this.$appState.announcement.id
             };
+
             localStorage.setItem(this.storageKey, JSON.stringify(item));
         }
     }
diff --git a/pages/accessibility/index.vue b/pages/accessibility/index.vue
index 06e4d048e..a8223188d 100644
--- a/pages/accessibility/index.vue
+++ b/pages/accessibility/index.vue
@@ -200,7 +200,7 @@
 
             <div class="flex align-items-center">
                 <label for="binary" class="mr-2">Remember Me</label>
-                <Checkbox id="binary" binary v-model="checked" />
+                <Checkbox id="binary" v-model="checked" binary />
             </div>
 
             <h5>Colors</h5>
diff --git a/pages/accordion/AccordionDoc.vue b/pages/accordion/AccordionDoc.vue
index d9ee669af..7dcec1ec2 100755
--- a/pages/accordion/AccordionDoc.vue
+++ b/pages/accordion/AccordionDoc.vue
@@ -1,24 +1,23 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="AccordionDemo" :sources="sources" github="accordion/AccordionDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="AccordionDemo" :sources="sources" github="accordion/AccordionDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import Accordion from 'primevue/accordion';
 import AccordionTab from 'primevue/accordiontab';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/accordion/accordion.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/accordiontab/accordiontab.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p>Accordion element consists of one or more AccordionTab elements. Title of the tab is defined using header attribute.</p>
-            <pre v-code><code>
+        <h5>Getting Started</h5>
+        <p>Accordion element consists of one or more AccordionTab elements. Title of the tab is defined using header attribute.</p>
+        <pre v-code><code>
 &lt;Accordion&gt;
 	&lt;AccordionTab header="Header I"&gt;
 		Content
@@ -33,9 +32,9 @@ import AccordionTab from 'primevue/accordiontab';
 
 </code></pre>
 
-            <h5>Active</h5>
-            <p>Visibility of the content is specified with the <i>activeIndex</i> property that supports one or two-way binding.</p>
-            <pre v-code><code>
+        <h5>Active</h5>
+        <p>Visibility of the content is specified with the <i>activeIndex</i> property that supports one or two-way binding.</p>
+        <pre v-code><code>
 &lt;Accordion :activeIndex="0"&gt;
 	&lt;AccordionTab header="Header I"&gt;
 		Content
@@ -50,8 +49,8 @@ import AccordionTab from 'primevue/accordiontab';
 
 </code></pre>
 
-            <p>Two-way binding requires v-model.</p>
-            <pre v-code><code>
+        <p>Two-way binding requires v-model.</p>
+        <pre v-code><code>
 &lt;Accordion v-model:activeIndex="activeIndex"&gt;
 	&lt;AccordionTab header="Header I"&gt;
 		Content
@@ -66,9 +65,9 @@ import AccordionTab from 'primevue/accordiontab';
 
 </code></pre>
 
-            <h5>Multiple</h5>
-            <p>By default only one tab at a time can be active, enabling multiple property changes this behavior to allow multiple tabs be active at the same time.</p>
-            <pre v-code><code>
+        <h5>Multiple</h5>
+        <p>By default only one tab at a time can be active, enabling multiple property changes this behavior to allow multiple tabs be active at the same time.</p>
+        <pre v-code><code>
 &lt;Accordion :multiple="true"&gt;
 	&lt;AccordionTab header="Header I"&gt;
 		Content
@@ -83,9 +82,9 @@ import AccordionTab from 'primevue/accordiontab';
 
 </code></pre>
 
-            <h5>Disabled</h5>
-            <p>A tab can be disabled by setting the <i>disabled</i> property to true.</p>
-            <pre v-code><code>
+        <h5>Disabled</h5>
+        <p>A tab can be disabled by setting the <i>disabled</i> property to true.</p>
+        <pre v-code><code>
 &lt;Accordion&gt;
 	&lt;AccordionTab header="Header I"&gt;
 		Content
@@ -100,9 +99,9 @@ import AccordionTab from 'primevue/accordiontab';
 
 </code></pre>
 
-            <h5>Custom Content at Headers</h5>
-            <p>Custom content for the title section of a panel is defined using the header template.</p>
-            <pre v-code><code>
+        <h5>Custom Content at Headers</h5>
+        <p>Custom content for the title section of a panel is defined using the header template.</p>
+        <pre v-code><code>
 &lt;Accordion&gt;
 	&lt;AccordionTab&gt;
 		&lt;template #header&gt;
@@ -129,14 +128,14 @@ import AccordionTab from 'primevue/accordiontab';
 
 </code></pre>
 
-            <h5>Programmatic Control</h5>
-            <p>Tabs can be controlled programmatically using <i>activeIndex</i> property.</p>
-            <pre v-code><code>
+        <h5>Programmatic Control</h5>
+        <p>Tabs can be controlled programmatically using <i>activeIndex</i> property.</p>
+        <pre v-code><code>
 &lt;Button @click="active = 0" class="p-button-text" label="Activate 1st" /&gt;
 &lt;Button @click="active = 1" class="p-button-text" label="Activate 2nd" /&gt;
 &lt;Button @click="active = 2" class="p-button-text" label="Activate 3rd" /&gt;
 
-&lt;Accordion :multiple="true" :activeIdex="active"&gt;
+&lt;Accordion :multiple="true" :activeIndex="active"&gt;
 	&lt;AccordionTab header="Header I"&gt;
 		Content
 	&lt;/AccordionTab&gt;
@@ -150,7 +149,7 @@ import AccordionTab from 'primevue/accordiontab';
 
 </code></pre>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 export default {
 	data() {
 		return {
@@ -161,9 +160,9 @@ export default {
 
 </code></pre>
 
-            <h5>Dynamic Tabs</h5>
-            <p>Tabs can be generated dynamically using the standard <i>v-for</i> directive.</p>
-            <pre v-code><code><template v-pre>
+        <h5>Dynamic Tabs</h5>
+        <p>Tabs can be generated dynamically using the standard <i>v-for</i> directive.</p>
+        <pre v-code><code><template v-pre>
 &lt;Accordion&gt;
 	&lt;AccordionTab v-for="tab in tabs" :key="tab.title" :header="tab.title"&gt;
 		&lt;p&gt;{{tab.content}}&lt;/p&gt;
@@ -172,7 +171,7 @@ export default {
 </template>
 </code></pre>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 export default {
 	data() {
 		return {
@@ -187,13 +186,13 @@ export default {
 
 </code></pre>
 
-            <h5>Lazy Rendering</h5>
-            <p>
-                All tabs are rendered when mounted and inactive tabs are hidden with CSS. Enabling <i>lazy</i> option activates the dynamic mode where a tab is only rendered at DOM when it is active. This option is useful to speed up the initial
-                rendering performance if there are many tabs.
-            </p>
+        <h5>Lazy Rendering</h5>
+        <p>
+            All tabs are rendered when mounted and inactive tabs are hidden with CSS. Enabling <i>lazy</i> option activates the dynamic mode where a tab is only rendered at DOM when it is active. This option is useful to speed up the initial
+            rendering performance if there are many tabs.
+        </p>
 
-            <pre v-code><code>
+        <pre v-code><code>
 &lt;Accordion lazy&gt;
 	&lt;AccordionTab header="Header I"&gt;
 		Content
@@ -208,273 +207,272 @@ export default {
 
 </code></pre>
 
-            <h5>Properties of AccordionTab</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>header</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Orientation of tab headers.</td>
-                        </tr>
-                        <tr>
-                            <td>headerStyle</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Inline style of the tab header.</td>
-                        </tr>
-                        <tr>
-                            <td>headerClass</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the tab header.</td>
-                        </tr>
-                        <tr>
-                            <td>headerProps</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Uses to pass all properties of the HTMLDivElement to the tab header.</td>
-                        </tr>
-                        <tr>
-                            <td>headerActionProps</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Uses to pass all properties of the HTMLAnchorElement to the focusable anchor element inside the tab header.</td>
-                        </tr>
-                        <tr>
-                            <td>contentStyle</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Inline style of the tab content.</td>
-                        </tr>
-                        <tr>
-                            <td>contentClass</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the tab content.</td>
-                        </tr>
-                        <tr>
-                            <td>contentProps</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Uses to pass all properties of the HTMLDivElement to the tab content.</td>
-                        </tr>
-                        <tr>
-                            <td>disabled</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Whether the tab is disabled.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties of AccordionTab</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>header</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Orientation of tab headers.</td>
+                    </tr>
+                    <tr>
+                        <td>headerStyle</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Inline style of the tab header.</td>
+                    </tr>
+                    <tr>
+                        <td>headerClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the tab header.</td>
+                    </tr>
+                    <tr>
+                        <td>headerProps</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Uses to pass all properties of the HTMLDivElement to the tab header.</td>
+                    </tr>
+                    <tr>
+                        <td>headerActionProps</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Uses to pass all properties of the HTMLAnchorElement to the focusable anchor element inside the tab header.</td>
+                    </tr>
+                    <tr>
+                        <td>contentStyle</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Inline style of the tab content.</td>
+                    </tr>
+                    <tr>
+                        <td>contentClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the tab content.</td>
+                    </tr>
+                    <tr>
+                        <td>contentProps</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Uses to pass all properties of the HTMLDivElement to the tab content.</td>
+                    </tr>
+                    <tr>
+                        <td>disabled</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Whether the tab is disabled.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Properties of Accordion</h5>
-            <p>Any property as style and class are passed to the main container element. Following is the additional property to configure the component.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>multiple</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When enabled, multiple tabs can be activated at the same time.</td>
-                        </tr>
-                        <tr>
-                            <td>activeIndex</td>
-                            <td>number|array</td>
-                            <td>null</td>
-                            <td>Index of the active tab or an array of indexes in multiple mode.</td>
-                        </tr>
-                        <tr>
-                            <td>lazy</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When enabled, hidden tabs are not rendered at all. Defaults to false that hides tabs with css.</td>
-                        </tr>
-                        <tr>
-                            <td>expandIcon</td>
-                            <td>string</td>
-                            <td>pi-chevron-right</td>
-                            <td>Icon of a collapsed tab.</td>
-                        </tr>
-                        <tr>
-                            <td>collapseIcon</td>
-                            <td>string</td>
-                            <td>pi-chevron-down</td>
-                            <td>Icon of an expanded tab.</td>
-                        </tr>
-                        <tr>
-                            <td>tabindex</td>
-                            <td>number</td>
-                            <td>0</td>
-                            <td>Index of the element in tabbing order.</td>
-                        </tr>
-                        <tr>
-                            <td>selectOnFocus</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When enabled, the focused tab is activated.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties of Accordion</h5>
+        <p>Any property as style and class are passed to the main container element. Following is the additional property to configure the component.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>multiple</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When enabled, multiple tabs can be activated at the same time.</td>
+                    </tr>
+                    <tr>
+                        <td>activeIndex</td>
+                        <td>number|array</td>
+                        <td>null</td>
+                        <td>Index of the active tab or an array of indexes in multiple mode.</td>
+                    </tr>
+                    <tr>
+                        <td>lazy</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When enabled, hidden tabs are not rendered at all. Defaults to false that hides tabs with css.</td>
+                    </tr>
+                    <tr>
+                        <td>expandIcon</td>
+                        <td>string</td>
+                        <td>pi-chevron-right</td>
+                        <td>Icon of a collapsed tab.</td>
+                    </tr>
+                    <tr>
+                        <td>collapseIcon</td>
+                        <td>string</td>
+                        <td>pi-chevron-down</td>
+                        <td>Icon of an expanded tab.</td>
+                    </tr>
+                    <tr>
+                        <td>tabindex</td>
+                        <td>number</td>
+                        <td>0</td>
+                        <td>Index of the element in tabbing order.</td>
+                    </tr>
+                    <tr>
+                        <td>selectOnFocus</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When enabled, the focused tab is activated.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Events</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>tab-open</td>
-                            <td>
-                                event.originalEvent: Browser event <br />
-                                event.index: Opened tab index
-                            </td>
-                            <td>Callback to invoke when a tab gets expanded.</td>
-                        </tr>
-                        <tr>
-                            <td>tab-close</td>
-                            <td>
-                                event.originalEvent: Browser event <br />
-                                event.index: Closed tab index
-                            </td>
-                            <td>Callback to invoke when an active tab is collapsed by clicking on the header.</td>
-                        </tr>
-                        <tr>
-                            <td>tab-click</td>
-                            <td>
-                                event.originalEvent: Browser event <br />
-                                event.index: Index of the clicked tab
-                            </td>
-                            <td>Callback to invoke when an active tab is clicked.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Events</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>tab-open</td>
+                        <td>
+                            event.originalEvent: Browser event <br />
+                            event.index: Opened tab index
+                        </td>
+                        <td>Callback to invoke when a tab gets expanded.</td>
+                    </tr>
+                    <tr>
+                        <td>tab-close</td>
+                        <td>
+                            event.originalEvent: Browser event <br />
+                            event.index: Closed tab index
+                        </td>
+                        <td>Callback to invoke when an active tab is collapsed by clicking on the header.</td>
+                    </tr>
+                    <tr>
+                        <td>tab-click</td>
+                        <td>
+                            event.originalEvent: Browser event <br />
+                            event.index: Index of the clicked tab
+                        </td>
+                        <td>Callback to invoke when an active tab is clicked.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-accordion</td>
-                            <td>Container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-accordion-header</td>
-                            <td>Header of a tab.</td>
-                        </tr>
-                        <tr>
-                            <td>p-accordion-content</td>
-                            <td>Container of a tab.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-accordion</td>
+                        <td>Container element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-accordion-header</td>
+                        <td>Header of a tab.</td>
+                    </tr>
+                    <tr>
+                        <td>p-accordion-content</td>
+                        <td>Container of a tab.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Accessibility</h5>
-            <h6>Screen Reader</h6>
-            <p>
-                Accordion header elements have a <i>button</i> role and use <i>aria-controls</i> to define the id of the content section along with <i>aria-expanded</i> for the visibility state. The value to read a header element defaults to the
-                value of the <i>header</i> property and can be customized by defining an <i>aria-label</i> or <i>aria-labelledby</i> via the <i>headerActionProps</i> property.
-            </p>
-            <p>The content uses <i>region</i> role, defines an id that matches the <i>aria-controls</i> of the header and <i>aria-labelledby</i> referring to the id of the header.</p>
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>
+            Accordion header elements have a <i>button</i> role and use <i>aria-controls</i> to define the id of the content section along with <i>aria-expanded</i> for the visibility state. The value to read a header element defaults to the value of
+            the <i>header</i> property and can be customized by defining an <i>aria-label</i> or <i>aria-labelledby</i> via the <i>headerActionProps</i> property.
+        </p>
+        <p>The content uses <i>region</i> role, defines an id that matches the <i>aria-controls</i> of the header and <i>aria-labelledby</i> referring to the id of the header.</p>
 
-            <h6>Header Keyboard Support</h6>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Key</th>
-                            <th>Function</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>
-                                <i>tab</i>
-                            </td>
-                            <td>Moves focus to the next the focusable element in the page tab sequence.</td>
-                        </tr>
-                        <tr>
-                            <td><i>shift</i> + <i>tab</i></td>
-                            <td>Moves focus to the previous the focusable element in the page tab sequence.</td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <i>enter</i>
-                            </td>
-                            <td>Toggles the visibility of the content.</td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <i>space</i>
-                            </td>
-                            <td>Toggles the visibility of the content.</td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <i>down arrow</i>
-                            </td>
-                            <td>Moves focus to the next header. If focus is on the last header, moves focus to the first header.</td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <i>up arrow</i>
-                            </td>
-                            <td>Moves focus to the previous header. If focus is on the first header, moves focus to the last header.</td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <i>home</i>
-                            </td>
-                            <td>Moves focus to the first header.</td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <i>end</i>
-                            </td>
-                            <td>Moves focus to the last header.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h6>Header Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>tab</i>
+                        </td>
+                        <td>Moves focus to the next focusable element in the page tab sequence.</td>
+                    </tr>
+                    <tr>
+                        <td><i>shift</i> + <i>tab</i></td>
+                        <td>Moves focus to the previous focusable element in the page tab sequence.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>Toggles the visibility of the content.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>Toggles the visibility of the content.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>down arrow</i>
+                        </td>
+                        <td>Moves focus to the next header. If focus is on the last header, moves focus to the first header.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>up arrow</i>
+                        </td>
+                        <td>Moves focus to the previous header. If focus is on the first header, moves focus to the last header.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>home</i>
+                        </td>
+                        <td>Moves focus to the first header.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>end</i>
+                        </td>
+                        <td>Moves focus to the last header.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc>
-    </ClientOnly>
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
diff --git a/pages/autocomplete/AutoCompleteDoc.vue b/pages/autocomplete/AutoCompleteDoc.vue
index ab813b7a9..e18e9e7ba 100755
--- a/pages/autocomplete/AutoCompleteDoc.vue
+++ b/pages/autocomplete/AutoCompleteDoc.vue
@@ -1,29 +1,28 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="AutoCompleteDemo" :sources="sources" :service="['CountryService']" :data="['countries']" github="autocomplete/AutoCompleteDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="AutoCompleteDemo" :sources="sources" :service="['CountryService']" :data="['countries']" github="autocomplete/AutoCompleteDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import AutoComplete from 'primevue/autocomplete';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/autocomplete/autocomplete.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p>
-                AutoComplete uses v-model for two-way binding, requires a list of suggestions and a complete method to query for the results. The complete method gets the query text as event.query property and should update the suggestions with the
-                search results. Example below connects to a remote datasource to fetch the results;
-            </p>
-            <pre v-code><code>
+        <h5>Getting Started</h5>
+        <p>
+            AutoComplete uses v-model for two-way binding, requires a list of suggestions and a complete method to query for the results. The complete method gets the query text as event.query property and should update the suggestions with the
+            search results. Example below connects to a remote datasource to fetch the results;
+        </p>
+        <pre v-code><code>
 &lt;AutoComplete v-model="selectedCountry" :suggestions="filteredCountriesBasic" @complete="searchCountry($event)" optionLabel="name" /&gt;
 
 </code></pre>
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 export default {
 	data() {
 		return {
@@ -44,36 +43,36 @@ export default {
 
 </code></pre>
 
-            <h5>Dropdown</h5>
-            <p>
-                Enabling <i>dropdown</i> property displays a button next to the input field where click behavior of the button is defined using dropdownMode property that takes "blank" or "current" as possible values. "blank" is the default mode to
-                send a query with an empty string whereas "current" setting sends a query with the current value of the input.
-            </p>
-            <pre v-code><code>
+        <h5>Dropdown</h5>
+        <p>
+            Enabling <i>dropdown</i> property displays a button next to the input field where click behavior of the button is defined using dropdownMode property that takes "blank" or "current" as possible values. "blank" is the default mode to send
+            a query with an empty string whereas "current" setting sends a query with the current value of the input.
+        </p>
+        <pre v-code><code>
 &lt;AutoComplete v-model="brand" :dropdown="true" :suggestions="filteredBrands" @complete="searchBrand($event)" placeholder="Hint: type 'v' or 'f'" /&gt;
 
 </code></pre>
 
-            <h5>Multiple Mode</h5>
-            <p>Multiple mode is enabled using <i>multiple</i> property to select more than one value from the autocomplete. In this case, value reference should be an array.</p>
-            <pre v-code><code>
+        <h5>Multiple Mode</h5>
+        <p>Multiple mode is enabled using <i>multiple</i> property to select more than one value from the autocomplete. In this case, value reference should be an array.</p>
+        <pre v-code><code>
 &lt;AutoComplete :multiple="true" v-model="selectedCountries" :suggestions="filteredCountriesMultiple" @complete="searchCountryMultiple($event)" optionLabel="name" /&gt;
 
 </code></pre>
 
-            <h5>Objects</h5>
-            <p>
-                AutoComplete can also work with objects using the <i>optionLabel</i> property that defines the label to display as a suggestion. The value passed to the model would still be the object instance of a suggestion. Here is an example with
-                a Country object that has name and code fields such as &#123;name:"United States",code:"USA"&#125;.
-            </p>
-            <pre v-code><code>
+        <h5>Objects</h5>
+        <p>
+            AutoComplete can also work with objects using the <i>optionLabel</i> property that defines the label to display as a suggestion. The value passed to the model would still be the object instance of a suggestion. Here is an example with a
+            Country object that has name and code fields such as &#123;name:"United States",code:"USA"&#125;.
+        </p>
+        <pre v-code><code>
 &lt;AutoComplete optionLabel="label" v-model="selectedCountry" :suggestions="filteredCountriesBasic" @complete="searchCountryBasic($event)" /&gt;
 
 </code></pre>
 
-            <h5>Grouping</h5>
-            <p>Options groups are specified with the <i>optionGroupLabel</i> and <i>optionGroupChildren</i> properties.</p>
-            <pre v-code.script><code>
+        <h5>Grouping</h5>
+        <p>Options groups are specified with the <i>optionGroupLabel</i> and <i>optionGroupChildren</i> properties.</p>
+        <pre v-code.script><code>
 export default {
     data() {
         return {
@@ -110,506 +109,524 @@ export default {
 }
 </code></pre>
 
-            <pre v-code><code><template v-pre>
+        <pre v-code><code><template v-pre>
 &lt;AutoComplete v-model="selectedCity" :suggestions="filteredCities" @complete="searchCity($event)"
     optionLabel="label" optionGroupLabel="label" optionGroupChildren="items"&gt;&lt;/AutoComplete&gt;
 </template>
 </code></pre>
 
-            <h5>Force Selection</h5>
-            <p>
-                ForceSelection mode validates the manual input to check whether it also exists in the suggestions list, if not the input value is cleared to make sure the value passed to the model is always one of the suggestions. Simply enable
-                <i>forceSelection</i> to enforce that input is always from the suggestion list.
-            </p>
-            <pre v-code><code>
+        <h5>Force Selection</h5>
+        <p>
+            ForceSelection mode validates the manual input to check whether it also exists in the suggestions list, if not the input value is cleared to make sure the value passed to the model is always one of the suggestions. Simply enable
+            <i>forceSelection</i> to enforce that input is always from the suggestion list.
+        </p>
+        <pre v-code><code>
 &lt;AutoComplete forceSelection v-model="brand" :suggestions="filteredBrands" @complete="searchBrand($event)" /&gt;
 
 </code></pre>
 
-            <h5>Templating</h5>
-            <p>
-                Item template allows displaying custom content inside the suggestions panel. The slotProps variable passed to the template provides an item property to represent an item in the suggestions collection. In addition <i>optiongroup</i>,
-                <i>chip</i>, <i>header</i> and <i>footer</i> slots are provided for further customization
-            </p>
-            <pre v-code><code><template v-pre>
+        <h5>Templating</h5>
+        <p>
+            Item template allows displaying custom content inside the suggestions panel. The slotProps variable passed to the template provides an item property to represent an item in the suggestions collection. In addition <i>optiongroup</i>,
+            <i>chip</i>, <i>header</i> and <i>footer</i> slots are provided for further customization
+        </p>
+        <pre v-code><code><template v-pre>
 &lt;AutoComplete v-model="brand" :suggestions="filteredBrands" @complete="searchBrand($event)" placeholder="Hint: type 'v' or 'f'" :dropdown="true"&gt;
     &lt;template #item="slotProps"&gt;
-		&lt;img :alt="slotProps.item" :src="'/demo/images/car/' + slotProps.item + '.png'" /&gt;
+		&lt;img :alt="slotProps.item" :src="'demo/images/car/' + slotProps.item + '.png'" /&gt;
         &lt;div&gt;{{slotProps.item}}&lt;/div&gt;
 	&lt;/template&gt;
 &lt;/AutoComplete&gt;
 </template>
 </code></pre>
 
-            <h5>Properties</h5>
-            <p>Any property of HTMLDivElement are passed to the main container element. Following are the additional properties to configure the component.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>modelValue</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Value of the component.</td>
-                        </tr>
-                        <tr>
-                            <td>suggestions</td>
-                            <td>array</td>
-                            <td>null</td>
-                            <td>An array of suggestions to display.</td>
-                        </tr>
-                        <tr>
-                            <td>field</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Property name or getter function of a suggested object to resolve and display. <small>*Deprecated since v3.16.0. Use 'optionLabel' property instead.</small></td>
-                        </tr>
-                        <tr>
-                            <td>optionLabel</td>
-                            <td>string | function</td>
-                            <td>null</td>
-                            <td>Property name or getter function to use as the label of an option.</td>
-                        </tr>
-                        <tr>
-                            <td>optionDisabled</td>
-                            <td>string | function</td>
-                            <td>null</td>
-                            <td>Property name or getter function to use as the disabled flag of an option, defaults to false when not defined.</td>
-                        </tr>
-                        <tr>
-                            <td>optionGroupLabel</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Property name or getter function to use as the label of an option group.</td>
-                        </tr>
-                        <tr>
-                            <td>optionGroupChildren</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Property name or getter function that refers to the children options of option group.</td>
-                        </tr>
-                        <tr>
-                            <td>scrollHeight</td>
-                            <td>string</td>
-                            <td>200px</td>
-                            <td>Maximum height of the suggestions panel.</td>
-                        </tr>
-                        <tr>
-                            <td>dropdown</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Displays a button next to the input field when enabled.</td>
-                        </tr>
-                        <tr>
-                            <td>dropdownMode</td>
-                            <td>string</td>
-                            <td>blank</td>
-                            <td>Specifies the behavior dropdown button. Default "blank" mode sends an empty string and "current" mode sends the input value.</td>
-                        </tr>
-                        <tr>
-                            <td>autoHighlight</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Highlights automatically the first item of the dropdown to be selected. <small>*Deprecated since v3.16.0.</small></td>
-                        </tr>
-                        <tr>
-                            <td>multiple</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Specifies if multiple values can be selected.</td>
-                        </tr>
-                        <tr>
-                            <td>placeholder</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Default text to display when no option is selected.</td>
-                        </tr>
-                        <tr>
-                            <td>disabled</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When present, it specifies that the component should be disabled.</td>
-                        </tr>
-                        <tr>
-                            <td>dataKey</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>A property to uniquely identify an option.</td>
-                        </tr>
-                        <tr>
-                            <td>minLength</td>
-                            <td>number</td>
-                            <td>1</td>
-                            <td>Minimum number of characters to initiate a search.</td>
-                        </tr>
-                        <tr>
-                            <td>delay</td>
-                            <td>number</td>
-                            <td>300</td>
-                            <td>Delay between keystrokes to wait before sending a query.</td>
-                        </tr>
-                        <tr>
-                            <td>appendTo</td>
-                            <td>string</td>
-                            <td>body</td>
-                            <td>A valid query selector or an HTMLElement to specify where the overlay gets attached. Special keywords are "body" for document body and "self" for the element itself.</td>
-                        </tr>
-                        <tr>
-                            <td>forceSelection</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When present, autocomplete clears the manual input if it does not match of the suggestions to force only accepting values from the suggestions.</td>
-                        </tr>
-                        <tr>
-                            <td>completeOnFocus</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Whether to run a query when input receives focus.</td>
-                        </tr>
-                        <tr>
-                            <td>inputId</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Identifier of the underlying input element.</td>
-                        </tr>
-                        <tr>
-                            <td>inputStyle</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Inline style of the input field.</td>
-                        </tr>
-                        <tr>
-                            <td>inputClass</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the input field.</td>
-                        </tr>
-                        <tr>
-                            <td>inputProps</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Uses to pass all properties of the HTMLInputElement/HTMLSpanElement to the focusable input element inside the component.</td>
-                        </tr>
-                        <tr>
-                            <td>panelStyle</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Inline style of the overlay panel.</td>
-                        </tr>
-                        <tr>
-                            <td>panelClass</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the overlay panel.</td>
-                        </tr>
-                        <tr>
-                            <td>panelProps</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Uses to pass all properties of the HTMLDivElement to the overlay panel.</td>
-                        </tr>
-                        <tr>
-                            <td>loadingIcon</td>
-                            <td>string</td>
-                            <td>pi pi-spinner</td>
-                            <td>Icon class used when loading</td>
-                        </tr>
-                        <tr>
-                            <td>virtualScrollerOptions</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Whether to use the virtualScroller feature. The properties of <nuxt-link to="/virtualscroller">VirtualScroller</nuxt-link> component can be used like an object in it.</td>
-                        </tr>
-                        <tr>
-                            <td>autoOptionFocus</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether to focus on the first visible or selected element when the overlay panel is shown.</td>
-                        </tr>
-                        <tr>
-                            <td>selectOnFocus</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When enabled, the focused option is selected.</td>
-                        </tr>
-                        <tr>
-                            <td>searchLocale</td>
-                            <td>string</td>
-                            <td>undefined</td>
-                            <td>Locale to use in searching. The default locale is the host environment's current locale.</td>
-                        </tr>
-                        <tr>
-                            <td>searchMessage</td>
-                            <td>string</td>
-                            <td>{0} results are available</td>
-                            <td>Text to be displayed in hidden accessible field when filtering returns any results. Defaults to value from PrimeVue locale configuration.</td>
-                        </tr>
-                        <tr>
-                            <td>selectionMessage</td>
-                            <td>string</td>
-                            <td>{0} items selected</td>
-                            <td>Text to be displayed in hidden accessible field when options are selected. Defaults to value from PrimeVue locale configuration.</td>
-                        </tr>
-                        <tr>
-                            <td>emptySelectionMessage</td>
-                            <td>string</td>
-                            <td>No selected item</td>
-                            <td>Text to be displayed in hidden accessible field when any option is not selected. Defaults to value from PrimeVue locale configuration.</td>
-                        </tr>
-                        <tr>
-                            <td>emptySearchMessage</td>
-                            <td>string</td>
-                            <td>No results found</td>
-                            <td>Text to be displayed when filtering does not return any results. Defaults to value from PrimeVue locale configuration.</td>
-                        </tr>
-                        <tr>
-                            <td>tabindex</td>
-                            <td>number</td>
-                            <td>0</td>
-                            <td>Index of the element in tabbing order.</td>
-                        </tr>
-                        <tr>
-                            <td>aria-label</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Defines a string value that labels an interactive element.</td>
-                        </tr>
-                        <tr>
-                            <td>aria-labelledby</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <p>Any property of HTMLDivElement are passed to the main container element. Following are the additional properties to configure the component.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>modelValue</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Value of the component.</td>
+                    </tr>
+                    <tr>
+                        <td>suggestions</td>
+                        <td>array</td>
+                        <td>null</td>
+                        <td>An array of suggestions to display.</td>
+                    </tr>
+                    <tr>
+                        <td>field</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Property name or getter function of a suggested object to resolve and display. <small>*Deprecated since v3.16.0. Use 'optionLabel' property instead.</small></td>
+                    </tr>
+                    <tr>
+                        <td>optionLabel</td>
+                        <td>string | function</td>
+                        <td>null</td>
+                        <td>Property name or getter function to use as the label of an option.</td>
+                    </tr>
+                    <tr>
+                        <td>optionDisabled</td>
+                        <td>string | function</td>
+                        <td>null</td>
+                        <td>Property name or getter function to use as the disabled flag of an option, defaults to false when not defined.</td>
+                    </tr>
+                    <tr>
+                        <td>optionGroupLabel</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Property name or getter function to use as the label of an option group.</td>
+                    </tr>
+                    <tr>
+                        <td>optionGroupChildren</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Property name or getter function that refers to the children options of option group.</td>
+                    </tr>
+                    <tr>
+                        <td>scrollHeight</td>
+                        <td>string</td>
+                        <td>200px</td>
+                        <td>Maximum height of the suggestions panel.</td>
+                    </tr>
+                    <tr>
+                        <td>dropdown</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Displays a button next to the input field when enabled.</td>
+                    </tr>
+                    <tr>
+                        <td>dropdownMode</td>
+                        <td>string</td>
+                        <td>blank</td>
+                        <td>Specifies the behavior dropdown button. Default "blank" mode sends an empty string and "current" mode sends the input value.</td>
+                    </tr>
+                    <tr>
+                        <td>autoHighlight</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Highlights automatically the first item of the dropdown to be selected. <small>*Deprecated since v3.16.0.</small></td>
+                    </tr>
+                    <tr>
+                        <td>multiple</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Specifies if multiple values can be selected.</td>
+                    </tr>
+                    <tr>
+                        <td>placeholder</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Default text to display when no option is selected.</td>
+                    </tr>
+                    <tr>
+                        <td>disabled</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When present, it specifies that the component should be disabled.</td>
+                    </tr>
+                    <tr>
+                        <td>dataKey</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>A property to uniquely identify an option.</td>
+                    </tr>
+                    <tr>
+                        <td>minLength</td>
+                        <td>number</td>
+                        <td>1</td>
+                        <td>Minimum number of characters to initiate a search.</td>
+                    </tr>
+                    <tr>
+                        <td>delay</td>
+                        <td>number</td>
+                        <td>300</td>
+                        <td>Delay between keystrokes to wait before sending a query.</td>
+                    </tr>
+                    <tr>
+                        <td>appendTo</td>
+                        <td>string</td>
+                        <td>body</td>
+                        <td>A valid query selector or an HTMLElement to specify where the overlay gets attached. Special keywords are "body" for document body and "self" for the element itself.</td>
+                    </tr>
+                    <tr>
+                        <td>forceSelection</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When present, autocomplete clears the manual input if it does not match of the suggestions to force only accepting values from the suggestions.</td>
+                    </tr>
+                    <tr>
+                        <td>completeOnFocus</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Whether to run a query when input receives focus.</td>
+                    </tr>
+                    <tr>
+                        <td>inputId</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Identifier of the underlying input element.</td>
+                    </tr>
+                    <tr>
+                        <td>inputStyle</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Inline style of the input field.</td>
+                    </tr>
+                    <tr>
+                        <td>inputClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the input field.</td>
+                    </tr>
+                    <tr>
+                        <td>inputProps</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Uses to pass all properties of the HTMLInputElement/HTMLSpanElement to the focusable input element inside the component.</td>
+                    </tr>
+                    <tr>
+                        <td>panelStyle</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Inline style of the overlay panel.</td>
+                    </tr>
+                    <tr>
+                        <td>panelClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the overlay panel.</td>
+                    </tr>
+                    <tr>
+                        <td>panelProps</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Uses to pass all properties of the HTMLDivElement to the overlay panel.</td>
+                    </tr>
+                    <tr>
+                        <td>dropdownIcon</td>
+                        <td>string</td>
+                        <td>pi pi-chevron-down</td>
+                        <td>Icon to display in dropdown</td>
+                    </tr>
+                    <tr>
+                        <td>dropdownClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the dropdown button.</td>
+                    </tr>
+                    <tr>
+                        <td>loadingIcon</td>
+                        <td>string</td>
+                        <td>pi pi-spinner</td>
+                        <td>Icon class used when loading</td>
+                    </tr>
+                    <tr>
+                        <td>removeTokenIcon</td>
+                        <td>string</td>
+                        <td>pi pi-times-circle</td>
+                        <td>Icon to display in chip remove action</td>
+                    </tr>
+                    <tr>
+                        <td>virtualScrollerOptions</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Whether to use the virtualScroller feature. The properties of <router-link to="/virtualscroller">VirtualScroller</router-link> component can be used like an object in it.</td>
+                    </tr>
+                    <tr>
+                        <td>autoOptionFocus</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Whether to focus on the first visible or selected element when the overlay panel is shown.</td>
+                    </tr>
+                    <tr>
+                        <td>selectOnFocus</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When enabled, the focused option is selected.</td>
+                    </tr>
+                    <tr>
+                        <td>searchLocale</td>
+                        <td>string</td>
+                        <td>undefined</td>
+                        <td>Locale to use in searching. The default locale is the host environment's current locale.</td>
+                    </tr>
+                    <tr>
+                        <td>searchMessage</td>
+                        <td>string</td>
+                        <td>{0} results are available</td>
+                        <td>Text to be displayed in hidden accessible field when filtering returns any results. Defaults to value from PrimeVue locale configuration.</td>
+                    </tr>
+                    <tr>
+                        <td>selectionMessage</td>
+                        <td>string</td>
+                        <td>{0} items selected</td>
+                        <td>Text to be displayed in hidden accessible field when options are selected. Defaults to value from PrimeVue locale configuration.</td>
+                    </tr>
+                    <tr>
+                        <td>emptySelectionMessage</td>
+                        <td>string</td>
+                        <td>No selected item</td>
+                        <td>Text to be displayed in hidden accessible field when any option is not selected. Defaults to value from PrimeVue locale configuration.</td>
+                    </tr>
+                    <tr>
+                        <td>emptySearchMessage</td>
+                        <td>string</td>
+                        <td>No results found</td>
+                        <td>Text to be displayed when filtering does not return any results. Defaults to value from PrimeVue locale configuration.</td>
+                    </tr>
+                    <tr>
+                        <td>tabindex</td>
+                        <td>number</td>
+                        <td>0</td>
+                        <td>Index of the element in tabbing order.</td>
+                    </tr>
+                    <tr>
+                        <td>aria-label</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Defines a string value that labels an interactive element.</td>
+                    </tr>
+                    <tr>
+                        <td>aria-labelledby</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Events</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>change</td>
-                            <td>
-                                event.originalEvent: Original event <br />
-                                event.value: Selected option value
-                            </td>
-                            <td>Callback to invoke on value change.</td>
-                        </tr>
-                        <tr>
-                            <td>focus</td>
-                            <td>event</td>
-                            <td>Callback to invoke when the component receives focus.</td>
-                        </tr>
-                        <tr>
-                            <td>blur</td>
-                            <td>event</td>
-                            <td>Callback to invoke when the component loses focus.</td>
-                        </tr>
-                        <tr>
-                            <td>item-select</td>
-                            <td>
-                                event.originalEvent: Browser event <br />
-                                event.value: Selected item
-                            </td>
-                            <td>Callback to invoke when a suggestion is selected.</td>
-                        </tr>
-                        <tr>
-                            <td>item-unselect</td>
-                            <td>
-                                event.originalEvent: Browser event <br />
-                                event.value: Unselected item
-                            </td>
-                            <td>Callback to invoke when a selected value is removed.</td>
-                        </tr>
-                        <tr>
-                            <td>dropdown-click</td>
-                            <td>
-                                event.originalEvent: browser event <br />
-                                event.query: Current value of the input field
-                            </td>
-                            <td>Callback to invoke to when dropdown button is clicked.</td>
-                        </tr>
-                        <tr>
-                            <td>clear</td>
-                            <td>-</td>
-                            <td>Callback to invoke when input is cleared by the user.</td>
-                        </tr>
-                        <tr>
-                            <td>complete</td>
-                            <td>
-                                event.originalEvent: Browser event <br />
-                                event.query: Value to search with
-                            </td>
-                            <td>Callback to invoke to search for suggestions.</td>
-                        </tr>
-                        <tr>
-                            <td>before-show</td>
-                            <td>-</td>
-                            <td>Callback to invoke before the overlay is shown.</td>
-                        </tr>
-                        <tr>
-                            <td>before-hide</td>
-                            <td>-</td>
-                            <td>Callback to invoke before the overlay is hidden.</td>
-                        </tr>
-                        <tr>
-                            <td>show</td>
-                            <td>-</td>
-                            <td>Callback to invoke when the overlay is shown.</td>
-                        </tr>
-                        <tr>
-                            <td>hide</td>
-                            <td>-</td>
-                            <td>Callback to invoke when the overlay is hidden.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Events</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>change</td>
+                        <td>
+                            event.originalEvent: Original event <br />
+                            event.value: Selected option value
+                        </td>
+                        <td>Callback to invoke on value change.</td>
+                    </tr>
+                    <tr>
+                        <td>focus</td>
+                        <td>event</td>
+                        <td>Callback to invoke when the component receives focus.</td>
+                    </tr>
+                    <tr>
+                        <td>blur</td>
+                        <td>event</td>
+                        <td>Callback to invoke when the component loses focus.</td>
+                    </tr>
+                    <tr>
+                        <td>item-select</td>
+                        <td>
+                            event.originalEvent: Browser event <br />
+                            event.value: Selected item
+                        </td>
+                        <td>Callback to invoke when a suggestion is selected.</td>
+                    </tr>
+                    <tr>
+                        <td>item-unselect</td>
+                        <td>
+                            event.originalEvent: Browser event <br />
+                            event.value: Unselected item
+                        </td>
+                        <td>Callback to invoke when a selected value is removed.</td>
+                    </tr>
+                    <tr>
+                        <td>dropdown-click</td>
+                        <td>
+                            event.originalEvent: browser event <br />
+                            event.query: Current value of the input field
+                        </td>
+                        <td>Callback to invoke to when dropdown button is clicked.</td>
+                    </tr>
+                    <tr>
+                        <td>clear</td>
+                        <td>-</td>
+                        <td>Callback to invoke when input is cleared by the user.</td>
+                    </tr>
+                    <tr>
+                        <td>complete</td>
+                        <td>
+                            event.originalEvent: Browser event <br />
+                            event.query: Value to search with
+                        </td>
+                        <td>Callback to invoke to search for suggestions.</td>
+                    </tr>
+                    <tr>
+                        <td>before-show</td>
+                        <td>-</td>
+                        <td>Callback to invoke before the overlay is shown.</td>
+                    </tr>
+                    <tr>
+                        <td>before-hide</td>
+                        <td>-</td>
+                        <td>Callback to invoke before the overlay is hidden.</td>
+                    </tr>
+                    <tr>
+                        <td>show</td>
+                        <td>-</td>
+                        <td>Callback to invoke when the overlay is shown.</td>
+                    </tr>
+                    <tr>
+                        <td>hide</td>
+                        <td>-</td>
+                        <td>Callback to invoke when the overlay is hidden.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Slots</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>chip</td>
-                            <td>value: A value in the selection</td>
-                        </tr>
-                        <tr>
-                            <td>header</td>
-                            <td>
-                                value: Value of the component <br />
-                                suggestions: Displayed options
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>footer</td>
-                            <td>
-                                value: Value of the component <br />
-                                suggestions: Displayed options
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>item <small>*Deprecated since v3.16.0</small></td>
-                            <td>
-                                item: Option instance <br />
-                                index: Index of the option
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>option</td>
-                            <td>
-                                option: Option instance <br />
-                                index: Index of the option
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>optiongroup</td>
-                            <td>
-                                item: OptionGroup instance <small>*Deprecated since v3.16.0</small><br />
-                                option: OptionGroup instance <br />
-                                index: Index of the option group
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>content</td>
-                            <td>
-                                items: An array of objects to display for virtualscroller<br />
-                                styleClass: Style class of the component<br />
-                                contentRef: Referance of the content<br />
-                                getItemOptions: Options of the items
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>loader</td>
-                            <td>options: Options of the loader items for virtualscroller</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Slots</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>chip</td>
+                        <td>value: A value in the selection</td>
+                    </tr>
+                    <tr>
+                        <td>header</td>
+                        <td>
+                            value: Value of the component <br />
+                            suggestions: Displayed options
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>footer</td>
+                        <td>
+                            value: Value of the component <br />
+                            suggestions: Displayed options
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>item <small>*Deprecated since v3.16.0</small></td>
+                        <td>
+                            item: Option instance <br />
+                            index: Index of the option
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>option</td>
+                        <td>
+                            option: Option instance <br />
+                            index: Index of the option
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>optiongroup</td>
+                        <td>
+                            item: OptionGroup instance <small>*Deprecated since v3.16.0</small><br />
+                            option: OptionGroup instance <br />
+                            index: Index of the option group
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>content</td>
+                        <td>
+                            items: An array of objects to display for virtualscroller<br />
+                            styleClass: Style class of the component<br />
+                            contentRef: Referance of the content<br />
+                            getItemOptions: Options of the items
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>loader</td>
+                        <td>options: Options of the loader items for virtualscroller</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-autocomplete</td>
-                            <td>Container element</td>
-                        </tr>
-                        <tr>
-                            <td>p-autocomplete-panel</td>
-                            <td>Overlay panel of suggestions.</td>
-                        </tr>
-                        <tr>
-                            <td>p-autocomplete-items</td>
-                            <td>List container of suggestions.</td>
-                        </tr>
-                        <tr>
-                            <td>p-autocomplete-item</td>
-                            <td>List item of a suggestion.</td>
-                        </tr>
-                        <tr>
-                            <td>p-autocomplete-token</td>
-                            <td>Element of a selected item in multiple mode.</td>
-                        </tr>
-                        <tr>
-                            <td>p-autocomplete-token-icon</td>
-                            <td>Close icon element of a selected item in multiple mode.</td>
-                        </tr>
-                        <tr>
-                            <td>p-autocomplete-token-label</td>
-                            <td>Label of a selected item in multiple mode.</td>
-                        </tr>
-                        <tr>
-                            <td>p-overlay-open</td>
-                            <td>Container element when overlay is visible.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-autocomplete</td>
+                        <td>Container element</td>
+                    </tr>
+                    <tr>
+                        <td>p-autocomplete-panel</td>
+                        <td>Overlay panel of suggestions.</td>
+                    </tr>
+                    <tr>
+                        <td>p-autocomplete-items</td>
+                        <td>List container of suggestions.</td>
+                    </tr>
+                    <tr>
+                        <td>p-autocomplete-item</td>
+                        <td>List item of a suggestion.</td>
+                    </tr>
+                    <tr>
+                        <td>p-autocomplete-token</td>
+                        <td>Element of a selected item in multiple mode.</td>
+                    </tr>
+                    <tr>
+                        <td>p-autocomplete-token-icon</td>
+                        <td>Close icon element of a selected item in multiple mode.</td>
+                    </tr>
+                    <tr>
+                        <td>p-autocomplete-token-label</td>
+                        <td>Label of a selected item in multiple mode.</td>
+                    </tr>
+                    <tr>
+                        <td>p-overlay-open</td>
+                        <td>Container element when overlay is visible.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Accessibility</h5>
-            <h6>Screen Reader</h6>
-            <p>
-                Value to describe the component can either be provided via <i>label</i> tag combined with <i>inputId</i> prop or using <i>aria-labelledby</i>, <i>aria-label</i> props. The input element has <i>combobox</i> role in addition to
-                <i>aria-autocomplete</i>, <i>aria-haspopup</i> and <i>aria-expanded</i> attributes. The relation between the input and the popup is created with <i>aria-controls</i> and <i>aria-activedescendant</i> attribute is used to instruct
-                screen reader which option to read during keyboard navigation within the popup list.
-            </p>
-            <p>In multiple mode, chip list uses <i>listbox</i> role with <i>aria-orientation</i> set to horizontal whereas each chip has the <i>option</i> role with <i>aria-label</i> set to the label of the chip.</p>
-            <p>
-                The popup list has an id that refers to the <i>aria-controls</i> attribute of the input element and uses <i>listbox</i> as the role. Each list item has <i>option</i> role and an id to match the <i>aria-activedescendant</i> of the
-                input element.
-            </p>
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>
+            Value to describe the component can either be provided via <i>label</i> tag combined with <i>inputId</i> prop or using <i>aria-labelledby</i>, <i>aria-label</i> props. The input element has <i>combobox</i> role in addition to
+            <i>aria-autocomplete</i>, <i>aria-haspopup</i> and <i>aria-expanded</i> attributes. The relation between the input and the popup is created with <i>aria-controls</i> and <i>aria-activedescendant</i> attribute is used to instruct screen
+            reader which option to read during keyboard navigation within the popup list.
+        </p>
+        <p>In multiple mode, chip list uses <i>listbox</i> role with <i>aria-orientation</i> set to horizontal whereas each chip has the <i>option</i> role with <i>aria-label</i> set to the label of the chip.</p>
+        <p>
+            The popup list has an id that refers to the <i>aria-controls</i> attribute of the input element and uses <i>listbox</i> as the role. Each list item has <i>option</i> role and an id to match the <i>aria-activedescendant</i> of the input
+            element.
+        </p>
 
-            <pre v-code><code>
+        <pre v-code><code>
 &lt;label for="ac1"&gt;Username&lt;/label&gt;
 &lt;AutoComplete inputId="ac1" /&gt;
 
@@ -620,150 +637,149 @@ export default {
 
 </code></pre>
 
-            <h6>Closed State Keyboard Support</h6>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Key</th>
-                            <th>Function</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td><i>tab</i></td>
-                            <td>Moves focus to the autocomplete element.</td>
-                        </tr>
-                        <tr>
-                            <td><i>any printable character</i></td>
-                            <td>Opens the popup and moves focus to the first option.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h6>Closed State Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>tab</i></td>
+                        <td>Moves focus to the autocomplete element.</td>
+                    </tr>
+                    <tr>
+                        <td><i>any printable character</i></td>
+                        <td>Opens the popup and moves focus to the first option.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h6>Popup Keyboard Support</h6>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Key</th>
-                            <th>Function</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td><i>tab</i></td>
-                            <td>Moves focus to the next focusable element in the popup. If there is none, the focusable option is selected and the overlay is closed then moves focus to next element in page.</td>
-                        </tr>
-                        <tr>
-                            <td><i>shift</i> + <i>tab</i></td>
-                            <td>Moves focus to the previous focusable element in the popup. If there is none, the focusable option is selected and the overlay is closed then moves focus to next element in page.</td>
-                        </tr>
-                        <tr>
-                            <td><i>enter</i></td>
-                            <td>Selects the focused option and closes the popup, then moves focus to the autocomplete element.</td>
-                        </tr>
-                        <tr>
-                            <td><i>space</i></td>
-                            <td>Selects the focused option and closes the popup, then moves focus to the autocomplete element.</td>
-                        </tr>
-                        <tr>
-                            <td><i>escape</i></td>
-                            <td>Closes the popup, then moves focus to the autocomplete element.</td>
-                        </tr>
-                        <tr>
-                            <td><i>down arrow</i></td>
-                            <td>Moves focus to the next option, if there is none then visual focus does not change.</td>
-                        </tr>
-                        <tr>
-                            <td><i>up arrow</i></td>
-                            <td>Moves focus to the previous option, if there is none then visual focus does not change.</td>
-                        </tr>
-                        <tr>
-                            <td><i>alt</i> + <i>up arrow</i></td>
-                            <td>Selects the focused option and closes the popup, then moves focus to the autocomplete element.</td>
-                        </tr>
-                        <tr>
-                            <td><i>left arrow</i></td>
-                            <td>Removes the visual focus from the current option and moves input cursor to one character left.</td>
-                        </tr>
-                        <tr>
-                            <td><i>right arrow</i></td>
-                            <td>Removes the visual focus from the current option and moves input cursor to one character right.</td>
-                        </tr>
-                        <tr>
-                            <td><i>home</i></td>
-                            <td>Moves input cursor at the end, if not then moves focus to the first option.</td>
-                        </tr>
-                        <tr>
-                            <td><i>end</i></td>
-                            <td>Moves input cursor at the beginning, if not then moves focus to the last option.</td>
-                        </tr>
-                        <tr>
-                            <td><i>pageUp</i></td>
-                            <td>Jumps visual focus to first option.</td>
-                        </tr>
-                        <tr>
-                            <td><i>pageDown</i></td>
-                            <td>Jumps visual focus to last option.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h6>Popup Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>tab</i></td>
+                        <td>Moves focus to the next focusable element in the popup. If there is none, the focusable option is selected and the overlay is closed then moves focus to next element in page.</td>
+                    </tr>
+                    <tr>
+                        <td><i>shift</i> + <i>tab</i></td>
+                        <td>Moves focus to the previous focusable element in the popup. If there is none, the focusable option is selected and the overlay is closed then moves focus to next element in page.</td>
+                    </tr>
+                    <tr>
+                        <td><i>enter</i></td>
+                        <td>Selects the focused option and closes the popup, then moves focus to the autocomplete element.</td>
+                    </tr>
+                    <tr>
+                        <td><i>space</i></td>
+                        <td>Selects the focused option and closes the popup, then moves focus to the autocomplete element.</td>
+                    </tr>
+                    <tr>
+                        <td><i>escape</i></td>
+                        <td>Closes the popup, then moves focus to the autocomplete element.</td>
+                    </tr>
+                    <tr>
+                        <td><i>down arrow</i></td>
+                        <td>Moves focus to the next option, if there is none then visual focus does not change.</td>
+                    </tr>
+                    <tr>
+                        <td><i>up arrow</i></td>
+                        <td>Moves focus to the previous option, if there is none then visual focus does not change.</td>
+                    </tr>
+                    <tr>
+                        <td><i>alt</i> + <i>up arrow</i></td>
+                        <td>Selects the focused option and closes the popup, then moves focus to the autocomplete element.</td>
+                    </tr>
+                    <tr>
+                        <td><i>left arrow</i></td>
+                        <td>Removes the visual focus from the current option and moves input cursor to one character left.</td>
+                    </tr>
+                    <tr>
+                        <td><i>right arrow</i></td>
+                        <td>Removes the visual focus from the current option and moves input cursor to one character right.</td>
+                    </tr>
+                    <tr>
+                        <td><i>home</i></td>
+                        <td>Moves input cursor at the end, if not then moves focus to the first option.</td>
+                    </tr>
+                    <tr>
+                        <td><i>end</i></td>
+                        <td>Moves input cursor at the beginning, if not then moves focus to the last option.</td>
+                    </tr>
+                    <tr>
+                        <td><i>pageUp</i></td>
+                        <td>Jumps visual focus to first option.</td>
+                    </tr>
+                    <tr>
+                        <td><i>pageDown</i></td>
+                        <td>Jumps visual focus to last option.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h6>Chips Input Keyboard Support</h6>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Key</th>
-                            <th>Function</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td><i>backspace</i></td>
-                            <td>Deletes the previous chip if the input field is empty.</td>
-                        </tr>
-                        <tr>
-                            <td><i>left arrow</i></td>
-                            <td>Moves focus to the previous chip if available and input field is empty.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h6>Chips Input Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>backspace</i></td>
+                        <td>Deletes the previous chip if the input field is empty.</td>
+                    </tr>
+                    <tr>
+                        <td><i>left arrow</i></td>
+                        <td>Moves focus to the previous chip if available and input field is empty.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h6>Chip Keyboard Support</h6>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Key</th>
-                            <th>Function</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td><i>left arrow</i></td>
-                            <td>Moves focus to the previous chip if available.</td>
-                        </tr>
-                        <tr>
-                            <td><i>right arrow</i></td>
-                            <td>Moves focus to the next chip, if there is none then input field receives the focus.</td>
-                        </tr>
-                        <tr>
-                            <td><i>backspace</i></td>
-                            <td>Deletes the chips and adds focus to the input field.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h6>Chip Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>left arrow</i></td>
+                        <td>Moves focus to the previous chip if available.</td>
+                    </tr>
+                    <tr>
+                        <td><i>right arrow</i></td>
+                        <td>Moves focus to the next chip, if there is none then input field receives the focus.</td>
+                    </tr>
+                    <tr>
+                        <td><i>backspace</i></td>
+                        <td>Deletes the chips and adds focus to the input field.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc>
-    </ClientOnly>
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
diff --git a/pages/autocomplete/index.vue b/pages/autocomplete/index.vue
index 86b2a239e..1e200f11e 100755
--- a/pages/autocomplete/index.vue
+++ b/pages/autocomplete/index.vue
@@ -38,7 +38,7 @@
 
                 <h5>Multiple</h5>
                 <span class="p-fluid">
-                    <AutoComplete :multiple="true" v-model="selectedCountries" :suggestions="filteredCountries" @complete="searchCountry($event)" optionLabel="name" />
+                    <AutoComplete v-model="selectedCountries" :multiple="true" :suggestions="filteredCountries" @complete="searchCountry($event)" optionLabel="name" />
                 </span>
             </div>
         </div>
@@ -48,9 +48,9 @@
 </template>
 
 <script>
+import { FilterMatchMode, FilterService } from 'primevue/api';
 import CountryService from '../../service/CountryService';
 import AutoCompleteDoc from './AutoCompleteDoc';
-import { FilterService, FilterMatchMode } from 'primevue/api';
 
 export default {
     data() {
@@ -124,6 +124,7 @@ export default {
 
             for (let country of this.groupedCities) {
                 let filteredItems = FilterService.filter(country.items, ['label'], query, FilterMatchMode.CONTAINS);
+
                 if (filteredItems && filteredItems.length) {
                     filteredCities.push({ ...country, ...{ items: filteredItems } });
                 }
@@ -138,6 +139,7 @@ export default {
 
             for (let i = 0; i < this.items.length; i++) {
                 let item = this.items[i];
+
                 if (item.label.toLowerCase().indexOf(query.toLowerCase()) === 0) {
                     filteredItems.push(item);
                 }
diff --git a/pages/avatar/AvatarDoc.vue b/pages/avatar/AvatarDoc.vue
index dfd411b9e..4f40c9f0c 100644
--- a/pages/avatar/AvatarDoc.vue
+++ b/pages/avatar/AvatarDoc.vue
@@ -1,40 +1,39 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="AvatarDemo" :sources="sources" github="avatar/AvatarDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="AvatarDemo" :sources="sources" github="avatar/AvatarDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import Avatar from 'primevue/avatar';
 import AvatarGroup from 'primevue/avatargroup';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/avatar/avatar.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/avatargroup/avatargroup.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p>Avatar has three built-in display modes; "label", "icon" and "image".</p>
-            <pre v-code><code>
+        <h5>Getting Started</h5>
+        <p>Avatar has three built-in display modes; "label", "icon" and "image".</p>
+        <pre v-code><code>
 &lt;Avatar label="P" /&gt;
 &lt;Avatar icon="pi pi-search" /&gt;
 &lt;Avatar image="user.png" /&gt;
 
 </code></pre>
 
-            <h5>Sizes</h5>
-            <p><i>size</i> property defines the size of the Avatar with "large" and "xlarge" as possible values.</p>
-            <pre v-code><code>
+        <h5>Sizes</h5>
+        <p><i>size</i> property defines the size of the Avatar with "large" and "xlarge" as possible values.</p>
+        <pre v-code><code>
 &lt;Avatar label="P" size="large"/&gt;
 
 </code></pre>
 
-            <h5>AvatarGroup</h5>
-            <p>A set of Avatars can be displayed together using the <i>AvatarGroup</i> component.</p>
-            <pre v-code><code>
+        <h5>AvatarGroup</h5>
+        <p>A set of Avatars can be displayed together using the <i>AvatarGroup</i> component.</p>
+        <pre v-code><code>
 &lt;AvatarGroup&gt;
 	&lt;Avatar label="P" /&gt;
 	&lt;Avatar icon="pi pi-search" /&gt;
@@ -44,164 +43,185 @@ import AvatarGroup from 'primevue/avatargroup';
 
 </code></pre>
 
-            <h5>Shape</h5>
-            <p>Avatar comes in two different styles specified with the <i>shape</i> property, "square" is the default and "circle" is the alternative.</p>
-            <pre v-code><code>
+        <h5>Shape</h5>
+        <p>Avatar comes in two different styles specified with the <i>shape</i> property, "square" is the default and "circle" is the alternative.</p>
+        <pre v-code><code>
 &lt;Avatar label="P" shape="circle"/&gt;
 
 </code></pre>
 
-            <h5>Badge</h5>
-            <p>A badge can be added to an Avatar with the <nuxt-link to="/badge">Badge</nuxt-link> directive.</p>
-            <pre v-code><code>
+        <h5>Badge</h5>
+        <p>A badge can be added to an Avatar with the <router-link to="/badge">Badge</router-link> directive.</p>
+        <pre v-code><code>
 &lt;Avatar image="user.png" size="xlarge" v-badge.danger="4" /&gt;
 
 </code></pre>
 
-            <h5>Templating</h5>
-            <p>Content can easily be customized with the default slot instead of using the built-in modes.</p>
-            <pre v-code><code>
+        <h5>Templating</h5>
+        <p>Content can easily be customized with the default slot instead of using the built-in modes.</p>
+        <pre v-code><code>
 &lt;Avatar&gt;
     Content
 &lt;/Avatar&gt;
 
 </code></pre>
 
-            <h5>Properties of Avatar</h5>
-            <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>label</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Defines the text to display.</td>
-                        </tr>
-                        <tr>
-                            <td>icon</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Defines the icon to display.</td>
-                        </tr>
-                        <tr>
-                            <td>image</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Defines the image to display.</td>
-                        </tr>
-                        <tr>
-                            <td>size</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Size of the element, valid options are "large" and "xlarge".</td>
-                        </tr>
-                        <tr>
-                            <td>shape</td>
-                            <td>string</td>
-                            <td>square</td>
-                            <td>Shape of the element, valid options are "square" and "circle".</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties of Avatar</h5>
+        <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>label</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Defines the text to display.</td>
+                    </tr>
+                    <tr>
+                        <td>icon</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Defines the icon to display.</td>
+                    </tr>
+                    <tr>
+                        <td>image</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Defines the image to display.</td>
+                    </tr>
+                    <tr>
+                        <td>size</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Size of the element, valid options are "large" and "xlarge".</td>
+                    </tr>
+                    <tr>
+                        <td>shape</td>
+                        <td>string</td>
+                        <td>square</td>
+                        <td>Shape of the element, valid options are "square" and "circle".</td>
+                    </tr>
+                    <tr>
+                        <td>aria-label</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Defines a string value that labels an interactive element.</td>
+                    </tr>
+                    <tr>
+                        <td>aria-labelledby</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Properties of AvatarGroup</h5>
-            <p>Any property as style and class are passed to the main container element. There are no additional properties.</p>
+        <h5>Properties of AvatarGroup</h5>
+        <p>Any property as style and class are passed to the main container element. There are no additional properties.</p>
 
-            <h5>Events</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>error</td>
-                            <td>-</td>
-                            <td>Triggered when an error occurs while loading an image file.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Events</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>error</td>
+                        <td>-</td>
+                        <td>Triggered when an error occurs while loading an image file.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling of Avatar</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-avatar</td>
-                            <td>Container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-avatar-image</td>
-                            <td>Container element in image mode.</td>
-                        </tr>
-                        <tr>
-                            <td>p-avatar-circle</td>
-                            <td>Container element with a circle shape.</td>
-                        </tr>
-                        <tr>
-                            <td>p-avatar-text</td>
-                            <td>Text of the Avatar.</td>
-                        </tr>
-                        <tr>
-                            <td>p-avatar-icon</td>
-                            <td>Icon of the Avatar.</td>
-                        </tr>
-                        <tr>
-                            <td>p-avatar-lg</td>
-                            <td>Container element with a large size.</td>
-                        </tr>
-                        <tr>
-                            <td>p-avatar-xl</td>
-                            <td>Container element with an xlarge size.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling of Avatar</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-avatar</td>
+                        <td>Container element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-avatar-image</td>
+                        <td>Container element in image mode.</td>
+                    </tr>
+                    <tr>
+                        <td>p-avatar-circle</td>
+                        <td>Container element with a circle shape.</td>
+                    </tr>
+                    <tr>
+                        <td>p-avatar-text</td>
+                        <td>Text of the Avatar.</td>
+                    </tr>
+                    <tr>
+                        <td>p-avatar-icon</td>
+                        <td>Icon of the Avatar.</td>
+                    </tr>
+                    <tr>
+                        <td>p-avatar-lg</td>
+                        <td>Container element with a large size.</td>
+                    </tr>
+                    <tr>
+                        <td>p-avatar-xl</td>
+                        <td>Container element with an xlarge size.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling of AvatarGroup</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-avatar-group</td>
-                            <td>Container element.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling of AvatarGroup</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-avatar-group</td>
+                        <td>Container element.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc>
-    </ClientOnly>
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>
+            Avatar does not include any roles and attributes by default. Any attribute is passed to the root element so you may add a role like <i>img</i> along with <i>aria-labelledby</i> or <i>aria-label</i> to describe the component. In case
+            avatars need to be tabbable, <i>tabindex</i> can be added as well to implement custom key handlers.
+        </p>
+
+        <h5>Keyboard Support</h5>
+        <p>Component does not include any interactive elements.</p>
+
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
@@ -498,7 +518,7 @@ export default {
         <script type="module">
         const { createApp } = Vue;
         const BadgeDirective = primevue.badgedirective;
-        
+
         const App = {
             components: {
                 "p-avatar": primevue.avatar,
diff --git a/pages/avatar/index.vue b/pages/avatar/index.vue
index 52c896302..6e7e6a6e9 100644
--- a/pages/avatar/index.vue
+++ b/pages/avatar/index.vue
@@ -31,7 +31,7 @@
                 <div class="col-12 md:col-4">
                     <div class="card">
                         <h5>Label - Badge</h5>
-                        <Avatar label="U" size="xlarge" style="background-color: #4caf4f; color: #ffffff" v-badge="4" />
+                        <Avatar v-badge="4" label="U" size="xlarge" style="background-color: #4caf4f; color: #ffffff" />
                     </div>
                 </div>
             </div>
@@ -58,7 +58,7 @@
                 <div class="col-12 md:col-4">
                     <div class="card">
                         <h5>Icon - Badge</h5>
-                        <Avatar icon="pi pi-user" size="xlarge" v-badge="4" />
+                        <Avatar v-badge="4" icon="pi pi-user" size="xlarge" />
                     </div>
                 </div>
             </div>
@@ -67,9 +67,9 @@
                 <div class="col-12 md:col-4">
                     <div class="card">
                         <h5>Image</h5>
-                        <Avatar image="/demo/images/avatar/amyelsner.png" class="mr-2" size="xlarge" shape="circle" />
-                        <Avatar image="/demo/images/avatar/asiyajavayant.png" class="mr-2" size="large" shape="circle" />
-                        <Avatar image="/demo/images/avatar/onyamalimba.png" class="mr-2" shape="circle" />
+                        <Avatar image="demo/images/avatar/amyelsner.png" class="mr-2" size="xlarge" shape="circle" />
+                        <Avatar image="demo/images/avatar/asiyajavayant.png" class="mr-2" size="large" shape="circle" />
+                        <Avatar image="demo/images/avatar/onyamalimba.png" class="mr-2" shape="circle" />
                     </div>
                 </div>
 
@@ -77,11 +77,11 @@
                     <div class="card">
                         <h5>Avatar Group</h5>
                         <AvatarGroup class="mb-3">
-                            <Avatar image="/demo/images/avatar/amyelsner.png" size="large" shape="circle" />
-                            <Avatar image="/demo/images/avatar/asiyajavayant.png" size="large" shape="circle" />
-                            <Avatar image="/demo/images/avatar/onyamalimba.png" size="large" shape="circle" />
-                            <Avatar image="/demo/images/avatar/ionibowcher.png" size="large" shape="circle" />
-                            <Avatar image="/demo/images/avatar/xuxuefeng.png" size="large" shape="circle" />
+                            <Avatar image="demo/images/avatar/amyelsner.png" size="large" shape="circle" />
+                            <Avatar image="demo/images/avatar/asiyajavayant.png" size="large" shape="circle" />
+                            <Avatar image="demo/images/avatar/onyamalimba.png" size="large" shape="circle" />
+                            <Avatar image="demo/images/avatar/ionibowcher.png" size="large" shape="circle" />
+                            <Avatar image="demo/images/avatar/xuxuefeng.png" size="large" shape="circle" />
                             <Avatar label="+2" shape="circle" size="large" style="background-color: #9c27b0; color: #ffffff" />
                         </AvatarGroup>
                     </div>
@@ -90,7 +90,7 @@
                 <div class="col-12 md:col-4">
                     <div class="card">
                         <h5>Image - Badge</h5>
-                        <Avatar image="/demo/images/organization/walter.jpg" size="xlarge" v-badge.danger="4" />
+                        <Avatar v-badge.danger="4" image="demo/images/organization/walter.jpg" size="xlarge" />
                     </div>
                 </div>
             </div>
diff --git a/pages/badge/BadgeDoc.vue b/pages/badge/BadgeDoc.vue
index 3b663ed01..7186e96fa 100644
--- a/pages/badge/BadgeDoc.vue
+++ b/pages/badge/BadgeDoc.vue
@@ -1,198 +1,206 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="BadgeDemo" :sources="sources" github="badge/BadgeDemo.vue">
-            <h5>Getting Started</h5>
-            <p>Badge can either be used as a standalone component or as a directive.</p>
+    <AppDoc name="BadgeDemo" :sources="sources" github="badge/BadgeDemo.vue">
+        <h5>Getting Started</h5>
+        <p>Badge can either be used as a standalone component or as a directive.</p>
 
-            <h5>Component</h5>
-            <h6>Import via Module</h6>
-            <pre v-code.script><code>
+        <h5>Component</h5>
+        <h6>Import via Module</h6>
+        <pre v-code.script><code>
 import Badge from 'primevue/badge';
 
 </code></pre>
 
-            <h6>Import via CDN</h6>
-            <pre v-code><code>
+        <h6>Import via CDN</h6>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/badge/badge.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <p>Content of the badge is specified using the <i>value</i> property.</p>
-            <pre v-code><code>
+        <p>Content of the badge is specified using the <i>value</i> property.</p>
+        <pre v-code><code>
 &lt;Badge value="2"&gt;&lt;/Badge&gt;
 
 </code></pre>
 
-            <h5>Directive</h5>
-            <h6>Import via Module</h6>
-            <pre v-code.script><code>
+        <h5>Directive</h5>
+        <h6>Import via Module</h6>
+        <pre v-code.script><code>
 import BadgeDirective from 'primevue/badgedirective';
 
 </code></pre>
 
-            <h6>Import via CDN</h6>
-            <pre v-code><code>
+        <h6>Import via CDN</h6>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/badgedirective/badgedirective.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <p>When used as a directive, badge needs to be configured at the application with a name of your choice.</p>
-            <pre v-code.script><code>
+        <p>When used as a directive, badge needs to be configured at the application with a name of your choice.</p>
+        <pre v-code.script><code>
 import BadgeDirective from 'primevue/badgedirective';
 
 app.directive('badge', BadgeDirective);
 
 </code></pre>
 
-            <p>Next step is attaching it to an element.</p>
-            <pre v-code><code>
+        <p>Next step is attaching it to an element.</p>
+        <pre v-code><code>
 &lt;i class="pi pi-bell" v-badge="2"&gt;&lt;/i&gt;
 
 </code></pre>
 
-            <h5>Severities</h5>
-            <p>Different color options are available as severity levels. When used as a component use the <i>severity</i> property to apply a severity and use a <i>modifier</i> as the severity value in directive mode.</p>
+        <h5>Severities</h5>
+        <p>Different color options are available as severity levels. When used as a component use the <i>severity</i> property to apply a severity and use a <i>modifier</i> as the severity value in directive mode.</p>
 
-            <ul>
-                <li>success</li>
-                <li>info</li>
-                <li>warning</li>
-                <li>danger</li>
-            </ul>
+        <ul>
+            <li>success</li>
+            <li>info</li>
+            <li>warning</li>
+            <li>danger</li>
+        </ul>
 
-            <pre v-code><code>
+        <pre v-code><code>
 &lt;Badge value="2" severity="success"&gt;&lt;/Badge&gt;
 
 &lt;i class="pi pi-bell" v-badge.success="2"&gt;&lt;/i&gt;
 
 </code></pre>
 
-            <h5>Button Badges</h5>
-            <p>Buttons provide integrated badge support with the <i>badge</i> and <i>badgeClass</i> properties.</p>
+        <h5>Button Badges</h5>
+        <p>Buttons provide integrated badge support with the <i>badge</i> and <i>badgeClass</i> properties.</p>
 
-            <pre v-code><code>
+        <pre v-code><code>
 &lt;Button type="button" label="Emails" badge="8" /&gt;
 &lt;Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" /&gt;
 
 </code></pre>
 
-            <h5>Sizes</h5>
-            <p>Badge sizes are adjusted with the <i>size</i> property that accepts "large" and "xlarge" as the possible alternatives to the default size. Currently sizes only apply to component mode.</p>
-            <pre v-code><code>
+        <h5>Sizes</h5>
+        <p>Badge sizes are adjusted with the <i>size</i> property that accepts "large" and "xlarge" as the possible alternatives to the default size. Currently sizes only apply to component mode.</p>
+        <pre v-code><code>
 &lt;Badge value="2"&gt;&lt;/Badge&gt;
 &lt;Badge value="4" size="large" severity="warning"&gt;&lt;/Badge&gt;
 &lt;Badge value="6" size="xlarge" severity="success"&gt;&lt;/Badge&gt;
 
 </code></pre>
 
-            <p>In addition, when placed inside another element, badge sizes can also derive their size from their parent.</p>
-            <pre v-code><code>
+        <p>In addition, when placed inside another element, badge sizes can also derive their size from their parent.</p>
+        <pre v-code><code>
 &lt;h1&gt;Heading 1 &lt;Badge value="New"&gt;&lt;/Badge&gt;&lt;/h1&gt;
 &lt;h2&gt;Heading 2 &lt;Badge value="New"&gt;&lt;/Badge&gt;&lt;/h2&gt;
 
 </code></pre>
 
-            <h5>Templating</h5>
-            <p>Content can easily be customized with the default slot instead of using the built-in display.</p>
-            <pre v-code><code>
+        <h5>Templating</h5>
+        <p>Content can easily be customized with the default slot instead of using the built-in display.</p>
+        <pre v-code><code>
 &lt;Badge&gt;
    Content
 &lt;/Badge&gt;
 
 </code></pre>
 
-            <h5>Properties</h5>
-            <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>value</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Value to display inside the badge.</td>
-                        </tr>
-                        <tr>
-                            <td>severity</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Severity type of the badge.</td>
-                        </tr>
-                        <tr>
-                            <td>size</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Size of the badge, valid options are "large" and "xlarge".</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>value</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Value to display inside the badge.</td>
+                    </tr>
+                    <tr>
+                        <td>severity</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Severity type of the badge.</td>
+                    </tr>
+                    <tr>
+                        <td>size</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Size of the badge, valid options are "large" and "xlarge".</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-badge</td>
-                            <td>Badge element</td>
-                        </tr>
-                        <tr>
-                            <td>p-overlay-badge</td>
-                            <td>Wrapper of a badge and its target.</td>
-                        </tr>
-                        <tr>
-                            <td>p-badge-dot</td>
-                            <td>Badge element with no value.</td>
-                        </tr>
-                        <tr>
-                            <td>p-badge-success</td>
-                            <td>Badge element with success severity.</td>
-                        </tr>
-                        <tr>
-                            <td>p-badge-info</td>
-                            <td>Badge element with info severity.</td>
-                        </tr>
-                        <tr>
-                            <td>p-badge-warning</td>
-                            <td>Badge element with warning severity.</td>
-                        </tr>
-                        <tr>
-                            <td>p-badge-danger</td>
-                            <td>Badge element with danger severity.</td>
-                        </tr>
-                        <tr>
-                            <td>p-badge-lg</td>
-                            <td>Large badge element</td>
-                        </tr>
-                        <tr>
-                            <td>p-badge-xl</td>
-                            <td>Extra large badge element</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-badge</td>
+                        <td>Badge element</td>
+                    </tr>
+                    <tr>
+                        <td>p-overlay-badge</td>
+                        <td>Wrapper of a badge and its target.</td>
+                    </tr>
+                    <tr>
+                        <td>p-badge-dot</td>
+                        <td>Badge element with no value.</td>
+                    </tr>
+                    <tr>
+                        <td>p-badge-success</td>
+                        <td>Badge element with success severity.</td>
+                    </tr>
+                    <tr>
+                        <td>p-badge-info</td>
+                        <td>Badge element with info severity.</td>
+                    </tr>
+                    <tr>
+                        <td>p-badge-warning</td>
+                        <td>Badge element with warning severity.</td>
+                    </tr>
+                    <tr>
+                        <td>p-badge-danger</td>
+                        <td>Badge element with danger severity.</td>
+                    </tr>
+                    <tr>
+                        <td>p-badge-lg</td>
+                        <td>Large badge element</td>
+                    </tr>
+                    <tr>
+                        <td>p-badge-xl</td>
+                        <td>Extra large badge element</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc>
-    </ClientOnly>
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>
+            Badge does not include any roles and attributes by default, any attribute is passed to the root element so aria roles and attributes can be added if required. If the badges are dynamic,
+            <i>aria-live</i> may be utilized as well. In case badges need to be tabbable, <i>tabindex</i> can be added to implement custom key handlers.
+        </p>
+
+        <h5>Keyboard Support</h5>
+        <p>Component does not include any interactive elements.</p>
+
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
@@ -206,7 +214,7 @@ export default {
 <template>
     <div>
         <h5>Numbers</h5>
-        <Badge value="2" class="mr-2"></Badge>
+        <Badge value="2" class="mr-2" aria-label="Tabable Primary Badge" tabindex="0"></Badge>
         <Badge value="8" severity="success" class="mr-2"></Badge>
         <Badge value="4" severity="info" class="mr-2"></Badge>
         <Badge value="12" severity="warning" class="mr-2"></Badge>
@@ -240,7 +248,7 @@ export default {
 <template>
     <div>
         <h5>Numbers</h5>
-        <Badge value="2" class="mr-2"></Badge>
+        <Badge value="2" class="mr-2" aria-label="Tabable Primary Badge" tabindex="0"></Badge>
         <Badge value="8" severity="success" class="mr-2"></Badge>
         <Badge value="4" severity="info" class="mr-2"></Badge>
         <Badge value="12" severity="warning" class="mr-2"></Badge>
@@ -273,7 +281,7 @@ export default {
         <script src="https://unpkg.com/primevue@^3/badgedirective/badgedirective.min.js"><\\/script>`,
                     content: `<div id="app">
             <h5>Numbers</h5>
-            <p-badge value="2" class="mr-2"></p-badge>
+            <p-badge value="2" class="mr-2" aria-label="Tabable Primary Badge" tabindex="0"></p-badge>
             <p-badge value="8" severity="success" class="mr-2"></p-badge>
             <p-badge value="4" severity="info" class="mr-2"></p-badge>
             <p-badge value="12" severity="warning" class="mr-2"></p-badge>
diff --git a/pages/badge/index.vue b/pages/badge/index.vue
index f3235cec0..3621eae70 100644
--- a/pages/badge/index.vue
+++ b/pages/badge/index.vue
@@ -11,16 +11,16 @@
         <div class="content-section implementation">
             <div class="card">
                 <h5>Numbers</h5>
-                <Badge value="2" class="mr-2"></Badge>
+                <Badge value="2" class="mr-2" aria-label="Tabable Primary Badge" tabindex="0"></Badge>
                 <Badge value="8" severity="success" class="mr-2"></Badge>
                 <Badge value="4" severity="info" class="mr-2"></Badge>
                 <Badge value="12" severity="warning" class="mr-2"></Badge>
                 <Badge value="3" severity="danger"></Badge>
 
                 <h5 class="mb-4">Positioned Badge</h5>
-                <i class="pi pi-bell mr-4 p-text-secondary" style="font-size: 2rem" v-badge="2"></i>
-                <i class="pi pi-calendar mr-4 p-text-secondary" style="font-size: 2rem" v-badge.danger="'10+'"></i>
-                <i class="pi pi-envelope p-text-secondary" style="font-size: 2rem" v-badge.danger></i>
+                <i v-badge="2" class="pi pi-bell mr-4 p-text-secondary" style="font-size: 2rem"></i>
+                <i v-badge.danger="'10+'" class="pi pi-calendar mr-4 p-text-secondary" style="font-size: 2rem"></i>
+                <i v-badge.danger class="pi pi-envelope p-text-secondary" style="font-size: 2rem"></i>
 
                 <h5>Button Badge</h5>
                 <Button type="button" label="Emails" badge="8" class="mr-2" />
diff --git a/pages/blockui/BlockUIDoc.vue b/pages/blockui/BlockUIDoc.vue
index bcf7b45a8..226f8ac1d 100755
--- a/pages/blockui/BlockUIDoc.vue
+++ b/pages/blockui/BlockUIDoc.vue
@@ -1,25 +1,24 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="BlockUIDemo" :sources="sources" github="blockui/BlockUIDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="BlockUIDemo" :sources="sources" github="blockui/BlockUIDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import BlockUI from 'primevue/blockui';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/blockui/blockui.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p>
-                BlockUI is controlled using the <i>blocked</i> property, by default target element to block is the child component. In example below, panel gets blocked with a mask when blockedPanel is enabled and gets unblock when the bound variable
-                is set to false.
-            </p>
-            <pre v-code><code>
+        <h5>Getting Started</h5>
+        <p>
+            BlockUI is controlled using the <i>blocked</i> property, by default target element to block is the child component. In example below, panel gets blocked with a mask when blockedPanel is enabled and gets unblock when the bound variable is
+            set to false.
+        </p>
+        <pre v-code><code>
 &lt;BlockUI :blocked="blockedPanel"&gt;
     &lt;Panel header="Header"&gt;
         Panel Content
@@ -28,7 +27,7 @@ import BlockUI from 'primevue/blockui';
 
 </code></pre>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 export default {
     data() {
         return {
@@ -47,107 +46,115 @@ export default {
 
 </code></pre>
 
-            <h5>Full Screen</h5>
-            <p>In full screen mode, instead of a particular element, the whole document gets blocked. Set <i>fullScreen</i> as true in order to enable this functionality.</p>
+        <h5>Full Screen</h5>
+        <p>In full screen mode, instead of a particular element, the whole document gets blocked. Set <i>fullScreen</i> as true in order to enable this functionality.</p>
 
-            <pre v-code><code>
+        <pre v-code><code>
 &lt;BlockUI :blocked="blockedDocument" :fullScreen="true"&gt;&lt;/BlockUI&gt;
 
 </code></pre>
 
-            <h5>Properties</h5>
-            <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>blocked</td>
-                            <td>array</td>
-                            <td>null</td>
-                            <td>Controls the blocked state.</td>
-                        </tr>
-                        <tr>
-                            <td>fullscreen</td>
-                            <td>menuitem</td>
-                            <td>null</td>
-                            <td>When enabled, the whole document gets blocked.</td>
-                        </tr>
-                        <tr>
-                            <td>baseZIndex</td>
-                            <td>number</td>
-                            <td>0</td>
-                            <td>Base zIndex value to use in layering.</td>
-                        </tr>
-                        <tr>
-                            <td>autoZIndex</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether to automatically manage layering.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>blocked</td>
+                        <td>array</td>
+                        <td>null</td>
+                        <td>Controls the blocked state.</td>
+                    </tr>
+                    <tr>
+                        <td>fullscreen</td>
+                        <td>menuitem</td>
+                        <td>null</td>
+                        <td>When enabled, the whole document gets blocked.</td>
+                    </tr>
+                    <tr>
+                        <td>baseZIndex</td>
+                        <td>number</td>
+                        <td>0</td>
+                        <td>Base zIndex value to use in layering.</td>
+                    </tr>
+                    <tr>
+                        <td>autoZIndex</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Whether to automatically manage layering.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Events</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>block</td>
-                            <td>-</td>
-                            <td>Fired when the element gets blocked.</td>
-                        </tr>
-                        <tr>
-                            <td>unblock</td>
-                            <td>-</td>
-                            <td>Fired when the element gets unblocked.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Events</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>block</td>
+                        <td>-</td>
+                        <td>Fired when the element gets blocked.</td>
+                    </tr>
+                    <tr>
+                        <td>unblock</td>
+                        <td>-</td>
+                        <td>Fired when the element gets unblocked.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-blockui</td>
-                            <td>Mask element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-blockui-document</td>
-                            <td>Mask element in full screen mode.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-blockui</td>
+                        <td>Mask element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-blockui-document</td>
+                        <td>Mask element in full screen mode.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc>
-    </ClientOnly>
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>
+            BlockUI manages <i>aria-busy</i> state attribute when the UI gets blocked and unblocked. Any valid attribute is passed to the root element so additional attributes like <i>role</i> and <i>aria-live</i> can be used to define live regions.
+        </p>
+
+        <h5>Keyboard Support</h5>
+        <p>Component does not include any interactive elements.</p>
+
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
diff --git a/pages/breadcrumb/BreadcrumbDoc.vue b/pages/breadcrumb/BreadcrumbDoc.vue
index 092172a52..68129a7de 100755
--- a/pages/breadcrumb/BreadcrumbDoc.vue
+++ b/pages/breadcrumb/BreadcrumbDoc.vue
@@ -1,30 +1,29 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="BreadcrumbDemo" :sources="sources" github="breadcrumb/BreadcrumbDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="BreadcrumbDemo" :sources="sources" github="breadcrumb/BreadcrumbDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import Breadcrumb from 'primevue/breadcrumb';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/breadcrumb/breadcrumb.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>MenuModel</h5>
-            <p>Breadcrumb uses the common MenuModel API to define the items, visit <nuxt-link to="/menumodel">MenuModel API</nuxt-link> for details.</p>
+        <h5>MenuModel</h5>
+        <p>Breadcrumb uses the common MenuModel API to define the items, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p>
 
-            <h5>Getting Started</h5>
-            <p>Breadcrumb requires a collection of menuitems as its model and a home item.</p>
-            <pre v-code><code>
+        <h5>Getting Started</h5>
+        <p>Breadcrumb requires a collection of menuitems as its model and a home item.</p>
+        <pre v-code><code>
 &lt;Breadcrumb :home="home" :model="items" /&gt;
 
 </code></pre>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 export default {
     data() {
         return {
@@ -42,9 +41,9 @@ export default {
 
 </code></pre>
 
-            <h5>Templating</h5>
-            <p>Breadcrumb offers content customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter.</p>
-            <pre v-code><code><template v-pre>
+        <h5>Templating</h5>
+        <p>Breadcrumb offers content customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter.</p>
+        <pre v-code><code><template v-pre>
 &lt;Breadcrumb :home="home" :model="items"&gt;
     &lt;template #item="{item}"&gt;
         &lt;a :href="item.url"&gt;{{item.label}}&lt;/a&gt;
@@ -53,106 +52,142 @@ export default {
 </template>
 </code></pre>
 
-            <p><i>nuxt-link</i> with route configuration can also be used within templating for further customization.</p>
-            <pre v-code><code><template v-pre>
+        <p><i>router-link</i> with route configuration can also be used within templating for further customization.</p>
+        <pre v-code><code><template v-pre>
 &lt;Breadcrumb :home="home" :model="items"&gt;
     &lt;template #item="{item}"&gt;
-        &lt;nuxt-link :to="item.to" custom v-slot="{href, route, navigate, isActive, isExactActive}"&gt;
+        &lt;router-link :to="item.to" custom v-slot="{href, route, navigate, isActive, isExactActive}"&gt;
             &lt;a :href="href" @click="navigate" :class="{'active-link': isActive, 'active-link-exact": isExactActive}&gt;{{route.fullPath}}&lt;/a&gt;
-        &lt;/nuxt-link&gt;
+        &lt;/router-link&gt;
     &lt;/template&gt;
 &lt;/Breadcrumb&gt;
 </template>
 </code></pre>
 
-            <h5>Properties</h5>
-            <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>model</td>
-                            <td>array</td>
-                            <td>null</td>
-                            <td>An array of menuitems.</td>
-                        </tr>
-                        <tr>
-                            <td>home</td>
-                            <td>menuitem</td>
-                            <td>null</td>
-                            <td>Configuration for the home icon.</td>
-                        </tr>
-                        <tr>
-                            <td>exact</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether to apply 'nuxt-link-active-exact' class if route exactly matches the item path.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>model</td>
+                        <td>array</td>
+                        <td>null</td>
+                        <td>An array of menuitems.</td>
+                    </tr>
+                    <tr>
+                        <td>home</td>
+                        <td>menuitem</td>
+                        <td>null</td>
+                        <td>Configuration for the home icon.</td>
+                    </tr>
+                    <tr>
+                        <td>exact</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Whether to apply 'router-link-active-exact' class if route exactly matches the item path.</td>
+                    </tr>
+                    <tr>
+                        <td>aria-label</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Defines a string value that labels an interactive element.</td>
+                    </tr>
+                    <tr>
+                        <td>aria-labelledby</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Slots</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>item</td>
-                            <td>item: Menuitem instance</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Slots</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>item</td>
+                        <td>item: Menuitem instance</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-breadcrumb</td>
-                            <td>Container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-menuitem</td>
-                            <td>Menuitem element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-menuitem-text</td>
-                            <td>Label of a menuitem.</td>
-                        </tr>
-                        <tr>
-                            <td>p-breadcrumb-chevron</td>
-                            <td>Chevron element.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-breadcrumb</td>
+                        <td>Container element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-breadcrumb-list</td>
+                        <td>Ordered list element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-breadcrumb-home</td>
+                        <td>First list element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-menuitem</td>
+                        <td>Menuitem element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-menuitem-link</td>
+                        <td>Link element of the menuitem.</td>
+                    </tr>
+                    <tr>
+                        <td>p-menuitem-text</td>
+                        <td>Label of a menuitem.</td>
+                    </tr>
+                    <tr>
+                        <td>p-menuitem-icon</td>
+                        <td>Icon of a menuitem.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc>
-    </ClientOnly>
+        <h5>Dependencies</h5>
+        <p>None.</p>
+
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>
+            Breadcrumb uses the <i>nav</i> element and since any attribute is passed to the root implicitly <i>aria-labelledby</i> or <i>aria-label</i> can be used to describe the component. Inside an ordered list is used where the list item
+            separators have <i>aria-hidden</i> to be able to ignored by the screen readers. If the last link represents the current route, <i>aria-current</i> is added with "page" as the value.
+        </p>
+
+        <h6>Keyboard Support</h6>
+        <p>No special keyboard interaction is needed, all menuitems are focusable based on the page tab sequence.</p>
+
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
@@ -165,7 +200,7 @@ export default {
                     content: `
 <template>
     <div>
-        <Breadcrumb :home="home" :model="items" />
+        <Breadcrumb :home="home" :model="items" aria-label="breadcrumb" />
     </div>
 </template>
 
@@ -174,7 +209,7 @@ export default {
     data() {
         return {
             home: {
-                icon: 'pi pi-home', 
+                icon: 'pi pi-home',
                 to: '/',
             },
             items: [
@@ -195,7 +230,7 @@ export default {
                     content: `
 <template>
     <div>
-        <Breadcrumb :home="home" :model="items" />
+        <Breadcrumb :home="home" :model="items" aria-label="breadcrumb" />
     </div>
 </template>
 
@@ -205,7 +240,7 @@ import { ref } from 'vue';
 export default {
     setup() {
         const home = ref({
-            icon: 'pi pi-home', 
+            icon: 'pi pi-home',
             to: '/',
         });
         const items = ref([
@@ -227,7 +262,7 @@ export default {
                     imports: `<script src="https://unpkg.com/vue-router@4.0.0/dist/vue-router.global.js"><\\/script>
         <script src="https://unpkg.com/primevue@^3/breadcrumb/breadcrumb.min.js"><\\/script>`,
                     content: `<div id="app">
-            <p-breadcrumb :home="home" :model="items"></p-breadcrumb>
+            <p-breadcrumb :home="home" :model="items" aria-label="breadcrumb"></p-breadcrumb>
         </div>
 
         <script type="module">
@@ -237,7 +272,7 @@ export default {
         const App = {
             setup() {
                 const home = ref({
-                    icon: 'pi pi-home', 
+                    icon: 'pi pi-home',
                     to: '/',
                 });
                 const items = ref([
diff --git a/pages/breadcrumb/index.vue b/pages/breadcrumb/index.vue
index 666929e89..b577ebe48 100755
--- a/pages/breadcrumb/index.vue
+++ b/pages/breadcrumb/index.vue
@@ -10,7 +10,7 @@
 
         <div class="content-section implementation">
             <div class="card">
-                <Breadcrumb :home="home" :model="items" />
+                <Breadcrumb :home="home" :model="items" aria-label="breadcrumb" />
             </div>
         </div>
 
@@ -25,7 +25,7 @@ export default {
     data() {
         return {
             home: { icon: 'pi pi-home', to: '/' },
-            items: [{ label: 'Computer' }, { label: 'Notebook' }, { label: 'Accessories' }, { label: 'Backpacks' }, { label: 'Item' }]
+            items: [{ label: 'Computer' }, { label: 'Notebook' }, { label: 'Accessories' }, { label: 'Backpacks' }, { label: 'Item', to: '/breadcrumb' }]
         };
     },
     components: {
diff --git a/pages/button/ButtonDoc.vue b/pages/button/ButtonDoc.vue
index fc2069c89..fbbc45bf1 100755
--- a/pages/button/ButtonDoc.vue
+++ b/pages/button/ButtonDoc.vue
@@ -1,58 +1,57 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="ButtonDemo" :sources="sources" github="button/ButtonDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="ButtonDemo" :sources="sources" github="button/ButtonDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import Button from 'primevue/button';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p>Button is created using the Button element.</p>
-            <pre v-code><code>
+        <h5>Getting Started</h5>
+        <p>Button is created using the Button element.</p>
+        <pre v-code><code>
 &lt;Button /&gt;
 
 </code></pre>
 
-            <h5>Label</h5>
-            <p>Text of the button is defined using the <i>label</i> property.</p>
-            <pre v-code><code>
+        <h5>Label</h5>
+        <p>Text of the button is defined using the <i>label</i> property.</p>
+        <pre v-code><code>
 &lt;Button label="Submit" /&gt;
 
 </code></pre>
-            <h5>Icons</h5>
-            <p>Icon on a button is specified with <i>icon</i> property and position is configured using <i>iconPos</i> attribute. Default icon position is "left" and alternative is "right". To display only an icon, leave the label as undefined.</p>
-            <pre v-code><code>
+        <h5>Icons</h5>
+        <p>Icon on a button is specified with <i>icon</i> property and position is configured using <i>iconPos</i> attribute. Default icon position is "left" and alternative is "right". To display only an icon, leave the label as undefined.</p>
+        <pre v-code><code>
 &lt;Button label="Submit" icon="pi pi-check" iconPos="right" /&gt;
 
 </code></pre>
 
-            <h5>Events</h5>
-            <p>Events are defined with the standard notation.</p>
-            <pre v-code><code>
+        <h5>Events</h5>
+        <p>Events are defined with the standard notation.</p>
+        <pre v-code><code>
 &lt;Button label="Submit" @click="handleClick($event)"/&gt;
 
 </code></pre>
 
-            <h5>Severity</h5>
-            <p>Different options are available as severity levels.</p>
+        <h5>Severity</h5>
+        <p>Different options are available as severity levels.</p>
 
-            <ul>
-                <li>.p-button-secondary</li>
-                <li>.p-button-success</li>
-                <li>.p-button-info</li>
-                <li>.p-button-warning</li>
-                <li>.p-button-help</li>
-                <li>.p-button-danger</li>
-            </ul>
+        <ul>
+            <li>.p-button-secondary</li>
+            <li>.p-button-success</li>
+            <li>.p-button-info</li>
+            <li>.p-button-warning</li>
+            <li>.p-button-help</li>
+            <li>.p-button-danger</li>
+        </ul>
 
-            <pre v-code><code>
+        <pre v-code><code>
 &lt;Button label="Primary" /&gt;
 &lt;Button label="Secondary" class="p-button-secondary" /&gt;
 &lt;Button label="Success" class="p-button-success" /&gt;
@@ -63,9 +62,9 @@ import Button from 'primevue/button';
 
 </code></pre>
 
-            <h5>Text Buttons</h5>
-            <p>Text buttons have transparent background and borders, use <i>p-button-text</i> to apply text button styling. In addition when used with <i>.p-button-plain</i> text buttons ignore severity levels and displayed as a regular text.</p>
-            <pre v-code><code>
+        <h5>Text Buttons</h5>
+        <p>Text buttons have transparent background and borders, use <i>p-button-text</i> to apply text button styling. In addition when used with <i>.p-button-plain</i> text buttons ignore severity levels and displayed as a regular text.</p>
+        <pre v-code><code>
 &lt;Button label="Submit" class="p-button-text" /&gt;
 &lt;Button icon="pi pi-check" class="p-button-text" /&gt;
 &lt;Button label="Cancel" icon="pi pi-times" class="p-button-text" /&gt;
@@ -73,39 +72,39 @@ import Button from 'primevue/button';
 
 </code></pre>
 
-            <h5>Raised and Rounded Buttons</h5>
-            <p>A button can be raised by having "p-button-raised" style class and similarly borders can be made rounded using "p-button-rounded" class.</p>
-            <pre v-code><code>
+        <h5>Raised and Rounded Buttons</h5>
+        <p>A button can be raised by having "p-button-raised" style class and similarly borders can be made rounded using "p-button-rounded" class.</p>
+        <pre v-code><code>
 &lt;Button label="Primary" class="p-button-raised p-button-rounded" /&gt;
 
 </code></pre>
 
-            <h5>Outlined Buttons</h5>
-            <p>An alternate styling for a button is the outlined option where background becomes transparent. Apply "p-button-outlined" to style a button as outlined.</p>
-            <pre v-code><code>
+        <h5>Outlined Buttons</h5>
+        <p>An alternate styling for a button is the outlined option where background becomes transparent. Apply "p-button-outlined" to style a button as outlined.</p>
+        <pre v-code><code>
 &lt;Button label="Primary" class="p-button-outlined" /&gt;
 
 </code></pre>
 
-            <h5>Link Buttons</h5>
-            <p>Use "p-button-link" class to render the button as a link.</p>
-            <pre v-code><code>
+        <h5>Link Buttons</h5>
+        <p>Use "p-button-link" class to render the button as a link.</p>
+        <pre v-code><code>
 &lt;Button label="Link" class="p-button-link" /&gt;
 
 </code></pre>
 
-            <h5>Badges</h5>
-            <p>Badge is a small status indicator for a button. Refer to the <nuxt-link to="/badge">badge</nuxt-link> documentation for available styling options.</p>
+        <h5>Badges</h5>
+        <p>Badge is a small status indicator for a button. Refer to the <router-link to="/badge">badge</router-link> documentation for available styling options.</p>
 
-            <pre v-code><code>
+        <pre v-code><code>
 &lt;Button type="button" label="Emails" badge="8" /&gt;
 &lt;Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-info" /&gt;
 
 </code></pre>
 
-            <h5>ButtonSet</h5>
-            <p>Wrapping the buttons in a container having a <i>.p-buttonset</i> class, groups the buttons side to side.</p>
-            <pre v-code><code>
+        <h5>ButtonSet</h5>
+        <p>Wrapping the buttons in a container having a <i>.p-buttonset</i> class, groups the buttons side to side.</p>
+        <pre v-code><code>
 &lt;span class="p-buttonset"&gt;
     &lt;Button label="Save" icon="pi pi-check" /&gt;
     &lt;Button label="Delete" icon="pi pi-trash" /&gt;
@@ -114,28 +113,28 @@ import Button from 'primevue/button';
 
 </code></pre>
 
-            <h5>Sizes</h5>
-            <p>
-                2 more sizes are available in addition to a regular button, for a smaller input add <i>p-button-sm</i> and for a larger one, use <i>p-button-lg</i>. Note that these classes available to change the size of a particular button, for
-                global scaling see the <nuxt-link to="/theming">theming</nuxt-link> page.
-            </p>
-            <pre v-code><code>
+        <h5>Sizes</h5>
+        <p>
+            2 more sizes are available in addition to a regular button, for a smaller input add <i>p-button-sm</i> and for a larger one, use <i>p-button-lg</i>. Note that these classes available to change the size of a particular button, for global
+            scaling see the <router-link to="/theming">theming</router-link> page.
+        </p>
+        <pre v-code><code>
 &lt;Button label="Small" icon="pi pi-check" class="p-button-sm"  /&gt;
 &lt;Button label="Normal" icon="pi pi-check" class="p-button"  /&gt;
 &lt;Button label="Large" icon="pi pi-check" class="p-button-lg" /&gt;
 
 </code></pre>
 
-            <h5>Loading State</h5>
-            <p>Button displays a <i>loadingIcon</i> when <i>loading</i> property is enabled.</p>
-            <pre v-code><code>
+        <h5>Loading State</h5>
+        <p>Button displays a <i>loadingIcon</i> when <i>loading</i> property is enabled.</p>
+        <pre v-code><code>
 &lt;Button label="Save" icon="pi pi-check" :loading="isLoading" /&gt;
 
 </code></pre>
 
-            <h5>Templating</h5>
-            <p>Custom content such as icons, images and text can be placed inside the button via the default slot. Note that when slot is used, label, icon and badge properties are not included.</p>
-            <pre v-code><code>
+        <h5>Templating</h5>
+        <p>Custom content such as icons, images and text can be placed inside the button via the default slot. Note that when slot is used, label, icon and badge properties are not included.</p>
+        <pre v-code><code>
 &lt;Button type="button" class="px-3"&gt;
     &lt;img alt="logo" src="../../assets/images/logo.svg" style="width: 1.5rem"/&gt;
 &lt;/Button&gt;
@@ -147,115 +146,114 @@ import Button from 'primevue/button';
 
 </code></pre>
 
-            <h5>Properties</h5>
-            <p>Any property such as style and class are passed to the underlying button element. Following are the additional properties to configure the component.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>label</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Text of the button.</td>
-                        </tr>
-                        <tr>
-                            <td>icon</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Name of the icon.</td>
-                        </tr>
-                        <tr>
-                            <td>iconPos</td>
-                            <td>string</td>
-                            <td>left</td>
-                            <td>Position of the icon, valid values are "left", "right", "bottom" and "top".</td>
-                        </tr>
-                        <tr>
-                            <td>iconClass</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the icon.</td>
-                        </tr>
-                        <tr>
-                            <td>badge</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Value of the badge.</td>
-                        </tr>
-                        <tr>
-                            <td>badgeClass</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the badge.</td>
-                        </tr>
-                        <tr>
-                            <td>loading</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Whether the button is in loading state.</td>
-                        </tr>
-                        <tr>
-                            <td>loadingIcon</td>
-                            <td>string</td>
-                            <td>pi pi-spinner pi-spin</td>
-                            <td>Icon to display in loading state.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <p>Any property such as style and class are passed to the underlying button element. Following are the additional properties to configure the component.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>label</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Text of the button.</td>
+                    </tr>
+                    <tr>
+                        <td>icon</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Name of the icon.</td>
+                    </tr>
+                    <tr>
+                        <td>iconPos</td>
+                        <td>string</td>
+                        <td>left</td>
+                        <td>Position of the icon, valid values are "left", "right", "bottom" and "top".</td>
+                    </tr>
+                    <tr>
+                        <td>iconClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the icon.</td>
+                    </tr>
+                    <tr>
+                        <td>badge</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Value of the badge.</td>
+                    </tr>
+                    <tr>
+                        <td>badgeClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the badge.</td>
+                    </tr>
+                    <tr>
+                        <td>loading</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Whether the button is in loading state.</td>
+                    </tr>
+                    <tr>
+                        <td>loadingIcon</td>
+                        <td>string</td>
+                        <td>pi pi-spinner pi-spin</td>
+                        <td>Icon to display in loading state.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-button</td>
-                            <td>Button element</td>
-                        </tr>
-                        <tr>
-                            <td>p-button-icon</td>
-                            <td>Icon element</td>
-                        </tr>
-                        <tr>
-                            <td>p-button-label</td>
-                            <td>Label element of the button</td>
-                        </tr>
-                        <tr>
-                            <td>p-button-sm</td>
-                            <td>Smaller button element</td>
-                        </tr>
-                        <tr>
-                            <td>p-button-lg</td>
-                            <td>Larger button element</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-button</td>
+                        <td>Button element</td>
+                    </tr>
+                    <tr>
+                        <td>p-button-icon</td>
+                        <td>Icon element</td>
+                    </tr>
+                    <tr>
+                        <td>p-button-label</td>
+                        <td>Label element of the button</td>
+                    </tr>
+                    <tr>
+                        <td>p-button-sm</td>
+                        <td>Smaller button element</td>
+                    </tr>
+                    <tr>
+                        <td>p-button-lg</td>
+                        <td>Larger button element</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Accessibility</h5>
-            <DevelopmentSection>
-                <h6>Screen Reader</h6>
-                <p>
-                    Button component renders a native button element that implicitly includes any passed prop. Text to describe the button is defined with the <i>aria-label</i> prop, if not present <i>label</i> prop is used as the value. If the
-                    button is icon only or custom templating is used, it is recommended to use <i>aria-label</i> so that screen readers would be able to read the element properly.
-                </p>
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>
+            Button component renders a native button element that implicitly includes any passed prop. Text to describe the button is defined with the <i>aria-label</i> prop, if not present <i>label</i> prop is used as the value. If the button is
+            icon only or custom templating is used, it is recommended to use <i>aria-label</i> so that screen readers would be able to read the element properly.
+        </p>
 
-                <pre v-code><code>
+        <pre v-code><code>
 &lt;Button icon="pi pi-check" aria-label="Submit" /&gt;
 
 &lt;Button icon="pi pi-check" label="Submit" /&gt;
@@ -267,37 +265,35 @@ import Button from 'primevue/button';
 
 </code></pre>
 
-                <h6>Keyboard Support</h6>
-                <div class="doc-tablewrapper">
-                    <table class="doc-table">
-                        <thead>
-                            <tr>
-                                <th>Key</th>
-                                <th>Function</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr>
-                                <td><i>tab</i></td>
-                                <td>Moves focus to the button.</td>
-                            </tr>
-                            <tr>
-                                <td><i>enter</i></td>
-                                <td>Activates the button.</td>
-                            </tr>
-                            <tr>
-                                <td><i>space</i></td>
-                                <td>Activates the button.</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-            </DevelopmentSection>
+        <h6>Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>tab</i></td>
+                        <td>Moves focus to the button.</td>
+                    </tr>
+                    <tr>
+                        <td><i>enter</i></td>
+                        <td>Activates the button.</td>
+                    </tr>
+                    <tr>
+                        <td><i>space</i></td>
+                        <td>Activates the button.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc>
-    </ClientOnly>
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
@@ -414,15 +410,6 @@ export default {
         <Button type="button" icon="pi pi-search" :loading="loading[2]" @click="load(2)" />
         <Button type="button" label="Search" :loading="loading[3]" @click="load(3)" />
 
-        <h5>Templating</h5>
-        <Button type="button" class="px-3">
-            <img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 1.5rem"/>
-        </Button>
-        <Button type="button" class="p-button-outlined p-button-success">
-            <img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 1.5rem" />
-            <span class="ml-2 font-bold">PrimeVue</span>
-        </Button>
-
         <h5>Button Set</h5>
         <span class="p-buttonset">
             <Button label="Save" icon="pi pi-check" />
@@ -436,6 +423,42 @@ export default {
             <Button label="Normal" icon="pi pi-check" class="p-button"  />
             <Button label="Large" icon="pi pi-check" class="p-button-lg" />
         </div>
+
+        <h5>Template</h5>
+        <div class="template">
+            <Button class="google p-0" aria-label="Google">
+                <i class="pi pi-google px-2"></i>
+                <span class="px-3">Google</span>
+            </Button>
+            <Button class="youtube p-0" aria-label="Youtube">
+                <i class="pi pi-youtube px-2"></i>
+                <span class="px-3">Youtube</span>
+            </Button>
+            <Button class="vimeo p-0" aria-label="Vimeo">
+                <i class="pi pi-vimeo px-2"></i>
+                <span class="px-3">Vimeo</span>
+            </Button>
+            <Button class="facebook p-0" aria-label="Facebook">
+                <i class="pi pi-facebook px-2"></i>
+                <span class="px-3">Facebook</span>
+            </Button>
+            <Button class="twitter p-0" aria-label="Twitter">
+                <i class="pi pi-twitter px-2"></i>
+                <span class="px-3">Twitter</span>
+            </Button>
+            <Button class="slack p-0" aria-label="Slack">
+                <i class="pi pi-slack px-2"></i>
+                <span class="px-3">Slack</span>
+            </Button>
+            <Button class="amazon p-0" aria-label="Amazon">
+                <i class="pi pi-amazon px-2"></i>
+                <span class="px-3">Amazon</span>
+            </Button>
+            <Button class="discord p-0" aria-label="Discord">
+                <i class="pi pi-discord px-2"></i>
+                <span class="px-3">Discord</span>
+            </Button>
+        </div>
     </div>
 </template>
 
@@ -456,8 +479,8 @@ export default {
 <\\/script>
 
 <style lang="scss" scoped>
-.p-button {
-    margin-right: .5rem;
+    .p-button {
+    margin-right: 0.5rem;
 }
 
 .p-buttonset {
@@ -468,7 +491,7 @@ export default {
 
 .sizes {
     .button {
-        margin-bottom: .5rem;
+        margin-bottom: 0.5rem;
         display: block;
 
         &:last-child {
@@ -477,9 +500,149 @@ export default {
     }
 }
 
+.template .p-button i {
+    line-height: 2.25rem;
+}
+.template .p-button.google {
+    background: linear-gradient(to left, var(--purple-600) 50%, var(--purple-700) 50%);
+    background-size: 200% 100%;
+    background-position: right bottom;
+    transition: background-position 0.5s ease-out;
+    color: #fff;
+    border-color: var(--purple-700);
+}
+.template .p-button.google:hover {
+    background-position: left bottom;
+}
+.template .p-button.google i {
+    background-color: var(--purple-700);
+}
+.template .p-button.google:focus {
+    box-shadow: 0 0 0 1px var(--purple-400);
+}
+.template .p-button.youtube {
+    background: linear-gradient(to left, var(--pink-600) 50%, var(--pink-700) 50%);
+    background-size: 200% 100%;
+    background-position: right bottom;
+    transition: background-position 0.5s ease-out;
+    color: #fff;
+    border-color: var(--pink-700);
+}
+.template .p-button.youtube:hover {
+    background-position: left bottom;
+}
+.template .p-button.youtube i {
+    background-color: var(--pink-700);
+}
+.template .p-button.youtube:focus {
+    box-shadow: 0 0 0 1px var(--pink-400);
+}
+.template .p-button.vimeo {
+    background: linear-gradient(to left, var(--green-200) 50%, var(--green-300) 50%);
+    background-size: 200% 100%;
+    background-position: right bottom;
+    transition: background-position 0.5s ease-out;
+    color: #000;
+    border-color: var(--green-300);
+}
+.template .p-button.vimeo:hover {
+    background-position: left bottom;
+}
+.template .p-button.vimeo i {
+    background-color: var(--green-300);
+}
+.template .p-button.vimeo:focus {
+    box-shadow: 0 0 0 1px var(--green-400);
+}
+.template .p-button.facebook {
+    background: linear-gradient(to left, var(--indigo-600) 50%, var(--indigo-700) 50%);
+    background-size: 200% 100%;
+    background-position: right bottom;
+    transition: background-position 0.5s ease-out;
+    color: #fff;
+    border-color: var(--indigo-700);
+}
+.template .p-button.facebook:hover {
+    background-position: left bottom;
+}
+.template .p-button.facebook i {
+    background-color: var(--indigo-700);
+}
+.template .p-button.facebook:focus {
+    box-shadow: 0 0 0 1px var(--indigo-400);
+}
+.template .p-button.twitter {
+    background: linear-gradient(to left, var(--blue-400) 50%, var(--blue-500) 50%);
+    background-size: 200% 100%;
+    background-position: right bottom;
+    transition: background-position 0.5s ease-out;
+    color: #fff;
+    border-color: var(--blue-500);
+}
+.template .p-button.twitter:hover {
+    background-position: left bottom;
+}
+.template .p-button.twitter i {
+    background-color: var(--blue-500);
+}
+.template .p-button.twitter:focus {
+    box-shadow: 0 0 0 1px var(--blue-200);
+}
+.template .p-button.slack {
+    background: linear-gradient(to left, var(--orange-400) 50%, var(--orange-500) 50%);
+    background-size: 200% 100%;
+    background-position: right bottom;
+    transition: background-position 0.5s ease-out;
+    color: #fff;
+    border-color: var(--orange-500);
+}
+.template .p-button.slack:hover {
+    background-position: left bottom;
+}
+.template .p-button.slack i {
+    background-color: var(--orange-500);
+}
+.template .p-button.slack:focus {
+    box-shadow: 0 0 0 1px var(--orange-200);
+}
+.template .p-button.amazon {
+    background: linear-gradient(to left, var(--yellow-400) 50%, var(--yellow-500) 50%);
+    background-size: 200% 100%;
+    background-position: right bottom;
+    transition: background-position 0.5s ease-out;
+    color: #000;
+    border-color: var(--yellow-500);
+}
+.template .p-button.amazon:hover {
+    background-position: left bottom;
+}
+.template .p-button.amazon i {
+    background-color: var(--yellow-500);
+}
+.template .p-button.amazon:focus {
+    box-shadow: 0 0 0 1px var(--yellow-200);
+}
+.template .p-button.discord {
+    background: linear-gradient(to left, var(--bluegray-700) 50%, var(--bluegray-800) 50%);
+    background-size: 200% 100%;
+    background-position: right bottom;
+    transition: background-position 0.5s ease-out;
+    color: #fff;
+    border-color: var(--bluegray-800);
+}
+.template .p-button.discord:hover {
+    background-position: left bottom;
+}
+.template .p-button.discord i {
+    background-color: var(--bluegray-800);
+}
+.template .p-button.discord:focus {
+    box-shadow: 0 0 0 1px var(--bluegray-500);
+}
+
 @media screen and (max-width: 640px) {
     .p-button {
-        margin-bottom: .5rem;
+        margin-bottom: 0.5rem;
 
         &:not(.p-button-icon-only) {
             display: flex;
@@ -604,15 +767,6 @@ export default {
         <Button type="button" icon="pi pi-search" :loading="loading[2]" @click="load(2)" />
         <Button type="button" label="Search" :loading="loading[3]" @click="load(3)" />
 
-        <h5>Templating</h5>
-        <Button type="button" class="px-3">
-            <img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 1.5rem"/>
-        </Button>
-        <Button type="button" class="p-button-outlined p-button-success">
-            <img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 1.5rem" />
-            <span class="ml-2 font-bold">PrimeVue</span>
-        </Button>
-
         <h5>Button Set</h5>
         <span class="p-buttonset">
             <Button label="Save" icon="pi pi-check" />
@@ -626,6 +780,42 @@ export default {
             <Button label="Normal" icon="pi pi-check" class="p-button"  />
             <Button label="Large" icon="pi pi-check" class="p-button-lg" />
         </div>
+
+        <h5>Template</h5>
+        <div class="template">
+            <Button class="google p-0" aria-label="Google">
+                <i class="pi pi-google px-2"></i>
+                <span class="px-3">Google</span>
+            </Button>
+            <Button class="youtube p-0" aria-label="Youtube">
+                <i class="pi pi-youtube px-2"></i>
+                <span class="px-3">Youtube</span>
+            </Button>
+            <Button class="vimeo p-0" aria-label="Vimeo">
+                <i class="pi pi-vimeo px-2"></i>
+                <span class="px-3">Vimeo</span>
+            </Button>
+            <Button class="facebook p-0" aria-label="Facebook">
+                <i class="pi pi-facebook px-2"></i>
+                <span class="px-3">Facebook</span>
+            </Button>
+            <Button class="twitter p-0" aria-label="Twitter">
+                <i class="pi pi-twitter px-2"></i>
+                <span class="px-3">Twitter</span>
+            </Button>
+            <Button class="slack p-0" aria-label="Slack">
+                <i class="pi pi-slack px-2"></i>
+                <span class="px-3">Slack</span>
+            </Button>
+            <Button class="amazon p-0" aria-label="Amazon">
+                <i class="pi pi-amazon px-2"></i>
+                <span class="px-3">Amazon</span>
+            </Button>
+            <Button class="discord p-0" aria-label="Discord">
+                <i class="pi pi-discord px-2"></i>
+                <span class="px-3">Discord</span>
+            </Button>
+        </div>
     </div>
 </template>
 
@@ -646,8 +836,8 @@ export default({
 <\\/script>
 
 <style lang="scss" scoped>
-.p-button {
-    margin-right: .5rem;
+    .p-button {
+    margin-right: 0.5rem;
 }
 
 .p-buttonset {
@@ -658,7 +848,7 @@ export default({
 
 .sizes {
     .button {
-        margin-bottom: .5rem;
+        margin-bottom: 0.5rem;
         display: block;
 
         &:last-child {
@@ -667,9 +857,149 @@ export default({
     }
 }
 
+.template .p-button i {
+    line-height: 2.25rem;
+}
+.template .p-button.google {
+    background: linear-gradient(to left, var(--purple-600) 50%, var(--purple-700) 50%);
+    background-size: 200% 100%;
+    background-position: right bottom;
+    transition: background-position 0.5s ease-out;
+    color: #fff;
+    border-color: var(--purple-700);
+}
+.template .p-button.google:hover {
+    background-position: left bottom;
+}
+.template .p-button.google i {
+    background-color: var(--purple-700);
+}
+.template .p-button.google:focus {
+    box-shadow: 0 0 0 1px var(--purple-400);
+}
+.template .p-button.youtube {
+    background: linear-gradient(to left, var(--pink-600) 50%, var(--pink-700) 50%);
+    background-size: 200% 100%;
+    background-position: right bottom;
+    transition: background-position 0.5s ease-out;
+    color: #fff;
+    border-color: var(--pink-700);
+}
+.template .p-button.youtube:hover {
+    background-position: left bottom;
+}
+.template .p-button.youtube i {
+    background-color: var(--pink-700);
+}
+.template .p-button.youtube:focus {
+    box-shadow: 0 0 0 1px var(--pink-400);
+}
+.template .p-button.vimeo {
+    background: linear-gradient(to left, var(--green-200) 50%, var(--green-300) 50%);
+    background-size: 200% 100%;
+    background-position: right bottom;
+    transition: background-position 0.5s ease-out;
+    color: #000;
+    border-color: var(--green-300);
+}
+.template .p-button.vimeo:hover {
+    background-position: left bottom;
+}
+.template .p-button.vimeo i {
+    background-color: var(--green-300);
+}
+.template .p-button.vimeo:focus {
+    box-shadow: 0 0 0 1px var(--green-400);
+}
+.template .p-button.facebook {
+    background: linear-gradient(to left, var(--indigo-600) 50%, var(--indigo-700) 50%);
+    background-size: 200% 100%;
+    background-position: right bottom;
+    transition: background-position 0.5s ease-out;
+    color: #fff;
+    border-color: var(--indigo-700);
+}
+.template .p-button.facebook:hover {
+    background-position: left bottom;
+}
+.template .p-button.facebook i {
+    background-color: var(--indigo-700);
+}
+.template .p-button.facebook:focus {
+    box-shadow: 0 0 0 1px var(--indigo-400);
+}
+.template .p-button.twitter {
+    background: linear-gradient(to left, var(--blue-400) 50%, var(--blue-500) 50%);
+    background-size: 200% 100%;
+    background-position: right bottom;
+    transition: background-position 0.5s ease-out;
+    color: #fff;
+    border-color: var(--blue-500);
+}
+.template .p-button.twitter:hover {
+    background-position: left bottom;
+}
+.template .p-button.twitter i {
+    background-color: var(--blue-500);
+}
+.template .p-button.twitter:focus {
+    box-shadow: 0 0 0 1px var(--blue-200);
+}
+.template .p-button.slack {
+    background: linear-gradient(to left, var(--orange-400) 50%, var(--orange-500) 50%);
+    background-size: 200% 100%;
+    background-position: right bottom;
+    transition: background-position 0.5s ease-out;
+    color: #fff;
+    border-color: var(--orange-500);
+}
+.template .p-button.slack:hover {
+    background-position: left bottom;
+}
+.template .p-button.slack i {
+    background-color: var(--orange-500);
+}
+.template .p-button.slack:focus {
+    box-shadow: 0 0 0 1px var(--orange-200);
+}
+.template .p-button.amazon {
+    background: linear-gradient(to left, var(--yellow-400) 50%, var(--yellow-500) 50%);
+    background-size: 200% 100%;
+    background-position: right bottom;
+    transition: background-position 0.5s ease-out;
+    color: #000;
+    border-color: var(--yellow-500);
+}
+.template .p-button.amazon:hover {
+    background-position: left bottom;
+}
+.template .p-button.amazon i {
+    background-color: var(--yellow-500);
+}
+.template .p-button.amazon:focus {
+    box-shadow: 0 0 0 1px var(--yellow-200);
+}
+.template .p-button.discord {
+    background: linear-gradient(to left, var(--bluegray-700) 50%, var(--bluegray-800) 50%);
+    background-size: 200% 100%;
+    background-position: right bottom;
+    transition: background-position 0.5s ease-out;
+    color: #fff;
+    border-color: var(--bluegray-800);
+}
+.template .p-button.discord:hover {
+    background-position: left bottom;
+}
+.template .p-button.discord i {
+    background-color: var(--bluegray-800);
+}
+.template .p-button.discord:focus {
+    box-shadow: 0 0 0 1px var(--bluegray-500);
+}
+
 @media screen and (max-width: 640px) {
     .p-button {
-        margin-bottom: .5rem;
+        margin-bottom: 0.5rem;
 
         &:not(.p-button-icon-only) {
             display: flex;
@@ -793,15 +1123,6 @@ export default({
             <p-button type="button" icon="pi pi-search" :loading="loading[2]" @click="load(2)"></p-button>
             <p-button type="button" label="Search" :loading="loading[3]" @click="load(3)"></p-button>
 
-            <h5>Templating</h5>
-            <p-button type="button" class="px-3">
-                <img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 1.5rem" />
-            </p-button>
-            <p-button type="button" class="p-button-outlined p-button-success">
-                <img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 1.5rem" />
-                <span class="ml-2 font-bold">PrimeVue</span>
-            </p-button>
-
             <h5>Button Set</h5>
             <span class="p-buttonset">
                 <p-button label="Save" icon="pi pi-check"></p-button>
@@ -815,6 +1136,42 @@ export default({
                 <p-button label="Normal" icon="pi pi-check" class="p-button"></p-button>
                 <p-button label="Large" icon="pi pi-check" class="p-button-lg"></p-button>
             </div>
+
+            <h5>Template</h5>
+            <div class="template">
+                <p-button class="google p-0" aria-label="Google">
+                    <i class="pi pi-google px-2"></i>
+                    <span class="px-3">Google</span>
+                </p-button>
+                <p-button class="youtube p-0" aria-label="Youtube">
+                    <i class="pi pi-youtube px-2"></i>
+                    <span class="px-3">Youtube</span>
+                </p-button>
+                <p-button class="vimeo p-0" aria-label="Vimeo">
+                    <i class="pi pi-vimeo px-2"></i>
+                    <span class="px-3">Vimeo</span>
+                </p-button>
+                <p-button class="facebook p-0" aria-label="Facebook">
+                    <i class="pi pi-facebook px-2"></i>
+                    <span class="px-3">Facebook</span>
+                </p-button>
+                <p-button class="twitter p-0" aria-label="Twitter">
+                    <i class="pi pi-twitter px-2"></i>
+                    <span class="px-3">Twitter</span>
+                </p-button>
+                <p-button class="slack p-0" aria-label="Slack">
+                    <i class="pi pi-slack px-2"></i>
+                    <span class="px-3">Slack</span>
+                </p-button>
+                <p-button class="amazon p-0" aria-label="Amazon">
+                    <i class="pi pi-amazon px-2"></i>
+                    <span class="px-3">Amazon</span>
+                </p-button>
+                <p-button class="discord p-0" aria-label="Discord">
+                    <i class="pi pi-discord px-2"></i>
+                    <span class="px-3">Discord</span>
+                </p-button>
+            </div>
         </div>
     </div>
 
@@ -843,7 +1200,7 @@ export default({
 
     <style>
     .p-button {
-        margin-right: .5rem;
+        margin-right: 0.5rem;
     }
 
     .p-buttonset .p-button {
@@ -855,13 +1212,149 @@ export default({
         display: block;
     }
 
-    .sizes .button:last-child {
-        margin-bottom: 0;
+    .template .p-button i {
+        line-height: 2.25rem;
+    }
+    .template .p-button.google {
+        background: linear-gradient(to left, var(--purple-600) 50%, var(--purple-700) 50%);
+        background-size: 200% 100%;
+        background-position: right bottom;
+        transition: background-position 0.5s ease-out;
+        color: #fff;
+        border-color: var(--purple-700);
+    }
+    .template .p-button.google:hover {
+        background-position: left bottom;
+    }
+    .template .p-button.google i {
+        background-color: var(--purple-700);
+    }
+    .template .p-button.google:focus {
+        box-shadow: 0 0 0 1px var(--purple-400);
+    }
+    .template .p-button.youtube {
+        background: linear-gradient(to left, var(--pink-600) 50%, var(--pink-700) 50%);
+        background-size: 200% 100%;
+        background-position: right bottom;
+        transition: background-position 0.5s ease-out;
+        color: #fff;
+        border-color: var(--pink-700);
+    }
+    .template .p-button.youtube:hover {
+        background-position: left bottom;
+    }
+    .template .p-button.youtube i {
+        background-color: var(--pink-700);
+    }
+    .template .p-button.youtube:focus {
+        box-shadow: 0 0 0 1px var(--pink-400);
+    }
+    .template .p-button.vimeo {
+        background: linear-gradient(to left, var(--green-200) 50%, var(--green-300) 50%);
+        background-size: 200% 100%;
+        background-position: right bottom;
+        transition: background-position 0.5s ease-out;
+        color: #000;
+        border-color: var(--green-300);
+    }
+    .template .p-button.vimeo:hover {
+        background-position: left bottom;
+    }
+    .template .p-button.vimeo i {
+        background-color: var(--green-300);
+    }
+    .template .p-button.vimeo:focus {
+        box-shadow: 0 0 0 1px var(--green-400);
+    }
+    .template .p-button.facebook {
+        background: linear-gradient(to left, var(--indigo-600) 50%, var(--indigo-700) 50%);
+        background-size: 200% 100%;
+        background-position: right bottom;
+        transition: background-position 0.5s ease-out;
+        color: #fff;
+        border-color: var(--indigo-700);
+    }
+    .template .p-button.facebook:hover {
+        background-position: left bottom;
+    }
+    .template .p-button.facebook i {
+        background-color: var(--indigo-700);
+    }
+    .template .p-button.facebook:focus {
+        box-shadow: 0 0 0 1px var(--indigo-400);
+    }
+    .template .p-button.twitter {
+        background: linear-gradient(to left, var(--blue-400) 50%, var(--blue-500) 50%);
+        background-size: 200% 100%;
+        background-position: right bottom;
+        transition: background-position 0.5s ease-out;
+        color: #fff;
+        border-color: var(--blue-500);
+    }
+    .template .p-button.twitter:hover {
+        background-position: left bottom;
+    }
+    .template .p-button.twitter i {
+        background-color: var(--blue-500);
+    }
+    .template .p-button.twitter:focus {
+        box-shadow: 0 0 0 1px var(--blue-200);
+    }
+    .template .p-button.slack {
+        background: linear-gradient(to left, var(--orange-400) 50%, var(--orange-500) 50%);
+        background-size: 200% 100%;
+        background-position: right bottom;
+        transition: background-position 0.5s ease-out;
+        color: #fff;
+        border-color: var(--orange-500);
+    }
+    .template .p-button.slack:hover {
+        background-position: left bottom;
+    }
+    .template .p-button.slack i {
+        background-color: var(--orange-500);
+    }
+    .template .p-button.slack:focus {
+        box-shadow: 0 0 0 1px var(--orange-200);
+    }
+    .template .p-button.amazon {
+        background: linear-gradient(to left, var(--yellow-400) 50%, var(--yellow-500) 50%);
+        background-size: 200% 100%;
+        background-position: right bottom;
+        transition: background-position 0.5s ease-out;
+        color: #000;
+        border-color: var(--yellow-500);
+    }
+    .template .p-button.amazon:hover {
+        background-position: left bottom;
+    }
+    .template .p-button.amazon i {
+        background-color: var(--yellow-500);
+    }
+    .template .p-button.amazon:focus {
+        box-shadow: 0 0 0 1px var(--yellow-200);
+    }
+    .template .p-button.discord {
+        background: linear-gradient(to left, var(--bluegray-700) 50%, var(--bluegray-800) 50%);
+        background-size: 200% 100%;
+        background-position: right bottom;
+        transition: background-position 0.5s ease-out;
+        color: #fff;
+        border-color: var(--bluegray-800);
+    }
+    .template .p-button.discord:hover {
+        background-position: left bottom;
+    }
+    .template .p-button.discord i {
+        background-color: var(--bluegray-800);
+    }
+    .template .p-button.discord:focus {
+        box-shadow: 0 0 0 1px var(--bluegray-500);
     }
 
     @media screen and (max-width: 640px) {
         .p-button {
-            margin-bottom: .5rem;
+            margin-bottom: 0.5rem;
         }
 
         .p-button:not(.p-button-icon-only) {
diff --git a/pages/calendar/CalendarDoc.vue b/pages/calendar/CalendarDoc.vue
index 701725d37..0fbc4d90a 100755
--- a/pages/calendar/CalendarDoc.vue
+++ b/pages/calendar/CalendarDoc.vue
@@ -1,28 +1,27 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="CalendarDemo" :sources="sources" github="calendar/CalendarDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="CalendarDemo" :sources="sources" github="calendar/CalendarDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import Calendar from 'primevue/calendar';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/calendar/calendar.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p>Two-way value binding is defined using the standard v-model directive referencing to a Date property.</p>
+        <h5>Getting Started</h5>
+        <p>Two-way value binding is defined using the standard v-model directive referencing to a Date property.</p>
 
-            <pre v-code><code>
+        <pre v-code><code>
 &lt;Calendar v-model="value" /&gt;
 
 </code></pre>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 export default {
     data() {
         return {
@@ -33,96 +32,96 @@ export default {
 
 </code></pre>
 
-            <h5>Popup and Inline</h5>
-            <p>Calendar is displayed in a popup by default and <i>inline</i> property needs to be enabled for inline mode.</p>
-            <pre v-code><code>
+        <h5>Popup and Inline</h5>
+        <p>Calendar is displayed in a popup by default and <i>inline</i> property needs to be enabled for inline mode.</p>
+        <pre v-code><code>
 &lt;Calendar v-model="value" :inline="true" /&gt;
 
 </code></pre>
 
-            <h5>Selection Mode</h5>
-            <p>
-                By default calendar allows selecting one date only whereas multiple dates can be selected by setting <i>selectionMode</i> to multiple. In this case calendar updates the value with an array of dates where optionally number of
-                selectable dates can be restricted with maxDateCount property. Third alternative is the range mode that allows selecting a range based on an array of two values where first value is the start date and second value is the end date.
-            </p>
+        <h5>Selection Mode</h5>
+        <p>
+            By default calendar allows selecting one date only whereas multiple dates can be selected by setting <i>selectionMode</i> to multiple. In this case calendar updates the value with an array of dates where optionally number of selectable
+            dates can be restricted with maxDateCount property. Third alternative is the range mode that allows selecting a range based on an array of two values where first value is the start date and second value is the end date.
+        </p>
 
-            <pre v-code><code>
+        <pre v-code><code>
 &lt;Calendar v-model="value" selectionMode="single || multiple || range" /&gt;
 
 </code></pre>
 
-            <h5>DateFormat</h5>
-            <p>Default date format is mm/dd/yy, to customize this use <i>dateFormat</i> property or define it at <nuxt-link to="/locale">PrimeVue Locale</nuxt-link> globally. Note that standalone property overrides the value in locale settings.</p>
+        <h5>DateFormat</h5>
+        <p>Default date format is mm/dd/yy, to customize this use <i>dateFormat</i> property or define it at <router-link to="/locale">PrimeVue Locale</router-link> globally. Note that standalone property overrides the value in locale settings.</p>
 
-            <pre v-code><code>
+        <pre v-code><code>
 &lt;Calendar v-model="value" dateFormat="dd.mm.yy" /&gt;
 
 </code></pre>
 
-            <p>Following options can be a part of the format.</p>
-            <ul>
-                <li>d - day of month (no leading zero)</li>
-                <li>dd - day of month (two digit)</li>
-                <li>o - day of the year (no leading zeros)</li>
-                <li>oo - day of the year (three digit)</li>
-                <li>D - day name short</li>
-                <li>DD - day name long</li>
-                <li>m - month of year (no leading zero)</li>
-                <li>mm - month of year (two digit)</li>
-                <li>M - month name short</li>
-                <li>MM - month name long</li>
-                <li>y - year (two digit)</li>
-                <li>yy - year (four digit)</li>
-                <li>@ - Unix timestamp (ms since 01/01/1970)</li>
-                <li>! - Windows ticks (100ns since 01/01/0001)</li>
-                <li>'...' - literal text</li>
-                <li>'' - single quote</li>
-                <li>anything else - literal text</li>
-            </ul>
+        <p>Following options can be a part of the format.</p>
+        <ul>
+            <li>d - day of month (no leading zero)</li>
+            <li>dd - day of month (two digit)</li>
+            <li>o - day of the year (no leading zeros)</li>
+            <li>oo - day of the year (three digit)</li>
+            <li>D - day name short</li>
+            <li>DD - day name long</li>
+            <li>m - month of year (no leading zero)</li>
+            <li>mm - month of year (two digit)</li>
+            <li>M - month name short</li>
+            <li>MM - month name long</li>
+            <li>y - year (two digit)</li>
+            <li>yy - year (four digit)</li>
+            <li>@ - Unix timestamp (ms since 01/01/1970)</li>
+            <li>! - Windows ticks (100ns since 01/01/0001)</li>
+            <li>'...' - literal text</li>
+            <li>'' - single quote</li>
+            <li>anything else - literal text</li>
+        </ul>
 
-            <h5>Time</h5>
-            <p>TimePicker is enabled with <i>showTime</i> property and 24 (default) or 12 hour mode is configured using <i>hourFormat</i> option. If you need to use the time picker as standalone, use the <i>timeOnly</i> property.</p>
-            <pre v-code><code>
+        <h5>Time</h5>
+        <p>TimePicker is enabled with <i>showTime</i> property and 24 (default) or 12 hour mode is configured using <i>hourFormat</i> option. If you need to use the time picker as standalone, use the <i>timeOnly</i> property.</p>
+        <pre v-code><code>
 &lt;Calendar v-model="value" :showTime="true" /&gt;
 &lt;Calendar v-model="value" :showTime="true" hourFormat="12" /&gt;
 &lt;Calendar v-model="value" :showTime="true" :timeOnly="true" /&gt;
 
 </code></pre>
 
-            <h5>Date Restriction</h5>
-            <p>To disable entering dates manually, set <i>manualInput</i> to false and to restrict selectable dates with the <i>minDate</i> and <i>maxDate</i> options.</p>
-            <pre v-code><code>
+        <h5>Date Restriction</h5>
+        <p>To disable entering dates manually, set <i>manualInput</i> to false and to restrict selectable dates with the <i>minDate</i> and <i>maxDate</i> options.</p>
+        <pre v-code><code>
 &lt;Calendar v-model="value" :minDate="minDateValue" maxDate="maxDateValue" /&gt;
 
 </code></pre>
 
-            <p>To disable specific dates or days, restrict selectable dates use <i>disabledDates</i> and/or <i>disabledDays</i> options.</p>
-            <pre v-code><code>
+        <p>To disable specific dates or days, restrict selectable dates use <i>disabledDates</i> and/or <i>disabledDays</i> options.</p>
+        <pre v-code><code>
 &lt;Calendar v-model="value" :disabledDates="invalidDates" :disabledDays="[0,6]" /&gt;
 
 </code></pre>
 
-            <h5>Button Bar</h5>
-            <p>Button bar displays today and clear buttons and enabled using <i>showButtonBar</i> property.</p>
-            <pre v-code><code>
+        <h5>Button Bar</h5>
+        <p>Button bar displays today and clear buttons and enabled using <i>showButtonBar</i> property.</p>
+        <pre v-code><code>
 &lt;Calendar v-model="value" :showButtonBar="true" /&gt;
 
 </code></pre>
 
-            <h5>Multiple Months</h5>
-            <p>Displaying multiple months is enabled by setting <i>numberOfMonths</i> property to a value greater than 1.</p>
-            <pre v-code><code>
+        <h5>Multiple Months</h5>
+        <p>Displaying multiple months is enabled by setting <i>numberOfMonths</i> property to a value greater than 1.</p>
+        <pre v-code><code>
 &lt;Calendar v-model="value" :numberOfMonths="3" /&gt;
 
 </code></pre>
 
-            <h5>Locale</h5>
-            <p>Locale for different languages and formats is defined globally, refer to the <nuxt-link to="/locale">PrimeVue Locale</nuxt-link> configuration for more information.</p>
+        <h5>Locale</h5>
+        <p>Locale for different languages and formats is defined globally, refer to the <router-link to="/locale">PrimeVue Locale</router-link> configuration for more information.</p>
 
-            <h5>Custom Content</h5>
-            <p>Calendar UI accepts custom content using header and footer templates.</p>
+        <h5>Custom Content</h5>
+        <p>Calendar UI accepts custom content using header and footer templates.</p>
 
-            <pre v-code><code>
+        <pre v-code><code>
 &lt;Calendar v-model="value"&gt;
     &lt;template #header&gt;Header Content&lt;/template&gt;
     &lt;template #footer&gt;Footer Content&lt;/template&gt;
@@ -130,12 +129,12 @@ export default {
 
 </code></pre>
 
-            <p>
-                In addition, cell contents can be templated using a template named "date". This is a handy feature to highlight specific dates. Note that the date property of the slot props passed to the template is not a date instance but a metadata
-                object to represent a Date with "day", "month" and "year" properties. Example below changes the background color of dates between 10th and 15th of each month.
-            </p>
+        <p>
+            In addition, cell contents can be templated using a template named "date". This is a handy feature to highlight specific dates. Note that the date property of the slot props passed to the template is not a date instance but a metadata
+            object to represent a Date with "day", "month" and "year" properties. Example below changes the background color of dates between 10th and 15th of each month.
+        </p>
 
-            <pre v-code><code><template v-pre>
+        <pre v-code><code><template v-pre>
 &lt;Calendar v-model="value"&gt;
     &lt;template #date="slotProps"&gt;
         &lt;strong v-if="slotProps.date.day &gt; 10 && slotProps.date.day &lt; 15" class="special-day"&gt;{{slotProps.date.day}}&lt;/strong&gt;
@@ -145,571 +144,595 @@ export default {
 </template>
 </code></pre>
 
-            <pre v-code.css><code>
+        <pre v-code.css><code>
 .special-day {
     text-decoration: line-through;
 }
 
 </code></pre>
 
-            <h5>Month Picker</h5>
-            <p>Month picker is used to select month and year only without the date, set <i>view</i> mode as "month" to activate month picker.</p>
-            <pre v-code><code>
+        <h5>Month Picker</h5>
+        <p>Month picker is used to select month and year only without the date, set <i>view</i> mode as "month" to activate month picker.</p>
+        <pre v-code><code>
 &lt;Calendar v-model="value" view="month" dateFormat="mm/yy" /&gt;
 
 </code></pre>
 
-            <h5>Year Picker</h5>
-            <p>Similar to the month picker, year picker can be used to select years only. Set <i>view</i> to "year" to display the year picker.</p>
-            <pre v-code><code>
+        <h5>Year Picker</h5>
+        <p>Similar to the month picker, year picker can be used to select years only. Set <i>view</i> to "year" to display the year picker.</p>
+        <pre v-code><code>
 &lt;Calendar v-model="value" view="year" dateFormat="yy" /&gt;
 
 </code></pre>
 
-            <h5>Touch UI</h5>
-            <p>Touch UI mode displays the calendar overlay at the center of the screen as optimized for touch devices.</p>
-            <pre v-code><code>
+        <h5>Touch UI</h5>
+        <p>Touch UI mode displays the calendar overlay at the center of the screen as optimized for touch devices.</p>
+        <pre v-code><code>
 &lt;Calendar v-model="value" :touchUI="true" /&gt;
 
 </code></pre>
 
-            <h5>Properties</h5>
-            <p>Any property such as name and placeholder are passed to the underlying input element. Following are the additional properties to configure the component.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>modelValue</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Value of the component.</td>
-                        </tr>
-                        <tr>
-                            <td>selectionMode</td>
-                            <td>string</td>
-                            <td>single</td>
-                            <td>Defines the quantity of the selection, valid values are "single", "multiple" and "range".</td>
-                        </tr>
-                        <tr>
-                            <td>dateFormat</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Format of the date. Defaults to PrimeVue <nuxt-link to="/locale">Locale</nuxt-link> configuration.</td>
-                        </tr>
-                        <tr>
-                            <td>inline</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When enabled, displays the calendar as inline instead of an overlay.</td>
-                        </tr>
-                        <tr>
-                            <td>disabled</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When specified, disables the component.</td>
-                        </tr>
-                        <tr>
-                            <td>readonly</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When present, it specifies that an input field is read-only.</td>
-                        </tr>
-                        <tr>
-                            <td>showOtherMonths</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether to display dates in other months (non-selectable) at the start or end of the current month. To make these days selectable use the selectOtherMonths option.</td>
-                        </tr>
-                        <tr>
-                            <td>selectOtherMonths</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Whether days in other months shown before or after the current month are selectable. This only applies if the showOtherMonths option is set to true.</td>
-                        </tr>
-                        <tr>
-                            <td>showIcon</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When enabled, displays a button with icon next to input.</td>
-                        </tr>
-                        <tr>
-                            <td>icon</td>
-                            <td>string</td>
-                            <td>pi pi-calendar</td>
-                            <td>Icon of the calendar button.</td>
-                        </tr>
-                        <tr>
-                            <td>numberOfMonths</td>
-                            <td>number</td>
-                            <td>1</td>
-                            <td>Number of months to display.</td>
-                        </tr>
-                        <tr>
-                            <td>responsiveOptions</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>An array of options for responsive design.</td>
-                        </tr>
-                        <tr>
-                            <td>view</td>
-                            <td>string</td>
-                            <td>date</td>
-                            <td>Type of view to display, valid values are "date", "month" and "year".</td>
-                        </tr>
-                        <tr>
-                            <td>touchUI</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When enabled, calendar overlay is displayed as optimized for touch devices.</td>
-                        </tr>
-                        <tr>
-                            <td style="text-decoration: line-through">monthNavigator</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>
-                                Whether the month should be rendered as a dropdown instead of text. <br />
-                                <br />
-                                <b> Deprecated: </b> Navigator is always on
-                            </td>
-                        </tr>
-                        <tr>
-                            <td style="text-decoration: line-through">yearNavigator</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>
-                                Whether the year should be rendered as a dropdown instead of text. <br />
-                                <br />
-                                <b> Deprecated: </b> Navigator is always on.
-                            </td>
-                        </tr>
-                        <tr>
-                            <td style="text-decoration: line-through">yearRange</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>
-                                The range of years displayed in the year drop-down in (nnnn:nnnn) format such as (2000:2020). <br /><br />
-                                <b> Deprecated: </b> Years are based on decades by default.
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>minDate</td>
-                            <td>Date</td>
-                            <td>null</td>
-                            <td>The minimum selectable date.</td>
-                        </tr>
-                        <tr>
-                            <td>maxDate</td>
-                            <td>Date</td>
-                            <td>null</td>
-                            <td>The maximum selectable date.</td>
-                        </tr>
-                        <tr>
-                            <td>disabledDates</td>
-                            <td>array;</td>
-                            <td>null</td>
-                            <td>Array with dates to disable.</td>
-                        </tr>
-                        <tr>
-                            <td>disabledDays</td>
-                            <td>array</td>
-                            <td>null</td>
-                            <td>Array with disabled weekday numbers.</td>
-                        </tr>
-                        <tr>
-                            <td>maxDateCount</td>
-                            <td>number</td>
-                            <td>null</td>
-                            <td>Maximum number of selectable dates in multiple mode.</td>
-                        </tr>
-                        <tr>
-                            <td>showOnFocus</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>When disabled, datepicker will not be visible with input focus.</td>
-                        </tr>
-                        <tr>
-                            <td>autoZIndex</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether to automatically manage layering.</td>
-                        </tr>
-                        <tr>
-                            <td>baseZIndex</td>
-                            <td>number</td>
-                            <td>0</td>
-                            <td>Base zIndex value to use in layering.</td>
-                        </tr>
-                        <tr>
-                            <td>showButtonBar</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Whether to display today and clear buttons at the footer</td>
-                        </tr>
-                        <tr>
-                            <td>shortYearCutoff</td>
-                            <td>string</td>
-                            <td>+10</td>
-                            <td>The cutoff year for determining the century for a date.</td>
-                        </tr>
-                        <tr>
-                            <td>showTime</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Whether to display timepicker.</td>
-                        </tr>
-                        <tr>
-                            <td>timeOnly</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Whether to display timepicker only.</td>
-                        </tr>
-                        <tr>
-                            <td>hourFormat</td>
-                            <td>string</td>
-                            <td>24</td>
-                            <td>Specifies 12 or 24 hour format.</td>
-                        </tr>
-                        <tr>
-                            <td>stepHour</td>
-                            <td>number</td>
-                            <td>1</td>
-                            <td>Hours to change per step.</td>
-                        </tr>
-                        <tr>
-                            <td>stepMinute</td>
-                            <td>number</td>
-                            <td>1</td>
-                            <td>Minutes to change per step.</td>
-                        </tr>
-                        <tr>
-                            <td>stepSecond</td>
-                            <td>number</td>
-                            <td>1</td>
-                            <td>Seconds to change per step.</td>
-                        </tr>
-                        <tr>
-                            <td>showSeconds</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Whether to show the seconds in time picker.</td>
-                        </tr>
-                        <tr>
-                            <td>hideOnDateTimeSelect</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Whether to hide the overlay on date selection when showTime is enabled.</td>
-                        </tr>
-                        <tr>
-                            <td>hideOnRangeSelection</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Whether to hide the overlay on date selection is completed when selectionMode is range.</td>
-                        </tr>
-                        <tr>
-                            <td>timeSeparator</td>
-                            <td>string</td>
-                            <td>:</td>
-                            <td>Separator of time selector.</td>
-                        </tr>
-                        <tr>
-                            <td>showWeek</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When enabled, calendar will show week numbers.</td>
-                        </tr>
-                        <tr>
-                            <td>manualInput</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Wheter to allow prevents entering the date manually via typing.</td>
-                        </tr>
-                        <tr>
-                            <td>appendTo</td>
-                            <td>string</td>
-                            <td>body</td>
-                            <td>A valid query selector or an HTMLElement to specify where the overlay gets attached. Special keywords are "body" for document body and "self" for the element itself.</td>
-                        </tr>
-                        <tr>
-                            <td>disabled</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When present, it specifies that the element should be disabled.</td>
-                        </tr>
-                        <tr>
-                            <td>readonly</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When present, it specifies that an input field is read-only.</td>
-                        </tr>
-                        <tr>
-                            <td>placeholder</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Default text to display when no option is selected.</td>
-                        </tr>
-                        <tr>
-                            <td>id</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Unique identifier of the element.</td>
-                        </tr>
-                        <tr>
-                            <td>inputId</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the component input field.</td>
-                        </tr>
-                        <tr>
-                            <td>inputStyle</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Inline style of the input field.</td>
-                        </tr>
-                        <tr>
-                            <td>inputClass</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the input field.</td>
-                        </tr>
-                        <tr>
-                            <td>inputProps</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.</td>
-                        </tr>
-                        <tr>
-                            <td>panelClass</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the overlay panel.</td>
-                        </tr>
-                        <tr>
-                            <td>panelStyle</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Inline style of the overlay panel.</td>
-                        </tr>
-                        <tr>
-                            <td>panelProps</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Uses to pass all properties of the HTMLDivElement to the overlay panel inside the component.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <p>Any property such as name and placeholder are passed to the underlying input element. Following are the additional properties to configure the component.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>modelValue</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Value of the component.</td>
+                    </tr>
+                    <tr>
+                        <td>selectionMode</td>
+                        <td>string</td>
+                        <td>single</td>
+                        <td>Defines the quantity of the selection, valid values are "single", "multiple" and "range".</td>
+                    </tr>
+                    <tr>
+                        <td>dateFormat</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Format of the date. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td>
+                    </tr>
+                    <tr>
+                        <td>inline</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When enabled, displays the calendar as inline instead of an overlay.</td>
+                    </tr>
+                    <tr>
+                        <td>disabled</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When specified, disables the component.</td>
+                    </tr>
+                    <tr>
+                        <td>readonly</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When present, it specifies that an input field is read-only.</td>
+                    </tr>
+                    <tr>
+                        <td>showOtherMonths</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Whether to display dates in other months (non-selectable) at the start or end of the current month. To make these days selectable use the selectOtherMonths option.</td>
+                    </tr>
+                    <tr>
+                        <td>selectOtherMonths</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Whether days in other months shown before or after the current month are selectable. This only applies if the showOtherMonths option is set to true.</td>
+                    </tr>
+                    <tr>
+                        <td>showIcon</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When enabled, displays a button with icon next to input.</td>
+                    </tr>
+                    <tr>
+                        <td>icon</td>
+                        <td>string</td>
+                        <td>pi pi-calendar</td>
+                        <td>Icon of the calendar button.</td>
+                    </tr>
+                    <tr>
+                        <td>previousIcon</td>
+                        <td>string</td>
+                        <td>pi pi-chevron-left</td>
+                        <td>Icon to show in the previous button.</td>
+                    </tr>
+                    <tr>
+                        <td>nextIcon</td>
+                        <td>string</td>
+                        <td>pi pi-chevron-right</td>
+                        <td>Icon to show in the next button.</td>
+                    </tr>
+                    <tr>
+                        <td>incrementIcon</td>
+                        <td>string</td>
+                        <td>pi pi-chevron-up</td>
+                        <td>Icon to show in each of the increment buttons.</td>
+                    </tr>
+                    <tr>
+                        <td>decrementIcon</td>
+                        <td>string</td>
+                        <td>pi pi-chevron-down</td>
+                        <td>Icon to show in each of the decrement buttons.</td>
+                    </tr>
+                    <tr>
+                        <td>numberOfMonths</td>
+                        <td>number</td>
+                        <td>1</td>
+                        <td>Number of months to display.</td>
+                    </tr>
+                    <tr>
+                        <td>responsiveOptions</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>An array of options for responsive design.</td>
+                    </tr>
+                    <tr>
+                        <td>view</td>
+                        <td>string</td>
+                        <td>date</td>
+                        <td>Type of view to display, valid values are "date", "month" and "year".</td>
+                    </tr>
+                    <tr>
+                        <td>touchUI</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When enabled, calendar overlay is displayed as optimized for touch devices.</td>
+                    </tr>
+                    <tr>
+                        <td style="text-decoration: line-through">monthNavigator</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>
+                            Whether the month should be rendered as a dropdown instead of text. <br />
+                            <br />
+                            <b> Deprecated: </b> Navigator is always on
+                        </td>
+                    </tr>
+                    <tr>
+                        <td style="text-decoration: line-through">yearNavigator</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>
+                            Whether the year should be rendered as a dropdown instead of text. <br />
+                            <br />
+                            <b> Deprecated: </b> Navigator is always on.
+                        </td>
+                    </tr>
+                    <tr>
+                        <td style="text-decoration: line-through">yearRange</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>
+                            The range of years displayed in the year drop-down in (nnnn:nnnn) format such as (2000:2020). <br /><br />
+                            <b> Deprecated: </b> Years are based on decades by default.
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>minDate</td>
+                        <td>Date</td>
+                        <td>null</td>
+                        <td>The minimum selectable date.</td>
+                    </tr>
+                    <tr>
+                        <td>maxDate</td>
+                        <td>Date</td>
+                        <td>null</td>
+                        <td>The maximum selectable date.</td>
+                    </tr>
+                    <tr>
+                        <td>disabledDates</td>
+                        <td>array;</td>
+                        <td>null</td>
+                        <td>Array with dates to disable.</td>
+                    </tr>
+                    <tr>
+                        <td>disabledDays</td>
+                        <td>array</td>
+                        <td>null</td>
+                        <td>Array with disabled weekday numbers.</td>
+                    </tr>
+                    <tr>
+                        <td>maxDateCount</td>
+                        <td>number</td>
+                        <td>null</td>
+                        <td>Maximum number of selectable dates in multiple mode.</td>
+                    </tr>
+                    <tr>
+                        <td>showOnFocus</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>When disabled, datepicker will not be visible with input focus.</td>
+                    </tr>
+                    <tr>
+                        <td>autoZIndex</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Whether to automatically manage layering.</td>
+                    </tr>
+                    <tr>
+                        <td>baseZIndex</td>
+                        <td>number</td>
+                        <td>0</td>
+                        <td>Base zIndex value to use in layering.</td>
+                    </tr>
+                    <tr>
+                        <td>showButtonBar</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Whether to display today and clear buttons at the footer</td>
+                    </tr>
+                    <tr>
+                        <td>shortYearCutoff</td>
+                        <td>string</td>
+                        <td>+10</td>
+                        <td>The cutoff year for determining the century for a date.</td>
+                    </tr>
+                    <tr>
+                        <td>showTime</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Whether to display timepicker.</td>
+                    </tr>
+                    <tr>
+                        <td>timeOnly</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Whether to display timepicker only.</td>
+                    </tr>
+                    <tr>
+                        <td>hourFormat</td>
+                        <td>string</td>
+                        <td>24</td>
+                        <td>Specifies 12 or 24 hour format.</td>
+                    </tr>
+                    <tr>
+                        <td>stepHour</td>
+                        <td>number</td>
+                        <td>1</td>
+                        <td>Hours to change per step.</td>
+                    </tr>
+                    <tr>
+                        <td>stepMinute</td>
+                        <td>number</td>
+                        <td>1</td>
+                        <td>Minutes to change per step.</td>
+                    </tr>
+                    <tr>
+                        <td>stepSecond</td>
+                        <td>number</td>
+                        <td>1</td>
+                        <td>Seconds to change per step.</td>
+                    </tr>
+                    <tr>
+                        <td>showSeconds</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Whether to show the seconds in time picker.</td>
+                    </tr>
+                    <tr>
+                        <td>hideOnDateTimeSelect</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Whether to hide the overlay on date selection when showTime is enabled.</td>
+                    </tr>
+                    <tr>
+                        <td>hideOnRangeSelection</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Whether to hide the overlay on date selection is completed when selectionMode is range.</td>
+                    </tr>
+                    <tr>
+                        <td>timeSeparator</td>
+                        <td>string</td>
+                        <td>:</td>
+                        <td>Separator of time selector.</td>
+                    </tr>
+                    <tr>
+                        <td>showWeek</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When enabled, calendar will show week numbers.</td>
+                    </tr>
+                    <tr>
+                        <td>manualInput</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Wheter to allow prevents entering the date manually via typing.</td>
+                    </tr>
+                    <tr>
+                        <td>appendTo</td>
+                        <td>string</td>
+                        <td>body</td>
+                        <td>A valid query selector or an HTMLElement to specify where the overlay gets attached. Special keywords are "body" for document body and "self" for the element itself.</td>
+                    </tr>
+                    <tr>
+                        <td>disabled</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When present, it specifies that the element should be disabled.</td>
+                    </tr>
+                    <tr>
+                        <td>readonly</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When present, it specifies that an input field is read-only.</td>
+                    </tr>
+                    <tr>
+                        <td>placeholder</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Default text to display when no option is selected.</td>
+                    </tr>
+                    <tr>
+                        <td>id</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Unique identifier of the element.</td>
+                    </tr>
+                    <tr>
+                        <td>inputId</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the component input field.</td>
+                    </tr>
+                    <tr>
+                        <td>inputStyle</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Inline style of the input field.</td>
+                    </tr>
+                    <tr>
+                        <td>inputClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the input field.</td>
+                    </tr>
+                    <tr>
+                        <td>inputProps</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.</td>
+                    </tr>
+                    <tr>
+                        <td>panelClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the overlay panel.</td>
+                    </tr>
+                    <tr>
+                        <td>panelStyle</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Inline style of the overlay panel.</td>
+                    </tr>
+                    <tr>
+                        <td>panelProps</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Uses to pass all properties of the HTMLDivElement to the overlay panel inside the component.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Events</h5>
-            <p>Any valid event such as focus, blur and input are passed to the underlying input element. Following are the additional events to configure the component.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>input</td>
-                            <td>event: Input Event</td>
-                            <td>Callback to invoke when input field is being typed.</td>
-                        </tr>
-                        <tr>
-                            <td>date-select</td>
-                            <td>value: Selected value</td>
-                            <td>Callback to invoke when a date is selected.</td>
-                        </tr>
-                        <tr>
-                            <td>show</td>
-                            <td>-</td>
-                            <td>Callback to invoke when datepicker panel is shown.</td>
-                        </tr>
-                        <tr>
-                            <td>hide</td>
-                            <td>-</td>
-                            <td>Callback to invoke when datepicker panel is hidden.</td>
-                        </tr>
-                        <tr>
-                            <td>today-click</td>
-                            <td>date: Today as a date instance</td>
-                            <td>Callback to invoke when today button is clicked.</td>
-                        </tr>
-                        <tr>
-                            <td>clear-click</td>
-                            <td>event: Click event</td>
-                            <td>Callback to invoke when clear button is clicked.</td>
-                        </tr>
-                        <tr>
-                            <td>month-change</td>
-                            <td>
-                                event.month: New month <br />
-                                event.year: New year
-                            </td>
-                            <td>Callback to invoke when a month is changed using the navigators.</td>
-                        </tr>
-                        <tr>
-                            <td>year-change</td>
-                            <td>
-                                event.month: New month <br />
-                                event.year: New year
-                            </td>
-                            <td>Callback to invoke when a year is changed using the navigators.</td>
-                        </tr>
-                        <tr>
-                            <td>focus</td>
-                            <td>event: Focus event</td>
-                            <td>Callback to invoke on focus of input field.</td>
-                        </tr>
-                        <tr>
-                            <td>blur</td>
-                            <td>
-                                event.originalEvent: Blur event <br />
-                                event.value: Input value
-                            </td>
-                            <td>Callback to invoke on blur of input field.</td>
-                        </tr>
-                        <tr>
-                            <td>keydown</td>
-                            <td>event: Keyboard event</td>
-                            <td>Callback to invoke when a key is pressed.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Events</h5>
+        <p>Any valid event such as focus, blur and input are passed to the underlying input element. Following are the additional events to configure the component.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>input</td>
+                        <td>event: Input Event</td>
+                        <td>Callback to invoke when input field is being typed.</td>
+                    </tr>
+                    <tr>
+                        <td>date-select</td>
+                        <td>value: Selected value</td>
+                        <td>Callback to invoke when a date is selected.</td>
+                    </tr>
+                    <tr>
+                        <td>show</td>
+                        <td>-</td>
+                        <td>Callback to invoke when datepicker panel is shown.</td>
+                    </tr>
+                    <tr>
+                        <td>hide</td>
+                        <td>-</td>
+                        <td>Callback to invoke when datepicker panel is hidden.</td>
+                    </tr>
+                    <tr>
+                        <td>today-click</td>
+                        <td>date: Today as a date instance</td>
+                        <td>Callback to invoke when today button is clicked.</td>
+                    </tr>
+                    <tr>
+                        <td>clear-click</td>
+                        <td>event: Click event</td>
+                        <td>Callback to invoke when clear button is clicked.</td>
+                    </tr>
+                    <tr>
+                        <td>month-change</td>
+                        <td>
+                            event.month: New month <br />
+                            event.year: New year
+                        </td>
+                        <td>Callback to invoke when a month is changed using the navigators.</td>
+                    </tr>
+                    <tr>
+                        <td>year-change</td>
+                        <td>
+                            event.month: New month <br />
+                            event.year: New year
+                        </td>
+                        <td>Callback to invoke when a year is changed using the navigators.</td>
+                    </tr>
+                    <tr>
+                        <td>focus</td>
+                        <td>event: Focus event</td>
+                        <td>Callback to invoke on focus of input field.</td>
+                    </tr>
+                    <tr>
+                        <td>blur</td>
+                        <td>
+                            event.originalEvent: Blur event <br />
+                            event.value: Input value
+                        </td>
+                        <td>Callback to invoke on blur of input field.</td>
+                    </tr>
+                    <tr>
+                        <td>keydown</td>
+                        <td>event: Keyboard event</td>
+                        <td>Callback to invoke when a key is pressed.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Slots</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>header</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>footer</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>date</td>
-                            <td>date: Value of the component</td>
-                        </tr>
-                        <tr>
-                            <td>decade</td>
-                            <td>years: An array containing the start and and year of a decade to display at header of the year picker</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Slots</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>header</td>
+                        <td>-</td>
+                    </tr>
+                    <tr>
+                        <td>footer</td>
+                        <td>-</td>
+                    </tr>
+                    <tr>
+                        <td>date</td>
+                        <td>date: Value of the component</td>
+                    </tr>
+                    <tr>
+                        <td>decade</td>
+                        <td>years: An array containing the start and and year of a decade to display at header of the year picker</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-calendar</td>
-                            <td>Main container element</td>
-                        </tr>
-                        <tr>
-                            <td>p-calendar-w-btn</td>
-                            <td>Main container element when button is enabled.</td>
-                        </tr>
-                        <tr>
-                            <td>p-calendar-timeonly</td>
-                            <td>Main container element in time picker only mode.</td>
-                        </tr>
-                        <tr>
-                            <td>p-inputtext</td>
-                            <td>Input element</td>
-                        </tr>
-                        <tr>
-                            <td>p-datepicker</td>
-                            <td>Datepicker element</td>
-                        </tr>
-                        <tr>
-                            <td>p-datepicker-inline</td>
-                            <td>Datepicker element in inline mode</td>
-                        </tr>
-                        <tr>
-                            <td>p-monthpicker</td>
-                            <td>Datepicker element in month view.</td>
-                        </tr>
-                        <tr>
-                            <td>p-monthpicker-month</td>
-                            <td>Month cell in month view mode.</td>
-                        </tr>
-                        <tr>
-                            <td>p-datepicker-touch-ui</td>
-                            <td>Datepicker element in touch ui mode.</td>
-                        </tr>
-                        <tr>
-                            <td>p-datepicker-calendar</td>
-                            <td>Table containing dates of a month.</td>
-                        </tr>
-                        <tr>
-                            <td>p-datepicker-current-day</td>
-                            <td>Cell of selected date.</td>
-                        </tr>
-                        <tr>
-                            <td>p-datepicker-today</td>
-                            <td>Cell of today's date.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-calendar</td>
+                        <td>Main container element</td>
+                    </tr>
+                    <tr>
+                        <td>p-calendar-w-btn</td>
+                        <td>Main container element when button is enabled.</td>
+                    </tr>
+                    <tr>
+                        <td>p-calendar-timeonly</td>
+                        <td>Main container element in time picker only mode.</td>
+                    </tr>
+                    <tr>
+                        <td>p-inputtext</td>
+                        <td>Input element</td>
+                    </tr>
+                    <tr>
+                        <td>p-datepicker</td>
+                        <td>Datepicker element</td>
+                    </tr>
+                    <tr>
+                        <td>p-datepicker-inline</td>
+                        <td>Datepicker element in inline mode</td>
+                    </tr>
+                    <tr>
+                        <td>p-monthpicker</td>
+                        <td>Datepicker element in month view.</td>
+                    </tr>
+                    <tr>
+                        <td>p-monthpicker-month</td>
+                        <td>Month cell in month view mode.</td>
+                    </tr>
+                    <tr>
+                        <td>p-datepicker-touch-ui</td>
+                        <td>Datepicker element in touch ui mode.</td>
+                    </tr>
+                    <tr>
+                        <td>p-datepicker-calendar</td>
+                        <td>Table containing dates of a month.</td>
+                    </tr>
+                    <tr>
+                        <td>p-datepicker-current-day</td>
+                        <td>Cell of selected date.</td>
+                    </tr>
+                    <tr>
+                        <td>p-datepicker-today</td>
+                        <td>Cell of today's date.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Accessibility</h5>
-            <h6>Screen Reader</h6>
-            <p>
-                Value to describe the component can either be provided via <i>label</i> tag combined with <i>inputId</i> prop or using <i>aria-labelledby</i>, <i>aria-label</i> props. The input element has <i>combobox</i> role in addition to
-                <i>aria-autocomplete</i> as "none", <i>aria-haspopup</i> as "dialog" and <i>aria-expanded</i> attributes. The relation between the input and the popup is created with <i>aria-controls</i> attribute that refers to the id of the popup.
-            </p>
-            <p>
-                The optional calendar button requires includes <i>aria-haspopup</i>, <i>aria-expanded</i> for states along with <i>aria-controls</i> to define the relation between the popup and the button. The value to read is retrieved from the
-                <i>chooseDate</i> key of the aria property from the <nuxt-link to="/locale">locale</nuxt-link> API. This label is also used for the <i>aria-label</i> of the popup as well. When there is a value selected, it is formatted and appended
-                to the label to be able to notify users about the current value.
-            </p>
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>
+            Value to describe the component can either be provided via <i>label</i> tag combined with <i>inputId</i> prop or using <i>aria-labelledby</i>, <i>aria-label</i> props. The input element has <i>combobox</i> role in addition to
+            <i>aria-autocomplete</i> as "none", <i>aria-haspopup</i> as "dialog" and <i>aria-expanded</i> attributes. The relation between the input and the popup is created with <i>aria-controls</i> attribute that refers to the id of the popup.
+        </p>
+        <p>
+            The optional calendar button requires includes <i>aria-haspopup</i>, <i>aria-expanded</i> for states along with <i>aria-controls</i> to define the relation between the popup and the button. The value to read is retrieved from the
+            <i>chooseDate</i> key of the aria property from the <router-link to="/locale">locale</router-link> API. This label is also used for the <i>aria-label</i> of the popup as well. When there is a value selected, it is formatted and appended
+            to the label to be able to notify users about the current value.
+        </p>
 
-            <p>
-                Popup has a <i>dialog</i> role along with <i>aria-modal</i> and <i>aria-label</i>. The navigation buttons at the header has an <i>aria-label</i> retrieved from the <i>prevYear</i>, <i>nextYear</i>, <i>prevMonth</i>, <i>nextMonth</i>,
-                <i>prevDecade</i> and <i>nextDecade</i> keys of the locale aria API. Similarly month picker button uses the <i>chooseMonth</i> and year picker button uses the <i>chooseYear</i> keys.
-            </p>
+        <p>
+            Popup has a <i>dialog</i> role along with <i>aria-modal</i> and <i>aria-label</i>. The navigation buttons at the header has an <i>aria-label</i> retrieved from the <i>prevYear</i>, <i>nextYear</i>, <i>prevMonth</i>, <i>nextMonth</i>,
+            <i>prevDecade</i> and <i>nextDecade</i> keys of the locale aria API. Similarly month picker button uses the <i>chooseMonth</i> and year picker button uses the <i>chooseYear</i> keys.
+        </p>
 
-            <p>
-                Main date table uses <i>grid</i> role that contains th elements with <i>col</i> as the scope along with <i>abbr</i> tag resolving to the full name of the month. Each date cell has an <i>aria-label</i> referring to the full date value.
-                Buttons at the footer utilize their readable labels as <i>aria-label</i> as well. Selected date also receives the <i>aria-selected</i> attribute.
-            </p>
+        <p>
+            Main date table uses <i>grid</i> role that contains th elements with <i>col</i> as the scope along with <i>abbr</i> tag resolving to the full name of the month. Each date cell has an <i>aria-label</i> referring to the full date value.
+            Buttons at the footer utilize their readable labels as <i>aria-label</i> as well. Selected date also receives the <i>aria-selected</i> attribute.
+        </p>
 
-            <p>
-                Timepicker spinner buttons get their labels for <i>aria-label</i> from the aria locale API using the <i>prevHour</i>, <i>nextHour</i>, <i>prevMinute</i>, <i>nextMinute</i>, <i>prevSecond</i>, <i>nextSecond</i>, <i>am</i> and
-                <i>pm</i> keys.
-            </p>
+        <p>
+            Timepicker spinner buttons get their labels for <i>aria-label</i> from the aria locale API using the <i>prevHour</i>, <i>nextHour</i>, <i>prevMinute</i>, <i>nextMinute</i>, <i>prevSecond</i>, <i>nextSecond</i>, <i>am</i> and
+            <i>pm</i> keys.
+        </p>
 
-            <p>Calendar also includes a hidden section that is only available to screen readers with <i>aria-live</i> as "polite". This element is updated when the selected date changes to instruct the user about the current date selected.</p>
+        <p>Calendar also includes a hidden section that is only available to screen readers with <i>aria-live</i> as "polite". This element is updated when the selected date changes to instruct the user about the current date selected.</p>
 
-            <pre v-code><code>
+        <pre v-code><code>
 &lt;label for="date1"&gt;Date&lt;/label&gt;
 &lt;Calendar inputId="date1" /&gt;
 
@@ -720,164 +743,163 @@ export default {
 
 </code></pre>
 
-            <h6>Choose Date Button Keyboard Support</h6>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Key</th>
-                            <th>Function</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td><i>space</i></td>
-                            <td>Opens popup and moves focus to the selected date, if there is none focuses on today.</td>
-                        </tr>
-                        <tr>
-                            <td><i>enter</i></td>
-                            <td>Opens popup and moves focus to the selected date, if there is none focuses on today.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h6>Choose Date Button Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>space</i></td>
+                        <td>Opens popup and moves focus to the selected date, if there is none focuses on today.</td>
+                    </tr>
+                    <tr>
+                        <td><i>enter</i></td>
+                        <td>Opens popup and moves focus to the selected date, if there is none focuses on today.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h6>Popup Keyboard Support</h6>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Key</th>
-                            <th>Function</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td><i>escape</i></td>
-                            <td>Closes the popup and moves focus to the input element.</td>
-                        </tr>
-                        <tr>
-                            <td><i>tab</i></td>
-                            <td>Moves focus to the next focusable element within the popup.</td>
-                        </tr>
-                        <tr>
-                            <td><i>shift</i> + <i>tab</i></td>
-                            <td>Moves focus to the next focusable element within the popup.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h6>Popup Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>escape</i></td>
+                        <td>Closes the popup and moves focus to the input element.</td>
+                    </tr>
+                    <tr>
+                        <td><i>tab</i></td>
+                        <td>Moves focus to the next focusable element within the popup.</td>
+                    </tr>
+                    <tr>
+                        <td><i>shift</i> + <i>tab</i></td>
+                        <td>Moves focus to the next focusable element within the popup.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h6>Header Buttons Keyboard Support</h6>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Key</th>
-                            <th>Function</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td><i>enter</i></td>
-                            <td>Triggers the button action.</td>
-                        </tr>
-                        <tr>
-                            <td><i>space</i></td>
-                            <td>Triggers the button action.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h6>Header Buttons Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>enter</i></td>
+                        <td>Triggers the button action.</td>
+                    </tr>
+                    <tr>
+                        <td><i>space</i></td>
+                        <td>Triggers the button action.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h6>Date Grid Keyboard Support</h6>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Key</th>
-                            <th>Function</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td><i>enter</i></td>
-                            <td>Selects the date, closes the popup and moves focus to the input element.</td>
-                        </tr>
-                        <tr>
-                            <td><i>space</i></td>
-                            <td>Selects the date, closes the popup and moves focus to the input element.</td>
-                        </tr>
-                        <tr>
-                            <td><i>up arrow</i></td>
-                            <td>Moves focus to the same day of the previous week.</td>
-                        </tr>
-                        <tr>
-                            <td><i>down arrow</i></td>
-                            <td>Moves focus to the same day of the next week.</td>
-                        </tr>
-                        <tr>
-                            <td><i>right arrow</i></td>
-                            <td>Moves focus to the next day.</td>
-                        </tr>
-                        <tr>
-                            <td><i>left arrow</i></td>
-                            <td>Moves focus to the previous day.</td>
-                        </tr>
-                        <tr>
-                            <td><i>home</i></td>
-                            <td>Moves focus to the first day of the current week.</td>
-                        </tr>
-                        <tr>
-                            <td><i>end</i></td>
-                            <td>Moves focus to the last day of the current week.</td>
-                        </tr>
-                        <tr>
-                            <td><i>page up</i></td>
-                            <td>Changes the date to previous month in date picker mode. Moves to previous year in month picker mode and previous decade in year picker.</td>
-                        </tr>
-                        <tr>
-                            <td><i>shift</i> + <i>page up</i></td>
-                            <td>Changes the date to previous year in date picker mode. Has no effect in month or year picker</td>
-                        </tr>
-                        <tr>
-                            <td><i>page down</i></td>
-                            <td>Changes the date to next month in date picker mode. Moves to next year in month picker mode and next decade in year picker.</td>
-                        </tr>
-                        <tr>
-                            <td><i>shift</i> + <i>page down</i></td>
-                            <td>Changes the date to next year in date picker mode. Has no effect in month or year picker</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h6>Date Grid Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>enter</i></td>
+                        <td>Selects the date, closes the popup and moves focus to the input element.</td>
+                    </tr>
+                    <tr>
+                        <td><i>space</i></td>
+                        <td>Selects the date, closes the popup and moves focus to the input element.</td>
+                    </tr>
+                    <tr>
+                        <td><i>up arrow</i></td>
+                        <td>Moves focus to the same day of the previous week.</td>
+                    </tr>
+                    <tr>
+                        <td><i>down arrow</i></td>
+                        <td>Moves focus to the same day of the next week.</td>
+                    </tr>
+                    <tr>
+                        <td><i>right arrow</i></td>
+                        <td>Moves focus to the next day.</td>
+                    </tr>
+                    <tr>
+                        <td><i>left arrow</i></td>
+                        <td>Moves focus to the previous day.</td>
+                    </tr>
+                    <tr>
+                        <td><i>home</i></td>
+                        <td>Moves focus to the first day of the current week.</td>
+                    </tr>
+                    <tr>
+                        <td><i>end</i></td>
+                        <td>Moves focus to the last day of the current week.</td>
+                    </tr>
+                    <tr>
+                        <td><i>page up</i></td>
+                        <td>Changes the date to previous month in date picker mode. Moves to previous year in month picker mode and previous decade in year picker.</td>
+                    </tr>
+                    <tr>
+                        <td><i>shift</i> + <i>page up</i></td>
+                        <td>Changes the date to previous year in date picker mode. Has no effect in month or year picker</td>
+                    </tr>
+                    <tr>
+                        <td><i>page down</i></td>
+                        <td>Changes the date to next month in date picker mode. Moves to next year in month picker mode and next decade in year picker.</td>
+                    </tr>
+                    <tr>
+                        <td><i>shift</i> + <i>page down</i></td>
+                        <td>Changes the date to next year in date picker mode. Has no effect in month or year picker</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h6>Footer Buttons Keyboard Support</h6>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Key</th>
-                            <th>Function</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td><i>enter</i></td>
-                            <td>Triggers the button action.</td>
-                        </tr>
-                        <tr>
-                            <td><i>space</i></td>
-                            <td>Triggers the button action.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h6>Footer Buttons Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>enter</i></td>
+                        <td>Triggers the button action.</td>
+                    </tr>
+                    <tr>
+                        <td><i>space</i></td>
+                        <td>Triggers the button action.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc>
-    </ClientOnly>
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
diff --git a/pages/calendar/index.vue b/pages/calendar/index.vue
index 8e32a935b..05c433eaa 100755
--- a/pages/calendar/index.vue
+++ b/pages/calendar/index.vue
@@ -14,59 +14,59 @@
                 <div class="p-fluid grid formgrid">
                     <div class="field col-12 md:col-4">
                         <label for="basic">Basic</label>
-                        <Calendar inputId="basic" v-model="date1" autocomplete="off" />
+                        <Calendar v-model="date1" inputId="basic" autocomplete="off" />
                     </div>
                     <div class="field col-12 md:col-4">
                         <label for="dateformat">DateFormat</label>
-                        <Calendar inputId="dateformat" v-model="date2" dateFormat="mm-dd-yy" />
+                        <Calendar v-model="date2" inputId="dateformat" dateFormat="mm-dd-yy" />
                     </div>
                     <div class="field col-12 md:col-4">
                         <label for="icon">Icon</label>
-                        <Calendar inputId="icon" v-model="date3" :showIcon="true" />
+                        <Calendar v-model="date3" inputId="icon" :showIcon="true" />
                     </div>
                     <div class="field col-12 md:col-4">
                         <label for="minmax">MinMax</label>
-                        <Calendar inputId="minmax" v-model="date4" :minDate="minDate" :maxDate="maxDate" :manualInput="false" />
+                        <Calendar v-model="date4" inputId="minmax" :minDate="minDate" :maxDate="maxDate" :manualInput="false" />
                     </div>
                     <div class="field col-12 md:col-4">
                         <label for="disableddays">Disabled Days</label>
-                        <Calendar inputId="disableddays" v-model="date5" :disabledDates="invalidDates" :disabledDays="[0, 6]" :manualInput="false" />
+                        <Calendar v-model="date5" inputId="disableddays" :disabledDates="invalidDates" :disabledDays="[0, 6]" :manualInput="false" />
                     </div>
                     <div class="field col-12 md:col-4">
                         <label for="multiple">Multiple</label>
-                        <Calendar inputId="multiple" v-model="dates1" selectionMode="multiple" :manualInput="false" />
+                        <Calendar v-model="dates1" inputId="multiple" selectionMode="multiple" :manualInput="false" />
                     </div>
                     <div class="field col-12 md:col-4">
                         <label for="range">Range</label>
-                        <Calendar inputId="range" v-model="dates2" selectionMode="range" :manualInput="false" />
+                        <Calendar v-model="dates2" inputId="range" selectionMode="range" :manualInput="false" />
                     </div>
                     <div class="field col-12 md:col-4">
                         <label for="buttonbar">Button Bar</label>
-                        <Calendar inputId="buttonbar" v-model="date6" :showButtonBar="true" />
+                        <Calendar v-model="date6" inputId="buttonbar" :showButtonBar="true" />
                     </div>
                     <div class="field col-12 md:col-4">
                         <label for="time24">Time / 24h</label>
-                        <Calendar inputId="time24" v-model="date7" :showTime="true" :showSeconds="true" />
+                        <Calendar v-model="date7" inputId="time24" :showTime="true" :showSeconds="true" />
                     </div>
                     <div class="field col-12 md:col-4">
                         <label for="time12">Time / 12h</label>
-                        <Calendar inputId="time12" v-model="date8" :timeOnly="true" hourFormat="12" />
+                        <Calendar v-model="date8" inputId="time12" :timeOnly="true" hourFormat="12" />
                     </div>
                     <div class="field col-12 md:col-4">
                         <label for="monthpicker">Month Picker</label>
-                        <Calendar inputId="monthpicker" v-model="date9" view="month" dateFormat="mm/yy" />
+                        <Calendar v-model="date9" inputId="monthpicker" view="month" dateFormat="mm/yy" />
                     </div>
                     <div class="field col-12 md:col-4">
                         <label for="yearpicker">Year Picker</label>
-                        <Calendar inputId="yearpicker" v-model="date10" view="year" dateFormat="yy" />
+                        <Calendar v-model="date10" inputId="yearpicker" view="year" dateFormat="yy" />
                     </div>
                     <div class="field col-12 md:col-4">
                         <label for="multiplemonths">Multiple Months</label>
-                        <Calendar inputId="multiplemonths" v-model="date11" :numberOfMonths="3" :responsiveOptions="responsiveOptions" />
+                        <Calendar v-model="date11" inputId="multiplemonths" :numberOfMonths="3" :responsiveOptions="responsiveOptions" />
                     </div>
                     <div class="field col-12 md:col-4">
                         <label for="datetemplate">Date Template</label>
-                        <Calendar inputId="datetemplate" v-model="date12">
+                        <Calendar v-model="date12" inputId="datetemplate">
                             <template #date="slotProps">
                                 <strong v-if="slotProps.date.day > 10 && slotProps.date.day < 15" class="special-day">{{ slotProps.date.day }}</strong>
                                 <template v-else>{{ slotProps.date.day }}</template>
@@ -75,7 +75,7 @@
                     </div>
                     <div class="field col-12 md:col-4">
                         <label for="touchUI">TouchUI</label>
-                        <Calendar inputId="touchUI" v-model="date13" :touchUI="true" />
+                        <Calendar v-model="date13" inputId="touchUI" :touchUI="true" />
                     </div>
                 </div>
 
@@ -92,25 +92,6 @@
 import CalendarDoc from './CalendarDoc';
 
 export default {
-    created() {
-        let today = new Date();
-        let month = today.getMonth();
-        let year = today.getFullYear();
-        let prevMonth = month === 0 ? 11 : month - 1;
-        let prevYear = prevMonth === 11 ? year - 1 : year;
-        let nextMonth = month === 11 ? 0 : month + 1;
-        let nextYear = nextMonth === 0 ? year + 1 : year;
-        this.minDate = new Date();
-        this.minDate.setMonth(prevMonth);
-        this.minDate.setFullYear(prevYear);
-        this.maxDate = new Date();
-        this.maxDate.setMonth(nextMonth);
-        this.maxDate.setFullYear(nextYear);
-
-        let invalidDate = new Date();
-        invalidDate.setDate(today.getDate() - 1);
-        this.invalidDates = [today, invalidDate];
-    },
     data() {
         return {
             date1: null,
@@ -144,6 +125,27 @@ export default {
             ]
         };
     },
+    created() {
+        let today = new Date();
+        let month = today.getMonth();
+        let year = today.getFullYear();
+        let prevMonth = month === 0 ? 11 : month - 1;
+        let prevYear = prevMonth === 11 ? year - 1 : year;
+        let nextMonth = month === 11 ? 0 : month + 1;
+        let nextYear = nextMonth === 0 ? year + 1 : year;
+
+        this.minDate = new Date();
+        this.minDate.setMonth(prevMonth);
+        this.minDate.setFullYear(prevYear);
+        this.maxDate = new Date();
+        this.maxDate.setMonth(nextMonth);
+        this.maxDate.setFullYear(nextYear);
+
+        let invalidDate = new Date();
+
+        invalidDate.setDate(today.getDate() - 1);
+        this.invalidDates = [today, invalidDate];
+    },
     components: {
         CalendarDoc: CalendarDoc
     }
diff --git a/pages/card/CardDoc.vue b/pages/card/CardDoc.vue
index 68e10942c..a5fff61ed 100755
--- a/pages/card/CardDoc.vue
+++ b/pages/card/CardDoc.vue
@@ -1,25 +1,24 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="CardDemo" :sources="sources" github="card/CardDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="CardDemo" :sources="sources" github="card/CardDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import Card from 'primevue/card';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/card/card.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p>Card provides <i>header</i>, <i>title</i>, <i>subtitle</i>, <i>content</i> and <i>footer</i> as the named templates to place content.</p>
-            <pre v-code><code>
+        <h5>Getting Started</h5>
+        <p>Card provides <i>header</i>, <i>title</i>, <i>subtitle</i>, <i>content</i> and <i>footer</i> as the named templates to place content.</p>
+        <pre v-code><code>
 &lt;Card&gt;
     &lt;template #header&gt;
-        &lt;img alt="user header" src="/demo/images/usercard.png"&gt;
+        &lt;img alt="user header" src="demo/images/usercard.png"&gt;
     &lt;/template&gt;
     &lt;template #title&gt;
         Advanced Card
@@ -36,98 +35,96 @@ import Card from 'primevue/card';
 
 </code></pre>
 
-            <h5>Slots</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>header</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>title</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>subtitle</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>content</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>footer</td>
-                            <td>-</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Slots</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>header</td>
+                        <td>-</td>
+                    </tr>
+                    <tr>
+                        <td>title</td>
+                        <td>-</td>
+                    </tr>
+                    <tr>
+                        <td>subtitle</td>
+                        <td>-</td>
+                    </tr>
+                    <tr>
+                        <td>content</td>
+                        <td>-</td>
+                    </tr>
+                    <tr>
+                        <td>footer</td>
+                        <td>-</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-card</td>
-                            <td>Container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-card-title</td>
-                            <td>Title element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-card-subtitle</td>
-                            <td>Subtitle element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-card-content</td>
-                            <td>Content of the card.</td>
-                        </tr>
-                        <tr>
-                            <td>p-card-footer</td>
-                            <td>Footer of the card.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-card</td>
+                        <td>Container element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-card-title</td>
+                        <td>Title element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-card-subtitle</td>
+                        <td>Subtitle element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-card-content</td>
+                        <td>Content of the card.</td>
+                    </tr>
+                    <tr>
+                        <td>p-card-footer</td>
+                        <td>Footer of the card.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Accessibility</h5>
-            <DevelopmentSection>
-                <h6>Screen Reader</h6>
-                <p>
-                    A card can be utilized in many use cases as a result no role is enforced, in fact a role may not be necessary if the card is used for presentational purposes only. Any valid attribute is passed to the container element so if you
-                    require to use one of the <a href="https://www.w3.org/TR/wai-aria/#landmark" alt="Landmark Roles">landmark</a> roles like <i>region</i>, you may use the <i>role</i> property.
-                </p>
+        <h5>Accessibility</h5>
 
-                <pre v-code><code>
+        <h6>Screen Reader</h6>
+        <p>
+            A card can be utilized in many use cases as a result no role is enforced, in fact a role may not be necessary if the card is used for presentational purposes only. Any valid attribute is passed to the container element so if you require
+            to use one of the <a href="https://www.w3.org/TR/wai-aria/#landmark" alt="Landmark Roles">landmark</a> roles like <i>region</i>, you may use the <i>role</i> property.
+        </p>
+
+        <pre v-code><code>
 &lt;Card role="region"&gt;
     Content
 &lt;/Card&gt;
 
 </code></pre>
 
-                <h5>Keyboard Support</h5>
-                <p>Component does not include any interactive elements.</p>
-            </DevelopmentSection>
+        <h5>Keyboard Support</h5>
+        <p>Component does not include any interactive elements.</p>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc>
-    </ClientOnly>
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
diff --git a/pages/card/index.vue b/pages/card/index.vue
index bf3c14363..ba810be56 100755
--- a/pages/card/index.vue
+++ b/pages/card/index.vue
@@ -21,7 +21,7 @@
 
             <Card style="width: 25em">
                 <template #header>
-                    <img alt="user header" src="/demo/images/usercard.png" />
+                    <img alt="user header" src="demo/images/usercard.png" />
                 </template>
                 <template #title> Advanced Card </template>
                 <template #subtitle> Card subtitle </template>
diff --git a/pages/carousel/CarouselDoc.vue b/pages/carousel/CarouselDoc.vue
index 4488d3fd3..d6e758b75 100755
--- a/pages/carousel/CarouselDoc.vue
+++ b/pages/carousel/CarouselDoc.vue
@@ -1,22 +1,21 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="CarouselDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="carousel/CarouselDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="CarouselDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="carousel/CarouselDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import Carousel from 'primevue/carousel';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/carousel/carousel.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p>Carousel requires a collection of items as its value along with a template to render each item.</p>
-            <pre v-code><code>
+        <h5>Getting Started</h5>
+        <p>Carousel requires a collection of items as its value along with a template to render each item.</p>
+        <pre v-code><code>
 &lt;Carousel :value="cars"&gt;
     &lt;template #item="slotProps"&gt;
 	&lt;/template&gt;
@@ -24,9 +23,9 @@ import Carousel from 'primevue/carousel';
 
 </code></pre>
 
-            <h5>Items per page and Scroll Items</h5>
-            <p>Number of items per page is defined using the <i>numVisible</i> property whereas number of items to scroll is defined with the <i>numScroll</i> property.</p>
-            <pre v-code><code>
+        <h5>Items per page and Scroll Items</h5>
+        <p>Number of items per page is defined using the <i>numVisible</i> property whereas number of items to scroll is defined with the <i>numScroll</i> property.</p>
+        <pre v-code><code>
 &lt;Carousel :value="cars" :numVisible="3" :numScroll="1"&gt;
 	&lt;template #item="slotProps"&gt;
 	&lt;/template&gt;
@@ -34,9 +33,9 @@ import Carousel from 'primevue/carousel';
 
 </code></pre>
 
-            <h5>Responsive</h5>
-            <p>For responsive design, <i>numVisible</i> and <i>numScroll</i> can be defined using the <i>responsiveOptions</i> property that should be an array of objects whose breakpoint defines the max-width to apply the settings.</p>
-            <pre v-code><code><template v-pre>
+        <h5>Responsive</h5>
+        <p>For responsive design, <i>numVisible</i> and <i>numScroll</i> can be defined using the <i>responsiveOptions</i> property that should be an array of objects whose breakpoint defines the max-width to apply the settings.</p>
+        <pre v-code><code><template v-pre>
 &lt;Carousel :value="cars" :numVisible="4" :numScroll="3" :responsiveOptions="responsiveOptions"&gt;
 	&lt;template #header&gt;
 		&lt;h2&gt;Basic&lt;/h2&gt;
@@ -45,7 +44,7 @@ import Carousel from 'primevue/carousel';
 		&lt;div class="car-item"&gt;
             &lt;div class="car-content"&gt;
                 &lt;div&gt;
-                    &lt;img :src="'/demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand" /&gt;
+                    &lt;img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand" /&gt;
                 &lt;/div&gt;
                 &lt;div&gt;
                     &lt;div class="car-title"&gt;{{slotProps.data.brand}}&lt;/div&gt;
@@ -63,7 +62,7 @@ import Carousel from 'primevue/carousel';
 &lt;/Carousel&gt;
 </template>
 </code></pre>
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 data() {
 	return {
 		responsiveOptions: [
@@ -88,10 +87,10 @@ data() {
 
 </code></pre>
 
-            <h5>Header and Footer</h5>
-            <p>Custom content projection is available using the <i>item</i>, <i>header</i> and <i>footer</i> templates.</p>
+        <h5>Header and Footer</h5>
+        <p>Custom content projection is available using the <i>item</i>, <i>header</i> and <i>footer</i> templates.</p>
 
-            <pre v-code><code>
+        <pre v-code><code>
 &lt;Carousel :value="cars" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions"&gt;
 	&lt;template #header&gt;
 		&lt;h2&gt;Custom Header&lt;/h2&gt;
@@ -106,9 +105,9 @@ data() {
 
 </code></pre>
 
-            <h5>Orientation</h5>
-            <p>Default layout of the Carousel is horizontal, other possible option is the vertical mode that is configured with the <i>orientation</i> property.</p>
-            <pre v-code><code>
+        <h5>Orientation</h5>
+        <p>Default layout of the Carousel is horizontal, other possible option is the vertical mode that is configured with the <i>orientation</i> property.</p>
+        <pre v-code><code>
 &lt;Carousel :value="cars" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="330px" :responsiveOptions="responsiveOptions"&gt;
 	&lt;template #item="slotProps"&gt;
 		Content
@@ -117,11 +116,9 @@ data() {
 
 </code></pre>
 
-            <h5>AutoPlay and Circular</h5>
-            <p>
-                When <i>autoplayInterval</i> is defined in milliseconds, items are scrolled automatically. In addition, for infinite scrolling <i>circular</i> property needs to be enabled. Note that in autoplay mode, circular is enabled by default.
-            </p>
-            <pre v-code><code>
+        <h5>AutoPlay and Circular</h5>
+        <p>When <i>autoplayInterval</i> is defined in milliseconds, items are scrolled automatically. In addition, for infinite scrolling <i>circular</i> property needs to be enabled. Note that in autoplay mode, circular is enabled by default.</p>
+        <pre v-code><code>
 &lt;Carousel :value="cars" :numVisible="3" :numScroll="1" :circular="true" :autoplayInterval="3000"&gt;
 	&lt;template #header&gt;
 		&lt;h2&gt;Circular, AutoPlay&lt;/h2&gt;
@@ -133,186 +130,304 @@ data() {
 
 </code></pre>
 
-            <h5>Properties</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>value</td>
-                            <td>array</td>
-                            <td>null</td>
-                            <td>An array of objects to display.</td>
-                        </tr>
-                        <tr>
-                            <td>page</td>
-                            <td>number</td>
-                            <td>null</td>
-                            <td>Index of the first item.</td>
-                        </tr>
-                        <tr>
-                            <td>circular</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Defines if scrolling would be infinite.</td>
-                        </tr>
-                        <tr>
-                            <td>autoplayInterval</td>
-                            <td>number</td>
-                            <td>null</td>
-                            <td>Time in milliseconds to scroll items automatically.</td>
-                        </tr>
-                        <tr>
-                            <td>numVisible</td>
-                            <td>number</td>
-                            <td>1</td>
-                            <td>Number of items per page.</td>
-                        </tr>
-                        <tr>
-                            <td>numScroll</td>
-                            <td>number</td>
-                            <td>1</td>
-                            <td>Number of items to scroll.</td>
-                        </tr>
-                        <tr>
-                            <td>responsiveOptions</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>An array of options for responsive design.</td>
-                        </tr>
-                        <tr>
-                            <td>orientation</td>
-                            <td>string</td>
-                            <td>horizontal</td>
-                            <td>Specifies the layout of the component, valid values are "horizontal" and "vertical".</td>
-                        </tr>
-                        <tr>
-                            <td>verticalViewPortHeight</td>
-                            <td>string</td>
-                            <td>300px</td>
-                            <td>Height of the viewport in vertical layout.</td>
-                        </tr>
-                        <tr>
-                            <td>contentClass</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of main content.</td>
-                        </tr>
-                        <tr>
-                            <td>containerClass</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the viewport container.</td>
-                        </tr>
-                        <tr>
-                            <td>indicatorsContentClass</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the indicator items.</td>
-                        </tr>
-                        <tr>
-                            <td>showNavigators</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether to display navigation buttons in container.</td>
-                        </tr>
-                        <tr>
-                            <td>showIndicators</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether to display indicator container.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>value</td>
+                        <td>array</td>
+                        <td>null</td>
+                        <td>An array of objects to display.</td>
+                    </tr>
+                    <tr>
+                        <td>page</td>
+                        <td>number</td>
+                        <td>null</td>
+                        <td>Index of the first item.</td>
+                    </tr>
+                    <tr>
+                        <td>circular</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Defines if scrolling would be infinite.</td>
+                    </tr>
+                    <tr>
+                        <td>autoplayInterval</td>
+                        <td>number</td>
+                        <td>null</td>
+                        <td>Time in milliseconds to scroll items automatically.</td>
+                    </tr>
+                    <tr>
+                        <td>numVisible</td>
+                        <td>number</td>
+                        <td>1</td>
+                        <td>Number of items per page.</td>
+                    </tr>
+                    <tr>
+                        <td>numScroll</td>
+                        <td>number</td>
+                        <td>1</td>
+                        <td>Number of items to scroll.</td>
+                    </tr>
+                    <tr>
+                        <td>responsiveOptions</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>An array of options for responsive design.</td>
+                    </tr>
+                    <tr>
+                        <td>orientation</td>
+                        <td>string</td>
+                        <td>horizontal</td>
+                        <td>Specifies the layout of the component, valid values are "horizontal" and "vertical".</td>
+                    </tr>
+                    <tr>
+                        <td>verticalViewPortHeight</td>
+                        <td>string</td>
+                        <td>300px</td>
+                        <td>Height of the viewport in vertical layout.</td>
+                    </tr>
+                    <tr>
+                        <td>contentClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of main content.</td>
+                    </tr>
+                    <tr>
+                        <td>containerClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the viewport container.</td>
+                    </tr>
+                    <tr>
+                        <td>indicatorsContentClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the indicator items.</td>
+                    </tr>
+                    <tr>
+                        <td>showNavigators</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Whether to display navigation buttons in container.</td>
+                    </tr>
+                    <tr>
+                        <td>showIndicators</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Whether to display indicator container.</td>
+                    </tr>
+                    <tr>
+                        <td>prevButtonProps</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Uses to pass all properties of the HTMLButtonElement to the previous navigation button.</td>
+                    </tr>
+                    <tr>
+                        <td>nextButtonProps</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Uses to pass all properties of the HTMLButtonElement to the next navigation button.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Slots</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>header</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>item</td>
-                            <td>
-                                data: Data of the component<br />
-                                index: Index of the item
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>footer</td>
-                            <td>-</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Slots</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>header</td>
+                        <td>-</td>
+                    </tr>
+                    <tr>
+                        <td>item</td>
+                        <td>
+                            data: Data of the component<br />
+                            index: Index of the item
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>footer</td>
+                        <td>-</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-carousel</td>
-                            <td>Container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-carousel-header</td>
-                            <td>Header section.</td>
-                        </tr>
-                        <tr>
-                            <td>p-carousel-footer</td>
-                            <td>Footer section.</td>
-                        </tr>
-                        <tr>
-                            <td>p-carousel-content</td>
-                            <td>Main content element. It contains the container of the viewport.</td>
-                        </tr>
-                        <tr>
-                            <td>p-carousel-container</td>
-                            <td>Container of the viewport. It contains navigation buttons and viewport.</td>
-                        </tr>
-                        <tr>
-                            <td>p-carousel-items-content</td>
-                            <td>Viewport.</td>
-                        </tr>
-                        <tr>
-                            <td>p-carousel-indicators</td>
-                            <td>Container of the indicators.</td>
-                        </tr>
-                        <tr>
-                            <td>p-carousel-indicator</td>
-                            <td>Indicator element.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-carousel</td>
+                        <td>Container element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-carousel-header</td>
+                        <td>Header section.</td>
+                    </tr>
+                    <tr>
+                        <td>p-carousel-footer</td>
+                        <td>Footer section.</td>
+                    </tr>
+                    <tr>
+                        <td>p-carousel-content</td>
+                        <td>Main content element. It contains the container of the viewport.</td>
+                    </tr>
+                    <tr>
+                        <td>p-carousel-container</td>
+                        <td>Container of the viewport. It contains navigation buttons and viewport.</td>
+                    </tr>
+                    <tr>
+                        <td>p-carousel-items-content</td>
+                        <td>Viewport.</td>
+                    </tr>
+                    <tr>
+                        <td>p-carousel-indicators</td>
+                        <td>Container of the indicators.</td>
+                    </tr>
+                    <tr>
+                        <td>p-carousel-indicator</td>
+                        <td>Indicator element.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc>
-    </ClientOnly>
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>
+            Carousel uses <i>region</i> role and since any attribute is passed to the main container element, attributes such as <i>aria-label</i> and <i>aria-roledescription</i> can be used as well. The slides container has
+            <i>aria-live</i> attribute set as "polite" if carousel is not in autoplay mode, otherwise "off" would be the value in autoplay.
+        </p>
+
+        <p>
+            A slide has a <i>group</i> role with an aria-label that refers to the <i>aria.slideNumber</i> property of the <router-link to="/locale">locale</router-link> API. Similarly <i>aria.slide</i> is used as the <i>aria-roledescription</i> of
+            the item. Inactive slides are hidden from the readers with <i>aria-hidden</i>.
+        </p>
+
+        <p>
+            Next and Previous navigators are button elements with <i>aria-label</i> attributes referring to the <i>aria.prevPageLabel</i> and <i>aria.nextPageLabel</i> properties of the <router-link to="/locale">locale</router-link> API by default
+            respectively, you may still use your own aria roles and attributes as any valid attribute is passed to the button elements implicitly by using <i>nextButtonProps</i> and <i>prevButtonProps</i>.
+        </p>
+
+        <p>Quick navigation elements are button elements with an <i>aria-label</i> attribute referring to the <i>aria.pageLabel</i> of the <router-link to="/locale">locale</router-link> API. Current page is marked with <i>aria-current</i>.</p>
+
+        <h6>Next/Prev Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>tab</i>
+                        </td>
+                        <td>Moves focus through interactive elements in the carousel.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>Activates navigation.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>Activates navigation.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h6>Quick Navigation Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>tab</i>
+                        </td>
+                        <td>Moves focus through the active slide link.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>Activates the focused slide link.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>Activates the focused slide link.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>right arrow</i>
+                        </td>
+                        <td>Moves focus to the next slide link.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>left arrow</i>
+                        </td>
+                        <td>Moves focus to the previous slide link.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>home</i>
+                        </td>
+                        <td>Moves focus to the first slide link.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>end</i>
+                        </td>
+                        <td>Moves focus to the last slide link.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
diff --git a/pages/carousel/index.vue b/pages/carousel/index.vue
index 3b3ffc0c7..dfa3aeecf 100755
--- a/pages/carousel/index.vue
+++ b/pages/carousel/index.vue
@@ -18,7 +18,7 @@
                         <div class="product-item">
                             <div class="product-item-content">
                                 <div class="mb-3">
-                                    <img :src="'/demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" />
+                                    <img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" />
                                 </div>
                                 <div>
                                     <h4 class="mb-1">{{ slotProps.data.name }}</h4>
@@ -45,7 +45,7 @@
                         <div class="product-item">
                             <div class="product-item-content">
                                 <div class="mb-3">
-                                    <img :src="'/demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" />
+                                    <img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" />
                                 </div>
                                 <div>
                                     <h4 class="mb-1">{{ slotProps.data.name }}</h4>
@@ -72,7 +72,7 @@
                         <div class="product-item">
                             <div class="product-item-content">
                                 <div class="mb-3">
-                                    <img :src="'/demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" />
+                                    <img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" />
                                 </div>
                                 <div>
                                     <h4 class="mb-1">{{ slotProps.data.name }}</h4>
diff --git a/pages/cascadeselect/CascadeSelectDoc.vue b/pages/cascadeselect/CascadeSelectDoc.vue
index 671215961..25f09af02 100644
--- a/pages/cascadeselect/CascadeSelectDoc.vue
+++ b/pages/cascadeselect/CascadeSelectDoc.vue
@@ -1,32 +1,31 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="CascadeSelectDemo" :sources="sources" github="cascadeselect/CascadeSelectDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="CascadeSelectDemo" :sources="sources" github="cascadeselect/CascadeSelectDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import CascadeSelect from 'primevue/cascadeselect';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/cascadeselect/cascadeselect.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p>
-                CascadeSelect requires a value to bind and a collection of arbitrary objects with a nested hierarchy. <i>optionGroupLabel</i> is used for the text of a category and <i>optionGroupChildren</i> is to define the children of the category.
-                Note that order of the <i>optionGroupChildren</i> matters and it should correspond to the data hierarchy.
-            </p>
+        <h5>Getting Started</h5>
+        <p>
+            CascadeSelect requires a value to bind and a collection of arbitrary objects with a nested hierarchy. <i>optionGroupLabel</i> is used for the text of a category and <i>optionGroupChildren</i> is to define the children of the category.
+            Note that order of the <i>optionGroupChildren</i> matters and it should correspond to the data hierarchy.
+        </p>
 
-            <pre v-code><code>
+        <pre v-code><code>
 &lt;CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
                         :optionGroupChildren="['states', 'cities']" style="minWidth: 14rem" &gt;
 
 </code></pre>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 data() &#123;
     return &#123;
         selectedCity: null,
@@ -111,10 +110,10 @@ data() &#123;
 
 </code></pre>
 
-            <h5>Templating</h5>
-            <p>Content of an item can be customized with the <i>option</i> template.</p>
+        <h5>Templating</h5>
+        <p>Content of an item can be customized with the <i>option</i> template.</p>
 
-            <pre v-code><code><template v-pre>
+        <pre v-code><code><template v-pre>
 &lt;CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
         :optionGroupChildren="['states', 'cities']" style="minWidth: 14rem"&gt;
     &lt;template #option="slotProps"&gt;
@@ -129,364 +128,375 @@ data() &#123;
 </template>
 </code></pre>
 
-            <h5>Properties</h5>
-            <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>modelValue</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Value of the component.</td>
-                        </tr>
-                        <tr>
-                            <td>options</td>
-                            <td>array</td>
-                            <td>null</td>
-                            <td>An array of selectitems to display as the available options.</td>
-                        </tr>
-                        <tr>
-                            <td>optionLabel</td>
-                            <td>string | function</td>
-                            <td>null</td>
-                            <td>Property name or getter function to use as the label of an option.</td>
-                        </tr>
-                        <tr>
-                            <td>optionValue</td>
-                            <td>string | function</td>
-                            <td>null</td>
-                            <td>Property name or getter function to use as the value of an option, defaults to the option itself when not defined.</td>
-                        </tr>
-                        <tr>
-                            <td>optionDisabled</td>
-                            <td>string | function</td>
-                            <td>null</td>
-                            <td>Property name or getter function to use as the disabled flag of an option, defaults to false when not defined.</td>
-                        </tr>
-                        <tr>
-                            <td>optionGroupLabel</td>
-                            <td>string | function</td>
-                            <td>null</td>
-                            <td>Property name or getter function to use as the label of an option group.</td>
-                        </tr>
-                        <tr>
-                            <td>optionGroupChildren</td>
-                            <td>array | function</td>
-                            <td>null</td>
-                            <td>Property name or getter function to retrieve the items of a group.</td>
-                        </tr>
-                        <tr>
-                            <td>placeholder</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Default text to display when no option is selected.</td>
-                        </tr>
-                        <tr>
-                            <td>disabled</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When present, it specifies that the component should be disabled.</td>
-                        </tr>
-                        <tr>
-                            <td>dataKey</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>A property to uniquely identify an option.</td>
-                        </tr>
-                        <tr>
-                            <td>inputId</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Identifier of the underlying input element.</td>
-                        </tr>
-                        <tr>
-                            <td>inputStyle</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Inline style of the input field.</td>
-                        </tr>
-                        <tr>
-                            <td>inputClass</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the input field.</td>
-                        </tr>
-                        <tr>
-                            <td>inputProps</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Uses to pass all properties of the HTMLInputElement/HTMLSpanElement to the focusable input element inside the component.</td>
-                        </tr>
-                        <tr>
-                            <td>panelStyle</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Inline style of the overlay panel.</td>
-                        </tr>
-                        <tr>
-                            <td>panelClass</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the overlay panel.</td>
-                        </tr>
-                        <tr>
-                            <td>panelProps</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Uses to pass all properties of the HTMLDivElement to the overlay panel.</td>
-                        </tr>
-                        <tr>
-                            <td>appendTo</td>
-                            <td>string</td>
-                            <td>body</td>
-                            <td>A valid query selector or an HTMLElement to specify where the overlay gets attached. Special keywords are "body" for document body and "self" for the element itself.</td>
-                        </tr>
-                        <tr>
-                            <td>loading</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Whether the dropdown is in loading state.</td>
-                        </tr>
-                        <tr>
-                            <td>loadingIcon</td>
-                            <td>string</td>
-                            <td>pi pi-spinner pi-spin</td>
-                            <td>Icon to display in loading state.</td>
-                        </tr>
-                        <tr>
-                            <td>autoOptionFocus</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether to focus on the first visible or selected element when the overlay panel is shown.</td>
-                        </tr>
-                        <tr>
-                            <td>selectOnFocus</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When enabled, the focused option is selected/opened.</td>
-                        </tr>
-                        <tr>
-                            <td>searchLocale</td>
-                            <td>string</td>
-                            <td>undefined</td>
-                            <td>Locale to use in searching. The default locale is the host environment's current locale.</td>
-                        </tr>
-                        <tr>
-                            <td>searchMessage</td>
-                            <td>string</td>
-                            <td>{0} results are available</td>
-                            <td>Text to be displayed in hidden accessible field when filtering returns any results. Defaults to value from PrimeVue locale configuration.</td>
-                        </tr>
-                        <tr>
-                            <td>selectionMessage</td>
-                            <td>string</td>
-                            <td>{0} items selected</td>
-                            <td>Text to be displayed in hidden accessible field when options are selected. Defaults to value from PrimeVue locale configuration.</td>
-                        </tr>
-                        <tr>
-                            <td>emptySelectionMessage</td>
-                            <td>string</td>
-                            <td>No selected item</td>
-                            <td>Text to be displayed in hidden accessible field when any option is not selected. Defaults to value from PrimeVue locale configuration.</td>
-                        </tr>
-                        <tr>
-                            <td>emptySearchMessage</td>
-                            <td>string</td>
-                            <td>No results found</td>
-                            <td>Text to be displayed when filtering does not return any results. Defaults to value from PrimeVue locale configuration.</td>
-                        </tr>
-                        <tr>
-                            <td>emptyMessage</td>
-                            <td>string</td>
-                            <td>No available options</td>
-                            <td>Text to be displayed when there are no options available. Defaults to value from PrimeVue locale configuration.</td>
-                        </tr>
-                        <tr>
-                            <td>tabindex</td>
-                            <td>number</td>
-                            <td>0</td>
-                            <td>Index of the element in tabbing order.</td>
-                        </tr>
-                        <tr>
-                            <td>aria-label</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Defines a string value that labels an interactive element.</td>
-                        </tr>
-                        <tr>
-                            <td>aria-labelledby</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>modelValue</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Value of the component.</td>
+                    </tr>
+                    <tr>
+                        <td>options</td>
+                        <td>array</td>
+                        <td>null</td>
+                        <td>An array of selectitems to display as the available options.</td>
+                    </tr>
+                    <tr>
+                        <td>optionLabel</td>
+                        <td>string | function</td>
+                        <td>null</td>
+                        <td>Property name or getter function to use as the label of an option.</td>
+                    </tr>
+                    <tr>
+                        <td>optionValue</td>
+                        <td>string | function</td>
+                        <td>null</td>
+                        <td>Property name or getter function to use as the value of an option, defaults to the option itself when not defined.</td>
+                    </tr>
+                    <tr>
+                        <td>optionDisabled</td>
+                        <td>string | function</td>
+                        <td>null</td>
+                        <td>Property name or getter function to use as the disabled flag of an option, defaults to false when not defined.</td>
+                    </tr>
+                    <tr>
+                        <td>optionGroupLabel</td>
+                        <td>string | function</td>
+                        <td>null</td>
+                        <td>Property name or getter function to use as the label of an option group.</td>
+                    </tr>
+                    <tr>
+                        <td>optionGroupChildren</td>
+                        <td>array | function</td>
+                        <td>null</td>
+                        <td>Property name or getter function to retrieve the items of a group.</td>
+                    </tr>
+                    <tr>
+                        <td>placeholder</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Default text to display when no option is selected.</td>
+                    </tr>
+                    <tr>
+                        <td>disabled</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When present, it specifies that the component should be disabled.</td>
+                    </tr>
+                    <tr>
+                        <td>dataKey</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>A property to uniquely identify an option.</td>
+                    </tr>
+                    <tr>
+                        <td>inputId</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Identifier of the underlying input element.</td>
+                    </tr>
+                    <tr>
+                        <td>inputStyle</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Inline style of the input field.</td>
+                    </tr>
+                    <tr>
+                        <td>inputClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the input field.</td>
+                    </tr>
+                    <tr>
+                        <td>inputProps</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Uses to pass all properties of the HTMLInputElement/HTMLSpanElement to the focusable input element inside the component.</td>
+                    </tr>
+                    <tr>
+                        <td>panelStyle</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Inline style of the overlay panel.</td>
+                    </tr>
+                    <tr>
+                        <td>panelClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the overlay panel.</td>
+                    </tr>
+                    <tr>
+                        <td>panelProps</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Uses to pass all properties of the HTMLDivElement to the overlay panel.</td>
+                    </tr>
+                    <tr>
+                        <td>appendTo</td>
+                        <td>string</td>
+                        <td>body</td>
+                        <td>A valid query selector or an HTMLElement to specify where the overlay gets attached. Special keywords are "body" for document body and "self" for the element itself.</td>
+                    </tr>
+                    <tr>
+                        <td>loading</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Whether the dropdown is in loading state.</td>
+                    </tr>
+                    <tr>
+                        <td>dropdownIcon</td>
+                        <td>string</td>
+                        <td>pi pi-chevron-down</td>
+                        <td>Icon to display in the dropdown.</td>
+                    </tr>
+                    <tr>
+                        <td>loadingIcon</td>
+                        <td>string</td>
+                        <td>pi pi-spinner pi-spin</td>
+                        <td>Icon to display in loading state.</td>
+                    </tr>
+                    <tr>
+                        <td>optionGroupIcon</td>
+                        <td>string</td>
+                        <td>pi pi-angle-right</td>
+                        <td>Icon to display in the option group.</td>
+                    </tr>
+                    <tr>
+                        <td>autoOptionFocus</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Whether to focus on the first visible or selected element when the overlay panel is shown.</td>
+                    </tr>
+                    <tr>
+                        <td>selectOnFocus</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When enabled, the focused option is selected/opened.</td>
+                    </tr>
+                    <tr>
+                        <td>searchLocale</td>
+                        <td>string</td>
+                        <td>undefined</td>
+                        <td>Locale to use in searching. The default locale is the host environment's current locale.</td>
+                    </tr>
+                    <tr>
+                        <td>searchMessage</td>
+                        <td>string</td>
+                        <td>{0} results are available</td>
+                        <td>Text to be displayed in hidden accessible field when filtering returns any results. Defaults to value from PrimeVue locale configuration.</td>
+                    </tr>
+                    <tr>
+                        <td>selectionMessage</td>
+                        <td>string</td>
+                        <td>{0} items selected</td>
+                        <td>Text to be displayed in hidden accessible field when options are selected. Defaults to value from PrimeVue locale configuration.</td>
+                    </tr>
+                    <tr>
+                        <td>emptySelectionMessage</td>
+                        <td>string</td>
+                        <td>No selected item</td>
+                        <td>Text to be displayed in hidden accessible field when any option is not selected. Defaults to value from PrimeVue locale configuration.</td>
+                    </tr>
+                    <tr>
+                        <td>emptySearchMessage</td>
+                        <td>string</td>
+                        <td>No results found</td>
+                        <td>Text to be displayed when filtering does not return any results. Defaults to value from PrimeVue locale configuration.</td>
+                    </tr>
+                    <tr>
+                        <td>emptyMessage</td>
+                        <td>string</td>
+                        <td>No available options</td>
+                        <td>Text to be displayed when there are no options available. Defaults to value from PrimeVue locale configuration.</td>
+                    </tr>
+                    <tr>
+                        <td>tabindex</td>
+                        <td>number</td>
+                        <td>0</td>
+                        <td>Index of the element in tabbing order.</td>
+                    </tr>
+                    <tr>
+                        <td>aria-label</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Defines a string value that labels an interactive element.</td>
+                    </tr>
+                    <tr>
+                        <td>aria-labelledby</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Events</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>change</td>
-                            <td>
-                                event.originalEvent: Original event <br />
-                                event.value: Selected option value
-                            </td>
-                            <td>Callback to invoke on value change.</td>
-                        </tr>
-                        <tr>
-                            <td>focus</td>
-                            <td>event</td>
-                            <td>Callback to invoke when the component receives focus.</td>
-                        </tr>
-                        <tr>
-                            <td>blur</td>
-                            <td>event</td>
-                            <td>Callback to invoke when the component loses focus.</td>
-                        </tr>
-                        <tr>
-                            <td>click</td>
-                            <td>event</td>
-                            <td>Callback to invoke on click.</td>
-                        </tr>
-                        <tr>
-                            <td>group-change</td>
-                            <td>
-                                event.originalEvent: Original event <br />
-                                event.value: Selected option group
-                            </td>
-                            <td>Callback to invoke when a group changes.</td>
-                        </tr>
-                        <tr>
-                            <td>before-show</td>
-                            <td>-</td>
-                            <td>Callback to invoke before the overlay is shown.</td>
-                        </tr>
-                        <tr>
-                            <td>before-hide</td>
-                            <td>-</td>
-                            <td>Callback to invoke before the overlay is hidden.</td>
-                        </tr>
-                        <tr>
-                            <td>show</td>
-                            <td>-</td>
-                            <td>Callback to invoke when the overlay is shown.</td>
-                        </tr>
-                        <tr>
-                            <td>hide</td>
-                            <td>-</td>
-                            <td>Callback to invoke when the overlay is hidden.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Events</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>change</td>
+                        <td>
+                            event.originalEvent: Original event <br />
+                            event.value: Selected option value
+                        </td>
+                        <td>Callback to invoke on value change.</td>
+                    </tr>
+                    <tr>
+                        <td>focus</td>
+                        <td>event</td>
+                        <td>Callback to invoke when the component receives focus.</td>
+                    </tr>
+                    <tr>
+                        <td>blur</td>
+                        <td>event</td>
+                        <td>Callback to invoke when the component loses focus.</td>
+                    </tr>
+                    <tr>
+                        <td>click</td>
+                        <td>event</td>
+                        <td>Callback to invoke on click.</td>
+                    </tr>
+                    <tr>
+                        <td>group-change</td>
+                        <td>
+                            event.originalEvent: Original event <br />
+                            event.value: Selected option group
+                        </td>
+                        <td>Callback to invoke when a group changes.</td>
+                    </tr>
+                    <tr>
+                        <td>before-show</td>
+                        <td>-</td>
+                        <td>Callback to invoke before the overlay is shown.</td>
+                    </tr>
+                    <tr>
+                        <td>before-hide</td>
+                        <td>-</td>
+                        <td>Callback to invoke before the overlay is hidden.</td>
+                    </tr>
+                    <tr>
+                        <td>show</td>
+                        <td>-</td>
+                        <td>Callback to invoke when the overlay is shown.</td>
+                    </tr>
+                    <tr>
+                        <td>hide</td>
+                        <td>-</td>
+                        <td>Callback to invoke when the overlay is hidden.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Slots</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>value</td>
-                            <td>
-                                value: Value of the component <br />
-                                placeholder: Placeholder text to show
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>option</td>
-                            <td>option: Option instance</td>
-                        </tr>
-                        <tr>
-                            <td>indicator</td>
-                            <td>-</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Slots</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>value</td>
+                        <td>
+                            value: Value of the component <br />
+                            placeholder: Placeholder text to show
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>option</td>
+                        <td>option: Option instance</td>
+                    </tr>
+                    <tr>
+                        <td>indicator</td>
+                        <td>-</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-cascadeselect</td>
-                            <td>Container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-cascadeselect-label</td>
-                            <td>Element to display label of selected option.</td>
-                        </tr>
-                        <tr>
-                            <td>p-cascadeselect-trigger</td>
-                            <td>Icon element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-cascadeselect-panel</td>
-                            <td>Icon element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-cascadeselect-items-wrapper</td>
-                            <td>Wrapper element of items list.</td>
-                        </tr>
-                        <tr>
-                            <td>p-cascadeselect-items</td>
-                            <td>List element of items.</td>
-                        </tr>
-                        <tr>
-                            <td>p-cascadeselect-item</td>
-                            <td>An item in the list.</td>
-                        </tr>
-                        <tr>
-                            <td>p-overlay-open</td>
-                            <td>Container element when overlay is visible.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-cascadeselect</td>
+                        <td>Container element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-cascadeselect-label</td>
+                        <td>Element to display label of selected option.</td>
+                    </tr>
+                    <tr>
+                        <td>p-cascadeselect-trigger</td>
+                        <td>Icon element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-cascadeselect-panel</td>
+                        <td>Icon element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-cascadeselect-items-wrapper</td>
+                        <td>Wrapper element of items list.</td>
+                    </tr>
+                    <tr>
+                        <td>p-cascadeselect-items</td>
+                        <td>List element of items.</td>
+                    </tr>
+                    <tr>
+                        <td>p-cascadeselect-item</td>
+                        <td>An item in the list.</td>
+                    </tr>
+                    <tr>
+                        <td>p-overlay-open</td>
+                        <td>Container element when overlay is visible.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Accessibility</h5>
-            <h6>Screen Reader</h6>
-            <p>
-                Value to describe the component can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. The cascadeselect element has a <i>combobox</i> role in addition to <i>aria-haspopup</i> and
-                <i>aria-expanded</i> attributes. The relation between the combobox and the popup is created with <i>aria-controls</i> that refers to the id of the popup.
-            </p>
-            <p>
-                The popup list has an id that refers to the <i>aria-controls</i> attribute of the <i>combobox</i> element and uses <i>tree</i> as the role. Each list item has a <i>treeitem</i> role along with <i>aria-label</i>,
-                <i>aria-selected</i> and <i>aria-expanded</i> attributes. The container element of a treenode has the <i>group</i> role. The <i>aria-setsize</i>, <i>aria-posinset</i> and <i>aria-level</i> attributes are calculated implicitly and
-                added to each treeitem.
-            </p>
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>
+            Value to describe the component can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. The cascadeselect element has a <i>combobox</i> role in addition to <i>aria-haspopup</i> and <i>aria-expanded</i> attributes.
+            The relation between the combobox and the popup is created with <i>aria-controls</i> that refers to the id of the popup.
+        </p>
+        <p>
+            The popup list has an id that refers to the <i>aria-controls</i> attribute of the <i>combobox</i> element and uses <i>tree</i> as the role. Each list item has a <i>treeitem</i> role along with <i>aria-label</i>, <i>aria-selected</i> and
+            <i>aria-expanded</i> attributes. The container element of a treenode has the <i>group</i> role. The <i>aria-setsize</i>, <i>aria-posinset</i> and <i>aria-level</i> attributes are calculated implicitly and added to each treeitem.
+        </p>
 
-            <pre v-code><code>
+        <pre v-code><code>
 &lt;span id="dd1"&gt;Options&lt;/span&gt;
 &lt;CascadeSelect aria-labelledby="dd1" /&gt;
 
@@ -494,114 +504,113 @@ data() &#123;
 
 </code></pre>
 
-            <h6>Closed State Keyboard Support</h6>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Key</th>
-                            <th>Function</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td><i>tab</i></td>
-                            <td>Moves focus to the cascadeselect element.</td>
-                        </tr>
-                        <tr>
-                            <td><i>space</i></td>
-                            <td>Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus.</td>
-                        </tr>
-                        <tr>
-                            <td><i>enter</i></td>
-                            <td>Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus.</td>
-                        </tr>
-                        <tr>
-                            <td><i>down arrow</i></td>
-                            <td>Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus.</td>
-                        </tr>
-                        <tr>
-                            <td><i>up arrow</i></td>
-                            <td>Opens the popup and moves visual focus to the selected option, if there is none then last option receives the focus.</td>
-                        </tr>
-                        <tr>
-                            <td><i>any printable character</i></td>
-                            <td>Opens the popup and moves focus to the option whose label starts with the characters being typed, if there is none then first option receives the focus.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h6>Closed State Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>tab</i></td>
+                        <td>Moves focus to the cascadeselect element.</td>
+                    </tr>
+                    <tr>
+                        <td><i>space</i></td>
+                        <td>Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus.</td>
+                    </tr>
+                    <tr>
+                        <td><i>enter</i></td>
+                        <td>Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus.</td>
+                    </tr>
+                    <tr>
+                        <td><i>down arrow</i></td>
+                        <td>Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus.</td>
+                    </tr>
+                    <tr>
+                        <td><i>up arrow</i></td>
+                        <td>Opens the popup and moves visual focus to the selected option, if there is none then last option receives the focus.</td>
+                    </tr>
+                    <tr>
+                        <td><i>any printable character</i></td>
+                        <td>Opens the popup and moves focus to the option whose label starts with the characters being typed, if there is none then first option receives the focus.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h6>Popup Keyboard Support</h6>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Key</th>
-                            <th>Function</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td><i>tab</i></td>
-                            <td>Hides the popup and moves focus to the next tabbable element. If there is none, the focusable option is selected and the overlay is closed then moves focus to next element in page.</td>
-                        </tr>
-                        <tr>
-                            <td><i>shift</i> + <i>tab</i></td>
-                            <td>Hides the popup and moves focus to the previous tabbable element.</td>
-                        </tr>
-                        <tr>
-                            <td><i>enter</i></td>
-                            <td>Selects the focused option and closes the popup.</td>
-                        </tr>
-                        <tr>
-                            <td><i>space</i></td>
-                            <td>Selects the focused option and closes the popup.</td>
-                        </tr>
-                        <tr>
-                            <td><i>escape</i></td>
-                            <td>Closes the popup, moves focus to the cascadeselect element.</td>
-                        </tr>
-                        <tr>
-                            <td><i>down arrow</i></td>
-                            <td>Moves focus to the next option.</td>
-                        </tr>
-                        <tr>
-                            <td><i>up arrow</i></td>
-                            <td>Moves focus to the previous option.</td>
-                        </tr>
-                        <tr>
-                            <td><i>alt</i> + <i>up arrow</i></td>
-                            <td>Selects the focused option and closes the popup, then moves focus to the cascadeselect element.</td>
-                        </tr>
-                        <tr>
-                            <td><i>right arrow</i></td>
-                            <td>If option is closed, opens the option otherwise moves focus to the first child option.</td>
-                        </tr>
-                        <tr>
-                            <td><i>left arrow</i></td>
-                            <td>If option is open, closes the option otherwise moves focus to the parent option.</td>
-                        </tr>
-                        <tr>
-                            <td><i>home</i></td>
-                            <td>Moves input cursor at the end, if not then moves focus to the first option.</td>
-                        </tr>
-                        <tr>
-                            <td><i>end</i></td>
-                            <td>Moves input cursor at the beginning, if not then moves focus to the last option.</td>
-                        </tr>
-                        <tr>
-                            <td><i>any printable character</i></td>
-                            <td>Moves focus to the option whose label starts with the characters being typed.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h6>Popup Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>tab</i></td>
+                        <td>Hides the popup and moves focus to the next tabbable element. If there is none, the focusable option is selected and the overlay is closed then moves focus to next element in page.</td>
+                    </tr>
+                    <tr>
+                        <td><i>shift</i> + <i>tab</i></td>
+                        <td>Hides the popup and moves focus to the previous tabbable element.</td>
+                    </tr>
+                    <tr>
+                        <td><i>enter</i></td>
+                        <td>Selects the focused option and closes the popup.</td>
+                    </tr>
+                    <tr>
+                        <td><i>space</i></td>
+                        <td>Selects the focused option and closes the popup.</td>
+                    </tr>
+                    <tr>
+                        <td><i>escape</i></td>
+                        <td>Closes the popup, moves focus to the cascadeselect element.</td>
+                    </tr>
+                    <tr>
+                        <td><i>down arrow</i></td>
+                        <td>Moves focus to the next option.</td>
+                    </tr>
+                    <tr>
+                        <td><i>up arrow</i></td>
+                        <td>Moves focus to the previous option.</td>
+                    </tr>
+                    <tr>
+                        <td><i>alt</i> + <i>up arrow</i></td>
+                        <td>Selects the focused option and closes the popup, then moves focus to the cascadeselect element.</td>
+                    </tr>
+                    <tr>
+                        <td><i>right arrow</i></td>
+                        <td>If option is closed, opens the option otherwise moves focus to the first child option.</td>
+                    </tr>
+                    <tr>
+                        <td><i>left arrow</i></td>
+                        <td>If option is open, closes the option otherwise moves focus to the parent option.</td>
+                    </tr>
+                    <tr>
+                        <td><i>home</i></td>
+                        <td>Moves input cursor at the end, if not then moves focus to the first option.</td>
+                    </tr>
+                    <tr>
+                        <td><i>end</i></td>
+                        <td>Moves input cursor at the beginning, if not then moves focus to the last option.</td>
+                    </tr>
+                    <tr>
+                        <td><i>any printable character</i></td>
+                        <td>Moves focus to the option whose label starts with the characters being typed.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc>
-    </ClientOnly>
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
diff --git a/pages/cascadeselect/index.vue b/pages/cascadeselect/index.vue
index 5742a440f..57b95611b 100644
--- a/pages/cascadeselect/index.vue
+++ b/pages/cascadeselect/index.vue
@@ -11,22 +11,22 @@
         <div class="content-section implementation">
             <div class="card">
                 <h5>Basic</h5>
-                <CascadeSelect v-model="selectedCity1" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" style="minwidth: 14rem" placeholder="Select a City" />
+                <CascadeSelect v-model="selectedCity1" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
 
                 <h5>Templating</h5>
-                <CascadeSelect v-model="selectedCity2" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" style="minwidth: 14rem" placeholder="Select a City">
+                <CascadeSelect v-model="selectedCity2" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City">
                     <template #option="slotProps">
                         <div class="country-item">
-                            <img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" v-if="slotProps.option.states" />
-                            <i class="pi pi-compass mr-2" v-if="slotProps.option.cities"></i>
-                            <i class="pi pi-map-marker mr-2" v-if="slotProps.option.cname"></i>
+                            <img v-if="slotProps.option.states" src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" />
+                            <i v-if="slotProps.option.cities" class="pi pi-compass mr-2"></i>
+                            <i v-if="slotProps.option.cname" class="pi pi-map-marker mr-2"></i>
                             <span>{{ slotProps.option.cname || slotProps.option.name }}</span>
                         </div>
                     </template>
                 </CascadeSelect>
 
                 <h5>Loading State</h5>
-                <CascadeSelect placeholder="Loading..." loading style="minwidth: 14rem"></CascadeSelect>
+                <CascadeSelect placeholder="Loading..." loading style="min-width: 14rem"></CascadeSelect>
             </div>
         </div>
 
diff --git a/pages/chart/Bar.vue b/pages/chart/Bar.vue
index 00131dd55..a266b9f63 100755
--- a/pages/chart/Bar.vue
+++ b/pages/chart/Bar.vue
@@ -35,27 +35,11 @@
 </template>
 
 <script>
-import BarChartDoc from './BarChartDoc';
 import EventBus from '@/layouts/AppEventBus';
+import BarChartDoc from './BarChartDoc';
 
 export default {
     themeChangeListener: null,
-    mounted() {
-        this.themeChangeListener = (event) => {
-            if (event.dark) this.applyDarkTheme();
-            else this.applyLightTheme();
-        };
-        EventBus.on('theme-change', this.themeChangeListener);
-
-        if (this.isDarkTheme()) {
-            this.applyDarkTheme();
-        } else {
-            this.applyLightTheme();
-        }
-    },
-    beforeUnmount() {
-        EventBus.off('change-theme', this.themeChangeListener);
-    },
     data() {
         return {
             basicData: {
@@ -119,6 +103,23 @@ export default {
             stackedOptions: null
         };
     },
+    mounted() {
+        this.themeChangeListener = (event) => {
+            if (event.dark) this.applyDarkTheme();
+            else this.applyLightTheme();
+        };
+
+        EventBus.on('theme-change', this.themeChangeListener);
+
+        if (this.isDarkTheme()) {
+            this.applyDarkTheme();
+        } else {
+            this.applyLightTheme();
+        }
+    },
+    beforeUnmount() {
+        EventBus.off('change-theme', this.themeChangeListener);
+    },
     methods: {
         isDarkTheme() {
             return this.$appState.darkTheme === true;
diff --git a/pages/chart/BarChartDoc.vue b/pages/chart/BarChartDoc.vue
index df77d4bcc..f9cd953ec 100755
--- a/pages/chart/BarChartDoc.vue
+++ b/pages/chart/BarChartDoc.vue
@@ -1,7 +1,5 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="chart/BarChartDemo.vue" />
-    </ClientOnly>
+    <AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="chart/BarChartDemo.vue" />
 </template>
 
 <script>
diff --git a/pages/chart/ChartDoc.vue b/pages/chart/ChartDoc.vue
index 9645223fd..d12c82686 100755
--- a/pages/chart/ChartDoc.vue
+++ b/pages/chart/ChartDoc.vue
@@ -149,6 +149,12 @@ options: {
                         <td>150</td>
                         <td>Height of the chart in non-responsive mode.</td>
                     </tr>
+                    <tr>
+                        <td>canvasProps</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Uses to pass all properties of the CanvasHTMLAttributes to canvas element inside the component.</td>
+                    </tr>
                 </tbody>
             </table>
         </div>
@@ -231,5 +237,16 @@ options: {
                 </tbody>
             </table>
         </div>
+
+        <h5>Accessibility</h5>
+        <p>
+            Chart components internally use <i>canvas</i> element, refer to the <a href="https://www.chartjs.org/docs/latest/general/accessibility.html">Chart.js accessibility</a> guide for more information. The canvas element can be customized with
+            <i>canvasProps</i> property to define aria roles and properties, in addition any content inside the component is directly passed as a child of the canvas to be able to provide fallback content like a table.
+        </p>
+
+        <pre v-code><code>
+&lt;Chart type="line" :data="data" :canvasProps="{'role': 'img', 'aria-label': 'Data'}" /&gt;
+
+</code></pre>
     </div>
 </template>
diff --git a/pages/chart/Combo.vue b/pages/chart/Combo.vue
index 21b7118de..10608e9ac 100755
--- a/pages/chart/Combo.vue
+++ b/pages/chart/Combo.vue
@@ -19,25 +19,11 @@
 </template>
 
 <script>
-import ComboChartDoc from './ComboChartDoc';
 import EventBus from '@/layouts/AppEventBus';
+import ComboChartDoc from './ComboChartDoc';
 
 export default {
     themeChangeListener: null,
-    mounted() {
-        this.themeChangeListener = (event) => {
-            if (event.dark) this.applyDarkTheme();
-            else this.applyLightTheme();
-        };
-        EventBus.on('theme-change', this.themeChangeListener);
-
-        if (this.isDarkTheme()) {
-            this.applyDarkTheme();
-        }
-    },
-    beforeUnmount() {
-        EventBus.off('change-theme', this.themeChangeListener);
-    },
     data() {
         return {
             chartData: {
@@ -70,6 +56,21 @@ export default {
             chartOptions: this.isDarkTheme() ? this.applyDarkTheme() : this.applyLightTheme()
         };
     },
+    mounted() {
+        this.themeChangeListener = (event) => {
+            if (event.dark) this.applyDarkTheme();
+            else this.applyLightTheme();
+        };
+
+        EventBus.on('theme-change', this.themeChangeListener);
+
+        if (this.isDarkTheme()) {
+            this.applyDarkTheme();
+        }
+    },
+    beforeUnmount() {
+        EventBus.off('change-theme', this.themeChangeListener);
+    },
     methods: {
         isDarkTheme() {
             return this.$appState.darkTheme === true;
diff --git a/pages/chart/ComboChartDoc.vue b/pages/chart/ComboChartDoc.vue
index f59e23411..0689f3305 100755
--- a/pages/chart/ComboChartDoc.vue
+++ b/pages/chart/ComboChartDoc.vue
@@ -1,7 +1,5 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="chart/ComboChartDemo.vue" />
-    </ClientOnly>
+    <AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="chart/ComboChartDemo.vue" />
 </template>
 
 <script>
diff --git a/pages/chart/Doughnut.vue b/pages/chart/Doughnut.vue
index 362917311..bd7c83f0f 100755
--- a/pages/chart/Doughnut.vue
+++ b/pages/chart/Doughnut.vue
@@ -19,21 +19,11 @@
 </template>
 
 <script>
-import DoughnutChartDoc from './DoughnutChartDoc';
 import EventBus from '@/layouts/AppEventBus';
+import DoughnutChartDoc from './DoughnutChartDoc';
 
 export default {
     themeChangeListener: null,
-    mounted() {
-        this.themeChangeListener = (event) => {
-            if (event.dark) this.chartOptions = this.getDarkTheme();
-            else this.chartOptions = this.getLightTheme();
-        };
-        EventBus.on('theme-change', this.themeChangeListener);
-    },
-    beforeUnmount() {
-        EventBus.off('change-theme', this.themeChangeListener);
-    },
     data() {
         return {
             chartData: {
@@ -49,6 +39,17 @@ export default {
             chartOptions: this.isDarkTheme() ? this.getDarkTheme() : this.getLightTheme()
         };
     },
+    mounted() {
+        this.themeChangeListener = (event) => {
+            if (event.dark) this.chartOptions = this.getDarkTheme();
+            else this.chartOptions = this.getLightTheme();
+        };
+
+        EventBus.on('theme-change', this.themeChangeListener);
+    },
+    beforeUnmount() {
+        EventBus.off('change-theme', this.themeChangeListener);
+    },
     methods: {
         isDarkTheme() {
             return this.$appState.darkTheme === true;
diff --git a/pages/chart/DoughnutChartDoc.vue b/pages/chart/DoughnutChartDoc.vue
index a7378f9ef..87980b8be 100755
--- a/pages/chart/DoughnutChartDoc.vue
+++ b/pages/chart/DoughnutChartDoc.vue
@@ -1,7 +1,5 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="chart/DoughnutChartDemo.vue" />
-    </ClientOnly>
+    <AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="chart/DoughnutChartDemo.vue" />
 </template>
 
 <script>
diff --git a/pages/chart/Line.vue b/pages/chart/Line.vue
index 43283f7a8..9faeaa7a3 100755
--- a/pages/chart/Line.vue
+++ b/pages/chart/Line.vue
@@ -30,27 +30,11 @@
 </template>
 
 <script>
-import LineChartDoc from './LineChartDoc';
 import EventBus from '@/layouts/AppEventBus';
+import LineChartDoc from './LineChartDoc';
 
 export default {
     themeChangeListener: null,
-    mounted() {
-        this.themeChangeListener = (event) => {
-            if (event.dark) this.applyDarkTheme();
-            else this.applyLightTheme();
-        };
-        EventBus.on('theme-change', this.themeChangeListener);
-
-        if (this.isDarkTheme()) {
-            this.applyDarkTheme();
-        } else {
-            this.applyLightTheme();
-        }
-    },
-    beforeUnmount() {
-        EventBus.off('change-theme', this.themeChangeListener);
-    },
     data() {
         return {
             basicData: {
@@ -125,6 +109,23 @@ export default {
             multiAxisOptions: null
         };
     },
+    mounted() {
+        this.themeChangeListener = (event) => {
+            if (event.dark) this.applyDarkTheme();
+            else this.applyLightTheme();
+        };
+
+        EventBus.on('theme-change', this.themeChangeListener);
+
+        if (this.isDarkTheme()) {
+            this.applyDarkTheme();
+        } else {
+            this.applyLightTheme();
+        }
+    },
+    beforeUnmount() {
+        EventBus.off('change-theme', this.themeChangeListener);
+    },
     methods: {
         isDarkTheme() {
             return this.$appState.darkTheme === true;
diff --git a/pages/chart/LineChartDoc.vue b/pages/chart/LineChartDoc.vue
index b5ca2bb3a..53bf4c226 100755
--- a/pages/chart/LineChartDoc.vue
+++ b/pages/chart/LineChartDoc.vue
@@ -1,7 +1,5 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="chart/LineChartDemo.vue" />
-    </ClientOnly>
+    <AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="chart/LineChartDemo.vue" />
 </template>
 
 <script>
diff --git a/pages/chart/Pie.vue b/pages/chart/Pie.vue
index b05108349..fb8b85191 100755
--- a/pages/chart/Pie.vue
+++ b/pages/chart/Pie.vue
@@ -19,21 +19,11 @@
 </template>
 
 <script>
-import PieChartDoc from './PieChartDoc';
 import EventBus from '@/layouts/AppEventBus';
+import PieChartDoc from './PieChartDoc';
 
 export default {
     themeChangeListener: null,
-    mounted() {
-        this.themeChangeListener = (event) => {
-            if (event.dark) this.chartOptions = this.getDarkTheme();
-            else this.chartOptions = this.getLightTheme();
-        };
-        EventBus.on('theme-change', this.themeChangeListener);
-    },
-    beforeUnmount() {
-        EventBus.off('change-theme', this.themeChangeListener);
-    },
     data() {
         return {
             chartData: {
@@ -49,6 +39,17 @@ export default {
             chartOptions: this.isDarkTheme() ? this.getDarkTheme() : this.getLightTheme()
         };
     },
+    mounted() {
+        this.themeChangeListener = (event) => {
+            if (event.dark) this.chartOptions = this.getDarkTheme();
+            else this.chartOptions = this.getLightTheme();
+        };
+
+        EventBus.on('theme-change', this.themeChangeListener);
+    },
+    beforeUnmount() {
+        EventBus.off('change-theme', this.themeChangeListener);
+    },
     methods: {
         isDarkTheme() {
             return this.$appState.darkTheme === true;
diff --git a/pages/chart/PieChartDoc.vue b/pages/chart/PieChartDoc.vue
index abf99aa96..acf398ebd 100755
--- a/pages/chart/PieChartDoc.vue
+++ b/pages/chart/PieChartDoc.vue
@@ -1,7 +1,5 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="chart/PieChartDemo.vue" />
-    </ClientOnly>
+    <AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="chart/PieChartDemo.vue" />
 </template>
 
 <script>
diff --git a/pages/chart/PolarArea.vue b/pages/chart/PolarArea.vue
index 00eb36980..38514b63c 100755
--- a/pages/chart/PolarArea.vue
+++ b/pages/chart/PolarArea.vue
@@ -19,21 +19,11 @@
 </template>
 
 <script>
-import PolarAreaChartDoc from './PolarAreaChartDoc';
 import EventBus from '@/layouts/AppEventBus';
+import PolarAreaChartDoc from './PolarAreaChartDoc';
 
 export default {
     themeChangeListener: null,
-    mounted() {
-        this.themeChangeListener = (event) => {
-            if (event.dark) this.chartOptions = this.getDarkTheme();
-            else this.chartOptions = this.getLightTheme();
-        };
-        EventBus.on('theme-change', this.themeChangeListener);
-    },
-    beforeUnmount() {
-        EventBus.off('change-theme', this.themeChangeListener);
-    },
     data() {
         return {
             chartData: {
@@ -49,6 +39,17 @@ export default {
             chartOptions: this.isDarkTheme() ? this.getDarkTheme() : this.getLightTheme()
         };
     },
+    mounted() {
+        this.themeChangeListener = (event) => {
+            if (event.dark) this.chartOptions = this.getDarkTheme();
+            else this.chartOptions = this.getLightTheme();
+        };
+
+        EventBus.on('theme-change', this.themeChangeListener);
+    },
+    beforeUnmount() {
+        EventBus.off('change-theme', this.themeChangeListener);
+    },
     methods: {
         isDarkTheme() {
             return this.$appState.darkTheme === true;
diff --git a/pages/chart/PolarAreaChartDoc.vue b/pages/chart/PolarAreaChartDoc.vue
index 65b60248a..5203dc5c9 100755
--- a/pages/chart/PolarAreaChartDoc.vue
+++ b/pages/chart/PolarAreaChartDoc.vue
@@ -1,7 +1,5 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="chart/PolarAreaChartDemo.vue" />
-    </ClientOnly>
+    <AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="chart/PolarAreaChartDemo.vue" />
 </template>
 
 <script>
diff --git a/pages/chart/Radar.vue b/pages/chart/Radar.vue
index 255c33890..abf6151ac 100755
--- a/pages/chart/Radar.vue
+++ b/pages/chart/Radar.vue
@@ -19,21 +19,11 @@
 </template>
 
 <script>
-import RadarChartDoc from './RadarChartDoc';
 import EventBus from '@/layouts/AppEventBus';
+import RadarChartDoc from './RadarChartDoc';
 
 export default {
     themeChangeListener: null,
-    mounted() {
-        this.themeChangeListener = (event) => {
-            if (event.dark) this.chartOptions = this.getDarkTheme();
-            else this.chartOptions = this.getLightTheme();
-        };
-        EventBus.on('theme-change', this.themeChangeListener);
-    },
-    beforeUnmount() {
-        EventBus.off('change-theme', this.themeChangeListener);
-    },
     data() {
         return {
             chartData: {
@@ -64,6 +54,17 @@ export default {
             chartOptions: this.isDarkTheme() ? this.getDarkTheme() : this.getLightTheme()
         };
     },
+    mounted() {
+        this.themeChangeListener = (event) => {
+            if (event.dark) this.chartOptions = this.getDarkTheme();
+            else this.chartOptions = this.getLightTheme();
+        };
+
+        EventBus.on('theme-change', this.themeChangeListener);
+    },
+    beforeUnmount() {
+        EventBus.off('change-theme', this.themeChangeListener);
+    },
     methods: {
         isDarkTheme() {
             return this.$appState.darkTheme === true;
diff --git a/pages/chart/RadarChartDoc.vue b/pages/chart/RadarChartDoc.vue
index 52b45f17d..e3ebed344 100755
--- a/pages/chart/RadarChartDoc.vue
+++ b/pages/chart/RadarChartDoc.vue
@@ -1,7 +1,5 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="chart/RadarChartDemo.vue" />
-    </ClientOnly>
+    <AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="chart/RadarChartDemo.vue" />
 </template>
 
 <script>
diff --git a/pages/checkbox/CheckboxDoc.vue b/pages/checkbox/CheckboxDoc.vue
index 998eddcf5..1ef0966a1 100755
--- a/pages/checkbox/CheckboxDoc.vue
+++ b/pages/checkbox/CheckboxDoc.vue
@@ -1,29 +1,28 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="CheckboxDemo" :sources="sources" github="checkbox/CheckboxDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="CheckboxDemo" :sources="sources" github="checkbox/CheckboxDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import Checkbox from 'primevue/checkbox';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/checkbox/checkbox.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p>Checkbox can either be used in multiple selection with other checkboxes or as a single checkbox to provide a boolean value.</p>
-            <pre v-code><code>
+        <h5>Getting Started</h5>
+        <p>Checkbox can either be used in multiple selection with other checkboxes or as a single checkbox to provide a boolean value.</p>
+        <pre v-code><code>
 &lt;Checkbox v-model="checked" :binary="true" /&gt;
 
 </code></pre>
 
-            <h5>Multiple Values</h5>
-            <p>Multiple mode is enabled by default, v-model property refers to an array to bind the selected values.</p>
-            <pre v-code><code>
+        <h5>Multiple Values</h5>
+        <p>Multiple mode is enabled by default, v-model property refers to an array to bind the selected values.</p>
+        <pre v-code><code>
 &lt;Checkbox name="city" value="Chicago" v-model="cities" /&gt;
 &lt;Checkbox name="city" value="Los Angeles" v-model="cities" /&gt;
 &lt;Checkbox name="city" value="New York" v-model="cities" /&gt;
@@ -31,7 +30,7 @@ import Checkbox from 'primevue/checkbox';
 
 </code></pre>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 export default {
 	data() {
 		return {
@@ -42,175 +41,187 @@ export default {
 
 </code></pre>
 
-            <p>As v-model is two-way binding enabled, prepopulating the model array with values is enough to display the related checkboxes as checked by default.</p>
+        <p>As v-model is two-way binding enabled, prepopulating the model array with values is enough to display the related checkboxes as checked by default.</p>
 
-            <h5>Properties</h5>
-            <p>Any valid attribute is passed to the root element implicitly, extended properties are as follows;</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>value</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Value of the checkbox.</td>
-                        </tr>
-                        <tr>
-                            <td>modelValue</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Value binding of the checkbox.</td>
-                        </tr>
-                        <tr>
-                            <td>name</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Name of the input element.</td>
-                        </tr>
-                        <tr>
-                            <td>binary</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Allows to select a boolean value instead of multiple values.</td>
-                        </tr>
-                        <tr>
-                            <td>trueValue</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Value in checked state.</td>
-                        </tr>
-                        <tr>
-                            <td>falseValue</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Value in unchecked state.</td>
-                        </tr>
-                        <tr>
-                            <td>disabled</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When present, it specifies that the element should be disabled.</td>
-                        </tr>
-                        <tr>
-                            <td>readonly</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When present, it specifies that an input field is read-only.</td>
-                        </tr>
-                        <tr>
-                            <td>required</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When present, it specifies that the element is required.</td>
-                        </tr>
-                        <tr>
-                            <td>tabindex</td>
-                            <td>number</td>
-                            <td>null</td>
-                            <td>Index of the element in tabbing order.</td>
-                        </tr>
-                        <tr>
-                            <td>inputId</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Identifier of the underlying input element.</td>
-                        </tr>
-                        <tr>
-                            <td>inputClass</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Style class of the input field.</td>
-                        </tr>
-                        <tr>
-                            <td>inputStyle</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Inline style of the input field.</td>
-                        </tr>
-                        <tr>
-                            <td>inputProps</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <p>Any valid attribute is passed to the root element implicitly, extended properties are as follows;</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>value</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Value of the checkbox.</td>
+                    </tr>
+                    <tr>
+                        <td>modelValue</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Value binding of the checkbox.</td>
+                    </tr>
+                    <tr>
+                        <td>name</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Name of the input element.</td>
+                    </tr>
+                    <tr>
+                        <td>binary</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Allows to select a boolean value instead of multiple values.</td>
+                    </tr>
+                    <tr>
+                        <td>trueValue</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Value in checked state.</td>
+                    </tr>
+                    <tr>
+                        <td>falseValue</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Value in unchecked state.</td>
+                    </tr>
+                    <tr>
+                        <td>disabled</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When present, it specifies that the element should be disabled.</td>
+                    </tr>
+                    <tr>
+                        <td>readonly</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When present, it specifies that an input field is read-only.</td>
+                    </tr>
+                    <tr>
+                        <td>required</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When present, it specifies that the element is required.</td>
+                    </tr>
+                    <tr>
+                        <td>tabindex</td>
+                        <td>number</td>
+                        <td>null</td>
+                        <td>Index of the element in tabbing order.</td>
+                    </tr>
+                    <tr>
+                        <td>inputId</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Identifier of the underlying input element.</td>
+                    </tr>
+                    <tr>
+                        <td>inputClass</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Style class of the input field.</td>
+                    </tr>
+                    <tr>
+                        <td>inputStyle</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Inline style of the input field.</td>
+                    </tr>
+                    <tr>
+                        <td>inputProps</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.</td>
+                    </tr>
+                    <tr>
+                        <td>aria-label</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Defines a string value that labels an interactive element.</td>
+                    </tr>
+                    <tr>
+                        <td>aria-labelledby</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Events</h5>
-            <p>In addition to the following events, any other valid events such as focus and blur are passed implicitly.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>click</td>
-                            <td>event: Browser event</td>
-                            <td>Callback to invoke on value click.</td>
-                        </tr>
-                        <tr>
-                            <td>change</td>
-                            <td>event: Browser event</td>
-                            <td>Callback to invoke on value change.</td>
-                        </tr>
-                        <tr>
-                            <td>input</td>
-                            <td>value: New value</td>
-                            <td>Callback to invoke on value change.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Events</h5>
+        <p>In addition to the following events, any other valid events such as focus and blur are passed implicitly.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>click</td>
+                        <td>event: Browser event</td>
+                        <td>Callback to invoke on value click.</td>
+                    </tr>
+                    <tr>
+                        <td>change</td>
+                        <td>event: Browser event</td>
+                        <td>Callback to invoke on value change.</td>
+                    </tr>
+                    <tr>
+                        <td>input</td>
+                        <td>value: New value</td>
+                        <td>Callback to invoke on value change.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-checkbox</td>
-                            <td>Container element</td>
-                        </tr>
-                        <tr>
-                            <td>p-checkbox-box</td>
-                            <td>Container of icon.</td>
-                        </tr>
-                        <tr>
-                            <td>p-checkbox-icon</td>
-                            <td>Icon element.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-checkbox</td>
+                        <td>Container element</td>
+                    </tr>
+                    <tr>
+                        <td>p-checkbox-box</td>
+                        <td>Container of icon.</td>
+                    </tr>
+                    <tr>
+                        <td>p-checkbox-icon</td>
+                        <td>Icon element.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Accessibility</h5>
-            <h6>Screen Reader</h6>
-            <p>
-                Checkbox component uses a hidden native checkbox element internally that is only visible to screen readers. Value to describe the component can either be provided via <i>label</i> tag combined with <i>id</i> prop or using
-                <i>aria-labelledby</i>, <i>aria-label</i> props.
-            </p>
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>
+            Checkbox component uses a hidden native checkbox element internally that is only visible to screen readers. Value to describe the component can either be provided via <i>label</i> tag combined with <i>id</i> prop or using
+            <i>aria-labelledby</i>, <i>aria-label</i> props.
+        </p>
 
-            <pre v-code><code>
+        <pre v-code><code>
 &lt;label for="chkbox1"&gt;Remember Me&lt;/label&gt;
 &lt;Checkbox inputId="chkbox1" /&gt;
 
@@ -221,32 +232,31 @@ export default {
 
 </code></pre>
 
-            <h6>Keyboard Support</h6>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Key</th>
-                            <th>Function</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td><i>tab</i></td>
-                            <td>Moves focus to the checkbox.</td>
-                        </tr>
-                        <tr>
-                            <td><i>space</i></td>
-                            <td>Toggles the checked state.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h6>Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>tab</i></td>
+                        <td>Moves focus to the checkbox.</td>
+                    </tr>
+                    <tr>
+                        <td><i>space</i></td>
+                        <td>Toggles the checked state.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc>
-    </ClientOnly>
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
diff --git a/pages/checkbox/index.vue b/pages/checkbox/index.vue
index bbaa4674c..21c1af764 100755
--- a/pages/checkbox/index.vue
+++ b/pages/checkbox/index.vue
@@ -12,31 +12,31 @@
             <div class="card">
                 <h5>Basic</h5>
                 <div class="field-checkbox">
-                    <Checkbox inputId="binary" v-model="checked" :binary="true" />
+                    <Checkbox v-model="checked" inputId="binary" :binary="true" />
                     <label for="binary">Remember Me</label>
                 </div>
 
                 <h5>Multiple</h5>
                 <div class="field-checkbox">
-                    <Checkbox inputId="city1" name="city" value="Chicago" v-model="cities" />
+                    <Checkbox v-model="cities" inputId="city1" name="city" value="Chicago" />
                     <label for="city1">Chicago</label>
                 </div>
                 <div class="field-checkbox">
-                    <Checkbox inputId="city2" name="city" value="Los Angeles" v-model="cities" />
+                    <Checkbox v-model="cities" inputId="city2" name="city" value="Los Angeles" />
                     <label for="city2">Los Angeles</label>
                 </div>
                 <div class="field-checkbox">
-                    <Checkbox inputId="city3" name="city" value="New York" v-model="cities" />
+                    <Checkbox v-model="cities" inputId="city3" name="city" value="New York" />
                     <label for="city3">New York</label>
                 </div>
                 <div class="field-checkbox">
-                    <Checkbox inputId="city4" name="city" value="San Francisco" v-model="cities" />
+                    <Checkbox v-model="cities" inputId="city4" name="city" value="San Francisco" />
                     <label for="city4">San Francisco</label>
                 </div>
 
                 <h5>Dynamic Values, Preselection, Value Binding and Disabled Option</h5>
                 <div v-for="category of categories" :key="category.key" class="field-checkbox">
-                    <Checkbox :inputId="category.key" name="category" :value="category.name" v-model="selectedCategories" :disabled="category.key === 'R'" />
+                    <Checkbox v-model="selectedCategories" :inputId="category.key" name="category" :value="category.name" :disabled="category.key === 'R'" />
                     <label :for="category.key">{{ category.name }}</label>
                 </div>
             </div>
diff --git a/pages/chip/ChipDoc.vue b/pages/chip/ChipDoc.vue
index cc333d6a7..a00073ee5 100644
--- a/pages/chip/ChipDoc.vue
+++ b/pages/chip/ChipDoc.vue
@@ -1,146 +1,177 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="ChipDemo" :sources="sources" github="chip/ChipDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="ChipDemo" :sources="sources" github="chip/ChipDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import Chip from 'primevue/chip';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/chip/chip.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p>Chip can display labels, icons and images.</p>
-            <pre v-code><code>
+        <h5>Getting Started</h5>
+        <p>Chip can display labels, icons and images.</p>
+        <pre v-code><code>
 &lt;Chip label="Text Only" /&gt;
 &lt;Chip label="Text with icon" icon="pi pi-check" /&gt;
 &lt;Chip label="Text with image" image="user.png" /&gt;
 
 </code></pre>
 
-            <h5>Removable</h5>
-            <p>Setting <i>removable</i> property displays an icon to close the chip, the optional <i>remove</i> event is available to get notified when a chip is hidden.</p>
-            <pre v-code><code>
+        <h5>Removable</h5>
+        <p>Setting <i>removable</i> property displays an icon to close the chip, the optional <i>remove</i> event is available to get notified when a chip is hidden.</p>
+        <pre v-code><code>
 &lt;Chip label="Text" removable /&gt;
 
 </code></pre>
 
-            <h5>Templating</h5>
-            <p>Content can easily be customized with the default slot instead of using the built-in modes.</p>
-            <pre v-code><code>
+        <h5>Templating</h5>
+        <p>Content can easily be customized with the default slot instead of using the built-in modes.</p>
+        <pre v-code><code>
 &lt;Chip&gt;
-   Content
+    Content
 &lt;/Chip&gt;
 
 </code></pre>
 
-            <h5>Properties</h5>
-            <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>label</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Defines the text to display.</td>
-                        </tr>
-                        <tr>
-                            <td>icon</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Defines the icon to display.</td>
-                        </tr>
-                        <tr>
-                            <td>image</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Defines the image to display.</td>
-                        </tr>
-                        <tr>
-                            <td>removable</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Whether to display a remove icon.</td>
-                        </tr>
-                        <tr>
-                            <td>removeIconClass</td>
-                            <td>string</td>
-                            <td>pi pi-times-circle</td>
-                            <td>Icon of the remove element.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>label</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Defines the text to display.</td>
+                    </tr>
+                    <tr>
+                        <td>icon</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Defines the icon to display.</td>
+                    </tr>
+                    <tr>
+                        <td>image</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Defines the image to display.</td>
+                    </tr>
+                    <tr>
+                        <td>removable</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Whether to display a remove icon.</td>
+                    </tr>
+                    <tr>
+                        <td>removeIcon</td>
+                        <td>string</td>
+                        <td>pi pi-times-circle</td>
+                        <td>Icon of the remove element.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Events</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>remove</td>
-                            <td>event: Browser event</td>
-                            <td>Callback to invoke when a chip is removed.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Events</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>remove</td>
+                        <td>event: Browser event</td>
+                        <td>Callback to invoke when a chip is removed.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-chip</td>
-                            <td>Container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-chip-image</td>
-                            <td>Container element in image mode.</td>
-                        </tr>
-                        <tr>
-                            <td>p-chip-text</td>
-                            <td>Text of the chip.</td>
-                        </tr>
-                        <tr>
-                            <td>p-chip-remove-icon</td>
-                            <td>Remove icon.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-chip</td>
+                        <td>Container element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-chip-image</td>
+                        <td>Container element in image mode.</td>
+                    </tr>
+                    <tr>
+                        <td>p-chip-text</td>
+                        <td>Text of the chip.</td>
+                    </tr>
+                    <tr>
+                        <td>p-chip-remove-icon</td>
+                        <td>Remove icon.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc>
-    </ClientOnly>
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>
+            Chip uses the <i>label</i> property as the default <i>aria-label</i>, since any attribute is passed to the root element <i>aria-labelledby</i> or <i>aria-label</i> can be used to override the default behavior. Removable chips have a
+            <i>tabindex</i> and focusable with the tab key.
+        </p>
+
+        <h6>Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>backspace</i>
+                        </td>
+                        <td>Hides removable.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>Hides removable.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
diff --git a/pages/chip/index.vue b/pages/chip/index.vue
index 57b7285e5..3798ae0f6 100644
--- a/pages/chip/index.vue
+++ b/pages/chip/index.vue
@@ -28,18 +28,18 @@
 
                 <h5>Image</h5>
                 <div class="flex align-items-center">
-                    <Chip label="Amy Elsner" image="/demo/images/avatar/amyelsner.png" class="mr-2" />
-                    <Chip label="Asiya Javayant" image="/demo/images/avatar/asiyajavayant.png" class="mr-2" />
-                    <Chip label="Onyama Limba" image="/demo/images/avatar/onyamalimba.png" class="mr-2" />
-                    <Chip label="Xuxue Feng" image="/demo/images/avatar/xuxuefeng.png" removable />
+                    <Chip label="Amy Elsner" image="demo/images/avatar/amyelsner.png" class="mr-2" />
+                    <Chip label="Asiya Javayant" image="demo/images/avatar/asiyajavayant.png" class="mr-2" />
+                    <Chip label="Onyama Limba" image="demo/images/avatar/onyamalimba.png" class="mr-2" />
+                    <Chip label="Xuxue Feng" image="demo/images/avatar/xuxuefeng.png" removable />
                 </div>
 
                 <h5>Styling</h5>
                 <div class="flex align-items-center">
                     <Chip label="Action" class="mr-2 custom-chip" />
                     <Chip label="Apple" icon="pi pi-apple" class="mr-2 custom-chip" />
-                    <Chip label="Onyama Limba" image="/demo/images/avatar/onyamalimba.png" class="mr-2 custom-chip" />
-                    <Chip label="Xuxue Feng" image="/demo/images/avatar/xuxuefeng.png" class="custom-chip" removable />
+                    <Chip label="Onyama Limba" image="demo/images/avatar/onyamalimba.png" class="mr-2 custom-chip" />
+                    <Chip label="Xuxue Feng" image="demo/images/avatar/xuxuefeng.png" class="custom-chip" removable />
                 </div>
             </div>
         </div>
diff --git a/pages/chips/ChipsDoc.vue b/pages/chips/ChipsDoc.vue
index fa887395d..abd5018b1 100755
--- a/pages/chips/ChipsDoc.vue
+++ b/pages/chips/ChipsDoc.vue
@@ -1,29 +1,28 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="ChipsDemo" :sources="sources" github="chips/ChipsDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="ChipsDemo" :sources="sources" github="chips/ChipsDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import Chips from 'primevue/chips';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/chips/chips.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p>An array as the value can be bound using the standard v-model directive.</p>
-            <pre v-code><code>
+        <h5>Getting Started</h5>
+        <p>An array as the value can be bound using the standard v-model directive.</p>
+        <pre v-code><code>
 &lt;Chips v-model="value" /&gt;
 
 </code></pre>
 
-            <h5>Custom Content</h5>
-            <p>A chip is customized using the <i>chip</i> template where the chip value is passed to the slotProps with the value property.</p>
-            <pre v-code><code><template v-pre>
+        <h5>Custom Content</h5>
+        <p>A chip is customized using the <i>chip</i> template where the chip value is passed to the slotProps with the value property.</p>
+        <pre v-code><code><template v-pre>
 &lt;Chips v-model="value"&gt;
 	&lt;template #chip="slotProps"&gt;
 		&lt;div&gt;
@@ -35,182 +34,188 @@ import Chips from 'primevue/chips';
 </template>
 </code></pre>
 
-            <h5>Properties</h5>
-            <p>Any property such as name and placeholder are passed to the underlying input element. Following are the additional properties to configure the component.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>modelValue</td>
-                            <td>array</td>
-                            <td>null</td>
-                            <td>Value of the component.</td>
-                        </tr>
-                        <tr>
-                            <td>max</td>
-                            <td>number</td>
-                            <td>null</td>
-                            <td>Maximum number of entries allowed.</td>
-                        </tr>
-                        <tr>
-                            <td>separator</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Separator char to add an item when pressed in addition to the enter key. Currently only possible value is ","</td>
-                        </tr>
-                        <tr>
-                            <td>addOnBlur</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Whether to add an item when the input loses focus.</td>
-                        </tr>
-                        <tr>
-                            <td>allowDuplicate</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether to allow duplicate values or not.</td>
-                        </tr>
-                        <tr>
-                            <td>disabled</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When present, it specifies that the element should be disabled.</td>
-                        </tr>
-                        <tr>
-                            <td>placeholder</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Placeholder text for the input.</td>
-                        </tr>
-                        <tr>
-                            <td>inputId</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the component input field.</td>
-                        </tr>
-                        <tr>
-                            <td>inputClass</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the input field.</td>
-                        </tr>
-                        <tr>
-                            <td>inputStyle</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Inline style of the input field.</td>
-                        </tr>
-                        <tr>
-                            <td>inputProps</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <p>Any property such as name and placeholder are passed to the underlying input element. Following are the additional properties to configure the component.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>modelValue</td>
+                        <td>array</td>
+                        <td>null</td>
+                        <td>Value of the component.</td>
+                    </tr>
+                    <tr>
+                        <td>max</td>
+                        <td>number</td>
+                        <td>null</td>
+                        <td>Maximum number of entries allowed.</td>
+                    </tr>
+                    <tr>
+                        <td>separator</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Separator char to add an item when pressed in addition to the enter key. Currently only possible value is ","</td>
+                    </tr>
+                    <tr>
+                        <td>addOnBlur</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Whether to add an item when the input loses focus.</td>
+                    </tr>
+                    <tr>
+                        <td>allowDuplicate</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Whether to allow duplicate values or not.</td>
+                    </tr>
+                    <tr>
+                        <td>disabled</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When present, it specifies that the element should be disabled.</td>
+                    </tr>
+                    <tr>
+                        <td>placeholder</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Placeholder text for the input.</td>
+                    </tr>
+                    <tr>
+                        <td>inputId</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the component input field.</td>
+                    </tr>
+                    <tr>
+                        <td>inputClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the input field.</td>
+                    </tr>
+                    <tr>
+                        <td>inputStyle</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Inline style of the input field.</td>
+                    </tr>
+                    <tr>
+                        <td>inputProps</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.</td>
+                    </tr>
+                    <tr>
+                        <td>removeTokenIcon</td>
+                        <td>string</td>
+                        <td>pi pi-times-circle</td>
+                        <td>Icon to display in chip remove action.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Events</h5>
-            <p>Any valid event such as focus, blur and input are passed to the underlying input element. Following are the additional events to configure the component.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>add</td>
-                            <td>
-                                originalEvent: Browser event <br />
-                                value: Added item value
-                            </td>
-                            <td>Callback to invoke when a chip is added.</td>
-                        </tr>
-                        <tr>
-                            <td>remove</td>
-                            <td>
-                                originalEvent: Browser event <br />
-                                value: Removed item value
-                            </td>
-                            <td>Callback to invoke when a chip is removed.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Events</h5>
+        <p>Any valid event such as focus, blur and input are passed to the underlying input element. Following are the additional events to configure the component.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>add</td>
+                        <td>
+                            originalEvent: Browser event <br />
+                            value: Added item value
+                        </td>
+                        <td>Callback to invoke when a chip is added.</td>
+                    </tr>
+                    <tr>
+                        <td>remove</td>
+                        <td>
+                            originalEvent: Browser event <br />
+                            value: Removed item value
+                        </td>
+                        <td>Callback to invoke when a chip is removed.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Slots</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>chip</td>
-                            <td>value: Value of the component</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Slots</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>chip</td>
+                        <td>value: Value of the component</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-chips</td>
-                            <td>Container element</td>
-                        </tr>
-                        <tr>
-                            <td>p-chips-token</td>
-                            <td>Chip element container.</td>
-                        </tr>
-                        <tr>
-                            <td>p-chips-token-icon</td>
-                            <td>Icon of a chip.</td>
-                        </tr>
-                        <tr>
-                            <td>p-chips-token-label</td>
-                            <td>label of a chip.</td>
-                        </tr>
-                        <tr>
-                            <td>p-chips-input-token</td>
-                            <td>Container of input element.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-chips</td>
+                        <td>Container element</td>
+                    </tr>
+                    <tr>
+                        <td>p-chips-token</td>
+                        <td>Chip element container.</td>
+                    </tr>
+                    <tr>
+                        <td>p-chips-token-icon</td>
+                        <td>Icon of a chip.</td>
+                    </tr>
+                    <tr>
+                        <td>p-chips-token-label</td>
+                        <td>label of a chip.</td>
+                    </tr>
+                    <tr>
+                        <td>p-chips-input-token</td>
+                        <td>Container of input element.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Accessibility</h5>
-            <h6>Screen Reader</h6>
-            <p>
-                Value to describe the component can either be provided via <i>label</i> tag combined with <i>inputId</i> prop or using <i>aria-labelledby</i>, <i>aria-label</i> props. Chip list uses <i>listbox</i> role with
-                <i>aria-orientation</i> set to horizontal whereas each chip has the <i>option</i> role with <i>aria-label</i> set to the label of the chip.
-            </p>
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>
+            Value to describe the component can either be provided via <i>label</i> tag combined with <i>inputId</i> prop or using <i>aria-labelledby</i>, <i>aria-label</i> props. Chip list uses <i>listbox</i> role with <i>aria-orientation</i> set to
+            horizontal whereas each chip has the <i>option</i> role with <i>aria-label</i> set to the label of the chip.
+        </p>
 
-            <pre v-code><code>
+        <pre v-code><code>
 &lt;label for="chips1"&gt;Tags&lt;/label&gt;
 &lt;Chips inputId="chips1" /&gt;
 
@@ -221,66 +226,65 @@ import Chips from 'primevue/chips';
 
 </code></pre>
 
-            <h6>Input Field Keyboard Support</h6>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Key</th>
-                            <th>Function</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td><i>tab</i></td>
-                            <td>Moves focus to the input element</td>
-                        </tr>
-                        <tr>
-                            <td><i>enter</i></td>
-                            <td>Adds a new chips using the input field value.</td>
-                        </tr>
-                        <tr>
-                            <td><i>backspace</i></td>
-                            <td>Deletes the previous chip if the input field is empty.</td>
-                        </tr>
-                        <tr>
-                            <td><i>left arrow</i></td>
-                            <td>Moves focus to the previous chip if available and input field is empty.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h6>Input Field Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>tab</i></td>
+                        <td>Moves focus to the input element</td>
+                    </tr>
+                    <tr>
+                        <td><i>enter</i></td>
+                        <td>Adds a new chips using the input field value.</td>
+                    </tr>
+                    <tr>
+                        <td><i>backspace</i></td>
+                        <td>Deletes the previous chip if the input field is empty.</td>
+                    </tr>
+                    <tr>
+                        <td><i>left arrow</i></td>
+                        <td>Moves focus to the previous chip if available and input field is empty.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h6>Chip Keyboard Support</h6>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Key</th>
-                            <th>Function</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td><i>left arrow</i></td>
-                            <td>Moves focus to the previous chip if available.</td>
-                        </tr>
-                        <tr>
-                            <td><i>right arrow</i></td>
-                            <td>Moves focus to the next chip, if there is none then input field receives the focus.</td>
-                        </tr>
-                        <tr>
-                            <td><i>backspace</i></td>
-                            <td>Deletes the chips and adds focus to the input field.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h6>Chip Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>left arrow</i></td>
+                        <td>Moves focus to the previous chip if available.</td>
+                    </tr>
+                    <tr>
+                        <td><i>right arrow</i></td>
+                        <td>Moves focus to the next chip, if there is none then input field receives the focus.</td>
+                    </tr>
+                    <tr>
+                        <td><i>backspace</i></td>
+                        <td>Deletes the chips and adds focus to the input field.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc>
-    </ClientOnly>
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
@@ -300,8 +304,11 @@ export default {
             <h5>Comma Separator</h5>
             <Chips v-model="value2" separator="," />
 
+            <h5>RegExp Separator</h5>
+            <Chips v-model="value3" :separator="separatorExp" />
+
             <h5>Template</h5>
-            <Chips v-model="value3">
+            <Chips v-model="value4">
                 <template #chip="slotProps">
                     <div>
                         <span>{{slotProps.value}} - (active) </span>
@@ -319,7 +326,9 @@ export default {
         return {
             value1: null,
             value2: null,
-            value3: null
+            value3: null,
+            value4: null,
+            separatorExp:/,| /
         }
     }
 }
@@ -338,8 +347,11 @@ export default {
             <h5>Comma Separator</h5>
             <Chips v-model="value2" separator="," />
 
+            <h5>RegExp Separator</h5>
+            <Chips v-model="value3" :separator="separatorExp" />
+
             <h5>Template</h5>
-            <Chips v-model="value3">
+            <Chips v-model="value4">
                 <template #chip="slotProps">
                     <div>
                         <span>{{slotProps.value}} - (active) </span>
@@ -359,6 +371,8 @@ export default {
         const value1 = ref();
         const value2 = ref();
         const value3 = ref();
+        const value4 = ref();
+        const separatorExp = ref(/,| /);
 
         return { value1, value2, value3 }
     }
@@ -379,6 +393,9 @@ export default {
                     <h5>Comma Separator</h5>
                     <p-chips v-model="value2" separator=","></p-chips>
 
+                    <h5>RegExp Separator</h5>
+                    <p-chips v-model="value3" :separator="separatorExp" />
+
                     <h5>Template</h5>
                     <p-chips v-model="value3">
                         <template #chip="slotProps">
@@ -400,6 +417,8 @@ export default {
                 const value1 = ref();
                 const value2 = ref();
                 const value3 = ref();
+                const value4 = ref();
+                const separatorExp = ref(/,| /);
 
                 return { value1, value2, value3 }
             },
diff --git a/pages/chips/index.vue b/pages/chips/index.vue
index 2a08946be..867c86e89 100755
--- a/pages/chips/index.vue
+++ b/pages/chips/index.vue
@@ -16,8 +16,11 @@
                 <h5>Comma Separator</h5>
                 <Chips v-model="value2" separator="," />
 
+                <h5>RegExp Separator</h5>
+                <Chips v-model="value3" :separator="separatorExp" />
+
                 <h5>Template</h5>
-                <Chips v-model="value3">
+                <Chips v-model="value4">
                     <template #chip="slotProps">
                         <div>
                             <span>{{ slotProps.value }} - (active) </span>
@@ -40,7 +43,9 @@ export default {
         return {
             value1: null,
             value2: null,
-            value3: null
+            value3: null,
+            value4: null,
+            separatorExp: /,| /
         };
     },
     components: {
diff --git a/pages/colorpicker/ColorPickerDoc.vue b/pages/colorpicker/ColorPickerDoc.vue
index 0ee760a39..6242af051 100755
--- a/pages/colorpicker/ColorPickerDoc.vue
+++ b/pages/colorpicker/ColorPickerDoc.vue
@@ -1,27 +1,26 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="ColorPickerDemo" :sources="sources" :extFiles="extFiles" github="colorpicker/ColorPickerDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="ColorPickerDemo" :sources="sources" :extFiles="extFiles" github="colorpicker/ColorPickerDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import ColorPicker from 'primevue/colorpicker';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/colorpicker/colorpicker.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p>A model can be bound using the standard v-model directive. Default color format to use in value binding is "hex" and other possible values are "rgb" and "hsb".</p>
-            <pre v-code><code>
+        <h5>Getting Started</h5>
+        <p>A model can be bound using the standard v-model directive. Default color format to use in value binding is "hex" and other possible values are "rgb" and "hsb".</p>
+        <pre v-code><code>
 &lt;ColorPicker v-model="color" /&gt;
 
 </code></pre>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 export default {
     data() {
         return {
@@ -32,278 +31,277 @@ export default {
 
 </code></pre>
 
-            <h5>Inline and Overlay</h5>
-            <p>ColorPicker is displayed as an overlay with a preview option by default where second alternative is the inline mode.</p>
-            <pre v-code><code>
+        <h5>Inline and Overlay</h5>
+        <p>ColorPicker is displayed as an overlay with a preview option by default where second alternative is the inline mode.</p>
+        <pre v-code><code>
 &lt;ColorPicker v-model="color" :inline="true" /&gt;
 
 </code></pre>
 
-            <h5>Properties</h5>
-            <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>modelValue</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Value of the component.</td>
-                        </tr>
-                        <tr>
-                            <td>defaultColor</td>
-                            <td>string</td>
-                            <td>ff0000</td>
-                            <td>Initial color to display when value is not defined.</td>
-                        </tr>
-                        <tr>
-                            <td>inline</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Whether to display as an overlay or not.</td>
-                        </tr>
-                        <tr>
-                            <td>format</td>
-                            <td>string</td>
-                            <td>hex</td>
-                            <td>Format to use in value binding, supported formats are "hex", "rgb" and "hsb".</td>
-                        </tr>
-                        <tr>
-                            <td>disabled</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When present, it specifies that the component should be disabled.</td>
-                        </tr>
-                        <tr>
-                            <td>tabindex</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Index of the element in tabbing order.</td>
-                        </tr>
-                        <tr>
-                            <td>baseZIndex</td>
-                            <td>number</td>
-                            <td>0</td>
-                            <td>Base zIndex value to use in layering.</td>
-                        </tr>
-                        <tr>
-                            <td>autoZIndex</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether to automatically manage layering.</td>
-                        </tr>
-                        <tr>
-                            <td>panelClass</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the overlay panel.</td>
-                        </tr>
-                        <tr>
-                            <td>appendTo</td>
-                            <td>string</td>
-                            <td>body</td>
-                            <td>A valid query selector or an HTMLElement to specify where the overlay gets attached. Special keywords are "body" for document body and "self" for the element itself.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>modelValue</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Value of the component.</td>
+                    </tr>
+                    <tr>
+                        <td>defaultColor</td>
+                        <td>string</td>
+                        <td>ff0000</td>
+                        <td>Initial color to display when value is not defined.</td>
+                    </tr>
+                    <tr>
+                        <td>inline</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Whether to display as an overlay or not.</td>
+                    </tr>
+                    <tr>
+                        <td>format</td>
+                        <td>string</td>
+                        <td>hex</td>
+                        <td>Format to use in value binding, supported formats are "hex", "rgb" and "hsb".</td>
+                    </tr>
+                    <tr>
+                        <td>disabled</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When present, it specifies that the component should be disabled.</td>
+                    </tr>
+                    <tr>
+                        <td>tabindex</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Index of the element in tabbing order.</td>
+                    </tr>
+                    <tr>
+                        <td>baseZIndex</td>
+                        <td>number</td>
+                        <td>0</td>
+                        <td>Base zIndex value to use in layering.</td>
+                    </tr>
+                    <tr>
+                        <td>autoZIndex</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Whether to automatically manage layering.</td>
+                    </tr>
+                    <tr>
+                        <td>panelClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the overlay panel.</td>
+                    </tr>
+                    <tr>
+                        <td>appendTo</td>
+                        <td>string</td>
+                        <td>body</td>
+                        <td>A valid query selector or an HTMLElement to specify where the overlay gets attached. Special keywords are "body" for document body and "self" for the element itself.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Events</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>change</td>
-                            <td>
-                                event.originalEvent: Browser event <br />
-                                event.value: Selected color
-                            </td>
-                            <td>Callback to invoke when a color is selected.</td>
-                        </tr>
-                        <tr>
-                            <td>show</td>
-                            <td>-</td>
-                            <td>Callback to invoke when popup is shown.</td>
-                        </tr>
-                        <tr>
-                            <td>hide</td>
-                            <td>-</td>
-                            <td>Callback to invoke when popup is hidden.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Events</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>change</td>
+                        <td>
+                            event.originalEvent: Browser event <br />
+                            event.value: Selected color
+                        </td>
+                        <td>Callback to invoke when a color is selected.</td>
+                    </tr>
+                    <tr>
+                        <td>show</td>
+                        <td>-</td>
+                        <td>Callback to invoke when popup is shown.</td>
+                    </tr>
+                    <tr>
+                        <td>hide</td>
+                        <td>-</td>
+                        <td>Callback to invoke when popup is hidden.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Following is the list style classed of the component.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-colorpicker</td>
-                            <td>Container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-colorpicker-overlay</td>
-                            <td>Container element in overlay mode.</td>
-                        </tr>
-                        <tr>
-                            <td>p-colorpicker-preview</td>
-                            <td>Preview input in overlay mode.</td>
-                        </tr>
-                        <tr>
-                            <td>p-colorpicker-panel</td>
-                            <td>Panel element of the colorpicker.</td>
-                        </tr>
-                        <tr>
-                            <td>p-colorpicker-content</td>
-                            <td>Wrapper that contains color and hue sections.</td>
-                        </tr>
-                        <tr>
-                            <td>p-colorpicker-color-selector</td>
-                            <td>Color selector container.</td>
-                        </tr>
-                        <tr>
-                            <td>p-colorpicker-color</td>
-                            <td>Color element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-colorpicker-color-handle</td>
-                            <td>Handle of the color element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-colorpicker-hue</td>
-                            <td>Hue slider.</td>
-                        </tr>
-                        <tr>
-                            <td>p-colorpicker-hue-handle</td>
-                            <td>Handle of the hue slider.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list style classed of the component.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-colorpicker</td>
+                        <td>Container element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-colorpicker-overlay</td>
+                        <td>Container element in overlay mode.</td>
+                    </tr>
+                    <tr>
+                        <td>p-colorpicker-preview</td>
+                        <td>Preview input in overlay mode.</td>
+                    </tr>
+                    <tr>
+                        <td>p-colorpicker-panel</td>
+                        <td>Panel element of the colorpicker.</td>
+                    </tr>
+                    <tr>
+                        <td>p-colorpicker-content</td>
+                        <td>Wrapper that contains color and hue sections.</td>
+                    </tr>
+                    <tr>
+                        <td>p-colorpicker-color-selector</td>
+                        <td>Color selector container.</td>
+                    </tr>
+                    <tr>
+                        <td>p-colorpicker-color</td>
+                        <td>Color element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-colorpicker-color-handle</td>
+                        <td>Handle of the color element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-colorpicker-hue</td>
+                        <td>Hue slider.</td>
+                    </tr>
+                    <tr>
+                        <td>p-colorpicker-hue-handle</td>
+                        <td>Handle of the hue slider.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Accessibility</h5>
-            <h6>Screen Reader</h6>
-            <p>
-                Specification does not cover a color picker <a href="https://github.com/w3c/aria/issues/930">yet</a> and using a semantic native color picker is not consistent across browsers so currently component is not compatible with screen
-                readers. In the upcoming versions, text fields will be introduced below the slider section to be able to pick a color using accessible text boxes in hsl, rgba and hex formats.
-            </p>
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>
+            Specification does not cover a color picker <a href="https://github.com/w3c/aria/issues/930">yet</a> and using a semantic native color picker is not consistent across browsers so currently component is not compatible with screen readers.
+            In the upcoming versions, text fields will be introduced below the slider section to be able to pick a color using accessible text boxes in hsl, rgba and hex formats.
+        </p>
 
-            <h6>Closed State Keyboard Support of Popup ColorPicker</h6>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Key</th>
-                            <th>Function</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td><i>tab</i></td>
-                            <td>Moves focus to the color picker button.</td>
-                        </tr>
-                        <tr>
-                            <td><i>space</i></td>
-                            <td>Opens the popup and moves focus to the color slider.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h6>Closed State Keyboard Support of Popup ColorPicker</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>tab</i></td>
+                        <td>Moves focus to the color picker button.</td>
+                    </tr>
+                    <tr>
+                        <td><i>space</i></td>
+                        <td>Opens the popup and moves focus to the color slider.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h6>Popup Keyboard Support</h6>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Key</th>
-                            <th>Function</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td><i>enter</i></td>
-                            <td>Selects the color and closes the popup.</td>
-                        </tr>
-                        <tr>
-                            <td><i>space</i></td>
-                            <td>Selects the color and closes the popup.</td>
-                        </tr>
-                        <tr>
-                            <td><i>escape</i></td>
-                            <td>Closes the popup, moves focus to the input.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h6>Popup Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>enter</i></td>
+                        <td>Selects the color and closes the popup.</td>
+                    </tr>
+                    <tr>
+                        <td><i>space</i></td>
+                        <td>Selects the color and closes the popup.</td>
+                    </tr>
+                    <tr>
+                        <td><i>escape</i></td>
+                        <td>Closes the popup, moves focus to the input.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h6>Color Picker Slider</h6>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Key</th>
-                            <th>Function</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td><i>arrow keys</i></td>
-                            <td>Changes color.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h6>Color Picker Slider</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>arrow keys</i></td>
+                        <td>Changes color.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h6>Hue Slider</h6>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Key</th>
-                            <th>Function</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>
-                                <span class="inline-flex flex-column">
-                                    <i class="mb-1">up arrow</i>
-                                    <i>down arrow</i>
-                                </span>
-                            </td>
-                            <td>Changes hue.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h6>Hue Slider</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <span class="inline-flex flex-column">
+                                <i class="mb-1">up arrow</i>
+                                <i>down arrow</i>
+                            </span>
+                        </td>
+                        <td>Changes hue.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc>
-    </ClientOnly>
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
diff --git a/pages/colorpicker/index.vue b/pages/colorpicker/index.vue
index f84f5741b..b3e082f49 100755
--- a/pages/colorpicker/index.vue
+++ b/pages/colorpicker/index.vue
@@ -22,7 +22,7 @@
                 <div class="flex flex-column align-items-center md:flex-row md:align-items-start">
                     <ColorPicker v-model="color3" :inline="true" />
                     <div :style="wallStyle" class="mt-5 md:mt-0 md:ml-5 inline-flex">
-                        <img alt="room" src="/demo/images/interior.png" class="w-full md:auto" />
+                        <img alt="room" src="demo/images/interior.png" class="w-full md:auto" />
                     </div>
                 </div>
             </div>
diff --git a/pages/confirmdialog/ConfirmDialogDoc.vue b/pages/confirmdialog/ConfirmDialogDoc.vue
index e5291a8c7..28325a807 100644
--- a/pages/confirmdialog/ConfirmDialogDoc.vue
+++ b/pages/confirmdialog/ConfirmDialogDoc.vue
@@ -1,9 +1,8 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="ConfirmDialogDemo" :sources="sources" github="confirmdialog/ConfirmDialogDemo.vue">
-            <h5>ConfirmationService</h5>
-            <p>ConfirmDialog is controlled via the <i>ConfirmationService</i> that needs to be installed globally before the application instance is created.</p>
-            <pre v-code.script><code>
+    <AppDoc name="ConfirmDialogDemo" :sources="sources" github="confirmdialog/ConfirmDialogDemo.vue">
+        <h5>ConfirmationService</h5>
+        <p>ConfirmDialog is controlled via the <i>ConfirmationService</i> that needs to be installed globally before the application instance is created.</p>
+        <pre v-code.script><code>
 import {createApp} from 'vue';
 import ConfirmationService from 'primevue/confirmationservice';
 
@@ -12,32 +11,32 @@ app.use(ConfirmationService);
 
 </code></pre>
 
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import ConfirmDialog from 'primevue/confirmdialog';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/confirmdialog/confirmdialog.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <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. Suggested location of the Dialog is the main application component where it can be shared
-                by any component within the application.
-            </p>
-            <pre v-code><code>
+        <h5>Getting Started</h5>
+        <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. Suggested location of the Dialog is the main application component where it can be shared by
+            any component within the application.
+        </p>
+        <pre v-code><code>
 &lt;ConfirmDialog&gt;&lt;/ConfirmDialog&gt;
 
 &lt;Button @click="delete()" icon="pi pi-check" label="Confirm"&gt;&lt;/Button&gt;
 
 </code></pre>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 export default {
 	methods: {
         delete() {
@@ -50,6 +49,12 @@ export default {
                 },
                 reject: () => {
                     //callback to execute when user rejects the action
+                },
+                onShow: () => {
+                    //callback to execute when dialog is shown
+                },
+                onHide: () => {
+                    //callback to execute when dialog is hidden
                 }
             });
         },
@@ -58,9 +63,9 @@ export default {
 
 </code></pre>
 
-            <h5>Composition API</h5>
-            <p>The service can be injected with the <i>useConfirm</i> function.</p>
-            <pre v-code.script><code>
+        <h5>Composition API</h5>
+        <p>The service can be injected with the <i>useConfirm</i> function.</p>
+        <pre v-code.script><code>
 import { defineComponent } from "vue";
 import { useConfirm } from "primevue/useconfirm";
 
@@ -76,6 +81,12 @@ export default defineComponent({
             },
             reject: () => {
                 //callback to execute when user rejects the action
+            },
+            onShow: () => {
+                //callback to execute when dialog is shown
+            },
+            onHide: () => {
+                //callback to execute when dialog is hidden
             }
         });
     }
@@ -83,9 +94,9 @@ export default defineComponent({
 
 </code></pre>
 
-            <h5>Close Confirmation</h5>
-            <p>The dialog can also be hidden programmatically using the <i>close</i> method.</p>
-            <pre v-code.script><code>
+        <h5>Close Confirmation</h5>
+        <p>The dialog can also be hidden programmatically using the <i>close</i> method.</p>
+        <pre v-code.script><code>
 export default {
 	methods: {
         discard() {
@@ -96,9 +107,9 @@ export default {
 
 </code></pre>
 
-            <h5>Templating</h5>
-            <p>Templating allows customizing the content where the message instance is available as the implicit variable.</p>
-            <pre v-code><code><template v-pre>
+        <h5>Templating</h5>
+        <p>Templating allows customizing the content where the message instance is available as the implicit variable.</p>
+        <pre v-code><code><template v-pre>
 &lt;ConfirmPopup group="demo">
     &lt;template #message="slotProps"&gt;
         &lt;div class="flex p-4"&gt;
@@ -107,222 +118,338 @@ export default {
         &lt;/div&gt;
     &lt;/template&gt;
 &lt;/ConfirmPopup&gt;
-
 </template>
 </code></pre>
 
-            <h5>Responsive</h5>
-            <p>
-                ConfirmDialog width can be adjusted per screen size with the <i>breakpoints</i> option. In example below, default width is set to 50vw and below 961px, width would be 75vw and finally below 641px width becomes 100%. The value of
-                <i>breakpoints</i> should be an object literal whose keys are the maximum screen sizes and values are the widths per screen.
-            </p>
-            <pre v-code><code>
+        <h5>Responsive</h5>
+        <p>
+            ConfirmDialog width can be adjusted per screen size with the <i>breakpoints</i> option. In example below, default width is set to 50vw and below 961px, width would be 75vw and finally below 641px width becomes 100%. The value of
+            <i>breakpoints</i> should be an object literal whose keys are the maximum screen sizes and values are the widths per screen.
+        </p>
+        <pre v-code><code>
 &lt;ConfirmDialog :breakpoints="{'960px': '75vw', '640px': '100vw'}" :style="{width: '50vw'}"&gt;&lt;/ConfirmDialog&gt;
 
 </code></pre>
 
-            <h5>Confirmation Options</h5>
-            <p>ConfirmDialog can be customized with various options listed here.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>message</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Message of the confirmation.</td>
-                        </tr>
-                        <tr>
-                            <td>group</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Optional key to match the key of the confirmation, useful to target a specific confirm dialog instance.</td>
-                        </tr>
-                        <tr>
-                            <td>icon</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Icon to display next to the message.</td>
-                        </tr>
-                        <tr>
-                            <td>header</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Header text of the dialog.</td>
-                        </tr>
-                        <tr>
-                            <td>position</td>
-                            <td>string</td>
-                            <td>center</td>
-                            <td>Position of the dialog, options are "center", "top", "bottom", "left", "right", "topleft", "topright", "bottomleft" or "bottomright".</td>
-                        </tr>
-                        <tr>
-                            <td>accept</td>
-                            <td>Function</td>
-                            <td>null</td>
-                            <td>Callback to execute when action is confirmed.</td>
-                        </tr>
-                        <tr>
-                            <td>reject</td>
-                            <td>Function</td>
-                            <td>null</td>
-                            <td>Callback to execute when action is rejected.</td>
-                        </tr>
-                        <tr>
-                            <td>acceptLabel</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Label of the accept button. Defaults to PrimeVue <nuxt-link to="/locale">Locale</nuxt-link> configuration.</td>
-                        </tr>
-                        <tr>
-                            <td>rejectLabel</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Label of the reject button. Defaults to PrimeVue <nuxt-link to="/locale">Locale</nuxt-link> configuration.</td>
-                        </tr>
-                        <tr>
-                            <td>acceptIcon</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Icon of the accept button.</td>
-                        </tr>
-                        <tr>
-                            <td>rejectIcon</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Icon of the reject button.</td>
-                        </tr>
-                        <tr>
-                            <td>acceptClass</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the accept button.</td>
-                        </tr>
-                        <tr>
-                            <td>rejectClass</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the reject button.</td>
-                        </tr>
-                        <tr>
-                            <td>blockScroll</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether background scroll should be blocked when dialog is visible.</td>
-                        </tr>
-                        <tr>
-                            <td>defaultFocus</td>
-                            <td>string</td>
-                            <td>accept</td>
-                            <td>Element to receive the focus when the dialog gets visible, valid values are "accept" and "reject".</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Confirmation Options</h5>
+        <p>ConfirmDialog can be customized with various options listed here.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>message</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Message of the confirmation.</td>
+                    </tr>
+                    <tr>
+                        <td>group</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Optional key to match the key of the confirmation, useful to target a specific confirm dialog instance.</td>
+                    </tr>
+                    <tr>
+                        <td>icon</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Icon to display next to the message.</td>
+                    </tr>
+                    <tr>
+                        <td>header</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Header text of the dialog.</td>
+                    </tr>
+                    <tr>
+                        <td>position</td>
+                        <td>string</td>
+                        <td>center</td>
+                        <td>Position of the dialog, options are "center", "top", "bottom", "left", "right", "topleft", "topright", "bottomleft" or "bottomright".</td>
+                    </tr>
+                    <tr>
+                        <td>accept</td>
+                        <td>Function</td>
+                        <td>null</td>
+                        <td>Callback to execute when action is confirmed.</td>
+                    </tr>
+                    <tr>
+                        <td>reject</td>
+                        <td>Function</td>
+                        <td>null</td>
+                        <td>Callback to execute when action is rejected.</td>
+                    </tr>
+                    <tr>
+                        <td>onShow</td>
+                        <td>Function</td>
+                        <td>null</td>
+                        <td>Callback to execute when dialog is shown.</td>
+                    </tr>
+                    <tr>
+                        <td>onHide</td>
+                        <td>Function</td>
+                        <td>null</td>
+                        <td>Callback to execute when dialog is hidden.</td>
+                    </tr>
+                    <tr>
+                        <td>acceptLabel</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Label of the accept button. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td>
+                    </tr>
+                    <tr>
+                        <td>rejectLabel</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Label of the reject button. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td>
+                    </tr>
+                    <tr>
+                        <td>acceptIcon</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Icon of the accept button.</td>
+                    </tr>
+                    <tr>
+                        <td>rejectIcon</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Icon of the reject button.</td>
+                    </tr>
+                    <tr>
+                        <td>acceptClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the accept button.</td>
+                    </tr>
+                    <tr>
+                        <td>rejectClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the reject button.</td>
+                    </tr>
+                    <tr>
+                        <td>blockScroll</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Whether background scroll should be blocked when dialog is visible.</td>
+                    </tr>
+                    <tr>
+                        <td>defaultFocus</td>
+                        <td>string</td>
+                        <td>accept</td>
+                        <td>Element to receive the focus when the dialog gets visible, valid values are "accept" and "reject".</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>ConfirmationService</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>require</td>
-                            <td>confirm: Confirmation Object</td>
-                            <td>Displays the dialog using the confirmation object options.</td>
-                        </tr>
-                        <tr>
-                            <td>close</td>
-                            <td>-</td>
-                            <td>Hides the dialog without invoking accept or reject callbacks.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>ConfirmationService</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>require</td>
+                        <td>confirm: Confirmation Object</td>
+                        <td>Displays the dialog using the confirmation object options.</td>
+                    </tr>
+                    <tr>
+                        <td>close</td>
+                        <td>-</td>
+                        <td>Hides the dialog without invoking accept or reject callbacks.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Properties</h5>
-            <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>group</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Optional key to match the key of the confirmation, useful to target a specific confirm dialog instance.</td>
-                        </tr>
-                        <tr>
-                            <td>breakpoints</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Object literal to define widths per screen size.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>group</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Optional key to match the key of the confirmation, useful to target a specific confirm dialog instance.</td>
+                    </tr>
+                    <tr>
+                        <td>breakpoints</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Object literal to define widths per screen size.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Slots</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>message</td>
-                            <td>-</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Slots</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>message</td>
+                        <td>-</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>ConfirmDialog inherits all the classes from the Dialog component, visit <nuxt-link to="/dialog">dialog</nuxt-link> for more information.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-confirm-dialog</td>
-                            <td>Container element.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>ConfirmDialog inherits all the classes from the Dialog component, visit <router-link to="/dialog">dialog</router-link> for more information.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-confirm-dialog</td>
+                        <td>Container element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-confirm-dialog-message</td>
+                        <td>Container of message.</td>
+                    </tr>
+                    <tr>
+                        <td>p-confirm-dialog-icon</td>
+                        <td>Icon container inside content.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc>
-    </ClientOnly>
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>
+            ConfirmDialog component uses <i>alertdialog</i> role along with <i>aria-labelledby</i> referring to the header element however any attribute is passed to the root element so you may use <i>aria-labelledby</i> to override this default
+            behavior. In addition <i>aria-modal</i> is added since focus is kept within the popup.
+        </p>
+
+        <p>
+            When <i>require</i> method of the <i>$confirm</i> instance is used and a trigger is passed as a parameter, ConfirmDialog adds <i>aria-expanded</i> state attribute and <i>aria-controls</i> to the trigger so that the relation between the
+            trigger and the dialog is defined.
+        </p>
+
+        <pre v-code><code>
+&lt;ConfirmDialog id="confirm" /&gt;
+
+&lt;Button @click="openDialog()" label="Confirm" :aria-expanded="visible" :aria-controls="visible ? 'confirm' : null"&gt;&lt;/Button&gt;
+
+</code></pre>
+
+        <pre v-code.script><code>
+setup() {
+    const confirm = useConfirm();
+    const isVisible = ref(false);
+
+    const openDialog = () => {
+        confirm.require({
+            message: 'Are you sure you want to proceed?',
+            header: 'Confirmation',
+            onShow: () => {
+                isVisible.value = true;
+            },
+            onHide: () => {
+                isVisible.value = false;
+            }
+        });
+    };
+
+    return { isVisible, openDialog};
+}
+
+</code></pre>
+
+        <h6>Overlay Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>tab</i>
+                        </td>
+                        <td>Moves focus to the next the focusable element within the dialog.</td>
+                    </tr>
+                    <tr>
+                        <td><i>shift</i> + <i>tab</i></td>
+                        <td>Moves focus to the previous the focusable element within the dialog.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>escape</i>
+                        </td>
+                        <td>Closes the dialog.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h6>Buttons Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>Closes the dialog.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>Closes the dialog.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
@@ -677,10 +804,10 @@ export default defineComponent({
                         acceptIcon: 'pi pi-check',
                         rejectIcon: 'pi pi-times',
                         accept: () => {
-                            this.$toast.add({severity:'info',         summary:'Confirmed', detail:'You have accepted',         life: 3000});
+                            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});
+                            this.$toast.add({severity:'error', summary:'Rejected', detail:'You have rejected', life: 3000});
                         }
                     });
                 }
diff --git a/pages/confirmpopup/ConfirmPopupDoc.vue b/pages/confirmpopup/ConfirmPopupDoc.vue
index 2d30dd5a0..7bf5409e8 100644
--- a/pages/confirmpopup/ConfirmPopupDoc.vue
+++ b/pages/confirmpopup/ConfirmPopupDoc.vue
@@ -1,9 +1,8 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="ConfirmPopupDemo" :sources="sources" github="confirmpopup/ConfirmPopupDemo.vue">
-            <h5>ConfirmationService</h5>
-            <p>ConfirmPopup is controlled via the <i>ConfirmationService</i> that needs to be installed globally before the application instance is created.</p>
-            <pre v-code.script><code>
+    <AppDoc name="ConfirmPopupDemo" :sources="sources" github="confirmpopup/ConfirmPopupDemo.vue">
+        <h5>ConfirmationService</h5>
+        <p>ConfirmPopup is controlled via the <i>ConfirmationService</i> that needs to be installed globally before the application instance is created.</p>
+        <pre v-code.script><code>
 import {createApp} from 'vue';
 import ConfirmationService from 'primevue/confirmationservice';
 
@@ -12,29 +11,29 @@ app.use(ConfirmationService);
 
 </code></pre>
 
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import ConfirmPopup from 'primevue/confirmpopup';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/confirmpopup/confirmpopup.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p>ConfirmPopup is displayed by calling the <i>require</i> method of the <i>$confirm</i> instance by passing the options to customize the Popup. <i>target</i> attribute is mandatory to align the popup to its caller.</p>
-            <pre v-code><code>
+        <h5>Getting Started</h5>
+        <p>ConfirmPopup is displayed by calling the <i>require</i> method of the <i>$confirm</i> instance by passing the options to customize the Popup. <i>target</i> attribute is mandatory to align the popup to its caller.</p>
+        <pre v-code><code>
 &lt;ConfirmPopup&gt;&lt;/ConfirmPopup&gt;
 
 &lt;Button @click="delete($event)" icon="pi pi-check" label="Confirm"&gt;&lt;/Button&gt;
 
 </code></pre>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 export default {
 	methods: {
         delete(event) {
@@ -47,6 +46,12 @@ export default {
                 },
                 reject: () => {
                     //callback to execute when user rejects the action
+                },
+                onShow: () => {
+                    //callback to execute when popup is shown
+                },
+                onHide: () => {
+                    //callback to execute when popup is hidden
                 }
             });
         },
@@ -55,9 +60,9 @@ export default {
 
 </code></pre>
 
-            <h5>Composition API</h5>
-            <p>The service can be injected with the <i>useConfirm</i> function.</p>
-            <pre v-code.script><code>
+        <h5>Composition API</h5>
+        <p>The service can be injected with the <i>useConfirm</i> function.</p>
+        <pre v-code.script><code>
 import { defineComponent } from "vue";
 import { useConfirm } from "primevue/useconfirm";
 
@@ -74,6 +79,12 @@ export default defineComponent({
                 },
                 reject: () => {
                     //callback to execute when user rejects the action
+                },
+                onShow: () => {
+                    //callback to execute when popup is shown
+                },
+                onHide: () => {
+                    //callback to execute when popup is hidden
                 }
             });
         } 
@@ -84,9 +95,9 @@ export default defineComponent({
 
 </code></pre>
 
-            <h5>Close Confirmation</h5>
-            <p>The popup can also be hidden programmatically using the <i>close</i> method.</p>
-            <pre v-code.script><code>
+        <h5>Close Confirmation</h5>
+        <p>The popup can also be hidden programmatically using the <i>close</i> method.</p>
+        <pre v-code.script><code>
 export default {
 	methods: {
         discard() {
@@ -97,9 +108,9 @@ export default {
 
 </code></pre>
 
-            <h5>Templating</h5>
-            <p>Templating allows customizing the content where the message instance is available as the implicit variable.</p>
-            <pre v-code><code><template v-pre>
+        <h5>Templating</h5>
+        <p>Templating allows customizing the content where the message instance is available as the implicit variable.</p>
+        <pre v-code><code><template v-pre>
 &lt;ConfirmPopup group="demo">
     &lt;template #message="slotProps"&gt;
         &lt;div class="flex p-4"&gt;
@@ -112,200 +123,315 @@ export default {
 </template>
 </code></pre>
 
-            <h5>Confirmation Options</h5>
-            <p>ConfirmDialog can be customized with various options listed here.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>target</td>
-                            <td>DomElement</td>
-                            <td>null</td>
-                            <td>Element to align the overlay.</td>
-                        </tr>
-                        <tr>
-                            <td>message</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Message of the confirmation.</td>
-                        </tr>
-                        <tr>
-                            <td>group</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Optional key to match the key of the confirmation, useful to target a specific confirm dialog instance.</td>
-                        </tr>
-                        <tr>
-                            <td>icon</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Icon to display next to the message.</td>
-                        </tr>
-                        <tr>
-                            <td>accept</td>
-                            <td>Function</td>
-                            <td>null</td>
-                            <td>Callback to execute when action is confirmed.</td>
-                        </tr>
-                        <tr>
-                            <td>reject</td>
-                            <td>Function</td>
-                            <td>null</td>
-                            <td>Callback to execute when action is rejected.</td>
-                        </tr>
-                        <tr>
-                            <td>acceptLabel</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Label of the accept button. Defaults to PrimeVue <nuxt-link to="/locale">Locale</nuxt-link> configuration.</td>
-                        </tr>
-                        <tr>
-                            <td>rejectLabel</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Label of the reject button. Defaults to PrimeVue <nuxt-link to="/locale">Locale</nuxt-link> configuration.</td>
-                        </tr>
-                        <tr>
-                            <td>acceptIcon</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Icon of the accept button.</td>
-                        </tr>
-                        <tr>
-                            <td>rejectIcon</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Icon of the reject button.</td>
-                        </tr>
-                        <tr>
-                            <td>acceptClass</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the accept button.</td>
-                        </tr>
-                        <tr>
-                            <td>rejectClass</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the reject button.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Confirmation Options</h5>
+        <p>ConfirmDialog can be customized with various options listed here.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>target</td>
+                        <td>DomElement</td>
+                        <td>null</td>
+                        <td>Element to align the overlay.</td>
+                    </tr>
+                    <tr>
+                        <td>message</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Message of the confirmation.</td>
+                    </tr>
+                    <tr>
+                        <td>group</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Optional key to match the key of the confirmation, useful to target a specific confirm dialog instance.</td>
+                    </tr>
+                    <tr>
+                        <td>icon</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Icon to display next to the message.</td>
+                    </tr>
+                    <tr>
+                        <td>accept</td>
+                        <td>Function</td>
+                        <td>null</td>
+                        <td>Callback to execute when action is confirmed.</td>
+                    </tr>
+                    <tr>
+                        <td>reject</td>
+                        <td>Function</td>
+                        <td>null</td>
+                        <td>Callback to execute when action is rejected.</td>
+                    </tr>
+                    <tr>
+                        <td>onShow</td>
+                        <td>Function</td>
+                        <td>null</td>
+                        <td>Callback to execute when popup is shown.</td>
+                    </tr>
+                    <tr>
+                        <td>onHide</td>
+                        <td>Function</td>
+                        <td>null</td>
+                        <td>Callback to execute when popup is hidden.</td>
+                    </tr>
+                    <tr>
+                        <td>acceptLabel</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Label of the accept button. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td>
+                    </tr>
+                    <tr>
+                        <td>rejectLabel</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Label of the reject button. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td>
+                    </tr>
+                    <tr>
+                        <td>acceptIcon</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Icon of the accept button.</td>
+                    </tr>
+                    <tr>
+                        <td>rejectIcon</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Icon of the reject button.</td>
+                    </tr>
+                    <tr>
+                        <td>acceptClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the accept button.</td>
+                    </tr>
+                    <tr>
+                        <td>rejectClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the reject button.</td>
+                    </tr>
+                    <tr>
+                        <td>defaultFocus</td>
+                        <td>string</td>
+                        <td>accept</td>
+                        <td>Element to receive the focus when the dialog gets visible, valid values are "accept" and "reject".</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>ConfirmationService</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>require</td>
-                            <td>confirm: Confirmation Object</td>
-                            <td>Displays the dialog using the confirmation object options.</td>
-                        </tr>
-                        <tr>
-                            <td>close</td>
-                            <td>-</td>
-                            <td>Hides the dialog without invoking accept or reject callbacks.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>ConfirmationService</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>require</td>
+                        <td>confirm: Confirmation Object</td>
+                        <td>Displays the dialog using the confirmation object options.</td>
+                    </tr>
+                    <tr>
+                        <td>close</td>
+                        <td>-</td>
+                        <td>Hides the dialog without invoking accept or reject callbacks.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Properties</h5>
-            <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>group</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Optional key to match the key of the confirmation, useful to target a specific confirm dialog instance.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>group</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Optional key to match the key of the confirmation, useful to target a specific confirm dialog instance.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Slots</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>message</td>
-                            <td>-</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Slots</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>message</td>
+                        <td>-</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>ConfirmDialog inherits all the classes from the Dialog component, visit <nuxt-link to="/dialog">dialog</nuxt-link> for more information.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-confirm-popup</td>
-                            <td>Container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-confirm-popup-content</td>
-                            <td>Content element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-confirm-popup-icon</td>
-                            <td>Message icon.</td>
-                        </tr>
-                        <tr>
-                            <td>p-confirm-popup-message</td>
-                            <td>Message text.</td>
-                        </tr>
-                        <tr>
-                            <td>p-confirm-popup-footer</td>
-                            <td>Footer element for buttons.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>ConfirmDialog inherits all the classes from the Dialog component, visit <router-link to="/dialog">dialog</router-link> for more information.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-confirm-popup</td>
+                        <td>Container element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-confirm-popup-content</td>
+                        <td>Content element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-confirm-popup-icon</td>
+                        <td>Message icon.</td>
+                    </tr>
+                    <tr>
+                        <td>p-confirm-popup-message</td>
+                        <td>Message text.</td>
+                    </tr>
+                    <tr>
+                        <td>p-confirm-popup-footer</td>
+                        <td>Footer element for buttons.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc>
-    </ClientOnly>
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>
+            ConfirmPopup component uses <i>alertdialog</i> role and since any attribute is passed to the root element you may define attributes like <i>aria-label</i> or <i>aria-labelledby</i> to describe the popup contents. In addition
+            <i>aria-modal</i> is added since focus is kept within the popup.
+        </p>
+        <p>
+            When <i>require</i> method of the <i>$confirm</i> instance is used and a trigger is passed as a parameter, ConfirmDialog adds <i>aria-expanded</i> state attribute and <i>aria-controls</i> to the trigger so that the relation between the
+            trigger and the dialog is defined.
+        </p>
+
+        <pre v-code><code>
+&lt;ConfirmPopup id="confirm" aria-label="popup" /&gt;
+
+&lt;Button @click="openPopup($event)" label="Confirm" id="confirmButton" :aria-expanded="isVisible" :aria-controls="isVisible ? 'confirm' : null" /&gt;
+
+</code></pre>
+
+        <pre v-code.script><code>
+setup() {
+    const confirm = useConfirm();
+    const isVisible = ref(false);
+
+    const openPopup = (event) => {
+        confirm.require({
+            target: event.currentTarget,
+            message: 'Are you sure you want to proceed?',
+            header: 'Confirmation',
+            onShow: () => {
+                isVisible.value = true;
+            },
+            onHide: () => {
+                isVisible.value = false;
+            }
+        });
+    }
+
+    return {isVisible, openPopup};
+}
+
+</code></pre>
+
+        <h6>Overlay Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>tab</i>
+                        </td>
+                        <td>Moves focus to the next the focusable element within the popup.</td>
+                    </tr>
+                    <tr>
+                        <td><i>shift</i> + <i>tab</i></td>
+                        <td>Moves focus to the previous the focusable element within the popup.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>escape</i>
+                        </td>
+                        <td>Closes the popup and moves focus to the trigger.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h6>Buttons Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>Triggers the action, closes the popup and moves focus to the trigger.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>Triggers the action, closes the popup and moves focus to the trigger.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
diff --git a/pages/contextmenu/ContextMenuDoc.vue b/pages/contextmenu/ContextMenuDoc.vue
index f5d4f5d3b..374f474dd 100755
--- a/pages/contextmenu/ContextMenuDoc.vue
+++ b/pages/contextmenu/ContextMenuDoc.vue
@@ -1,31 +1,550 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="ContextMenuDemo" :sources="sources" github="contextmenu/ContextMenuDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="ContextMenuDemo" :sources="sources" github="contextmenu/ContextMenuDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import ContextMenu from 'primevue/contextmenu';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/contextmenu/contextmenu.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>MenuModel</h5>
-            <p>ContextMenu uses the common MenuModel API to define the items, visit <nuxt-link to="/menumodel">MenuModel API</nuxt-link> for details.</p>
+        <h5>MenuModel</h5>
+        <p>ContextMenu uses the common MenuModel API to define the items, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p>
 
-            <h5>Getting Started</h5>
-            <p>ContextMenu requires a collection of menuitems as its model.</p>
+        <h5>Getting Started</h5>
+        <p>ContextMenu requires a collection of menuitems as its model.</p>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
+export default {
+	data() {
+			return {
+					items: [
+							{
+				label:'File',
+				icon:'pi pi-fw pi-file',
+				items:[
+					{
+						label:'New',
+						icon:'pi pi-fw pi-plus',
+						items:[
+							{
+								label:'Bookmark',
+								icon:'pi pi-fw pi-bookmark'
+							},
+							{
+								label:'Video',
+								icon:'pi pi-fw pi-video'
+							}
+						]
+					},
+					{
+						label:'Delete',
+						icon:'pi pi-fw pi-trash'
+					},
+					{
+						separator:true
+					},
+					{
+						label:'Export',
+						icon:'pi pi-fw pi-external-link'
+					}
+				]
+			},
+							{
+				label:'Edit',
+				icon:'pi pi-fw pi-pencil',
+				items:[
+					{
+						label:'Left',
+						icon:'pi pi-fw pi-align-left'
+					},
+					{
+						label:'Right',
+						icon:'pi pi-fw pi-align-right'
+					},
+					{
+						label:'Center',
+						icon:'pi pi-fw pi-align-center'
+					},
+					{
+						label:'Justify',
+						icon:'pi pi-fw pi-align-justify'
+					},
+
+				]
+							},
+							{
+				label:'Users',
+				icon:'pi pi-fw pi-user',
+				items:[
+					{
+						label:'New',
+						icon:'pi pi-fw pi-user-plus',
+
+					},
+					{
+						label:'Delete',
+						icon:'pi pi-fw pi-user-minus',
+
+					},
+					{
+						label:'Search',
+						icon:'pi pi-fw pi-users',
+						items:[
+							{
+								label:'Filter',
+								icon:'pi pi-fw pi-filter',
+								items:[
+									{
+										label:'Print',
+										icon:'pi pi-fw pi-print'
+									}
+								]
+							},
+							{
+								icon:'pi pi-fw pi-bars',
+								label:'List'
+							}
+						]
+					}
+				]
+							},
+							{
+				label:'Events',
+				icon:'pi pi-fw pi-calendar',
+				items:[
+					{
+						label:'Edit',
+						icon:'pi pi-fw pi-pencil',
+						items:[
+							{
+								label:'Save',
+								icon:'pi pi-fw pi-calendar-plus'
+							},
+							{
+								label:'Delete',
+								icon:'pi pi-fw pi-calendar-minus'
+							},
+
+						]
+					},
+					{
+						label:'Archieve',
+						icon:'pi pi-fw pi-calendar-times',
+						items:[
+							{
+								label:'Remove',
+								icon:'pi pi-fw pi-calendar-minus'
+							}
+						]
+					}
+				]
+							},
+							{
+				separator:true
+							},
+							{
+				label:'Quit',
+				icon:'pi pi-fw pi-power-off'
+							}
+					]
+			}
+	}
+}
+
+</code></pre>
+
+        <h5>Document Menu</h5>
+        <p>Setting global property attaches the context menu to the document.</p>
+        <pre v-code><code>
+&lt;ContextMenu :global="true" :model="items" /&gt;
+
+</code></pre>
+
+        <h5>Element Menu</h5>
+        <p>ContextMenu is attached to a custom element manually using the reference and calling the <i>show(event)</i> method.</p>
+
+        <pre v-code><code>
+&lt;img alt="logo" src="demo/images/nature/nature3.jpg" @contextmenu="onImageRightClick"&gt;
+&lt;ContextMenu ref="menu" :model="items" /&gt;
+
+</code></pre>
+
+        <pre v-code.script><code>
+export default {
+	data() {
+			return {
+					items: //items
+			}
+	},
+	methods: {
+			onImageRightClick(event) {
+					this.$refs.menu.show(event);
+			}
+	}
+}
+
+</code></pre>
+
+        <h5>Templating</h5>
+        <p>ContextMenu offers content customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter.</p>
+        <pre v-code><code><template v-pre>
+&lt;ContextMenu :model="items"&gt;
+	&lt;template #item="{item}"&gt;
+			&lt;a :href="item.url"&gt;{{item.label}}&lt;/a&gt;
+	&lt;/template&gt;
+&lt;/ContextMenu&gt;
+</template>
+</code></pre>
+
+        <p><i>router-link</i> with route configuration can also be used within templating for further customization.</p>
+        <pre v-code><code><template v-pre>
+&lt;ContextMenu :model="items"&gt;
+	&lt;template #item="{item}"&gt;
+			&lt;router-link :to="item.to" custom v-slot="{href, route, navigate, isActive, isExactActive}"&gt;
+					&lt;a :href="href" @click="navigate" :class="{'active-link': isActive, 'active-link-exact": isExactActive}&gt;{{route.fullPath}}&lt;/a&gt;
+			&lt;/router-link&gt;
+	&lt;/template&gt;
+&lt;/ContextMenu&gt;
+</template>
+</code></pre>
+
+        <h5>Properties</h5>
+        <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>model</td>
+                        <td>array</td>
+                        <td>null</td>
+                        <td>An array of menuitems.</td>
+                    </tr>
+                    <tr>
+                        <td>appendTo</td>
+                        <td>string</td>
+                        <td>body</td>
+                        <td>A valid query selector or an HTMLElement to specify where the overlay gets attached.</td>
+                    </tr>
+                    <tr>
+                        <td>baseZIndex</td>
+                        <td>number</td>
+                        <td>0</td>
+                        <td>Base zIndex value to use in layering.</td>
+                    </tr>
+                    <tr>
+                        <td>autoZIndex</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Whether to automatically manage layering.</td>
+                    </tr>
+                    <tr>
+                        <td>global</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Attaches the menu to document instead of a particular item.</td>
+                    </tr>
+                    <tr>
+                        <td>exact</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Whether to apply 'router-link-active-exact' class if route exactly matches the item path.</td>
+                    </tr>
+                    <tr>
+                        <td>tabindex</td>
+                        <td>number</td>
+                        <td>0</td>
+                        <td>Index of the element in tabbing order.</td>
+                    </tr>
+                    <tr>
+                        <td>aria-label</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Defines a string value that labels an interactive element.</td>
+                    </tr>
+                    <tr>
+                        <td>aria-labelledby</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h5>Methods</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>toggle</td>
+                        <td>event: Browser event</td>
+                        <td>Toggles the visibility of the menu.</td>
+                    </tr>
+                    <tr>
+                        <td>show</td>
+                        <td>event: Browser event</td>
+                        <td>Shows the menu.</td>
+                    </tr>
+                    <tr>
+                        <td>hide</td>
+                        <td>-</td>
+                        <td>Hides the menu.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h5>Events</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>focus</td>
+                        <td>event</td>
+                        <td>Callback to invoke when the component receives focus.</td>
+                    </tr>
+                    <tr>
+                        <td>blur</td>
+                        <td>event</td>
+                        <td>Callback to invoke when the component loses focus.</td>
+                    </tr>
+                    <tr>
+                        <td>before-show</td>
+                        <td>-</td>
+                        <td>Callback to invoke before the popup is shown.</td>
+                    </tr>
+                    <tr>
+                        <td>before-hide</td>
+                        <td>-</td>
+                        <td>Callback to invoke before the popup is hidden.</td>
+                    </tr>
+                    <tr>
+                        <td>show</td>
+                        <td>-</td>
+                        <td>Callback to invoke when the popup is shown.</td>
+                    </tr>
+                    <tr>
+                        <td>hide</td>
+                        <td>-</td>
+                        <td>Callback to invoke when the popup is hidden.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h5>Slots</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>item</td>
+                        <td>item: Menuitem instance</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-contextmenu</td>
+                        <td>Container element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-contextmenu-root-list</td>
+                        <td>Root list element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-submenu-list</td>
+                        <td>Submenu list element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-menuitem</td>
+                        <td>Menuitem element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-menuitem-active</td>
+                        <td>Active menuitem element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-menuitem-content</td>
+                        <td>Content of menuitem.</td>
+                    </tr>
+                    <tr>
+                        <td>p-menuitem-link</td>
+                        <td>Link element of the menuitem.</td>
+                    </tr>
+                    <tr>
+                        <td>p-menuitem-text</td>
+                        <td>Label of a menuitem.</td>
+                    </tr>
+                    <tr>
+                        <td>p-menuitem-icon</td>
+                        <td>Icon of a menuitem.</td>
+                    </tr>
+                    <tr>
+                        <td>p-submenu-icon</td>
+                        <td>Arrow icon of a submenu.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>
+            ContextMenu component uses the <i>menubar</i> role with <i>aria-orientation</i> set to "vertical" and the value to describe the menu can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. Each list item has a
+            <i>menuitem</i> role with <i>aria-label</i> referring to the label of the item and <i>aria-disabled</i> defined if the item is disabled. A submenu within a ContextMenu uses the <i>menu</i> role with an <i>aria-labelledby</i> defined as
+            the id of the submenu root menuitem label. In addition, menuitems that open a submenu have <i>aria-haspopup</i>, <i>aria-expanded</i> and <i>aria-controls</i> to define the relation between the item and the submenu.
+        </p>
+
+        <h6>Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>tab</i>
+                        </td>
+                        <td>When focus is in the menu, closes the context menu and moves focus to the next focusable element in the page sequence.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>If menuitem has a submenu, toggles the visibility of the submenu otherwise activates the menuitem and closes all open overlays.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>If menuitem has a submenu, toggles the visibility of the submenu otherwise activates the menuitem and closes all open overlays.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>escape</i>
+                        </td>
+                        <td>Closes the context menu.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>down arrow</i>
+                        </td>
+                        <td>If focus is not inside the menu and menu is open, add focus to the first item. If an item is already focused, moves focus to the next menuitem within the submenu.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>up arrow</i>
+                        </td>
+                        <td>If focus is not inside the menu and menu is open, add focus to the last item. If an item is already focused, moves focus to the next menuitem within the submenu.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>right arrow</i>
+                        </td>
+                        <td>Opens a submenu if there is one available and moves focus to the first item.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>left arrow</i>
+                        </td>
+                        <td>Closes a submenu and moves focus to the root item of the closed submenu.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>home</i>
+                        </td>
+                        <td>Moves focus to the first menuitem within the submenu.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>end</i>
+                        </td>
+                        <td>Moves focus to the last menuitem within the submenu.</td>
+                    </tr>
+                    <tr>
+                        <td><i>any printable character</i></td>
+                        <td>Moves focus to the menuitem whose label starts with the characters being typed.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
+</template>
+
+<script>
 export default {
     data() {
         return {
-            items: [
-                {
+            sources: {
+                'options-api': {
+                    tabName: 'Options API Source',
+                    content: `
+	<template>
+	<div>
+		<img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" @contextmenu="onImageRightClick" aria-haspopup="true">
+		<ContextMenu ref="menu" :model="items" />
+		</div>
+	</template>
+
+	<script>
+	export default {
+		data() {
+			return {
+				items: [
+					{
 					label:'File',
 					icon:'pi pi-fw pi-file',
 					items:[
@@ -34,13 +553,14 @@ export default {
 							icon:'pi pi-fw pi-plus',
 							items:[
 								{
-									label:'Bookmark',
-									icon:'pi pi-fw pi-bookmark'
+								label:'Bookmark',
+								icon:'pi pi-fw pi-bookmark'
 								},
 								{
-									label:'Video',
-									icon:'pi pi-fw pi-video'
-								}
+								label:'Video',
+								icon:'pi pi-fw pi-video'
+								},
+
 							]
 						},
 						{
@@ -55,8 +575,8 @@ export default {
 							icon:'pi pi-fw pi-external-link'
 						}
 					]
-				},
-                {
+					},
+					{
 					label:'Edit',
 					icon:'pi pi-fw pi-pencil',
 					items:[
@@ -78,8 +598,8 @@ export default {
 						},
 
 					]
-                },
-                {
+					},
+					{
 					label:'Users',
 					icon:'pi pi-fw pi-user',
 					items:[
@@ -98,24 +618,24 @@ export default {
 							icon:'pi pi-fw pi-users',
 							items:[
 								{
-									label:'Filter',
-									icon:'pi pi-fw pi-filter',
-									items:[
-										{
-											label:'Print',
-											icon:'pi pi-fw pi-print'
-										}
-									]
+								label:'Filter',
+								icon:'pi pi-fw pi-filter',
+								items:[
+									{
+										label:'Print',
+										icon:'pi pi-fw pi-print'
+									}
+								]
 								},
 								{
-									icon:'pi pi-fw pi-bars',
-									label:'List'
+								icon:'pi pi-fw pi-bars',
+								label:'List'
 								}
 							]
 						}
 					]
-                },
-                {
+					},
+					{
 					label:'Events',
 					icon:'pi pi-fw pi-calendar',
 					items:[
@@ -124,12 +644,12 @@ export default {
 							icon:'pi pi-fw pi-pencil',
 							items:[
 								{
-									label:'Save',
-									icon:'pi pi-fw pi-calendar-plus'
+								label:'Save',
+								icon:'pi pi-fw pi-calendar-plus'
 								},
 								{
-									label:'Delete',
-									icon:'pi pi-fw pi-calendar-minus'
+								label:'Delete',
+								icon:'pi pi-fw pi-calendar-minus'
 								},
 
 							]
@@ -139,407 +659,199 @@ export default {
 							icon:'pi pi-fw pi-calendar-times',
 							items:[
 								{
-									label:'Remove',
-									icon:'pi pi-fw pi-calendar-minus'
+								label:'Remove',
+								icon:'pi pi-fw pi-calendar-minus'
 								}
 							]
 						}
 					]
-                },
-                {
+					},
+					{
 					separator:true
-                },
-                {
+					},
+					{
 					label:'Quit',
 					icon:'pi pi-fw pi-power-off'
-                }
-            ]
-        }
-    }
-}
-
-</code></pre>
-
-            <h5>Document Menu</h5>
-            <p>Setting global property attaches the context menu to the document.</p>
-            <pre v-code><code>
-&lt;ContextMenu :global="true" :model="items" /&gt;
-
-</code></pre>
-
-            <h5>Element Menu</h5>
-            <p>ContextMenu is attached to a custom element manually using the reference and calling the <i>show(event)</i> method.</p>
-
-            <pre v-code><code>
-&lt;img alt="logo" src="/demo/images/nature/nature3.jpg" @contextmenu="onImageRightClick"&gt;
-&lt;ContextMenu ref="menu" :model="items" /&gt;
-
-</code></pre>
-
-            <pre v-code.script><code>
-export default {
-    data() {
-        return {
-            items: //items
-        }
-    },
-    methods: {
-        onImageRightClick(event) {
-            this.$refs.menu.show(event);
-        }
-    }
-}
-
-</code></pre>
-
-            <h5>Templating</h5>
-            <p>ContextMenu offers content customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter.</p>
-            <pre v-code><code><template v-pre>
-&lt;ContextMenu :model="items"&gt;
-    &lt;template #item="{item}"&gt;
-        &lt;a :href="item.url"&gt;{{item.label}}&lt;/a&gt;
-    &lt;/template&gt;
-&lt;/ContextMenu&gt;
-</template>
-</code></pre>
-
-            <p><i>nuxt-link</i> with route configuration can also be used within templating for further customization.</p>
-            <pre v-code><code><template v-pre>
-&lt;ContextMenu :model="items"&gt;
-    &lt;template #item="{item}"&gt;
-        &lt;nuxt-link :to="item.to" custom v-slot="{href, route, navigate, isActive, isExactActive}"&gt;
-            &lt;a :href="href" @click="navigate" :class="{'active-link': isActive, 'active-link-exact": isExactActive}&gt;{{route.fullPath}}&lt;/a&gt;
-        &lt;/nuxt-link&gt;
-    &lt;/template&gt;
-&lt;/ContextMenu&gt;
-</template>
-</code></pre>
-
-            <h5>Properties</h5>
-            <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>model</td>
-                            <td>array</td>
-                            <td>null</td>
-                            <td>An array of menuitems.</td>
-                        </tr>
-                        <tr>
-                            <td>appendTo</td>
-                            <td>string</td>
-                            <td>body</td>
-                            <td>A valid query selector or an HTMLElement to specify where the overlay gets attached.</td>
-                        </tr>
-                        <tr>
-                            <td>baseZIndex</td>
-                            <td>number</td>
-                            <td>0</td>
-                            <td>Base zIndex value to use in layering.</td>
-                        </tr>
-                        <tr>
-                            <td>autoZIndex</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether to automatically manage layering.</td>
-                        </tr>
-                        <tr>
-                            <td>global</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Attaches the menu to document instead of a particular item.</td>
-                        </tr>
-                        <tr>
-                            <td>exact</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether to apply 'nuxt-link-active-exact' class if route exactly matches the item path.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h5>Methods</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>toggle</td>
-                            <td>event: Browser event</td>
-                            <td>Toggles the visibility of the menu.</td>
-                        </tr>
-                        <tr>
-                            <td>show</td>
-                            <td>event: Browser event</td>
-                            <td>Shows the menu.</td>
-                        </tr>
-                        <tr>
-                            <td>hide</td>
-                            <td>-</td>
-                            <td>Hides the menu.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h5>Slots</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>item</td>
-                            <td>item: Menuitem instance</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-contextmenu</td>
-                            <td>Container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-submenu-list</td>
-                            <td>Submenu list element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-menuitem</td>
-                            <td>Menuitem element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-menuitem-active</td>
-                            <td>Active menuitem element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-menuitem-text</td>
-                            <td>Label of a menuitem.</td>
-                        </tr>
-                        <tr>
-                            <td>p-menuitem-icon</td>
-                            <td>Icon of a menuitem.</td>
-                        </tr>
-                        <tr>
-                            <td>p-submenu-icon</td>
-                            <td>Arrow icon of a submenu.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc>
-    </ClientOnly>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            sources: {
-                'options-api': {
-                    tabName: 'Options API Source',
-                    content: `
-		<template>
-		<div>
-			<img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" @contextmenu="onImageRightClick" aria-haspopup="true">
-			<ContextMenu ref="menu" :model="items" />
-			</div>
-		</template>
-
-		<script>
-		export default {
-			data() {
-				return {
-					items: [
-						{
-						label:'File',
-						icon:'pi pi-fw pi-file',
-						items:[
-							{
-								label:'New',
-								icon:'pi pi-fw pi-plus',
-								items:[
-									{
-									label:'Bookmark',
-									icon:'pi pi-fw pi-bookmark'
-									},
-									{
-									label:'Video',
-									icon:'pi pi-fw pi-video'
-									},
-
-								]
-							},
-							{
-								label:'Delete',
-								icon:'pi pi-fw pi-trash'
-							},
-							{
-								separator:true
-							},
-							{
-								label:'Export',
-								icon:'pi pi-fw pi-external-link'
-							}
-						]
-						},
-						{
-						label:'Edit',
-						icon:'pi pi-fw pi-pencil',
-						items:[
-							{
-								label:'Left',
-								icon:'pi pi-fw pi-align-left'
-							},
-							{
-								label:'Right',
-								icon:'pi pi-fw pi-align-right'
-							},
-							{
-								label:'Center',
-								icon:'pi pi-fw pi-align-center'
-							},
-							{
-								label:'Justify',
-								icon:'pi pi-fw pi-align-justify'
-							},
-
-						]
-						},
-						{
-						label:'Users',
-						icon:'pi pi-fw pi-user',
-						items:[
-							{
-								label:'New',
-								icon:'pi pi-fw pi-user-plus',
-
-							},
-							{
-								label:'Delete',
-								icon:'pi pi-fw pi-user-minus',
-
-							},
-							{
-								label:'Search',
-								icon:'pi pi-fw pi-users',
-								items:[
-									{
-									label:'Filter',
-									icon:'pi pi-fw pi-filter',
-									items:[
-										{
-											label:'Print',
-											icon:'pi pi-fw pi-print'
-										}
-									]
-									},
-									{
-									icon:'pi pi-fw pi-bars',
-									label:'List'
-									}
-								]
-							}
-						]
-						},
-						{
-						label:'Events',
-						icon:'pi pi-fw pi-calendar',
-						items:[
-							{
-								label:'Edit',
-								icon:'pi pi-fw pi-pencil',
-								items:[
-									{
-									label:'Save',
-									icon:'pi pi-fw pi-calendar-plus'
-									},
-									{
-									label:'Delete',
-									icon:'pi pi-fw pi-calendar-minus'
-									},
-
-								]
-							},
-							{
-								label:'Archieve',
-								icon:'pi pi-fw pi-calendar-times',
-								items:[
-									{
-									label:'Remove',
-									icon:'pi pi-fw pi-calendar-minus'
-									}
-								]
-							}
-						]
-						},
-						{
-						separator:true
-						},
-						{
-						label:'Quit',
-						icon:'pi pi-fw pi-power-off'
-						}
-					]
-				}
-			},
-			methods: {
-				onImageRightClick(event) {
-					this.$refs.menu.show(event);
-				}
+					}
+				]
+			}
+		},
+		methods: {
+			onImageRightClick(event) {
+				this.$refs.menu.show(event);
 			}
 		}
-		<\\/script>
-		`
+	}
+	<\\/script>
+	`
                 },
                 'composition-api': {
                     tabName: 'Composition API Source',
                     content: `
-	<template>
-	<div>
+<template>
+<div>
+	<img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" @contextmenu="onImageRightClick" aria-haspopup="true">
+	<ContextMenu ref="menu" :model="items" />
+</div>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+export default {
+	setup() {
+		const menu = ref();
+		const items = ref([
+			{
+			label:'File',
+			icon:'pi pi-fw pi-file',
+			items:[
+					{
+						label:'New',
+						icon:'pi pi-fw pi-plus',
+						items:[
+						{
+							label:'Bookmark',
+							icon:'pi pi-fw pi-bookmark'
+						},
+						{
+							label:'Video',
+							icon:'pi pi-fw pi-video'
+						},
+						]
+					},
+					{
+						label:'Delete',
+						icon:'pi pi-fw pi-trash'
+					},
+					{
+					separator:true
+					},
+					{
+					label:'Export',
+					icon:'pi pi-fw pi-external-link'
+					}
+				]
+			},
+			{
+			label:'Edit',
+			icon:'pi pi-fw pi-pencil',
+			items:[
+					{
+						label:'Left',
+						icon:'pi pi-fw pi-align-left'
+					},
+					{
+						label:'Right',
+						icon:'pi pi-fw pi-align-right'
+					},
+					{
+						label:'Center',
+						icon:'pi pi-fw pi-align-center'
+					},
+					{
+						label:'Justify',
+						icon:'pi pi-fw pi-align-justify'
+					},
+			]
+			},
+			{
+			label:'Users',
+			icon:'pi pi-fw pi-user',
+			items:[
+					{
+						label:'New',
+						icon:'pi pi-fw pi-user-plus',
+					},
+					{
+						label:'Delete',
+						icon:'pi pi-fw pi-user-minus',
+					},
+					{
+						label:'Search',
+						icon:'pi pi-fw pi-users',
+						items:[
+							{
+								label:'Filter',
+								icon:'pi pi-fw pi-filter',
+								items:[
+									{
+										label:'Print',
+										icon:'pi pi-fw pi-print'
+									}
+								]
+							},
+							{
+								icon:'pi pi-fw pi-bars',
+								label:'List'
+							}
+						]
+					}
+				]
+			},
+			{
+			label:'Events',
+			icon:'pi pi-fw pi-calendar',
+			items:[
+					{
+						label:'Edit',
+						icon:'pi pi-fw pi-pencil',
+						items:[
+							{
+							label:'Save',
+							icon:'pi pi-fw pi-calendar-plus'
+							},
+							{
+							label:'Delete',
+							icon:'pi pi-fw pi-calendar-minus'
+							},
+
+						]
+					},
+					{
+						label:'Archieve',
+						icon:'pi pi-fw pi-calendar-times',
+						items:[
+							{
+							label:'Remove',
+							icon:'pi pi-fw pi-calendar-minus'
+							}
+						]
+					}
+				]
+			},
+			{
+			separator:true
+			},
+			{
+			label:'Quit',
+			icon:'pi pi-fw pi-power-off'
+			}
+		]);
+
+		const onImageRightClick = (event) => {
+			menu.value.show(event);
+		};
+
+		return { menu, items, onImageRightClick }
+	}
+}
+<\\/script>
+`
+                },
+                'browser-source': {
+                    tabName: 'Browser Source',
+                    imports: `<script src="https://unpkg.com/vue-router@4.0.0/dist/vue-router.global.js"><\\/script>
+		<script src="https://unpkg.com/primevue@^3/contextmenu/contextmenu.min.js"><\\/script>`,
+                    content: `<div id="app">
 		<img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" @contextmenu="onImageRightClick" aria-haspopup="true">
-		<ContextMenu ref="menu" :model="items" />
+		<p-contextmenu ref="menu" :model="items"></p-contextmenu>
 	</div>
-	</template>
 
-	<script>
-	import { ref } from 'vue';
+	<script type="module">
+	const { createApp, ref } = Vue;
 
-	export default {
+	const App = {
 		setup() {
 			const menu = ref();
 			const items = ref([
@@ -675,178 +987,25 @@ export default {
 			};
 
 			return { menu, items, onImageRightClick }
+		},
+		components: {
+			"p-contextmenu": primevue.contextmenu
 		}
-	}
+	};
+
+	const routes = [{ path: "/", component: App }];
+
+			const router = VueRouter.createRouter({
+					history: VueRouter.createWebHashHistory(),
+					routes
+			});
+
+	createApp(App)
+		.use(router)
+					.use(primevue.config.default)
+					.mount("#app");
 	<\\/script>
-	`
-                },
-                'browser-source': {
-                    tabName: 'Browser Source',
-                    imports: `<script src="https://unpkg.com/vue-router@4.0.0/dist/vue-router.global.js"><\\/script>
-			<script src="https://unpkg.com/primevue@^3/contextmenu/contextmenu.min.js"><\\/script>`,
-                    content: `<div id="app">
-			<img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" @contextmenu="onImageRightClick" aria-haspopup="true">
-			<p-contextmenu ref="menu" :model="items"></p-contextmenu>
-		</div>
-
-		<script type="module">
-		const { createApp, ref } = Vue;
-
-		const App = {
-			setup() {
-				const menu = ref();
-				const items = ref([
-					{
-					label:'File',
-					icon:'pi pi-fw pi-file',
-					items:[
-							{
-								label:'New',
-								icon:'pi pi-fw pi-plus',
-								items:[
-								{
-									label:'Bookmark',
-									icon:'pi pi-fw pi-bookmark'
-								},
-								{
-									label:'Video',
-									icon:'pi pi-fw pi-video'
-								},
-								]
-							},
-							{
-								label:'Delete',
-								icon:'pi pi-fw pi-trash'
-							},
-							{
-							separator:true
-							},
-							{
-							label:'Export',
-							icon:'pi pi-fw pi-external-link'
-							}
-						]
-					},
-					{
-					label:'Edit',
-					icon:'pi pi-fw pi-pencil',
-					items:[
-							{
-								label:'Left',
-								icon:'pi pi-fw pi-align-left'
-							},
-							{
-								label:'Right',
-								icon:'pi pi-fw pi-align-right'
-							},
-							{
-								label:'Center',
-								icon:'pi pi-fw pi-align-center'
-							},
-							{
-								label:'Justify',
-								icon:'pi pi-fw pi-align-justify'
-							},
-					]
-					},
-					{
-					label:'Users',
-					icon:'pi pi-fw pi-user',
-					items:[
-							{
-								label:'New',
-								icon:'pi pi-fw pi-user-plus',
-							},
-							{
-								label:'Delete',
-								icon:'pi pi-fw pi-user-minus',
-							},
-							{
-								label:'Search',
-								icon:'pi pi-fw pi-users',
-								items:[
-									{
-										label:'Filter',
-										icon:'pi pi-fw pi-filter',
-										items:[
-											{
-												label:'Print',
-												icon:'pi pi-fw pi-print'
-											}
-										]
-									},
-									{
-										icon:'pi pi-fw pi-bars',
-										label:'List'
-									}
-								]
-							}
-						]
-					},
-					{
-					label:'Events',
-					icon:'pi pi-fw pi-calendar',
-					items:[
-							{
-								label:'Edit',
-								icon:'pi pi-fw pi-pencil',
-								items:[
-									{
-									label:'Save',
-									icon:'pi pi-fw pi-calendar-plus'
-									},
-									{
-									label:'Delete',
-									icon:'pi pi-fw pi-calendar-minus'
-									},
-
-								]
-							},
-							{
-								label:'Archieve',
-								icon:'pi pi-fw pi-calendar-times',
-								items:[
-									{
-									label:'Remove',
-									icon:'pi pi-fw pi-calendar-minus'
-									}
-								]
-							}
-						]
-					},
-					{
-					separator:true
-					},
-					{
-					label:'Quit',
-					icon:'pi pi-fw pi-power-off'
-					}
-				]);
-
-				const onImageRightClick = (event) => {
-					menu.value.show(event);
-				};
-
-				return { menu, items, onImageRightClick }
-			},
-			components: {
-				"p-contextmenu": primevue.contextmenu
-			}
-		};
-
-		const routes = [{ path: "/", component: App }];
-
-        const router = VueRouter.createRouter({
-            history: VueRouter.createWebHashHistory(),
-            routes
-        });
-
-		createApp(App)
-			.use(router)
-            .use(primevue.config.default)
-            .mount("#app");
-		<\\/script>
-	`
+`
                 }
             }
         };
diff --git a/pages/contextmenu/index.vue b/pages/contextmenu/index.vue
index 9d5a69c6c..a43e83fe4 100755
--- a/pages/contextmenu/index.vue
+++ b/pages/contextmenu/index.vue
@@ -13,7 +13,7 @@
 
         <div class="content-section implementation">
             <div class="card">
-                <img alt="logo" src="/demo/images/nature/nature3.jpg" @contextmenu="onImageRightClick" aria-haspopup="true" />
+                <img alt="logo" src="demo/images/nature/nature3.jpg" @contextmenu="onImageRightClick" aria-haspopup="true" />
                 <ContextMenu ref="menu" :model="items" />
             </div>
         </div>
diff --git a/pages/datatable/Basic.vue b/pages/datatable/Basic.vue
index 496e0ca10..c2335107d 100755
--- a/pages/datatable/Basic.vue
+++ b/pages/datatable/Basic.vue
@@ -24,7 +24,7 @@
 </template>
 
 <script>
-import ProductService from '@/service/ProductService';
+import ProductService from '../../service/ProductService';
 import DataTableBasicDoc from './DataTableBasicDoc';
 
 export default {
diff --git a/pages/datatable/ColGroup.vue b/pages/datatable/ColGroup.vue
index 364a90105..9ee633cec 100755
--- a/pages/datatable/ColGroup.vue
+++ b/pages/datatable/ColGroup.vue
@@ -1,63 +1,61 @@
 <template>
     <div>
-        <ClientOnly>
-            <div class="content-section introduction">
-                <div class="feature-intro">
-                    <h1>DataTable <span>ColumnGroup</span></h1>
-                    <p>Columns can be grouped at header and footer using headerColumnGroup and footerColumnGroup components.</p>
-                </div>
-                <AppDemoActions />
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>DataTable <span>ColumnGroup</span></h1>
+                <p>Columns can be grouped at header and footer using headerColumnGroup and footerColumnGroup components.</p>
             </div>
+            <AppDemoActions />
+        </div>
 
-            <div class="content-section implementation">
-                <div class="card">
-                    <DataTable :value="sales" responsiveLayout="scroll">
-                        <ColumnGroup type="header">
-                            <Row>
-                                <Column header="Product" :rowspan="3" />
-                                <Column header="Sale Rate" :colspan="4" />
-                            </Row>
-                            <Row>
-                                <Column header="Sales" :colspan="2" />
-                                <Column header="Profits" :colspan="2" />
-                            </Row>
-                            <Row>
-                                <Column header="Last Year" :sortable="true" field="lastYearSale" />
-                                <Column header="This Year" :sortable="true" field="thisYearSale" />
-                                <Column header="Last Year" :sortable="true" field="lastYearProfit" />
-                                <Column header="This Year" :sortable="true" field="thisYearProfit" />
-                            </Row>
-                        </ColumnGroup>
-                        <Column field="product" />
-                        <Column field="lastYearSale">
-                            <template #body="slotProps"> {{ slotProps.data.lastYearSale }}% </template>
-                        </Column>
-                        <Column field="thisYearSale">
-                            <template #body="slotProps"> {{ slotProps.data.thisYearSale }}% </template>
-                        </Column>
-                        <Column field="lastYearProfit">
-                            <template #body="slotProps">
-                                {{ formatCurrency(slotProps.data.lastYearProfit) }}
-                            </template>
-                        </Column>
-                        <Column field="thisYearProfit">
-                            <template #body="slotProps">
-                                {{ formatCurrency(slotProps.data.thisYearProfit) }}
-                            </template>
-                        </Column>
-                        <ColumnGroup type="footer">
-                            <Row>
-                                <Column footer="Totals:" :colspan="3" footerStyle="text-align:right" />
-                                <Column :footer="lastYearTotal" />
-                                <Column :footer="thisYearTotal" />
-                            </Row>
-                        </ColumnGroup>
-                    </DataTable>
-                </div>
+        <div class="content-section implementation">
+            <div class="card">
+                <DataTable :value="sales" responsiveLayout="scroll">
+                    <ColumnGroup type="header">
+                        <Row>
+                            <Column header="Product" :rowspan="3" />
+                            <Column header="Sale Rate" :colspan="4" />
+                        </Row>
+                        <Row>
+                            <Column header="Sales" :colspan="2" />
+                            <Column header="Profits" :colspan="2" />
+                        </Row>
+                        <Row>
+                            <Column header="Last Year" :sortable="true" field="lastYearSale" />
+                            <Column header="This Year" :sortable="true" field="thisYearSale" />
+                            <Column header="Last Year" :sortable="true" field="lastYearProfit" />
+                            <Column header="This Year" :sortable="true" field="thisYearProfit" />
+                        </Row>
+                    </ColumnGroup>
+                    <Column field="product" />
+                    <Column field="lastYearSale">
+                        <template #body="slotProps"> {{ slotProps.data.lastYearSale }}% </template>
+                    </Column>
+                    <Column field="thisYearSale">
+                        <template #body="slotProps"> {{ slotProps.data.thisYearSale }}% </template>
+                    </Column>
+                    <Column field="lastYearProfit">
+                        <template #body="slotProps">
+                            {{ formatCurrency(slotProps.data.lastYearProfit) }}
+                        </template>
+                    </Column>
+                    <Column field="thisYearProfit">
+                        <template #body="slotProps">
+                            {{ formatCurrency(slotProps.data.thisYearProfit) }}
+                        </template>
+                    </Column>
+                    <ColumnGroup type="footer">
+                        <Row>
+                            <Column footer="Totals:" :colspan="3" footerStyle="text-align:right" />
+                            <Column :footer="lastYearTotal" />
+                            <Column :footer="thisYearTotal" />
+                        </Row>
+                    </ColumnGroup>
+                </DataTable>
             </div>
+        </div>
 
-            <AppDoc name="DataTableColGroupDemo" :sources="sources" github="datatable/DataTableColGroupDemo.vue" />
-        </ClientOnly>
+        <AppDoc name="DataTableColGroupDemo" :sources="sources" github="datatable/DataTableColGroupDemo.vue" />
     </div>
 </template>
 
@@ -401,6 +399,7 @@ export default {
     computed: {
         lastYearTotal() {
             let total = 0;
+
             for (let sale of this.sales) {
                 total += sale.lastYearProfit;
             }
@@ -409,6 +408,7 @@ export default {
         },
         thisYearTotal() {
             let total = 0;
+
             for (let sale of this.sales) {
                 total += sale.thisYearProfit;
             }
diff --git a/pages/datatable/ColResize.vue b/pages/datatable/ColResize.vue
index 4c152a5a9..350749262 100755
--- a/pages/datatable/ColResize.vue
+++ b/pages/datatable/ColResize.vue
@@ -33,9 +33,7 @@
             </div>
         </div>
 
-        <ClientOnly>
-            <AppDoc name="DataTableColResizeDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableColResizeDemo.vue" />
-        </ClientOnly>
+        <AppDoc name="DataTableColResizeDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableColResizeDemo.vue" />
     </div>
 </template>
 
diff --git a/pages/datatable/ColToggle.vue b/pages/datatable/ColToggle.vue
index d9f18fdfc..ee569b15d 100755
--- a/pages/datatable/ColToggle.vue
+++ b/pages/datatable/ColToggle.vue
@@ -17,14 +17,12 @@
                         </div>
                     </template>
                     <Column field="code" header="Code" />
-                    <Column v-for="(col, index) of selectedColumns" :field="col.field" :header="col.header" :key="col.field + '_' + index"></Column>
+                    <Column v-for="(col, index) of selectedColumns" :key="col.field + '_' + index" :field="col.field" :header="col.header"></Column>
                 </DataTable>
             </div>
         </div>
 
-        <ClientOnly>
-            <AppDoc name="DataTableColToggleDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableColToggleDemo.vue" />
-        </ClientOnly>
+        <AppDoc name="DataTableColToggleDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableColToggleDemo.vue" />
     </div>
 </template>
 
diff --git a/pages/datatable/ContextMenu.vue b/pages/datatable/ContextMenu.vue
index bf625ce0f..2aaf2a5c5 100755
--- a/pages/datatable/ContextMenu.vue
+++ b/pages/datatable/ContextMenu.vue
@@ -10,7 +10,7 @@
 
         <div class="content-section implementation">
             <div class="card">
-                <DataTable :value="products" contextMenu v-model:contextMenuSelection="selectedProduct" @row-contextmenu="onRowContextMenu" responsiveLayout="scroll">
+                <DataTable v-model:contextMenuSelection="selectedProduct" :value="products" contextMenu @row-contextmenu="onRowContextMenu" responsiveLayout="scroll">
                     <Column field="code" header="Code"></Column>
                     <Column field="name" header="Name"></Column>
                     <Column field="category" header="Category"></Column>
@@ -22,12 +22,10 @@
                 </DataTable>
             </div>
 
-            <ContextMenu :model="menuModel" ref="cm" />
+            <ContextMenu ref="cm" :model="menuModel" />
         </div>
 
-        <ClientOnly>
-            <AppDoc name="DataTableContextMenuDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableContextMenuDemo.vue" />
-        </ClientOnly>
+        <AppDoc name="DataTableContextMenuDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableContextMenuDemo.vue" />
     </div>
 </template>
 
diff --git a/pages/datatable/Crud.vue b/pages/datatable/Crud.vue
index f7319c5ae..d15fd0974 100755
--- a/pages/datatable/Crud.vue
+++ b/pages/datatable/Crud.vue
@@ -24,8 +24,8 @@
 
                 <DataTable
                     ref="dt"
-                    :value="products"
                     v-model:selection="selectedProducts"
+                    :value="products"
                     dataKey="id"
                     :paginator="true"
                     :rows="10"
@@ -50,7 +50,7 @@
                     <Column field="name" header="Name" :sortable="true" style="min-width: 16rem"></Column>
                     <Column header="Image">
                         <template #body="slotProps">
-                            <img :src="'/demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" />
+                            <img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" />
                         </template>
                     </Column>
                     <Column field="price" header="Price" :sortable="true" style="min-width: 8rem">
@@ -79,11 +79,11 @@
             </div>
 
             <Dialog v-model:visible="productDialog" :style="{ width: '450px' }" header="Product Details" :modal="true" class="p-fluid">
-                <img :src="'/demo/images/product/' + product.image" :alt="product.image" class="product-image" v-if="product.image" />
+                <img v-if="product.image" :src="'demo/images/product/' + product.image" :alt="product.image" class="product-image" />
                 <div class="field">
                     <label for="name">Name</label>
                     <InputText id="name" v-model.trim="product.name" required="true" autofocus :class="{ 'p-invalid': submitted && !product.name }" />
-                    <small class="p-error" v-if="submitted && !product.name">Name is required.</small>
+                    <small v-if="submitted && !product.name" class="p-error">Name is required.</small>
                 </div>
                 <div class="field">
                     <label for="description">Description</label>
@@ -111,19 +111,19 @@
                     <label class="mb-3">Category</label>
                     <div class="formgrid grid">
                         <div class="field-radiobutton col-6">
-                            <RadioButton id="category1" name="category" value="Accessories" v-model="product.category" />
+                            <RadioButton id="category1" v-model="product.category" name="category" value="Accessories" />
                             <label for="category1">Accessories</label>
                         </div>
                         <div class="field-radiobutton col-6">
-                            <RadioButton id="category2" name="category" value="Clothing" v-model="product.category" />
+                            <RadioButton id="category2" v-model="product.category" name="category" value="Clothing" />
                             <label for="category2">Clothing</label>
                         </div>
                         <div class="field-radiobutton col-6">
-                            <RadioButton id="category3" name="category" value="Electronics" v-model="product.category" />
+                            <RadioButton id="category3" v-model="product.category" name="category" value="Electronics" />
                             <label for="category3">Electronics</label>
                         </div>
                         <div class="field-radiobutton col-6">
-                            <RadioButton id="category4" name="category" value="Fitness" v-model="product.category" />
+                            <RadioButton id="category4" v-model="product.category" name="category" value="Fitness" />
                             <label for="category4">Fitness</label>
                         </div>
                     </div>
@@ -171,9 +171,7 @@
             </Dialog>
         </div>
 
-        <ClientOnly>
-            <AppDoc name="DataTableCrudDemo" :sources="sources" :service="['ProductService']" :data="['products']" github="datatable/DataTableCrudDemo.vue" />
-        </ClientOnly>
+        <AppDoc name="DataTableCrudDemo" :sources="sources" :service="['ProductService']" :data="['products']" github="datatable/DataTableCrudDemo.vue" />
     </div>
 </template>
 
@@ -1186,6 +1184,7 @@ export default {
     methods: {
         formatCurrency(value) {
             if (value) return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
+
             return;
         },
         openNew() {
@@ -1234,6 +1233,7 @@ export default {
         },
         findIndexById(id) {
             let index = -1;
+
             for (let i = 0; i < this.products.length; i++) {
                 if (this.products[i].id === id) {
                     index = i;
@@ -1246,9 +1246,11 @@ export default {
         createId() {
             let id = '';
             var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+
             for (var i = 0; i < 5; i++) {
                 id += chars.charAt(Math.floor(Math.random() * chars.length));
             }
+
             return id;
         },
         exportCSV() {
diff --git a/pages/datatable/DataTableBasicDoc.vue b/pages/datatable/DataTableBasicDoc.vue
index b1b28ef1e..4a7da5aad 100644
--- a/pages/datatable/DataTableBasicDoc.vue
+++ b/pages/datatable/DataTableBasicDoc.vue
@@ -1,7 +1,5 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="DataTableBasicDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableBasicDemo.vue" />
-    </ClientOnly>
+    <AppDoc name="DataTableBasicDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableBasicDemo.vue" />
 </template>
 
 <script>
diff --git a/pages/datatable/DataTableDoc.vue b/pages/datatable/DataTableDoc.vue
index 7cc43c162..152a4a463 100755
--- a/pages/datatable/DataTableDoc.vue
+++ b/pages/datatable/DataTableDoc.vue
@@ -1,9 +1,8 @@
 <template>
     <div class="content-section documentation">
-        <ClientOnly>
-            <AppDoc name="DataTableDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']" github="datatable/DataTableDemo.vue">
-                <h5>Import via Module</h5>
-                <pre v-code.script><code>
+        <AppDoc name="DataTableDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']" github="datatable/DataTableDemo.vue">
+            <h5>Import via Module</h5>
+            <pre v-code.script><code>
 import DataTable from 'primevue/datatable';
 import Column from 'primevue/column';
 import ColumnGroup from 'primevue/columngroup';     //optional for column grouping
@@ -11,8 +10,8 @@ import Row from 'primevue/row';                     //optional for row
 
 </code></pre>
 
-                <h5>Import via CDN</h5>
-                <pre v-code><code>
+            <h5>Import via CDN</h5>
+            <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/datatable/datatable.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/column/column.min.js"&gt;&lt;/script&gt;
@@ -21,13 +20,13 @@ import Row from 'primevue/row';                     //optional for row
 
 </code></pre>
 
-                <h5>Getting Started</h5>
-                <p>
-                    DataTable requires a value as an array of objects and columns defined with Column component. Throughout the samples, a car interface having vin, brand, year and color properties is used to define an object to be displayed by the
-                    datatable. Cars are loaded by a CarService that connects to a server to fetch the cars with a fetch API. Note that this is only for demo purposes, DataTable does not have any restrictions on how the data is provided.
-                </p>
+            <h5>Getting Started</h5>
+            <p>
+                DataTable requires a value as an array of objects and columns defined with Column component. Throughout the samples, a car interface having vin, brand, year and color properties is used to define an object to be displayed by the
+                datatable. Cars are loaded by a CarService that connects to a server to fetch the cars with a fetch API. Note that this is only for demo purposes, DataTable does not have any restrictions on how the data is provided.
+            </p>
 
-                <pre v-code.script><code>
+            <pre v-code.script><code>
 export default class CarService {
 
 	getCarsSmall() {
@@ -45,8 +44,8 @@ export default class CarService {
 
 </code></pre>
 
-                <p>Example response;</p>
-                <pre v-code.script><code>
+            <p>Example response;</p>
+            <pre v-code.script><code>
 {
     "data": [
         {"brand": "Volkswagen", "year": 2012, "color": "Orange", "vin": "dsad231ff"},
@@ -64,8 +63,8 @@ export default class CarService {
 
 </code></pre>
 
-                <p>Following sample datatable has 4 columns and retrieves the data from a service on mount.</p>
-                <pre v-code><code><template v-pre>
+            <p>Following sample datatable has 4 columns and retrieves the data from a service on mount.</p>
+            <pre v-code><code><template v-pre>
 &lt;DataTable :value="cars"&gt;
     &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
     &lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
@@ -75,7 +74,7 @@ export default class CarService {
 </template>
 </code></pre>
 
-                <pre v-code.script><code>
+            <pre v-code.script><code>
 import CarService from '../../service/CarService';
 
 export default {
@@ -95,16 +94,16 @@ export default {
 
 </code></pre>
 
-                <h5>Dynamic Columns</h5>
-                <p>Column components can be dynamically generated using a v-for as well.</p>
-                <pre v-code><code><template v-pre>
+            <h5>Dynamic Columns</h5>
+            <p>Column components can be dynamically generated using a v-for as well.</p>
+            <pre v-code><code><template v-pre>
 &lt;DataTable :value="cars"&gt;
     &lt;Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field"&gt;&lt;/Column&gt;
 &lt;/DataTable&gt;
 </template>
 </code></pre>
 
-                <pre v-code.script><code>
+            <pre v-code.script><code>
 import CarService from '../../service/CarService';
 
 export default {
@@ -132,390 +131,390 @@ export default {
 
 </code></pre>
 
-                <h5>Column Component Properties utilized by the DataTable</h5>
-                <div class="doc-tablewrapper">
-                    <table class="doc-table">
-                        <thead>
-                            <tr>
-                                <th>Name</th>
-                                <th>Type</th>
-                                <th>Default</th>
-                                <th>Description</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr>
-                                <td>columnKey</td>
-                                <td>any</td>
-                                <td>null</td>
-                                <td>Identifier of a column if field property is not defined.</td>
-                            </tr>
-                            <tr>
-                                <td>field</td>
-                                <td>string</td>
-                                <td>null</td>
-                                <td>Property represented by the column.</td>
-                            </tr>
-                            <tr>
-                                <td>sortField</td>
-                                <td>string</td>
-                                <td>null</td>
-                                <td>Property name to use in sorting, defaults to field.</td>
-                            </tr>
-                            <tr>
-                                <td>filterField</td>
-                                <td>string</td>
-                                <td>null</td>
-                                <td>Property name to use in filtering, defaults to field.</td>
-                            </tr>
-                            <tr>
-                                <td>sortable</td>
-                                <td>any</td>
-                                <td>false</td>
-                                <td>Defines if a column is sortable.</td>
-                            </tr>
-                            <tr>
-                                <td>header</td>
-                                <td>any</td>
-                                <td>null</td>
-                                <td>Header content of the column.</td>
-                            </tr>
-                            <tr>
-                                <td>footer</td>
-                                <td>any</td>
-                                <td>null</td>
-                                <td>Footer content of the column.</td>
-                            </tr>
-                            <tr>
-                                <td>style</td>
-                                <td>object</td>
-                                <td>null</td>
-                                <td>Inline style of header, body and footer cells.</td>
-                            </tr>
-                            <tr>
-                                <td>class</td>
-                                <td>string</td>
-                                <td>null</td>
-                                <td>Style class of header, body and footer cells.</td>
-                            </tr>
-                            <tr>
-                                <td>headerStyle</td>
-                                <td>object</td>
-                                <td>null</td>
-                                <td>Inline style of the column header.</td>
-                            </tr>
-                            <tr>
-                                <td>headerClass</td>
-                                <td>string</td>
-                                <td>null</td>
-                                <td>Style class of the column header.</td>
-                            </tr>
-                            <tr>
-                                <td>bodyStyle</td>
-                                <td>object</td>
-                                <td>null</td>
-                                <td>Inline style of the column body.</td>
-                            </tr>
-                            <tr>
-                                <td>bodyClass</td>
-                                <td>string</td>
-                                <td>null</td>
-                                <td>Style class of the column body.</td>
-                            </tr>
-                            <tr>
-                                <td>footerStyle</td>
-                                <td>object</td>
-                                <td>null</td>
-                                <td>Inline style of the column footer.</td>
-                            </tr>
-                            <tr>
-                                <td>footerClass</td>
-                                <td>string</td>
-                                <td>null</td>
-                                <td>Style class of the column footer.</td>
-                            </tr>
-                            <tr>
-                                <td>showFilterMenu</td>
-                                <td>boolean</td>
-                                <td>true</td>
-                                <td>Whether to display the filter overlay.</td>
-                            </tr>
-                            <tr>
-                                <td>showFilterOperator</td>
-                                <td>boolean</td>
-                                <td>true</td>
-                                <td>When enabled, match all and match any operator selector is displayed.</td>
-                            </tr>
-                            <tr>
-                                <td>showClearButton</td>
-                                <td>boolean</td>
-                                <td>true</td>
-                                <td>Displays a button to clear the column filtering.</td>
-                            </tr>
-                            <tr>
-                                <td>showApplyButton</td>
-                                <td>boolean</td>
-                                <td>true</td>
-                                <td>Displays a button to apply the column filtering.</td>
-                            </tr>
-                            <tr>
-                                <td>showFilterMatchModes</td>
-                                <td>boolean</td>
-                                <td>true</td>
-                                <td>Whether to show the match modes selector.</td>
-                            </tr>
-                            <tr>
-                                <td>showAddButton</td>
-                                <td>boolean</td>
-                                <td>true</td>
-                                <td>When enabled, a button is displayed to add more rules.</td>
-                            </tr>
-                            <tr>
-                                <td>filterMatchModeOptions</td>
-                                <td>array</td>
-                                <td>null</td>
-                                <td>An array of label-value pairs to override the global match mode options.</td>
-                            </tr>
-                            <tr>
-                                <td>maxConstraints</td>
-                                <td>number</td>
-                                <td>2</td>
-                                <td>Maximum number of constraints for a column filter.</td>
-                            </tr>
-                            <tr>
-                                <td>excludeGlobalFilter</td>
-                                <td>boolean</td>
-                                <td>false</td>
-                                <td>Whether to exclude from global filtering or not.</td>
-                            </tr>
-                            <tr>
-                                <td>filterHeaderStyle</td>
-                                <td>object</td>
-                                <td>null</td>
-                                <td>Inline style of the column filter header in row filter display.</td>
-                            </tr>
-                            <tr>
-                                <td>filterHeaderClass</td>
-                                <td>string</td>
-                                <td>null</td>
-                                <td>Style class of the column filter header in row filter display.</td>
-                            </tr>
-                            <tr>
-                                <td>filterMenuStyle</td>
-                                <td>object</td>
-                                <td>null</td>
-                                <td>Inline style of the column filter overlay.</td>
-                            </tr>
-                            <tr>
-                                <td>filterMenuClass</td>
-                                <td>string</td>
-                                <td>null</td>
-                                <td>Style class of the column filter overlay.</td>
-                            </tr>
-                            <tr>
-                                <td>selectionMode</td>
-                                <td>string</td>
-                                <td>null</td>
-                                <td>Defines column based selection mode, options are "single" and "multiple".</td>
-                            </tr>
-                            <tr>
-                                <td>expander</td>
-                                <td>boolean</td>
-                                <td>false</td>
-                                <td>Displays an icon to toggle row expansion.</td>
-                            </tr>
-                            <tr>
-                                <td>colspan</td>
-                                <td>number</td>
-                                <td>null</td>
-                                <td>Number of columns to span for grouping.</td>
-                            </tr>
-                            <tr>
-                                <td>rowspan</td>
-                                <td>number</td>
-                                <td>null</td>
-                                <td>Number of rows to span for grouping.</td>
-                            </tr>
-                            <tr>
-                                <td>rowReorder</td>
-                                <td>boolean</td>
-                                <td>false</td>
-                                <td>Whether this column displays an icon to reorder the rows.</td>
-                            </tr>
-                            <tr>
-                                <td>rowReorderIcon</td>
-                                <td>string</td>
-                                <td>pi pi-bars</td>
-                                <td>Icon of the drag handle to reorder rows.</td>
-                            </tr>
-                            <tr>
-                                <td>reorderableColumn</td>
-                                <td>boolean</td>
-                                <td>true</td>
-                                <td>Defines if the column itself can be reordered with dragging.</td>
-                            </tr>
-                            <tr>
-                                <td>rowEditor</td>
-                                <td>boolean</td>
-                                <td>false</td>
-                                <td>When enabled, column displays row editor controls.</td>
-                            </tr>
-                            <tr>
-                                <td>frozen</td>
-                                <td>boolean</td>
-                                <td>false</td>
-                                <td>Whether the column is fixed in horizontal scrolling.</td>
-                            </tr>
-                            <tr>
-                                <td>alignFrozen</td>
-                                <td>string</td>
-                                <td>left</td>
-                                <td>Position of a frozen column, valid values are left and right.</td>
-                            </tr>
-                            <tr>
-                                <td>exportable</td>
-                                <td>boolean</td>
-                                <td>true</td>
-                                <td>Whether the column is included in data export.</td>
-                            </tr>
-                            <tr>
-                                <td>exportHeader</td>
-                                <td>string</td>
-                                <td>null</td>
-                                <td>Custom export header of the column to be exported as CSV.</td>
-                            </tr>
-                            <tr>
-                                <td>exportFooter</td>
-                                <td>string</td>
-                                <td>null</td>
-                                <td>Custom export footer of the column to be exported as CSV.</td>
-                            </tr>
-                            <tr>
-                                <td>filterMatchMode</td>
-                                <td>string</td>
-                                <td>null</td>
-                                <td>Defines the filtering algorithm to use when searching the options.</td>
-                            </tr>
-                            <tr>
-                                <td>hidden</td>
-                                <td>boolean</td>
-                                <td>false</td>
-                                <td>Whether the column is rendered.</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
+            <h5>Column Component Properties utilized by the DataTable</h5>
+            <div class="doc-tablewrapper">
+                <table class="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Type</th>
+                            <th>Default</th>
+                            <th>Description</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>columnKey</td>
+                            <td>any</td>
+                            <td>null</td>
+                            <td>Identifier of a column if field property is not defined.</td>
+                        </tr>
+                        <tr>
+                            <td>field</td>
+                            <td>string</td>
+                            <td>null</td>
+                            <td>Property represented by the column.</td>
+                        </tr>
+                        <tr>
+                            <td>sortField</td>
+                            <td>string</td>
+                            <td>null</td>
+                            <td>Property name to use in sorting, defaults to field.</td>
+                        </tr>
+                        <tr>
+                            <td>filterField</td>
+                            <td>string</td>
+                            <td>null</td>
+                            <td>Property name to use in filtering, defaults to field.</td>
+                        </tr>
+                        <tr>
+                            <td>sortable</td>
+                            <td>any</td>
+                            <td>false</td>
+                            <td>Defines if a column is sortable.</td>
+                        </tr>
+                        <tr>
+                            <td>header</td>
+                            <td>any</td>
+                            <td>null</td>
+                            <td>Header content of the column.</td>
+                        </tr>
+                        <tr>
+                            <td>footer</td>
+                            <td>any</td>
+                            <td>null</td>
+                            <td>Footer content of the column.</td>
+                        </tr>
+                        <tr>
+                            <td>style</td>
+                            <td>object</td>
+                            <td>null</td>
+                            <td>Inline style of header, body and footer cells.</td>
+                        </tr>
+                        <tr>
+                            <td>class</td>
+                            <td>string</td>
+                            <td>null</td>
+                            <td>Style class of header, body and footer cells.</td>
+                        </tr>
+                        <tr>
+                            <td>headerStyle</td>
+                            <td>object</td>
+                            <td>null</td>
+                            <td>Inline style of the column header.</td>
+                        </tr>
+                        <tr>
+                            <td>headerClass</td>
+                            <td>string</td>
+                            <td>null</td>
+                            <td>Style class of the column header.</td>
+                        </tr>
+                        <tr>
+                            <td>bodyStyle</td>
+                            <td>object</td>
+                            <td>null</td>
+                            <td>Inline style of the column body.</td>
+                        </tr>
+                        <tr>
+                            <td>bodyClass</td>
+                            <td>string</td>
+                            <td>null</td>
+                            <td>Style class of the column body.</td>
+                        </tr>
+                        <tr>
+                            <td>footerStyle</td>
+                            <td>object</td>
+                            <td>null</td>
+                            <td>Inline style of the column footer.</td>
+                        </tr>
+                        <tr>
+                            <td>footerClass</td>
+                            <td>string</td>
+                            <td>null</td>
+                            <td>Style class of the column footer.</td>
+                        </tr>
+                        <tr>
+                            <td>showFilterMenu</td>
+                            <td>boolean</td>
+                            <td>true</td>
+                            <td>Whether to display the filter overlay.</td>
+                        </tr>
+                        <tr>
+                            <td>showFilterOperator</td>
+                            <td>boolean</td>
+                            <td>true</td>
+                            <td>When enabled, match all and match any operator selector is displayed.</td>
+                        </tr>
+                        <tr>
+                            <td>showClearButton</td>
+                            <td>boolean</td>
+                            <td>true</td>
+                            <td>Displays a button to clear the column filtering.</td>
+                        </tr>
+                        <tr>
+                            <td>showApplyButton</td>
+                            <td>boolean</td>
+                            <td>true</td>
+                            <td>Displays a button to apply the column filtering.</td>
+                        </tr>
+                        <tr>
+                            <td>showFilterMatchModes</td>
+                            <td>boolean</td>
+                            <td>true</td>
+                            <td>Whether to show the match modes selector.</td>
+                        </tr>
+                        <tr>
+                            <td>showAddButton</td>
+                            <td>boolean</td>
+                            <td>true</td>
+                            <td>When enabled, a button is displayed to add more rules.</td>
+                        </tr>
+                        <tr>
+                            <td>filterMatchModeOptions</td>
+                            <td>array</td>
+                            <td>null</td>
+                            <td>An array of label-value pairs to override the global match mode options.</td>
+                        </tr>
+                        <tr>
+                            <td>maxConstraints</td>
+                            <td>number</td>
+                            <td>2</td>
+                            <td>Maximum number of constraints for a column filter.</td>
+                        </tr>
+                        <tr>
+                            <td>excludeGlobalFilter</td>
+                            <td>boolean</td>
+                            <td>false</td>
+                            <td>Whether to exclude from global filtering or not.</td>
+                        </tr>
+                        <tr>
+                            <td>filterHeaderStyle</td>
+                            <td>object</td>
+                            <td>null</td>
+                            <td>Inline style of the column filter header in row filter display.</td>
+                        </tr>
+                        <tr>
+                            <td>filterHeaderClass</td>
+                            <td>string</td>
+                            <td>null</td>
+                            <td>Style class of the column filter header in row filter display.</td>
+                        </tr>
+                        <tr>
+                            <td>filterMenuStyle</td>
+                            <td>object</td>
+                            <td>null</td>
+                            <td>Inline style of the column filter overlay.</td>
+                        </tr>
+                        <tr>
+                            <td>filterMenuClass</td>
+                            <td>string</td>
+                            <td>null</td>
+                            <td>Style class of the column filter overlay.</td>
+                        </tr>
+                        <tr>
+                            <td>selectionMode</td>
+                            <td>string</td>
+                            <td>null</td>
+                            <td>Defines column based selection mode, options are "single" and "multiple".</td>
+                        </tr>
+                        <tr>
+                            <td>expander</td>
+                            <td>boolean</td>
+                            <td>false</td>
+                            <td>Displays an icon to toggle row expansion.</td>
+                        </tr>
+                        <tr>
+                            <td>colspan</td>
+                            <td>number</td>
+                            <td>null</td>
+                            <td>Number of columns to span for grouping.</td>
+                        </tr>
+                        <tr>
+                            <td>rowspan</td>
+                            <td>number</td>
+                            <td>null</td>
+                            <td>Number of rows to span for grouping.</td>
+                        </tr>
+                        <tr>
+                            <td>rowReorder</td>
+                            <td>boolean</td>
+                            <td>false</td>
+                            <td>Whether this column displays an icon to reorder the rows.</td>
+                        </tr>
+                        <tr>
+                            <td>rowReorderIcon</td>
+                            <td>string</td>
+                            <td>pi pi-bars</td>
+                            <td>Icon of the drag handle to reorder rows.</td>
+                        </tr>
+                        <tr>
+                            <td>reorderableColumn</td>
+                            <td>boolean</td>
+                            <td>true</td>
+                            <td>Defines if the column itself can be reordered with dragging.</td>
+                        </tr>
+                        <tr>
+                            <td>rowEditor</td>
+                            <td>boolean</td>
+                            <td>false</td>
+                            <td>When enabled, column displays row editor controls.</td>
+                        </tr>
+                        <tr>
+                            <td>frozen</td>
+                            <td>boolean</td>
+                            <td>false</td>
+                            <td>Whether the column is fixed in horizontal scrolling.</td>
+                        </tr>
+                        <tr>
+                            <td>alignFrozen</td>
+                            <td>string</td>
+                            <td>left</td>
+                            <td>Position of a frozen column, valid values are left and right.</td>
+                        </tr>
+                        <tr>
+                            <td>exportable</td>
+                            <td>boolean</td>
+                            <td>true</td>
+                            <td>Whether the column is included in data export.</td>
+                        </tr>
+                        <tr>
+                            <td>exportHeader</td>
+                            <td>string</td>
+                            <td>null</td>
+                            <td>Custom export header of the column to be exported as CSV.</td>
+                        </tr>
+                        <tr>
+                            <td>exportFooter</td>
+                            <td>string</td>
+                            <td>null</td>
+                            <td>Custom export footer of the column to be exported as CSV.</td>
+                        </tr>
+                        <tr>
+                            <td>filterMatchMode</td>
+                            <td>string</td>
+                            <td>null</td>
+                            <td>Defines the filtering algorithm to use when searching the options.</td>
+                        </tr>
+                        <tr>
+                            <td>hidden</td>
+                            <td>boolean</td>
+                            <td>false</td>
+                            <td>Whether the column is rendered.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
 
-                <h5>Column Slots</h5>
-                <div class="doc-tablewrapper">
-                    <table class="doc-table">
-                        <thead>
-                            <tr>
-                                <th>Name</th>
-                                <th>Parameters</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr>
-                                <td>header</td>
-                                <td>column: Column node</td>
-                            </tr>
-                            <tr>
-                                <td>body</td>
-                                <td>
-                                    data: Row data <br />
-                                    column: Column node <br />
-                                    field: Column field <br />
-                                    index: Row index <br />
-                                    frozenRow: Is row frozen<br />
-                                    editorInitCallback: Callback function
-                                </td>
-                            </tr>
-                            <tr>
-                                <td>footer</td>
-                                <td>column: Column node</td>
-                            </tr>
-                            <tr>
-                                <td>editor</td>
-                                <td>
-                                    data: Row data <br />
-                                    column: Column node <br />
-                                    field: Column field <br />
-                                    index: Row index <br />
-                                    frozenRow: Is row frozen <br />
-                                    editorSaveCallback: Callback function <br />
-                                    editorCancelCallback: Callback function
-                                </td>
-                            </tr>
-                            <tr>
-                                <td>filter</td>
-                                <td>
-                                    field: Column field <br />
-                                    filterModel: {value,matchMode} Filter metadata <br />
-                                    filterCallback: Callback function
-                                </td>
-                            </tr>
-                            <tr>
-                                <td>filterheader</td>
-                                <td>
-                                    field: Column field <br />
-                                    filterModel: {value,matchMode} Filter metadata <br />
-                                    filterCallback: Callback function
-                                </td>
-                            </tr>
-                            <tr>
-                                <td>filterfooter</td>
-                                <td>
-                                    field: Column field <br />
-                                    filterModel: {value,matchMode} Filter metadata <br />
-                                    filterCallback: Callback function
-                                </td>
-                            </tr>
-                            <tr>
-                                <td>filterclear</td>
-                                <td>
-                                    field: Column field <br />
-                                    filterModel: {value,matchMode} Filter metadata <br />
-                                    filterCallback: Callback function
-                                </td>
-                            </tr>
-                            <tr>
-                                <td>filterapply</td>
-                                <td>
-                                    field: Column field <br />
-                                    filterModel: {value,matchMode} Filter metadata <br />
-                                    filterCallback: Callback function
-                                </td>
-                            </tr>
-                            <tr>
-                                <td>loading</td>
-                                <td>
-                                    data: Row data <br />
-                                    column: Column node <br />
-                                    field: Column field <br />
-                                    index: Row index <br />
-                                    frozenRow: Is row frozen <br />
-                                    loadingOptions: Loading options.
-                                </td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
+            <h5>Column Slots</h5>
+            <div class="doc-tablewrapper">
+                <table class="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Parameters</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>header</td>
+                            <td>column: Column node</td>
+                        </tr>
+                        <tr>
+                            <td>body</td>
+                            <td>
+                                data: Row data <br />
+                                column: Column node <br />
+                                field: Column field <br />
+                                index: Row index <br />
+                                frozenRow: Is row frozen<br />
+                                editorInitCallback: Callback function
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>footer</td>
+                            <td>column: Column node</td>
+                        </tr>
+                        <tr>
+                            <td>editor</td>
+                            <td>
+                                data: Row data <br />
+                                column: Column node <br />
+                                field: Column field <br />
+                                index: Row index <br />
+                                frozenRow: Is row frozen <br />
+                                editorSaveCallback: Callback function <br />
+                                editorCancelCallback: Callback function
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>filter</td>
+                            <td>
+                                field: Column field <br />
+                                filterModel: {value,matchMode} Filter metadata <br />
+                                filterCallback: Callback function
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>filterheader</td>
+                            <td>
+                                field: Column field <br />
+                                filterModel: {value,matchMode} Filter metadata <br />
+                                filterCallback: Callback function
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>filterfooter</td>
+                            <td>
+                                field: Column field <br />
+                                filterModel: {value,matchMode} Filter metadata <br />
+                                filterCallback: Callback function
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>filterclear</td>
+                            <td>
+                                field: Column field <br />
+                                filterModel: {value,matchMode} Filter metadata <br />
+                                filterCallback: Callback function
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>filterapply</td>
+                            <td>
+                                field: Column field <br />
+                                filterModel: {value,matchMode} Filter metadata <br />
+                                filterCallback: Callback function
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>loading</td>
+                            <td>
+                                data: Row data <br />
+                                column: Column node <br />
+                                field: Column field <br />
+                                index: Row index <br />
+                                frozenRow: Is row frozen <br />
+                                loadingOptions: Loading options.
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
 
-                <h5>Auto Layout</h5>
-                <p>
-                    Default table-layout is fixed meaning the cell widths do not depend on their content. If you require cells to scale based on their contents set <i>autoLayout</i> property to true. Note that Scrollable and/or Resizable tables do
-                    not support auto layout due to technical limitations.
-                </p>
+            <h5>Auto Layout</h5>
+            <p>
+                Default table-layout is fixed meaning the cell widths do not depend on their content. If you require cells to scale based on their contents set <i>autoLayout</i> property to true. Note that Scrollable and/or Resizable tables do not
+                support auto layout due to technical limitations.
+            </p>
 
-                <h5>Templating</h5>
-                <p>
-                    Field data of a corresponding row is displayed as the cell content by default, this can be customized using a <i>body</i> template where current row data and column properties are passed via the slot props. On the other hand,
-                    <i>header</i> and <i>footer</i> sections of a column can either be defined with the properties or the templates. Similarly DataTable itself also provides header and footer properties along with the templates for the main header
-                    and footer of the table.
-                </p>
+            <h5>Templating</h5>
+            <p>
+                Field data of a corresponding row is displayed as the cell content by default, this can be customized using a <i>body</i> template where current row data and column properties are passed via the slot props. On the other hand,
+                <i>header</i> and <i>footer</i> sections of a column can either be defined with the properties or the templates. Similarly DataTable itself also provides header and footer properties along with the templates for the main header and
+                footer of the table.
+            </p>
 
-                <pre v-code><code><template v-pre>
+            <pre v-code><code><template v-pre>
 &lt;DataTable :value="cars"&gt;
     &lt;template #header&gt;
         &lt;div&gt;
@@ -527,7 +526,7 @@ export default {
     &lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
     &lt;Column field="brand" header="Brand"&gt;
         &lt;template #body="slotProps"&gt;
-            &lt;img :src="'/demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"  width="48px"/&gt;
+            &lt;img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"  width="48px"/&gt;
         &lt;/template&gt;
     &lt;/Column&gt;
     &lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
@@ -547,10 +546,10 @@ export default {
 </template>
 </code></pre>
 
-                <h5>Sizes</h5>
-                <p>In addition to the regular table, a smal and a large version are available with different paddings. For a table with smaller paddings use <i>p-datatable-sm</i> class and for a larger one use <i>p-datatable-lg</i>.</p>
+            <h5>Sizes</h5>
+            <p>In addition to the regular table, a smal and a large version are available with different paddings. For a table with smaller paddings use <i>p-datatable-sm</i> class and for a larger one use <i>p-datatable-lg</i>.</p>
 
-                <pre v-code><code><template v-pre>
+            <pre v-code><code><template v-pre>
 &lt;DataTable :value="cars" class="p-datatable-sm"&gt;
     &lt;template #header&gt;
         Small Table
@@ -583,9 +582,9 @@ export default {
 </template>
 </code></pre>
 
-                <h5>Column Grouping</h5>
-                <p>Columns can be grouped at header and footer sections by defining a ColumnGroup with nested rows and columns.</p>
-                <pre v-code><code><template v-pre>
+            <h5>Column Grouping</h5>
+            <p>Columns can be grouped at header and footer sections by defining a ColumnGroup with nested rows and columns.</p>
+            <pre v-code><code><template v-pre>
 &lt;DataTable :value="sales"&gt;
     &lt;ColumnGroup type="header"&gt;
         &lt;Row&gt;
@@ -619,13 +618,13 @@ export default {
 </template>
 </code></pre>
 
-                <h5>Pagination</h5>
-                <p>
-                    Pagination is enabled by setting <i>paginator</i> property to true and defining the <i>rows</i> property defines the number of rows per page. See the <nuxt-link to="/paginator">Paginator</nuxt-link> for the available customization
-                    options such as paginator templates, page links, rows per page options and more which can be passed through the DataTable.
-                </p>
+            <h5>Pagination</h5>
+            <p>
+                Pagination is enabled by setting <i>paginator</i> property to true and defining the <i>rows</i> property defines the number of rows per page. See the <router-link to="/paginator">Paginator</router-link> for the available customization
+                options such as paginator templates, page links, rows per page options and more which can be passed through the DataTable.
+            </p>
 
-                <pre v-code><code><template v-pre>
+            <pre v-code><code><template v-pre>
 &lt;DataTable :value="cars" :paginator="true" :rows="10"&gt;
     &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
     &lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
@@ -635,8 +634,8 @@ export default {
 </template>
 </code></pre>
 
-                <p><i>paginatorstart</i> and <i>paginatorend</i> templates are available to specify custom content at the left and right side.</p>
-                <pre v-code><code><template v-pre>
+            <p><i>paginatorstart</i> and <i>paginatorend</i> templates are available to specify custom content at the left and right side.</p>
+            <pre v-code><code><template v-pre>
 &lt;DataTable :value="cars" :paginator="true" :rows="10"&gt;
     &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
     &lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
@@ -652,11 +651,11 @@ export default {
 </template>
 </code></pre>
 
-                <p>
-                    Paginator can also be programmed programmatically using a binding to the <i>first</i> property that defines the index of the first element to display. For example setting first to zero will reset the paginator to the very first
-                    page. This property also supports v-model in case you'd like your binding to be updated whenever the user changes the page.
-                </p>
-                <pre v-code><code><template v-pre>
+            <p>
+                Paginator can also be programmed programmatically using a binding to the <i>first</i> property that defines the index of the first element to display. For example setting first to zero will reset the paginator to the very first page.
+                This property also supports v-model in case you'd like your binding to be updated whenever the user changes the page.
+            </p>
+            <pre v-code><code><template v-pre>
 &lt;DataTable :value="cars" :paginator="true" :rows="10" :first="firstRecordIndex"&gt;
     &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
     &lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
@@ -666,10 +665,10 @@ export default {
 </template>
 </code></pre>
 
-                <h5>Sorting</h5>
-                <p>Enabling <i>sortable</i> property at column component would be enough to make a column sortable. The property to use when sorting is the <i>field</i> by default and can be customized using the <i>sortField</i>.</p>
+            <h5>Sorting</h5>
+            <p>Enabling <i>sortable</i> property at column component would be enough to make a column sortable. The property to use when sorting is the <i>field</i> by default and can be customized using the <i>sortField</i>.</p>
 
-                <pre v-code><code><template v-pre>
+            <pre v-code><code><template v-pre>
 &lt;DataTable :value="cars"&gt;
     &lt;Column field="vin" header="Vin" :sortable="true"&gt;&lt;/Column&gt;
     &lt;Column field="year" header="Year" :sortable="true"&gt;&lt;/Column&gt;
@@ -679,8 +678,8 @@ export default {
 </template>
 </code></pre>
 
-                <p>By default sorting is executed on the clicked column only. To enable multiple field sorting, set <i>sortMode</i> property to "multiple" and use metakey when clicking on another column.</p>
-                <pre v-code><code><template v-pre>
+            <p>By default sorting is executed on the clicked column only. To enable multiple field sorting, set <i>sortMode</i> property to "multiple" and use metakey when clicking on another column.</p>
+            <pre v-code><code><template v-pre>
 &lt;DataTable :value="cars" sortMode="multiple"&gt;
     &lt;Column field="vin" header="Vin" :sortable="true"&gt;&lt;/Column&gt;
     &lt;Column field="year" header="Year" :sortable="true"&gt;&lt;/Column&gt;
@@ -690,11 +689,11 @@ export default {
 </template>
 </code></pre>
 
-                <p>
-                    In case you'd like to display the table as sorted per a single column by default on mount or programmatically apply sort, use <i>sortField</i> and <i>sortOrder</i> properties. These two properties also support the v-model
-                    directive to get updated when the user applies sort a column.
-                </p>
-                <pre v-code><code><template v-pre>
+            <p>
+                In case you'd like to display the table as sorted per a single column by default on mount or programmatically apply sort, use <i>sortField</i> and <i>sortOrder</i> properties. These two properties also support the v-model directive to
+                get updated when the user applies sort a column.
+            </p>
+            <pre v-code><code><template v-pre>
 &lt;DataTable :value="cars" sortField="year" :sortOrder="1"&gt;
     &lt;Column field="vin" header="Vin" :sortable="true"&gt;&lt;/Column&gt;
     &lt;Column field="year" header="Year" :sortable="true"&gt;&lt;/Column&gt;
@@ -711,8 +710,8 @@ export default {
 </template>
 </code></pre>
 
-                <p>In multiple mode, use the <i>multiSortMeta</i> property and bind an array of SortMeta objects instead.</p>
-                <pre v-code><code><template v-pre>
+            <p>In multiple mode, use the <i>multiSortMeta</i> property and bind an array of SortMeta objects instead.</p>
+            <pre v-code><code><template v-pre>
 &lt;DataTable :value="cars" sortMode="multiple" :multiSortMeta="multiSortMeta"&gt;
     &lt;Column field="vin" header="Vin" :sortable="true"&gt;&lt;/Column&gt;
     &lt;Column field="year" header="Year" :sortable="true"&gt;&lt;/Column&gt;
@@ -722,7 +721,7 @@ export default {
 </template>
 </code></pre>
 
-                <pre v-code.script><code>
+            <pre v-code.script><code>
 data() {
     return {
         multiSortMeta: [
@@ -734,15 +733,15 @@ data() {
 
 </code></pre>
 
-                <h5>Filtering</h5>
-                <p>
-                    DataTable has advanced filtering capabilities that does the heavy lifting while providing flexible customization. Filtering has two layout alternatives defined with the <i>filterDisplay</i>. In <b>row</b> setting, filter elements
-                    are displayed in a separate row at the header section whereas in <i>menu</i> mode filter elements are displayed inside an overlay. Filter metadata is specified using the <i>filters</i> as a v-model and UI elements for the
-                    filtering are placed inside the filter template. The template filter gets a <i>filterModel</i> and <i>filterCallback</i>, use filterModel.value to populate the filter with your own form components and call the filterCallback with
-                    the event of your choice like @input, @change, @click.
-                </p>
+            <h5>Filtering</h5>
+            <p>
+                DataTable has advanced filtering capabilities that does the heavy lifting while providing flexible customization. Filtering has two layout alternatives defined with the <i>filterDisplay</i>. In <b>row</b> setting, filter elements are
+                displayed in a separate row at the header section whereas in <i>menu</i> mode filter elements are displayed inside an overlay. Filter metadata is specified using the <i>filters</i> as a v-model and UI elements for the filtering are
+                placed inside the filter template. The template filter gets a <i>filterModel</i> and <i>filterCallback</i>, use filterModel.value to populate the filter with your own form components and call the filterCallback with the event of your
+                choice like @input, @change, @click.
+            </p>
 
-                <pre v-code.script><code>
+            <pre v-code.script><code>
 import CustomerService from '../../service/CustomerService';
 import {FilterMatchMode} from 'primevue/api';
 
@@ -764,10 +763,10 @@ export default {
 }
 </code></pre>
 
-                <h6>Filter Row</h6>
-                <p>Input field is displayed in a separate header row.</p>
+            <h6>Filter Row</h6>
+            <p>Input field is displayed in a separate header row.</p>
 
-                <pre v-code><code><template v-pre>
+            <pre v-code><code><template v-pre>
 &lt;DataTable :value="customers1"
                     dataKey="id" v-model:filters="filters" filterDisplay="row" :loading="loading"&gt;
     &lt;Column field="name" header="Name"&gt;
@@ -779,10 +778,10 @@ export default {
 </template>
 </code></pre>
 
-                <h6>Filter Menu</h6>
-                <p>Input field is displayed in an overlay.</p>
+            <h6>Filter Menu</h6>
+            <p>Input field is displayed in an overlay.</p>
 
-                <pre v-code><code><template v-pre>
+            <pre v-code><code><template v-pre>
 &lt;DataTable :value="customers1"
                     dataKey="id" v-model:filters="filters" filterDisplay="menu" :loading="loading"&gt;
     &lt;Column field="name" header="Name"&gt;
@@ -794,10 +793,10 @@ export default {
 </template>
 </code></pre>
 
-                <h6>Multiple Constraints</h6>
-                <p>In "menu" display, it is possible to add more constraints to a same filter. In this case, metadata could be an array of constraints. The operator defines whether all or any of the constraints should match.</p>
+            <h6>Multiple Constraints</h6>
+            <p>In "menu" display, it is possible to add more constraints to a same filter. In this case, metadata could be an array of constraints. The operator defines whether all or any of the constraints should match.</p>
 
-                <pre v-code.script><code>
+            <pre v-code.script><code>
 data() {
     return {
         customers: null,
@@ -808,9 +807,9 @@ data() {
 }
 </code></pre>
 
-                <h6>Populate Filters</h6>
-                <p>Providing a filters with predefined values would be enough to display the table as filtered by default. This approach can also be used to clear filters progammatically.</p>
-                <pre v-code.script><code>
+            <h6>Populate Filters</h6>
+            <p>Providing a filters with predefined values would be enough to display the table as filtered by default. This approach can also be used to clear filters progammatically.</p>
+            <pre v-code.script><code>
 data() {
     return {
         customers: null,
@@ -824,10 +823,10 @@ data() {
 }
 </code></pre>
 
-                <h6>Match Modes</h6>
-                <p>Depending on the <i>dataType</i> of the column, suitable match modes are displayed. Default configuration is available at <i>PrimeVue.filterMatchModeOptions</i> which can be used to customize the modes globally for all tables.</p>
+            <h6>Match Modes</h6>
+            <p>Depending on the <i>dataType</i> of the column, suitable match modes are displayed. Default configuration is available at <i>PrimeVue.filterMatchModeOptions</i> which can be used to customize the modes globally for all tables.</p>
 
-                <pre v-code.script><code>
+            <pre v-code.script><code>
 import {createApp} from 'vue';
 import PrimeVue from 'primevue/config';
 import FilterMatchMode from 'primevue/api',
@@ -861,8 +860,8 @@ app.use(PrimeVue, {
 });
 </code></pre>
 
-                <p>If you need to override the match modes for a particular column use the <i>filterMatchModeOptions</i> property and provide an array with label-value pairs.</p>
-                <pre v-code><code><template v-pre>
+            <p>If you need to override the match modes for a particular column use the <i>filterMatchModeOptions</i> property and provide an array with label-value pairs.</p>
+            <pre v-code><code><template v-pre>
 &lt;Column field="name" header="Name" :filterMatchModeOptions="matchModes"&gt;
     &lt;template #filter="{filterModel,filterCallback}"&gt;
         &lt;InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" class="p-column-filter" :placeholder="`Search by name - ${filterModel.matchMode}`"/&gt;
@@ -871,22 +870,22 @@ app.use(PrimeVue, {
 </template>
 </code></pre>
 
-                <pre v-code.script><code>
+            <pre v-code.script><code>
 matchModes: [
     {label: 'Starts With', value: FilterMatchMode.STARTS_WITH},
     {label: 'Contains', value: FilterMatchMode.CONTAINS},
 ]
 </code></pre>
 
-                <h6>Custom Filter</h6>
-                <p>Custom filtering is implemented using the <i>FilterService</i>, first register your filter and add it to your <i>filterMatchModeOptions</i>.</p>
-                <pre v-code.script><code>
+            <h6>Custom Filter</h6>
+            <p>Custom filtering is implemented using the <i>FilterService</i>, first register your filter and add it to your <i>filterMatchModeOptions</i>.</p>
+            <pre v-code.script><code>
 import {FilterService} from 'primevue/api';
 
 FilterService.register('myfilter', (a,b) => a === b);
 </code></pre>
 
-                <pre v-code.script><code>
+            <pre v-code.script><code>
 matchModes: [
     {label: 'My Filter', "myfilter"},
     {label: 'Starts With', value: FilterMatchMode.STARTS_WITH},
@@ -894,10 +893,10 @@ matchModes: [
 ]
 </code></pre>
 
-                <h6>Filter Slots</h6>
-                <p>Filter menu overlay can be customized even further with various templates including <i>filterheader</i>, <i>filterfooter</i>, <i>filterclear</i>, <i>filterapply</i>. Example here changes the buttons and adds a footer.</p>
+            <h6>Filter Slots</h6>
+            <p>Filter menu overlay can be customized even further with various templates including <i>filterheader</i>, <i>filterfooter</i>, <i>filterclear</i>, <i>filterapply</i>. Example here changes the buttons and adds a footer.</p>
 
-                <pre v-code><code><template v-pre>
+            <pre v-code><code><template v-pre>
 &lt;Column header="Country" filterField="country.name"&gt;
     &lt;template #filter="{filterModel}"&gt;
         &lt;InputText type="text" v-model="filterModel.value" class="p-column-filter" placeholder="Search by country"/&gt;
@@ -915,17 +914,17 @@ matchModes: [
 </template>
 </code></pre>
 
-                <h5>Selection</h5>
-                <p>
-                    DataTable provides single and multiple selection modes on click of a row. Selected rows are bound to the <i>selection</i> property and updated using the v-model directive. Alternatively column based selection can be done using
-                    radio buttons or checkboxes using <i>selectionMode</i> of a particular column. In addition row-select and row-unselect events are provided as optional callbacks.
-                </p>
+            <h5>Selection</h5>
+            <p>
+                DataTable provides single and multiple selection modes on click of a row. Selected rows are bound to the <i>selection</i> property and updated using the v-model directive. Alternatively column based selection can be done using radio
+                buttons or checkboxes using <i>selectionMode</i> of a particular column. In addition row-select and row-unselect events are provided as optional callbacks.
+            </p>
 
-                <p>The <i>dataKey</i> property identifies a unique value of a row in the dataset, it is not mandatory however being able to define it increases the performance of the table signifantly.</p>
+            <p>The <i>dataKey</i> property identifies a unique value of a row in the dataset, it is not mandatory however being able to define it increases the performance of the table signifantly.</p>
 
-                <p>In single mode, selection binding is an object reference.</p>
+            <p>In single mode, selection binding is an object reference.</p>
 
-                <pre v-code><code><template v-pre>
+            <pre v-code><code><template v-pre>
 &lt;DataTable :value="cars" v-model:selection="selectedCar" selectionMode="single" dataKey="vin"&gt;
     &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
     &lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
@@ -935,11 +934,11 @@ matchModes: [
 </template>
 </code></pre>
 
-                <p>
-                    In multiple mode, selection binding should be an array and multiple items can either be selected using metaKey or toggled individually depending on the value of <i>metaKeySelection</i> property value which is true by default. On
-                    touch enabled devices metaKeySelection is turned off automatically. Additionally ShiftKey is supported for range selection.
-                </p>
-                <pre v-code><code><template v-pre>
+            <p>
+                In multiple mode, selection binding should be an array and multiple items can either be selected using metaKey or toggled individually depending on the value of <i>metaKeySelection</i> property value which is true by default. On touch
+                enabled devices metaKeySelection is turned off automatically. Additionally ShiftKey is supported for range selection.
+            </p>
+            <pre v-code><code><template v-pre>
 &lt;DataTable :value="cars" v-model:selection="selectedCars" selectionMode="multiple" dataKey="vin"&gt;
     &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
     &lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
@@ -949,11 +948,11 @@ matchModes: [
 </template>
 </code></pre>
 
-                <p>
-                    If you prefer a radioButton or a checkbox instead of a row click, use the <i>selectionMode</i> of a column instead. Following datatable displays a checkbox at the first column of each row and automatically adds a header checkbox
-                    to toggle selection of all rows.
-                </p>
-                <pre v-code><code><template v-pre>
+            <p>
+                If you prefer a radioButton or a checkbox instead of a row click, use the <i>selectionMode</i> of a column instead. Following datatable displays a checkbox at the first column of each row and automatically adds a header checkbox to
+                toggle selection of all rows.
+            </p>
+            <pre v-code><code><template v-pre>
 &lt;DataTable :value="cars" v-model:selection="selectedCars" dataKey="vin"&gt;
     &lt;Column selectionMode="multiple"&gt;&lt;/Column&gt;
     &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
@@ -964,9 +963,9 @@ matchModes: [
 </template>
 </code></pre>
 
-                <h5>Scrolling</h5>
-                <p>DataTable supports both horizontal and vertical scrolling as well as frozen columns and rows. Scrollable DataTable is enabled using <i>scrollable</i> property and <i>scrollHeight</i> to define the viewport height.</p>
-                <pre v-code><code><template v-pre>
+            <h5>Scrolling</h5>
+            <p>DataTable supports both horizontal and vertical scrolling as well as frozen columns and rows. Scrollable DataTable is enabled using <i>scrollable</i> property and <i>scrollHeight</i> to define the viewport height.</p>
+            <pre v-code><code><template v-pre>
 &lt;DataTable :value="cars" :scrollable="true" scrollHeight="400px"&gt;
     &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
     &lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
@@ -976,25 +975,25 @@ matchModes: [
 </template>
 </code></pre>
 
-                <h5>Column Widths of a Scrollable Table</h5>
-                <p>Scrollable table uses flex layout so there are a couple of rules to consider when adjusting the widths of columns.</p>
-                <ul>
-                    <li>Use <i>min-width</i> in vertical scrolling only so that when there is enough space columns may grow and for smaller screens a horizontal scrollbar is displayed to provide responsive design.</li>
-                    <li>When horizontal scrolling is enabled, prefer <i>width</i> instead of <i>min-width</i>.</li>
-                    <li>In vertical scrolling only, use <i>flex</i> to disable grow and shrink while defining a initial width. When horizontal scrolling is enabled, this is not required as columns do not grow or shrink in horizontal scrolling.</li>
-                </ul>
+            <h5>Column Widths of a Scrollable Table</h5>
+            <p>Scrollable table uses flex layout so there are a couple of rules to consider when adjusting the widths of columns.</p>
+            <ul>
+                <li>Use <i>min-width</i> in vertical scrolling only so that when there is enough space columns may grow and for smaller screens a horizontal scrollbar is displayed to provide responsive design.</li>
+                <li>When horizontal scrolling is enabled, prefer <i>width</i> instead of <i>min-width</i>.</li>
+                <li>In vertical scrolling only, use <i>flex</i> to disable grow and shrink while defining a initial width. When horizontal scrolling is enabled, this is not required as columns do not grow or shrink in horizontal scrolling.</li>
+            </ul>
 
-                <pre v-code><code><template v-pre>
+            <pre v-code><code><template v-pre>
 &lt;Column field="vin" header="Vin" style="flex: 0 0 4rem"&gt;&lt;/Column&gt;
 </template>
 </code></pre>
 
-                <h6>Flex Scroll</h6>
-                <p>
-                    In cases where viewport should adjust itself according to the table parent's height instead of a fixed viewport height, set scrollHeight option as flex. In example below, table is inside a Dialog where viewport size dynamically
-                    responds to the dialog size changes such as maximizing.
-                </p>
-                <pre v-code><code><template v-pre>
+            <h6>Flex Scroll</h6>
+            <p>
+                In cases where viewport should adjust itself according to the table parent's height instead of a fixed viewport height, set scrollHeight option as flex. In example below, table is inside a Dialog where viewport size dynamically
+                responds to the dialog size changes such as maximizing.
+            </p>
+            <pre v-code><code><template v-pre>
 &lt;Button label="Show" icon="pi pi-external-link" @click="openDialog" /&gt;
 &lt;Dialog header="Flex Scroll" v-model:visible="dialogVisible" :style="{width: '50vw'}" :maximizable="true" :modal="true" :contentStyle="{height: '300px'}"&gt;
     &lt;DataTable :value="cars" :scrollable="true" scrollHeight="flex"&gt;
@@ -1011,9 +1010,9 @@ matchModes: [
 </template>
 </code></pre>
 
-                <h6>Full Page Scroll</h6>
-                <p>FlexScroll can also be used for cases where scrollable viewport should be responsive with respect to the window size. See the <nuxt-link to="/datatable/flexscroll">full page</nuxt-link> demo for an example.</p>
-                <pre v-code><code><template v-pre>
+            <h6>Full Page Scroll</h6>
+            <p>FlexScroll can also be used for cases where scrollable viewport should be responsive with respect to the window size. See the <router-link to="/datatable/flexscroll">full page</router-link> demo for an example.</p>
+            <pre v-code><code><template v-pre>
 &lt;div style="height: calc(100vh - 143px)"&gt;
     &lt;DataTable :value="cars" :scrollable="true" scrollHeight="flex"&gt;
         &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
@@ -1025,9 +1024,9 @@ matchModes: [
 </template>
 </code></pre>
 
-                <h6>Horizontal Scrolling</h6>
-                <p>For horizontal scrolling, it is required to set <i>scrollDirection</i> to "horizontal" and give fixed widths to columns.</p>
-                <pre v-code><code><template v-pre>
+            <h6>Horizontal Scrolling</h6>
+            <p>For horizontal scrolling, it is required to set <i>scrollDirection</i> to "horizontal" and give fixed widths to columns.</p>
+            <pre v-code><code><template v-pre>
 &lt;DataTable :value="customers" :scrollable="true"  scrollDirection="horizontal"&gt;
     &lt;Column field="id" header="Id" footer="Id" :style="{width:'200px'}"&gt;&lt;/Column&gt;
     &lt;Column field="name" header="Name" footer="Name" :style="{width:'200px'}"&gt;&lt;/Column&gt;
@@ -1042,9 +1041,9 @@ matchModes: [
 </template>
 </code></pre>
 
-                <h6>Horizontal and Vertical Scrolling</h6>
-                <p>Set <i>scrollDirection</i> to "both" and give fixed widths to columns to scroll both ways.</p>
-                <pre v-code><code><template v-pre>
+            <h6>Horizontal and Vertical Scrolling</h6>
+            <p>Set <i>scrollDirection</i> to "both" and give fixed widths to columns to scroll both ways.</p>
+            <pre v-code><code><template v-pre>
 &lt;DataTable :value="customers" :scrollable="true" scrollHeight="400px" scrollDirection="both"&gt;
     &lt;Column field="id" header="Id" footer="Id" :style="{width:'200px'}"&gt;&lt;/Column&gt;
     &lt;Column field="name" header="Name" footer="Name" :style="{width:'200px'}"&gt;&lt;/Column&gt;
@@ -1059,10 +1058,10 @@ matchModes: [
 </template>
 </code></pre>
 
-                <h6>Frozen Rows</h6>
-                <p>Frozen rows are used to fix certain rows while scrolling, this data is defined with the <i>frozenValue</i> property.</p>
+            <h6>Frozen Rows</h6>
+            <p>Frozen rows are used to fix certain rows while scrolling, this data is defined with the <i>frozenValue</i> property.</p>
 
-                <pre v-code><code><template v-pre>
+            <pre v-code><code><template v-pre>
 &lt;DataTable :value="customers" :frozenValue="lockedCustomers" :scrollable="true" scrollHeight="400px"&gt;
     &lt;Column field="name" header="Name"&gt;&lt;/Column&gt;
     &lt;Column field="country.name" header="Country"&gt;&lt;/Column&gt;
@@ -1072,10 +1071,10 @@ matchModes: [
 </template>
 </code></pre>
 
-                <h6>Frozen Columns</h6>
-                <p>Certain columns can be frozen by using the <i>frozen</i> property of the column component. In addition <i>alignFrozen</i> is available to define whether the column should be fixed on the left or right.</p>
+            <h6>Frozen Columns</h6>
+            <p>Certain columns can be frozen by using the <i>frozen</i> property of the column component. In addition <i>alignFrozen</i> is available to define whether the column should be fixed on the left or right.</p>
 
-                <pre v-code><code><template v-pre>
+            <pre v-code><code><template v-pre>
 &lt;DataTable :value="customers" :scrollable="true" scrollHeight="400px" scrollDirection="both"&gt;
     &lt;Column field="name" header="Name" :style="{width:'200px'}" frozen&gt;&lt;/Column&gt;
     &lt;Column field="id" header="Id" :style="{width:'100px'}" :frozen="idFrozen"&gt;&lt;/Column&gt;
@@ -1091,33 +1090,33 @@ matchModes: [
 </template>
 </code></pre>
 
-                <h6>Scrollable RowGroup</h6>
-                <p>
-                    Row groups with subheaders have exclusive support for filtering, when the table scrolls the subheaders stay fixed as long as their data are still displayed. No additional configuration is required to enable this feature. View the
-                    <nuxt-link to="/datatable/rowgroup">Row Group</nuxt-link> demo for an example.
-                </p>
+            <h6>Scrollable RowGroup</h6>
+            <p>
+                Row groups with subheaders have exclusive support for filtering, when the table scrolls the subheaders stay fixed as long as their data are still displayed. No additional configuration is required to enable this feature. View the
+                <router-link to="/datatable/rowgroup">Row Group</router-link> demo for an example.
+            </p>
 
-                <h5>Lazy Loading</h5>
-                <p>
-                    Lazy mode is handy to deal with large datasets, instead of loading the entire data, small chunks of data is loaded by invoking corresponding callbacks such as paging and sorting. It is also important to assign the logical number
-                    of rows to totalRecords by doing a projection query for paginator configuration so that paginator displays the UI accordingly.
-                </p>
+            <h5>Lazy Loading</h5>
+            <p>
+                Lazy mode is handy to deal with large datasets, instead of loading the entire data, small chunks of data is loaded by invoking corresponding callbacks such as paging and sorting. It is also important to assign the logical number of
+                rows to totalRecords by doing a projection query for paginator configuration so that paginator displays the UI accordingly.
+            </p>
 
-                <p>
-                    Lazy loading is implemented by handling <i>page</i>, <i>sort</i>, <i>filter</i> events by making a remote query using the information passed to these events such as first offset, number of rows, sort field for ordering and
-                    filters. Note that, in lazy filtering totalRecords should also be updated to align the data with the paginator.
-                </p>
+            <p>
+                Lazy loading is implemented by handling <i>page</i>, <i>sort</i>, <i>filter</i> events by making a remote query using the information passed to these events such as first offset, number of rows, sort field for ordering and filters.
+                Note that, in lazy filtering totalRecords should also be updated to align the data with the paginator.
+            </p>
 
-                <p>Visit the <nuxt-link to="/datatable/lazy">lazy loading</nuxt-link> demo for an example with a remote datasource.</p>
+            <p>Visit the <router-link to="/datatable/lazy">lazy loading</router-link> demo for an example with a remote datasource.</p>
 
-                <h5>Row Expansion</h5>
-                <p>
-                    Rows can be expanded to display additional content using the <i>expandedRows</i> property with the v-model directive accompanied by a template named "expansion". <i>row-expand</i> and <i>row-collapse</i> are optional callbacks
-                    that are invoked when a row is expanded or toggled.
-                </p>
+            <h5>Row Expansion</h5>
+            <p>
+                Rows can be expanded to display additional content using the <i>expandedRows</i> property with the v-model directive accompanied by a template named "expansion". <i>row-expand</i> and <i>row-collapse</i> are optional callbacks that
+                are invoked when a row is expanded or toggled.
+            </p>
 
-                <p>The <i>dataKey</i> property identifies a unique value of a row in the dataset, it is not mandatory in row expansion functionality however being able to define it increases the performance of the table significantly.</p>
-                <pre v-code><code><template v-pre>
+            <p>The <i>dataKey</i> property identifies a unique value of a row in the dataset, it is not mandatory in row expansion functionality however being able to define it increases the performance of the table significantly.</p>
+            <pre v-code><code><template v-pre>
 &lt;DataTable :value="cars" v-model:expandedRows="expandedRows" dataKey="vin"
     @row-expand="onRowExpand" @row-collapse="onRowCollapse"&gt;
     &lt;template #header&gt;
@@ -1134,7 +1133,7 @@ matchModes: [
     &lt;template #expansion="slotProps"&gt;
         &lt;div class="car-details"&gt;
             &lt;div&gt;
-                &lt;img :src="'/demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/&gt;
+                &lt;img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/&gt;
                 &lt;div class="grid"&gt;
                     &lt;div class="col-12"&gt;Vin: &lt;b&gt;&#123;&#123;slotProps.data.vin&#125;&#125;&lt;/b&gt;&lt;/div&gt;
                     &lt;div class="col-12"&gt;Year: &lt;b&gt;&#123;&#123;slotProps.data.year&#125;&#125;&lt;/b&gt;&lt;/div&gt;
@@ -1149,7 +1148,7 @@ matchModes: [
 </template>
 </code></pre>
 
-                <pre v-code.script><code>
+            <pre v-code.script><code>
 import CarService from '../../service/CarService';
 
 export default {
@@ -1186,16 +1185,16 @@ export default {
 
 </code></pre>
 
-                <h5>InCell Editing</h5>
-                <p>In cell editing provides a rapid and user friendly way to manipulate the data. The datatable provides a flexible API so that the editing behavior is implemented by the page author whether it utilizes v-model or vuex.</p>
+            <h5>InCell Editing</h5>
+            <p>In cell editing provides a rapid and user friendly way to manipulate the data. The datatable provides a flexible API so that the editing behavior is implemented by the page author whether it utilizes v-model or vuex.</p>
 
-                <p>
-                    Individual cell editing is configured by setting the <i>editMode</i> to <b>cell</b>, defining editors with the <b>editor</b> template along with the <i>@cell-edit-complete</i> event. The content of the editor defines how the
-                    editing is implemented. The editor template receives a clone of the row data and using <i>@cell-edit-complete</i> event the new value can be updated to the model or cancelled. This also provides flexibility to apply conditional
-                    logic such as implementing validations.
-                </p>
+            <p>
+                Individual cell editing is configured by setting the <i>editMode</i> to <b>cell</b>, defining editors with the <b>editor</b> template along with the <i>@cell-edit-complete</i> event. The content of the editor defines how the editing
+                is implemented. The editor template receives a clone of the row data and using <i>@cell-edit-complete</i> event the new value can be updated to the model or cancelled. This also provides flexibility to apply conditional logic such as
+                implementing validations.
+            </p>
 
-                <pre v-code><code><template v-pre>
+            <pre v-code><code><template v-pre>
 &lt;h5&gt;Cell Editing&lt;/h5&gt;
 &lt;DataTable :value="cars" editMode="cell" @cell-edit-complete="onCellEditComplete"&gt;
     &lt;Column field="vin" header="Vin"&gt;
@@ -1213,7 +1212,7 @@ export default {
             &lt;Dropdown v-model="slotProps.data['brand']" :options="brands" optionLabel="brand" optionValue="value" placeholder="Select a Brand"&gt;
                 &lt;template #option="optionProps"&gt;
                     &lt;div class="p-dropdown-car-option"&gt;
-                        &lt;img :alt="optionProps.option.brand" :src="'/demo/images/car/' + optionProps.option.brand + '.png'" /&gt;
+                        &lt;img :alt="optionProps.option.brand" :src="'demo/images/car/' + optionProps.option.brand + '.png'" /&gt;
                         &lt;span&gt;{{optionProps.option.brand}}&lt;/span&gt;
                     &lt;/div&gt;
                 &lt;/template&gt;
@@ -1229,7 +1228,7 @@ export default {
 </template>
 </code></pre>
 
-                <pre v-code.script><code>
+            <pre v-code.script><code>
 import CarService from '../../service/CarService';
 import Vue from 'vue';
 
@@ -1292,12 +1291,12 @@ export default {
 
 </code></pre>
 
-                <p>
-                    Row Editing is specified by setting <i>editMode</i> as <b>row</b>, defining <i>editingRows</i> with the v-model directive to hold the reference of the editing rows, adding a row editor column to provide the editing controls and
-                    implementing <i>@row-edit-save</i> to update the original row data. Note that since <i>editingRows</i> is two-way binding enabled, you may use it to initially display one or more rows in editing more or programmatically toggle row
-                    editing.
-                </p>
-                <pre v-code><code><template v-pre>
+            <p>
+                Row Editing is specified by setting <i>editMode</i> as <b>row</b>, defining <i>editingRows</i> with the v-model directive to hold the reference of the editing rows, adding a row editor column to provide the editing controls and
+                implementing <i>@row-edit-save</i> to update the original row data. Note that since <i>editingRows</i> is two-way binding enabled, you may use it to initially display one or more rows in editing more or programmatically toggle row
+                editing.
+            </p>
+            <pre v-code><code><template v-pre>
 &lt;h3&gt;Row Editing&lt;/h3&gt;
 &lt;DataTable :value="cars" editMode="row" dataKey="vin" v-model:editingRows="editingRows" @row-edit-save="onRowEditSave"&gt;
     &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
@@ -1321,7 +1320,7 @@ export default {
 </template>
 </code></pre>
 
-                <pre v-code.script><code>
+            <pre v-code.script><code>
 import CarService from '../../service/CarService';
 import Vue from 'vue';
 
@@ -1350,12 +1349,12 @@ export default {
 
 </code></pre>
 
-                <h5>Column Resize</h5>
-                <p>
-                    Columns can be resized using drag drop by setting the <i>resizableColumns</i> to true. There are two resize modes; "fit" and "expand". Fit is the default one and the overall table width does not change when a column is resized. In
-                    "expand" mode, table width also changes along with the column width. <i>column-resize-end</i> is a callback that passes the resized column header and delta change as a parameter.
-                </p>
-                <pre v-code><code><template v-pre>
+            <h5>Column Resize</h5>
+            <p>
+                Columns can be resized using drag drop by setting the <i>resizableColumns</i> to true. There are two resize modes; "fit" and "expand". Fit is the default one and the overall table width does not change when a column is resized. In
+                "expand" mode, table width also changes along with the column width. <i>column-resize-end</i> is a callback that passes the resized column header and delta change as a parameter.
+            </p>
+            <pre v-code><code><template v-pre>
 &lt;DataTable :value="cars" :resizableColumns="true" columnResizeMode="fit | expand"&gt;
     &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
     &lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
@@ -1365,8 +1364,8 @@ export default {
 </template>
 </code></pre>
 
-                <p>It is important to note that when you need to change column widths, since table width is 100%, giving fixed pixel widths does not work well as browsers scale them, instead give percentage widths.</p>
-                <pre v-code><code><template v-pre>
+            <p>It is important to note that when you need to change column widths, since table width is 100%, giving fixed pixel widths does not work well as browsers scale them, instead give percentage widths.</p>
+            <pre v-code><code><template v-pre>
 &lt;DataTable :value="cars" :resizableColumns="true" columnResizeMode="fit | expand"&gt;
     &lt;Column field="vin" header="Vin" headerStyle="width: 20%"&gt;&lt;/Column&gt;
     &lt;Column field="year" header="Year" headerStyle="width: 40%"&gt;&lt;/Column&gt;
@@ -1376,12 +1375,12 @@ export default {
 </template>
 </code></pre>
 
-                <h5>Column Reorder</h5>
-                <p>
-                    Columns can be reordered using drag drop by setting the <i>reorderableColumns</i> to true. <i>column-reorder</i> is a callback that is invoked when a column is reordered. DataTable keeps the column order state internally using
-                    keys that identifies a column using the field property. If the column has no field, use columnKey instead as it is mandatory for columns to have unique keys when reordering is enabled.
-                </p>
-                <pre v-code><code><template v-pre>
+            <h5>Column Reorder</h5>
+            <p>
+                Columns can be reordered using drag drop by setting the <i>reorderableColumns</i> to true. <i>column-reorder</i> is a callback that is invoked when a column is reordered. DataTable keeps the column order state internally using keys
+                that identifies a column using the field property. If the column has no field, use columnKey instead as it is mandatory for columns to have unique keys when reordering is enabled.
+            </p>
+            <pre v-code><code><template v-pre>
 &lt;DataTable :value="cars" :reorderableColumns="true"&gt;
     &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
     &lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
@@ -1391,12 +1390,12 @@ export default {
 </template>
 </code></pre>
 
-                <h5>Row Reorder</h5>
-                <p>
-                    Data can be reordered using drag drop by adding a reorder column that will display an icon as a drag handle along with the <i>row-reorder</i> event which is <b>mandatory</b> to update the new order. Note that the reorder icon can
-                    be customized using <i>rowReorderIcon</i> of the column component.
-                </p>
-                <pre v-code><code><template v-pre>
+            <h5>Row Reorder</h5>
+            <p>
+                Data can be reordered using drag drop by adding a reorder column that will display an icon as a drag handle along with the <i>row-reorder</i> event which is <b>mandatory</b> to update the new order. Note that the reorder icon can be
+                customized using <i>rowReorderIcon</i> of the column component.
+            </p>
+            <pre v-code><code><template v-pre>
 &lt;DataTable :value="cars" @row-reorder="onRowReorder"&gt;
     &lt;Column :rowReorder="true" headerStyle="width: 3em" /&gt;
     &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
@@ -1407,7 +1406,7 @@ export default {
 </template>
 </code></pre>
 
-                <pre v-code.script><code>
+            <pre v-code.script><code>
 import CarService from '../../service/CarService';
 
 export default {
@@ -1433,16 +1432,16 @@ export default {
 
 </code></pre>
 
-                <h5>Row Group</h5>
-                <p>
-                    Row Grouping comes in two modes, in "subheader" mode rows are grouped by a header row along with an optional group footer. In addition, the groups can be made toggleable by enabling <i>expandableRowGroups</i> as true. On the other
-                    hand, the "rowspan" mode uses rowspans instead of a header to group rows. <i>groupRowsBy</i> property defines the field to use in row grouping. Multiple row grouping is available in "rowspan" mode by specifying the
-                    <i>groupRowsBy</i> as an array of fields.
-                </p>
+            <h5>Row Group</h5>
+            <p>
+                Row Grouping comes in two modes, in "subheader" mode rows are grouped by a header row along with an optional group footer. In addition, the groups can be made toggleable by enabling <i>expandableRowGroups</i> as true. On the other
+                hand, the "rowspan" mode uses rowspans instead of a header to group rows. <i>groupRowsBy</i> property defines the field to use in row grouping. Multiple row grouping is available in "rowspan" mode by specifying the
+                <i>groupRowsBy</i> as an array of fields.
+            </p>
 
-                <p>Example below demonstrates the all grouping alternatives. Note that data needs to be sorted for grouping which can also be done by the table itself by speficying the sort properties.</p>
+            <p>Example below demonstrates the all grouping alternatives. Note that data needs to be sorted for grouping which can also be done by the table itself by speficying the sort properties.</p>
 
-                <pre v-code><code><template v-pre>
+            <pre v-code><code><template v-pre>
 &lt;h3&gt;Subheader Grouping&lt;/h3&gt;
 &lt;DataTable :value="cars" rowGroupMode="subheader" groupRowsBy="brand"
     sortMode="single" sortField="brand" :sortOrder="1"&gt;
@@ -1496,7 +1495,7 @@ export default {
 </template>
 </code></pre>
 
-                <pre v-code.script><code>
+            <pre v-code.script><code>
 import CarService from '../../service/CarService';
 
 export default {
@@ -1538,9 +1537,9 @@ export default {
 
 </code></pre>
 
-                <h5>Data Export</h5>
-                <p>DataTable can export its data in CSV format using <i>exportCSV()</i> method.</p>
-                <pre v-code><code><template v-pre>
+            <h5>Data Export</h5>
+            <p>DataTable can export its data in CSV format using <i>exportCSV()</i> method.</p>
+            <pre v-code><code><template v-pre>
 &lt;DataTable :value="cars" ref="dt"&gt;
     &lt;template #header&gt;
         &lt;div style="text-align: left"&gt;
@@ -1555,7 +1554,7 @@ export default {
 </template>
 </code></pre>
 
-                <pre v-code.script><code>
+            <pre v-code.script><code>
 import CarService from '../../service/CarService';
 
 export default {
@@ -1580,13 +1579,13 @@ export default {
 
 </code></pre>
 
-                <h5>TableState</h5>
-                <p>
-                    Stateful table allows keeping the state such as page, sort and filtering either at local storage or session storage so that when the page is visited again, table would render the data using its last settings. Enabling state is
-                    easy as defining a unique <i>stateKey</i>, the storage to keep the state is defined with the <i>stateStorage</i> property that accepts session for sessionStorage and local for localStorage. Currently following features are
-                    supported by TableState; paging, sorting, filtering, column resizing, column reordering, row expansion, row group expansion and row selection.
-                </p>
-                <pre v-code><code><template v-pre>
+            <h5>TableState</h5>
+            <p>
+                Stateful table allows keeping the state such as page, sort and filtering either at local storage or session storage so that when the page is visited again, table would render the data using its last settings. Enabling state is easy as
+                defining a unique <i>stateKey</i>, the storage to keep the state is defined with the <i>stateStorage</i> property that accepts session for sessionStorage and local for localStorage. Currently following features are supported by
+                TableState; paging, sorting, filtering, column resizing, column reordering, row expansion, row group expansion and row selection.
+            </p>
+            <pre v-code><code><template v-pre>
 &lt;DataTable :value="cars" :paginator="true" :rows="10" v-model:filters="filters"
     stateStorage="session" stateKey="dt-state-demo-session"
     v-model:selection="selectedCar" selectionMode="single" dataKey="vin"&gt;
@@ -1611,7 +1610,7 @@ export default {
             &lt;Dropdown v-model="filters['brand']" :options="brands" optionLabel="brand" optionValue="value" placeholder="Select a Brand" class="p-column-filter" :showClear="true"&gt;
                 &lt;template #option="slotProps"&gt;
                     &lt;div class="p-dropdown-car-option"&gt;
-                        &lt;img :alt="slotProps.option.brand" :src="'/demo/images/car/' + slotProps.option.brand + '.png'" /&gt;
+                        &lt;img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" /&gt;
                         &lt;span&gt;&#123;&#123;slotProps.option.brand&#125;&#125;&lt;/span&gt;
                     &lt;/div&gt;
                 &lt;/template&gt;
@@ -1630,7 +1629,7 @@ export default {
 </template>
 </code></pre>
 
-                <pre v-code.script><code>
+            <pre v-code.script><code>
 import CarService from '../../service/CarService';
 
 export default {
@@ -1674,9 +1673,9 @@ export default {
 
 </code></pre>
 
-                <h5>ContextMenu</h5>
-                <p>DataTable provides exclusive integration with the ContextMenu component using, <i>contextMenu</i>, <i>contextMenuSelection</i> property along with the <i>row-contextmenu</i> event.</p>
-                <pre v-code><code><template v-pre>
+            <h5>ContextMenu</h5>
+            <p>DataTable provides exclusive integration with the ContextMenu component using, <i>contextMenu</i>, <i>contextMenuSelection</i> property along with the <i>row-contextmenu</i> event.</p>
+            <pre v-code><code><template v-pre>
 &lt;DataTable :value="cars" contextMenu v-model:contextMenuSelection="selectedCar" @row-contextmenu="onRowContextMenu"&gt;
     &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
     &lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
@@ -1688,7 +1687,7 @@ export default {
 </template>
 </code></pre>
 
-                <pre v-code.script><code>
+            <pre v-code.script><code>
 import CarService from '../../service/CarService';
 
 export default {
@@ -1726,9 +1725,9 @@ export default {
 
 </code></pre>
 
-                <h5>Empty Message</h5>
-                <p>When there is no data, you may use the <i>empty</i> template to display a message.</p>
-                <pre v-code><code><template v-pre>
+            <h5>Empty Message</h5>
+            <p>When there is no data, you may use the <i>empty</i> template to display a message.</p>
+            <pre v-code><code><template v-pre>
 &lt;DataTable :value="cars"&gt;
     &lt;template #empty&gt;
         No records found
@@ -1741,12 +1740,12 @@ export default {
 </template>
 </code></pre>
 
-                <h5>Loading</h5>
-                <p>
-                    A loading status indicator can be displayed when the <i>loading</i> property is enabled. The icon is customized through <i>loadingIcon</i> property. Additionally an option loading template is available to render as the body until
-                    the data is loaded.
-                </p>
-                <pre v-code><code><template v-pre>
+            <h5>Loading</h5>
+            <p>
+                A loading status indicator can be displayed when the <i>loading</i> property is enabled. The icon is customized through <i>loadingIcon</i> property. Additionally an option loading template is available to render as the body until the
+                data is loaded.
+            </p>
+            <pre v-code><code><template v-pre>
 &lt;DataTable :value="cars" :loading="loading"&gt;
      &lt;template #loading&gt;
         Loading records, please wait...
@@ -1759,7 +1758,7 @@ export default {
 </template>
 </code></pre>
 
-                <pre v-code.script><code>
+            <pre v-code.script><code>
 import CarService from '../../service/CarService';
 
 export default {
@@ -1786,40 +1785,40 @@ export default {
 
 </code></pre>
 
-                <h5>Responsive</h5>
-                <p>
-                    DataTable responsive layout can be achieved in two ways; first approach is displaying a horizontal scrollbar for smaller screens and second one is defining a breakpoint to display the cells of a row as stacked. Scrollable tables
-                    use the scroll layout approach internally and do not require additional configuration.
-                </p>
+            <h5>Responsive</h5>
+            <p>
+                DataTable responsive layout can be achieved in two ways; first approach is displaying a horizontal scrollbar for smaller screens and second one is defining a breakpoint to display the cells of a row as stacked. Scrollable tables use
+                the scroll layout approach internally and do not require additional configuration.
+            </p>
 
-                <h6>Scroll Layout</h6>
-                <p>
-                    Set <i>responsiveLayout</i> to scroll to enabled this layout. Note that, when scroll mode is enabled table-layout automatically switches to auto from fixed as a result table widths are likely to differ and resizable columns are
-                    not supported. Read more about <a href="https://www.w3schools.com/cssref/pr_tab_table-layout.asp">table-layout</a> for more details.
-                </p>
+            <h6>Scroll Layout</h6>
+            <p>
+                Set <i>responsiveLayout</i> to scroll to enabled this layout. Note that, when scroll mode is enabled table-layout automatically switches to auto from fixed as a result table widths are likely to differ and resizable columns are not
+                supported. Read more about <a href="https://www.w3schools.com/cssref/pr_tab_table-layout.asp">table-layout</a> for more details.
+            </p>
 
-                <pre v-code><code><template v-pre>
+            <pre v-code><code><template v-pre>
 &lt;DataTable :value="products" responsiveLayout="scroll"&gt;
 
 &lt;/DataTable&gt;
 </template>
 </code></pre>
 
-                <h6>Stack Layout</h6>
-                <p>In stack layout, columns are displayed as stacked after a certain breakpoint. Default is '960px'.</p>
-                <pre v-code><code><template v-pre>
+            <h6>Stack Layout</h6>
+            <p>In stack layout, columns are displayed as stacked after a certain breakpoint. Default is '960px'.</p>
+            <pre v-code><code><template v-pre>
 &lt;DataTable :value="products" responsiveLayout="stack" breakpoint="640px"&gt;
 
 &lt;/DataTable&gt;
 </template>
 </code></pre>
 
-                <h5>Row and Cell Styling</h5>
-                <p>
-                    Certain rows or cells can easily be styled based on conditions. Cell styling is implemented with templating whereas row styling utilizes the <i>rowClass</i> property which takes the row data as a parameter and returns the style
-                    class as a string.
-                </p>
-                <pre v-code><code><template v-pre>
+            <h5>Row and Cell Styling</h5>
+            <p>
+                Certain rows or cells can easily be styled based on conditions. Cell styling is implemented with templating whereas row styling utilizes the <i>rowClass</i> property which takes the row data as a parameter and returns the style class
+                as a string.
+            </p>
+            <pre v-code><code><template v-pre>
 &lt;DataTable :value="cars" :rowClass="rowClass"&gt;
     &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
     &lt;Column field="year" header="Year" bodyStyle="padding: 0"&gt;
@@ -1835,7 +1834,7 @@ export default {
 </template>
 </code></pre>
 
-                <pre v-code.script><code>
+            <pre v-code.script><code>
 import CarService from '../../service/CarService';
 
 export default {
@@ -1861,7 +1860,7 @@ export default {
 
 </code></pre>
 
-                <pre v-code.css><code>
+            <pre v-code.css><code>
 .year-cell {
     padding: 0.429em 0.857rem;
 
@@ -1879,878 +1878,1062 @@ export default {
 
 </code></pre>
 
-                <h5>Properties</h5>
-                <p>Any valid attribute is passed to the root element implicitly, extended properties are as follows;</p>
-                <div class="doc-tablewrapper">
-                    <table class="doc-table">
-                        <thead>
-                            <tr>
-                                <th>Name</th>
-                                <th>Type</th>
-                                <th>Default</th>
-                                <th>Description</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr>
-                                <td>value</td>
-                                <td>array</td>
-                                <td>null</td>
-                                <td>An array of objects to display.</td>
-                            </tr>
-                            <tr>
-                                <td>dataKey</td>
-                                <td>string</td>
-                                <td>null</td>
-                                <td>Name of the field that uniquely identifies the a record in the data.</td>
-                            </tr>
-                            <tr>
-                                <td>rows</td>
-                                <td>number</td>
-                                <td>null</td>
-                                <td>Number of rows to display per page.</td>
-                            </tr>
-                            <tr>
-                                <td>first</td>
-                                <td>number</td>
-                                <td>0</td>
-                                <td>Index of the first row to be displayed.</td>
-                            </tr>
-                            <tr>
-                                <td>totalRecords</td>
-                                <td>number</td>
-                                <td>null</td>
-                                <td>Number of total records, defaults to length of value when not defined.</td>
-                            </tr>
-                            <tr>
-                                <td>paginator</td>
-                                <td>boolean</td>
-                                <td>false</td>
-                                <td>When specified as true, enables the pagination.</td>
-                            </tr>
-                            <tr>
-                                <td>paginatorPosition</td>
-                                <td>string</td>
-                                <td>bottom</td>
-                                <td>Position of the paginator, options are "top","bottom" or "both".</td>
-                            </tr>
-                            <tr>
-                                <td>alwaysShowPaginator</td>
-                                <td>boolean</td>
-                                <td>true</td>
-                                <td>Whether to show it even there is only one page.</td>
-                            </tr>
-                            <tr>
-                                <td>paginatorTemplate</td>
-                                <td>string</td>
-                                <td>
-                                    FirstPageLink PrevPageLink PageLinks <br />
-                                    NextPageLink LastPageLink RowsPerPageDropdown
-                                </td>
-                                <td>Template of the paginator. See the <nuxt-link to="/paginator">Paginator</nuxt-link> for all available options.</td>
-                            </tr>
-                            <tr>
-                                <td>pageLinkSize</td>
-                                <td>number</td>
-                                <td>5</td>
-                                <td>Number of page links to display.</td>
-                            </tr>
-                            <tr>
-                                <td>rowsPerPageOptions</td>
-                                <td>array</td>
-                                <td>null</td>
-                                <td>Array of integer values to display inside rows per page dropdown.</td>
-                            </tr>
-                            <tr>
-                                <td>currentPageReportTemplate</td>
-                                <td>string</td>
-                                <td>(&#123;currentPage&#125; of &#123;totalPages&#125;)</td>
-                                <td>Template of the current page report element.</td>
-                            </tr>
-                            <tr>
-                                <td>lazy</td>
-                                <td>boolean</td>
-                                <td>false</td>
-                                <td>Defines if data is loaded and interacted with in lazy manner.</td>
-                            </tr>
-                            <tr>
-                                <td>loading</td>
-                                <td>boolean</td>
-                                <td>false</td>
-                                <td>Displays a loader to indicate data load is in progress.</td>
-                            </tr>
-                            <tr>
-                                <td>loadingIcon</td>
-                                <td>string</td>
-                                <td>pi pi-spinner</td>
-                                <td>The icon to show while indicating data load is in progress.</td>
-                            </tr>
-                            <tr>
-                                <td>sortField</td>
-                                <td>string</td>
-                                <td>null</td>
-                                <td>Property name or a getter function of a row data used for sorting by default</td>
-                            </tr>
-                            <tr>
-                                <td>sortOrder</td>
-                                <td>number</td>
-                                <td>null</td>
-                                <td>Order to sort the data by default.</td>
-                            </tr>
-                            <tr>
-                                <td>defaultSortOrder</td>
-                                <td>number</td>
-                                <td>1</td>
-                                <td>Default sort order of an unsorted column.</td>
-                            </tr>
-                            <tr>
-                                <td>multiSortMeta</td>
-                                <td>array</td>
-                                <td>null</td>
-                                <td>An array of SortMeta objects to sort the data by default in multiple sort mode.</td>
-                            </tr>
-                            <tr>
-                                <td>sortMode</td>
-                                <td>string</td>
-                                <td>single</td>
-                                <td>Defines whether sorting works on single column or on multiple columns.</td>
-                            </tr>
-                            <tr>
-                                <td>removableSort</td>
-                                <td>boolean</td>
-                                <td>false</td>
-                                <td>When enabled, columns can have an un-sorted state.</td>
-                            </tr>
-                            <tr>
-                                <td>filters</td>
-                                <td>object</td>
-                                <td>null</td>
-                                <td>Filters object with key-value pairs to define the filters.</td>
-                            </tr>
-                            <tr>
-                                <td>filterDisplay</td>
-                                <td>string</td>
-                                <td>null</td>
-                                <td>Layout of the filter elements, valid values are "row" and "menu".</td>
-                            </tr>
-                            <tr>
-                                <td>filterLocale</td>
-                                <td>string</td>
-                                <td>undefined</td>
-                                <td>Locale to use in filtering. The default locale is the host environment's current locale.</td>
-                            </tr>
-                            <tr>
-                                <td>selection</td>
-                                <td>any</td>
-                                <td>null</td>
-                                <td>Selected row in single mode or an array of values in multiple mode.</td>
-                            </tr>
-                            <tr>
-                                <td>selectionMode</td>
-                                <td>string</td>
-                                <td>null</td>
-                                <td>Specifies the selection mode, valid values are "single" and "multiple".</td>
-                            </tr>
-                            <tr>
-                                <td>compareSelectionBy</td>
-                                <td>string</td>
-                                <td>deepEquals</td>
-                                <td>
-                                    Algorithm to define if a row is selected, valid values are "equals" that compares by reference and <br />
-                                    "deepEquals" that compares all fields.
-                                </td>
-                            </tr>
-                            <tr>
-                                <td>metaKeySelection</td>
-                                <td>boolean</td>
-                                <td>true</td>
-                                <td>
-                                    Defines whether metaKey is requred or not for the selection. <br />
-                                    When true metaKey needs to be pressed to select or unselect an item and <br />
-                                    when set to false selection of each item can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically.
-                                </td>
-                            </tr>
-                            <tr>
-                                <td>contextMenu</td>
-                                <td>boolean</td>
-                                <td>false</td>
-                                <td>Enables context menu integration.</td>
-                            </tr>
-                            <tr>
-                                <td>contextMenuSelection</td>
-                                <td>object</td>
-                                <td>null</td>
-                                <td>Selected row instance with the ContextMenu.</td>
-                            </tr>
-                            <tr>
-                                <td>rowHover</td>
-                                <td>boolean</td>
-                                <td>false</td>
-                                <td>When enabled, background of the rows change on hover.</td>
-                            </tr>
-                            <tr>
-                                <td>csvSeparator</td>
-                                <td>string</td>
-                                <td>,</td>
-                                <td>Character to use as the csv separator.</td>
-                            </tr>
-                            <tr>
-                                <td>exportFilename</td>
-                                <td>string</td>
-                                <td>download</td>
-                                <td>Name of the exported file.</td>
-                            </tr>
-                            <tr>
-                                <td>exportFunction</td>
-                                <td>function</td>
-                                <td>download</td>
-                                <td>Custom function to export data.</td>
-                            </tr>
-                            <tr>
-                                <td>autoLayout</td>
-                                <td>boolean</td>
-                                <td>false</td>
-                                <td>Whether the cell widths scale according to their content or not. Does not apply to scrollable tables.</td>
-                            </tr>
-                            <tr>
-                                <td>resizableColumns</td>
-                                <td>boolean</td>
-                                <td>false</td>
-                                <td>When enabled, columns can be resized using drag and drop.</td>
-                            </tr>
-                            <tr>
-                                <td>columnResizeMode</td>
-                                <td>string</td>
-                                <td>fit</td>
-                                <td>
-                                    Defines whether the overall table width should change on column resize, <br />
-                                    valid values are "fit" and "expand".
-                                </td>
-                            </tr>
-                            <tr>
-                                <td>reorderableColumns</td>
-                                <td>boolean</td>
-                                <td>false</td>
-                                <td>When enabled, columns can be reordered using drag and drop.</td>
-                            </tr>
-                            <tr>
-                                <td>expandedRows</td>
-                                <td>array</td>
-                                <td>null</td>
-                                <td>A collection of row data display as expanded.</td>
-                            </tr>
-                            <tr>
-                                <td>expandedRowIcon</td>
-                                <td>string</td>
-                                <td>pi-chevron-down</td>
-                                <td>Icon of the row toggler to display the row as expanded.</td>
-                            </tr>
-                            <tr>
-                                <td>collapsedRowIcon</td>
-                                <td>string</td>
-                                <td>pi-chevron-right</td>
-                                <td>Icon of the row toggler to display the row as collapsed.</td>
-                            </tr>
-                            <tr>
-                                <td>rowGroupMode</td>
-                                <td>string</td>
-                                <td>null</td>
-                                <td>Defines the row group mode, valid options are "subheader" and "rowspan".</td>
-                            </tr>
-                            <tr>
-                                <td>groupRowsBy</td>
-                                <td>string|array</td>
-                                <td>null</td>
-                                <td>One or more field names to use in row grouping.</td>
-                            </tr>
-                            <tr>
-                                <td>expandableRowGroups</td>
-                                <td>boolean</td>
-                                <td>false</td>
-                                <td>Whether the row groups can be expandable.</td>
-                            </tr>
-                            <tr>
-                                <td>expandedRowGroups</td>
-                                <td>array</td>
-                                <td>null</td>
-                                <td>An array of group field values whose groups would be rendered as expanded.</td>
-                            </tr>
-                            <tr>
-                                <td>stateStorage</td>
-                                <td>string</td>
-                                <td>session</td>
-                                <td>Defines where a stateful table keeps its state, valid values are "session" for sessionStorage and "local" for localStorage.</td>
-                            </tr>
-                            <tr>
-                                <td>stateKey</td>
-                                <td>string</td>
-                                <td>null</td>
-                                <td>Unique identifier of a stateful table to use in state storage.</td>
-                            </tr>
-                            <tr>
-                                <td>editMode</td>
-                                <td>string</td>
-                                <td>null</td>
-                                <td>Defines the incell editing mode, valid options are "cell" and "row".</td>
-                            </tr>
-                            <tr>
-                                <td>editingRows</td>
-                                <td>array</td>
-                                <td>null</td>
-                                <td>A collection of rows to represent the current editing data in row edit mode.</td>
-                            </tr>
-                            <tr>
-                                <td>rowClass</td>
-                                <td>function</td>
-                                <td>null</td>
-                                <td>A function that takes the row data as a parameter and returns a string to apply a particular class for the row.</td>
-                            </tr>
-                            <tr>
-                                <td>rowStyle</td>
-                                <td>object</td>
-                                <td>null</td>
-                                <td>Inline style of the row element.</td>
-                            </tr>
-                            <tr>
-                                <td>scrollable</td>
-                                <td>boolean</td>
-                                <td>false</td>
-                                <td>When specified, enables horizontal and/or vertical scrolling.</td>
-                            </tr>
-                            <tr>
-                                <td>scrollDirection</td>
-                                <td>string</td>
-                                <td>vertical</td>
-                                <td>Orientation of the scrolling, options are "vertical", "horizontal" and "both".</td>
-                            </tr>
-                            <tr>
-                                <td>scrollHeight</td>
-                                <td>string</td>
-                                <td>null</td>
-                                <td>Height of the scroll viewport in fixed pixels or the "flex" keyword for a dynamic size.</td>
-                            </tr>
-                            <tr>
-                                <td>virtualScrollerOptions</td>
-                                <td>object</td>
-                                <td>null</td>
-                                <td>
-                                    Whether to use the virtualScroller feature. The properties of <nuxt-link to="/virtualscroller">VirtualScroller</nuxt-link> component can be used like an object in it. <br /><b>Note:</b> Currently only vertical
-                                    orientation mode is supported.
-                                </td>
-                            </tr>
-                            <tr>
-                                <td>frozenValue</td>
-                                <td>array</td>
-                                <td>null</td>
-                                <td>Items of the frozen part in scrollable DataTable.</td>
-                            </tr>
-                            <tr>
-                                <td>responsiveLayout</td>
-                                <td>string</td>
-                                <td>stack</td>
-                                <td>Defines the responsive mode, valid options are "stack" and "scroll".</td>
-                            </tr>
-                            <tr>
-                                <td>breakpoint</td>
-                                <td>string</td>
-                                <td>960px</td>
-                                <td>The breakpoint to define the maximum width boundary when using stack responsive layout.</td>
-                            </tr>
-                            <tr>
-                                <td>showGridlines</td>
-                                <td>boolean</td>
-                                <td>false</td>
-                                <td>Whether to show grid lines between cells.</td>
-                            </tr>
-                            <tr>
-                                <td>stripedRows</td>
-                                <td>boolean</td>
-                                <td>false</td>
-                                <td>Whether to displays rows with alternating colors.</td>
-                            </tr>
-                            <tr>
-                                <td>tableStyle</td>
-                                <td>object</td>
-                                <td>null</td>
-                                <td>Inline style of the table element.</td>
-                            </tr>
-                            <tr>
-                                <td>tableClass</td>
-                                <td>string</td>
-                                <td>null</td>
-                                <td>Style class of the table element.</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
+            <h5>Properties</h5>
+            <p>Any valid attribute is passed to the root element implicitly, extended properties are as follows;</p>
+            <div class="doc-tablewrapper">
+                <table class="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Type</th>
+                            <th>Default</th>
+                            <th>Description</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>value</td>
+                            <td>array</td>
+                            <td>null</td>
+                            <td>An array of objects to display.</td>
+                        </tr>
+                        <tr>
+                            <td>dataKey</td>
+                            <td>string</td>
+                            <td>null</td>
+                            <td>Name of the field that uniquely identifies the a record in the data.</td>
+                        </tr>
+                        <tr>
+                            <td>rows</td>
+                            <td>number</td>
+                            <td>null</td>
+                            <td>Number of rows to display per page.</td>
+                        </tr>
+                        <tr>
+                            <td>first</td>
+                            <td>number</td>
+                            <td>0</td>
+                            <td>Index of the first row to be displayed.</td>
+                        </tr>
+                        <tr>
+                            <td>totalRecords</td>
+                            <td>number</td>
+                            <td>null</td>
+                            <td>Number of total records, defaults to length of value when not defined.</td>
+                        </tr>
+                        <tr>
+                            <td>paginator</td>
+                            <td>boolean</td>
+                            <td>false</td>
+                            <td>When specified as true, enables the pagination.</td>
+                        </tr>
+                        <tr>
+                            <td>paginatorPosition</td>
+                            <td>string</td>
+                            <td>bottom</td>
+                            <td>Position of the paginator, options are "top","bottom" or "both".</td>
+                        </tr>
+                        <tr>
+                            <td>alwaysShowPaginator</td>
+                            <td>boolean</td>
+                            <td>true</td>
+                            <td>Whether to show it even there is only one page.</td>
+                        </tr>
+                        <tr>
+                            <td>paginatorTemplate</td>
+                            <td>string</td>
+                            <td>
+                                FirstPageLink PrevPageLink PageLinks <br />
+                                NextPageLink LastPageLink RowsPerPageDropdown
+                            </td>
+                            <td>Template of the paginator. See the <router-link to="/paginator">Paginator</router-link> for all available options.</td>
+                        </tr>
+                        <tr>
+                            <td>pageLinkSize</td>
+                            <td>number</td>
+                            <td>5</td>
+                            <td>Number of page links to display.</td>
+                        </tr>
+                        <tr>
+                            <td>rowsPerPageOptions</td>
+                            <td>array</td>
+                            <td>null</td>
+                            <td>Array of integer values to display inside rows per page dropdown.</td>
+                        </tr>
+                        <tr>
+                            <td>currentPageReportTemplate</td>
+                            <td>string</td>
+                            <td>(&#123;currentPage&#125; of &#123;totalPages&#125;)</td>
+                            <td>Template of the current page report element.</td>
+                        </tr>
+                        <tr>
+                            <td>lazy</td>
+                            <td>boolean</td>
+                            <td>false</td>
+                            <td>Defines if data is loaded and interacted with in lazy manner.</td>
+                        </tr>
+                        <tr>
+                            <td>loading</td>
+                            <td>boolean</td>
+                            <td>false</td>
+                            <td>Displays a loader to indicate data load is in progress.</td>
+                        </tr>
+                        <tr>
+                            <td>loadingIcon</td>
+                            <td>string</td>
+                            <td>pi pi-spinner</td>
+                            <td>The icon to show while indicating data load is in progress.</td>
+                        </tr>
+                        <tr>
+                            <td>sortField</td>
+                            <td>string</td>
+                            <td>null</td>
+                            <td>Property name or a getter function of a row data used for sorting by default</td>
+                        </tr>
+                        <tr>
+                            <td>sortOrder</td>
+                            <td>number</td>
+                            <td>null</td>
+                            <td>Order to sort the data by default.</td>
+                        </tr>
+                        <tr>
+                            <td>defaultSortOrder</td>
+                            <td>number</td>
+                            <td>1</td>
+                            <td>Default sort order of an unsorted column.</td>
+                        </tr>
+                        <tr>
+                            <td>multiSortMeta</td>
+                            <td>array</td>
+                            <td>null</td>
+                            <td>An array of SortMeta objects to sort the data by default in multiple sort mode.</td>
+                        </tr>
+                        <tr>
+                            <td>sortMode</td>
+                            <td>string</td>
+                            <td>single</td>
+                            <td>Defines whether sorting works on single column or on multiple columns.</td>
+                        </tr>
+                        <tr>
+                            <td>removableSort</td>
+                            <td>boolean</td>
+                            <td>false</td>
+                            <td>When enabled, columns can have an un-sorted state.</td>
+                        </tr>
+                        <tr>
+                            <td>filters</td>
+                            <td>object</td>
+                            <td>null</td>
+                            <td>Filters object with key-value pairs to define the filters.</td>
+                        </tr>
+                        <tr>
+                            <td>filterDisplay</td>
+                            <td>string</td>
+                            <td>null</td>
+                            <td>Layout of the filter elements, valid values are "row" and "menu".</td>
+                        </tr>
+                        <tr>
+                            <td>filterLocale</td>
+                            <td>string</td>
+                            <td>undefined</td>
+                            <td>Locale to use in filtering. The default locale is the host environment's current locale.</td>
+                        </tr>
+                        <tr>
+                            <td>selection</td>
+                            <td>any</td>
+                            <td>null</td>
+                            <td>Selected row in single mode or an array of values in multiple mode.</td>
+                        </tr>
+                        <tr>
+                            <td>selectionMode</td>
+                            <td>string</td>
+                            <td>null</td>
+                            <td>Specifies the selection mode, valid values are "single" and "multiple".</td>
+                        </tr>
+                        <tr>
+                            <td>compareSelectionBy</td>
+                            <td>string</td>
+                            <td>deepEquals</td>
+                            <td>
+                                Algorithm to define if a row is selected, valid values are "equals" that compares by reference and <br />
+                                "deepEquals" that compares all fields.
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>metaKeySelection</td>
+                            <td>boolean</td>
+                            <td>true</td>
+                            <td>
+                                Defines whether metaKey is requred or not for the selection. <br />
+                                When true metaKey needs to be pressed to select or unselect an item and <br />
+                                when set to false selection of each item can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically.
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>contextMenu</td>
+                            <td>boolean</td>
+                            <td>false</td>
+                            <td>Enables context menu integration.</td>
+                        </tr>
+                        <tr>
+                            <td>contextMenuSelection</td>
+                            <td>object</td>
+                            <td>null</td>
+                            <td>Selected row instance with the ContextMenu.</td>
+                        </tr>
+                        <tr>
+                            <td>rowHover</td>
+                            <td>boolean</td>
+                            <td>false</td>
+                            <td>When enabled, background of the rows change on hover.</td>
+                        </tr>
+                        <tr>
+                            <td>csvSeparator</td>
+                            <td>string</td>
+                            <td>,</td>
+                            <td>Character to use as the csv separator.</td>
+                        </tr>
+                        <tr>
+                            <td>exportFilename</td>
+                            <td>string</td>
+                            <td>download</td>
+                            <td>Name of the exported file.</td>
+                        </tr>
+                        <tr>
+                            <td>exportFunction</td>
+                            <td>function</td>
+                            <td>download</td>
+                            <td>Custom function to export data.</td>
+                        </tr>
+                        <tr>
+                            <td>autoLayout</td>
+                            <td>boolean</td>
+                            <td>false</td>
+                            <td>Whether the cell widths scale according to their content or not. Does not apply to scrollable tables.</td>
+                        </tr>
+                        <tr>
+                            <td>resizableColumns</td>
+                            <td>boolean</td>
+                            <td>false</td>
+                            <td>When enabled, columns can be resized using drag and drop.</td>
+                        </tr>
+                        <tr>
+                            <td>columnResizeMode</td>
+                            <td>string</td>
+                            <td>fit</td>
+                            <td>
+                                Defines whether the overall table width should change on column resize, <br />
+                                valid values are "fit" and "expand".
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>reorderableColumns</td>
+                            <td>boolean</td>
+                            <td>false</td>
+                            <td>When enabled, columns can be reordered using drag and drop.</td>
+                        </tr>
+                        <tr>
+                            <td>expandedRows</td>
+                            <td>array</td>
+                            <td>null</td>
+                            <td>A collection of row data display as expanded.</td>
+                        </tr>
+                        <tr>
+                            <td>expandedRowIcon</td>
+                            <td>string</td>
+                            <td>pi-chevron-down</td>
+                            <td>Icon of the row toggler to display the row as expanded.</td>
+                        </tr>
+                        <tr>
+                            <td>collapsedRowIcon</td>
+                            <td>string</td>
+                            <td>pi-chevron-right</td>
+                            <td>Icon of the row toggler to display the row as collapsed.</td>
+                        </tr>
+                        <tr>
+                            <td>rowGroupMode</td>
+                            <td>string</td>
+                            <td>null</td>
+                            <td>Defines the row group mode, valid options are "subheader" and "rowspan".</td>
+                        </tr>
+                        <tr>
+                            <td>groupRowsBy</td>
+                            <td>string|array</td>
+                            <td>null</td>
+                            <td>One or more field names to use in row grouping.</td>
+                        </tr>
+                        <tr>
+                            <td>expandableRowGroups</td>
+                            <td>boolean</td>
+                            <td>false</td>
+                            <td>Whether the row groups can be expandable.</td>
+                        </tr>
+                        <tr>
+                            <td>expandedRowGroups</td>
+                            <td>array</td>
+                            <td>null</td>
+                            <td>An array of group field values whose groups would be rendered as expanded.</td>
+                        </tr>
+                        <tr>
+                            <td>stateStorage</td>
+                            <td>string</td>
+                            <td>session</td>
+                            <td>Defines where a stateful table keeps its state, valid values are "session" for sessionStorage and "local" for localStorage.</td>
+                        </tr>
+                        <tr>
+                            <td>stateKey</td>
+                            <td>string</td>
+                            <td>null</td>
+                            <td>Unique identifier of a stateful table to use in state storage.</td>
+                        </tr>
+                        <tr>
+                            <td>editMode</td>
+                            <td>string</td>
+                            <td>null</td>
+                            <td>Defines the incell editing mode, valid options are "cell" and "row".</td>
+                        </tr>
+                        <tr>
+                            <td>editingRows</td>
+                            <td>array</td>
+                            <td>null</td>
+                            <td>A collection of rows to represent the current editing data in row edit mode.</td>
+                        </tr>
+                        <tr>
+                            <td>rowClass</td>
+                            <td>function</td>
+                            <td>null</td>
+                            <td>A function that takes the row data as a parameter and returns a string to apply a particular class for the row.</td>
+                        </tr>
+                        <tr>
+                            <td>rowStyle</td>
+                            <td>object</td>
+                            <td>null</td>
+                            <td>Inline style of the row element.</td>
+                        </tr>
+                        <tr>
+                            <td>scrollable</td>
+                            <td>boolean</td>
+                            <td>false</td>
+                            <td>When specified, enables horizontal and/or vertical scrolling.</td>
+                        </tr>
+                        <tr>
+                            <td>scrollDirection</td>
+                            <td>string</td>
+                            <td>vertical</td>
+                            <td>Orientation of the scrolling, options are "vertical", "horizontal" and "both".</td>
+                        </tr>
+                        <tr>
+                            <td>scrollHeight</td>
+                            <td>string</td>
+                            <td>null</td>
+                            <td>Height of the scroll viewport in fixed pixels or the "flex" keyword for a dynamic size.</td>
+                        </tr>
+                        <tr>
+                            <td>virtualScrollerOptions</td>
+                            <td>object</td>
+                            <td>null</td>
+                            <td>
+                                Whether to use the virtualScroller feature. The properties of <router-link to="/virtualscroller">VirtualScroller</router-link> component can be used like an object in it. <br /><b>Note:</b> Currently only vertical
+                                orientation mode is supported.
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>frozenValue</td>
+                            <td>array</td>
+                            <td>null</td>
+                            <td>Items of the frozen part in scrollable DataTable.</td>
+                        </tr>
+                        <tr>
+                            <td>responsiveLayout</td>
+                            <td>string</td>
+                            <td>stack</td>
+                            <td>Defines the responsive mode, valid options are "stack" and "scroll".</td>
+                        </tr>
+                        <tr>
+                            <td>breakpoint</td>
+                            <td>string</td>
+                            <td>960px</td>
+                            <td>The breakpoint to define the maximum width boundary when using stack responsive layout.</td>
+                        </tr>
+                        <tr>
+                            <td>showGridlines</td>
+                            <td>boolean</td>
+                            <td>false</td>
+                            <td>Whether to show grid lines between cells.</td>
+                        </tr>
+                        <tr>
+                            <td>stripedRows</td>
+                            <td>boolean</td>
+                            <td>false</td>
+                            <td>Whether to displays rows with alternating colors.</td>
+                        </tr>
+                        <tr>
+                            <td>tableStyle</td>
+                            <td>object</td>
+                            <td>null</td>
+                            <td>Inline style of the table element.</td>
+                        </tr>
+                        <tr>
+                            <td>tableClass</td>
+                            <td>string</td>
+                            <td>null</td>
+                            <td>Style class of the table element.</td>
+                        </tr>
+                        <tr>
+                            <td>tableProps</td>
+                            <td>object</td>
+                            <td>null</td>
+                            <td>Uses to pass all properties of the TableHTMLAttributes to table element inside the component.</td>
+                        </tr>
+                        <tr>
+                            <td>filterInputProps</td>
+                            <td>object</td>
+                            <td>null</td>
+                            <td>Uses to pass all properties of the HTMLInputElement to the focusable filter input element inside the component.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
 
-                <h5>Events</h5>
-                <div class="doc-tablewrapper">
-                    <table class="doc-table">
-                        <thead>
-                            <tr>
-                                <th>Name</th>
-                                <th>Parameters</th>
-                                <th>Description</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr>
-                                <td>page</td>
-                                <td>
-                                    event.originalEvent: Browser event <br />
-                                    event.page: New page number <br />
-                                    event.pageCount: Total page count <br />
-                                    event.first: Index of first record <br />
-                                    event.rows: Number of rows to display in new page <br />
-                                    event.sortField: Field to sort against <br />
-                                    event.sortOrder: Sort order as integer <br />
-                                    event.multiSortMeta: MultiSort metadata <br />
-                                    event.filters: Collection of active filters <br />
-                                    event.filterMatchModes: Match modes per field
-                                </td>
-                                <td>Callback to invoke on pagination. Sort and Filter information is also available for lazy loading implementation.</td>
-                            </tr>
-                            <tr>
-                                <td>sort</td>
-                                <td>
-                                    event.originalEvent: Browser event <br />
-                                    event.first: Index of first record <br />
-                                    event.rows: Number of rows to display in new page <br />
-                                    event.sortField: Field to sort against <br />
-                                    event.sortOrder: Sort order as integer <br />
-                                    event.multiSortMeta: MultiSort metadata <br />
-                                    event.filters: Collection of active filters <br />
-                                    event.filterMatchModes: Match modes per field
-                                </td>
-                                <td>Callback to invoke on sort. Page and Filter information is also available for lazy loading implementation.</td>
-                            </tr>
-                            <tr>
-                                <td>filter</td>
-                                <td>
-                                    event.originalEvent: Browser event <br />
-                                    event.first: Index of first record <br />
-                                    event.rows: Number of rows to display in new page <br />
-                                    event.sortField: Field to sort against <br />
-                                    event.sortOrder: Sort order as integer <br />
-                                    event.multiSortMeta: MultiSort metadata <br />
-                                    event.filters: Collection of active filters <br />
-                                    event.filteredValue: Filtered collection (non-lazy only)<br />
-                                </td>
-                                <td>Event to emit after filtering, not triggered in lazy mode.</td>
-                            </tr>
-                            <tr>
-                                <td>value-change</td>
-                                <td>value: Value displayed by the table</td>
-                                <td>Callback to invoke after filtering, sorting, pagination and cell editing to pass the rendered value.</td>
-                            </tr>
-                            <tr>
-                                <td>row-click</td>
-                                <td>
-                                    event.originalEvent: Browser event. <br />
-                                    event.data: Selected row data. <br />
-                                    event.index: Row index.
-                                </td>
-                                <td>Callback to invoke when a row is clicked.</td>
-                            </tr>
-                            <tr>
-                                <td>row-dblclick</td>
-                                <td>
-                                    event.originalEvent: Browser event. <br />
-                                    event.data: Selected row data. <br />
-                                    event.index: Row index.
-                                </td>
-                                <td>Callback to invoke when a row is double clicked.</td>
-                            </tr>
-                            <tr>
-                                <td>row-contextmenu</td>
-                                <td>
-                                    event.originalEvent: Browser event. <br />
-                                    event.data: Selected row data. <br />
-                                    event.index: Row index.
-                                </td>
-                                <td>Callback to invoke when a row is selected with a ContextMenu.</td>
-                            </tr>
-                            <tr>
-                                <td>row-select</td>
-                                <td>
-                                    event.originalEvent: Browser event. <br />
-                                    event.data: Selected row data. <br />
-                                    event.index: Row index. <br />
-                                    event.type: Type of the selection, valid values are "row", "radio" or "checkbox".
-                                </td>
-                                <td>Callback to invoke when a row is selected.</td>
-                            </tr>
-                            <tr>
-                                <td>row-unselect</td>
-                                <td>
-                                    event.originalEvent: Browser event. <br />
-                                    event.data: Unselected row data. <br />
-                                    event.index: Row index. <br />
-                                    event.type: Type of the selection, valid values are "row", "radio" or "checkbox".
-                                </td>
-                                <td>Callback to invoke when a row is unselected.</td>
-                            </tr>
-                            <tr>
-                                <td>row-select-all</td>
-                                <td>
-                                    event.originalEvent: Browser event. <br />
-                                    event.data: Selected dataset
-                                </td>
-                                <td>Fired when header checkbox is checked.</td>
-                            </tr>
-                            <tr>
-                                <td>row-unselect-all</td>
-                                <td>event.originalEvent: Browser event.</td>
-                                <td>Fired when header checkbox is unchecked.</td>
-                            </tr>
-                            <tr>
-                                <td>column-resize-end</td>
-                                <td>
-                                    event.element: DOM element of the resized column.<br />
-                                    event.delta: Change in column width
-                                </td>
-                                <td>Callback to invoke when a column is resized.</td>
-                            </tr>
-                            <tr>
-                                <td>column-reorder</td>
-                                <td>
-                                    event.originalEvent: Browser event<br />
-                                    event.dragIndex: Index of the dragged column<br />
-                                    event.dropIndex: Index of the dropped column
-                                </td>
-                                <td>Callback to invoke when a column is reordered.</td>
-                            </tr>
-                            <tr>
-                                <td>row-reorder</td>
-                                <td>
-                                    event.originalEvent: Browser event<br />
-                                    event.dragIndex: Index of the dragged row<br />
-                                    event.dropIndex: Index of the dropped row<br />
-                                    value: Reordered value
-                                </td>
-                                <td>Callback to invoke when a row is reordered.</td>
-                            </tr>
-                            <tr>
-                                <td>row-expand</td>
-                                <td>
-                                    event.originalEvent: Browser event<br />
-                                    event.data: Expanded row data.
-                                </td>
-                                <td>Callback to invoke when a row is expanded.</td>
-                            </tr>
-                            <tr>
-                                <td>row-collapse</td>
-                                <td>
-                                    event.originalEvent: Browser event<br />
-                                    event.data: Collapsed row data.
-                                </td>
-                                <td>Callback to invoke when a row is collapsed.</td>
-                            </tr>
-                            <tr>
-                                <td>rowgroup-expand</td>
-                                <td>
-                                    event.originalEvent: Browser event<br />
-                                    event.data: Expanded group value.
-                                </td>
-                                <td>Callback to invoke when a row group is expanded.</td>
-                            </tr>
-                            <tr>
-                                <td>rowgroup-collapse</td>
-                                <td>
-                                    event.originalEvent: Browser event<br />
-                                    event.data: Collapsed group value.
-                                </td>
-                                <td>Callback to invoke when a row group is collapsed.</td>
-                            </tr>
-                            <tr>
-                                <td>cell-edit-init</td>
-                                <td>
-                                    event.originalEvent: Browser event<br />
-                                    event.data: Row data to edit. <br />
-                                    event.field: Field name of the row data. <br />
-                                    event.index: Index of the row data to edit. <br />
-                                </td>
-                                <td>Callback to invoke when cell edit is initiated.</td>
-                            </tr>
-                            <tr>
-                                <td>cell-edit-complete</td>
-                                <td>
-                                    event.originalEvent: Browser event<br />
-                                    event.data: Row data to edit. <br />
-                                    event.newData: New row data after editing. <br />
-                                    event.value: Field value of row data to edit. <br />
-                                    event.newValue: Field value of new row data after editing. <br />
-                                    event.field: Field name of the row data. <br />
-                                    event.index: Index of the row data to edit. <br />
-                                    event.type: Type of completion such as "enter", "outside" or "tab". <br />
-                                </td>
-                                <td>Callback to invoke when cell edit is completed.</td>
-                            </tr>
-                            <tr>
-                                <td>cell-edit-cancel</td>
-                                <td>
-                                    event.originalEvent: Browser event<br />
-                                    event.data: Row data to edit. <br />
-                                    event.field: Field name of the row data. <br />
-                                    event.index: Index of the row data to edit. <br />
-                                </td>
-                                <td>Callback to invoke when cell edit is cancelled with escape key.</td>
-                            </tr>
-                            <tr>
-                                <td>row-edit-init</td>
-                                <td>
-                                    event.originalEvent: Browser event<br />
-                                    event.data: Row data to edit. <br />
-                                    event.newData: New row data after editing. <br />
-                                    event.field: Field name of the row data. <br />
-                                    event.index: Index of the row data to edit. <br />
-                                </td>
-                                <td>Callback to invoke when row edit is initiated.</td>
-                            </tr>
-                            <tr>
-                                <td>row-edit-save</td>
-                                <td>
-                                    event.originalEvent: Browser event<br />
-                                    event.data: Row data to edit. <br />
-                                    event.newData: New row data after editing. <br />
-                                    event.field: Field name of the row data. <br />
-                                    event.index: Index of the row data to edit. <br />
-                                </td>
-                                <td>Callback to invoke when row edit is saved.</td>
-                            </tr>
-                            <tr>
-                                <td>row-edit-cancel</td>
-                                <td>
-                                    event.originalEvent: Browser event<br />
-                                    event.data: Row data to edit. <br />
-                                    event.newData: New row data after editing. <br />
-                                    event.field: Field name of the row data. <br />
-                                    event.index: Index of the row data to edit. <br />
-                                </td>
-                                <td>Callback to invoke when row edit is cancelled.</td>
-                            </tr>
-                            <tr>
-                                <td>state-save</td>
-                                <td>
-                                    event.first: Index of first record <br />
-                                    event.rows: Number of rows to display in new page <br />
-                                    event.sortField: Field to sort against <br />
-                                    event.sortOrder: Sort order as integer <br />
-                                    event.multiSortMeta: MultiSort metadata <br />
-                                    event.filters: Collection of active filters <br />
-                                    event.columWidths: Comma separated list of column widths <br />
-                                    event.columnOrder: Order of the columns <br />
-                                    event.expandedRows: Instances of rows in expanded state <br />
-                                    event.expandedRowKeys: Keys of rows in expanded state <br />
-                                    event.expandedRowGroups: Instances of row groups in expanded state <br />
-                                    event.selection: Selected rows <br />
-                                    event.selectionKeys: Keys of selected rows <br />
-                                </td>
-                                <td>Invoked when a stateful table saves the state.</td>
-                            </tr>
-                            <tr>
-                                <td>state-restore</td>
-                                <td>
-                                    event.first: Index of first record <br />
-                                    event.rows: Number of rows to display in new page <br />
-                                    event.sortField: Field to sort against <br />
-                                    event.sortOrder: Sort order as integer <br />
-                                    event.multiSortMeta: MultiSort metadata <br />
-                                    event.filters: Collection of active filters <br />
-                                    event.columWidths: Comma separated list of column widths <br />
-                                    event.columnOrder: Order of the columns <br />
-                                    event.expandedRows: Instances of rows in expanded state <br />
-                                    event.expandedRowKeys: Keys of rows in expanded state <br />
-                                    event.expandedRowGroups: Instances of row groups in expanded state <br />
-                                    event.selection: Selected rows <br />
-                                    event.selectionKeys: Keys of selected rows <br />
-                                </td>
-                                <td>Invoked when a stateful table restores the state.</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
+            <h5>Events</h5>
+            <div class="doc-tablewrapper">
+                <table class="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Parameters</th>
+                            <th>Description</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>page</td>
+                            <td>
+                                event.originalEvent: Browser event <br />
+                                event.page: New page number <br />
+                                event.pageCount: Total page count <br />
+                                event.first: Index of first record <br />
+                                event.rows: Number of rows to display in new page <br />
+                                event.sortField: Field to sort against <br />
+                                event.sortOrder: Sort order as integer <br />
+                                event.multiSortMeta: MultiSort metadata <br />
+                                event.filters: Collection of active filters <br />
+                                event.filterMatchModes: Match modes per field
+                            </td>
+                            <td>Callback to invoke on pagination. Sort and Filter information is also available for lazy loading implementation.</td>
+                        </tr>
+                        <tr>
+                            <td>sort</td>
+                            <td>
+                                event.originalEvent: Browser event <br />
+                                event.first: Index of first record <br />
+                                event.rows: Number of rows to display in new page <br />
+                                event.sortField: Field to sort against <br />
+                                event.sortOrder: Sort order as integer <br />
+                                event.multiSortMeta: MultiSort metadata <br />
+                                event.filters: Collection of active filters <br />
+                                event.filterMatchModes: Match modes per field
+                            </td>
+                            <td>Callback to invoke on sort. Page and Filter information is also available for lazy loading implementation.</td>
+                        </tr>
+                        <tr>
+                            <td>filter</td>
+                            <td>
+                                event.originalEvent: Browser event <br />
+                                event.first: Index of first record <br />
+                                event.rows: Number of rows to display in new page <br />
+                                event.sortField: Field to sort against <br />
+                                event.sortOrder: Sort order as integer <br />
+                                event.multiSortMeta: MultiSort metadata <br />
+                                event.filters: Collection of active filters <br />
+                                event.filteredValue: Filtered collection (non-lazy only)<br />
+                            </td>
+                            <td>Event to emit after filtering, not triggered in lazy mode.</td>
+                        </tr>
+                        <tr>
+                            <td>value-change</td>
+                            <td>value: Value displayed by the table</td>
+                            <td>Callback to invoke after filtering, sorting, pagination and cell editing to pass the rendered value.</td>
+                        </tr>
+                        <tr>
+                            <td>row-click</td>
+                            <td>
+                                event.originalEvent: Browser event. <br />
+                                event.data: Selected row data. <br />
+                                event.index: Row index.
+                            </td>
+                            <td>Callback to invoke when a row is clicked.</td>
+                        </tr>
+                        <tr>
+                            <td>row-dblclick</td>
+                            <td>
+                                event.originalEvent: Browser event. <br />
+                                event.data: Selected row data. <br />
+                                event.index: Row index.
+                            </td>
+                            <td>Callback to invoke when a row is double clicked.</td>
+                        </tr>
+                        <tr>
+                            <td>row-contextmenu</td>
+                            <td>
+                                event.originalEvent: Browser event. <br />
+                                event.data: Selected row data. <br />
+                                event.index: Row index.
+                            </td>
+                            <td>Callback to invoke when a row is selected with a ContextMenu.</td>
+                        </tr>
+                        <tr>
+                            <td>row-select</td>
+                            <td>
+                                event.originalEvent: Browser event. <br />
+                                event.data: Selected row data. <br />
+                                event.index: Row index. <br />
+                                event.type: Type of the selection, valid values are "row", "radio" or "checkbox".
+                            </td>
+                            <td>Callback to invoke when a row is selected.</td>
+                        </tr>
+                        <tr>
+                            <td>row-unselect</td>
+                            <td>
+                                event.originalEvent: Browser event. <br />
+                                event.data: Unselected row data. <br />
+                                event.index: Row index. <br />
+                                event.type: Type of the selection, valid values are "row", "radio" or "checkbox".
+                            </td>
+                            <td>Callback to invoke when a row is unselected.</td>
+                        </tr>
+                        <tr>
+                            <td>row-select-all</td>
+                            <td>
+                                event.originalEvent: Browser event. <br />
+                                event.data: Selected dataset
+                            </td>
+                            <td>Fired when header checkbox is checked.</td>
+                        </tr>
+                        <tr>
+                            <td>row-unselect-all</td>
+                            <td>event.originalEvent: Browser event.</td>
+                            <td>Fired when header checkbox is unchecked.</td>
+                        </tr>
+                        <tr>
+                            <td>column-resize-end</td>
+                            <td>
+                                event.element: DOM element of the resized column.<br />
+                                event.delta: Change in column width
+                            </td>
+                            <td>Callback to invoke when a column is resized.</td>
+                        </tr>
+                        <tr>
+                            <td>column-reorder</td>
+                            <td>
+                                event.originalEvent: Browser event<br />
+                                event.dragIndex: Index of the dragged column<br />
+                                event.dropIndex: Index of the dropped column
+                            </td>
+                            <td>Callback to invoke when a column is reordered.</td>
+                        </tr>
+                        <tr>
+                            <td>row-reorder</td>
+                            <td>
+                                event.originalEvent: Browser event<br />
+                                event.dragIndex: Index of the dragged row<br />
+                                event.dropIndex: Index of the dropped row<br />
+                                value: Reordered value
+                            </td>
+                            <td>Callback to invoke when a row is reordered.</td>
+                        </tr>
+                        <tr>
+                            <td>row-expand</td>
+                            <td>
+                                event.originalEvent: Browser event<br />
+                                event.data: Expanded row data.
+                            </td>
+                            <td>Callback to invoke when a row is expanded.</td>
+                        </tr>
+                        <tr>
+                            <td>row-collapse</td>
+                            <td>
+                                event.originalEvent: Browser event<br />
+                                event.data: Collapsed row data.
+                            </td>
+                            <td>Callback to invoke when a row is collapsed.</td>
+                        </tr>
+                        <tr>
+                            <td>rowgroup-expand</td>
+                            <td>
+                                event.originalEvent: Browser event<br />
+                                event.data: Expanded group value.
+                            </td>
+                            <td>Callback to invoke when a row group is expanded.</td>
+                        </tr>
+                        <tr>
+                            <td>rowgroup-collapse</td>
+                            <td>
+                                event.originalEvent: Browser event<br />
+                                event.data: Collapsed group value.
+                            </td>
+                            <td>Callback to invoke when a row group is collapsed.</td>
+                        </tr>
+                        <tr>
+                            <td>cell-edit-init</td>
+                            <td>
+                                event.originalEvent: Browser event<br />
+                                event.data: Row data to edit. <br />
+                                event.field: Field name of the row data. <br />
+                                event.index: Index of the row data to edit. <br />
+                            </td>
+                            <td>Callback to invoke when cell edit is initiated.</td>
+                        </tr>
+                        <tr>
+                            <td>cell-edit-complete</td>
+                            <td>
+                                event.originalEvent: Browser event<br />
+                                event.data: Row data to edit. <br />
+                                event.newData: New row data after editing. <br />
+                                event.value: Field value of row data to edit. <br />
+                                event.newValue: Field value of new row data after editing. <br />
+                                event.field: Field name of the row data. <br />
+                                event.index: Index of the row data to edit. <br />
+                                event.type: Type of completion such as "enter", "outside" or "tab". <br />
+                            </td>
+                            <td>Callback to invoke when cell edit is completed.</td>
+                        </tr>
+                        <tr>
+                            <td>cell-edit-cancel</td>
+                            <td>
+                                event.originalEvent: Browser event<br />
+                                event.data: Row data to edit. <br />
+                                event.field: Field name of the row data. <br />
+                                event.index: Index of the row data to edit. <br />
+                            </td>
+                            <td>Callback to invoke when cell edit is cancelled with escape key.</td>
+                        </tr>
+                        <tr>
+                            <td>row-edit-init</td>
+                            <td>
+                                event.originalEvent: Browser event<br />
+                                event.data: Row data to edit. <br />
+                                event.newData: New row data after editing. <br />
+                                event.field: Field name of the row data. <br />
+                                event.index: Index of the row data to edit. <br />
+                            </td>
+                            <td>Callback to invoke when row edit is initiated.</td>
+                        </tr>
+                        <tr>
+                            <td>row-edit-save</td>
+                            <td>
+                                event.originalEvent: Browser event<br />
+                                event.data: Row data to edit. <br />
+                                event.newData: New row data after editing. <br />
+                                event.field: Field name of the row data. <br />
+                                event.index: Index of the row data to edit. <br />
+                            </td>
+                            <td>Callback to invoke when row edit is saved.</td>
+                        </tr>
+                        <tr>
+                            <td>row-edit-cancel</td>
+                            <td>
+                                event.originalEvent: Browser event<br />
+                                event.data: Row data to edit. <br />
+                                event.newData: New row data after editing. <br />
+                                event.field: Field name of the row data. <br />
+                                event.index: Index of the row data to edit. <br />
+                            </td>
+                            <td>Callback to invoke when row edit is cancelled.</td>
+                        </tr>
+                        <tr>
+                            <td>state-save</td>
+                            <td>
+                                event.first: Index of first record <br />
+                                event.rows: Number of rows to display in new page <br />
+                                event.sortField: Field to sort against <br />
+                                event.sortOrder: Sort order as integer <br />
+                                event.multiSortMeta: MultiSort metadata <br />
+                                event.filters: Collection of active filters <br />
+                                event.columWidths: Comma separated list of column widths <br />
+                                event.columnOrder: Order of the columns <br />
+                                event.expandedRows: Instances of rows in expanded state <br />
+                                event.expandedRowKeys: Keys of rows in expanded state <br />
+                                event.expandedRowGroups: Instances of row groups in expanded state <br />
+                                event.selection: Selected rows <br />
+                                event.selectionKeys: Keys of selected rows <br />
+                            </td>
+                            <td>Invoked when a stateful table saves the state.</td>
+                        </tr>
+                        <tr>
+                            <td>state-restore</td>
+                            <td>
+                                event.first: Index of first record <br />
+                                event.rows: Number of rows to display in new page <br />
+                                event.sortField: Field to sort against <br />
+                                event.sortOrder: Sort order as integer <br />
+                                event.multiSortMeta: MultiSort metadata <br />
+                                event.filters: Collection of active filters <br />
+                                event.columWidths: Comma separated list of column widths <br />
+                                event.columnOrder: Order of the columns <br />
+                                event.expandedRows: Instances of rows in expanded state <br />
+                                event.expandedRowKeys: Keys of rows in expanded state <br />
+                                event.expandedRowGroups: Instances of row groups in expanded state <br />
+                                event.selection: Selected rows <br />
+                                event.selectionKeys: Keys of selected rows <br />
+                            </td>
+                            <td>Invoked when a stateful table restores the state.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
 
-                <h5>Methods</h5>
-                <div class="doc-tablewrapper">
-                    <table class="doc-table">
-                        <thead>
-                            <tr>
-                                <th>Name</th>
-                                <th>Parameters</th>
-                                <th>Description</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr>
-                                <td>exportCSV</td>
-                                <td>-</td>
-                                <td>Exports the data to CSV format.</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
+            <h5>Methods</h5>
+            <div class="doc-tablewrapper">
+                <table class="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Parameters</th>
+                            <th>Description</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>exportCSV</td>
+                            <td>-</td>
+                            <td>Exports the data to CSV format.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
 
-                <h5>Slots</h5>
-                <div class="doc-tablewrapper">
-                    <table class="doc-table">
-                        <thead>
-                            <tr>
-                                <th>Name</th>
-                                <th>Parameters</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr>
-                                <td>header</td>
-                                <td>column: Column node</td>
-                            </tr>
-                            <tr>
-                                <td>paginatorstart</td>
-                                <td>-</td>
-                            </tr>
-                            <tr>
-                                <td>paginatorend</td>
-                                <td>-</td>
-                            </tr>
-                            <tr>
-                                <td>footer</td>
-                                <td>column: Column node</td>
-                            </tr>
-                            <tr>
-                                <td>groupheader</td>
-                                <td>
-                                    data: Row data <br />
-                                    index: Row index
-                                </td>
-                            </tr>
-                            <tr>
-                                <td>groupfooter</td>
-                                <td>
-                                    data: Row data <br />
-                                    index: Row index
-                                </td>
-                            </tr>
-                            <tr>
-                                <td>expansion</td>
-                                <td>
-                                    data: Row data <br />
-                                    index: Row index
-                                </td>
-                            </tr>
-                            <tr>
-                                <td>empty</td>
-                                <td>-</td>
-                            </tr>
-                            <tr>
-                                <td>loading</td>
-                                <td>-</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
+            <h5>Slots</h5>
+            <div class="doc-tablewrapper">
+                <table class="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Parameters</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>header</td>
+                            <td>column: Column node</td>
+                        </tr>
+                        <tr>
+                            <td>paginatorstart</td>
+                            <td>-</td>
+                        </tr>
+                        <tr>
+                            <td>paginatorend</td>
+                            <td>-</td>
+                        </tr>
+                        <tr>
+                            <td>footer</td>
+                            <td>column: Column node</td>
+                        </tr>
+                        <tr>
+                            <td>groupheader</td>
+                            <td>
+                                data: Row data <br />
+                                index: Row index
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>groupfooter</td>
+                            <td>
+                                data: Row data <br />
+                                index: Row index
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>expansion</td>
+                            <td>
+                                data: Row data <br />
+                                index: Row index
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>empty</td>
+                            <td>-</td>
+                        </tr>
+                        <tr>
+                            <td>loading</td>
+                            <td>-</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
 
-                <h5>Styling</h5>
-                <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
+            <h5>Styling</h5>
+            <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
 
-                <div class="doc-tablewrapper">
-                    <table class="doc-table">
-                        <thead>
-                            <tr>
-                                <th>Name</th>
-                                <th>Element</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr>
-                                <td>p-datatable</td>
-                                <td>Container element.</td>
-                            </tr>
-                            <tr>
-                                <td>p-datatable-scrollable</td>
-                                <td>Container element when table is scrollable.</td>
-                            </tr>
-                            <tr>
-                                <td>p-datatable-header</td>
-                                <td>Header section.</td>
-                            </tr>
-                            <tr>
-                                <td>p-datatable-footer</td>
-                                <td>Footer section.</td>
-                            </tr>
-                            <tr>
-                                <td>p-datatable-wrapper</td>
-                                <td>Wrapper of table element.</td>
-                            </tr>
-                            <tr>
-                                <td>p-datatable-table</td>
-                                <td>Table element.</td>
-                            </tr>
-                            <tr>
-                                <td>p-datatable-thead</td>
-                                <td>Table thead element.</td>
-                            </tr>
-                            <tr>
-                                <td>p-datatable-tbody</td>
-                                <td>Table tbody element.</td>
-                            </tr>
-                            <tr>
-                                <td>p-datatable-tfoot</td>
-                                <td>Table tfoot element.</td>
-                            </tr>
-                            <tr>
-                                <td>p-column-title</td>
-                                <td>Title of a column.</td>
-                            </tr>
-                            <tr>
-                                <td>p-sortable-column</td>
-                                <td>Sortable column header.</td>
-                            </tr>
-                            <tr>
-                                <td>p-frozen-column</td>
-                                <td>Frozen column header.</td>
-                            </tr>
-                            <tr>
-                                <td>p-rowgroup-header</td>
-                                <td>Header of a rowgroup.</td>
-                            </tr>
-                            <tr>
-                                <td>p-rowgroup-footer</td>
-                                <td>Footer of a rowgroup.</td>
-                            </tr>
-                            <tr>
-                                <td>p-datatable-row-expansion</td>
-                                <td>Expanded row content.</td>
-                            </tr>
-                            <tr>
-                                <td>p-row-toggler</td>
-                                <td>Toggle element for row expansion.</td>
-                            </tr>
-                            <tr>
-                                <td>p-datatable-emptymessage</td>
-                                <td>Cell containing the empty message.</td>
-                            </tr>
-                            <tr>
-                                <td>p-row-editor-init</td>
-                                <td>Pencil button of row editor.</td>
-                            </tr>
-                            <tr>
-                                <td>p-row-editor-init</td>
-                                <td>Save button of row editor.</td>
-                            </tr>
-                            <tr>
-                                <td>p-row-editor-init</td>
-                                <td>Cancel button of row editor.</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
+            <div class="doc-tablewrapper">
+                <table class="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-datatable</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-datatable-scrollable</td>
+                            <td>Container element when table is scrollable.</td>
+                        </tr>
+                        <tr>
+                            <td>p-datatable-header</td>
+                            <td>Header section.</td>
+                        </tr>
+                        <tr>
+                            <td>p-datatable-footer</td>
+                            <td>Footer section.</td>
+                        </tr>
+                        <tr>
+                            <td>p-datatable-wrapper</td>
+                            <td>Wrapper of table element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-datatable-table</td>
+                            <td>Table element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-datatable-thead</td>
+                            <td>Table thead element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-datatable-tbody</td>
+                            <td>Table tbody element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-datatable-tfoot</td>
+                            <td>Table tfoot element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-column-title</td>
+                            <td>Title of a column.</td>
+                        </tr>
+                        <tr>
+                            <td>p-sortable-column</td>
+                            <td>Sortable column header.</td>
+                        </tr>
+                        <tr>
+                            <td>p-frozen-column</td>
+                            <td>Frozen column header.</td>
+                        </tr>
+                        <tr>
+                            <td>p-rowgroup-header</td>
+                            <td>Header of a rowgroup.</td>
+                        </tr>
+                        <tr>
+                            <td>p-rowgroup-footer</td>
+                            <td>Footer of a rowgroup.</td>
+                        </tr>
+                        <tr>
+                            <td>p-datatable-row-expansion</td>
+                            <td>Expanded row content.</td>
+                        </tr>
+                        <tr>
+                            <td>p-row-toggler</td>
+                            <td>Toggle element for row expansion.</td>
+                        </tr>
+                        <tr>
+                            <td>p-datatable-emptymessage</td>
+                            <td>Cell containing the empty message.</td>
+                        </tr>
+                        <tr>
+                            <td>p-row-editor-init</td>
+                            <td>Pencil button of row editor.</td>
+                        </tr>
+                        <tr>
+                            <td>p-row-editor-init</td>
+                            <td>Save button of row editor.</td>
+                        </tr>
+                        <tr>
+                            <td>p-row-editor-init</td>
+                            <td>Cancel button of row editor.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
 
-                <h5>Dependencies</h5>
-                <p>None.</p>
-            </AppDoc>
-        </ClientOnly>
+            <h5>Accessibility</h5>
+            <h6>Screen Reader</h6>
+            <p>
+                DataTable uses a <i>table</i> element whose attributes can be extended with the <i>tableProps</i> option. This property allows passing aria roles and attributes like <i>aria-label</i> and <i>aria-describedby</i> to define the table
+                for readers. Default role of the table is <i>table</i>. Header, body and footer elements use <i>rowgroup</i>, rows use <i>row</i> role, header cells have <i>columnheader</i> and body cells use <i>cell</i> roles. Sortable headers
+                utilizer <i>aria-sort</i> attribute either set to "ascending" or "descending".
+            </p>
+
+            <p>
+                Built-in checkbox and radiobutton components for row selection use <i>checkbox</i> and <i>radiobutton</i>. The label to describe them is retrieved from the <i>aria.selectRow</i> and <i>aria.unselectRow</i> properties of the
+                <router-link to="/locale">locale</router-link> API. Similarly header checkbox uses <i>selectAll</i> and <i>unselectAll</i> keys. When a row is selected, <i>aria-selected</i> is set to true on a row.
+            </p>
+
+            <p>
+                The element to expand or collapse a row is a <i>button</i> with <i>aria-expanded</i> and <i>aria-controls</i> properties. Value to describe the buttons is derived from <i>aria.expandRow</i> and <i>aria.collapseRow</i> properties of
+                the <router-link to="/locale">locale</router-link> API.
+            </p>
+
+            <p>
+                The filter menu button use <i>aria.showFilterMenu</i> and <i>aria.hideFilterMenu</i> properties as <i>aria-label</i> in addition to the <i>aria-haspopup</i>, <i>aria-expanded</i> and <i>aria-controls</i> to define the relation between
+                the button and the overlay. Popop menu has <i>dialog</i> role with <i>aria-modal</i> as focus is kept within the overlay. The operator dropdown use <i>aria.filterOperator</i> and filter constraints dropdown use
+                <i>aria.filterConstraint</i> properties. Buttons to add rules on the other hand utilize <i>aria.addRule</i> and <i>aria.removeRule</i> properties. The footer buttons similarly use <i>aria.clear</i> and <i>aria.apply</i> properties.
+                <i>filterInputProps</i> of the Column component can be used to define aria labels for the built-in filter components, if a custom component is used with templating you also may define your own aria labels as well.
+            </p>
+
+            <p>
+                Editable cells use custom templating so you need to manage aria roles and attributes manually if required. The row editor controls are button elements with <i>aria.editRow</i>, <i>aria.cancelEdit</i> and <i>aria.saveEdit</i> used for
+                the <i>aria-label</i>.
+            </p>
+
+            <p>Paginator is a standalone component used inside the DataTable, refer to the <router-link to="/paginator">paginator</router-link> for more information about the accessibility features.</p>
+
+            <h6>Keyboard Support</h6>
+            <p>Any button element inside the DataTable used for cases like filter, row expansion, edit are tabbable and can be used with <i>space</i> and <i>enter</i> keys.</p>
+
+            <h6>Sortable Headers Keyboard Support</h6>
+            <div class="doc-tablewrapper">
+                <table class="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>tab</i>
+                            </td>
+                            <td>Moves through the headers.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>enter</i>
+                            </td>
+                            <td>Sorts the column.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>space</i>
+                            </td>
+                            <td>Sorts the column.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+
+            <h6>Filter Menu Keyboard Support</h6>
+            <div class="doc-tablewrapper">
+                <table class="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>tab</i>
+                            </td>
+                            <td>Moves through the elements inside the popup.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>escape</i>
+                            </td>
+                            <td>Hides the popup.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+
+            <h6>Selection Keyboard Support</h6>
+            <div class="doc-tablewrapper">
+                <table class="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>tab</i>
+                            </td>
+                            <td>Moves focus to the first selected row, if there is none then first row receives the focus.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>up arrow</i>
+                            </td>
+                            <td>Moves focus to the previous row.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>down arrow</i>
+                            </td>
+                            <td>Moves focus to the next row.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>enter</i>
+                            </td>
+                            <td>Toggles the selected state of the focused row depending on the metaKeySelection setting.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>space</i>
+                            </td>
+                            <td>Toggles the selected state of the focused row depending on the metaKeySelection setting.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>home</i>
+                            </td>
+                            <td>Moves focus to the first row.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>end</i>
+                            </td>
+                            <td>Moves focus to the last row.</td>
+                        </tr>
+                        <tr>
+                            <td><i>shift</i> + <i>down arrow</i></td>
+                            <td>Moves focus to the next row and toggles the selection state.</td>
+                        </tr>
+                        <tr>
+                            <td><i>shift</i> + <i>up arrow</i></td>
+                            <td>Moves focus to the previous row and toggles the selection state.</td>
+                        </tr>
+                        <tr>
+                            <td><i>shift</i> + <i>space</i></td>
+                            <td>Selects the rows between the most recently selected row and the focused row.</td>
+                        </tr>
+                        <tr>
+                            <td><i>control</i> + <i>shift</i> + <i>home</i></td>
+                            <td>Selects the focused rows and all the options up to the first one.</td>
+                        </tr>
+                        <tr>
+                            <td><i>control</i> + <i>shift</i> + <i>end</i></td>
+                            <td>Selects the focused rows and all the options down to the last one.</td>
+                        </tr>
+                        <tr>
+                            <td><i>control</i> + <i>a</i></td>
+                            <td>Selects all rows.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+
+            <h5>Dependencies</h5>
+            <p>None.</p>
+        </AppDoc>
     </div>
 </template>
 
@@ -2770,13 +2953,13 @@ export default {
             currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
             :globalFilterFields="['name','country.name','representative.name','status']" responsiveLayout="scroll">
             <template #header>
-                 <div class="flex justify-content-center align-items-center">
+                <div class="flex justify-content-center align-items-center">
                     <h5 class="m-0">Customers</h5>
                     <span class="p-input-icon-left">
                         <i class="pi pi-search" />
                         <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
                     </span>
-                 </div>
+                </div>
             </template>
             <template #empty>
                 No customers found.
@@ -2803,7 +2986,7 @@ export default {
                 </template>
             </Column>
             <Column header="Agent" sortable filterField="representative" sortField="representative.name" :showFilterMatchModes="false" :filterMenuStyle="{'width':'14rem'}" style="min-width: 14rem">
-                 <template #body="{data}">
+                <template #body="{data}">
                     <img :alt="data.representative.name" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="32" style="vertical-align: middle" />
                     <span class="image-text">{{data.representative.name}}</span>
                 </template>
@@ -2994,13 +3177,13 @@ export default {
             currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
             :globalFilterFields="['name','country.name','representative.name','status']" responsiveLayout="scroll">
             <template #header>
-                 <div class="flex justify-content-center align-items-center">
+                <div class="flex justify-content-center align-items-center">
                     <h5 class="m-0">Customers</h5>
                     <span class="p-input-icon-left">
                         <i class="pi pi-search" />
                         <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
                     </span>
-                 </div>
+                </div>
             </template>
             <template #empty>
                 No customers found.
@@ -3027,7 +3210,7 @@ export default {
                 </template>
             </Column>
             <Column header="Agent" sortable filterField="representative" sortField="representative.name" :showFilterMatchModes="false" :filterMenuStyle="{'width':'14rem'}" style="min-width: 14rem">
-                 <template #body="{data}">
+                <template #body="{data}">
                     <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="30" style="vertical-align: middle" />
                     <span class="image-text">{{data.representative.name}}</span>
                 </template>
diff --git a/pages/datatable/DynamicColumns.vue b/pages/datatable/DynamicColumns.vue
index bc074611d..ba4732179 100755
--- a/pages/datatable/DynamicColumns.vue
+++ b/pages/datatable/DynamicColumns.vue
@@ -11,14 +11,12 @@
         <div class="content-section implementation">
             <div class="card">
                 <DataTable :value="products" responsiveLayout="scroll">
-                    <Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field"></Column>
+                    <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header"></Column>
                 </DataTable>
             </div>
         </div>
 
-        <ClientOnly>
-            <AppDoc name="DataTableDynamicColumnsDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableDynamicColumnsDemo.vue" />
-        </ClientOnly>
+        <AppDoc name="DataTableDynamicColumnsDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableDynamicColumnsDemo.vue" />
     </div>
 </template>
 
diff --git a/pages/datatable/Edit.vue b/pages/datatable/Edit.vue
index 9d3e5f317..13b1c97f4 100755
--- a/pages/datatable/Edit.vue
+++ b/pages/datatable/Edit.vue
@@ -13,7 +13,7 @@
                 <h5>Cell Editing</h5>
                 <p>Validations, dynamic columns and reverting values with the escape key.</p>
                 <DataTable :value="products1" editMode="cell" @cell-edit-complete="onCellEditComplete" class="editable-cells-table" responsiveLayout="scroll">
-                    <Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field" style="width: 25%">
+                    <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" style="width: 25%">
                         <template #editor="{ data, field }">
                             <InputText v-model="data[field]" autofocus />
                         </template>
@@ -23,7 +23,7 @@
 
             <div class="card">
                 <h5>Row Editing</h5>
-                <DataTable :value="products2" editMode="row" dataKey="id" v-model:editingRows="editingRows" @row-edit-save="onRowEditSave" responsiveLayout="scroll">
+                <DataTable v-model:editingRows="editingRows" :value="products2" editMode="row" dataKey="id" @row-edit-save="onRowEditSave" responsiveLayout="scroll">
                     <Column field="code" header="Code" style="width: 20%">
                         <template #editor="{ data, field }">
                             <InputText v-model="data[field]" autofocus />
@@ -57,10 +57,10 @@
 
             <div class="card">
                 <h5>Cell Editing with Sorting and Filter</h5>
-                <DataTable :value="products3" editMode="cell" @cell-edit-complete="onCellEditComplete" class="editable-cells-table" filterDisplay="row" v-model:filters="filters" responsiveLayout="scroll">
-                    <Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field" style="width: 25%" sortable filter>
+                <DataTable v-model:filters="filters" :value="products3" editMode="cell" @cell-edit-complete="onCellEditComplete" class="editable-cells-table" filterDisplay="row" responsiveLayout="scroll">
+                    <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" style="width: 25%" sortable filter>
                         <template #filter="{ filterModel, filterCallback }">
-                            <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" class="p-column-filter" v-tooltip.top.focus="'Hit enter key to filter'" />
+                            <InputText v-model="filterModel.value" v-tooltip.top.focus="'Hit enter key to filter'" type="text" @keydown.enter="filterCallback()" class="p-column-filter" />
                         </template>
                         <template #editor="{ data, field }">
                             <InputText v-model="data[field]" autofocus />
@@ -70,15 +70,13 @@
             </div>
         </div>
 
-        <ClientOnly>
-            <AppDoc name="DataTableEditDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableEditDemo.vue" />
-        </ClientOnly>
+        <AppDoc name="DataTableEditDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableEditDemo.vue" />
     </div>
 </template>
 
 <script>
-import ProductService from '../../service/ProductService';
 import { FilterMatchMode } from 'primevue/api';
+import ProductService from '../../service/ProductService';
 
 export default {
     data() {
@@ -628,6 +626,11 @@ export default {
             { field: 'price', header: 'Price' }
         ];
     },
+    mounted() {
+        this.productService.getProductsSmall().then((data) => (this.products1 = data));
+        this.productService.getProductsSmall().then((data) => (this.products2 = data));
+        this.productService.getProductsSmall().then((data) => (this.products3 = data));
+    },
     methods: {
         onCellEditComplete(event) {
             let { data, newValue, field } = event;
@@ -647,12 +650,16 @@ export default {
         },
         isPositiveInteger(val) {
             let str = String(val);
+
             str = str.trim();
+
             if (!str) {
                 return false;
             }
+
             str = str.replace(/^0+/, '') || '0';
             var n = Math.floor(Number(str));
+
             return n !== Infinity && String(n) === str && n >= 0;
         },
         onRowEditSave(event) {
@@ -675,11 +682,6 @@ export default {
                     return 'NA';
             }
         }
-    },
-    mounted() {
-        this.productService.getProductsSmall().then((data) => (this.products1 = data));
-        this.productService.getProductsSmall().then((data) => (this.products2 = data));
-        this.productService.getProductsSmall().then((data) => (this.products3 = data));
     }
 };
 </script>
diff --git a/pages/datatable/Export.vue b/pages/datatable/Export.vue
index 7e84e9853..716165431 100755
--- a/pages/datatable/Export.vue
+++ b/pages/datatable/Export.vue
@@ -10,7 +10,7 @@
 
         <div class="content-section implementation">
             <div class="card">
-                <DataTable :value="products" ref="dt" responsiveLayout="scroll">
+                <DataTable ref="dt" :value="products" responsiveLayout="scroll">
                     <template #header>
                         <div style="text-align: left">
                             <Button icon="pi pi-external-link" label="Export" @click="exportCSV($event)" />
@@ -24,9 +24,7 @@
             </div>
         </div>
 
-        <ClientOnly>
-            <AppDoc name="DataTableExportDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableExportDemo.vue" />
-        </ClientOnly>
+        <AppDoc name="DataTableExportDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableExportDemo.vue" />
     </div>
 </template>
 
diff --git a/pages/datatable/Filter.vue b/pages/datatable/Filter.vue
index e04fbc97d..1a28381a2 100755
--- a/pages/datatable/Filter.vue
+++ b/pages/datatable/Filter.vue
@@ -13,13 +13,13 @@
                 <h5>Filter Menu</h5>
                 <p>Filters are displayed in an overlay.</p>
                 <DataTable
+                    v-model:filters="filters1"
                     :value="customers1"
                     :paginator="true"
                     class="p-datatable-customers"
                     showGridlines
                     :rows="10"
                     dataKey="id"
-                    v-model:filters="filters1"
                     filterDisplay="menu"
                     :loading="loading1"
                     responsiveLayout="scroll"
@@ -41,7 +41,7 @@
                             {{ data.name }}
                         </template>
                         <template #filter="{ filterModel }">
-                            <InputText type="text" v-model="filterModel.value" class="p-column-filter" placeholder="Search by name" />
+                            <InputText v-model="filterModel.value" type="text" class="p-column-filter" placeholder="Search by name" />
                         </template>
                     </Column>
                     <Column header="Country" filterField="country.name" style="min-width: 12rem">
@@ -50,7 +50,7 @@
                             <span class="image-text">{{ data.country.name }}</span>
                         </template>
                         <template #filter="{ filterModel }">
-                            <InputText type="text" v-model="filterModel.value" class="p-column-filter" placeholder="Search by country" />
+                            <InputText v-model="filterModel.value" type="text" class="p-column-filter" placeholder="Search by country" />
                         </template>
                         <template #filterclear="{ filterCallback }">
                             <Button type="button" icon="pi pi-times" @click="filterCallback()" class="p-button-secondary"></Button>
@@ -64,7 +64,7 @@
                     </Column>
                     <Column header="Agent" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem">
                         <template #body="{ data }">
-                            <img :alt="data.representative.name" :src="'/demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
+                            <img :alt="data.representative.name" :src="'demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
                             <span class="image-text">{{ data.representative.name }}</span>
                         </template>
                         <template #filter="{ filterModel }">
@@ -72,7 +72,7 @@
                             <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
                                 <template #option="slotProps">
                                     <div class="p-multiselect-representative-option">
-                                        <img :alt="slotProps.option.name" :src="'/demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
+                                        <img :alt="slotProps.option.name" :src="'demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
                                         <span class="image-text">{{ slotProps.option.name }}</span>
                                     </div>
                                 </template>
@@ -102,7 +102,7 @@
                         <template #filter="{ filterModel }">
                             <Dropdown v-model="filterModel.value" :options="statuses" placeholder="Any" class="p-column-filter" :showClear="true">
                                 <template #value="slotProps">
-                                    <span :class="'customer-badge status-' + slotProps.value" v-if="slotProps.value">{{ slotProps.value }}</span>
+                                    <span v-if="slotProps.value" :class="'customer-badge status-' + slotProps.value">{{ slotProps.value }}</span>
                                     <span v-else>{{ slotProps.placeholder }}</span>
                                 </template>
                                 <template #option="slotProps">
@@ -117,7 +117,7 @@
                         </template>
                         <template #filter="{ filterModel }">
                             <Slider v-model="filterModel.value" range class="m-3"></Slider>
-                            <div class="flex align-items-center justify-content-center px-2">
+                            <div class="flex align-items-center justify-content-between px-2">
                                 <span>{{ filterModel.value ? filterModel.value[0] : 0 }}</span>
                                 <span>{{ filterModel.value ? filterModel.value[1] : 100 }}</span>
                             </div>
@@ -138,12 +138,12 @@
                 <h5>Filter Row</h5>
                 <p>Filters are displayed inline within a separate row.</p>
                 <DataTable
+                    v-model:filters="filters2"
                     :value="customers2"
                     :paginator="true"
                     class="p-datatable-customers"
                     :rows="10"
                     dataKey="id"
-                    v-model:filters="filters2"
                     filterDisplay="row"
                     :loading="loading2"
                     responsiveLayout="scroll"
@@ -164,7 +164,7 @@
                             {{ data.name }}
                         </template>
                         <template #filter="{ filterModel, filterCallback }">
-                            <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" class="p-column-filter" :placeholder="`Search by name - ${filterModel.matchMode}`" v-tooltip.top.focus="'Hit enter key to filter'" />
+                            <InputText v-model="filterModel.value" v-tooltip.top.focus="'Hit enter key to filter'" type="text" @keydown.enter="filterCallback()" class="p-column-filter" :placeholder="`Search by name - ${filterModel.matchMode}`" />
                         </template>
                     </Column>
                     <Column header="Country" filterField="country.name" style="min-width: 12rem">
@@ -173,19 +173,19 @@
                             <span class="image-text">{{ data.country.name }}</span>
                         </template>
                         <template #filter="{ filterModel, filterCallback }">
-                            <InputText type="text" v-model="filterModel.value" @input="filterCallback()" class="p-column-filter" placeholder="Search by country" v-tooltip.top.focus="'Filter as you type'" />
+                            <InputText v-model="filterModel.value" v-tooltip.top.focus="'Filter as you type'" type="text" @input="filterCallback()" class="p-column-filter" placeholder="Search by country" />
                         </template>
                     </Column>
                     <Column header="Agent" filterField="representative" :showFilterMenu="false" style="min-width: 14rem">
                         <template #body="{ data }">
-                            <img :alt="data.representative.name" :src="'/demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
+                            <img :alt="data.representative.name" :src="'demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
                             <span class="image-text">{{ data.representative.name }}</span>
                         </template>
                         <template #filter="{ filterModel, filterCallback }">
                             <MultiSelect v-model="filterModel.value" @change="filterCallback()" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
                                 <template #option="slotProps">
                                     <div class="p-multiselect-representative-option">
-                                        <img :alt="slotProps.option.name" :src="'/demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
+                                        <img :alt="slotProps.option.name" :src="'demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
                                         <span class="image-text">{{ slotProps.option.name }}</span>
                                     </div>
                                 </template>
@@ -199,7 +199,7 @@
                         <template #filter="{ filterModel, filterCallback }">
                             <Dropdown v-model="filterModel.value" @change="filterCallback()" :options="statuses" placeholder="Any" class="p-column-filter" :showClear="true">
                                 <template #value="slotProps">
-                                    <span :class="'customer-badge status-' + slotProps.value" v-if="slotProps.value">{{ slotProps.value }}</span>
+                                    <span v-if="slotProps.value" :class="'customer-badge status-' + slotProps.value">{{ slotProps.value }}</span>
                                     <span v-else>{{ slotProps.placeholder }}</span>
                                 </template>
                                 <template #option="slotProps">
@@ -220,15 +220,13 @@
             </div>
         </div>
 
-        <ClientOnly>
-            <AppDoc name="DataTableFilterDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']" github="datatable/DataTableFilterDemo.vue" />
-        </ClientOnly>
+        <AppDoc name="DataTableFilterDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']" github="datatable/DataTableFilterDemo.vue" />
     </div>
 </template>
 
 <script>
-import CustomerService from '../../service/CustomerService';
 import { FilterMatchMode, FilterOperator } from 'primevue/api';
+import CustomerService from '../../service/CustomerService';
 
 export default {
     data() {
@@ -367,7 +365,7 @@ export default {
                     </template>
                     <template #filter={filterModel}>
                         <Slider v-model="filterModel.value" range class="m-3"></Slider>
-                        <div class="flex align-items-center justify-content-center px-2">
+                        <div class="flex align-items-center justify-content-between px-2">
                             <span>{{filterModel.value ? filterModel.value[0] : 0}}</span>
                             <span>{{filterModel.value ? filterModel.value[1] : 100}}</span>
                         </div>
@@ -708,7 +706,7 @@ export default {
                     </template>
                     <template #filter={filterModel}>
                         <Slider v-model="filterModel.value" range class="m-3"></Slider>
-                        <div class="flex align-items-center justify-content-center px-2">
+                        <div class="flex align-items-center justify-content-between px-2">
                             <span>{{filterModel.value ? filterModel.value[0] : 0}}</span>
                             <span>{{filterModel.value ? filterModel.value[1] : 100}}</span>
                         </div>
@@ -1063,7 +1061,7 @@ export default {
                         </template>
                         <template #filter={filterModel}>
                             <p-slider v-model="filterModel.value" range class="m-3"></p-slider>
-                            <div class="flex align-items-center justify-content-center px-2">
+                            <div class="flex align-items-center justify-content-between px-2">
                                 <span>{{filterModel.value ? filterModel.value[0] : 0}}</span>
                                 <span>{{filterModel.value ? filterModel.value[1] : 100}}</span>
                             </div>
diff --git a/pages/datatable/FlexScroll.vue b/pages/datatable/FlexScroll.vue
index beab1f52a..5eac91b79 100644
--- a/pages/datatable/FlexScroll.vue
+++ b/pages/datatable/FlexScroll.vue
@@ -17,9 +17,7 @@
             </div>
         </div>
 
-        <ClientOnly>
-            <AppDoc name="DataTableFlexScrollDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']" github="datatable/DataTableFlexScrollDemo.vue" />
-        </ClientOnly>
+        <AppDoc name="DataTableFlexScrollDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']" github="datatable/DataTableFlexScrollDemo.vue" />
     </div>
 </template>
 
diff --git a/pages/datatable/GridLines.vue b/pages/datatable/GridLines.vue
index 4bd930421..8a383809c 100644
--- a/pages/datatable/GridLines.vue
+++ b/pages/datatable/GridLines.vue
@@ -21,9 +21,7 @@
             </div>
         </div>
 
-        <ClientOnly>
-            <AppDoc name="DataTableGridLinesDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableGridLinesDemo.vue" />
-        </ClientOnly>
+        <AppDoc name="DataTableGridLinesDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableGridLinesDemo.vue" />
     </div>
 </template>
 
diff --git a/pages/datatable/Lazy.vue b/pages/datatable/Lazy.vue
index 12fb8466a..22e0158fe 100755
--- a/pages/datatable/Lazy.vue
+++ b/pages/datatable/Lazy.vue
@@ -16,12 +16,13 @@
         <div class="content-section implementation">
             <div class="card">
                 <DataTable
+                    ref="dt"
+                    v-model:filters="filters"
+                    v-model:selection="selectedCustomers"
                     :value="customers"
                     :lazy="true"
                     :paginator="true"
                     :rows="10"
-                    v-model:filters="filters"
-                    ref="dt"
                     dataKey="id"
                     :totalRecords="totalRecords"
                     :loading="loading"
@@ -31,40 +32,37 @@
                     filterDisplay="row"
                     :globalFilterFields="['name', 'country.name', 'company', 'representative.name']"
                     responsiveLayout="scroll"
-                    v-model:selection="selectedCustomers"
                     :selectAll="selectAll"
                     @select-all-change="onSelectAllChange"
                     @row-select="onRowSelect"
                     @row-unselect="onRowUnselect"
                 >
                     <Column selectionMode="multiple" headerStyle="width: 3em"></Column>
-                    <Column field="name" header="Name" filterMatchMode="startsWith" ref="name" :sortable="true">
+                    <Column ref="name" field="name" header="Name" filterMatchMode="startsWith" :sortable="true">
                         <template #filter="{ filterModel, filterCallback }">
-                            <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" class="p-column-filter" placeholder="Search by name" />
+                            <InputText v-model="filterModel.value" type="text" @keydown.enter="filterCallback()" class="p-column-filter" placeholder="Search by name" />
                         </template>
                     </Column>
-                    <Column field="country.name" header="Country" filterField="country.name" filterMatchMode="contains" ref="country.name" :sortable="true">
+                    <Column ref="country.name" field="country.name" header="Country" filterField="country.name" filterMatchMode="contains" :sortable="true">
                         <template #filter="{ filterModel, filterCallback }">
-                            <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" class="p-column-filter" placeholder="Search by country" />
+                            <InputText v-model="filterModel.value" type="text" @keydown.enter="filterCallback()" class="p-column-filter" placeholder="Search by country" />
                         </template>
                     </Column>
-                    <Column field="company" header="Company" filterMatchMode="contains" ref="company" :sortable="true">
+                    <Column ref="company" field="company" header="Company" filterMatchMode="contains" :sortable="true">
                         <template #filter="{ filterModel, filterCallback }">
-                            <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" class="p-column-filter" placeholder="Search by company" />
+                            <InputText v-model="filterModel.value" type="text" @keydown.enter="filterCallback()" class="p-column-filter" placeholder="Search by company" />
                         </template>
                     </Column>
-                    <Column field="representative.name" header="Representative" filterField="representative.name" ref="representative.name" :sortable="true">
+                    <Column ref="representative.name" field="representative.name" header="Representative" filterField="representative.name" :sortable="true">
                         <template #filter="{ filterModel, filterCallback }">
-                            <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" class="p-column-filter" placeholder="Search by representative" />
+                            <InputText v-model="filterModel.value" type="text" @keydown.enter="filterCallback()" class="p-column-filter" placeholder="Search by representative" />
                         </template>
                     </Column>
                 </DataTable>
             </div>
         </div>
 
-        <ClientOnly>
-            <AppDoc name="DataTableLazyDemo" :sources="sources" :service="['CustomerService']" github="datatable/DataTableLazyDemo.vue" />
-        </ClientOnly>
+        <AppDoc name="DataTableLazyDemo" :sources="sources" :service="['CustomerService']" github="datatable/DataTableLazyDemo.vue" />
     </div>
 </template>
 
diff --git a/pages/datatable/Paginator.vue b/pages/datatable/Paginator.vue
index 0bcffda3e..f80a2b4b4 100755
--- a/pages/datatable/Paginator.vue
+++ b/pages/datatable/Paginator.vue
@@ -1,41 +1,70 @@
 <template>
-    <ClientOnly>
-        <div>
-            <div class="content-section introduction">
-                <div class="feature-intro">
-                    <h1>DataTable <span>Paginator</span></h1>
-                    <p>Pagination is enabled by setting paginator property to true and defining the rows attribute as the number of rows per page.</p>
-                </div>
-                <AppDemoActions />
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>DataTable <span>Paginator</span></h1>
+                <p>Pagination is enabled by setting paginator property to true and defining the rows attribute as the number of rows per page.</p>
+            </div>
+            <AppDemoActions />
+        </div>
+
+        <div class="content-section implementation">
+            <div class="card">
+                <h5>Basic</h5>
+                <DataTable
+                    :value="customers"
+                    :paginator="true"
+                    :rows="10"
+                    paginatorTemplate="CurrentPageReport FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown"
+                    :rowsPerPageOptions="[10, 20, 50]"
+                    responsiveLayout="scroll"
+                    currentPageReportTemplate="Showing {first} to {last} of {totalRecords}"
+                >
+                    <Column field="name" header="Name"></Column>
+                    <Column field="country.name" header="Country"></Column>
+                    <Column field="company" header="Company"></Column>
+                    <Column field="representative.name" header="Representative"></Column>
+                    <template #paginatorstart>
+                        <Button type="button" icon="pi pi-refresh" class="p-button-text" />
+                    </template>
+                    <template #paginatorend>
+                        <Button type="button" icon="pi pi-cloud" class="p-button-text" />
+                    </template>
+                </DataTable>
             </div>
 
-            <div class="content-section implementation">
-                <div class="card">
-                    <DataTable
-                        :value="customers"
-                        :paginator="true"
-                        :rows="10"
-                        paginatorTemplate="CurrentPageReport FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown"
-                        :rowsPerPageOptions="[10, 20, 50]"
-                        responsiveLayout="scroll"
-                        currentPageReportTemplate="Showing {first} to {last} of {totalRecords}"
-                    >
-                        <Column field="name" header="Name"></Column>
-                        <Column field="country.name" header="Country"></Column>
-                        <Column field="company" header="Company"></Column>
-                        <Column field="representative.name" header="Representative"></Column>
-                        <template #paginatorstart>
-                            <Button type="button" icon="pi pi-refresh" class="p-button-text" />
-                        </template>
-                        <template #paginatorend>
-                            <Button type="button" icon="pi pi-cloud" class="p-button-text" />
-                        </template>
-                    </DataTable>
-                </div>
+            <div class="card">
+                <h5>Responsive Paginator</h5>
+                <DataTable
+                    :value="customers"
+                    :paginator="true"
+                    :rows="10"
+                    :paginatorTemplate="{
+                        '640px': 'PrevPageLink CurrentPageReport NextPageLink',
+                        '960px': 'FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink',
+                        '1300px': 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink',
+                        default: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink JumpToPageDropdown'
+                    }"
+                    :rowsPerPageOptions="[10, 20, 50]"
+                    responsiveLayout="scroll"
+                    currentPageReportTemplate="Showing {first} to {last} of {totalRecords}"
+                >
+                    <Column field="name" header="Name"></Column>
+                    <Column field="country.name" header="Country"></Column>
+                    <Column field="company" header="Company"></Column>
+                    <Column field="representative.name" header="Representative"></Column>
+                    <template #paginatorstart>
+                        <Button type="button" icon="pi pi-refresh" class="p-button-text" />
+                    </template>
+                    <template #paginatorend>
+                        <Button type="button" icon="pi pi-cloud" class="p-button-text" />
+                    </template>
+                </DataTable>
             </div>
-            <AppDoc name="DataTablePaginatorDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']" github="datatable/DataTablePaginatorDemo.vue" />
         </div>
-    </ClientOnly>
+
+        <AppDoc name="DataTablePaginatorDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']" github="datatable/DataTablePaginatorDemo.vue" />
+    </div>
 </template>
 
 <script>
@@ -65,7 +94,32 @@ export default {
             <template #paginatorend>
                 <Button type="button" icon="pi pi-cloud" class="p-button-text" />
             </template>
-        </DataTable>    
+        </DataTable>
+
+        <DataTable
+            :value="customers"
+            :paginator="true"
+            :rows="10"
+            :paginatorTemplate="{
+                '640px': 'PrevPageLink CurrentPageReport NextPageLink',
+                '960px': 'FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink',
+                '1300px': 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink',
+                default: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink JumpToPageDropdown'
+            }"
+            responsiveLayout="scroll"
+            currentPageReportTemplate="Showing {first} to {last} of {totalRecords}"
+        >
+            <Column field="name" header="Name"></Column>
+            <Column field="country.name" header="Country"></Column>
+            <Column field="company" header="Company"></Column>
+            <Column field="representative.name" header="Representative"></Column>
+            <template #paginatorstart>
+                <Button type="button" icon="pi pi-refresh" class="p-button-text" />
+            </template>
+            <template #paginatorend>
+                <Button type="button" icon="pi pi-cloud" class="p-button-text" />
+            </template>
+        </DataTable>
 	</div>
 </template>
 
@@ -86,7 +140,7 @@ export default {
         this.customerService.getCustomersLarge().then(data => this.customers = data);
     }
 }
-<\\/script>                  
+<\\/script>
 `
                 },
                 'composition-api': {
@@ -108,7 +162,32 @@ export default {
             <template #paginatorend>
                 <Button type="button" icon="pi pi-cloud" class="p-button-text" />
             </template>
-        </DataTable>    
+        </DataTable>
+
+        <DataTable
+            :value="customers"
+            :paginator="true"
+            :rows="10"
+            :paginatorTemplate="{
+                '640px': 'PrevPageLink CurrentPageReport NextPageLink',
+                '960px': 'FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink',
+                '1300px': 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink',
+                default: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink JumpToPageDropdown'
+            }"
+            responsiveLayout="scroll"
+            currentPageReportTemplate="Showing {first} to {last} of {totalRecords}"
+        >
+            <Column field="name" header="Name"></Column>
+            <Column field="country.name" header="Country"></Column>
+            <Column field="company" header="Company"></Column>
+            <Column field="representative.name" header="Representative"></Column>
+            <template #paginatorstart>
+                <Button type="button" icon="pi pi-refresh" class="p-button-text" />
+            </template>
+            <template #paginatorend>
+                <Button type="button" icon="pi pi-cloud" class="p-button-text" />
+            </template>
+        </DataTable>
 	</div>
 </template>
 
@@ -128,7 +207,7 @@ export default {
         return { customers }
     }
 }
-<\\/script>                  
+<\\/script>
 `
                 },
                 'browser-source': {
@@ -152,6 +231,31 @@ export default {
                     <p-button type="button" icon="pi pi-cloud" class="p-button-text"></p-button>
                 </template>
             </p-datatable>
+
+            <p-datatable
+                :value="customers"
+                :paginator="true"
+                :rows="10"
+                :paginatorTemplate="{
+                    '640px': 'PrevPageLink CurrentPageReport NextPageLink',
+                    '960px': 'FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink',
+                    '1300px': 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink',
+                    default: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink JumpToPageDropdown'
+                }"
+                responsiveLayout="scroll"
+                currentPageReportTemplate="Showing {first} to {last} of {totalRecords}"
+            >
+                <Column field="name" header="Name"></Column>
+                <Column field="country.name" header="Country"></Column>
+                <Column field="company" header="Company"></Column>
+                <Column field="representative.name" header="Representative"></Column>
+                <template #paginatorstart>
+                    <Button type="button" icon="pi pi-refresh" class="p-button-text" />
+                </template>
+                <template #paginatorend>
+                    <Button type="button" icon="pi pi-cloud" class="p-button-text" />
+                </template>
+            </p-datatable>
         </div>
 
         <script type="module">
@@ -178,7 +282,7 @@ export default {
         createApp(App)
             .use(primevue.config.default)
             .mount("#app");
-        <\\/script>                  
+        <\\/script>
 `
                 }
             }
diff --git a/pages/datatable/Reorder.vue b/pages/datatable/Reorder.vue
index d44dcde6e..47e6f7897 100755
--- a/pages/datatable/Reorder.vue
+++ b/pages/datatable/Reorder.vue
@@ -12,14 +12,12 @@
             <div class="card">
                 <DataTable :value="products" :reorderableColumns="true" @column-reorder="onColReorder" @row-reorder="onRowReorder" responsiveLayout="scroll">
                     <Column :rowReorder="true" headerStyle="width: 3rem" :reorderableColumn="false" />
-                    <Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field"></Column>
+                    <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header"></Column>
                 </DataTable>
             </div>
         </div>
 
-        <ClientOnly>
-            <AppDoc name="DataTableReorderDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableReorderDemo.vue" />
-        </ClientOnly>
+        <AppDoc name="DataTableReorderDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableReorderDemo.vue" />
     </div>
 </template>
 
diff --git a/pages/datatable/Responsive.vue b/pages/datatable/Responsive.vue
index 26f58150a..36d5b3881 100755
--- a/pages/datatable/Responsive.vue
+++ b/pages/datatable/Responsive.vue
@@ -50,9 +50,7 @@
             </div>
         </div>
 
-        <ClientOnly>
-            <AppDoc name="DataTableResponsiveDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableResponsiveDemo.vue" />
-        </ClientOnly>
+        <AppDoc name="DataTableResponsiveDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableResponsiveDemo.vue" />
     </div>
 </template>
 
diff --git a/pages/datatable/RowExpand.vue b/pages/datatable/RowExpand.vue
index 926e7cb96..38e629170 100755
--- a/pages/datatable/RowExpand.vue
+++ b/pages/datatable/RowExpand.vue
@@ -10,7 +10,7 @@
 
         <div class="content-section implementation">
             <div class="card">
-                <DataTable :value="products" v-model:expandedRows="expandedRows" dataKey="id" @row-expand="onRowExpand" @row-collapse="onRowCollapse" responsiveLayout="scroll">
+                <DataTable v-model:expandedRows="expandedRows" :value="products" dataKey="id" @row-expand="onRowExpand" @row-collapse="onRowCollapse" responsiveLayout="scroll">
                     <template #header>
                         <div class="table-header-container">
                             <Button icon="pi pi-plus" label="Expand All" @click="expandAll" class="mr-2" />
@@ -21,7 +21,7 @@
                     <Column field="name" header="Name" sortable></Column>
                     <Column header="Image">
                         <template #body="slotProps">
-                            <img :src="'/demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" />
+                            <img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" />
                         </template>
                     </Column>
                     <Column field="price" header="Price" sortable>
@@ -69,9 +69,7 @@
             </div>
         </div>
 
-        <ClientOnly>
-            <AppDoc name="DataTableRowExpandDemo" :sources="sources" :service="['ProductService']" :data="['products-orders-small']" github="datatable/DataTableRowExpandDemo.vue" />
-        </ClientOnly>
+        <AppDoc name="DataTableRowExpandDemo" :sources="sources" :service="['ProductService']" :data="['products-orders-small']" github="datatable/DataTableRowExpandDemo.vue" />
     </div>
 </template>
 
diff --git a/pages/datatable/RowGroup.vue b/pages/datatable/RowGroup.vue
index ba83962f2..c8d9e3b58 100755
--- a/pages/datatable/RowGroup.vue
+++ b/pages/datatable/RowGroup.vue
@@ -29,7 +29,7 @@
                     </Column>
                     <Column field="date" header="Date" style="min-width: 200px"></Column>
                     <template #groupheader="slotProps">
-                        <img :alt="slotProps.data.representative.name" :src="'/demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
+                        <img :alt="slotProps.data.representative.name" :src="'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
                         <span class="image-text">{{ slotProps.data.representative.name }}</span>
                     </template>
                     <template #groupfooter="slotProps">
@@ -45,6 +45,7 @@
                 <h5>Expandable Row Groups</h5>
                 <p>Group customers by their representative.</p>
                 <DataTable
+                    v-model:expandedRowGroups="expandedRowGroups"
                     :value="customers"
                     rowGroupMode="subheader"
                     groupRowsBy="representative.name"
@@ -53,7 +54,6 @@
                     :sortOrder="1"
                     responsiveLayout="scroll"
                     :expandableRowGroups="true"
-                    v-model:expandedRowGroups="expandedRowGroups"
                     @rowgroup-expand="onRowGroupExpand"
                     @rowgroup-collapse="onRowGroupCollapse"
                 >
@@ -73,7 +73,7 @@
                     </Column>
                     <Column field="date" header="Date"></Column>
                     <template #groupheader="slotProps">
-                        <img :alt="slotProps.data.representative.name" :src="'/demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
+                        <img :alt="slotProps.data.representative.name" :src="'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
                         <span class="image-text">{{ slotProps.data.representative.name }}</span>
                     </template>
                     <template #groupfooter="slotProps">
@@ -93,7 +93,7 @@
                     </Column>
                     <Column field="representative.name" header="Representative">
                         <template #body="slotProps">
-                            <img :alt="slotProps.data.representative.name" :src="'/demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
+                            <img :alt="slotProps.data.representative.name" :src="'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
                             <span class="image-text">{{ slotProps.data.representative.name }}</span>
                         </template>
                     </Column>
@@ -115,9 +115,7 @@
             </div>
         </div>
 
-        <ClientOnly>
-            <AppDoc name="DataTableRowGroupDemo" :sources="sources" :service="['CustomerService']" :data="['customers-medium']" github="datatable/DataTableRowGroupDemo.vue" />
-        </ClientOnly>
+        <AppDoc name="DataTableRowGroupDemo" :sources="sources" :service="['CustomerService']" :data="['customers-medium']" github="datatable/DataTableRowGroupDemo.vue" />
     </div>
 </template>
 
diff --git a/pages/datatable/Scroll.vue b/pages/datatable/Scroll.vue
index 07cd14aed..c1f7e6235 100755
--- a/pages/datatable/Scroll.vue
+++ b/pages/datatable/Scroll.vue
@@ -29,7 +29,7 @@
                 <Button label="Show" icon="pi pi-external-link" @click="openDialog" />
             </div>
 
-            <Dialog header="Flex Scroll" v-model:visible="dialogVisible" :style="{ width: '75vw' }" :maximizable="true" :modal="true" :contentStyle="{ height: '300px' }">
+            <Dialog v-model:visible="dialogVisible" header="Flex Scroll" :style="{ width: '75vw' }" :maximizable="true" :modal="true" :contentStyle="{ height: '300px' }">
                 <DataTable :value="customers1" :scrollable="true" scrollHeight="flex">
                     <Column field="name" header="Name" style="min-width: 200px"></Column>
                     <Column field="country.name" header="Country" style="min-width: 200px"></Column>
@@ -116,7 +116,7 @@
                     </Column>
                     <Column field="date" header="Date" style="min-width: 200px"></Column>
                     <template #groupheader="slotProps">
-                        <img :alt="slotProps.data.representative.name" :src="'/demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
+                        <img :alt="slotProps.data.representative.name" :src="'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
                         <span class="image-text">{{ slotProps.data.representative.name }}</span>
                     </template>
                     <template #groupfooter="slotProps">
@@ -126,9 +126,7 @@
             </div>
         </div>
 
-        <ClientOnly>
-            <AppDoc name="DataTableScrollDemo" :sources="sources" :service="['CustomerService']" :data="['customers-medium', 'customers-large']" github="datatable/DataTableScrollDemo.vue" />
-        </ClientOnly>
+        <AppDoc name="DataTableScrollDemo" :sources="sources" :service="['CustomerService']" :data="['customers-medium', 'customers-large']" github="datatable/DataTableScrollDemo.vue" />
     </div>
 </template>
 
diff --git a/pages/datatable/Selection.vue b/pages/datatable/Selection.vue
index f91681a71..ba16c05e5 100755
--- a/pages/datatable/Selection.vue
+++ b/pages/datatable/Selection.vue
@@ -12,7 +12,7 @@
             <div class="card">
                 <h5>Single</h5>
                 <p>In single mode, a row is selected on click event of a row. If the row is already selected then the row gets unselected.</p>
-                <DataTable :value="products" v-model:selection="selectedProduct1" selectionMode="single" dataKey="id" responsiveLayout="scroll">
+                <DataTable v-model:selection="selectedProduct1" :value="products" selectionMode="single" dataKey="id" responsiveLayout="scroll">
                     <Column field="code" header="Code"></Column>
                     <Column field="name" header="Name"></Column>
                     <Column field="category" header="Category"></Column>
@@ -26,7 +26,7 @@
                     In multiple mode, selection binding should be an array. For touch enabled devices, selection is managed by tapping and for other devices metakey or shiftkey are required. Setting metaKeySelection property as false enables multiple
                     selection without meta key.
                 </p>
-                <DataTable :value="products" v-model:selection="selectedProducts1" selectionMode="multiple" dataKey="id" responsiveLayout="scroll">
+                <DataTable v-model:selection="selectedProducts1" :value="products" selectionMode="multiple" dataKey="id" responsiveLayout="scroll">
                     <template #header> Multiple Selection with MetaKey </template>
                     <Column field="code" header="Code"></Column>
                     <Column field="name" header="Name"></Column>
@@ -34,7 +34,7 @@
                     <Column field="quantity" header="Quantity"></Column>
                 </DataTable>
 
-                <DataTable :value="products" v-model:selection="selectedProducts2" selectionMode="multiple" dataKey="id" :metaKeySelection="false" style="margin-top: 2em" responsiveLayout="scroll">
+                <DataTable v-model:selection="selectedProducts2" :value="products" selectionMode="multiple" dataKey="id" :metaKeySelection="false" style="margin-top: 2em" responsiveLayout="scroll">
                     <template #header> Multiple Selection without MetaKey </template>
                     <Column field="code" header="Code"></Column>
                     <Column field="name" header="Name"></Column>
@@ -46,7 +46,7 @@
             <div class="card">
                 <h5>Events</h5>
                 <p>row-select and row-unselects are available as selection events.</p>
-                <DataTable :value="products" v-model:selection="selectedProduct2" selectionMode="single" dataKey="id" @row-select="onRowSelect" @row-unselect="onRowUnselect" responsiveLayout="scroll">
+                <DataTable v-model:selection="selectedProduct2" :value="products" selectionMode="single" dataKey="id" :metaKeySelection="false" @row-select="onRowSelect" @row-unselect="onRowUnselect" responsiveLayout="scroll">
                     <Column field="code" header="Code"></Column>
                     <Column field="name" header="Name"></Column>
                     <Column field="category" header="Category"></Column>
@@ -57,7 +57,7 @@
             <div class="card">
                 <h5>RadioButton</h5>
                 <p>Single selection can also be handled using radio buttons by enabling the selectionMode property of column as "single".</p>
-                <DataTable :value="products" v-model:selection="selectedProduct3" dataKey="id" responsiveLayout="scroll">
+                <DataTable v-model:selection="selectedProduct3" :value="products" dataKey="id" responsiveLayout="scroll">
                     <Column selectionMode="single" headerStyle="width: 3em"></Column>
                     <Column field="code" header="Code"></Column>
                     <Column field="name" header="Name"></Column>
@@ -69,7 +69,7 @@
             <div class="card">
                 <h5>Checkbox</h5>
 
-                <DataTable :value="products" v-model:selection="selectedProducts3" dataKey="id" responsiveLayout="scroll">
+                <DataTable v-model:selection="selectedProducts3" :value="products" dataKey="id" responsiveLayout="scroll">
                     <Column selectionMode="multiple" headerStyle="width: 3em"></Column>
                     <Column field="code" header="Code"></Column>
                     <Column field="name" header="Name"></Column>
@@ -79,9 +79,7 @@
             </div>
         </div>
 
-        <ClientOnly>
-            <AppDoc name="DataTableSelectionDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableSelectionDemo.vue" />
-        </ClientOnly>
+        <AppDoc name="DataTableSelectionDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableSelectionDemo.vue" />
     </div>
 </template>
 
@@ -141,7 +139,7 @@ export default {
 
         <div class="card">
             <h5>Events</h5>
-            <DataTable :value="products" v-model:selection="selectedProduct2" selectionMode="single" dataKey="id"
+            <DataTable :value="products" v-model:selection="selectedProduct2" selectionMode="single" dataKey="id" :metaKeySelection="false"
                 @rowSelect="onRowSelect" @rowUnselect="onRowUnselect" responsiveLayout="scroll">
                 <Column field="code" header="Code"></Column>
                 <Column field="name" header="Name"></Column>
@@ -251,7 +249,7 @@ export default {
 
         <div class="card">
             <h5>Events</h5>
-            <DataTable :value="products" v-model:selection="selectedProduct2" selectionMode="single" dataKey="id"
+            <DataTable :value="products" v-model:selection="selectedProduct2" selectionMode="single" dataKey="id" :metaKeySelection="false"
                 @rowSelect="onRowSelect" @rowUnselect="onRowUnselect" responsiveLayout="scroll">
                 <Column field="code" header="Code"></Column>
                 <Column field="name" header="Name"></Column>
@@ -365,7 +363,7 @@ export default {
 
             <div class="card">
                 <h5>Events</h5>
-                <p-datatable :value="products" v-model:selection="selectedProduct2" selection-mode="single" dataKey="id"
+                <p-datatable :value="products" v-model:selection="selectedProduct2" selection-mode="single" data-key="id" :meta-key-selection="false"
                     @row-select="onRowSelect" @row-unselect="onRowUnselect" responsive-layout="scroll">
                     <p-column field="code" header="Code"></p-column>
                     <p-column field="name" header="Name"></p-column>
diff --git a/pages/datatable/Size.vue b/pages/datatable/Size.vue
index 88e2a7be5..3d7d5ea64 100644
--- a/pages/datatable/Size.vue
+++ b/pages/datatable/Size.vue
@@ -40,9 +40,7 @@
             </div>
         </div>
 
-        <ClientOnly>
-            <AppDoc name="DataTableSizeDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableSizeDemo.vue" />
-        </ClientOnly>
+        <AppDoc name="DataTableSizeDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableSizeDemo.vue" />
     </div>
 </template>
 
diff --git a/pages/datatable/Sort.vue b/pages/datatable/Sort.vue
index 71892d726..fc5c3fb13 100755
--- a/pages/datatable/Sort.vue
+++ b/pages/datatable/Sort.vue
@@ -71,9 +71,7 @@
             </div>
         </div>
 
-        <ClientOnly>
-            <AppDoc name="DataTableSortDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableSortDemo.vue" />
-        </ClientOnly>
+        <AppDoc name="DataTableSortDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableSortDemo.vue" />
     </div>
 </template>
 
diff --git a/pages/datatable/State.vue b/pages/datatable/State.vue
index d578ce885..4eda5bb86 100755
--- a/pages/datatable/State.vue
+++ b/pages/datatable/State.vue
@@ -12,11 +12,11 @@
             <div class="card">
                 <h5>Session Storage</h5>
                 <DataTable
+                    v-model:filters="filters1"
+                    v-model:selection="selectedCustomer1"
                     :value="customers"
                     :paginator="true"
                     :rows="10"
-                    v-model:filters="filters1"
-                    v-model:selection="selectedCustomer1"
                     selectionMode="single"
                     dataKey="id"
                     stateStorage="session"
@@ -31,7 +31,7 @@
                     </template>
                     <Column field="name" header="Name" :sortable="true" style="width: 25%">
                         <template #filter>
-                            <InputText type="text" v-model="filters1['name']" class="p-column-filter" placeholder="Search by name" />
+                            <InputText v-model="filters1['name']" type="text" class="p-column-filter" placeholder="Search by name" />
                         </template>
                     </Column>
                     <Column header="Country" :sortable="true" sortField="country.name" filterField="country.name" filterMatchMode="contains" style="width: 25%">
@@ -40,19 +40,19 @@
                             <span class="image-text">{{ slotProps.data.country.name }}</span>
                         </template>
                         <template #filter>
-                            <InputText type="text" v-model="filters1['country.name']" class="p-column-filter" placeholder="Search by country" />
+                            <InputText v-model="filters1['country.name']" type="text" class="p-column-filter" placeholder="Search by country" />
                         </template>
                     </Column>
                     <Column header="Representative" :sortable="true" sortField="representative.name" filterField="representative.name" filterMatchMode="in" style="width: 25%">
                         <template #body="slotProps">
-                            <img :alt="slotProps.data.representative.name" :src="'/demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
+                            <img :alt="slotProps.data.representative.name" :src="'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
                             <span class="image-text">{{ slotProps.data.representative.name }}</span>
                         </template>
                         <template #filter>
                             <MultiSelect v-model="filters1['representative.name']" :options="representatives" optionLabel="name" optionValue="name" placeholder="All" class="p-column-filter">
                                 <template #option="slotProps">
                                     <div class="p-multiselect-representative-option">
-                                        <img :alt="slotProps.option.name" :src="'/demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
+                                        <img :alt="slotProps.option.name" :src="'demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
                                         <span class="image-text">{{ slotProps.option.name }}</span>
                                     </div>
                                 </template>
@@ -78,11 +78,11 @@
             <div class="card">
                 <h5>Local Storage</h5>
                 <DataTable
+                    v-model:filters="filters2"
+                    v-model:selection="selectedCustomer2"
                     :value="customers"
                     :paginator="true"
                     :rows="10"
-                    v-model:filters="filters2"
-                    v-model:selection="selectedCustomer2"
                     selectionMode="single"
                     dataKey="id"
                     stateStorage="local"
@@ -97,7 +97,7 @@
                     </template>
                     <Column field="name" header="Name" :sortable="true" style="width: 25%">
                         <template #filter>
-                            <InputText type="text" v-model="filters2['name']" class="p-column-filter" placeholder="Search by name" />
+                            <InputText v-model="filters2['name']" type="text" class="p-column-filter" placeholder="Search by name" />
                         </template>
                     </Column>
                     <Column header="Country" :sortable="true" sortField="country.name" filterField="country.name" filterMatchMode="contains" style="width: 25%">
@@ -106,19 +106,19 @@
                             <span class="image-text">{{ slotProps.data.country.name }}</span>
                         </template>
                         <template #filter>
-                            <InputText type="text" v-model="filters2['country.name']" class="p-column-filter" placeholder="Search by country" />
+                            <InputText v-model="filters2['country.name']" type="text" class="p-column-filter" placeholder="Search by country" />
                         </template>
                     </Column>
                     <Column header="Representative" :sortable="true" sortField="representative.name" filterField="representative.name" filterMatchMode="in" style="width: 25%">
                         <template #body="slotProps">
-                            <img :alt="slotProps.data.representative.name" :src="'/demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
+                            <img :alt="slotProps.data.representative.name" :src="'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
                             <span class="image-text">{{ slotProps.data.representative.name }}</span>
                         </template>
                         <template #filter>
                             <MultiSelect v-model="filters2['representative.name']" :options="representatives" optionLabel="name" optionValue="name" placeholder="All" class="p-column-filter">
                                 <template #option="slotProps">
                                     <div class="p-multiselect-representative-option">
-                                        <img :alt="slotProps.option.name" :src="'/demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
+                                        <img :alt="slotProps.option.name" :src="'demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
                                         <span class="image-text">{{ slotProps.option.name }}</span>
                                     </div>
                                 </template>
@@ -142,9 +142,7 @@
             </div>
         </div>
 
-        <ClientOnly>
-            <AppDoc name="DataTableStateDemo" :sources="sources" :service="['CustomerService']" :data="['customers-medium']" github="datatable/DataTableStateDemo.vue" />
-        </ClientOnly>
+        <AppDoc name="DataTableStateDemo" :sources="sources" :service="['CustomerService']" :data="['customers-medium']" github="datatable/DataTableStateDemo.vue" />
     </div>
 </template>
 
diff --git a/pages/datatable/Striped.vue b/pages/datatable/Striped.vue
index 86a99c12d..4fa176a4d 100644
--- a/pages/datatable/Striped.vue
+++ b/pages/datatable/Striped.vue
@@ -19,9 +19,7 @@
             </div>
         </div>
 
-        <ClientOnly>
-            <AppDoc name="DataTableStripedDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableStripedDemo.vue" />
-        </ClientOnly>
+        <AppDoc name="DataTableStripedDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableStripedDemo.vue" />
     </div>
 </template>
 
diff --git a/pages/datatable/Style.vue b/pages/datatable/Style.vue
index c016de45a..1720fda22 100755
--- a/pages/datatable/Style.vue
+++ b/pages/datatable/Style.vue
@@ -25,9 +25,7 @@
             </div>
         </div>
 
-        <ClientOnly>
-            <AppDoc name="DataTableStyleDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableStyleDemo.vue" />
-        </ClientOnly>
+        <AppDoc name="DataTableStyleDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableStyleDemo.vue" />
     </div>
 </template>
 
diff --git a/pages/datatable/Templating.vue b/pages/datatable/Templating.vue
index 40f481ebc..b154673f1 100755
--- a/pages/datatable/Templating.vue
+++ b/pages/datatable/Templating.vue
@@ -20,7 +20,7 @@
                     <Column field="name" header="Name"></Column>
                     <Column header="Image">
                         <template #body="slotProps">
-                            <img :src="'/demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" />
+                            <img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" />
                         </template>
                     </Column>
                     <Column field="price" header="Price">
@@ -43,9 +43,7 @@
             </div>
         </div>
 
-        <ClientOnly>
-            <AppDoc name="DataTableTemplatingDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableTemplatingDemo.vue" />
-        </ClientOnly>
+        <AppDoc name="DataTableTemplatingDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableTemplatingDemo.vue" />
     </div>
 </template>
 
diff --git a/pages/datatable/VirtualScroll.vue b/pages/datatable/VirtualScroll.vue
index b9b50acde..76a7332bf 100644
--- a/pages/datatable/VirtualScroll.vue
+++ b/pages/datatable/VirtualScroll.vue
@@ -61,9 +61,7 @@
             </div>
         </div>
 
-        <ClientOnly>
-            <AppDoc name="DataTableVirtualScrollDemo" :sources="sources" :service="['CarService']" github="datatable/DataTableVirtualScrollDemo.vue" />
-        </ClientOnly>
+        <AppDoc name="DataTableVirtualScrollDemo" :sources="sources" :service="['CarService']" github="datatable/DataTableVirtualScrollDemo.vue" />
     </div>
 </template>
 
diff --git a/pages/datatable/index.vue b/pages/datatable/index.vue
index 17a05cb69..6a77ebf09 100755
--- a/pages/datatable/index.vue
+++ b/pages/datatable/index.vue
@@ -11,14 +11,14 @@
         <div class="content-section implementation">
             <div class="card">
                 <DataTable
+                    v-model:selection="selectedCustomers"
+                    v-model:filters="filters"
                     :value="customers"
                     :paginator="true"
                     class="p-datatable-customers"
                     :rows="10"
                     dataKey="id"
                     :rowHover="true"
-                    v-model:selection="selectedCustomers"
-                    v-model:filters="filters"
                     filterDisplay="menu"
                     :loading="loading"
                     paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
@@ -44,7 +44,7 @@
                             {{ data.name }}
                         </template>
                         <template #filter="{ filterModel }">
-                            <InputText type="text" v-model="filterModel.value" class="p-column-filter" placeholder="Search by name" />
+                            <InputText v-model="filterModel.value" type="text" class="p-column-filter" placeholder="Search by name" />
                         </template>
                     </Column>
                     <Column field="country.name" header="Country" sortable filterMatchMode="contains" style="min-width: 14rem">
@@ -53,12 +53,12 @@
                             <span class="image-text">{{ data.country.name }}</span>
                         </template>
                         <template #filter="{ filterModel }">
-                            <InputText type="text" v-model="filterModel.value" class="p-column-filter" placeholder="Search by country" />
+                            <InputText v-model="filterModel.value" type="text" class="p-column-filter" placeholder="Search by country" />
                         </template>
                     </Column>
                     <Column header="Agent" sortable filterField="representative" sortField="representative.name" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem">
                         <template #body="{ data }">
-                            <img :alt="data.representative.name" :src="'/demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
+                            <img :alt="data.representative.name" :src="'demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
                             <span class="image-text">{{ data.representative.name }}</span>
                         </template>
                         <template #filter="{ filterModel }">
@@ -66,7 +66,7 @@
                             <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
                                 <template #option="slotProps">
                                     <div class="p-multiselect-representative-option">
-                                        <img :alt="slotProps.option.name" :src="'/demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
+                                        <img :alt="slotProps.option.name" :src="'demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
                                         <span class="image-text">{{ slotProps.option.name }}</span>
                                     </div>
                                 </template>
@@ -130,8 +130,8 @@
 </template>
 
 <script>
-import CustomerService from '../../service/CustomerService';
 import { FilterMatchMode, FilterOperator } from 'primevue/api';
+import CustomerService from '../../service/CustomerService';
 import DataTableDoc from './DataTableDoc';
 
 export default {
diff --git a/pages/dataview/DataViewDoc.vue b/pages/dataview/DataViewDoc.vue
index e1a0b1be7..3c2642efe 100755
--- a/pages/dataview/DataViewDoc.vue
+++ b/pages/dataview/DataViewDoc.vue
@@ -1,29 +1,28 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="DataViewDemo" :sources="sources" :service="['ProductService']" :data="['products']" github="dataview/DataViewDemo.vue">
-            <h5>Import via Module</h5>
+    <AppDoc name="DataViewDemo" :sources="sources" :service="['ProductService']" :data="['products']" github="dataview/DataViewDemo.vue">
+        <h5>Import via Module</h5>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 import DataView from 'primevue/dataview';
-				
+
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/dataview/dataview.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>PrimeFlex</h5>
-            <p>DataView utilizes PrimeFlex library so it needs to be installed before getting started. Refer to <a href="https://www.primefaces.org/primeflex/gridsystem">PrimeFlex</a> documentation for details.</p>
+        <h5>PrimeFlex</h5>
+        <p>DataView utilizes PrimeFlex library so it needs to be installed before getting started. Refer to <a href="https://www.primefaces.org/primeflex/gridsystem">PrimeFlex</a> documentation for details.</p>
 
-            <h5>Getting Started</h5>
-            <p>
-                DataView requires a collection of items as its value and one or more templates depending on the layout mode e.g. list and grid. Throughout the samples, a car interface having vin, brand, year and color properties are used to define an
-                object to be displayed by the dataview. Cars are loaded by a CarService that connects to a server to fetch the cars.
-            </p>
-            <pre v-code.script><code><template v-pre>
+        <h5>Getting Started</h5>
+        <p>
+            DataView requires a collection of items as its value and one or more templates depending on the layout mode e.g. list and grid. Throughout the samples, a car interface having vin, brand, year and color properties are used to define an
+            object to be displayed by the dataview. Cars are loaded by a CarService that connects to a server to fetch the cars.
+        </p>
+        <pre v-code.script><code><template v-pre>
 export default {
     data() {
         return {
@@ -41,15 +40,15 @@ export default {
 </template>
 </code></pre>
 
-            <h5>Layouts</h5>
-            <p>DataView has two layout modes; <i>list</i> and <i>grid</i> where a separate template is used to render an item in each mode. In list mode name of the template is "list" whereas in grid mode it is "grid".</p>
-            <p>Note that there is no restriction to use both layouts at the same time, you may configure only one layout using the layout property with the corresponding template.</p>
-            <pre v-code><code><template v-pre>
+        <h5>Layouts</h5>
+        <p>DataView has two layout modes; <i>list</i> and <i>grid</i> where a separate template is used to render an item in each mode. In list mode name of the template is "list" whereas in grid mode it is "grid".</p>
+        <p>Note that there is no restriction to use both layouts at the same time, you may configure only one layout using the layout property with the corresponding template.</p>
+        <pre v-code><code><template v-pre>
 &lt;template #list="slotProps"&gt;
 	&lt;div class="col-12"&gt;
         &lt;div class="car-details"&gt;
             &lt;div&gt;
-                &lt;img :src="'/demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/&gt;
+                &lt;img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/&gt;
                 &lt;div class="grid"&gt;
                     &lt;div class="col-12"&gt;Vin: &lt;b&gt;&#123;&#123;slotProps.data.vin&#125;&#125;&lt;/b&gt;&lt;/div&gt;
                     &lt;div class="col-12"&gt;Year: &lt;b&gt;&#123;&#123;slotProps.data.year&#125;&#125;&lt;/b&gt;&lt;/div&gt;
@@ -64,7 +63,7 @@ export default {
 &lt;template #grid="slotProps"&gt;
 	&lt;div style="padding: .5em" class="col-12 md:col-3"&gt;
 		&lt;Panel :header="slotProps.data.vin" style="text-align: center"&gt;
-			&lt;img :src="'/demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/&gt;
+			&lt;img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/&gt;
 			&lt;div class="car-detail"&gt;{{slotProps.data.year}} - {{slotProps.data.color}}&lt;/div&gt;
 			&lt;Button icon="pi pi-search"&gt;&lt;/Button&gt;
 		&lt;/Panel&gt;
@@ -73,28 +72,28 @@ export default {
 </template>
 </code></pre>
 
-            <h5>Sections</h5>
-            <p>Header and Footer are the two templates that are capable of displaying custom content.</p>
-            <pre v-code><code>
+        <h5>Sections</h5>
+        <p>Header and Footer are the two templates that are capable of displaying custom content.</p>
+        <pre v-code><code>
 &lt;template #header&gt;Header Content&lt;/template&gt;
 &lt;template #footer&gt;Footer Content&lt;/template&gt;
 
 </code></pre>
 
-            <h5>Empty Message</h5>
-            <p>Where there is no data to display, the optional <i>empty</i> template can be used to display information.</p>
-            <pre v-code><code>
+        <h5>Empty Message</h5>
+        <p>Where there is no data to display, the optional <i>empty</i> template can be used to display information.</p>
+        <pre v-code><code>
 &lt;template #empty&gt;No records found.&lt;/template&gt;
 
 </code></pre>
 
-            <h5>DataViewLayoutOptions</h5>
-            <p>
-                When both layout modes are enabled in DataView, a UI element would be necessary to let the user toggle between the view. DataViewLayoutOptions is a helper component to display a buttonset to choose the layout mode in DataView.
-                Location of the DataViewLayoutOptions should be inside the DataView component. If you prefer a different UI element you can create your own that updates the layout property of the DataView.
-            </p>
+        <h5>DataViewLayoutOptions</h5>
+        <p>
+            When both layout modes are enabled in DataView, a UI element would be necessary to let the user toggle between the view. DataViewLayoutOptions is a helper component to display a buttonset to choose the layout mode in DataView. Location of
+            the DataViewLayoutOptions should be inside the DataView component. If you prefer a different UI element you can create your own that updates the layout property of the DataView.
+        </p>
 
-            <pre v-code><code><template v-pre>
+        <pre v-code><code><template v-pre>
 &lt;DataView :value="cars" :layout="layout"&gt;
 	&lt;template #header&gt;
 		&lt;DataViewLayoutOptions v-model="layout"&gt;&lt;/DataViewLayoutOptions&gt;
@@ -109,12 +108,12 @@ export default {
 </template>
 </code></pre>
 
-            <h5>Paginator</h5>
-            <p>
-                Pagination is enabled by setting paginator property to true, rows attribute defines the number of rows per page and pageLinks specify the the number of page links to display. To customize the left and right side of the paginators, use
-                <i>paginatorstart</i> and <i>paginatorend</i> templates.
-            </p>
-            <pre v-code><code><template v-pre>
+        <h5>Paginator</h5>
+        <p>
+            Pagination is enabled by setting paginator property to true, rows attribute defines the number of rows per page and pageLinks specify the the number of page links to display. To customize the left and right side of the paginators, use
+            <i>paginatorstart</i> and <i>paginatorend</i> templates.
+        </p>
+        <pre v-code><code><template v-pre>
 &lt;DataView :value="cars" :layout="layout" paginatorPosition="both" :paginator="true" :rows="20"&gt;
 	&lt;template #paginatorstart&gt;
 		&lt;Button type="button" icon="pi pi-refresh"/&gt;
@@ -132,12 +131,12 @@ export default {
 </template>
 </code></pre>
 
-            <h5>Sorting</h5>
-            <p>
-                <i>sortField</i> and <i>sortOrder</i> properties are available for the sorting functionality, for flexibility there is no built-in UI available so that a custom UI can be used for the sorting element. Here is an example that uses a
-                dropdown where simply updating the sortField-sortOrder bindings of the DataView initiates sorting.
-            </p>
-            <pre v-code><code><template v-pre>
+        <h5>Sorting</h5>
+        <p>
+            <i>sortField</i> and <i>sortOrder</i> properties are available for the sorting functionality, for flexibility there is no built-in UI available so that a custom UI can be used for the sorting element. Here is an example that uses a
+            dropdown where simply updating the sortField-sortOrder bindings of the DataView initiates sorting.
+        </p>
+        <pre v-code><code><template v-pre>
 &lt;DataView :value="cars" :layout="layout" :sortOrder="sortOrder" :sortField="sortField"&gt;
     &lt;template #header&gt;
         &lt;div class="grid grid-nogutter"&gt;
@@ -159,7 +158,7 @@ export default {
 </template>
 </code></pre>
 
-            <pre v-code.script><code><template v-pre>
+        <pre v-code.script><code><template v-pre>
 export default {
     data() {
         return {
@@ -203,12 +202,12 @@ export default {
 </template>
 </code></pre>
 
-            <h5>Lazy Loading</h5>
-            <p>
-                Lazy loading is useful to deal with huge datasets, in order to implement lazy loading use the pagination and utilize the <i>page</i> callback to load your data from the backend. Pagination in this case needs to display the logical
-                number of records bound to the <i>totalRecords</i> property so that paginator can display itself according to the total records although you'd only need to load the data of the current page.
-            </p>
-            <pre v-code><code><template v-pre>
+        <h5>Lazy Loading</h5>
+        <p>
+            Lazy loading is useful to deal with huge datasets, in order to implement lazy loading use the pagination and utilize the <i>page</i> callback to load your data from the backend. Pagination in this case needs to display the logical number
+            of records bound to the <i>totalRecords</i> property so that paginator can display itself according to the total records although you'd only need to load the data of the current page.
+        </p>
+        <pre v-code><code><template v-pre>
 &lt;DataView :value="cars" :layout="layout" :paginator="true" :rows="20" :lazy="true" @page="onPage($event)"&gt;
 	&lt;template #list="slotProps" &gt;
 		&lt;div&gt;Vin: &lt;b&gt;{{slotProps.data.vin}}&lt;/b&gt;&lt;/div&gt;
@@ -220,7 +219,7 @@ export default {
 </template>
 </code></pre>
 
-            <pre v-code.script><code><template v-pre>
+        <pre v-code.script><code><template v-pre>
 export default {
     data() {
         return {
@@ -241,238 +240,272 @@ export default {
 </template>
 </code></pre>
 
-            <h5>Properties</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>value</td>
-                            <td>array</td>
-                            <td>null</td>
-                            <td>An array of objects to display.</td>
-                        </tr>
-                        <tr>
-                            <td>layout</td>
-                            <td>string</td>
-                            <td>list</td>
-                            <td>Layout of the items, valid values are "list" and "grid".</td>
-                        </tr>
-                        <tr>
-                            <td>rows</td>
-                            <td>number</td>
-                            <td>0</td>
-                            <td>Number of rows to display per page.</td>
-                        </tr>
-                        <tr>
-                            <td>first</td>
-                            <td>number</td>
-                            <td>0</td>
-                            <td>Index of the first record to render.</td>
-                        </tr>
-                        <tr>
-                            <td>totalRecords</td>
-                            <td>number</td>
-                            <td>null</td>
-                            <td>Number of total records, defaults to length of value when not defined.</td>
-                        </tr>
-                        <tr>
-                            <td>paginator</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When specified as true, enables the pagination.</td>
-                        </tr>
-                        <tr>
-                            <td>paginatorPosition</td>
-                            <td>string</td>
-                            <td>bottom</td>
-                            <td>Position of the paginator, options are "top","bottom" or "both".</td>
-                        </tr>
-                        <tr>
-                            <td>alwaysShowPaginator</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether to show it even there is only one page.</td>
-                        </tr>
-                        <tr>
-                            <td>paginatorTemplate</td>
-                            <td>string</td>
-                            <td>FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown</td>
-                            <td>Template of the paginator. See the <nuxt-link to="/paginator">Paginator</nuxt-link> for all available options.</td>
-                        </tr>
-                        <tr>
-                            <td>pageLinkSize</td>
-                            <td>number</td>
-                            <td>5</td>
-                            <td>Number of page links to display.</td>
-                        </tr>
-                        <tr>
-                            <td>rowsPerPageOptions</td>
-                            <td>array</td>
-                            <td>null</td>
-                            <td>Array of integer values to display inside rows per page dropdown.</td>
-                        </tr>
-                        <tr>
-                            <td>currentPageReportTemplate</td>
-                            <td>string</td>
-                            <td>({currentPage} of {totalPages})</td>
-                            <td>Template of the current page report element.</td>
-                        </tr>
-                        <tr>
-                            <td>sortField</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Property name or a getter function of data to use in sorting by default.</td>
-                        </tr>
-                        <tr>
-                            <td>sortOrder</td>
-                            <td>number</td>
-                            <td>null</td>
-                            <td>Order to sort the data by default.</td>
-                        </tr>
-                        <tr>
-                            <td>lazy</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Defines if data is loaded and interacted with in lazy manner.</td>
-                        </tr>
-                        <tr>
-                            <td>dataKey</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Name of the data that uniquely identifies the a record in the data.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>value</td>
+                        <td>array</td>
+                        <td>null</td>
+                        <td>An array of objects to display.</td>
+                    </tr>
+                    <tr>
+                        <td>layout</td>
+                        <td>string</td>
+                        <td>list</td>
+                        <td>Layout of the items, valid values are "list" and "grid".</td>
+                    </tr>
+                    <tr>
+                        <td>rows</td>
+                        <td>number</td>
+                        <td>0</td>
+                        <td>Number of rows to display per page.</td>
+                    </tr>
+                    <tr>
+                        <td>first</td>
+                        <td>number</td>
+                        <td>0</td>
+                        <td>Index of the first record to render.</td>
+                    </tr>
+                    <tr>
+                        <td>totalRecords</td>
+                        <td>number</td>
+                        <td>null</td>
+                        <td>Number of total records, defaults to length of value when not defined.</td>
+                    </tr>
+                    <tr>
+                        <td>paginator</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When specified as true, enables the pagination.</td>
+                    </tr>
+                    <tr>
+                        <td>paginatorPosition</td>
+                        <td>string</td>
+                        <td>bottom</td>
+                        <td>Position of the paginator, options are "top","bottom" or "both".</td>
+                    </tr>
+                    <tr>
+                        <td>alwaysShowPaginator</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Whether to show it even there is only one page.</td>
+                    </tr>
+                    <tr>
+                        <td>paginatorTemplate</td>
+                        <td>string</td>
+                        <td>FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown</td>
+                        <td>Template of the paginator. See the <router-link to="/paginator">Paginator</router-link> for all available options.</td>
+                    </tr>
+                    <tr>
+                        <td>pageLinkSize</td>
+                        <td>number</td>
+                        <td>5</td>
+                        <td>Number of page links to display.</td>
+                    </tr>
+                    <tr>
+                        <td>rowsPerPageOptions</td>
+                        <td>array</td>
+                        <td>null</td>
+                        <td>Array of integer values to display inside rows per page dropdown.</td>
+                    </tr>
+                    <tr>
+                        <td>currentPageReportTemplate</td>
+                        <td>string</td>
+                        <td>({currentPage} of {totalPages})</td>
+                        <td>Template of the current page report element.</td>
+                    </tr>
+                    <tr>
+                        <td>sortField</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Property name or a getter function of data to use in sorting by default.</td>
+                    </tr>
+                    <tr>
+                        <td>sortOrder</td>
+                        <td>number</td>
+                        <td>null</td>
+                        <td>Order to sort the data by default.</td>
+                    </tr>
+                    <tr>
+                        <td>lazy</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Defines if data is loaded and interacted with in lazy manner.</td>
+                    </tr>
+                    <tr>
+                        <td>dataKey</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Name of the data that uniquely identifies the a record in the data.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Events</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>page</td>
-                            <td>
-                                event.page: New page number <br />
-                                event.first: Index of first record <br />
-                                event.rows: Number of rows to display in new page <br />
-                                event.pageCount: Total number of pages
-                            </td>
-                            <td>Callback to invoke when page changes, the event object contains information about the new state.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Events</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>page</td>
+                        <td>
+                            event.page: New page number <br />
+                            event.first: Index of first record <br />
+                            event.rows: Number of rows to display in new page <br />
+                            event.pageCount: Total number of pages
+                        </td>
+                        <td>Callback to invoke when page changes, the event object contains information about the new state.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Slots</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>header</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>paginatorstart</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>paginatorend</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>list</td>
-                            <td>
-                                data: Value of the component <br />
-                                index: Index of the list
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>grid</td>
-                            <td>
-                                data: Value of the component <br />
-                                index: Index of the grid
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>empty</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>footer</td>
-                            <td>-</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Slots</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>header</td>
+                        <td>-</td>
+                    </tr>
+                    <tr>
+                        <td>paginatorstart</td>
+                        <td>-</td>
+                    </tr>
+                    <tr>
+                        <td>paginatorend</td>
+                        <td>-</td>
+                    </tr>
+                    <tr>
+                        <td>list</td>
+                        <td>
+                            data: Value of the component <br />
+                            index: Index of the list
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>grid</td>
+                        <td>
+                            data: Value of the component <br />
+                            index: Index of the grid
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>empty</td>
+                        <td>-</td>
+                    </tr>
+                    <tr>
+                        <td>footer</td>
+                        <td>-</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-dataview</td>
-                            <td>Container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-dataview-list</td>
-                            <td>Container element in list layout.</td>
-                        </tr>
-                        <tr>
-                            <td>p-dataview-grid</td>
-                            <td>Container element in grid layout.</td>
-                        </tr>
-                        <tr>
-                            <td>p-dataview-header</td>
-                            <td>Header section.</td>
-                        </tr>
-                        <tr>
-                            <td>p-dataview-footer</td>
-                            <td>Footer section.</td>
-                        </tr>
-                        <tr>
-                            <td>p-dataview-content</td>
-                            <td>Container of items.</td>
-                        </tr>
-                        <tr>
-                            <td>p-dataview-emptymessage</td>
-                            <td>Empty message element.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-dataview</td>
+                        <td>Container element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-dataview-list</td>
+                        <td>Container element in list layout.</td>
+                    </tr>
+                    <tr>
+                        <td>p-dataview-grid</td>
+                        <td>Container element in grid layout.</td>
+                    </tr>
+                    <tr>
+                        <td>p-dataview-header</td>
+                        <td>Header section.</td>
+                    </tr>
+                    <tr>
+                        <td>p-dataview-footer</td>
+                        <td>Footer section.</td>
+                    </tr>
+                    <tr>
+                        <td>p-dataview-content</td>
+                        <td>Container of items.</td>
+                    </tr>
+                    <tr>
+                        <td>p-dataview-emptymessage</td>
+                        <td>Empty message element.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>PrimeFlex</p>
-        </AppDoc>
-    </ClientOnly>
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>
+            The container element that wraps the layout options buttons has a <i>group</i> role whereas each button element uses <i>button</i> role and <i>aria-pressed</i> is updated depending on selection state. Values to describe the buttons are
+            derived from the <i>aria.listView</i> and <i>aria.gridView</i> properties of the <router-link to="/locale">locale</router-link> API respectively.
+        </p>
+
+        <p>Refer to <router-link to="/paginator">paginator</router-link> accessibility documentation for the paginator of the component.</p>
+
+        <h6>Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>tab</i>
+                        </td>
+                        <td>Moves focus to the buttons.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>Toggles the checked state of a button.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h5>Dependencies</h5>
+        <p>PrimeFlex</p>
+    </AppDoc>
 </template>
 
 <script>
diff --git a/pages/dataview/index.vue b/pages/dataview/index.vue
index 817719aaf..278dd408b 100755
--- a/pages/dataview/index.vue
+++ b/pages/dataview/index.vue
@@ -25,7 +25,7 @@
                     <template #list="slotProps">
                         <div class="col-12">
                             <div class="product-list-item">
-                                <img :src="'/demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" />
+                                <img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" />
                                 <div class="product-list-detail">
                                     <div class="product-name">{{ slotProps.data.name }}</div>
                                     <div class="product-description">{{ slotProps.data.description }}</div>
@@ -52,7 +52,7 @@
                                     <span :class="'product-badge status-' + slotProps.data.inventoryStatus.toLowerCase()">{{ slotProps.data.inventoryStatus }}</span>
                                 </div>
                                 <div class="product-grid-item-content">
-                                    <img :src="'/demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" />
+                                    <img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" />
                                     <div class="product-name">{{ slotProps.data.name }}</div>
                                     <div class="product-description">{{ slotProps.data.description }}</div>
                                     <Rating :modelValue="slotProps.data.rating" :readonly="true" :cancel="false"></Rating>
diff --git a/pages/deferredcontent/DeferredContentDoc.vue b/pages/deferredcontent/DeferredContentDoc.vue
index 038b628ee..9f8db514b 100755
--- a/pages/deferredcontent/DeferredContentDoc.vue
+++ b/pages/deferredcontent/DeferredContentDoc.vue
@@ -1,22 +1,21 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="DeferredContentDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="deferredcontent/DeferredContentDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="DeferredContentDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="deferredcontent/DeferredContentDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import DeferredContent from 'primevue/deferredcontent';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/deferredcontent/deferredcontent.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p>DeferredContent is used as a wrapper element of its content..</p>
-            <pre v-code><code><template v-pre>
+        <h5>Getting Started</h5>
+        <p>DeferredContent is used as a wrapper element of its content..</p>
+        <pre v-code><code><template v-pre>
 &lt;DeferredContent&gt;
     &lt;DataTable :value="cars"&gt;
         &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
@@ -28,9 +27,9 @@ import DeferredContent from 'primevue/deferredcontent';
 </template>
 </code></pre>
 
-            <h5>Load Event</h5>
-            <p>onLoad callback is useful to initialize the content when it becomes visible on scroll such as loading data.</p>
-            <pre v-code><code><template v-pre>
+        <h5>Load Event</h5>
+        <p>onLoad callback is useful to initialize the content when it becomes visible on scroll such as loading data.</p>
+        <pre v-code><code><template v-pre>
 &lt;DeferredContent @load="onDataLoad"&gt;
     &lt;DataTable :value="cars"&gt;
         &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
@@ -42,55 +41,52 @@ import DeferredContent from 'primevue/deferredcontent';
 </template>
 </code></pre>
 
-            <h5>Properties</h5>
-            <p>Component has no properties.</p>
+        <h5>Properties</h5>
+        <p>Component has no properties.</p>
 
-            <h5>Events</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>load</td>
-                            <td>event: Event object</td>
-                            <td>Callback to invoke when deferred content is loaded..</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Events</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>load</td>
+                        <td>event: Event object</td>
+                        <td>Callback to invoke when deferred content is loaded..</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Component does not apply any styling.</p>
+        <h5>Styling</h5>
+        <p>Component does not apply any styling.</p>
 
-            <h5>Accessibility</h5>
-            <DevelopmentSection>
-                <h6>Screen Reader</h6>
-                <p>
-                    DeferredContent can be utilized in many use cases as a result no role is enforced, in fact a role may not be necessary if the card is used for presentational purposes only. Any valid attribute is passed to the container element so
-                    you have full control over the roles like <a href="https://www.w3.org/TR/wai-aria/#landmark" alt="Landmark Roles">landmark</a> and attributes like <i>aria-live</i>.
-                </p>
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>
+            DeferredContent can be utilized in many use cases as a result no role is enforced, in fact a role may not be necessary if the card is used for presentational purposes only. Any valid attribute is passed to the container element so you
+            have full control over the roles like <a href="https://www.w3.org/TR/wai-aria/#landmark" alt="Landmark Roles">landmark</a> and attributes like <i>aria-live</i>.
+        </p>
 
-                <pre v-code><code>
+        <pre v-code><code>
 &lt;DeferredContent role="region" aria-live="polite" aria-label="Content loaded after page scrolled down"&gt;
     Content
 &lt;/DeferredContent&gt;
 
 </code></pre>
 
-                <h5>Keyboard Support</h5>
-                <p>Component does not include any interactive elements.</p>
-            </DevelopmentSection>
+        <h5>Keyboard Support</h5>
+        <p>Component does not include any interactive elements.</p>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc>
-    </ClientOnly>
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
diff --git a/pages/deferredcontent/index.vue b/pages/deferredcontent/index.vue
index 7e6301bc8..ffb3341f5 100755
--- a/pages/deferredcontent/index.vue
+++ b/pages/deferredcontent/index.vue
@@ -13,7 +13,7 @@
                 <div style="height: 800px">Scroll down to lazy load an image and the DataTable which initiates a query that is not executed on initial page load to speed up load performance.</div>
 
                 <!-- <DeferredContent @load="onImageLoad">
-                    <img src="/demo/images/nature/nature4.jpg" alt="Nature"/>
+                    <img src="demo/images/nature/nature4.jpg" alt="Nature"/>
                 </DeferredContent> -->
 
                 <div style="height: 500px"></div>
diff --git a/pages/dialog/DialogDoc.vue b/pages/dialog/DialogDoc.vue
index 45762960c..dff18a982 100755
--- a/pages/dialog/DialogDoc.vue
+++ b/pages/dialog/DialogDoc.vue
@@ -1,28 +1,27 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="DialogDemo" :sources="sources" github="dialog/DialogDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="DialogDemo" :sources="sources" github="dialog/DialogDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import Dialog from 'primevue/dialog';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p>Dialog is used as a container and visibility is managed with <i>visible</i> property that requires the v-model for two-way binding.</p>
-            <pre v-code><code>
+        <h5>Getting Started</h5>
+        <p>Dialog is used as a container and visibility is managed with <i>visible</i> property that requires the v-model for two-way binding.</p>
+        <pre v-code><code>
 &lt;Dialog header="Header" v-model:visible="display" &gt;
 	Content
 &lt;/Dialog&gt;
 
 </code></pre>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 export default {
 	data() {
 		return {
@@ -33,16 +32,16 @@ export default {
 
 </code></pre>
 
-            <h5>Header and Footer</h5>
-            <p>Header and Footer sections are defined using properties with the same name that accept simple strings or with the <i>header</i> and <i>footer</i> templates for custom content.</p>
-            <pre v-code><code>
+        <h5>Header and Footer</h5>
+        <p>Header and Footer sections are defined using properties with the same name that accept simple strings or with the <i>header</i> and <i>footer</i> templates for custom content.</p>
+        <pre v-code><code>
 &lt;Dialog header="Header" footer="Footer" v-model:visible="display"&gt;
 	Content
 &lt;/Dialog&gt;
 
 </code></pre>
 
-            <pre v-code><code>
+        <pre v-code><code>
 &lt;Dialog v-model:visible="display"&gt;
     &lt;template #header&gt;
 		&lt;h3&gt;Header&lt;/h3&gt;
@@ -58,31 +57,31 @@ export default {
 
 </code></pre>
 
-            <h5>Positioning</h5>
-            <p>Dialog location is controlled with the <i>position</i> property whose default value is center. Other valid values are top", "bottom", "left", "right", "topleft", "topright", "bottomleft" and "bottomright".</p>
-            <pre v-code><code>
+        <h5>Positioning</h5>
+        <p>Dialog location is controlled with the <i>position</i> property whose default value is center. Other valid values are top", "bottom", "left", "right", "topleft", "topright", "bottomleft" and "bottomright".</p>
+        <pre v-code><code>
 &lt;Dialog position="top" v-model:visible="display"&gt;
 	Content
 &lt;/Dialog&gt;
 
 </code></pre>
 
-            <h5>Responsive</h5>
-            <p>
-                Dialog width can be adjusted per screen size with the <i>breakpoints</i> option. In example below, default width is set to 50vw and below 961px, width would be 75vw and finally below 641px width becomes 100%. The value of
-                <i>breakpoints</i> should be an object literal whose keys are the maximum screen sizes and values are the widths per screen.
-            </p>
+        <h5>Responsive</h5>
+        <p>
+            Dialog width can be adjusted per screen size with the <i>breakpoints</i> option. In example below, default width is set to 50vw and below 961px, width would be 75vw and finally below 641px width becomes 100%. The value of
+            <i>breakpoints</i> should be an object literal whose keys are the maximum screen sizes and values are the widths per screen.
+        </p>
 
-            <pre v-code><code>
+        <pre v-code><code>
 &lt;Dialog v-model:visible="display" :breakpoints="{'960px': '75vw', '640px': '100vw'}" :style="{width: '50vw'}"&gt;
 	Content
 &lt;/Dialog&gt;
 
 </code></pre>
 
-            <h5>Initial Focus</h5>
-            <p>Adding <i>autofocus</i> to an element in the dialog makes it the initial focus target when dialog gets shown.</p>
-            <pre v-code><code>
+        <h5>Initial Focus</h5>
+        <p>Adding <i>autofocus</i> to an element in the dialog makes it the initial focus target when dialog gets shown.</p>
+        <pre v-code><code>
 &lt;Dialog v-model:visible="display"&gt;
     Content
 	&lt;template #footer&gt;
@@ -93,264 +92,368 @@ export default {
 
 </code></pre>
 
-            <h5>Properties</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>header</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Title content of the dialog.</td>
-                        </tr>
-                        <tr>
-                            <td>footer</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Footer content of the dialog.</td>
-                        </tr>
-                        <tr>
-                            <td>visible</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Specifies the visibility of the dialog.</td>
-                        </tr>
-                        <tr>
-                            <td>modal</td>
-                            <td>boolean</td>
-                            <td>null</td>
-                            <td>Defines if background should be blocked when dialog is displayed.</td>
-                        </tr>
-                        <tr>
-                            <td>closeOnEscape</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Specifies if pressing escape key should hide the dialog.</td>
-                        </tr>
-                        <tr>
-                            <td>dismissableMask</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Specifies if clicking the modal background should hide the dialog.</td>
-                        </tr>
-                        <tr>
-                            <td>position</td>
-                            <td>string</td>
-                            <td>center</td>
-                            <td>Position of the dialog, options are "center", "top", "bottom", "left", "right", "topleft", "topright", "bottomleft" or "bottomright".</td>
-                        </tr>
-                        <tr>
-                            <td>contentStyle</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Style of the content section.</td>
-                        </tr>
-                        <tr>
-                            <td>contentClass</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the content section.</td>
-                        </tr>
-                        <tr>
-                            <td>rtl</td>
-                            <td>boolean</td>
-                            <td>null</td>
-                            <td>When enabled dialog is displayed in RTL direction.</td>
-                        </tr>
-                        <tr>
-                            <td>closable</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Adds a close icon to the header to hide the dialog.</td>
-                        </tr>
-                        <tr>
-                            <td>showHeader</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether to show the header or not.</td>
-                        </tr>
-                        <tr>
-                            <td>baseZIndex</td>
-                            <td>number</td>
-                            <td>0</td>
-                            <td>Base zIndex value to use in layering.</td>
-                        </tr>
-                        <tr>
-                            <td>autoZIndex</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether to automatically manage layering.</td>
-                        </tr>
-                        <tr>
-                            <td>ariaCloseLabel</td>
-                            <td>string</td>
-                            <td>close</td>
-                            <td>Aria label of the close icon.</td>
-                        </tr>
-                        <tr>
-                            <td>maximizable</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Whether the dialog can be displayed full screen.</td>
-                        </tr>
-                        <tr>
-                            <td>breakpoints</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Object literal to define widths per screen size.</td>
-                        </tr>
-                        <tr>
-                            <td>draggable</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Enables dragging to change the position using header.</td>
-                        </tr>
-                        <tr>
-                            <td>minX</td>
-                            <td>number</td>
-                            <td>0</td>
-                            <td>Minimum value for the left coordinate of dialog in dragging.</td>
-                        </tr>
-                        <tr>
-                            <td>minY</td>
-                            <td>number</td>
-                            <td>0</td>
-                            <td>Minimum value for the top coordinate of dialog in dragging.</td>
-                        </tr>
-                        <tr>
-                            <td>keepInViewport</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Keeps dialog in the viewport when dragging.</td>
-                        </tr>
-                        <tr>
-                            <td>appendTo</td>
-                            <td>string</td>
-                            <td>body</td>
-                            <td>A valid query selector or an HTMLElement to specify where the dialog gets attached. Special keywords are "body" for document body and "self" for the element itself.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>header</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Title content of the dialog.</td>
+                    </tr>
+                    <tr>
+                        <td>footer</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Footer content of the dialog.</td>
+                    </tr>
+                    <tr>
+                        <td>visible</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Specifies the visibility of the dialog.</td>
+                    </tr>
+                    <tr>
+                        <td>modal</td>
+                        <td>boolean</td>
+                        <td>null</td>
+                        <td>Defines if background should be blocked when dialog is displayed.</td>
+                    </tr>
+                    <tr>
+                        <td>closeOnEscape</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Specifies if pressing escape key should hide the dialog.</td>
+                    </tr>
+                    <tr>
+                        <td>dismissableMask</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Specifies if clicking the modal background should hide the dialog.</td>
+                    </tr>
+                    <tr>
+                        <td>position</td>
+                        <td>string</td>
+                        <td>center</td>
+                        <td>Position of the dialog, options are "center", "top", "bottom", "left", "right", "topleft", "topright", "bottomleft" or "bottomright".</td>
+                    </tr>
+                    <tr>
+                        <td>contentStyle</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Style of the content section.</td>
+                    </tr>
+                    <tr>
+                        <td>contentClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the content section.</td>
+                    </tr>
+                    <tr>
+                        <td>contentProps</td>
+                        <td>null</td>
+                        <td>null</td>
+                        <td>Uses to pass all properties of the HTMLDivElement to the overlay panel inside the component.</td>
+                    </tr>
+                    <tr>
+                        <td>rtl</td>
+                        <td>boolean</td>
+                        <td>null</td>
+                        <td>When enabled dialog is displayed in RTL direction.</td>
+                    </tr>
+                    <tr>
+                        <td>closable</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Adds a close icon to the header to hide the dialog.</td>
+                    </tr>
+                    <tr>
+                        <td>showHeader</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Whether to show the header or not.</td>
+                    </tr>
+                    <tr>
+                        <td>baseZIndex</td>
+                        <td>number</td>
+                        <td>0</td>
+                        <td>Base zIndex value to use in layering.</td>
+                    </tr>
+                    <tr>
+                        <td>autoZIndex</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Whether to automatically manage layering.</td>
+                    </tr>
+                    <tr>
+                        <td style="text-decoration: line-through">ariaCloseLabel</td>
+                        <td>string</td>
+                        <td>close</td>
+                        <td>
+                            Aria label of the close icon.
+                            <br />
+                            <b> Deprecated: </b> <i>aria.close</i> can be used in defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>maximizable</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Whether the dialog can be displayed full screen.</td>
+                    </tr>
+                    <tr>
+                        <td>breakpoints</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Object literal to define widths per screen size.</td>
+                    </tr>
+                    <tr>
+                        <td>draggable</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Enables dragging to change the position using header.</td>
+                    </tr>
+                    <tr>
+                        <td>minX</td>
+                        <td>number</td>
+                        <td>0</td>
+                        <td>Minimum value for the left coordinate of dialog in dragging.</td>
+                    </tr>
+                    <tr>
+                        <td>minY</td>
+                        <td>number</td>
+                        <td>0</td>
+                        <td>Minimum value for the top coordinate of dialog in dragging.</td>
+                    </tr>
+                    <tr>
+                        <td>keepInViewport</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Keeps dialog in the viewport when dragging.</td>
+                    </tr>
+                    <tr>
+                        <td>appendTo</td>
+                        <td>string</td>
+                        <td>body</td>
+                        <td>A valid query selector or an HTMLElement to specify where the dialog gets attached. Special keywords are "body" for document body and "self" for the element itself.</td>
+                    </tr>
+                    <tr>
+                        <td>closeIcon</td>
+                        <td>string</td>
+                        <td>pi pi-times</td>
+                        <td>Icon to display in the dialog close button.</td>
+                    </tr>
+                    <tr>
+                        <td>maximizeIcon</td>
+                        <td>string</td>
+                        <td>pi pi-window-maximize</td>
+                        <td>Icon to display in the dialog maximize button when dialog is not maximized.</td>
+                    </tr>
+                    <tr>
+                        <td>minimizeIcon</td>
+                        <td>string</td>
+                        <td>pi pi-window-minimize</td>
+                        <td>Icon to display in the dialog maximize button when dialog is maximized.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Events</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>hide</td>
-                            <td>-</td>
-                            <td>Callback to invoke when dialog is hidden.</td>
-                        </tr>
-                        <tr>
-                            <td>after-hide</td>
-                            <td>-</td>
-                            <td>Callback to invoke after dialog is hidden.</td>
-                        </tr>
-                        <tr>
-                            <td>show</td>
-                            <td>-</td>
-                            <td>Callback to invoke when dialog is showed.</td>
-                        </tr>
-                        <tr>
-                            <td>maximize</td>
-                            <td>event: Event object</td>
-                            <td>Fired when a dialog gets maximized.</td>
-                        </tr>
-                        <tr>
-                            <td>unmaximize</td>
-                            <td>event: Event object</td>
-                            <td>Fired when a dialog gets unmaximized.</td>
-                        </tr>
-                        <tr>
-                            <td>dragend</td>
-                            <td>event: Event object</td>
-                            <td>Fired when a dialog drag completes..</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Events</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>hide</td>
+                        <td>-</td>
+                        <td>Callback to invoke when dialog is hidden.</td>
+                    </tr>
+                    <tr>
+                        <td>after-hide</td>
+                        <td>-</td>
+                        <td>Callback to invoke after dialog is hidden.</td>
+                    </tr>
+                    <tr>
+                        <td>show</td>
+                        <td>-</td>
+                        <td>Callback to invoke when dialog is showed.</td>
+                    </tr>
+                    <tr>
+                        <td>maximize</td>
+                        <td>event: Event object</td>
+                        <td>Fired when a dialog gets maximized.</td>
+                    </tr>
+                    <tr>
+                        <td>unmaximize</td>
+                        <td>event: Event object</td>
+                        <td>Fired when a dialog gets unmaximized.</td>
+                    </tr>
+                    <tr>
+                        <td>dragend</td>
+                        <td>event: Event object</td>
+                        <td>Fired when a dialog drag completes..</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Slots</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>header</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>footer</td>
-                            <td>-</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Slots</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>header</td>
+                        <td>-</td>
+                    </tr>
+                    <tr>
+                        <td>footer</td>
+                        <td>-</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-dialog</td>
-                            <td>Container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-dialog-titlebar</td>
-                            <td>Container of header.</td>
-                        </tr>
-                        <tr>
-                            <td>p-dialog-title</td>
-                            <td>Header element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-dialog-titlebar-icon</td>
-                            <td>Icon container inside header.</td>
-                        </tr>
-                        <tr>
-                            <td>p-dialog-titlebar-close</td>
-                            <td>Close icon element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-dialog-content</td>
-                            <td>Content element</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-dialog</td>
+                        <td>Container element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-dialog-titlebar</td>
+                        <td>Container of header.</td>
+                    </tr>
+                    <tr>
+                        <td>p-dialog-title</td>
+                        <td>Header element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-dialog-titlebar-icon</td>
+                        <td>Icon container inside header.</td>
+                    </tr>
+                    <tr>
+                        <td>p-dialog-titlebar-close</td>
+                        <td>Close icon element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-dialog-content</td>
+                        <td>Content element</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc>
-    </ClientOnly>
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>
+            Dialog component uses <i>dialog</i> role along with <i>aria-labelledby</i> referring to the header element however any attribute is passed to the root element so you may use <i>aria-labelledby</i> to override this default behavior. In
+            addition <i>aria-modal</i> is added since focus is kept within the popup.
+        </p>
+        <p>Trigger element also requires <i>aria-expanded</i> and <i>aria-controls</i> to be handled explicitly.</p>
+        <p>
+            Close element is a <i>button</i> with an <i>aria-label</i> that refers to the <i>aria.close</i> property of the <router-link to="/locale">locale</router-link> API by default, you may use <i>closeButtonProps</i> to customize the element
+            and override the default <i>aria-label</i>.
+        </p>
+
+        <pre v-code><code>
+&lt;Button label="Show" icon="pi pi-external-link" @click="visible = true" :aria-controls="visible ? 'dlg' : null" :aria-expanded="visible ? true : false" /&gt;
+
+&lt;Dialog id="dlg" header="Header" v-model:visible="visible" :style="{ width: '50vw' }"&gt;
+    &lt;p&gt;Content&lt;/p&gt;
+&lt;/Dialog&gt;
+
+</code></pre>
+
+        <h6>Overlay Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>tab</i>
+                        </td>
+                        <td>Moves focus to the next the focusable element within the dialog if <i>modal</i> is true. Otherwise, the focusable element in the page tab sequence.</td>
+                    </tr>
+                    <tr>
+                        <td><i>shift</i> + <i>tab</i></td>
+                        <td>Moves focus to the previous the focusable element within the dialog if <i>modal</i> is true. Otherwise, the focusable element in the page tab sequence.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>escape</i>
+                        </td>
+                        <td>Closes the dialog if <i>closeOnEscape</i> is true.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h6>Close Button Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>Closes the dialog.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>Closes the dialog.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
@@ -378,20 +481,28 @@ export default {
 
         <Button label="Long Content" icon="pi pi-external-link" @click="openBasic2" />
         <Dialog header="Header" v-model:visible="displayBasic2" :breakpoints="{'960px': '75vw', '640px': '90vw'}" :style="{width: '50vw'}">
-            <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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-                culpa qui officia deserunt mollit anim id est laborum.</p>
-
-            <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
-                dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est,
-                qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam,
-                quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur,
-                vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
-
-            <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident,
-                similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio
-                cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe
-                eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
+            <div v-for="i in 2" :key="i">
+                <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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+                    laborum.
+                </p>
+                <br />
+                <p>
+                    "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
+                    enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
+                    consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam,
+                    nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+                </p>
+                <br />
+                <p>
+                    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
+                    culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id
+                    quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et
+                    molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
+                </p>
+                <br />
+            </div>
             <template #footer>
                 <Button label="No" icon="pi pi-times" @click="closeBasic2" class="p-button-text"/>
                 <Button label="Yes" icon="pi pi-check" @click="closeBasic2" autofocus />
@@ -581,20 +692,28 @@ p {
 
         <Button label="Long Content" icon="pi pi-external-link" @click="openBasic2" />
         <Dialog header="Header" v-model:visible="displayBasic2" :breakpoints="{'960px': '75vw', '640px': '90vw'}" :style="{width: '50vw'}">
-            <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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-                culpa qui officia deserunt mollit anim id est laborum.</p>
-
-            <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
-                dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est,
-                qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam,
-                quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur,
-                vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
-
-            <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident,
-                similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio
-                cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe
-                eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
+            <div v-for="i in 2" :key="i">
+                <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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+                    laborum.
+                </p>
+                <br />
+                <p>
+                    "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
+                    enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
+                    consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam,
+                    nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+                </p>
+                <br />
+                <p>
+                    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
+                    culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id
+                    quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et
+                    molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
+                </p>
+                <br />
+            </div>
             <template #footer>
                 <Button label="No" icon="pi pi-times" @click="closeBasic2" class="p-button-text"/>
                 <Button label="Yes" icon="pi pi-check" @click="closeBasic2" autofocus />
@@ -785,20 +904,28 @@ p {
 
             <p-button label="Long Content" icon="pi pi-external-link" @click="openBasic2"></p-button>
             <p-dialog header="Header" v-model:visible="displayBasic2" :breakpoints="{'960px': '75vw', '640px': '90vw'}" :style="{width: '50vw'}">
-                <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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-                    culpa qui officia deserunt mollit anim id est laborum.</p>
-
-                <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
-                    dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est,
-                    qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam,
-                    quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur,
-                    vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
-
-                <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident,
-                    similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio
-                    cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe
-                    eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
+                <div v-for="i in 2" :key="i">
+                    <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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+                        laborum.
+                    </p>
+                    <br />
+                    <p>
+                        "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
+                        enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
+                        consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam,
+                        nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+                    </p>
+                    <br />
+                    <p>
+                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
+                        culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id
+                        quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et
+                        molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
+                    </p>
+                    <br />
+                </div>
                 <template #footer>
                     <p-button label="No" icon="pi pi-times" @click="closeBasic2" class="p-button-text"></p-button>
                     <p-button label="Yes" icon="pi pi-check" @click="closeBasic2" autofocus></p-button>
diff --git a/pages/dialog/index.vue b/pages/dialog/index.vue
index 437a0e97b..2478b5259 100755
--- a/pages/dialog/index.vue
+++ b/pages/dialog/index.vue
@@ -12,7 +12,7 @@
             <div class="card">
                 <h5>Basic</h5>
                 <Button label="Show" icon="pi pi-external-link" @click="openBasic" />
-                <Dialog header="Header" v-model:visible="displayBasic" :breakpoints="{ '960px': '75vw', '640px': '90vw' }" :style="{ width: '50vw' }">
+                <Dialog v-model:visible="displayBasic" header="Header" :breakpoints="{ '960px': '75vw', '640px': '90vw' }" :style="{ width: '50vw' }">
                     <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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
@@ -24,25 +24,29 @@
                 </Dialog>
 
                 <Button label="Long Content" icon="pi pi-external-link" @click="openBasic2" />
-                <Dialog header="Header" v-model:visible="displayBasic2" :breakpoints="{ '960px': '75vw', '640px': '90vw' }" :style="{ width: '50vw' }">
-                    <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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                    </p>
-
-                    <p>
-                        "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
-                        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,
-                        adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid
-                        ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
-                    </p>
-
-                    <p>
-                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
-                        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod
-                        maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae
-                        non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
-                    </p>
+                <Dialog v-model:visible="displayBasic2" header="Header" :breakpoints="{ '960px': '75vw', '640px': '90vw' }" :style="{ width: '50vw' }">
+                    <div v-for="i in 2" :key="i">
+                        <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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+                            laborum.
+                        </p>
+                        <br />
+                        <p>
+                            "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
+                            enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
+                            consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam,
+                            nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+                        </p>
+                        <br />
+                        <p>
+                            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
+                            culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id
+                            quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et
+                            molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
+                        </p>
+                        <br />
+                    </div>
                     <template #footer>
                         <Button label="No" icon="pi pi-times" @click="closeBasic2" class="p-button-text" />
                         <Button label="Yes" icon="pi pi-check" @click="closeBasic2" autofocus />
@@ -51,7 +55,7 @@
 
                 <h5>Modal</h5>
                 <Button label="Show" icon="pi pi-external-link" @click="openModal" />
-                <Dialog header="Header" v-model:visible="displayModal" :breakpoints="{ '960px': '75vw', '640px': '90vw' }" :style="{ width: '50vw' }" :modal="true">
+                <Dialog v-model:visible="displayModal" header="Header" :breakpoints="{ '960px': '75vw', '640px': '90vw' }" :style="{ width: '50vw' }" :modal="true">
                     <p class="m-0">
                         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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
@@ -64,7 +68,7 @@
 
                 <h5>Responsive</h5>
                 <Button label="Show" icon="pi pi-external-link" @click="openResponsive" />
-                <Dialog header="Header" v-model:visible="displayResponsive" :breakpoints="{ '960px': '75vw', '640px': '90vw' }" :style="{ width: '50vw' }">
+                <Dialog v-model:visible="displayResponsive" header="Header" :breakpoints="{ '960px': '75vw', '640px': '90vw' }" :style="{ width: '50vw' }">
                     <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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
@@ -77,7 +81,7 @@
 
                 <h5>Confirmation</h5>
                 <Button label="Confirm" icon="pi pi-external-link" @click="openConfirmation" />
-                <Dialog header="Confirmation" v-model:visible="displayConfirmation" :breakpoints="{ '960px': '75vw', '640px': '90vw' }" :style="{ width: '350px' }" :modal="true">
+                <Dialog v-model:visible="displayConfirmation" header="Confirmation" :breakpoints="{ '960px': '75vw', '640px': '90vw' }" :style="{ width: '350px' }" :modal="true">
                     <div class="confirmation-content">
                         <i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem" />
                         <span>Are you sure you want to proceed?</span>
@@ -90,7 +94,7 @@
 
                 <h5>Maximizable</h5>
                 <Button label="Show" icon="pi pi-external-link" @click="openMaximizable" />
-                <Dialog header="Header" v-model:visible="displayMaximizable" :breakpoints="{ '960px': '75vw', '640px': '90vw' }" :style="{ width: '50vw' }" :maximizable="true" :modal="true">
+                <Dialog v-model:visible="displayMaximizable" header="Header" :breakpoints="{ '960px': '75vw', '640px': '90vw' }" :style="{ width: '50vw' }" :maximizable="true" :modal="true">
                     <p class="m-0">
                         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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
@@ -119,7 +123,7 @@
                     </div>
                 </div>
 
-                <Dialog header="Header" v-model:visible="displayPosition" :breakpoints="{ '960px': '75vw', '640px': '90vw' }" :style="{ width: '50vw' }" :position="position" :modal="true">
+                <Dialog v-model:visible="displayPosition" header="Header" :breakpoints="{ '960px': '75vw', '640px': '90vw' }" :style="{ width: '50vw' }" :position="position" :modal="true">
                     <p class="m-0">
                         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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
diff --git a/pages/divider/DividerDoc.vue b/pages/divider/DividerDoc.vue
index f20700cf5..89935f9cf 100644
--- a/pages/divider/DividerDoc.vue
+++ b/pages/divider/DividerDoc.vue
@@ -1,40 +1,39 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="DividerDemo" :sources="sources" github="divider/DividerDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="DividerDemo" :sources="sources" github="divider/DividerDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import Divider from 'primevue/divider';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/divider/divider.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p>Divider has two orientations defined with the <i>layout</i> property, default is "horizontal" and the alternative is "vertical".</p>
-            <pre v-code><code>
+        <h5>Getting Started</h5>
+        <p>Divider has two orientations defined with the <i>layout</i> property, default is "horizontal" and the alternative is "vertical".</p>
+        <pre v-code><code>
 &lt;div&gt;Content 1&lt;/div&gt;
 &lt;Divider /&gt;
 &lt;div&gt;Content 2&lt;/div&gt;
 
 </code></pre>
 
-            <h5>Border Style</h5>
-            <p>Style of the border is configured with the <i>type</i> property and supports 3 values; default is "solid" and other possibilities are "dashed" and "dotted".</p>
-            <pre v-code><code>
+        <h5>Border Style</h5>
+        <p>Style of the border is configured with the <i>type</i> property and supports 3 values; default is "solid" and other possibilities are "dashed" and "dotted".</p>
+        <pre v-code><code>
 &lt;div&gt;Content 1&lt;/div&gt;
 &lt;Divider type="dashed"/&gt;
 &lt;div&gt;Content 2&lt;/div&gt;
 
 </code></pre>
 
-            <h5>Vertical Divider</h5>
-            <p>Vertical divider is enabled by setting the <i>layout</i> property as "vertical".</p>
-            <pre v-code><code>
+        <h5>Vertical Divider</h5>
+        <p>Vertical divider is enabled by setting the <i>layout</i> property as "vertical".</p>
+        <pre v-code><code>
 &lt;div class="flex"&gt;
     &lt;div&gt;Content 1&lt;/div&gt;
     &lt;Divider layout="vertical" /&gt;
@@ -45,12 +44,12 @@ import Divider from 'primevue/divider';
 
 </code></pre>
 
-            <h5>Content</h5>
-            <p>
-                Any content placed inside is rendered within the boundaries of the divider. In addition, location of the content is configured with the <i>align</i> property. In horizontal layout, alignment options are "left", "center" and "right"
-                whereas vertical mode supports "top", "center" and "bottom".
-            </p>
-            <pre v-code><code>
+        <h5>Content</h5>
+        <p>
+            Any content placed inside is rendered within the boundaries of the divider. In addition, location of the content is configured with the <i>align</i> property. In horizontal layout, alignment options are "left", "center" and "right"
+            whereas vertical mode supports "top", "center" and "bottom".
+        </p>
+        <pre v-code><code>
 &lt;div&gt;Content 1&lt;/div&gt;
 
 &lt;Divider align="left"&gt;
@@ -76,113 +75,110 @@ import Divider from 'primevue/divider';
 
 </code></pre>
 
-            <h5>Properties</h5>
-            <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>align</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Alignment of the content, options are "left", "center", "right" for horizontal layout and "top", "center", "bottom" for vertical.</td>
-                        </tr>
-                        <tr>
-                            <td>layout</td>
-                            <td>string</td>
-                            <td>horizontal</td>
-                            <td>Specifies the orientation, valid values are "horizontal" and "vertical".</td>
-                        </tr>
-                        <tr>
-                            <td>type</td>
-                            <td>string</td>
-                            <td>solid</td>
-                            <td>Border style type, default is "solid" and other options are "dashed" and "dotted".</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>align</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Alignment of the content, options are "left", "center", "right" for horizontal layout and "top", "center", "bottom" for vertical.</td>
+                    </tr>
+                    <tr>
+                        <td>layout</td>
+                        <td>string</td>
+                        <td>horizontal</td>
+                        <td>Specifies the orientation, valid values are "horizontal" and "vertical".</td>
+                    </tr>
+                    <tr>
+                        <td>type</td>
+                        <td>string</td>
+                        <td>solid</td>
+                        <td>Border style type, default is "solid" and other options are "dashed" and "dotted".</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-divider</td>
-                            <td>Container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-divider-horizontal</td>
-                            <td>Container element in horizontal layout.</td>
-                        </tr>
-                        <tr>
-                            <td>p-divider-vertical</td>
-                            <td>Container element in vertical layout.</td>
-                        </tr>
-                        <tr>
-                            <td>p-divider-solid</td>
-                            <td>Container element with solid border.</td>
-                        </tr>
-                        <tr>
-                            <td>p-divider-dashed</td>
-                            <td>Container element with dashed border.</td>
-                        </tr>
-                        <tr>
-                            <td>p-divider-dotted</td>
-                            <td>Container element with dotted border.</td>
-                        </tr>
-                        <tr>
-                            <td>p-divider-left</td>
-                            <td>Container element with content aligned to left.</td>
-                        </tr>
-                        <tr>
-                            <td>p-divider-right</td>
-                            <td>Container element with content aligned to right.</td>
-                        </tr>
-                        <tr>
-                            <td>p-divider-center</td>
-                            <td>Container element with content aligned to center.</td>
-                        </tr>
-                        <tr>
-                            <td>p-divider-bottom</td>
-                            <td>Container element with content aligned to bottom.</td>
-                        </tr>
-                        <tr>
-                            <td>p-divider-top</td>
-                            <td>Container element with content aligned to top.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-divider</td>
+                        <td>Container element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-divider-horizontal</td>
+                        <td>Container element in horizontal layout.</td>
+                    </tr>
+                    <tr>
+                        <td>p-divider-vertical</td>
+                        <td>Container element in vertical layout.</td>
+                    </tr>
+                    <tr>
+                        <td>p-divider-solid</td>
+                        <td>Container element with solid border.</td>
+                    </tr>
+                    <tr>
+                        <td>p-divider-dashed</td>
+                        <td>Container element with dashed border.</td>
+                    </tr>
+                    <tr>
+                        <td>p-divider-dotted</td>
+                        <td>Container element with dotted border.</td>
+                    </tr>
+                    <tr>
+                        <td>p-divider-left</td>
+                        <td>Container element with content aligned to left.</td>
+                    </tr>
+                    <tr>
+                        <td>p-divider-right</td>
+                        <td>Container element with content aligned to right.</td>
+                    </tr>
+                    <tr>
+                        <td>p-divider-center</td>
+                        <td>Container element with content aligned to center.</td>
+                    </tr>
+                    <tr>
+                        <td>p-divider-bottom</td>
+                        <td>Container element with content aligned to bottom.</td>
+                    </tr>
+                    <tr>
+                        <td>p-divider-top</td>
+                        <td>Container element with content aligned to top.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Accessibility</h5>
-            <DevelopmentSection>
-                <h6>Screen Reader</h6>
-                <p>Divider uses a <i>separator</i> role with <i>aria-orientation</i> set to either "horizontal" or "vertical".</p>
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>Divider uses a <i>separator</i> role with <i>aria-orientation</i> set to either "horizontal" or "vertical".</p>
 
-                <h5>Keyboard Support</h5>
-                <p>Component does not include any interactive elements.</p>
-            </DevelopmentSection>
+        <h5>Keyboard Support</h5>
+        <p>Component does not include any interactive elements.</p>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc>
-    </ClientOnly>
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
diff --git a/pages/dock/DockDoc.vue b/pages/dock/DockDoc.vue
index 71a193806..ce4383fdb 100644
--- a/pages/dock/DockDoc.vue
+++ b/pages/dock/DockDoc.vue
@@ -1,47 +1,46 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="DockDemo" :sources="sources" github="dock/DockDemo.vue" :service="['NodeService', 'PhotoService']" :data="['treenodes', 'photos']">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="DockDemo" :sources="sources" github="dock/DockDemo.vue" :service="['NodeService', 'PhotoService']" :data="['treenodes', 'photos']">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import Dock from 'primevue/dock';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/slider/slider.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p>Dock is a navigation component consisting of menuitems. It has a collection of additional options defined by the <i>model</i> property.</p>
+        <h5>Getting Started</h5>
+        <p>Dock is a navigation component consisting of menuitems. It has a collection of additional options defined by the <i>model</i> property.</p>
 
-            <pre v-code><code>
+        <pre v-code><code>
 &lt;Dock :model="items" /&gt;
 
 </code></pre>
 
-            <pre v-code.script><code><template>
+        <pre v-code.script><code><template>
     export default {
         data() {
             return {
                 items: [
                     {
                         label: "Finder",
-                        icon: "/demo/images/dock/finder.svg"
+                        icon: "demo/images/dock/finder.svg"
                     },
                     {
                         label: "App Store",
-                        icon: "/demo/images/dock/appstore.svg"
+                        icon: "demo/images/dock/appstore.svg"
                     },
                     {
                         label: "Photos",
-                        icon: "/demo/images/dock/photos.svg"
+                        icon: "demo/images/dock/photos.svg"
                     },
                     {
                         label: "Trash",
-                        icon: "/demo/images/dock/trash.png"
+                        icon: "demo/images/dock/trash.png"
                     }
                 ]
             }
@@ -51,115 +50,245 @@ import Dock from 'primevue/dock';
 </template>
 </code></pre>
 
-            <h5>MenuModel API</h5>
-            <p>Dock uses the common MenuModel API to define the items, visit <nuxt-link to="/menumodel">MenuModel API</nuxt-link> for details.</p>
+        <h5>MenuModel API</h5>
+        <p>Dock uses the common MenuModel API to define the items, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p>
 
-            <h5>Properties</h5>
-            <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>model</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>MenuModel instance to define the action items.</td>
-                        </tr>
-                        <tr>
-                            <td>position</td>
-                            <td>string</td>
-                            <td>bottom</td>
-                            <td>Position of element. Valid values are 'bottom', 'top', 'left' and 'right'.</td>
-                        </tr>
-                        <tr>
-                            <td>class</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the element.</td>
-                        </tr>
-                        <tr>
-                            <td>style</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Inline style of the element.</td>
-                        </tr>
-                        <tr>
-                            <td>exact</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether to apply 'nuxt-link-active-exact' class if route exactly matches the item path.</td>
-                        </tr>
-                        <tr>
-                            <td>tooltipOptions</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Whether to display the tooltip on items. The modifiers of <nuxt-link to="/tooltip">Tooltip</nuxt-link> can be used like an object in it. Valid keys are 'event' and 'position'.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>model</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>MenuModel instance to define the action items.</td>
+                    </tr>
+                    <tr>
+                        <td>position</td>
+                        <td>string</td>
+                        <td>bottom</td>
+                        <td>Position of element. Valid values are 'bottom', 'top', 'left' and 'right'.</td>
+                    </tr>
+                    <tr>
+                        <td>class</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the element.</td>
+                    </tr>
+                    <tr>
+                        <td>style</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Inline style of the element.</td>
+                    </tr>
+                    <tr>
+                        <td>exact</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Whether to apply 'router-link-active-exact' class if route exactly matches the item path.</td>
+                    </tr>
+                    <tr>
+                        <td>tooltipOptions</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Whether to display the tooltip on items. The modifiers of <router-link to="/tooltip">Tooltip</router-link> can be used like an object in it. Valid keys are 'event' and 'position'.</td>
+                    </tr>
+                    <tr>
+                        <td>menuId</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Unique identifier of the menu.</td>
+                    </tr>
+                    <tr>
+                        <td>tabindex</td>
+                        <td>number</td>
+                        <td>0</td>
+                        <td>Index of the element in tabbing order.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-dock</td>
-                            <td>Container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-dock-list</td>
-                            <td>List of items.</td>
-                        </tr>
-                        <tr>
-                            <td>p-dock-item</td>
-                            <td>Each items in list.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Events</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>focus</td>
+                        <td>event</td>
+                        <td>Callback to invoke when the component receives focus.</td>
+                    </tr>
+                    <tr>
+                        <td>blur</td>
+                        <td>event</td>
+                        <td>Callback to invoke when the component loses focus.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Slots</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>item</td>
-                            <td>item: Custom content for item</td>
-                        </tr>
-                        <tr>
-                            <td>icon</td>
-                            <td>item: Custom content for icon</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-dock</td>
+                        <td>Container element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-dock-list-container</td>
+                        <td>Container of the list.</td>
+                    </tr>
+                    <tr>
+                        <td>p-dock-list</td>
+                        <td>List of items.</td>
+                    </tr>
+                    <tr>
+                        <td>p-dock-item</td>
+                        <td>Each items in list.</td>
+                    </tr>
+                    <tr>
+                        <td>p-menuitem-content</td>
+                        <td>Content of menuitem.</td>
+                    </tr>
+                    <tr>
+                        <td>p-dock-link</td>
+                        <td>Link of the menuitem.</td>
+                    </tr>
+                    <tr>
+                        <td>p-dock-icon</td>
+                        <td>Icon of a menuitem.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc>
-    </ClientOnly>
+        <h5>Slots</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>item</td>
+                        <td>
+                            item: Custom content for menuitem<br />
+                            index: Index of the menuitem
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>icon</td>
+                        <td>item: Custom content for icon</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>
+            Dock component uses the <i>menu</i> role with the <i>aria-orientation</i> and the value to describe the menu can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. Each list item has a <i>menuitem</i> role with
+            <i>aria-label</i> referring to the label of the item and <i>aria-disabled</i> defined if the item is disabled.
+        </p>
+
+        <h6>Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>tab</i>
+                        </td>
+                        <td>Moves focus to the first menuitem.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>Activates the focused menuitem.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>Activates the focused menuitem.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>down arrow</i>
+                        </td>
+                        <td>Moves focus to the next menuitem in vertical layout.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>up arrow</i>
+                        </td>
+                        <td>Moves focus to the previous menuitem in vertical layout.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>right arrow</i>
+                        </td>
+                        <td>Moves focus to the next menuitem in horizontal layout.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>left arrow</i>
+                        </td>
+                        <td>Moves focus to the previous menuitem in horizontal layout.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>home</i>
+                        </td>
+                        <td>Moves focus to the first menuitem.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>end</i>
+                        </td>
+                        <td>Moves focus to the last menuitem.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
@@ -178,22 +307,22 @@ export default {
 
             <h5>Basic</h5>
             <div class="dock-window">
-                <Dock :model="dockBasicItems" position="bottom">
-                    <template #icon="{ item }">
-                        <img :alt="item.label" :src="item.icon" style="width: 100%" />
-                    </template>
-                </Dock>
                 <Dock :model="dockBasicItems" position="top">
                     <template #icon="{ item }">
                         <img :alt="item.label" :src="item.icon" style="width: 100%" />
                     </template>
                 </Dock>
-                <Dock :model="dockBasicItems" position="left">
+                <Dock :model="dockBasicItems" position="right">
                     <template #icon="{ item }">
                         <img :alt="item.label" :src="item.icon" style="width: 100%" />
                     </template>
                 </Dock>
-                <Dock :model="dockBasicItems" position="right">
+                <Dock :model="dockBasicItems" position="bottom">
+                    <template #icon="{ item }">
+                        <img :alt="item.label" :src="item.icon" style="width: 100%" />
+                    </template>
+                </Dock>
+                <Dock :model="dockBasicItems" position="left">
                     <template #icon="{ item }">
                         <img :alt="item.label" :src="item.icon" style="width: 100%" />
                     </template>
@@ -218,7 +347,7 @@ export default {
             <div class="dock-window dock-advanced">
                 <Dock :model="dockItems">
                     <template #item="{ item }">
-                        <a href="#" class="p-dock-action" v-tooltip.top="item.label" @click="onDockItemClick($event, item)">
+                        <a href="#" class="p-dock-link" v-tooltip.top="item.label" @click="onDockItemClick($event, item)">
                             <img :alt="item.label" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 100%">
                         </a>
                     </template>
@@ -260,46 +389,46 @@ export default {
             dockItems: [
                 {
                     label: 'Finder',
-                    icon: "/demo/images/dock/finder.svg",
+                    icon: "demo/images/dock/finder.svg",
                     command: () => {
                         this.displayFinder = true;
                     }
                 },
                 {
                     label: 'Terminal',
-                    icon: "/demo/images/dock/terminal.svg",
+                    icon: "demo/images/dock/terminal.svg",
                     command: () => {
                         this.displayTerminal = true;
                     }
                 },
                 {
                     label: 'App Store',
-                    icon: "/demo/images/dock/appstore.svg",
+                    icon: "demo/images/dock/appstore.svg",
                     command: () => {
                         this.$toast.add({ severity: 'error', summary: 'An unexpected error occurred while signing in.', detail: 'UNTRUSTED_CERT_TITLE', group: 'tc', life: 3000 });
                     }
                 },
                 {
                     label: 'Safari',
-                    icon: "/demo/images/dock/safari.svg",
+                    icon: "demo/images/dock/safari.svg",
                     command: () => {
                         this.$toast.add({ severity: 'warn', summary: 'Safari has stopped working', group: 'tc', life: 3000 });
                     }
                 },
                 {
                     label: 'Photos',
-                    icon: "/demo/images/dock/photos.svg",
+                    icon: "demo/images/dock/photos.svg",
                     command: () => {
                         this.displayPhotos = true;
                     }
                 },
                 {
                     label: 'GitHub',
-                    icon: "/demo/images/dock/github.svg",
+                    icon: "demo/images/dock/github.svg",
                 },
                 {
                     label: 'Trash',
-                    icon: "/demo/images/dock/trash.png",
+                    icon: "demo/images/dock/trash.png",
                     command: () => {
                         this.$toast.add({ severity: 'info', summary: 'Empty Trash', life: 3000 });
                     }
@@ -308,19 +437,19 @@ export default {
             dockBasicItems: [
                 {
                     label: "Finder",
-                    icon: "/demo/images/dock/finder.svg"
+                    icon: "demo/images/dock/finder.svg"
                 },
                 {
                     label: "App Store",
-                    icon: "/demo/images/dock/appstore.svg"
+                    icon: "demo/images/dock/appstore.svg"
                 },
                 {
                     label: "Photos",
-                    icon: "/demo/images/dock/photos.svg"
+                    icon: "demo/images/dock/photos.svg"
                 },
                 {
                     label: "Trash",
-                    icon: "/demo/images/dock/trash.png"
+                    icon: "demo/images/dock/trash.png"
                 }
             ],
             menubarItems: [
@@ -546,7 +675,7 @@ export default {
             padding: 0.5rem .75rem;
         }
 
-        .p-menubar-root-list > .p-menuitem > .p-menuitem-link {
+        .p-menubar-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link {
             padding: 0.5rem .75rem;
 
             > .p-submenu-icon {
@@ -579,22 +708,22 @@ export default {
 
             <h5>Basic</h5>
             <div class="dock-window">
-                <Dock :model="dockBasicItems" position="bottom">
-                    <template #icon="{ item }">
-                        <img :alt="item.label" :src="item.icon" style="width: 100%" />
-                    </template>
-                </Dock>
                 <Dock :model="dockBasicItems" position="top">
                     <template #icon="{ item }">
                         <img :alt="item.label" :src="item.icon" style="width: 100%" />
                     </template>
                 </Dock>
-                <Dock :model="dockBasicItems" position="left">
+                <Dock :model="dockBasicItems" position="right">
                     <template #icon="{ item }">
                         <img :alt="item.label" :src="item.icon" style="width: 100%" />
                     </template>
                 </Dock>
-                <Dock :model="dockBasicItems" position="right">
+                <Dock :model="dockBasicItems" position="bottom">
+                    <template #icon="{ item }">
+                        <img :alt="item.label" :src="item.icon" style="width: 100%" />
+                    </template>
+                </Dock>
+                <Dock :model="dockBasicItems" position="left">
                     <template #icon="{ item }">
                         <img :alt="item.label" :src="item.icon" style="width: 100%" />
                     </template>
@@ -619,7 +748,7 @@ export default {
             <div class="dock-window dock-advanced">
                 <Dock :model="dockItems">
                     <template #item="{ item }">
-                        <a href="#" class="p-dock-action" v-tooltip.top="item.label" @click="onDockItemClick($event, item)">
+                        <a href="#" class="p-dock-link" v-tooltip.top="item.label" @click="onDockItemClick($event, item)">
                             <img :alt="item.label" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 100%" />
                         </a>
                     </template>
@@ -676,46 +805,46 @@ export default {
         const dockItems = ref([
             {
                 label: 'Finder',
-                icon: "/demo/images/dock/finder.svg",
+                icon: "demo/images/dock/finder.svg",
                 command: () => {
                     displayFinder.value = true;
                 }
             },
             {
                 label: 'Terminal',
-                icon: "/demo/images/dock/terminal.svg",
+                icon: "demo/images/dock/terminal.svg",
                 command: () => {
                     displayTerminal.value = true;
                 }
             },
             {
                 label: 'App Store',
-                icon: "/demo/images/dock/appstore.svg",
+                icon: "demo/images/dock/appstore.svg",
                 command: () => {
                     toast.add({ severity: 'error', summary: 'An unexpected error occurred while signing in.', detail: 'UNTRUSTED_CERT_TITLE', group: 'tc', life: 3000 });
                 }
             },
             {
                 label: 'Safari',
-                icon: "/demo/images/dock/safari.svg",
+                icon: "demo/images/dock/safari.svg",
                 command: () => {
                     toast.add({ severity: 'warn', summary: 'Safari has stopped working', group: 'tc', life: 3000 });
                 }
             },
             {
                 label: 'Photos',
-                icon: "/demo/images/dock/photos.svg",
+                icon: "demo/images/dock/photos.svg",
                 command: () => {
                     displayPhotos.value = true;
                 }
             },
             {
                 label: 'GitHub',
-                icon: "/demo/images/dock/github.svg",
+                icon: "demo/images/dock/github.svg",
             },
             {
                 label: 'Trash',
-                icon: "/demo/images/dock/trash.png",
+                icon: "demo/images/dock/trash.png",
                 command: () => {
                     toast.add({ severity: 'info', summary: 'Empty Trash', life: 3000 });
                 }
@@ -724,19 +853,19 @@ export default {
         const dockBasicItems = ref([
             {
                 label: "Finder",
-                icon: "/demo/images/dock/finder.svg"
+                icon: "demo/images/dock/finder.svg"
             },
             {
                 label: "App Store",
-                icon: "/demo/images/dock/appstore.svg"
+                icon: "demo/images/dock/appstore.svg"
             },
             {
                 label: "Photos",
-                icon: "/demo/images/dock/photos.svg"
+                icon: "demo/images/dock/photos.svg"
             },
             {
                 label: "Trash",
-                icon: "/demo/images/dock/trash.png"
+                icon: "demo/images/dock/trash.png"
             }
         ]);
         const menubarItems = ref([
@@ -982,7 +1111,7 @@ export default {
             padding: 0.5rem .75rem;
         }
 
-        .p-menubar-root-list > .p-menuitem > .p-menuitem-link {
+        .p-menubar-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link {
             padding: 0.5rem .75rem;
 
             > .p-submenu-icon {
@@ -1021,22 +1150,22 @@ export default {
 
             <h5>Basic</h5>
             <div class="dock-window">
-                <p-dock :model="dockBasicItems" position="bottom">
-                    <template #icon="{ item }">
-                        <img :alt="item.label" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 100%" />
-                    </template>
-                </p-dock>
                 <p-dock :model="dockBasicItems" position="top">
                     <template #icon="{ item }">
                         <img :alt="item.label" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 100%" />
                     </template>
                 </p-dock>
-                <p-dock :model="dockBasicItems" position="left">
+                <p-dock :model="dockBasicItems" position="right">
                     <template #icon="{ item }">
                         <img :alt="item.label" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 100%" />
                     </template>
                 </p-dock>
-                <p-dock :model="dockBasicItems" position="right">
+                <p-dock :model="dockBasicItems" position="bottom">
+                    <template #icon="{ item }">
+                        <img :alt="item.label" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 100%" />
+                    </template>
+                </p-dock>
+                <p-dock :model="dockBasicItems" position="left">
                     <template #icon="{ item }">
                         <img :alt="item.label" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 100%" />
                     </template>
@@ -1061,7 +1190,7 @@ export default {
             <div class="dock-window dock-advanced">
                 <p-dock :model="dockItems">
                     <template #item="{ item }">
-                        <a href="#" class="p-dock-action" v-tooltip.top="item.label" @click="onDockItemClick($event, item)">
+                        <a href="#" class="p-dock-link" v-tooltip.top="item.label" @click="onDockItemClick($event, item)">
                             <img :alt="item.label" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 100%" />
                         </a>
                     </template>
@@ -1115,46 +1244,46 @@ export default {
                 const dockItems = ref([
                     {
                         label: 'Finder',
-                        icon: "/demo/images/dock/finder.svg",
+                        icon: "demo/images/dock/finder.svg",
                         command: () => {
                             displayFinder.value = true;
                         }
                     },
                     {
                         label: 'Terminal',
-                        icon: "/demo/images/dock/terminal.svg",
+                        icon: "demo/images/dock/terminal.svg",
                         command: () => {
                             displayTerminal.value = true;
                         }
                     },
                     {
                         label: 'App Store',
-                        icon: "/demo/images/dock/appstore.svg",
+                        icon: "demo/images/dock/appstore.svg",
                         command: () => {
                             toast.add({ severity: 'error', summary: 'An unexpected error occurred while signing in.', detail: 'UNTRUSTED_CERT_TITLE', group: 'tc', life: 3000 });
                         }
                     },
                     {
                         label: 'Safari',
-                        icon: "/demo/images/dock/safari.svg",
+                        icon: "demo/images/dock/safari.svg",
                         command: () => {
                             toast.add({ severity: 'warn', summary: 'Safari has stopped working', group: 'tc', life: 3000 });
                         }
                     },
                     {
                         label: 'Photos',
-                        icon: "/demo/images/dock/photos.svg",
+                        icon: "demo/images/dock/photos.svg",
                         command: () => {
                             displayPhotos.value = true;
                         }
                     },
                     {
                         label: 'GitHub',
-                        icon: "/demo/images/dock/github.svg",
+                        icon: "demo/images/dock/github.svg",
                     },
                     {
                         label: 'Trash',
-                        icon: "/demo/images/dock/trash.png",
+                        icon: "demo/images/dock/trash.png",
                         command: () => {
                             toast.add({ severity: 'info', summary: 'Empty Trash', life: 3000 });
                         }
@@ -1163,19 +1292,19 @@ export default {
                 const dockBasicItems = ref([
                     {
                         label: "Finder",
-                        icon: "/demo/images/dock/finder.svg"
+                        icon: "demo/images/dock/finder.svg"
                     },
                     {
                         label: "App Store",
-                        icon: "/demo/images/dock/appstore.svg"
+                        icon: "demo/images/dock/appstore.svg"
                     },
                     {
                         label: "Photos",
-                        icon: "/demo/images/dock/photos.svg"
+                        icon: "demo/images/dock/photos.svg"
                     },
                     {
                         label: "Trash",
-                        icon: "/demo/images/dock/trash.png"
+                        icon: "demo/images/dock/trash.png"
                     }
                 ]);
                 const menubarItems = ref([
@@ -1444,11 +1573,11 @@ export default {
                 padding: 0.5rem .75rem;
             }
 
-            .dock-demo .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link {
+            .dock-demo .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link {
                 padding: 0.5rem .75rem;
             }
 
-            .dock-demo .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
+            .dock-demo .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
                 display: none;
             }
 
diff --git a/pages/dock/index.vue b/pages/dock/index.vue
index 412a19ce6..4b9aa3310 100644
--- a/pages/dock/index.vue
+++ b/pages/dock/index.vue
@@ -13,22 +13,22 @@
 
             <h5>Basic</h5>
             <div class="dock-window">
-                <Dock :model="dockBasicItems" position="bottom">
-                    <template #icon="{ item }">
-                        <img :alt="item.label" :src="item.icon" style="width: 100%" />
-                    </template>
-                </Dock>
                 <Dock :model="dockBasicItems" position="top">
                     <template #icon="{ item }">
                         <img :alt="item.label" :src="item.icon" style="width: 100%" />
                     </template>
                 </Dock>
-                <Dock :model="dockBasicItems" position="left">
+                <Dock :model="dockBasicItems" position="right">
                     <template #icon="{ item }">
                         <img :alt="item.label" :src="item.icon" style="width: 100%" />
                     </template>
                 </Dock>
-                <Dock :model="dockBasicItems" position="right">
+                <Dock :model="dockBasicItems" position="bottom">
+                    <template #icon="{ item }">
+                        <img :alt="item.label" :src="item.icon" style="width: 100%" />
+                    </template>
+                </Dock>
+                <Dock :model="dockBasicItems" position="left">
                     <template #icon="{ item }">
                         <img :alt="item.label" :src="item.icon" style="width: 100%" />
                     </template>
@@ -53,7 +53,7 @@
             <div class="dock-window dock-advanced">
                 <Dock :model="dockItems">
                     <template #item="{ item }">
-                        <a href="#" class="p-dock-action" v-tooltip.top="item.label" @click="onDockItemClick($event, item)">
+                        <a v-tooltip.top="item.label" href="#" class="p-dock-link" @click="onDockItemClick($event, item)">
                             <img :alt="item.label" :src="item.icon" style="width: 100%" />
                         </a>
                     </template>
@@ -80,9 +80,9 @@
 </template>
 
 <script>
+import TerminalService from 'primevue/terminalservice';
 import NodeService from '../../service/NodeService';
 import PhotoService from '../../service/PhotoService';
-import TerminalService from 'primevue/terminalservice';
 import DockDoc from './DockDoc.vue';
 
 export default {
@@ -97,46 +97,46 @@ export default {
             dockItems: [
                 {
                     label: 'Finder',
-                    icon: '/demo/images/dock/finder.svg',
+                    icon: 'demo/images/dock/finder.svg',
                     command: () => {
                         this.displayFinder = true;
                     }
                 },
                 {
                     label: 'Terminal',
-                    icon: '/demo/images/dock/terminal.svg',
+                    icon: 'demo/images/dock/terminal.svg',
                     command: () => {
                         this.displayTerminal = true;
                     }
                 },
                 {
                     label: 'App Store',
-                    icon: '/demo/images/dock/appstore.svg',
+                    icon: 'demo/images/dock/appstore.svg',
                     command: () => {
                         this.$toast.add({ severity: 'error', summary: 'An unexpected error occurred while signing in.', detail: 'UNTRUSTED_CERT_TITLE', group: 'tc', life: 3000 });
                     }
                 },
                 {
                     label: 'Safari',
-                    icon: '/demo/images/dock/safari.svg',
+                    icon: 'demo/images/dock/safari.svg',
                     command: () => {
                         this.$toast.add({ severity: 'warn', summary: 'Safari has stopped working', group: 'tc', life: 3000 });
                     }
                 },
                 {
                     label: 'Photos',
-                    icon: '/demo/images/dock/photos.svg',
+                    icon: 'demo/images/dock/photos.svg',
                     command: () => {
                         this.displayPhotos = true;
                     }
                 },
                 {
                     label: 'GitHub',
-                    icon: '/demo/images/dock/github.svg'
+                    icon: 'demo/images/dock/github.svg'
                 },
                 {
                     label: 'Trash',
-                    icon: '/demo/images/dock/trash.png',
+                    icon: 'demo/images/dock/trash.png',
                     command: () => {
                         this.$toast.add({ severity: 'info', summary: 'Empty Trash', life: 3000 });
                     }
@@ -145,19 +145,19 @@ export default {
             dockBasicItems: [
                 {
                     label: 'Finder',
-                    icon: '/demo/images/dock/finder.svg'
+                    icon: 'demo/images/dock/finder.svg'
                 },
                 {
                     label: 'App Store',
-                    icon: '/demo/images/dock/appstore.svg'
+                    icon: 'demo/images/dock/appstore.svg'
                 },
                 {
                     label: 'Photos',
-                    icon: '/demo/images/dock/photos.svg'
+                    icon: 'demo/images/dock/photos.svg'
                 },
                 {
                     label: 'Trash',
-                    icon: '/demo/images/dock/trash.png'
+                    icon: 'demo/images/dock/trash.png'
                 }
             ],
             menubarItems: [
@@ -381,7 +381,7 @@ export default {
             padding: 0.5rem 0.75rem;
         }
 
-        .p-menubar-root-list > .p-menuitem > .p-menuitem-link {
+        .p-menubar-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link {
             padding: 0.5rem 0.75rem;
 
             > .p-submenu-icon {
diff --git a/pages/dropdown/DropdownDoc.vue b/pages/dropdown/DropdownDoc.vue
index 19eff628b..e234961d1 100755
--- a/pages/dropdown/DropdownDoc.vue
+++ b/pages/dropdown/DropdownDoc.vue
@@ -1,26 +1,25 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="DropdownDemo" :sources="sources" github="dropdown/DropdownDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="DropdownDemo" :sources="sources" github="dropdown/DropdownDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import Dropdown from 'primevue/dropdown';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p>Dropdown requires a value to bind and a collection of arbitrary objects along with the <i>optionLabel</i> property to specify the label property of the option.</p>
-            <pre v-code><code>
+        <h5>Getting Started</h5>
+        <p>Dropdown requires a value to bind and a collection of arbitrary objects along with the <i>optionLabel</i> property to specify the label property of the option.</p>
+        <pre v-code><code>
 &lt;Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" /&gt;
 
 </code></pre>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 data() {
 	return {
 		selectedCity: null,
@@ -36,12 +35,12 @@ data() {
 
 </code></pre>
 
-            <h5>Placeholder</h5>
-            <p>Common pattern is providing an empty option as the placeholder when using native selects, however Dropdown has built-in support using the placeholder option so it is suggested to use it instead of creating an empty option.</p>
+        <h5>Placeholder</h5>
+        <p>Common pattern is providing an empty option as the placeholder when using native selects, however Dropdown has built-in support using the placeholder option so it is suggested to use it instead of creating an empty option.</p>
 
-            <h5>Grouping</h5>
-            <p>Options groups are specified with the <i>optionGroupLabel</i> and <i>optionGroupChildren</i> properties.</p>
-            <pre v-code.script><code>
+        <h5>Grouping</h5>
+        <p>Options groups are specified with the <i>optionGroupLabel</i> and <i>optionGroupChildren</i> properties.</p>
+        <pre v-code.script><code>
 export default {
     data() {
         return {
@@ -78,34 +77,34 @@ export default {
 }
 </code></pre>
 
-            <pre v-code><code><template v-pre>
+        <pre v-code><code><template v-pre>
 &lt;Dropdown v-model="selectedGroupedCity" :options="groupedCities"
         optionLabel="label" optionGroupLabel="label" optionGroupChildren="items"&gt;
 &lt;/Dropdown&gt;
 </template>
 </code></pre>
 
-            <h5>Filtering</h5>
-            <p>
-                Filtering allows searching items in the list using an input field at the header. In order to use filtering, enable <i>filter</i> property. By default, optionLabel is used when searching and <i>filterFields</i> can be used to customize
-                the fields being utilized. Furthermore, <i>filterMatchMode</i> is available to define the search algorithm. Valid values are "contains" (default), "startsWith" and "endsWith".
-            </p>
+        <h5>Filtering</h5>
+        <p>
+            Filtering allows searching items in the list using an input field at the header. In order to use filtering, enable <i>filter</i> property. By default, optionLabel is used when searching and <i>filterFields</i> can be used to customize the
+            fields being utilized. Furthermore, <i>filterMatchMode</i> is available to define the search algorithm. Valid values are "contains" (default), "startsWith" and "endsWith".
+        </p>
 
-            <pre v-code><code>
+        <pre v-code><code>
 &lt;Dropdown v-model="selectedCar" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true" filterPlaceholder="Find Car"/&gt;
 
 </code></pre>
 
-            <h5>Templating</h5>
-            <p>
-                Label of an option is used as the display text of an item by default, for custom content support define an <i>option</i> template that gets the option instance as a parameter. In addition <i>value</i>, <i>optiongroup</i>,
-                <i>header</i>, <i>footer</i>, <i>emptyfilter</i> and <i>empty</i> slots are provided for further customization.
-            </p>
-            <pre v-code><code><template v-pre>
+        <h5>Templating</h5>
+        <p>
+            Label of an option is used as the display text of an item by default, for custom content support define an <i>option</i> template that gets the option instance as a parameter. In addition <i>value</i>, <i>optiongroup</i>, <i>header</i>,
+            <i>footer</i>, <i>emptyfilter</i> and <i>empty</i> slots are provided for further customization.
+        </p>
+        <pre v-code><code><template v-pre>
 &lt;Dropdown v-model="selectedCar" :options="cars" optionLabel="brand" :filter="true" placeholder="Select a Car" :showClear="true"&gt;
     &lt;template #value="slotProps"&gt;
         &lt;div class="p-dropdown-car-value" v-if="slotProps.value"&gt;
-            &lt;img :alt="slotProps.value.brand" :src="'/demo/images/car/' + slotProps.value.brand + '.png'" /&gt;
+            &lt;img :alt="slotProps.value.brand" :src="'demo/images/car/' + slotProps.value.brand + '.png'" /&gt;
             &lt;span&gt;{{slotProps.value.brand}}&lt;/span&gt;
         &lt;/div&gt;
         &lt;span v-else&gt;
@@ -114,7 +113,7 @@ export default {
     &lt;/template&gt;
     &lt;template #option="slotProps"&gt;
 		&lt;div class="p-dropdown-car-option"&gt;
-			&lt;img :alt="slotProps.option.brand" :src="'/demo/images/car/' + slotProps.option.brand + '.png'" /&gt;
+			&lt;img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" /&gt;
 			&lt;span&gt;{{slotProps.option.brand}}&lt;/span&gt;
 		&lt;/div&gt;
 	&lt;/template&gt;
@@ -122,510 +121,528 @@ export default {
 </template>
 </code></pre>
 
-            <h5>Properties</h5>
-            <p>Any property of HTMLDivElement are passed to the main container element. Following are the additional properties to configure the component.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>modelValue</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Value of the component.</td>
-                        </tr>
-                        <tr>
-                            <td>options</td>
-                            <td>array</td>
-                            <td>null</td>
-                            <td>An array of selectitems to display as the available options.</td>
-                        </tr>
-                        <tr>
-                            <td>optionLabel</td>
-                            <td>string | function</td>
-                            <td>null</td>
-                            <td>Property name or getter function to use as the label of an option.</td>
-                        </tr>
-                        <tr>
-                            <td>optionValue</td>
-                            <td>string | function</td>
-                            <td>null</td>
-                            <td>Property name or getter function to use as the value of an option, defaults to the option itself when not defined.</td>
-                        </tr>
-                        <tr>
-                            <td>optionDisabled</td>
-                            <td>string | function</td>
-                            <td>null</td>
-                            <td>Property name or getter function to use as the disabled flag of an option, defaults to false when not defined.</td>
-                        </tr>
-                        <tr>
-                            <td>optionGroupLabel</td>
-                            <td>string | function</td>
-                            <td>null</td>
-                            <td>Property name or getter function to use as the label of an option group.</td>
-                        </tr>
-                        <tr>
-                            <td>optionGroupChildren</td>
-                            <td>string | function</td>
-                            <td>null</td>
-                            <td>Property name or getter function that refers to the children options of option group.</td>
-                        </tr>
-                        <tr>
-                            <td>scrollHeight</td>
-                            <td>string</td>
-                            <td>200px</td>
-                            <td>Height of the viewport, a scrollbar is defined if height of list exceeds this value.</td>
-                        </tr>
-                        <tr>
-                            <td>filter</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When specified, displays a filter input at header.</td>
-                        </tr>
-                        <tr>
-                            <td>filterPlaceholder</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Placeholder text to show when filter input is empty.</td>
-                        </tr>
-                        <tr>
-                            <td>filterLocale</td>
-                            <td>string</td>
-                            <td>undefined</td>
-                            <td>Locale to use in filtering. The default locale is the host environment's current locale.</td>
-                        </tr>
-                        <tr>
-                            <td>filterMatchMode</td>
-                            <td>string</td>
-                            <td>contains</td>
-                            <td>Defines the filtering algorithm to use when searching the options. Valid values are "contains" (default), "startsWith" and "endsWith"</td>
-                        </tr>
-                        <tr>
-                            <td>filterFields</td>
-                            <td>array</td>
-                            <td>null</td>
-                            <td>Fields used when filtering the options, defaults to optionLabel.</td>
-                        </tr>
-                        <tr>
-                            <td>editable</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When present, custom value instead of predefined options can be entered using the editable input field.</td>
-                        </tr>
-                        <tr>
-                            <td>placeholder</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Default text to display when no option is selected.</td>
-                        </tr>
-                        <tr>
-                            <td>disabled</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When present, it specifies that the component should be disabled.</td>
-                        </tr>
-                        <tr>
-                            <td>dataKey</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>A property to uniquely identify an option.</td>
-                        </tr>
-                        <tr>
-                            <td>showClear</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When enabled, a clear icon is displayed to clear the value.</td>
-                        </tr>
-                        <tr>
-                            <td>inputId</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Identifier of the underlying input element.</td>
-                        </tr>
-                        <tr>
-                            <td>inputStyle</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Inline style of the input field.</td>
-                        </tr>
-                        <tr>
-                            <td>inputClass</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the input field.</td>
-                        </tr>
-                        <tr>
-                            <td>inputProps</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Uses to pass all properties of the HTMLInputElement/HTMLSpanElement to the focusable input element inside the component.</td>
-                        </tr>
-                        <tr>
-                            <td>panelStyle</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Inline style of the overlay panel.</td>
-                        </tr>
-                        <tr>
-                            <td>panelClass</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the overlay panel.</td>
-                        </tr>
-                        <tr>
-                            <td>panelProps</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Uses to pass all properties of the HTMLDivElement to the overlay panel.</td>
-                        </tr>
-                        <tr>
-                            <td>filterInputProps</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Uses to pass all properties of the HTMLInputElement to the filter input inside the overlay panel.</td>
-                        </tr>
-                        <tr>
-                            <td>clearIconProps</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Uses to pass all properties of the HTMLElement to the clear icon inside the component.</td>
-                        </tr>
-                        <tr>
-                            <td>appendTo</td>
-                            <td>string</td>
-                            <td>body</td>
-                            <td>A valid query selector or an HTMLElement to specify where the overlay gets attached. Special keywords are "body" for document body and "self" for the element itself.</td>
-                        </tr>
-                        <tr>
-                            <td>loading</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Whether the dropdown is in loading state.</td>
-                        </tr>
-                        <tr>
-                            <td>loadingIcon</td>
-                            <td>string</td>
-                            <td>pi pi-spinner pi-spin</td>
-                            <td>Icon to display in loading state.</td>
-                        </tr>
-                        <tr>
-                            <td>resetFilterOnHide</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Clears the filter value when hiding the dropdown.</td>
-                        </tr>
-                        <tr>
-                            <td>virtualScrollerOptions</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Whether to use the virtualScroller feature. The properties of <nuxt-link to="/virtualscroller">VirtualScroller</nuxt-link> component can be used like an object in it.</td>
-                        </tr>
-                        <tr>
-                            <td>autoOptionFocus</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether to focus on the first visible or selected element when the overlay panel is shown.</td>
-                        </tr>
-                        <tr>
-                            <td>autoFilterFocus</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Whether to focus on the filter element when the overlay panel is shown.</td>
-                        </tr>
-                        <tr>
-                            <td>selectOnFocus</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When enabled, the focused option is selected.</td>
-                        </tr>
-                        <tr>
-                            <td>filterMessage</td>
-                            <td>string</td>
-                            <td>{0} results are available</td>
-                            <td>Text to be displayed in hidden accessible field when filtering returns any results. Defaults to value from PrimeVue locale configuration.</td>
-                        </tr>
-                        <tr>
-                            <td>selectionMessage</td>
-                            <td>string</td>
-                            <td>{0} items selected</td>
-                            <td>Text to be displayed in hidden accessible field when options are selected. Defaults to value from PrimeVue locale configuration.</td>
-                        </tr>
-                        <tr>
-                            <td>emptySelectionMessage</td>
-                            <td>string</td>
-                            <td>No selected item</td>
-                            <td>Text to be displayed in hidden accessible field when any option is not selected. Defaults to value from PrimeVue locale configuration.</td>
-                        </tr>
-                        <tr>
-                            <td>emptyFilterMessage</td>
-                            <td>string</td>
-                            <td>No results found</td>
-                            <td>Text to be displayed when filtering does not return any results. Defaults to value from PrimeVue locale configuration.</td>
-                        </tr>
-                        <tr>
-                            <td>emptyMessage</td>
-                            <td>string</td>
-                            <td>No results found</td>
-                            <td>Text to be displayed when there are no options available. Defaults to value from PrimeVue locale configuration.</td>
-                        </tr>
-                        <tr>
-                            <td>tabindex</td>
-                            <td>number</td>
-                            <td>0</td>
-                            <td>Index of the element in tabbing order.</td>
-                        </tr>
-                        <tr>
-                            <td>aria-label</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Defines a string value that labels an interactive element.</td>
-                        </tr>
-                        <tr>
-                            <td>aria-labelledby</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <p>Any property of HTMLDivElement are passed to the main container element. Following are the additional properties to configure the component.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>modelValue</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Value of the component.</td>
+                    </tr>
+                    <tr>
+                        <td>options</td>
+                        <td>array</td>
+                        <td>null</td>
+                        <td>An array of selectitems to display as the available options.</td>
+                    </tr>
+                    <tr>
+                        <td>optionLabel</td>
+                        <td>string | function</td>
+                        <td>null</td>
+                        <td>Property name or getter function to use as the label of an option.</td>
+                    </tr>
+                    <tr>
+                        <td>optionValue</td>
+                        <td>string | function</td>
+                        <td>null</td>
+                        <td>Property name or getter function to use as the value of an option, defaults to the option itself when not defined.</td>
+                    </tr>
+                    <tr>
+                        <td>optionDisabled</td>
+                        <td>string | function</td>
+                        <td>null</td>
+                        <td>Property name or getter function to use as the disabled flag of an option, defaults to false when not defined.</td>
+                    </tr>
+                    <tr>
+                        <td>optionGroupLabel</td>
+                        <td>string | function</td>
+                        <td>null</td>
+                        <td>Property name or getter function to use as the label of an option group.</td>
+                    </tr>
+                    <tr>
+                        <td>optionGroupChildren</td>
+                        <td>string | function</td>
+                        <td>null</td>
+                        <td>Property name or getter function that refers to the children options of option group.</td>
+                    </tr>
+                    <tr>
+                        <td>scrollHeight</td>
+                        <td>string</td>
+                        <td>200px</td>
+                        <td>Height of the viewport, a scrollbar is defined if height of list exceeds this value.</td>
+                    </tr>
+                    <tr>
+                        <td>filter</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When specified, displays a filter input at header.</td>
+                    </tr>
+                    <tr>
+                        <td>filterPlaceholder</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Placeholder text to show when filter input is empty.</td>
+                    </tr>
+                    <tr>
+                        <td>filterLocale</td>
+                        <td>string</td>
+                        <td>undefined</td>
+                        <td>Locale to use in filtering. The default locale is the host environment's current locale.</td>
+                    </tr>
+                    <tr>
+                        <td>filterMatchMode</td>
+                        <td>string</td>
+                        <td>contains</td>
+                        <td>Defines the filtering algorithm to use when searching the options. Valid values are "contains" (default), "startsWith" and "endsWith"</td>
+                    </tr>
+                    <tr>
+                        <td>filterFields</td>
+                        <td>array</td>
+                        <td>null</td>
+                        <td>Fields used when filtering the options, defaults to optionLabel.</td>
+                    </tr>
+                    <tr>
+                        <td>editable</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When present, custom value instead of predefined options can be entered using the editable input field.</td>
+                    </tr>
+                    <tr>
+                        <td>placeholder</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Default text to display when no option is selected.</td>
+                    </tr>
+                    <tr>
+                        <td>disabled</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When present, it specifies that the component should be disabled.</td>
+                    </tr>
+                    <tr>
+                        <td>dataKey</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>A property to uniquely identify an option.</td>
+                    </tr>
+                    <tr>
+                        <td>showClear</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When enabled, a clear icon is displayed to clear the value.</td>
+                    </tr>
+                    <tr>
+                        <td>inputId</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Identifier of the underlying input element.</td>
+                    </tr>
+                    <tr>
+                        <td>inputStyle</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Inline style of the input field.</td>
+                    </tr>
+                    <tr>
+                        <td>inputClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the input field.</td>
+                    </tr>
+                    <tr>
+                        <td>inputProps</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Uses to pass all properties of the HTMLInputElement/HTMLSpanElement to the focusable input element inside the component.</td>
+                    </tr>
+                    <tr>
+                        <td>panelStyle</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Inline style of the overlay panel.</td>
+                    </tr>
+                    <tr>
+                        <td>panelClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the overlay panel.</td>
+                    </tr>
+                    <tr>
+                        <td>panelProps</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Uses to pass all properties of the HTMLDivElement to the overlay panel.</td>
+                    </tr>
+                    <tr>
+                        <td>filterInputProps</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Uses to pass all properties of the HTMLInputElement to the filter input inside the overlay panel.</td>
+                    </tr>
+                    <tr>
+                        <td>clearIconProps</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Uses to pass all properties of the HTMLElement to the clear icon inside the component.</td>
+                    </tr>
+                    <tr>
+                        <td>appendTo</td>
+                        <td>string</td>
+                        <td>body</td>
+                        <td>A valid query selector or an HTMLElement to specify where the overlay gets attached. Special keywords are "body" for document body and "self" for the element itself.</td>
+                    </tr>
+                    <tr>
+                        <td>loading</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Whether the dropdown is in loading state.</td>
+                    </tr>
+                    <tr>
+                        <td>dropdownIcon</td>
+                        <td>string</td>
+                        <td>pi pi-chevron-down</td>
+                        <td>Icon to display in dropdown</td>
+                    </tr>
+                    <tr>
+                        <td>loadingIcon</td>
+                        <td>string</td>
+                        <td>pi pi-spinner pi-spin</td>
+                        <td>Icon to display in loading state.</td>
+                    </tr>
+                    <tr>
+                        <td>filterIcon</td>
+                        <td>string</td>
+                        <td>pi pi-search</td>
+                        <td>Icon to display in filter input</td>
+                    </tr>
+                    <tr>
+                        <td>clearIcon</td>
+                        <td>string</td>
+                        <td>pi pi-times</td>
+                        <td>Icon to display in clear button</td>
+                    </tr>
+                    <tr>
+                        <td>resetFilterOnHide</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Clears the filter value when hiding the dropdown.</td>
+                    </tr>
+                    <tr>
+                        <td>virtualScrollerOptions</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Whether to use the virtualScroller feature. The properties of <router-link to="/virtualscroller">VirtualScroller</router-link> component can be used like an object in it.</td>
+                    </tr>
+                    <tr>
+                        <td>autoOptionFocus</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Whether to focus on the first visible or selected element when the overlay panel is shown.</td>
+                    </tr>
+                    <tr>
+                        <td>autoFilterFocus</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Whether to focus on the filter element when the overlay panel is shown.</td>
+                    </tr>
+                    <tr>
+                        <td>selectOnFocus</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When enabled, the focused option is selected.</td>
+                    </tr>
+                    <tr>
+                        <td>filterMessage</td>
+                        <td>string</td>
+                        <td>{0} results are available</td>
+                        <td>Text to be displayed in hidden accessible field when filtering returns any results. Defaults to value from PrimeVue locale configuration.</td>
+                    </tr>
+                    <tr>
+                        <td>selectionMessage</td>
+                        <td>string</td>
+                        <td>{0} items selected</td>
+                        <td>Text to be displayed in hidden accessible field when options are selected. Defaults to value from PrimeVue locale configuration.</td>
+                    </tr>
+                    <tr>
+                        <td>emptySelectionMessage</td>
+                        <td>string</td>
+                        <td>No selected item</td>
+                        <td>Text to be displayed in hidden accessible field when any option is not selected. Defaults to value from PrimeVue locale configuration.</td>
+                    </tr>
+                    <tr>
+                        <td>emptyFilterMessage</td>
+                        <td>string</td>
+                        <td>No results found</td>
+                        <td>Text to be displayed when filtering does not return any results. Defaults to value from PrimeVue locale configuration.</td>
+                    </tr>
+                    <tr>
+                        <td>emptyMessage</td>
+                        <td>string</td>
+                        <td>No results found</td>
+                        <td>Text to be displayed when there are no options available. Defaults to value from PrimeVue locale configuration.</td>
+                    </tr>
+                    <tr>
+                        <td>tabindex</td>
+                        <td>number</td>
+                        <td>0</td>
+                        <td>Index of the element in tabbing order.</td>
+                    </tr>
+                    <tr>
+                        <td>aria-label</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Defines a string value that labels an interactive element.</td>
+                    </tr>
+                    <tr>
+                        <td>aria-labelledby</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Events</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>change</td>
-                            <td>
-                                event.originalEvent: Original event <br />
-                                event.value: Selected option value
-                            </td>
-                            <td>Callback to invoke on value change.</td>
-                        </tr>
-                        <tr>
-                            <td>focus</td>
-                            <td>event</td>
-                            <td>Callback to invoke when the component receives focus.</td>
-                        </tr>
-                        <tr>
-                            <td>blur</td>
-                            <td>event</td>
-                            <td>Callback to invoke when the component loses focus.</td>
-                        </tr>
-                        <tr>
-                            <td>before-show</td>
-                            <td>-</td>
-                            <td>Callback to invoke before the overlay is shown.</td>
-                        </tr>
-                        <tr>
-                            <td>before-hide</td>
-                            <td>-</td>
-                            <td>Callback to invoke before the overlay is hidden.</td>
-                        </tr>
-                        <tr>
-                            <td>show</td>
-                            <td>-</td>
-                            <td>Callback to invoke when the overlay is shown.</td>
-                        </tr>
-                        <tr>
-                            <td>hide</td>
-                            <td>-</td>
-                            <td>Callback to invoke when the overlay is hidden.</td>
-                        </tr>
-                        <tr>
-                            <td>filter</td>
-                            <td>
-                                event.originalEvent: Original event <br />
-                                event.value: Filter value
-                            </td>
-                            <td>Callback to invoke on filter input.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Events</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>change</td>
+                        <td>
+                            event.originalEvent: Original event <br />
+                            event.value: Selected option value
+                        </td>
+                        <td>Callback to invoke on value change.</td>
+                    </tr>
+                    <tr>
+                        <td>focus</td>
+                        <td>event</td>
+                        <td>Callback to invoke when the component receives focus.</td>
+                    </tr>
+                    <tr>
+                        <td>blur</td>
+                        <td>event</td>
+                        <td>Callback to invoke when the component loses focus.</td>
+                    </tr>
+                    <tr>
+                        <td>before-show</td>
+                        <td>-</td>
+                        <td>Callback to invoke before the overlay is shown.</td>
+                    </tr>
+                    <tr>
+                        <td>before-hide</td>
+                        <td>-</td>
+                        <td>Callback to invoke before the overlay is hidden.</td>
+                    </tr>
+                    <tr>
+                        <td>show</td>
+                        <td>-</td>
+                        <td>Callback to invoke when the overlay is shown.</td>
+                    </tr>
+                    <tr>
+                        <td>hide</td>
+                        <td>-</td>
+                        <td>Callback to invoke when the overlay is hidden.</td>
+                    </tr>
+                    <tr>
+                        <td>filter</td>
+                        <td>
+                            event.originalEvent: Original event <br />
+                            event.value: Filter value
+                        </td>
+                        <td>Callback to invoke on filter input.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Methods</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>show</td>
-                            <td>isFocus: Decides whether to focus on the component. Default value is false.</td>
-                            <td>Shows the overlay.</td>
-                        </tr>
-                        <tr>
-                            <td>hide</td>
-                            <td>isFocus: Decides whether to focus on the component. Default value is false.</td>
-                            <td>Hides the overlay.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Methods</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>show</td>
+                        <td>isFocus: Decides whether to focus on the component. Default value is false.</td>
+                        <td>Shows the overlay.</td>
+                    </tr>
+                    <tr>
+                        <td>hide</td>
+                        <td>isFocus: Decides whether to focus on the component. Default value is false.</td>
+                        <td>Hides the overlay.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Slots</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>value</td>
-                            <td>
-                                value: Value of the component <br />
-                                placeholder: Placeholder prop value
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>indicator</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>header</td>
-                            <td>
-                                value: Value of the component <br />
-                                options: Displayed options
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>footer</td>
-                            <td>
-                                value: Value of the component <br />
-                                options: Displayed options
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>option</td>
-                            <td>
-                                option: Option instance <br />
-                                index: Index of the option
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>optiongroup</td>
-                            <td>
-                                option: OptionGroup instance <br />
-                                index: Index of the option group
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>emptyfilter</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>empty</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>content</td>
-                            <td>
-                                items: An array of objects to display for virtualscroller<br />
-                                styleClass: Style class of the component<br />
-                                contentRef: Referance of the content<br />
-                                getItemOptions: Options of the items
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>loader</td>
-                            <td>options: Options of the loader items for virtualscroller</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Slots</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>value</td>
+                        <td>
+                            value: Value of the component <br />
+                            placeholder: Placeholder prop value
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>indicator</td>
+                        <td>-</td>
+                    </tr>
+                    <tr>
+                        <td>header</td>
+                        <td>
+                            value: Value of the component <br />
+                            options: Displayed options
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>footer</td>
+                        <td>
+                            value: Value of the component <br />
+                            options: Displayed options
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>option</td>
+                        <td>
+                            option: Option instance <br />
+                            index: Index of the option
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>optiongroup</td>
+                        <td>
+                            option: OptionGroup instance <br />
+                            index: Index of the option group
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>emptyfilter</td>
+                        <td>-</td>
+                    </tr>
+                    <tr>
+                        <td>empty</td>
+                        <td>-</td>
+                    </tr>
+                    <tr>
+                        <td>content</td>
+                        <td>
+                            items: An array of objects to display for virtualscroller<br />
+                            styleClass: Style class of the component<br />
+                            contentRef: Referance of the content<br />
+                            getItemOptions: Options of the items
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>loader</td>
+                        <td>options: Options of the loader items for virtualscroller</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-dropdown</td>
-                            <td>Container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-dropdown-label</td>
-                            <td>Element to display label of selected option.</td>
-                        </tr>
-                        <tr>
-                            <td>p-dropdown-trigger</td>
-                            <td>Icon element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-dropdown-panel</td>
-                            <td>Icon element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-dropdown-items-wrapper</td>
-                            <td>Wrapper element of items list.</td>
-                        </tr>
-                        <tr>
-                            <td>p-dropdown-items</td>
-                            <td>List element of items.</td>
-                        </tr>
-                        <tr>
-                            <td>p-dropdown-item</td>
-                            <td>An item in the list.</td>
-                        </tr>
-                        <tr>
-                            <td>p-dropdown-filter-container</td>
-                            <td>Container of filter input.</td>
-                        </tr>
-                        <tr>
-                            <td>p-dropdown-filter</td>
-                            <td>Filter element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-overlay-open</td>
-                            <td>Container element when overlay is visible.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-dropdown</td>
+                        <td>Container element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-dropdown-label</td>
+                        <td>Element to display label of selected option.</td>
+                    </tr>
+                    <tr>
+                        <td>p-dropdown-trigger</td>
+                        <td>Icon element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-dropdown-panel</td>
+                        <td>Icon element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-dropdown-items-wrapper</td>
+                        <td>Wrapper element of items list.</td>
+                    </tr>
+                    <tr>
+                        <td>p-dropdown-items</td>
+                        <td>List element of items.</td>
+                    </tr>
+                    <tr>
+                        <td>p-dropdown-item</td>
+                        <td>An item in the list.</td>
+                    </tr>
+                    <tr>
+                        <td>p-dropdown-filter-container</td>
+                        <td>Container of filter input.</td>
+                    </tr>
+                    <tr>
+                        <td>p-dropdown-filter</td>
+                        <td>Filter element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-overlay-open</td>
+                        <td>Container element when overlay is visible.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Accessibility</h5>
-            <h6>Screen Reader</h6>
-            <p>
-                Value to describe the component can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. The dropdown element has a <i>combobox</i> role in addition to <i>aria-haspopup</i> and <i>aria-expanded</i> attributes. If
-                the editable option is enabled <i>aria-autocomplete</i> is also added. The relation between the combobox and the popup is created with <i>aria-controls</i> and <i>aria-activedescendant</i> attribute is used to instruct screen reader
-                which option to read during keyboard navigation within the popup list.
-            </p>
-            <p>
-                The popup list has an id that refers to the <i>aria-controls</i> attribute of the <i>combobox</i> element and uses <i>listbox</i> as the role. Each list item has an <i>option</i> role, an id to match the
-                <i>aria-activedescendant</i> of the input element along with <i>aria-label</i>, <i>aria-selected</i> and <i>aria-disabled</i> attributes.
-            </p>
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>
+            Value to describe the component can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. The dropdown element has a <i>combobox</i> role in addition to <i>aria-haspopup</i> and <i>aria-expanded</i> attributes. If the
+            editable option is enabled <i>aria-autocomplete</i> is also added. The relation between the combobox and the popup is created with <i>aria-controls</i> and <i>aria-activedescendant</i> attribute is used to instruct screen reader which
+            option to read during keyboard navigation within the popup list.
+        </p>
+        <p>
+            The popup list has an id that refers to the <i>aria-controls</i> attribute of the <i>combobox</i> element and uses <i>listbox</i> as the role. Each list item has an <i>option</i> role, an id to match the <i>aria-activedescendant</i> of
+            the input element along with <i>aria-label</i>, <i>aria-selected</i> and <i>aria-disabled</i> attributes.
+        </p>
 
-            <p>If filtering is enabled, <i>filterInputProps</i> can be defined to give <i>aria-*</i> props to the filter input element.</p>
-            <pre v-code><code>
+        <p>If filtering is enabled, <i>filterInputProps</i> can be defined to give <i>aria-*</i> props to the filter input element.</p>
+        <pre v-code><code>
 &lt;span id="dd1"&gt;Options&lt;/span&gt;
 &lt;Dropdown aria-labelledby="dd1" /&gt;
 
@@ -633,172 +650,171 @@ export default {
 
 </code></pre>
 
-            <h6>Closed State Keyboard Support</h6>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Key</th>
-                            <th>Function</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td><i>tab</i></td>
-                            <td>Moves focus to the dropdown element.</td>
-                        </tr>
-                        <tr>
-                            <td><i>space</i></td>
-                            <td>Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus.</td>
-                        </tr>
-                        <tr>
-                            <td><i>enter</i></td>
-                            <td>Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus.</td>
-                        </tr>
-                        <tr>
-                            <td><i>down arrow</i></td>
-                            <td>Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus.</td>
-                        </tr>
-                        <tr>
-                            <td><i>up arrow</i></td>
-                            <td>Opens the popup and moves visual focus to the selected option, if there is none then last option receives the focus.</td>
-                        </tr>
-                        <tr>
-                            <td><i>any printable character</i></td>
-                            <td>Opens the popup and moves focus to the option whose label starts with the characters being typed, if there is none and dropdown is not editable then first option receives the focus.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h6>Closed State Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>tab</i></td>
+                        <td>Moves focus to the dropdown element.</td>
+                    </tr>
+                    <tr>
+                        <td><i>space</i></td>
+                        <td>Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus.</td>
+                    </tr>
+                    <tr>
+                        <td><i>enter</i></td>
+                        <td>Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus.</td>
+                    </tr>
+                    <tr>
+                        <td><i>down arrow</i></td>
+                        <td>Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus.</td>
+                    </tr>
+                    <tr>
+                        <td><i>up arrow</i></td>
+                        <td>Opens the popup and moves visual focus to the selected option, if there is none then last option receives the focus.</td>
+                    </tr>
+                    <tr>
+                        <td><i>any printable character</i></td>
+                        <td>Opens the popup and moves focus to the option whose label starts with the characters being typed, if there is none and dropdown is not editable then first option receives the focus.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h6>Popup Keyboard Support</h6>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Key</th>
-                            <th>Function</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td><i>tab</i></td>
-                            <td>Moves focus to the next focusable element in the popup. If there is none, the focusable option is selected and the overlay is closed then moves focus to next element in page.</td>
-                        </tr>
-                        <tr>
-                            <td><i>shift</i> + <i>tab</i></td>
-                            <td>Moves focus to the previous focusable element in the popup. If there is none, the focusable option is selected and the overlay is closed then moves focus to next element in page.</td>
-                        </tr>
-                        <tr>
-                            <td><i>enter</i></td>
-                            <td>Selects the focused option and closes the popup, then moves focus to the dropdown element.</td>
-                        </tr>
-                        <tr>
-                            <td><i>space</i></td>
-                            <td>Selects the focused option and closes the popup, then moves focus to the dropdown element.</td>
-                        </tr>
-                        <tr>
-                            <td><i>escape</i></td>
-                            <td>Closes the popup, then moves focus to the dropdown element.</td>
-                        </tr>
-                        <tr>
-                            <td><i>down arrow</i></td>
-                            <td>Moves focus to the next option, if there is none then visual focus does not change.</td>
-                        </tr>
-                        <tr>
-                            <td><i>up arrow</i></td>
-                            <td>Moves focus to the previous option, if there is none then visual focus does not change.</td>
-                        </tr>
-                        <tr>
-                            <td><i>alt</i> + <i>up arrow</i></td>
-                            <td>Selects the focused option and closes the popup, then moves focus to the dropdown element.</td>
-                        </tr>
-                        <tr>
-                            <td><i>left arrow</i></td>
-                            <td>If the dropdown is editable, removes the visual focus from the current option and moves input cursor to one character left.</td>
-                        </tr>
-                        <tr>
-                            <td><i>right arrow</i></td>
-                            <td>If the dropdown is editable, removes the visual focus from the current option and moves input cursor to one character right.</td>
-                        </tr>
-                        <tr>
-                            <td><i>home</i></td>
-                            <td>If the dropdown is editable, moves input cursor at the end, if not then moves focus to the first option.</td>
-                        </tr>
-                        <tr>
-                            <td><i>end</i></td>
-                            <td>If the dropdown is editable, moves input cursor at the beginning, if not then moves focus to the last option.</td>
-                        </tr>
-                        <tr>
-                            <td><i>pageUp</i></td>
-                            <td>Jumps visual focus to first option.</td>
-                        </tr>
-                        <tr>
-                            <td><i>pageDown</i></td>
-                            <td>Jumps visual focus to last option.</td>
-                        </tr>
-                        <tr>
-                            <td><i>any printable character</i></td>
-                            <td>Moves focus to the option whose label starts with the characters being typed if dropdown is not editable.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h6>Popup Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>tab</i></td>
+                        <td>Moves focus to the next focusable element in the popup. If there is none, the focusable option is selected and the overlay is closed then moves focus to next element in page.</td>
+                    </tr>
+                    <tr>
+                        <td><i>shift</i> + <i>tab</i></td>
+                        <td>Moves focus to the previous focusable element in the popup. If there is none, the focusable option is selected and the overlay is closed then moves focus to next element in page.</td>
+                    </tr>
+                    <tr>
+                        <td><i>enter</i></td>
+                        <td>Selects the focused option and closes the popup, then moves focus to the dropdown element.</td>
+                    </tr>
+                    <tr>
+                        <td><i>space</i></td>
+                        <td>Selects the focused option and closes the popup, then moves focus to the dropdown element.</td>
+                    </tr>
+                    <tr>
+                        <td><i>escape</i></td>
+                        <td>Closes the popup, then moves focus to the dropdown element.</td>
+                    </tr>
+                    <tr>
+                        <td><i>down arrow</i></td>
+                        <td>Moves focus to the next option, if there is none then visual focus does not change.</td>
+                    </tr>
+                    <tr>
+                        <td><i>up arrow</i></td>
+                        <td>Moves focus to the previous option, if there is none then visual focus does not change.</td>
+                    </tr>
+                    <tr>
+                        <td><i>alt</i> + <i>up arrow</i></td>
+                        <td>Selects the focused option and closes the popup, then moves focus to the dropdown element.</td>
+                    </tr>
+                    <tr>
+                        <td><i>left arrow</i></td>
+                        <td>If the dropdown is editable, removes the visual focus from the current option and moves input cursor to one character left.</td>
+                    </tr>
+                    <tr>
+                        <td><i>right arrow</i></td>
+                        <td>If the dropdown is editable, removes the visual focus from the current option and moves input cursor to one character right.</td>
+                    </tr>
+                    <tr>
+                        <td><i>home</i></td>
+                        <td>If the dropdown is editable, moves input cursor at the end, if not then moves focus to the first option.</td>
+                    </tr>
+                    <tr>
+                        <td><i>end</i></td>
+                        <td>If the dropdown is editable, moves input cursor at the beginning, if not then moves focus to the last option.</td>
+                    </tr>
+                    <tr>
+                        <td><i>pageUp</i></td>
+                        <td>Jumps visual focus to first option.</td>
+                    </tr>
+                    <tr>
+                        <td><i>pageDown</i></td>
+                        <td>Jumps visual focus to last option.</td>
+                    </tr>
+                    <tr>
+                        <td><i>any printable character</i></td>
+                        <td>Moves focus to the option whose label starts with the characters being typed if dropdown is not editable.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h6>Filter Input Keyboard Support</h6>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Key</th>
-                            <th>Function</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td><i>down arrow</i></td>
-                            <td>Moves focus to the next option, if there is none then visual focus does not change.</td>
-                        </tr>
-                        <tr>
-                            <td><i>up arrow</i></td>
-                            <td>Moves focus to the previous option, if there is none then visual focus does not change.</td>
-                        </tr>
-                        <tr>
-                            <td><i>left arrow</i></td>
-                            <td>Removes the visual focus from the current option and moves input cursor to one character left.</td>
-                        </tr>
-                        <tr>
-                            <td><i>right arrow</i></td>
-                            <td>Removes the visual focus from the current option and moves input cursor to one character right.</td>
-                        </tr>
-                        <tr>
-                            <td><i>home</i></td>
-                            <td>Moves input cursor at the end, if not then moves focus to the first option.</td>
-                        </tr>
-                        <tr>
-                            <td><i>end</i></td>
-                            <td>Moves input cursor at the beginning, if not then moves focus to the last option.</td>
-                        </tr>
-                        <tr>
-                            <td><i>enter</i></td>
-                            <td>Closes the popup and moves focus to the dropdown element.</td>
-                        </tr>
-                        <tr>
-                            <td><i>escape</i></td>
-                            <td>Closes the popup and moves focus to the dropdown element.</td>
-                        </tr>
-                        <tr>
-                            <td><i>tab</i></td>
-                            <td>Moves focus to the next focusable element in the popup. If there is none, the focusable option is selected and the overlay is closed then moves focus to next element in page.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h6>Filter Input Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>down arrow</i></td>
+                        <td>Moves focus to the next option, if there is none then visual focus does not change.</td>
+                    </tr>
+                    <tr>
+                        <td><i>up arrow</i></td>
+                        <td>Moves focus to the previous option, if there is none then visual focus does not change.</td>
+                    </tr>
+                    <tr>
+                        <td><i>left arrow</i></td>
+                        <td>Removes the visual focus from the current option and moves input cursor to one character left.</td>
+                    </tr>
+                    <tr>
+                        <td><i>right arrow</i></td>
+                        <td>Removes the visual focus from the current option and moves input cursor to one character right.</td>
+                    </tr>
+                    <tr>
+                        <td><i>home</i></td>
+                        <td>Moves input cursor at the end, if not then moves focus to the first option.</td>
+                    </tr>
+                    <tr>
+                        <td><i>end</i></td>
+                        <td>Moves input cursor at the beginning, if not then moves focus to the last option.</td>
+                    </tr>
+                    <tr>
+                        <td><i>enter</i></td>
+                        <td>Closes the popup and moves focus to the dropdown element.</td>
+                    </tr>
+                    <tr>
+                        <td><i>escape</i></td>
+                        <td>Closes the popup and moves focus to the dropdown element.</td>
+                    </tr>
+                    <tr>
+                        <td><i>tab</i></td>
+                        <td>Moves focus to the next focusable element in the popup. If there is none, the focusable option is selected and the overlay is closed then moves focus to next element in page.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc>
-    </ClientOnly>
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
diff --git a/pages/dropdown/index.vue b/pages/dropdown/index.vue
index 63c0cc5bf..5d80f339a 100755
--- a/pages/dropdown/index.vue
+++ b/pages/dropdown/index.vue
@@ -29,7 +29,7 @@
                 <h5>Advanced with Templating, Filtering and Clear Icon</h5>
                 <Dropdown v-model="selectedCountry" :options="countries" optionLabel="name" :filter="true" placeholder="Select a Country" :showClear="true">
                     <template #value="slotProps">
-                        <div class="country-item country-item-value" v-if="slotProps.value">
+                        <div v-if="slotProps.value" class="country-item country-item-value">
                             <img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.value.code.toLowerCase()" />
                             <div>{{ slotProps.value.name }}</div>
                         </div>
diff --git a/pages/dynamicdialog/DynamicDialogDoc.vue b/pages/dynamicdialog/DynamicDialogDoc.vue
index e8386c833..1fb9d1c5d 100644
--- a/pages/dynamicdialog/DynamicDialogDoc.vue
+++ b/pages/dynamicdialog/DynamicDialogDoc.vue
@@ -1,10 +1,9 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="DynamicDialogDemo" :sources="sources" :extFiles="extFiles" :service="['ProductService']" :data="['products-small']" github="dynamicdialog/DynamicDialogDemo.vue">
-            <h5>DialogService</h5>
-            <p>Dynamic dialogs require the <i>DialogService</i> to be configured globally.</p>
+    <AppDoc name="DynamicDialogDemo" :sources="sources" :extFiles="extFiles" :service="['ProductService']" :data="['products-small']" github="dynamicdialog/DynamicDialogDemo.vue">
+        <h5>DialogService</h5>
+        <p>Dynamic dialogs require the <i>DialogService</i> to be configured globally.</p>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 import {createApp} from 'vue';
 import DialogService from 'primevue/dialogservice';
 
@@ -13,50 +12,50 @@ app.use(DialogService);
 
 </code></pre>
 
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import DynamicDialog from 'primevue/dynamicdialog';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/dynamicdialog/dynamicdialog.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p>Ideal location of a DynamicDialog is the main application template so that it can be used by any component within the application.</p>
+        <h5>Getting Started</h5>
+        <p>Ideal location of a DynamicDialog is the main application template so that it can be used by any component within the application.</p>
 
-            <pre v-code><code>
+        <pre v-code><code>
 &lt;template&gt;
     &lt;DynamicDialog /&gt;
 &lt;template&gt;
 
 </code></pre>
 
-            <h5>Options API</h5>
-            <p><i>$dialog</i> is available as a property in the application instance.</p>
-            <pre v-code.script><code>
+        <h5>Options API</h5>
+        <p><i>$dialog</i> is available as a property in the application instance.</p>
+        <pre v-code.script><code>
 const dialogRef = this.$dialog;
 
 </code></pre>
 
-            <h5>Composition API</h5>
-            <p>The service can be injected with the <i>useDialog</i> function.</p>
-            <pre v-code.script><code>
+        <h5>Composition API</h5>
+        <p>The service can be injected with the <i>useDialog</i> function.</p>
+        <pre v-code.script><code>
 import { useDialog } from 'primevue/usedialog';
 
 const dialog = useDialog();
 
 </code></pre>
 
-            <h5>Opening a Dialog</h5>
-            <p>The <i>open</i> function of the <i>DialogService</i> is used to open a Dialog. First parameter is the component to load and second one is the configuration object to customize the Dialog.</p>
+        <h5>Opening a Dialog</h5>
+        <p>The <i>open</i> function of the <i>DialogService</i> is used to open a Dialog. First parameter is the component to load and second one is the configuration object to customize the Dialog.</p>
 
-            <h6>Options API</h6>
-            <pre v-code.script><code>
+        <h6>Options API</h6>
+        <pre v-code.script><code>
 import ProductListDemo from './ProductListDemo';
 
 export default {
@@ -69,8 +68,8 @@ export default {
 
 </code></pre>
 
-            <h6>Composition API</h6>
-            <pre v-code.script><code>
+        <h6>Composition API</h6>
+        <pre v-code.script><code>
 import ProductListDemo from './ProductListDemo';
 import { useDialog } from 'primevue/usedialog';
 
@@ -85,11 +84,11 @@ export default {
 
 </code></pre>
 
-            <h5>Closing a Dialog</h5>
-            <p>The <i>close</i> function of the <i>dialogRef</i> is used to hide a Dialog. The <i>dialogRef</i> is injected to the component that is loaded by the dialog.</p>
+        <h5>Closing a Dialog</h5>
+        <p>The <i>close</i> function of the <i>dialogRef</i> is used to hide a Dialog. The <i>dialogRef</i> is injected to the component that is loaded by the dialog.</p>
 
-            <h6>Options API</h6>
-            <pre v-code.script><code>
+        <h6>Options API</h6>
+        <pre v-code.script><code>
 export default {
     inject: ['dialogRef'],
     methods:{
@@ -101,8 +100,8 @@ export default {
 
 </code></pre>
 
-            <h6>Composition API</h6>
-            <pre v-code.script><code>
+        <h6>Composition API</h6>
+        <pre v-code.script><code>
 import { inject } from 'vue'
 
 export default {
@@ -116,10 +115,10 @@ export default {
 
 </code></pre>
 
-            <h5>Passing Data</h5>
-            <p>Data can be passed to the component that is loaded by the Dialog and also from the component back to the caller component. Use the <i>open</i> function and pass your parameters with the <i>data</i> property in the options object.</p>
+        <h5>Passing Data</h5>
+        <p>Data can be passed to the component that is loaded by the Dialog and also from the component back to the caller component. Use the <i>open</i> function and pass your parameters with the <i>data</i> property in the options object.</p>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 this.$dialog.open(ProductListDemo, {
     data: {
         user: 'primetime'
@@ -128,7 +127,7 @@ this.$dialog.open(ProductListDemo, {
 
 </code></pre>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 export default {
     inject: ['dialogRef'],
     mounted:{
@@ -138,8 +137,8 @@ export default {
 
 </code></pre>
 
-            <p>Similarly when hiding a Dialog, any parameter passed to the <i>close</i> function is received from the <i>onClose</i> callback defined by the <i>open</i> function at the caller.</p>
-            <pre v-code.script><code>
+        <p>Similarly when hiding a Dialog, any parameter passed to the <i>close</i> function is received from the <i>onClose</i> callback defined by the <i>open</i> function at the caller.</p>
+        <pre v-code.script><code>
 this.$dialog.open(ProductListDemo, {
     onClose(options) {
         const callbackParams = options.data; //{id: 12}
@@ -148,7 +147,7 @@ this.$dialog.open(ProductListDemo, {
 
 </code></pre>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 export default {
     inject: ['dialogRef'],
     methods:{
@@ -160,10 +159,10 @@ export default {
 
 </code></pre>
 
-            <h5>Customizing a Dialog</h5>
-            <p><i>props</i> option is used to customize the dynamically generated Dialog, refer to the <nuxt-link to="/dialog">Dialog</nuxt-link> documentation for the whole list of options.</p>
+        <h5>Customizing a Dialog</h5>
+        <p><i>props</i> option is used to customize the dynamically generated Dialog, refer to the <router-link to="/dialog">Dialog</router-link> documentation for the whole list of options.</p>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 import { h } from 'vue';
 import Button from 'primevue/button';
 import ProductListDemo from './ProductListDemo';
@@ -203,114 +202,119 @@ export default {
 }
 </code></pre>
 
-            <h5>DialogService API</h5>
-            <p>DialogService is the main entry point to open a dialog and load any content within.</p>
+        <h5>DialogService API</h5>
+        <p>DialogService is the main entry point to open a dialog and load any content within.</p>
 
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>open</td>
-                            <td>
-                                content: The component to load<br />
-                                options: Configuration of the Dialog
-                            </td>
-                            <td>Creates a dialog dynamically with the given options and loads the component. See the <i>Dialog Open Configuration API</i> section below for the avaiable properties.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>open</td>
+                        <td>
+                            content: The component to load<br />
+                            options: Configuration of the Dialog
+                        </td>
+                        <td>Creates a dialog dynamically with the given options and loads the component. See the <i>Dialog Open Configuration API</i> section below for the avaiable properties.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dialog Open Configuration API</h5>
-            <p>Options to configure a dynamically loaded Dialog including Dialog props, data to pass and callback to execute on hide.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>props</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Properties of a dialog.</td>
-                        </tr>
-                        <tr>
-                            <td>data</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Data to pass to the loaded component.</td>
-                        </tr>
-                        <tr>
-                            <td>templates</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Templates of a dialog including, <strong>header</strong> and <strong>footer</strong>.</td>
-                        </tr>
-                        <tr>
-                            <td>onClose</td>
-                            <td>function</td>
-                            <td>null</td>
-                            <td>Function callback to invoke when dialog is closed.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Dialog Open Configuration API</h5>
+        <p>Options to configure a dynamically loaded Dialog including Dialog props, data to pass and callback to execute on hide.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>props</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Properties of a dialog.</td>
+                    </tr>
+                    <tr>
+                        <td>data</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Data to pass to the loaded component.</td>
+                    </tr>
+                    <tr>
+                        <td>templates</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Templates of a dialog including, <strong>header</strong> and <strong>footer</strong>.</td>
+                    </tr>
+                    <tr>
+                        <td>onClose</td>
+                        <td>function</td>
+                        <td>null</td>
+                        <td>Function callback to invoke when dialog is closed.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dialog Ref API</h5>
-            <p>Reference to the dynamic dialog that can be used to access the passed data and close the dialog with the option of passing data back to the caller.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>content</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Loaded content of a dialog.</td>
-                        </tr>
-                        <tr>
-                            <td>options</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Options used to open a dialog.</td>
-                        </tr>
-                        <tr>
-                            <td>data</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Data passed to the dialog.</td>
-                        </tr>
-                        <tr>
-                            <td>close</td>
-                            <td>function</td>
-                            <td>null</td>
-                            <td>Function to close a dialog.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </AppDoc>
-    </ClientOnly>
+        <h5>Dialog Ref API</h5>
+        <p>Reference to the dynamic dialog that can be used to access the passed data and close the dialog with the option of passing data back to the caller.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>content</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Loaded content of a dialog.</td>
+                    </tr>
+                    <tr>
+                        <td>options</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Options used to open a dialog.</td>
+                    </tr>
+                    <tr>
+                        <td>data</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Data passed to the dialog.</td>
+                    </tr>
+                    <tr>
+                        <td>close</td>
+                        <td>function</td>
+                        <td>null</td>
+                        <td>Function to close a dialog.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h5>Accessibility</h5>
+        <p>DynamicDialog uses the Dialog component internally, visit <router-link to="/dialog">dialog</router-link> for more information.</p>
+
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
@@ -514,7 +518,7 @@ export default {
 			<p-column field="name" header="Name"></p-column>
             <p-column header="Image">
                 <template #body="slotProps">
-                    <img :src="'/demo/images/product/' + slotProps.data.image" @error="(e) => e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'" :alt="slotProps.data.name" class="shadow-2 w-4rem" />
+                    <img :src="'demo/images/product/' + slotProps.data.image" @error="(e) => e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'" :alt="slotProps.data.name" class="shadow-2 w-4rem" />
                 </template>
             </p-column>
 			<p-column field="category" header="Category"></p-column>
@@ -612,7 +616,7 @@ export default {
 			<Column field="name" header="Name"></Column>
             <Column header="Image">
                 <template #body="slotProps">
-                    <img :src="'/demo/images/product/' + slotProps.data.image" @error="(e) => e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'" :alt="slotProps.data.name" class="shadow-2 w-4rem" />
+                    <img :src="'demo/images/product/' + slotProps.data.image" @error="(e) => e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'" :alt="slotProps.data.name" class="shadow-2 w-4rem" />
                 </template>
             </Column>
 			<Column field="category" header="Category"></Column>
@@ -711,7 +715,7 @@ export default {
 			<Column field="name" header="Name"></Column>
             <Column header="Image">
                 <template #body="slotProps">
-                    <img :src="'/demo/images/product/' + slotProps.data.image" @error="(e) => e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'" :alt="slotProps.data.name" class="shadow-2 w-4rem" />
+                    <img :src="'demo/images/product/' + slotProps.data.image" @error="(e) => e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'" :alt="slotProps.data.name" class="shadow-2 w-4rem" />
                 </template>
             </Column>
 			<Column field="category" header="Category"></Column>
diff --git a/pages/dynamicdialog/InfoDemo.vue b/pages/dynamicdialog/InfoDemo.vue
index 83a633cad..3758bfdec 100644
--- a/pages/dynamicdialog/InfoDemo.vue
+++ b/pages/dynamicdialog/InfoDemo.vue
@@ -4,7 +4,7 @@
             There are <strong>{{ totalProducts }}</strong> products in total in this list.
         </p>
         <div class="flex justify-content-end">
-            <Button type="button" label="Close" @click="closeDialog"></Button>
+            <Button autofocus type="button" label="Close" @click="closeDialog"></Button>
         </div>
     </div>
 </template>
diff --git a/pages/dynamicdialog/ProductListDemo.vue b/pages/dynamicdialog/ProductListDemo.vue
index 9ebb550c8..379305802 100644
--- a/pages/dynamicdialog/ProductListDemo.vue
+++ b/pages/dynamicdialog/ProductListDemo.vue
@@ -8,7 +8,7 @@
             <Column field="name" header="Name"></Column>
             <Column header="Image">
                 <template #body="slotProps">
-                    <img :src="'/demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="shadow-2 w-4rem" />
+                    <img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="shadow-2 w-4rem" />
                 </template>
             </Column>
             <Column field="category" header="Category"></Column>
diff --git a/pages/dynamicdialog/index.vue b/pages/dynamicdialog/index.vue
index 2e39bc10d..0c90b1743 100644
--- a/pages/dynamicdialog/index.vue
+++ b/pages/dynamicdialog/index.vue
@@ -21,10 +21,10 @@
 </template>
 
 <script>
-import { h } from 'vue';
 import Button from 'primevue/button';
-import ProductListDemo from './ProductListDemo';
+import { h } from 'vue';
 import DynamicDialogDoc from './DynamicDialogDoc.vue';
+import ProductListDemo from './ProductListDemo';
 
 export default {
     methods: {
@@ -51,6 +51,7 @@ export default {
                 },
                 onClose: (options) => {
                     const data = options.data;
+
                     if (data) {
                         const buttonType = data.buttonType;
                         const summary_and_detail = buttonType ? { summary: 'No Product Selected', detail: `Pressed '${buttonType}' button` } : { summary: 'Product Selected', detail: data.name };
diff --git a/pages/editor/index.vue b/pages/editor/index.vue
index f5e5bbb64..fe29c1379 100755
--- a/pages/editor/index.vue
+++ b/pages/editor/index.vue
@@ -14,22 +14,19 @@
                 <Editor v-model="value1" editorStyle="height: 320px" />
 
                 <h5>Customized</h5>
-                <ClientOnly>
-                    <Editor v-model="value2" editorStyle="height: 320px">
-                        <template v-slot:toolbar>
-                            <span class="ql-formats">
-                                <button class="ql-bold" v-tooltip.bottom="'Bold'"></button>
-                                <button class="ql-italic" v-tooltip.bottom="'Italic'"></button>
-                                <button class="ql-underline" v-tooltip.bottom="'Underline'"></button>
-                            </span>
-                        </template>
-                    </Editor>
-                </ClientOnly>
+                <Editor v-model="value2" editorStyle="height: 320px">
+                    <template v-slot:toolbar>
+                        <span class="ql-formats">
+                            <button v-tooltip.bottom="'Bold'" class="ql-bold"></button>
+                            <button v-tooltip.bottom="'Italic'" class="ql-italic"></button>
+                            <button v-tooltip.bottom="'Underline'" class="ql-underline"></button>
+                        </span>
+                    </template>
+                </Editor>
             </div>
         </div>
-        <ClientOnly>
-            <EditorDoc />
-        </ClientOnly>
+
+        <EditorDoc />
     </div>
 </template>
 
diff --git a/pages/fieldset/FieldsetDoc.vue b/pages/fieldset/FieldsetDoc.vue
index 72e58ea40..adc773b11 100755
--- a/pages/fieldset/FieldsetDoc.vue
+++ b/pages/fieldset/FieldsetDoc.vue
@@ -1,22 +1,21 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="FieldsetDemo" :sources="sources" github="fieldset/FieldsetDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="FieldsetDemo" :sources="sources" github="fieldset/FieldsetDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import Fieldset from 'primevue/fieldset';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/fieldset/fieldset.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p>Fieldset is a container component that accepts content as its children.</p>
-            <pre v-code><code>
+        <h5>Getting Started</h5>
+        <p>Fieldset is a container component that accepts content as its children.</p>
+        <pre v-code><code>
 &lt;Fieldset legend="Godfather I"&gt;
 	The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
 	His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
@@ -26,9 +25,9 @@ import Fieldset from 'primevue/fieldset';
 
 </code></pre>
 
-            <h5>Custom Header</h5>
-            <p>Header of the panel is either defined with the <i>legend</i> property or the legend template.</p>
-            <pre v-code><code>
+        <h5>Custom Header</h5>
+        <p>Header of the panel is either defined with the <i>legend</i> property or the legend template.</p>
+        <pre v-code><code>
 &lt;Fieldset&gt;
     &lt;template #legend&gt;
         Header Content
@@ -38,9 +37,9 @@ import Fieldset from 'primevue/fieldset';
 
 </code></pre>
 
-            <h5>Toggleable</h5>
-            <p>Content of the fieldset can be expanded and collapsed using <i>toggleable</i> option..</p>
-            <pre v-code><code>
+        <h5>Toggleable</h5>
+        <p>Content of the fieldset can be expanded and collapsed using <i>toggleable</i> option..</p>
+        <pre v-code><code>
 &lt;Fieldset legend="Godfather I" :toggleable="true"&gt;
 	The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
 	His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
@@ -50,16 +49,16 @@ import Fieldset from 'primevue/fieldset';
 
 </code></pre>
 
-            <p>To control the initial state of the toggleable panel, use the <i>collapsed</i> property.</p>
-            <pre v-code><code>
+        <p>To control the initial state of the toggleable panel, use the <i>collapsed</i> property.</p>
+        <pre v-code><code>
 &lt;Fieldset legend="Header Text" :toggleable="true" :collapsed="true"&gt;
 	Content
 &lt;/Fieldset&gt;
 
 </code></pre>
 
-            <p>Use the v-model directive to enable two-way binding.</p>
-            <pre v-code><code>
+        <p>Use the v-model directive to enable two-way binding.</p>
+        <pre v-code><code>
 &lt;button type="button" @click="isCollapsed = !isCollapsed">Toggle Programmatically&lt;/button&gt;
 &lt;Fieldset legend="Header Text" :toggleable="true" v-model:collapsed="isCollapsed"&gt;
 	Content
@@ -67,164 +66,161 @@ import Fieldset from 'primevue/fieldset';
 
 </code></pre>
 
-            <h5>Properties</h5>
-            <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>legend</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Header text of the fieldset.</td>
-                        </tr>
-                        <tr>
-                            <td>toggleable</td>
-                            <td>boolean</td>
-                            <td>null</td>
-                            <td>When specified, content can toggled by clicking the legend.</td>
-                        </tr>
-                        <tr>
-                            <td>collapsed</td>
-                            <td>boolean</td>
-                            <td>null</td>
-                            <td>Defines the default visibility state of the content.</td>
-                        </tr>
-                        <tr>
-                            <td>toggleButtonProps</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Uses to pass the custom value to read for the anchor inside the component.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>legend</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Header text of the fieldset.</td>
+                    </tr>
+                    <tr>
+                        <td>toggleable</td>
+                        <td>boolean</td>
+                        <td>null</td>
+                        <td>When specified, content can toggled by clicking the legend.</td>
+                    </tr>
+                    <tr>
+                        <td>collapsed</td>
+                        <td>boolean</td>
+                        <td>null</td>
+                        <td>Defines the default visibility state of the content.</td>
+                    </tr>
+                    <tr>
+                        <td>toggleButtonProps</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Uses to pass the custom value to read for the anchor inside the component.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Events</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>toggle</td>
-                            <td>
-                                event.originalEvent: browser event <br />
-                                event.value: collapsed state as a boolean
-                            </td>
-                            <td>Callback to invoke when a tab gets expanded or collapsed.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Events</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>toggle</td>
+                        <td>
+                            event.originalEvent: browser event <br />
+                            event.value: collapsed state as a boolean
+                        </td>
+                        <td>Callback to invoke when a tab gets expanded or collapsed.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Slots</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>legend</td>
-                            <td>-</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Slots</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>legend</td>
+                        <td>-</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-fieldset</td>
-                            <td>Fieldset element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-fieldset-toggleable</td>
-                            <td>Toggleable fieldset element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-fieldset-legend</td>
-                            <td>Legend element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-fieldset-content</td>
-                            <td>Content element.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-fieldset</td>
+                        <td>Fieldset element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-fieldset-toggleable</td>
+                        <td>Toggleable fieldset element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-fieldset-legend</td>
+                        <td>Legend element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-fieldset-content</td>
+                        <td>Content element.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Accessibility</h5>
-            <DevelopmentSection>
-                <h6>Screen Reader</h6>
-                <p>
-                    Fieldset component uses the semantic <i>fieldset</i> element. When toggleable option is enabled, a clickable element with <i>button</i> role is included inside the <i>legend</i> element, this button has <i>aria-controls</i> to
-                    define the id of the content section along with <i>aria-expanded</i> for the visibility state. The value to read the button defaults to the value of the <i>legend</i> property and can be customized by defining an
-                    <i>aria-label</i> or <i>aria-labelledby</i> via the <i>toggleButtonProps</i> property.
-                </p>
-                <p>The content uses <i>region</i>, defines an id that matches the <i>aria-controls</i> of the content toggle button and <i>aria-labelledby</i> referring to the id of the header.</p>
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>
+            Fieldset component uses the semantic <i>fieldset</i> element. When toggleable option is enabled, a clickable element with <i>button</i> role is included inside the <i>legend</i> element, this button has <i>aria-controls</i> to define the
+            id of the content section along with <i>aria-expanded</i> for the visibility state. The value to read the button defaults to the value of the <i>legend</i> property and can be customized by defining an <i>aria-label</i> or
+            <i>aria-labelledby</i> via the <i>toggleButtonProps</i> property.
+        </p>
+        <p>The content uses <i>region</i>, defines an id that matches the <i>aria-controls</i> of the content toggle button and <i>aria-labelledby</i> referring to the id of the header.</p>
 
-                <h6>Content Toggle Button Keyboard Support</h6>
-                <div class="doc-tablewrapper">
-                    <table class="doc-table">
-                        <thead>
-                            <tr>
-                                <th>Key</th>
-                                <th>Function</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr>
-                                <td><i>tab</i></td>
-                                <td>Moves focus to the next the focusable element in the page tab sequence.</td>
-                            </tr>
-                            <tr>
-                                <td><i>shift</i> + <i>tab</i></td>
-                                <td>Moves focus to the previous the focusable element in the page tab sequence.</td>
-                            </tr>
-                            <tr>
-                                <td><i>enter</i></td>
-                                <td>Toggles the visibility of the content.</td>
-                            </tr>
-                            <tr>
-                                <td><i>space</i></td>
-                                <td>Toggles the visibility of the content.</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-            </DevelopmentSection>
+        <h6>Content Toggle Button Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>tab</i></td>
+                        <td>Moves focus to the next the focusable element in the page tab sequence.</td>
+                    </tr>
+                    <tr>
+                        <td><i>shift</i> + <i>tab</i></td>
+                        <td>Moves focus to the previous the focusable element in the page tab sequence.</td>
+                    </tr>
+                    <tr>
+                        <td><i>enter</i></td>
+                        <td>Toggles the visibility of the content.</td>
+                    </tr>
+                    <tr>
+                        <td><i>space</i></td>
+                        <td>Toggles the visibility of the content.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc>
-    </ClientOnly>
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
diff --git a/pages/fileupload/FileUploadDoc.vue b/pages/fileupload/FileUploadDoc.vue
index d66b59d8b..f86d7c2c5 100755
--- a/pages/fileupload/FileUploadDoc.vue
+++ b/pages/fileupload/FileUploadDoc.vue
@@ -1,388 +1,510 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="FileUploadDemo" :sources="sources" github="fileupload/FileUploadDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="FileUploadDemo" :sources="sources" github="fileupload/FileUploadDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import FileUpload from 'primevue/fileupload';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/fileupload/fileupload.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p>FileUpload requires a <i>url</i> property as the upload target and a <i>name</i> to identify the files at backend.</p>
-            <pre v-code><code>
+        <h5>Getting Started</h5>
+        <p>FileUpload requires a <i>url</i> property as the upload target and a <i>name</i> to identify the files at backend.</p>
+        <pre v-code><code>
 &lt;FileUpload name="demo[]" url="./upload" /&gt;
 
 </code></pre>
 
-            <h5>Multiple Uploads</h5>
-            <p>Only one file can be selected at a time by default, to allow selecting multiple files at once enable <i>multiple</i> option.</p>
-            <pre v-code><code>
+        <h5>Multiple Uploads</h5>
+        <p>Only one file can be selected at a time by default, to allow selecting multiple files at once enable <i>multiple</i> option.</p>
+        <pre v-code><code>
 &lt;FileUpload name="demo[]" url="./upload" :multiple="true" /&gt;
 
 </code></pre>
 
-            <h5>Basic UI</h5>
-            <p>FileUpload basic mode provides a simpler UI as an alternative to advanced mode.</p>
-            <pre v-code><code>
+        <h5>Basic UI</h5>
+        <p>FileUpload basic mode provides a simpler UI as an alternative to advanced mode.</p>
+        <pre v-code><code>
 &lt;FileUpload mode="basic" name="demo[]" url="./upload" /&gt;
 
 </code></pre>
 
-            <h5>DragDrop</h5>
-            <p>File selection can also be done by dragging and dropping from the filesystem to the content section of the component.</p>
+        <h5>DragDrop</h5>
+        <p>File selection can also be done by dragging and dropping from the filesystem to the content section of the component.</p>
 
-            <h5>Auto Uploads</h5>
-            <p>When <i>auto</i> property is enabled, upload begins as soon as file selection is completed or a file is dropped on the drop area.</p>
-            <pre v-code><code>
+        <h5>Auto Uploads</h5>
+        <p>When <i>auto</i> property is enabled, upload begins as soon as file selection is completed or a file is dropped on the drop area.</p>
+        <pre v-code><code>
 &lt;FileUpload mode="basic" name="demo[]" url="./upload" :auto="true" /&gt;
 
 </code></pre>
 
-            <h5>File Types</h5>
-            <p>Selectable file types can be restricted with <i>accept</i> property, example below only allows images to be uploaded. Read more about other possible values <a href="https://www.w3schools.com/tags/att_input_accept.asp"> here</a>.</p>
-            <pre v-code><code>
+        <h5>File Types</h5>
+        <p>Selectable file types can be restricted with <i>accept</i> property, example below only allows images to be uploaded. Read more about other possible values <a href="https://www.w3schools.com/tags/att_input_accept.asp"> here</a>.</p>
+        <pre v-code><code>
 &lt;FileUpload mode="basic" name="demo[]" url="./upload" accept="image/*" /&gt;
 
 </code></pre>
 
-            <h5>File Size and File Limit</h5>
-            <p>Maximium file size can be restricted using <i>maxFileSize</i> property defined in bytes. Similarly <i>fileLimit</i> is available to restrict the number of files to be uploaded.</p>
-            <pre v-code><code>
+        <h5>File Size and File Limit</h5>
+        <p>Maximium file size can be restricted using <i>maxFileSize</i> property defined in bytes. Similarly <i>fileLimit</i> is available to restrict the number of files to be uploaded.</p>
+        <pre v-code><code>
 &lt;FileUpload name="demo[]" url="./upload" :maxFileSize="1000000" :fileLimit="3" /&gt;
 
 </code></pre>
 
-            <p>In order to customize the default messages use <i>invalidFileSizeMessage</i> and <i>invalidFileLimitMessage</i> options where &#123;0&#125; placeholder refers to the filename and &#123;1&#125; the file size.</p>
-            <ul>
-                <li>invalidFileSizeMessage: '&#123;0&#125;: Invalid file size, file size should be smaller than &#123;1&#125;.'</li>
-                <li>invalidFileLimitMessage: 'Maximum number of files exceeded, limit is &#123;0&#125; at most.'</li>
-            </ul>
+        <p>In order to customize the default messages use <i>invalidFileSizeMessage</i> and <i>invalidFileLimitMessage</i> options where &#123;0&#125; placeholder refers to the filename and &#123;1&#125; the file size.</p>
+        <ul>
+            <li>invalidFileSizeMessage: '&#123;0&#125;: Invalid file size, file size should be smaller than &#123;1&#125;.'</li>
+            <li>invalidFileLimitMessage: 'Maximum number of files exceeded, limit is &#123;0&#125; at most.'</li>
+        </ul>
 
-            <h5>Request Customization</h5>
-            <p>XHR request to upload the files can be customized using the before-upload callback that passes the xhr instance and FormData object as event parameters.</p>
+        <h5>Request Customization</h5>
+        <p>XHR request to upload the files can be customized using the before-upload callback that passes the xhr instance and FormData object as event parameters.</p>
 
-            <h5>Custom Upload</h5>
-            <p>Uploading implementation can be overridden by enabling <i>customMode</i> property and defining a custom upload handler event.</p>
-            <pre v-code><code>
+        <h5>Custom Upload</h5>
+        <p>Uploading implementation can be overridden by enabling <i>customMode</i> property and defining a custom upload handler event.</p>
+        <pre v-code><code>
 &lt;FileUpload name="demo[]" :customUpload="true" @uploader="myUploader" /&gt;
 
 </code></pre>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 myUploader(event) {
     //event.files == files to upload
 }
 
 </code></pre>
 
-            <h5>Empty Template</h5>
-            <p>When there is no file selected, you may use the empty slot to display content.</p>
-            <pre v-code><code>
-&lt;FileUpload name="demo[]" url="./upload"&gt;
+        <h5>Templating</h5>
+        <p>FileUpload component is extremely customizable thanks to the templating features, both the <i>header</i> and <i>content</i> sections provide custom slots.</p>
+
+        <pre v-code><code>
+&lt;FileUpload name="demo[]" url="./upload.php" @upload="onTemplatedUpload($event)" :multiple="true" accept="image/*" :maxFileSize="1000000" @select="onSelectedFiles"&gt;
+    &lt;template #header="&#123; chooseCallback, uploadCallback, clearCallback, files &#125;"&gt;
+        &lt;div class="flex flex-wrap justify-content-between align-items-center flex-1 gap-2"&gt;
+            &lt;div class="flex gap-2"&gt;
+                &lt;Button @click="chooseCallback()" icon="pi pi-images" class="p-button-rounded"&gt;&lt;/Button&gt;
+                &lt;Button @click="uploadCallback()" icon="pi pi-cloud-upload" class="p-button-rounded p-button-success" :disabled="!files || files.length === 0"&gt;&lt;/Button&gt;
+                &lt;Button @click="clearCallback()" icon="pi pi-times" class="p-button-rounded p-button-danger" :disabled="!files || files.length === 0"&gt;&lt;/Button&gt;
+            &lt;/div&gt;
+            &lt;ProgressBar :value="totalSizePercent" :showValue="false" :class="['md:w-20rem h-1rem w-full md:ml-auto', &#123;'exceeded-progress-bar': (totalSizePercent &gt; 100)&#125;]"&gt;&lt;span class="white-space-nowrap"&gt;&#123;&#123; totalSize &#125;&#125;B / 1Mb&lt;/span&gt;&lt;/ProgressBar&gt;
+        &lt;/div&gt;
+    &lt;/template&gt;
+    &lt;template #content="&#123; files, uploadedFiles, onUploadedFileRemove, onFileRemove &#125;"&gt;
+        &lt;div v-if="files.length &gt; 0"&gt;
+            &lt;h5&gt;Pending&lt;/h5&gt;
+            &lt;div class="flex flex-wrap p-5 gap-5"&gt;
+                &lt;div v-for="(file, index) of files" :key="file.name + file.type + file.size" class="card m-0 px-6 flex flex-column border-1 surface-border align-items-center gap-3"&gt;
+                    &lt;div&gt;
+                        &lt;img role="presentation" :alt="file.name" :src="file.objectURL" height="50" class="shadow-2" /&gt;
+                    &lt;/div&gt;
+                    &lt;span class="font-semibold"&gt;&#123;&#123; file.name &#125;&#125;&lt;/span&gt;
+                    &lt;div&gt;&#123;&#123; formatSize(file.size) &#125;&#125;&lt;/div&gt;
+                    &lt;Badge value="Pending" severity="warning" /&gt;
+                    &lt;Button icon="pi pi-times" @click="onRemoveTemplatingFile(file, onFileRemove, index)" class="p-button-outlined p-button-danger p-button-rounded" /&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div v-if="uploadedFiles.length &gt; 0"&gt;
+            &lt;h5&gt;Completed&lt;/h5&gt;
+            &lt;div class="flex flex-wrap p-0 sm:p-5 gap-5"&gt;
+                &lt;div v-for="(file, index) of uploadedFiles" :key="file.name + file.type + file.size" class="card m-0 px-6 flex flex-column border-1 surface-border align-items-center gap-3"&gt;
+                    &lt;div&gt;
+                        &lt;img role="presentation" :alt="file.name" :src="file.objectURL" width="100" class="shadow-2" /&gt;
+                    &lt;/div&gt;
+                    &lt;span class="font-semibold"&gt;&#123;&#123; file.name &#125;&#125;&lt;/span&gt;
+                    &lt;div&gt;&#123;&#123; formatSize(file.size) &#125;&#125;&lt;/div&gt;
+                    &lt;Badge value="Completed" class="mt-3" severity="success" /&gt;
+                    &lt;Button icon="pi pi-times" @click="onUploadedFileRemove(index)" class="p-button-outlined p-button-danger p-button-rounded" /&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+    &lt;/template&gt;
     &lt;template #empty&gt;
-        &lt;p&gt;Drag and drop files to here to upload.&lt;/p&gt;
+        &lt;div class="flex align-items-center justify-content-center flex-column"&gt;
+            &lt;i class="pi pi-cloud-upload border-2 border-circle p-5 text-8xl text-400 border-400" /&gt;
+            &lt;p class="mt-4 mb-0"&gt;Drag and drop files to here to upload.&lt;/p&gt;
+        &lt;/div&gt;
     &lt;/template&gt;
 &lt;/FileUpload&gt;
 
 </code></pre>
 
-            <h5>Properties</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>name</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Name of the request parameter to identify the files at backend.</td>
-                        </tr>
-                        <tr>
-                            <td>url</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Remote url to upload the files.</td>
-                        </tr>
-                        <tr>
-                            <td>mode</td>
-                            <td>string</td>
-                            <td>advanced</td>
-                            <td>Defines the UI of the component, possible values are "advanced" and "basic".</td>
-                        </tr>
-                        <tr>
-                            <td>multiple</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Used to select multiple files at once from file dialog.</td>
-                        </tr>
-                        <tr>
-                            <td>accept</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Pattern to restrict the allowed file types such as "image/*".</td>
-                        </tr>
-                        <tr>
-                            <td>disabled</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Disables the upload functionality.</td>
-                        </tr>
-                        <tr>
-                            <td>auto</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When enabled, upload begins automatically after selection is completed.</td>
-                        </tr>
-                        <tr>
-                            <td>maxFileSize</td>
-                            <td>number</td>
-                            <td>null</td>
-                            <td>Maximum file size allowed in bytes.</td>
-                        </tr>
-                        <tr>
-                            <td>invalidFileSizeMessage</td>
-                            <td>string</td>
-                            <td>"&#123;0&#125;: Invalid file size, file size should be smaller than &#123;1&#125;."</td>
-                            <td>Message of the invalid fize size.</td>
-                        </tr>
-                        <tr>
-                            <td>invalidFileLimitMessage</td>
-                            <td>string</td>
-                            <td>Maximum number of files exceeded, limit is &#123;0&#125; at most.</td>
-                            <td>Message to display when number of files to be uploaded exceeeds the limit.</td>
-                        </tr>
-                        <tr>
-                            <td>fileLimit</td>
-                            <td>number</td>
-                            <td>null</td>
-                            <td>Maximum number of files that can be uploaded.</td>
-                        </tr>
-                        <tr>
-                            <td>withCredentials</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Cross-site Access-Control requests should be made using credentials such as cookies, authorization headers or TLS client certificates.</td>
-                        </tr>
-                        <tr>
-                            <td>previewWidth</td>
-                            <td>number</td>
-                            <td>50</td>
-                            <td>Width of the image thumbnail in pixels.</td>
-                        </tr>
-                        <tr>
-                            <td>chooseLabel</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Label of the choose button. Defaults to PrimeVue <nuxt-link to="/locale">Locale</nuxt-link> configuration.</td>
-                        </tr>
-                        <tr>
-                            <td>uploadLabel</td>
-                            <td>string</td>
-                            <td>Upload</td>
-                            <td>Label of the upload button. Defaults to PrimeVue <nuxt-link to="/locale">Locale</nuxt-link> configuration.</td>
-                        </tr>
-                        <tr>
-                            <td>cancelLabel</td>
-                            <td>string</td>
-                            <td>Cancel</td>
-                            <td>Label of the cancel button. Defaults to PrimeVue <nuxt-link to="/locale">Locale</nuxt-link> configuration.</td>
-                        </tr>
-                        <tr>
-                            <td>customUpload</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Whether to use the default upload or a manual implementation defined in uploadHandler callback. Defaults to PrimeVue <nuxt-link to="/locale">Locale</nuxt-link> configuration.</td>
-                        </tr>
-                        <tr>
-                            <td>showUploadButton</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether to show the upload button.</td>
-                        </tr>
-                        <tr>
-                            <td>showCancelButton</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether to show the cancel button.</td>
-                        </tr>
-                        <tr>
-                            <td>chooseIcon</td>
-                            <td>string</td>
-                            <td>pi pi-plus</td>
-                            <td>Icon of the choose button.</td>
-                        </tr>
-                        <tr>
-                            <td>uploadIcon</td>
-                            <td>string</td>
-                            <td>pi pi-upload</td>
-                            <td>Icon of the upload button.</td>
-                        </tr>
-                        <tr>
-                            <td>cancelIcon</td>
-                            <td>string</td>
-                            <td>pi pi-times</td>
-                            <td>Icon of the cancel button.</td>
-                        </tr>
-                        <tr>
-                            <td>style</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Inline style of the component.</td>
-                        </tr>
-                        <tr>
-                            <td>class</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the component.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>name</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Name of the request parameter to identify the files at backend.</td>
+                    </tr>
+                    <tr>
+                        <td>url</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Remote url to upload the files.</td>
+                    </tr>
+                    <tr>
+                        <td>mode</td>
+                        <td>string</td>
+                        <td>advanced</td>
+                        <td>Defines the UI of the component, possible values are "advanced" and "basic".</td>
+                    </tr>
+                    <tr>
+                        <td>multiple</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Used to select multiple files at once from file dialog.</td>
+                    </tr>
+                    <tr>
+                        <td>accept</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Pattern to restrict the allowed file types such as "image/*".</td>
+                    </tr>
+                    <tr>
+                        <td>disabled</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Disables the upload functionality.</td>
+                    </tr>
+                    <tr>
+                        <td>auto</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When enabled, upload begins automatically after selection is completed.</td>
+                    </tr>
+                    <tr>
+                        <td>maxFileSize</td>
+                        <td>number</td>
+                        <td>null</td>
+                        <td>Maximum file size allowed in bytes.</td>
+                    </tr>
+                    <tr>
+                        <td>invalidFileSizeMessage</td>
+                        <td>string</td>
+                        <td>"&#123;0&#125;: Invalid file size, file size should be smaller than &#123;1&#125;."</td>
+                        <td>Message of the invalid fize size.</td>
+                    </tr>
+                    <tr>
+                        <td>invalidFileLimitMessage</td>
+                        <td>string</td>
+                        <td>Maximum number of files exceeded, limit is &#123;0&#125; at most.</td>
+                        <td>Message to display when number of files to be uploaded exceeeds the limit.</td>
+                    </tr>
+                    <tr>
+                        <td>invalidFileTypeMessage</td>
+                        <td>string</td>
+                        <td>"&#123;0&#125;: Invalid file type, allowed file types: &#123;1&#125;"".</td>
+                        <td>Message of the invalid file type.</td>
+                    </tr>
+                    <tr>
+                        <td>fileLimit</td>
+                        <td>number</td>
+                        <td>null</td>
+                        <td>Maximum number of files that can be uploaded.</td>
+                    </tr>
+                    <tr>
+                        <td>withCredentials</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Cross-site Access-Control requests should be made using credentials such as cookies, authorization headers or TLS client certificates.</td>
+                    </tr>
+                    <tr>
+                        <td>previewWidth</td>
+                        <td>number</td>
+                        <td>50</td>
+                        <td>Width of the image thumbnail in pixels.</td>
+                    </tr>
+                    <tr>
+                        <td>chooseLabel</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Label of the choose button. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td>
+                    </tr>
+                    <tr>
+                        <td>uploadLabel</td>
+                        <td>string</td>
+                        <td>Upload</td>
+                        <td>Label of the upload button. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td>
+                    </tr>
+                    <tr>
+                        <td>cancelLabel</td>
+                        <td>string</td>
+                        <td>Cancel</td>
+                        <td>Label of the cancel button. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td>
+                    </tr>
+                    <tr>
+                        <td>customUpload</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Whether to use the default upload or a manual implementation defined in uploadHandler callback. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td>
+                    </tr>
+                    <tr>
+                        <td>showUploadButton</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Whether to show the upload button.</td>
+                    </tr>
+                    <tr>
+                        <td>showCancelButton</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Whether to show the cancel button.</td>
+                    </tr>
+                    <tr>
+                        <td>chooseIcon</td>
+                        <td>string</td>
+                        <td>pi pi-plus</td>
+                        <td>Icon of the choose button.</td>
+                    </tr>
+                    <tr>
+                        <td>uploadIcon</td>
+                        <td>string</td>
+                        <td>pi pi-upload</td>
+                        <td>Icon of the upload button.</td>
+                    </tr>
+                    <tr>
+                        <td>cancelIcon</td>
+                        <td>string</td>
+                        <td>pi pi-times</td>
+                        <td>Icon of the cancel button.</td>
+                    </tr>
+                    <tr>
+                        <td>style</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Inline style of the component.</td>
+                    </tr>
+                    <tr>
+                        <td>class</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the component.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Events</h5>
-            <div classe="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>before-upload</td>
-                            <td>
-                                event.xhr: XmlHttpRequest instance. <br />
-                                event.formData: FormData object.
-                            </td>
-                            <td>Callback to invoke before file upload begins to customize the request such as post parameters before the files.</td>
-                        </tr>
-                        <tr>
-                            <td>before-send</td>
-                            <td>
-                                event.xhr: XmlHttpRequest instance. <br />
-                                event.formData: FormData object.
-                            </td>
-                            <td>Callback to invoke before file send begins to customize the request such as adding headers.</td>
-                        </tr>
-                        <tr>
-                            <td>upload</td>
-                            <td>
-                                event.xhr: XmlHttpRequest instance.<br />
-                                event.files: Uploaded files.
-                            </td>
-                            <td>Callback to invoke when file upload is complete.</td>
-                        </tr>
-                        <tr>
-                            <td>error</td>
-                            <td>
-                                event.xhr: XmlHttpRequest instance.<br />
-                                event.files: Files that are not uploaded.
-                            </td>
-                            <td>Callback to invoke if file upload fails.</td>
-                        </tr>
-                        <tr>
-                            <td>clear</td>
-                            <td>-.</td>
-                            <td>Callback to invoke when files in queue are removed without uploading.</td>
-                        </tr>
-                        <tr>
-                            <td>select</td>
-                            <td>
-                                event.originalEvent: Original browser event. <br />
-                                event.files: List of selected files.
-                            </td>
-                            <td>Callback to invoke when files are selected.</td>
-                        </tr>
-                        <tr>
-                            <td>progress</td>
-                            <td>
-                                event.originalEvent: Original browser event. <br />
-                                event.progress: Calculated progress value.
-                            </td>
-                            <td>Callback to invoke when files are being uploaded.</td>
-                        </tr>
-                        <tr>
-                            <td>uploader</td>
-                            <td>event.files: List of selected files.</td>
-                            <td>Callback to invoke to implement a custom upload.</td>
-                        </tr>
-                        <tr>
-                            <td>remove</td>
-                            <td>
-                                event.file: Removed file. <br />
-                                event.files: Remaining files to be uploaded.
-                            </td>
-                            <td>Callback to invoke when a singe file is removed from the list.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Events</h5>
+        <div classe="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>before-upload</td>
+                        <td>
+                            event.xhr: XmlHttpRequest instance. <br />
+                            event.formData: FormData object.
+                        </td>
+                        <td>Callback to invoke before file upload begins to customize the request such as post parameters before the files.</td>
+                    </tr>
+                    <tr>
+                        <td>before-send</td>
+                        <td>
+                            event.xhr: XmlHttpRequest instance. <br />
+                            event.formData: FormData object.
+                        </td>
+                        <td>Callback to invoke before file send begins to customize the request such as adding headers.</td>
+                    </tr>
+                    <tr>
+                        <td>upload</td>
+                        <td>
+                            event.xhr: XmlHttpRequest instance.<br />
+                            event.files: Uploaded files.
+                        </td>
+                        <td>Callback to invoke when file upload is complete.</td>
+                    </tr>
+                    <tr>
+                        <td>error</td>
+                        <td>
+                            event.xhr: XmlHttpRequest instance.<br />
+                            event.files: Files that are not uploaded.
+                        </td>
+                        <td>Callback to invoke if file upload fails.</td>
+                    </tr>
+                    <tr>
+                        <td>clear</td>
+                        <td>-.</td>
+                        <td>Callback to invoke when files in queue are removed without uploading.</td>
+                    </tr>
+                    <tr>
+                        <td>select</td>
+                        <td>
+                            event.originalEvent: Original browser event. <br />
+                            event.files: List of selected files.
+                        </td>
+                        <td>Callback to invoke when files are selected.</td>
+                    </tr>
+                    <tr>
+                        <td>progress</td>
+                        <td>
+                            event.originalEvent: Original browser event. <br />
+                            event.progress: Calculated progress value.
+                        </td>
+                        <td>Callback to invoke when files are being uploaded.</td>
+                    </tr>
+                    <tr>
+                        <td>uploader</td>
+                        <td>event.files: List of selected files.</td>
+                        <td>Callback to invoke to implement a custom upload.</td>
+                    </tr>
+                    <tr>
+                        <td>remove</td>
+                        <td>
+                            event.file: Removed file. <br />
+                            event.files: Remaining files to be uploaded.
+                        </td>
+                        <td>Callback to invoke when a single file is removed from the file list to upload.</td>
+                    </tr>
+                    <tr>
+                        <td>removeUploadedFile</td>
+                        <td>
+                            event.file: Removed uploaded file. <br />
+                            event.files: Remaining uploaded files.
+                        </td>
+                        <td>Callback to invoke when a single uploaded file is removed from the uploaded file list.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Slots</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>empty</td>
-                            <td>-</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Slots</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>header</td>
+                        <td>
+                            files: Files to upload <br />
+                            uploadedFiles: Uploaded Files <br />
+                            chooseCallback: Choose function <br />
+                            uploadCallback: Upload function <br />
+                            clearCallback: Clear function
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>content</td>
+                        <td>
+                            files: Files to upload <br />
+                            uploadedFiles: Uploaded Files <br />
+                            progress: Uploaded progress as number <br />
+                            messages: Status messages about upload process <br />
+                            removeFileCallback(index): Function to remove a file <br />
+                            removeUploadedFileCallback(index): Function to remove an uploaded file
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>empty</td>
+                        <td>-</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-fileupload</td>
-                            <td>Container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-fileupload-buttonbar</td>
-                            <td>Header containing the buttons.</td>
-                        </tr>
-                        <tr>
-                            <td>p-fileupload-content</td>
-                            <td>Content section.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-fileupload</td>
+                        <td>Container element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-fileupload-basic</td>
+                        <td>Container element in basic mode.</td>
+                    </tr>
+                    <tr>
+                        <td>p-fileupload-advanced</td>
+                        <td>Container element in advanced mode.</td>
+                    </tr>
+                    <tr>
+                        <td>p-fileupload-buttonbar</td>
+                        <td>Header containing the buttons.</td>
+                    </tr>
+                    <tr>
+                        <td>p-fileupload-content</td>
+                        <td>Content section.</td>
+                    </tr>
+                    <tr>
+                        <td>p-fileupload-file</td>
+                        <td>File item.</td>
+                    </tr>
+                    <tr>
+                        <td>p-fileupload-file-thumbnail</td>
+                        <td>Image preview of a file.</td>
+                    </tr>
+                    <tr>
+                        <td>p-fileupload-file-details</td>
+                        <td>Container of file details.</td>
+                    </tr>
+                    <tr>
+                        <td>p-fileupload-file-name</td>
+                        <td>File name element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-fileupload-file-size</td>
+                        <td>File size element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-fileupload-file-badge</td>
+                        <td>File badge element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-fileupload-file-actions</td>
+                        <td>Container of file actions.</td>
+                    </tr>
+                    <tr>
+                        <td>p-fileupload-file-remove</td>
+                        <td>Button to remove a file.</td>
+                    </tr>
+                    <tr>
+                        <td>p-fileupload-empty</td>
+                        <td>Container of the empty slot.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc>
-    </ClientOnly>
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
@@ -398,12 +520,68 @@ export default {
 		<Toast />
 
         <h5>Advanced</h5>
-        <FileUpload name="demo[]" url="./upload.php" @upload="onUpload" :multiple="true" accept="image/*" :maxFileSize="1000000">
+        <FileUpload name="demo[]" url="https://www.primefaces.org/upload.php" @upload="onAdvancedUpload($event)" :multiple="true" accept="image/*" :maxFileSize="1000000">
+            <template #content>
+                <ul v-if="uploadedFiles && uploadedFiles[0]">
+                    <li v-for="file of uploadedFiles[0]" :key="file">{{ file.name }} - {{ file.size }} bytes</li>
+                </ul>
+            </template>
             <template #empty>
                 <p>Drag and drop files to here to upload.</p>
             </template>
         </FileUpload>
 
+        <h5>Templating</h5>
+        <FileUpload name="demo[]" url="./upload.php" @upload="onTemplatedUpload($event)" :multiple="true" accept="image/*" :maxFileSize="1000000" @select="onSelectedFiles">
+            <template #header="{ chooseCallback, uploadCallback, clearCallback, files }">
+                <div class="flex flex-wrap justify-content-between align-items-center flex-1 gap-2">
+                    <div class="flex gap-2">
+                        <Button @click="chooseCallback()" icon="pi pi-images" class="p-button-rounded"></Button>
+                        <Button @click="uploadEvent(uploadCallback)" icon="pi pi-cloud-upload" class="p-button-rounded p-button-success" :disabled="!files || files.length === 0"></Button>
+                        <Button @click="clearCallback()" icon="pi pi-times" class="p-button-rounded p-button-danger" :disabled="!files || files.length === 0"></Button>
+                    </div>
+                    <ProgressBar :value="totalSizePercent" :showValue="false" :class="['md:w-20rem h-1rem w-full md:ml-auto', {'exceeded-progress-bar': (totalSizePercent > 100)}]"><span class="white-space-nowrap">{{ totalSize }}B / 1Mb</span></ProgressBar>
+                </div>
+            </template>
+            <template #content="{ files, uploadedFiles, removeUploadedFileCallback, fileRemoveCallback }">
+                <div v-if="files.length > 0">
+                    <h5>Pending</h5>
+                    <div class="flex flex-wrap p-5 gap-5">
+                        <div v-for="(file, index) of files" :key="file.name + file.type + file.size" class="card m-0 px-6 flex flex-column border-1 surface-border align-items-center gap-3">
+                            <div>
+                                <img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" class="shadow-2" />
+                            </div>
+                            <span class="font-semibold">{{ file.name }}</span>
+                            <div>{{ formatSize(file.size) }}</div>
+                            <Badge value="Pending" severity="warning" />
+                            <Button icon="pi pi-times" @click="onRemoveTemplatingFile(file, fileRemoveCallback, index)" class="p-button-outlined p-button-danger p-button-rounded" />
+                        </div>
+                    </div>
+                </div>
+
+                <div v-if="uploadedFiles.length > 0">
+                    <h5>Completed</h5>
+                    <div class="flex flex-wrap p-0 sm:p-5 sm:p-5 gap-5">
+                        <div v-for="(file, index) of uploadedFiles" :key="file.name + file.type + file.size" class="card m-0 px-6 flex flex-column border-1 surface-border align-items-center gap-3">
+                            <div>
+                                <img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" class="shadow-2" />
+                            </div>
+                            <span class="font-semibold">{{ file.name }}</span>
+                            <div>{{ formatSize(file.size) }}</div>
+                            <Badge value="Completed" class="mt-3" severity="success" />
+                            <Button icon="pi pi-times" @click="removeUploadedFileCallback(index)" class="p-button-outlined p-button-danger p-button-rounded" />
+                        </div>
+                    </div>
+                </div>
+            </template>
+            <template #empty>
+                <div class="flex align-items-center justify-content-center flex-column">
+                    <i class="pi pi-cloud-upload border-2 border-circle p-5 text-8xl text-400 border-400" />
+                    <p class="mt-4 mb-0">Drag and drop files to here to upload.</p>
+                </div>
+            </template>
+        </FileUpload>
+
         <h5>Basic</h5>
         <FileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" :maxFileSize="1000000" @upload="onUpload" />
 
@@ -414,13 +592,69 @@ export default {
 
 <script>
 export default {
+    data() {
+        return {
+            uploadedFiles: [],
+            files: [],
+            totalSize: 0,
+            totalSizePercent: 0
+        };
+    },
     methods: {
+        onRemoveTemplatingFile(file, onFileRemove, index) {
+            onFileRemove(index);
+            this.totalSize -= parseInt(this.formatSize(file.size));
+            this.totalSizePercent = this.totalSize / 10;
+        },
+        onClearTemplatingUpload(clear) {
+            clear();
+            this.totalSize = 0;
+            this.totalSizePercent = 0;
+        },
+        onSelectedFiles(event) {
+            this.files = event.files;
+            this.files.forEach((file) => {
+                this.totalSize += parseInt(this.formatSize(file.size));
+            });
+        },
+        onAdvancedUpload() {
+            this.$toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
+        },
+        uploadEvent(callback) {
+            this.totalSizePercent = this.totalSize / 10;
+            callback();
+        },
+        onTemplatedUpload() {
+            this.totalSize = 0;
+            this.totalSizePercent = 0;
+            this.$toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
+        },
         onUpload() {
-            this.$toast.add({severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000});
+            this.$toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
+        },
+        formatSize(bytes) {
+            if (bytes === 0) {
+                return '0 B';
+            }
+
+            let k = 1000,
+                dm = 3,
+                sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
+                i = Math.floor(Math.log(bytes) / Math.log(k));
+
+            return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
         }
     }
-}
+};
 <\\/script>
+
+<style lang="scss" scoped>
+    ::v-deep(.custom-progress-bar) {
+        .p-progressbar-value {
+            background-color: #f44336;
+        }
+    }
+</style>
 `
                 },
                 'composition-api': {
@@ -431,12 +665,68 @@ export default {
 		<Toast />
 
         <h5>Advanced</h5>
-        <FileUpload name="demo[]" url="./upload.php" @upload="onUpload" :multiple="true" accept="image/*" :maxFileSize="1000000">
+        <FileUpload name="demo[]" url="https://www.primefaces.org/upload.php" @upload="onAdvancedUpload($event)" :multiple="true" accept="image/*" :maxFileSize="1000000">
+            <template #content>
+                <ul v-if="uploadedFiles && uploadedFiles[0]">
+                    <li v-for="file of uploadedFiles[0]" :key="file">{{ file.name }} - {{ file.size }} bytes</li>
+                </ul>
+            </template>
             <template #empty>
                 <p>Drag and drop files to here to upload.</p>
             </template>
         </FileUpload>
 
+        <h5>Templating</h5>
+        <FileUpload name="demo[]" url="./upload.php" @upload="onTemplatedUpload($event)" :multiple="true" accept="image/*" :maxFileSize="1000000" @select="onSelectedFiles">
+            <template #header="{ chooseCallback, uploadCallback, clearCallback, files }">
+                <div class="flex flex-wrap justify-content-between align-items-center flex-1 gap-2">
+                    <div class="flex gap-2">
+                        <Button @click="chooseCallback()" icon="pi pi-images" class="p-button-rounded"></Button>
+                        <Button @click="uploadEvent(uploadCallback)" icon="pi pi-cloud-upload" class="p-button-rounded p-button-success" :disabled="!files || files.length === 0"></Button>
+                        <Button @click="clearCallback()" icon="pi pi-times" class="p-button-rounded p-button-danger" :disabled="!files || files.length === 0"></Button>
+                    </div>
+                    <ProgressBar :value="totalSizePercent" :showValue="false" :class="['md:w-20rem h-1rem w-full md:ml-auto', {'exceeded-progress-bar': (totalSizePercent > 100)}]"><span class="white-space-nowrap">{{ totalSize }}B / 1Mb</span></ProgressBar>
+                </div>
+            </template>
+            <template #content="{ files, uploadedFiles, removeUploadedFileCallback, fileRemoveCallback }">
+                <div v-if="files.length > 0">
+                    <h5>Pending</h5>
+                    <div class="flex flex-wrap p-0 sm:p-5 gap-5">
+                        <div v-for="(file, index) of files" :key="file.name + file.type + file.size" class="card m-0 px-6 flex flex-column border-1 surface-border align-items-center gap-3">
+                            <div>
+                                <img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" class="shadow-2" />
+                            </div>
+                            <span class="font-semibold">{{ file.name }}</span>
+                            <div>{{ formatSize(file.size) }}</div>
+                            <Badge value="Pending" severity="warning" />
+                            <Button icon="pi pi-times" @click="onRemoveTemplatingFile(file, fileRemoveCallback, index)" class="p-button-outlined p-button-danger p-button-rounded" />
+                        </div>
+                    </div>
+                </div>
+
+                <div v-if="uploadedFiles.length > 0">
+                    <h5>Completed</h5>
+                    <div class="flex flex-wrap p-0 sm:p-5 gap-5">
+                        <div v-for="(file, index) of uploadedFiles" :key="file.name + file.type + file.size" class="card m-0 px-6 flex flex-column border-1 surface-border align-items-center gap-3">
+                            <div>
+                                <img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" class="shadow-2" />
+                            </div>
+                            <span class="font-semibold">{{ file.name }}</span>
+                            <div>{{ formatSize(file.size) }}</div>
+                            <Badge value="Completed" class="mt-3" severity="success" />
+                            <Button icon="pi pi-times" @click="removeUploadedFileCallback(index)" class="p-button-outlined p-button-danger p-button-rounded" />
+                        </div>
+                    </div>
+                </div>
+            </template>
+            <template #empty>
+                <div class="flex align-items-center justify-content-center flex-column">
+                    <i class="pi pi-cloud-upload border-2 border-circle p-5 text-8xl text-400 border-400" />
+                    <p class="mt-4 mb-0">Drag and drop files to here to upload.</p>
+                </div>
+            </template>
+        </FileUpload>
+
         <h5>Basic</h5>
         <FileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" :maxFileSize="1000000" @upload="onUpload" />
 
@@ -452,30 +742,148 @@ import { useToast } from 'primevue/usetoast';
 export default {
 	setup() {
 		const toast = useToast();
-		const onUpload = () => {
-            toast.add({severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000});
+        const uploadedFile = ref([]);
+        const files = ref([]);
+        const totalSize = ref(0);
+        const totalSizePercent = ref(0);
+
+        const onRemoveTemplatingFile = (file, onFileRemove, index) => {
+            onFileRemove(index);
+            totalSize.value -= parseInt(this.formatSize(file.size));
+            totalSizePercent.value = totalSize.value / 10;
         }
 
-		return { onUpload };
+        const onClearTemplatingUpload = (clear) => {
+            clear();
+            totalSize.value = 0;
+            totalSizePercent.value = 0;
+        }
+
+        const onSelectedFiles = (event) => {
+            files.value = event.files;
+            files.value.forEach((file) => {
+                totalSize.value += parseInt(this.formatSize(file.size));
+            });
+        }
+
+        const onAdvancedUpload = () => {
+            toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
+        }
+
+        const uploadEvent = (callback) => {
+            totalSizePercent.value = totalSize.value / 10;
+            callback();
+        },
+
+        const onTemplatedUpload = () => {
+            totalSize.value = 0;
+            totalSizePercent.value = 0;
+            toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
+        }
+
+        const onUpload = () => {
+            toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
+        }
+
+        const formatSize = (bytes) => {
+            if (bytes === 0) {
+                return '0 B';
+            }
+
+            let k = 1000,
+                dm = 3,
+                sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
+                i = Math.floor(Math.log(bytes) / Math.log(k));
+
+            return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+        }
+
+
+		return { onUpload, onRemoveTemplatingFile, onClearTemplatingUpload, onSelectedFiles, onAdvancedUpload, uploadEvent, onTemplatedUpload, onUpload, formatSize };
 	}
 }
 <\\/script>
+
+<style lang="scss" scoped>
+    ::v-deep(.custom-progress-bar) {
+        .p-progressbar-value {
+            background-color: #f44336;
+        }
+    }
+</style>
 `
                 },
                 'browser-source': {
                     tabName: 'Browser Source',
                     imports: `<script src="https://unpkg.com/primevue@^3/fileupload/fileupload.min.js"><\\/script>
-			<script src="https://unpkg.com/primevue@^3/toast/toast.min.js"><\\/script>
+            <script src="https://unpkg.com/primevue@^3/badge/badge.min.js"><\\/script>
+            <script src="https://unpkg.com/primevue@^3/toast/toast.min.js"><\\/script>
 			<script src="https://unpkg.com/primevue@^3/toastservice/toastservice.min.js"><\\/script>`,
                     content: `<div id="app">
 				<p-toast></p-toast>
 
-				<h5>Advanced</h5>
-				<p-fileupload name="demo[]" url="./upload.php" @upload="onUpload" :multiple="true" accept="image/*" :max-file-size="1000000">
-					<template #empty>
-						<p>Drag and drop files to here to upload.</p>
-					</template>
-				</p-fileupload>
+                <h5>Advanced</h5>
+                <p-fileupload name="demo[]" url="https://www.primefaces.org/upload.php" @upload="onAdvancedUpload($event)" :multiple="true" accept="image/*" :max-file-size="1000000">
+                    <template #content>
+                        <ul v-if="uploadedFiles && uploadedFiles[0]">
+                            <li v-for="file of uploadedFiles[0]" :key="file">{{ file.name }} - {{ file.size }} bytes</li>
+                        </ul>
+                    </template>
+                    <template #empty>
+                        <p>Drag and drop files to here to upload.</p>
+                    </template>
+                </p-fileupload>
+
+                <h5>Templating</h5>
+                <p-fileupload name="demo[]" url="./upload.php" @upload="onTemplatedUpload($event)" :multiple="true" accept="image/*" :max-file-size="1000000" @select="onSelectedFiles">
+                    <template #header="{ chooseCallback, uploadCallback, clearCallback, files }">
+                        <div class="flex flex-wrap justify-content-between align-items-center flex-1 gap-2">
+                            <div class="flex gap-2">
+                                <p-button @click="chooseCallback()" icon="pi pi-images" class="p-button-rounded"></p-button>
+                                <p-button @click="uploadEvent(uploadCallback)" icon="pi pi-cloud-upload" class="p-button-rounded p-button-success" :disabled="!files || files.length === 0"></p-button>
+                                <p-button @click="clearCallback()" icon="pi pi-times" class="p-button-rounded p-button-danger" :disabled="!files || files.length === 0"></p-button>
+                            </div>
+                            <p-progressbar :value="totalSizePercent" :show-value="false" :class="['md:w-20rem h-1rem w-full md:ml-auto', {'exceeded-progress-bar': (totalSizePercent > 100)}]"><span class="white-space-nowrap">{{ totalSize }}B / 1Mb</span></p-progressbar>
+                        </div>
+                    </template>
+                    <template #content="{ files, uploadedFiles, removeUploadedFileCallback, fileRemoveCallback }">
+                        <div v-if="files.length > 0">
+                            <h5>Pending</h5>
+                            <div class="flex flex-wrap p-0 sm:p-5 gap-5">
+                                <div v-for="(file, index) of files" :key="file.name + file.type + file.size" class="card m-0 px-6 flex flex-column border-1 surface-border align-items-center gap-3">
+                                    <div>
+                                        <img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" class="shadow-2" />
+                                    </div>
+                                    <span class="font-semibold">{{ file.name }}</span>
+                                    <div>{{ formatSize(file.size) }}</div>
+                                    <p-badge value="Pending" severity="warning"></p-badge>
+                                    <p-button icon="pi pi-times" @click="onRemoveTemplatingFile(file, fileRemoveCallback, index)" class="p-button-outlined p-button-danger p-button-rounded"></p-button>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div v-if="uploadedFiles.length > 0">
+                            <h5>Completed</h5>
+                            <div class="flex flex-wrap p-0 sm:p-5 gap-5">
+                                <div v-for="(file, index) of uploadedFiles" :key="file.name + file.type + file.size" class="card m-0 px-6 flex flex-column border-1 surface-border align-items-center gap-3">
+                                    <div>
+                                        <img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" class="shadow-2" />
+                                    </div>
+                                    <span class="font-semibold">{{ file.name }}</span>
+                                    <div>{{ formatSize(file.size) }}</div>
+                                    <p-badge value="Completed" class="mt-3" severity="success"></p-badge>
+                                    <p-button icon="pi pi-times" @click="removeUploadedFileCallback(index)" class="p-button-outlined p-button-danger p-button-rounded"></p-button>
+                                </div>
+                            </div>
+                        </div>
+                    </template>
+                    <template #empty>
+                        <div class="flex align-items-center justify-content-center flex-column">
+                            <i class="pi pi-cloud-upload border-2 border-circle p-5 text-8xl text-400 border-400"></i>
+                            <p class="mt-4 mb-0">Drag and drop files to here to upload.</p>
+                        </div>
+                    </template>
+                </p-fileupload>
 
 				<h5>Basic</h5>
 				<p-fileupload mode="basic" name="demo[]" url="./upload.php" accept="image/*" :max-file-size="1000000" @upload="onUpload"></p-fileupload>
@@ -490,23 +898,72 @@ export default {
 
 			const App = {
 				setup() {
-					const toast = useToast();
-					const onUpload = () => {
-						toast.add({severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000});
-					}
+                    const toast = useToast();
+                    const uploadedFile = ref([]);
+                    const files = ref([]);
+                    const totalSize = ref(0);
+                    const totalSizePercent = ref(0);
 
-					return { onUpload };
-				},
-				components: {
-					"p-fileupload": primevue.fileupload,
-					"p-toast": primevue.toast
-				}
+                    return {toast, uploadedFile,files,totalSize,totalSizePercent};
+                },
+                methods: {
+                    onRemoveTemplatingFile(file, fileRemoveCallback, index) {
+                        fileRemoveCallback(index);
+                        this.totalSize -= parseInt(this.formatSize(file.size));
+                        this.totalSizePercent = this.totalSize / 10;
+                    },
+                    onClearTemplatingUpload(clear) {
+                        clear();
+                        this.totalSize = 0;
+                        this.totalSizePercent = 0;
+                    },
+                    onSelectedFiles(event) {
+                        this.files = event.files;
+                        this.files.forEach((file) => {
+                            this.totalSize += parseInt(this.formatSize(file.size));
+                        });
+                    },
+                    onAdvancedUpload() {
+                        this.$toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
+                    },
+                    uploadEvent(callback) {
+                        this.totalSizePercent = this.totalSize / 10;
+                        callback();
+                    },
+                    onTemplatedUpload() {
+                        this.totalSize = 0;
+                        this.totalSizePercent = 0;
+                        this.$toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
+                    },
+                    onUpload() {
+                        this.$toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
+                    },
+                    formatSize(bytes) {
+                        if (bytes === 0) {
+                            return '0 B';
+                        }
+
+                        let k = 1000,
+                            dm = 3,
+                            sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
+                            i = Math.floor(Math.log(bytes) / Math.log(k));
+
+                        return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+                    }
+                },
+                components: {
+                    "p-fileupload": primevue.fileupload,
+                    "p-button": primevue.button,
+                    "p-badge": primevue.badge,
+                    "p-progressbar": primevue.progressbar,
+                    "p-toast": primevue.toast
+                }
 			};
 
-			createApp(App)
-				.use(primevue.config.default)
-				.use(primevue.toastservice)
-				.mount("#app");
+			const app = createApp(App)
+				app.use(primevue.config.default)
+				app.use(primevue.toastservice)
+				app.mount("#app");
 			<\\/script>
 `
                 }
diff --git a/pages/fileupload/index.vue b/pages/fileupload/index.vue
index f355f17a0..dadda17b3 100755
--- a/pages/fileupload/index.vue
+++ b/pages/fileupload/index.vue
@@ -11,12 +11,65 @@
         <div class="content-section implementation">
             <div class="card">
                 <h5>Advanced</h5>
-                <FileUpload name="demo[]" url="./upload.php" @upload="onUpload" :multiple="true" accept="image/*" :maxFileSize="1000000">
+                <FileUpload name="demo[]" url="./upload.php" @upload="onAdvancedUpload($event)" :multiple="true" accept="image/*" :maxFileSize="1000000">
                     <template #empty>
                         <p>Drag and drop files to here to upload.</p>
                     </template>
                 </FileUpload>
 
+                <h5>Templating</h5>
+                <FileUpload name="demo[]" url="./upload.php" @upload="onTemplatedUpload($event)" :multiple="true" accept="image/*" :maxFileSize="1000000" @select="onSelectedFiles">
+                    <template #header="{ chooseCallback, uploadCallback, clearCallback, files }">
+                        <div class="flex flex-wrap justify-content-between align-items-center flex-1 gap-2">
+                            <div class="flex gap-2">
+                                <Button @click="chooseCallback()" icon="pi pi-images" class="p-button-rounded"></Button>
+                                <Button @click="uploadEvent(uploadCallback)" icon="pi pi-cloud-upload" class="p-button-rounded p-button-success" :disabled="!files || files.length === 0"></Button>
+                                <Button @click="clearCallback()" icon="pi pi-times" class="p-button-rounded p-button-danger" :disabled="!files || files.length === 0"></Button>
+                            </div>
+                            <ProgressBar :value="totalSizePercent" :showValue="false" :class="['md:w-20rem h-1rem w-full md:ml-auto', { 'exceeded-progress-bar': totalSizePercent > 100 }]"
+                                ><span class="white-space-nowrap">{{ totalSize }}B / 1Mb</span></ProgressBar
+                            >
+                        </div>
+                    </template>
+                    <template #content="{ files, uploadedFiles, removeUploadedFileCallback, fileRemoveCallback }">
+                        <div v-if="files.length > 0">
+                            <h5>Pending</h5>
+                            <div class="flex flex-wrap p-0 sm:p-5 gap-5">
+                                <div v-for="(file, index) of files" :key="file.name + file.type + file.size" class="card m-0 px-6 flex flex-column border-1 surface-border align-items-center gap-3">
+                                    <div>
+                                        <img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" class="shadow-2" />
+                                    </div>
+                                    <span class="font-semibold">{{ file.name }}</span>
+                                    <div>{{ formatSize(file.size) }}</div>
+                                    <Badge value="Pending" severity="warning" />
+                                    <Button icon="pi pi-times" @click="onRemoveTemplatingFile(file, fileRemoveCallback, index)" class="p-button-outlined p-button-danger p-button-rounded" />
+                                </div>
+                            </div>
+                        </div>
+
+                        <div v-if="uploadedFiles.length > 0">
+                            <h5>Completed</h5>
+                            <div class="flex flex-wrap p-0 sm:p-5 gap-5">
+                                <div v-for="(file, index) of uploadedFiles" :key="file.name + file.type + file.size" class="card m-0 px-6 flex flex-column border-1 surface-border align-items-center gap-3">
+                                    <div>
+                                        <img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" class="shadow-2" />
+                                    </div>
+                                    <span class="font-semibold">{{ file.name }}</span>
+                                    <div>{{ formatSize(file.size) }}</div>
+                                    <Badge value="Completed" class="mt-3" severity="success" />
+                                    <Button icon="pi pi-times" @click="removeUploadedFileCallback(index)" class="p-button-outlined p-button-danger p-button-rounded" />
+                                </div>
+                            </div>
+                        </div>
+                    </template>
+                    <template #empty>
+                        <div class="flex align-items-center justify-content-center flex-column">
+                            <i class="pi pi-cloud-upload border-2 border-circle p-5 text-8xl text-400 border-400" />
+                            <p class="mt-4 mb-0">Drag and drop files to here to upload.</p>
+                        </div>
+                    </template>
+                </FileUpload>
+
                 <h5>Basic</h5>
                 <FileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" :maxFileSize="1000000" @upload="onUpload" />
 
@@ -31,11 +84,56 @@
 
 <script>
 import FileUploadDoc from './FileUploadDoc';
-
 export default {
+    data() {
+        return {
+            uploadedFiles: [],
+            files: [],
+            totalSize: 0,
+            totalSizePercent: 0
+        };
+    },
     methods: {
+        onRemoveTemplatingFile(file, fileRemoveCallback, index) {
+            fileRemoveCallback(index);
+            this.totalSize -= parseInt(this.formatSize(file.size));
+            this.totalSizePercent = this.totalSize / 10;
+        },
+        onClearTemplatingUpload(clear) {
+            clear();
+            this.totalSize = 0;
+            this.totalSizePercent = 0;
+        },
+        onSelectedFiles(event) {
+            this.files = event.files;
+            this.files.forEach((file) => {
+                this.totalSize += parseInt(this.formatSize(file.size));
+            });
+        },
+        onAdvancedUpload() {
+            this.$toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
+        },
+        uploadEvent(callback) {
+            this.totalSizePercent = this.totalSize / 10;
+            callback();
+        },
+        onTemplatedUpload() {
+            this.$toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
+        },
         onUpload() {
             this.$toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
+        },
+        formatSize(bytes) {
+            if (bytes === 0) {
+                return '0 B';
+            }
+
+            let k = 1000,
+                dm = 3,
+                sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
+                i = Math.floor(Math.log(bytes) / Math.log(k));
+
+            return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
         }
     },
     components: {
@@ -45,7 +143,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-p {
-    margin: 0;
+::v-deep(.custom-progress-bar) {
+    .p-progressbar-value {
+        background-color: var(--red-500);
+    }
 }
 </style>
diff --git a/pages/filterservice/FilterServiceDoc.vue b/pages/filterservice/FilterServiceDoc.vue
index fe5abad37..2f6defc99 100644
--- a/pages/filterservice/FilterServiceDoc.vue
+++ b/pages/filterservice/FilterServiceDoc.vue
@@ -1,21 +1,20 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="FilterServiceDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']" github="filterservice/FilterServiceDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="FilterServiceDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']" github="filterservice/FilterServiceDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import &#123;FilterService&#125; from 'primevue/api';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p>Filters are accessed with <i>FilterService.filters</i>.</p>
-            <pre v-code.script><code>
+        <h5>Getting Started</h5>
+        <p>Filters are accessed with <i>FilterService.filters</i>.</p>
+        <pre v-code.script><code>
 const value = 'PrimeVue';
 
 FilterService.filters.equals(value, 'Vue');                            //false
@@ -30,9 +29,9 @@ FilterService.filters.in(value, ['PrimeFaces', 'PrimeVue']);           //true
 
 </code></pre>
 
-            <h5>Custom Constraint</h5>
-            <p>FilterService can be extended by adding new constraints using the <span>register</span> function.</p>
-            <pre v-code.script><code>
+        <h5>Custom Constraint</h5>
+        <p>FilterService can be extended by adding new constraints using the <span>register</span> function.</p>
+        <pre v-code.script><code>
 FilterService.register('isPrimeNumber', (value, filter): boolean => &#123;
     if (filter === undefined || filter === null || filter.trim() === '') &#123;
         return true;
@@ -51,7 +50,147 @@ FilterService.filters['isPrimeNumber'](568985673);              //false
 
 </code></pre>
 
-            <h5>Built-in Constraints</h5>
+        <h5>Built-in Constraints</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>startsWith</td>
+                        <td>
+                            value: Value to filter<br />
+                            filter: Filter value<br />
+                            filterLocale: Locale to use in filtering
+                        </td>
+                        <td>Whether the value starts with the filter value</td>
+                    </tr>
+                    <tr>
+                        <td>contains</td>
+                        <td>
+                            value: Value to filter<br />
+                            filter: Filter value<br />
+                            filterLocale: Locale to use in filtering
+                        </td>
+                        <td>Whether the value contains the filter value</td>
+                    </tr>
+                    <tr>
+                        <td>endsWith</td>
+                        <td>
+                            value: Value to filter<br />
+                            filter: Filter value<br />
+                            filterLocale: Locale to use in filtering
+                        </td>
+                        <td>Whether the value ends with the filter value</td>
+                    </tr>
+                    <tr>
+                        <td>equals</td>
+                        <td>
+                            value: Value to filter<br />
+                            filter: Filter value<br />
+                            filterLocale: Locale to use in filtering
+                        </td>
+                        <td>Whether the value equals the filter value</td>
+                    </tr>
+                    <tr>
+                        <td>notEquals</td>
+                        <td>
+                            value: Value to filter<br />
+                            filter: Filter value<br />
+                            filterLocale: Locale to use in filtering
+                        </td>
+                        <td>Whether the value does not equal the filter value</td>
+                    </tr>
+                    <tr>
+                        <td>in</td>
+                        <td>
+                            value: Value to filter<br />
+                            filter[]: An array of filter values<br />
+                            filterLocale: Locale to use in filtering
+                        </td>
+                        <td>Whether the value contains the filter value</td>
+                    </tr>
+                    <tr>
+                        <td>lt</td>
+                        <td>
+                            value: Value to filter<br />
+                            filter: Filter value<br />
+                            filterLocale: Locale to use in filtering
+                        </td>
+                        <td>Whether the value is less than the filter value</td>
+                    </tr>
+                    <tr>
+                        <td>lte</td>
+                        <td>
+                            value: Value to filter<br />
+                            filter: Filter value<br />
+                            filterLocale: Locale to use in filtering
+                        </td>
+                        <td>Whether the value is less than or equals to the filter value</td>
+                    </tr>
+                    <tr>
+                        <td>gt</td>
+                        <td>
+                            value: Value to filter<br />
+                            filter: Filter value<br />
+                            filterLocale: Locale to use in filtering
+                        </td>
+                        <td>Whether the value is greater than the filter value</td>
+                    </tr>
+                    <tr>
+                        <td>gte</td>
+                        <td>
+                            value: Value to filter<br />
+                            filter: Filter value<br />
+                            filterLocale: Locale to use in filtering
+                        </td>
+                        <td>Whether the value is greater than or equals to the filter value</td>
+                    </tr>
+                    <tr>
+                        <td>is</td>
+                        <td>
+                            value: Value to filter<br />
+                            filter: Filter value<br />
+                            filterLocale: Locale to use in filtering
+                        </td>
+                        <td>Whether the value equals the filter value, alias to equals</td>
+                    </tr>
+                    <tr>
+                        <td>isNot</td>
+                        <td>
+                            value: Value to filter<br />
+                            filter: Filter value<br />
+                            filterLocale: Locale to use in filtering
+                        </td>
+                        <td>Whether the value does not equal the filter value, alias to notEquals.</td>
+                    </tr>
+                    <tr>
+                        <td>before</td>
+                        <td>
+                            value: Value to filter<br />
+                            filter: Filter value<br />
+                            filterLocale: Locale to use in filtering
+                        </td>
+                        <td>Whether the date value is before the filter date.</td>
+                    </tr>
+                    <tr>
+                        <td>after</td>
+                        <td>
+                            value: Value to filter<br />
+                            filter: Filter value<br />
+                            filterLocale: Locale to use in filtering
+                        </td>
+                        <td>Whether the date value is after the filter date.</td>
+                    </tr>
+                </tbody>
+            </table>
+
+            <h5>FilterService API</h5>
             <div class="doc-tablewrapper">
                 <table class="doc-table">
                     <thead>
@@ -63,178 +202,37 @@ FilterService.filters['isPrimeNumber'](568985673);              //false
                     </thead>
                     <tbody>
                         <tr>
-                            <td>startsWith</td>
+                            <td>filter</td>
                             <td>
-                                value: Value to filter<br />
-                                filter: Filter value<br />
+                                value[]: An array of values to filter<br />
+                                fields[]: An array of properties in the value object<br />
+                                filterValue: Filter value<br />
+                                filterMatchMode: Constraint<br />
                                 filterLocale: Locale to use in filtering
                             </td>
-                            <td>Whether the value starts with the filter value</td>
+                            <td>Whether the property values of the given value collection matches the filter.</td>
                         </tr>
                         <tr>
-                            <td>contains</td>
-                            <td>
-                                value: Value to filter<br />
-                                filter: Filter value<br />
-                                filterLocale: Locale to use in filtering
-                            </td>
-                            <td>Whether the value contains the filter value</td>
+                            <td>filters</td>
+                            <td>-</td>
+                            <td>Property to access constraints collection.</td>
                         </tr>
                         <tr>
-                            <td>endsWith</td>
+                            <td>register</td>
                             <td>
-                                value: Value to filter<br />
-                                filter: Filter value<br />
-                                filterLocale: Locale to use in filtering
+                                name: string <br />
+                                fn: Filter callback
                             </td>
-                            <td>Whether the value ends with the filter value</td>
-                        </tr>
-                        <tr>
-                            <td>equals</td>
-                            <td>
-                                value: Value to filter<br />
-                                filter: Filter value<br />
-                                filterLocale: Locale to use in filtering
-                            </td>
-                            <td>Whether the value equals the filter value</td>
-                        </tr>
-                        <tr>
-                            <td>notEquals</td>
-                            <td>
-                                value: Value to filter<br />
-                                filter: Filter value<br />
-                                filterLocale: Locale to use in filtering
-                            </td>
-                            <td>Whether the value does not equal the filter value</td>
-                        </tr>
-                        <tr>
-                            <td>in</td>
-                            <td>
-                                value: Value to filter<br />
-                                filter[]: An array of filter values<br />
-                                filterLocale: Locale to use in filtering
-                            </td>
-                            <td>Whether the value contains the filter value</td>
-                        </tr>
-                        <tr>
-                            <td>lt</td>
-                            <td>
-                                value: Value to filter<br />
-                                filter: Filter value<br />
-                                filterLocale: Locale to use in filtering
-                            </td>
-                            <td>Whether the value is less than the filter value</td>
-                        </tr>
-                        <tr>
-                            <td>lte</td>
-                            <td>
-                                value: Value to filter<br />
-                                filter: Filter value<br />
-                                filterLocale: Locale to use in filtering
-                            </td>
-                            <td>Whether the value is less than or equals to the filter value</td>
-                        </tr>
-                        <tr>
-                            <td>gt</td>
-                            <td>
-                                value: Value to filter<br />
-                                filter: Filter value<br />
-                                filterLocale: Locale to use in filtering
-                            </td>
-                            <td>Whether the value is greater than the filter value</td>
-                        </tr>
-                        <tr>
-                            <td>gte</td>
-                            <td>
-                                value: Value to filter<br />
-                                filter: Filter value<br />
-                                filterLocale: Locale to use in filtering
-                            </td>
-                            <td>Whether the value is greater than or equals to the filter value</td>
-                        </tr>
-                        <tr>
-                            <td>is</td>
-                            <td>
-                                value: Value to filter<br />
-                                filter: Filter value<br />
-                                filterLocale: Locale to use in filtering
-                            </td>
-                            <td>Whether the value equals the filter value, alias to equals</td>
-                        </tr>
-                        <tr>
-                            <td>isNot</td>
-                            <td>
-                                value: Value to filter<br />
-                                filter: Filter value<br />
-                                filterLocale: Locale to use in filtering
-                            </td>
-                            <td>Whether the value does not equal the filter value, alias to notEquals.</td>
-                        </tr>
-                        <tr>
-                            <td>before</td>
-                            <td>
-                                value: Value to filter<br />
-                                filter: Filter value<br />
-                                filterLocale: Locale to use in filtering
-                            </td>
-                            <td>Whether the date value is before the filter date.</td>
-                        </tr>
-                        <tr>
-                            <td>after</td>
-                            <td>
-                                value: Value to filter<br />
-                                filter: Filter value<br />
-                                filterLocale: Locale to use in filtering
-                            </td>
-                            <td>Whether the date value is after the filter date.</td>
+                            <td>Registers a new constraint in filters.</td>
                         </tr>
                     </tbody>
                 </table>
-
-                <h5>FilterService API</h5>
-                <div class="doc-tablewrapper">
-                    <table class="doc-table">
-                        <thead>
-                            <tr>
-                                <th>Name</th>
-                                <th>Parameters</th>
-                                <th>Description</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr>
-                                <td>filter</td>
-                                <td>
-                                    value[]: An array of values to filter<br />
-                                    fields[]: An array of properties in the value object<br />
-                                    filterValue: Filter value<br />
-                                    filterMatchMode: Constraint<br />
-                                    filterLocale: Locale to use in filtering
-                                </td>
-                                <td>Whether the property values of the given value collection matches the filter.</td>
-                            </tr>
-                            <tr>
-                                <td>filters</td>
-                                <td>-</td>
-                                <td>Property to access constraints collection.</td>
-                            </tr>
-                            <tr>
-                                <td>register</td>
-                                <td>
-                                    name: string <br />
-                                    fn: Filter callback
-                                </td>
-                                <td>Registers a new constraint in filters.</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
             </div>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc>
-    </ClientOnly>
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
diff --git a/pages/filterservice/index.vue b/pages/filterservice/index.vue
index 1a246df8b..89d9f2e1d 100644
--- a/pages/filterservice/index.vue
+++ b/pages/filterservice/index.vue
@@ -13,7 +13,7 @@
                 <h5>Table Integration</h5>
                 <p>A custom equals filter that checks for exact case sensitive value is registered and defined as a match mode of a column filter.</p>
 
-                <DataTable :value="customers" :paginator="true" :rows="10" responsiveLayout="scroll" dataKey="id" v-model:filters="filters" filterDisplay="row" :loading="loading">
+                <DataTable v-model:filters="filters" :value="customers" :paginator="true" :rows="10" responsiveLayout="scroll" dataKey="id" filterDisplay="row" :loading="loading">
                     <template #empty> No customers found. </template>
                     <template #loading> Loading customers data. Please wait. </template>
                     <Column field="name" header="Name" :filterMatchModeOptions="matchModeOptions">
@@ -21,7 +21,7 @@
                             {{ data.name }}
                         </template>
                         <template #filter="{ filterModel, filterCallback }">
-                            <InputText type="text" v-model="filterModel.value" @input="filterCallback()" class="p-column-filter" :placeholder="`Search by name - ${filterModel.matchMode}`" />
+                            <InputText v-model="filterModel.value" type="text" @input="filterCallback()" class="p-column-filter" :placeholder="`Search by name - ${filterModel.matchMode}`" />
                         </template>
                     </Column>
                     <Column header="Country" filterField="country.name" :filterMatchModeOptions="matchModeOptions">
@@ -30,7 +30,7 @@
                             <span class="image-text">{{ data.country.name }}</span>
                         </template>
                         <template #filter="{ filterModel, filterCallback }">
-                            <InputText type="text" v-model="filterModel.value" @input="filterCallback()" class="p-column-filter" :placeholder="`Search by country - ${filterModel.matchMode}`" />
+                            <InputText v-model="filterModel.value" type="text" @input="filterCallback()" class="p-column-filter" :placeholder="`Search by country - ${filterModel.matchMode}`" />
                         </template>
                     </Column>
                 </DataTable>
@@ -42,9 +42,9 @@
 </template>
 
 <script>
-import FilterServiceDoc from './FilterServiceDoc';
 import { FilterMatchMode, FilterService } from 'primevue/api';
 import CustomerService from '../../service/CustomerService';
+import FilterServiceDoc from './FilterServiceDoc';
 
 const YOUR_FILTER = 'YOUR FILTER';
 
diff --git a/pages/floatlabel/index.vue b/pages/floatlabel/index.vue
index 1abb8f824..ca6b7e8ad 100644
--- a/pages/floatlabel/index.vue
+++ b/pages/floatlabel/index.vue
@@ -13,21 +13,21 @@
                 <div class="p-fluid grid">
                     <div class="field col-12 md:col-4">
                         <span class="p-float-label">
-                            <InputText id="inputtext" type="text" v-model="value1" />
+                            <InputText id="inputtext" v-model="value1" type="text" />
                             <label for="inputtext">InputText</label>
                         </span>
                     </div>
                     <div class="field col-12 md:col-4">
                         <span class="p-float-label p-input-icon-left">
                             <i class="pi pi-search" />
-                            <InputText id="inputtext-left" type="text" v-model="valueIconLeft" />
+                            <InputText id="inputtext-left" v-model="valueIconLeft" type="text" />
                             <label for="inputtext-left">Left Icon</label>
                         </span>
                     </div>
                     <div class="field col-12 md:col-4">
                         <span class="p-float-label p-input-icon-right">
                             <i class="pi pi-search" />
-                            <InputText id="inputtext-right" type="text" v-model="valueIconRight" />
+                            <InputText id="inputtext-right" v-model="valueIconRight" type="text" />
                             <label for="inputtext-right">Right Icon</label>
                         </span>
                     </div>
@@ -67,7 +67,7 @@
                                 <i class="pi pi-user"></i>
                             </span>
                             <span class="p-float-label">
-                                <InputText id="inputgroup" type="text" v-model="value7" />
+                                <InputText id="inputgroup" v-model="value7" type="text" />
                                 <label for="inputgroup">InputGroup</label>
                             </span>
                         </div>
@@ -112,9 +112,7 @@
             </div>
         </div>
 
-        <ClientOnly>
-            <AppDoc name="FloatLabelDemo" :sources="sources" :service="['CountryService', 'NodeService']" :data="['countries', 'treenodes']" github="floatlabel/FloatLabelDemo.vue" />
-        </ClientOnly>
+        <AppDoc name="FloatLabelDemo" :sources="sources" :service="['CountryService', 'NodeService']" :data="['countries', 'treenodes']" github="floatlabel/FloatLabelDemo.vue" />
     </div>
 </template>
 
diff --git a/pages/focustrap/FocusTrapDoc.vue b/pages/focustrap/FocusTrapDoc.vue
new file mode 100644
index 000000000..614d62af9
--- /dev/null
+++ b/pages/focustrap/FocusTrapDoc.vue
@@ -0,0 +1,270 @@
+<template>
+    <AppDoc name="FocusTrapDemo" :sources="sources" github="focustrap/FocusTrapDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
+import FocusTrap from 'primevue/focustrap';
+
+app.directive('focustrap', FocusTrap);
+
+</code></pre>
+
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
+&lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
+&lt;script src="https://unpkg.com/primevue@^3/focustrap/focustrap.min.js"&gt;&lt;/script&gt;
+
+</code></pre>
+
+        <pre v-code.script><code>
+directives: {
+    'focustrap': FocusTrap
+}
+
+</code></pre>
+
+        <h5>Getting Started</h5>
+        <p>FocusTrap is applied to a container element with the v-focustrap directive.</p>
+        <pre v-code><code><template v-pre>
+&lt;div v-focustrap&gt;
+    //content
+&lt;/div&gt;
+</template>
+</code></pre>
+
+        <h5>Properties</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>disabled</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When set as true, focus wouldn't be managed.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h5>Events</h5>
+        <p>Directive has no events.</p>
+
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            sources: {
+                'options-api': {
+                    tabName: 'Options API Source',
+                    content: `
+<template>
+    <div class="focustrap-demo">
+        <div class="flex justify-content-center p-fluid">
+            <div v-focustrap class="card">
+                <div class="field">
+                    <InputText id="input" v-model="name" type="text" placeholder="Name" autofocus />
+                </div>
+                <div class="field">
+                    <div class="p-input-icon-right">
+                        <i class="pi pi-envelope" />
+                        <InputText id="email" v-model="email" type="email" placeholder="Email" />
+                    </div>
+                </div>
+                <div class="field">
+                    <div class="p-float-label">
+                        <Password v-model="password">
+                            <template #header>
+                                <h6>Pick a password</h6>
+                            </template>
+                            <template #footer>
+                                <Divider />
+                                <p class="mt-2">Suggestions</p>
+                                <ul class="pl-2 ml-2 mt-0" style="line-height: 1.5">
+                                    <li>At least one lowercase</li>
+                                    <li>At least one uppercase</li>
+                                    <li>At least one numeric</li>
+                                    <li>Minimum 8 characters</li>
+                                </ul>
+                            </template>
+                        </Password>
+                        <label for="password">Password</label>
+                    </div>
+                </div>
+                <div class="field-checkbox">
+                    <Checkbox id="accept" v-model="accept" name="accept" value="Accept" />
+                    <label for="accept">I agree to the terms and conditions*</label>
+                </div>
+                <Button type="submit" label="Submit" class="mt-2" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            name: null,
+            email: null,
+            password: null,
+            accept: null
+        };
+    }
+};
+<\\/script>`
+                },
+                'composition-api': {
+                    tabName: 'Composition API Source',
+                    content: `
+<template>
+    <div class="focustrap-demo">
+        <div class="flex justify-content-center p-fluid">
+            <div v-focustrap class="card">
+                <div class="field">
+                    <InputText id="input" v-model="name" type="text" placeholder="Name" autofocus />
+                </div>
+                <div class="field">
+                    <div class="p-input-icon-right">
+                        <i class="pi pi-envelope" />
+                        <InputText id="email" v-model="email" type="email" placeholder="Email" />
+                    </div>
+                </div>
+                <div class="field">
+                    <div class="p-float-label">
+                        <Password v-model="password">
+                            <template #header>
+                                <h6>Pick a password</h6>
+                            </template>
+                            <template #footer>
+                                <Divider />
+                                <p class="mt-2">Suggestions</p>
+                                <ul class="pl-2 ml-2 mt-0" style="line-height: 1.5">
+                                    <li>At least one lowercase</li>
+                                    <li>At least one uppercase</li>
+                                    <li>At least one numeric</li>
+                                    <li>Minimum 8 characters</li>
+                                </ul>
+                            </template>
+                        </Password>
+                        <label for="password">Password</label>
+                    </div>
+                </div>
+                <div class="field-checkbox">
+                    <Checkbox id="accept" v-model="accept" name="accept" value="Accept" />
+                    <label for="accept">I agree to the terms and conditions*</label>
+                </div>
+                <Button type="submit" label="Submit" class="mt-2" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { ref } from 'vue';
+export default {
+    setup() {
+        const name = ref(null),
+        const email = ref(null),
+        const password = ref(null),
+        const accept = ref(null),
+
+        return { name, email, password, accept };
+    };
+};
+<\\/script>`
+                },
+                'browser-source': {
+                    tabName: 'Browser Demo Source',
+                    imports: `<script src="https://unpkg.com/primevue@^3/password/password.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/divider/divider.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/checkbox/checkbox.min.js"><\\/script>`,
+                    content: `
+<div id="app">
+    <div class="focustrap-demo">
+        <div class="flex justify-content-center p-fluid">
+            <div v-focustrap class="card">
+                <div class="field">
+                    <p-inputtext id="input" v-model="name" type="text" placeholder="Name" autofocus></p-inputtext>
+                </div>
+                <div class="field">
+                    <div class="p-input-icon-right">
+                        <i class="pi pi-envelope" />
+                        <p-inputtext id="email" v-model="email" type="email" placeholder="Email"></p-inputtext>
+                    </div>
+                </div>
+                <div class="field">
+                    <div class="p-float-label">
+                        <p-password v-model="password">
+                            <template #header>
+                                <h6>Pick a password</h6>
+                            </template>
+                            <template #footer>
+                                <p-divider></p-divider>
+                                <p class="mt-2">Suggestions</p>
+                                <ul class="pl-2 ml-2 mt-0" style="line-height: 1.5">
+                                    <li>At least one lowercase</li>
+                                    <li>At least one uppercase</li>
+                                    <li>At least one numeric</li>
+                                    <li>Minimum 8 characters</li>
+                                </ul>
+                            </template>
+                        </p-password>
+                        <label for="password">Password</label>
+                    </div>
+                </div>
+                <div class="field-checkbox">
+                    <p-checkbox id="accept" v-model="accept" name="accept" value="Accept"></p-checkbox>
+                    <label for="accept">I agree to the terms and conditions*</label>
+                </div>
+                <p-button type="submit" label="Submit" class="mt-2"></p-button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script type="module">
+    const { createApp, ref } = Vue;
+    const FocusTrap = primevue.focustrap;
+
+    const App = {
+        setup() {
+            const name = ref(null),
+            const email = ref(null),
+            const password = ref(null),
+            const accept = ref(null),
+
+            return { name, email, password, accept };
+        },
+        components: {
+            "p-inputtext": primevue.inputtext,
+            "p-button": primevue.button,
+            "p-password": primevue.password,
+            "p-divider": primevue.divider,
+            "p-checkbox": primevue.checkbox,
+        }
+    }
+
+    createApp(App)
+        .use(primevue.config.default)
+        .directive("focustrap", FocusTrap)
+        .mount("#app");
+
+<\\/script>`
+                }
+            }
+        };
+    }
+};
+</script>
diff --git a/pages/focustrap/index.vue b/pages/focustrap/index.vue
new file mode 100644
index 000000000..5e5816808
--- /dev/null
+++ b/pages/focustrap/index.vue
@@ -0,0 +1,88 @@
+<template>
+    <div class="content-section introduction">
+        <div class="feature-intro">
+            <h1>Focus Trap</h1>
+            <p>Focus Trap keeps focus within a certain DOM element while tabbing.</p>
+        </div>
+        <AppDemoActions />
+    </div>
+
+    <div class="content-section implementation focustrap-demo">
+        <div class="flex justify-content-center p-fluid">
+            <div v-focustrap class="card">
+                <div class="field">
+                    <InputText id="input" v-model="name" type="text" placeholder="Name" autofocus />
+                </div>
+                <div class="field">
+                    <div class="p-input-icon-right">
+                        <i class="pi pi-envelope" />
+                        <InputText id="email" v-model="email" type="email" placeholder="Email" />
+                    </div>
+                </div>
+                <div class="field">
+                    <div class="p-float-label">
+                        <Password v-model="password">
+                            <template #header>
+                                <h6>Pick a password</h6>
+                            </template>
+                            <template #footer>
+                                <Divider />
+                                <p class="mt-2">Suggestions</p>
+                                <ul class="pl-2 ml-2 mt-0" style="line-height: 1.5">
+                                    <li>At least one lowercase</li>
+                                    <li>At least one uppercase</li>
+                                    <li>At least one numeric</li>
+                                    <li>Minimum 8 characters</li>
+                                </ul>
+                            </template>
+                        </Password>
+                        <label for="password">Password</label>
+                    </div>
+                </div>
+                <div class="field-checkbox">
+                    <Checkbox id="accept" v-model="accept" name="accept" value="Accept" />
+                    <label for="accept">I agree to the terms and conditions*</label>
+                </div>
+                <Button type="submit" label="Submit" class="mt-2" />
+            </div>
+        </div>
+    </div>
+
+    <FocusTrapDoc />
+</template>
+
+<script>
+import FocusTrapDoc from './FocusTrapDoc.vue';
+
+export default {
+    data() {
+        return {
+            name: null,
+            email: null,
+            password: null,
+            accept: null
+        };
+    },
+    components: {
+        FocusTrapDoc: FocusTrapDoc
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+.focustrap-demo {
+    .card {
+        min-width: 450px;
+
+        .field {
+            margin-bottom: 1.5rem;
+        }
+    }
+
+    @media screen and (max-width: 960px) {
+        .card {
+            width: 80%;
+        }
+    }
+}
+</style>
diff --git a/pages/fullcalendar/index.vue b/pages/fullcalendar/index.vue
index f558c0b17..575b600e0 100755
--- a/pages/fullcalendar/index.vue
+++ b/pages/fullcalendar/index.vue
@@ -20,6 +20,7 @@
 <script>
 import EventService from '../../service/EventService';
 import FullCalendarDoc from './FullCalendarDoc';
+
 export default {
     data() {
         return {
diff --git a/pages/galleria/Advanced.vue b/pages/galleria/Advanced.vue
index 09fcf4d41..057cb2b10 100644
--- a/pages/galleria/Advanced.vue
+++ b/pages/galleria/Advanced.vue
@@ -11,8 +11,8 @@
             <div class="card">
                 <Galleria
                     ref="galleria"
-                    :value="images"
                     v-model:activeIndex="activeIndex"
+                    :value="images"
                     :numVisible="5"
                     containerStyle="max-width: 640px"
                     :containerClass="galleriaClass"
@@ -270,6 +270,7 @@ export default {
         },
         openFullScreen() {
             let elem = this.$refs.galleria.$el;
+
             if (elem.requestFullscreen) {
                 elem.requestFullscreen();
             } else if (elem.mozRequestFullScreen) {
diff --git a/pages/galleria/AutoPlay.vue b/pages/galleria/AutoPlay.vue
index e1672130b..37345bc0e 100755
--- a/pages/galleria/AutoPlay.vue
+++ b/pages/galleria/AutoPlay.vue
@@ -21,10 +21,9 @@
         </div>
 
         <div class="content-section documentation">
-            <ClientOnly>
-                <TabView>
-                    <TabPanel header="Source">
-                        <pre v-code><code><template v-pre>
+            <TabView>
+                <TabPanel header="Source">
+                    <pre v-code><code><template v-pre>
 &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"
     :circular="true" :autoPlay="true" :transitionInterval="2000"&gt;
     &lt;template #item="slotProps"&gt;
@@ -37,7 +36,7 @@
 </template>
 </code></pre>
 
-                        <pre v-code.script><code>
+                    <pre v-code.script><code>
 import PhotoService from '../../service/PhotoService';
 
 export default {
@@ -70,9 +69,8 @@ export default {
 }
 
 </code></pre>
-                    </TabPanel>
-                </TabView>
-            </ClientOnly>
+                </TabPanel>
+            </TabView>
         </div>
     </div>
 </template>
diff --git a/pages/galleria/FullScreen.vue b/pages/galleria/FullScreen.vue
index 3d642155e..56a0fb0c6 100755
--- a/pages/galleria/FullScreen.vue
+++ b/pages/galleria/FullScreen.vue
@@ -10,7 +10,7 @@
         <div class="content-section implementation">
             <div class="card">
                 <h5>With Thumbnails</h5>
-                <Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="9" containerStyle="max-width: 50%" :circular="true" :fullScreen="true" :showItemNavigators="true" v-model:visible="displayBasic">
+                <Galleria v-model:visible="displayBasic" :value="images" :responsiveOptions="responsiveOptions2" :numVisible="9" containerStyle="max-width: 50%" :circular="true" :fullScreen="true" :showItemNavigators="true">
                     <template #item="slotProps">
                         <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
                     </template>
@@ -24,7 +24,7 @@
 
             <div class="card">
                 <h5>Without Thumbnails</h5>
-                <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="7" containerStyle="max-width: 850px" :circular="true" :fullScreen="true" :showItemNavigators="true" :showThumbnails="false" v-model:visible="displayBasic2">
+                <Galleria v-model:visible="displayBasic2" :value="images" :responsiveOptions="responsiveOptions" :numVisible="7" containerStyle="max-width: 850px" :circular="true" :fullScreen="true" :showItemNavigators="true" :showThumbnails="false">
                     <template #item="slotProps">
                         <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
                     </template>
@@ -39,8 +39,9 @@
             <div class="card">
                 <h5>Custom Content</h5>
                 <Galleria
-                    :value="images"
                     v-model:activeIndex="activeIndex"
+                    v-model:visible="displayCustom"
+                    :value="images"
                     :responsiveOptions="responsiveOptions"
                     :numVisible="7"
                     containerStyle="max-width: 850px"
@@ -48,7 +49,6 @@
                     :fullScreen="true"
                     :showItemNavigators="true"
                     :showThumbnails="false"
-                    v-model:visible="displayCustom"
                 >
                     <template #item="slotProps">
                         <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
@@ -59,7 +59,7 @@
                 </Galleria>
 
                 <div v-if="images" class="grid" style="max-width: 400px">
-                    <div v-for="(image, index) of images" class="col-3" :key="index">
+                    <div v-for="(image, index) of images" :key="index" class="col-3">
                         <img :src="image.thumbnailImageSrc" :alt="image.alt" style="cursor: pointer" @click="imageClick(index)" />
                     </div>
                 </div>
diff --git a/pages/galleria/GalleriaDoc.vue b/pages/galleria/GalleriaDoc.vue
index e344b9d6e..eb209b106 100755
--- a/pages/galleria/GalleriaDoc.vue
+++ b/pages/galleria/GalleriaDoc.vue
@@ -1,24 +1,23 @@
 <template>
     <div class="content-section documentation">
-        <ClientOnly>
-            <TabView>
-                <TabPanel header="Documentation">
-                    <h5>Import via Module</h5>
-                    <pre v-code.script><code>
+        <TabView>
+            <TabPanel header="Documentation">
+                <h5>Import via Module</h5>
+                <pre v-code.script><code>
 import Galleria from 'primevue/galleria';
 
 </code></pre>
 
-                    <h5>Import via CDN</h5>
-                    <pre v-code><code>
+                <h5>Import via CDN</h5>
+                <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/galleria/galleria.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-                    <h5>Getting Started</h5>
-                    <p>Galleria requires item template and a value as an array of objects.</p>
-                    <pre v-code><code>
+                <h5>Getting Started</h5>
+                <p>Galleria requires item template and a value as an array of objects.</p>
+                <pre v-code><code>
 &lt;Galleria :value="images"&gt;
     &lt;template #item="slotProps"&gt;
         &lt;img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" /&gt;
@@ -27,98 +26,98 @@ import Galleria from 'primevue/galleria';
 
 </code></pre>
 
-                    <p>For the rest of the documentation, sample data below would be return from an example service e.g. PhotoService.</p>
-                    <div style="overflow: auto; height: 400px">
-                        <pre v-code.script><code>
+                <p>For the rest of the documentation, sample data below would be return from an example service e.g. PhotoService.</p>
+                <div style="overflow: auto; height: 400px">
+                    <pre v-code.script><code>
 {
     "data":[
         {
-            "itemImageSrc": "/demo/images/galleria/galleria1.jpg",
-            "thumbnailImageSrc": "/demo/images/galleria/galleria1s.jpg",
+            "itemImageSrc": "demo/images/galleria/galleria1.jpg",
+            "thumbnailImageSrc": "demo/images/galleria/galleria1s.jpg",
             "alt": "Description for Image 1",
             "title": "Title 1"
         },
         {
-            "itemImageSrc": "/demo/images/galleria/galleria2.jpg",
-            "thumbnailImageSrc": "/demo/images/galleria/galleria2s.jpg",
+            "itemImageSrc": "demo/images/galleria/galleria2.jpg",
+            "thumbnailImageSrc": "demo/images/galleria/galleria2s.jpg",
             "alt": "Description for Image 2",
             "title": "Title 2"
         },
         {
-            "itemImageSrc": "/demo/images/galleria/galleria3.jpg",
-            "thumbnailImageSrc": "/demo/images/galleria/galleria3s.jpg",
+            "itemImageSrc": "demo/images/galleria/galleria3.jpg",
+            "thumbnailImageSrc": "demo/images/galleria/galleria3s.jpg",
             "alt": "Description for Image 3",
             "title": "Title 3"
         },
         {
-            "itemImageSrc": "/demo/images/galleria/galleria4.jpg",
-            "thumbnailImageSrc": "/demo/images/galleria/galleria4s.jpg",
+            "itemImageSrc": "demo/images/galleria/galleria4.jpg",
+            "thumbnailImageSrc": "demo/images/galleria/galleria4s.jpg",
             "alt": "Description for Image 4",
             "title": "Title 4"
         },
         {
-            "itemImageSrc": "/demo/images/galleria/galleria5.jpg",
-            "thumbnailImageSrc": "/demo/images/galleria/galleria5s.jpg",
+            "itemImageSrc": "demo/images/galleria/galleria5.jpg",
+            "thumbnailImageSrc": "demo/images/galleria/galleria5s.jpg",
             "alt": "Description for Image 5",
             "title": "Title 5"
         },
         {
-            "itemImageSrc": "/demo/images/galleria/galleria6.jpg",
-            "thumbnailImageSrc": "/demo/images/galleria/galleria6s.jpg",
+            "itemImageSrc": "demo/images/galleria/galleria6.jpg",
+            "thumbnailImageSrc": "demo/images/galleria/galleria6s.jpg",
             "alt": "Description for Image 6",
             "title": "Title 6"
         },
         {
-            "itemImageSrc": "/demo/images/galleria/galleria7.jpg",
-            "thumbnailImageSrc": "/demo/images/galleria/galleria7s.jpg",
+            "itemImageSrc": "demo/images/galleria/galleria7.jpg",
+            "thumbnailImageSrc": "demo/images/galleria/galleria7s.jpg",
             "alt": "Description for Image 7",
             "title": "Title 7"
         },
         {
-            "itemImageSrc": "/demo/images/galleria/galleria8.jpg",
-            "thumbnailImageSrc": "/demo/images/galleria/galleria8s.jpg",
+            "itemImageSrc": "demo/images/galleria/galleria8.jpg",
+            "thumbnailImageSrc": "demo/images/galleria/galleria8s.jpg",
             "alt": "Description for Image 8",
             "title": "Title 8"
         },
         {
-            "itemImageSrc": "/demo/images/galleria/galleria9.jpg",
-            "thumbnailImageSrc": "/demo/images/galleria/galleria9s.jpg",
+            "itemImageSrc": "demo/images/galleria/galleria9.jpg",
+            "thumbnailImageSrc": "demo/images/galleria/galleria9s.jpg",
             "alt": "Description for Image 9",
             "title": "Title 9"
         },
         {
-            "itemImageSrc": "/demo/images/galleria/galleria10.jpg",
-            "thumbnailImageSrc": "/demo/images/galleria/galleria10s.jpg",
+            "itemImageSrc": "demo/images/galleria/galleria10.jpg",
+            "thumbnailImageSrc": "demo/images/galleria/galleria10s.jpg",
             "alt": "Description for Image 10",
             "title": "Title 10"
         },
         {
-            "itemImageSrc": "/demo/images/galleria/galleria11.jpg",
-            "thumbnailImageSrc": "/demo/images/galleria/galleria11s.jpg",
+            "itemImageSrc": "demo/images/galleria/galleria11.jpg",
+            "thumbnailImageSrc": "demo/images/galleria/galleria11s.jpg",
             "alt": "Description for Image 11",
             "title": "Title 11"
         },
         {
-            "itemImageSrc": "/demo/images/galleria/galleria12.jpg",
-            "thumbnailImageSrc": "/demo/images/galleria/galleria12s.jpg",
+            "itemImageSrc": "demo/images/galleria/galleria12.jpg",
+            "thumbnailImageSrc": "demo/images/galleria/galleria12s.jpg",
             "alt": "Description for Image 12",
             "title": "Title 12"
         },
         {
-            "itemImageSrc": "/demo/images/galleria/galleria13.jpg",
-            "thumbnailImageSrc": "/demo/images/galleria/galleria13s.jpg",
+            "itemImageSrc": "demo/images/galleria/galleria13.jpg",
+            "thumbnailImageSrc": "demo/images/galleria/galleria13s.jpg",
             "alt": "Description for Image 13",
             "title": "Title 13"
         },
         {
-            "itemImageSrc": "/demo/images/galleria/galleria14.jpg",
-            "thumbnailImageSrc": "/demo/images/galleria/galleria14s.jpg",
+            "itemImageSrc": "demo/images/galleria/galleria14.jpg",
+            "thumbnailImageSrc": "demo/images/galleria/galleria14s.jpg",
             "alt": "Description for Image 14",
             "title": "Title 14"
         },
         {
-            "itemImageSrc": "/demo/images/galleria/galleria15.jpg",
-            "thumbnailImageSrc": "/demo/images/galleria/galleria15s.jpg",
+            "itemImageSrc": "demo/images/galleria/galleria15.jpg",
+            "thumbnailImageSrc": "demo/images/galleria/galleria15s.jpg",
             "alt": "Description for Image 15",
             "title": "Title 15"
         }
@@ -126,9 +125,9 @@ import Galleria from 'primevue/galleria';
 }
 
 </code></pre>
-                    </div>
+                </div>
 
-                    <pre v-code.script><code>
+                <pre v-code.script><code>
 export default class PhotoService {
 
 	getImages() {
@@ -139,7 +138,7 @@ export default class PhotoService {
 
 </code></pre>
 
-                    <pre v-code.script><code>
+                <pre v-code.script><code>
 export default {
     data() {
         return {
@@ -157,10 +156,10 @@ export default {
 
 </code></pre>
 
-                    <h5>Items per page</h5>
-                    <p>Number of items per page is defined using the <i>numVisible</i> property.</p>
+                <h5>Items per page</h5>
+                <p>Number of items per page is defined using the <i>numVisible</i> property.</p>
 
-                    <pre v-code><code>
+                <pre v-code><code>
 &lt;Galleria :value="images" :numVisible="5"&gt;
     &lt;template #item="slotProps"&gt;
         &lt;img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" /&gt;
@@ -172,10 +171,10 @@ export default {
 
 </code></pre>
 
-                    <h5>Responsive</h5>
-                    <p>For responsive design, <i>numVisible</i> can be defined using the <i>responsiveOptions</i> property which references an array of objects whose breakpoint defines the max-width to apply the settings.</p>
+                <h5>Responsive</h5>
+                <p>For responsive design, <i>numVisible</i> can be defined using the <i>responsiveOptions</i> property which references an array of objects whose breakpoint defines the max-width to apply the settings.</p>
 
-                    <pre v-code><code>
+                <pre v-code><code>
 &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5"&gt;
     &lt;template #item="slotProps"&gt;
         &lt;img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" /&gt;
@@ -187,7 +186,7 @@ export default {
 
 </code></pre>
 
-                    <pre v-code.script><code>
+                <pre v-code.script><code>
 responsiveOptions: [
     {
         breakpoint: '1024px',
@@ -205,9 +204,9 @@ responsiveOptions: [
 
 </code></pre>
 
-                    <h5>Header and Footer</h5>
-                    <p>Custom content projection is available using the <i>header</i> and <i>footer</i> properties.</p>
-                    <pre v-code><code>
+                <h5>Header and Footer</h5>
+                <p>Custom content projection is available using the <i>header</i> and <i>footer</i> properties.</p>
+                <pre v-code><code>
 &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"&gt;
     &lt;template #header&gt;
         &lt;h1&gt;Header&lt;/h1&gt;
@@ -222,12 +221,12 @@ responsiveOptions: [
 
 </code></pre>
 
-                    <h5>Indicators</h5>
-                    <p>
-                        Indicators allow quick navigation between the items. Set <i>showIndicators</i> to display indicators which can be customized further with the <i>changeItemOnIndicatorHover</i>, <i>showIndicatorsOnItem</i> and
-                        <i>indicatorsPosition</i> properties.
-                    </p>
-                    <pre v-code><code>
+                <h5>Indicators</h5>
+                <p>
+                    Indicators allow quick navigation between the items. Set <i>showIndicators</i> to display indicators which can be customized further with the <i>changeItemOnIndicatorHover</i>, <i>showIndicatorsOnItem</i> and
+                    <i>indicatorsPosition</i> properties.
+                </p>
+                <pre v-code><code>
 &lt;Galleria :value="images" :showIndicators="true"&gt;
     &lt;template #item="slotProps"&gt;
         &lt;img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" /&gt;
@@ -236,265 +235,397 @@ responsiveOptions: [
 
 </code></pre>
 
-                    <h5>Properties</h5>
-                    <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
-                    <div class="doc-tablewrapper">
-                        <table class="doc-table">
-                            <thead>
-                                <tr>
-                                    <th>Name</th>
-                                    <th>Type</th>
-                                    <th>Default</th>
-                                    <th>Description</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <tr>
-                                    <td>id</td>
-                                    <td>string</td>
-                                    <td>null</td>
-                                    <td>Unique identifier of the element.</td>
-                                </tr>
-                                <tr>
-                                    <td>value</td>
-                                    <td>array</td>
-                                    <td>null</td>
-                                    <td>An array of objects to display.</td>
-                                </tr>
-                                <tr>
-                                    <td>activeIndex</td>
-                                    <td>number</td>
-                                    <td>0</td>
-                                    <td>Index of the first item.</td>
-                                </tr>
-                                <tr>
-                                    <td>fullScreen</td>
-                                    <td>boolean</td>
-                                    <td>false</td>
-                                    <td>Whether to display the component on fullscreen.</td>
-                                </tr>
-                                <tr>
-                                    <td>visible</td>
-                                    <td>boolean</td>
-                                    <td>false</td>
-                                    <td>Specifies the visibility of the mask on fullscreen mode.</td>
-                                </tr>
-                                <tr>
-                                    <td>numVisible</td>
-                                    <td>number</td>
-                                    <td>3</td>
-                                    <td>Number of items per page.</td>
-                                </tr>
-                                <tr>
-                                    <td>responsiveOptions</td>
-                                    <td>any</td>
-                                    <td>null</td>
-                                    <td>An array of options for responsive design.</td>
-                                </tr>
-                                <tr>
-                                    <td>showItemNavigators</td>
-                                    <td>boolean</td>
-                                    <td>false</td>
-                                    <td>Whether to display navigation buttons in item section.</td>
-                                </tr>
-                                <tr>
-                                    <td>showThumbnailNavigators</td>
-                                    <td>boolean</td>
-                                    <td>true</td>
-                                    <td>Whether to display navigation buttons in thumbnail container.</td>
-                                </tr>
-                                <tr>
-                                    <td>showItemNavigatorsOnHover</td>
-                                    <td>boolean</td>
-                                    <td>false</td>
-                                    <td>Whether to display navigation buttons on item hover.</td>
-                                </tr>
-                                <tr>
-                                    <td>changeItemOnIndicatorHover</td>
-                                    <td>boolean</td>
-                                    <td>false</td>
-                                    <td>When enabled, item is changed on indicator hover.</td>
-                                </tr>
-                                <tr>
-                                    <td>circular</td>
-                                    <td>boolean</td>
-                                    <td>false</td>
-                                    <td>Defines if scrolling would be infinite.</td>
-                                </tr>
-                                <tr>
-                                    <td>autoPlay</td>
-                                    <td>boolean</td>
-                                    <td>false</td>
-                                    <td>Items are displayed with a slideshow in autoPlay mode.</td>
-                                </tr>
-                                <tr>
-                                    <td>transitionInterval</td>
-                                    <td>number</td>
-                                    <td>4000</td>
-                                    <td>Time in milliseconds to scroll items.</td>
-                                </tr>
-                                <tr>
-                                    <td>showThumbnails</td>
-                                    <td>boolean</td>
-                                    <td>true</td>
-                                    <td>Whether to display thumbnail container.</td>
-                                </tr>
-                                <tr>
-                                    <td>thumbnailsPosition</td>
-                                    <td>string</td>
-                                    <td>bottom</td>
-                                    <td>Position of thumbnails. Valid values are "bottom", "top", "left" and "right".</td>
-                                </tr>
-                                <tr>
-                                    <td>verticalThumbnailViewPortHeight</td>
-                                    <td>string</td>
-                                    <td>300px</td>
-                                    <td>Height of the viewport in vertical thumbnail.</td>
-                                </tr>
-                                <tr>
-                                    <td>showIndicators</td>
-                                    <td>boolean</td>
-                                    <td>false</td>
-                                    <td>Whether to display indicator container.</td>
-                                </tr>
-                                <tr>
-                                    <td>showIndicatorsOnItem</td>
-                                    <td>boolean</td>
-                                    <td>false</td>
-                                    <td>When enabled, indicator container is displayed on item container.</td>
-                                </tr>
-                                <tr>
-                                    <td>indicatorsPosition</td>
-                                    <td>string</td>
-                                    <td>bottom</td>
-                                    <td>Position of indicators. Valid values are "bottom", "top", "left" and "right".</td>
-                                </tr>
-                                <tr>
-                                    <td>baseZIndex</td>
-                                    <td>number</td>
-                                    <td>0</td>
-                                    <td>Base zIndex value to use in layering.</td>
-                                </tr>
-                                <tr>
-                                    <td>maskClass</td>
-                                    <td>string</td>
-                                    <td>null</td>
-                                    <td>Style class of the mask on fullscreen mode.</td>
-                                </tr>
-                                <tr>
-                                    <td>containerStyle</td>
-                                    <td>any</td>
-                                    <td>null</td>
-                                    <td>Inline style of the component on fullscreen mode. Otherwise, the 'style' property can be used.</td>
-                                </tr>
-                                <tr>
-                                    <td>containerClass</td>
-                                    <td>any</td>
-                                    <td>null</td>
-                                    <td>Style class of the component on fullscreen mode. Otherwise, the 'class' property can be used.</td>
-                                </tr>
-                            </tbody>
-                        </table>
-                    </div>
+                <h5>Properties</h5>
+                <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
+                <div class="doc-tablewrapper">
+                    <table class="doc-table">
+                        <thead>
+                            <tr>
+                                <th>Name</th>
+                                <th>Type</th>
+                                <th>Default</th>
+                                <th>Description</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td>id</td>
+                                <td>string</td>
+                                <td>null</td>
+                                <td>Unique identifier of the element.</td>
+                            </tr>
+                            <tr>
+                                <td>value</td>
+                                <td>array</td>
+                                <td>null</td>
+                                <td>An array of objects to display.</td>
+                            </tr>
+                            <tr>
+                                <td>activeIndex</td>
+                                <td>number</td>
+                                <td>0</td>
+                                <td>Index of the first item.</td>
+                            </tr>
+                            <tr>
+                                <td>fullScreen</td>
+                                <td>boolean</td>
+                                <td>false</td>
+                                <td>Whether to display the component on fullscreen.</td>
+                            </tr>
+                            <tr>
+                                <td>visible</td>
+                                <td>boolean</td>
+                                <td>false</td>
+                                <td>Specifies the visibility of the mask on fullscreen mode.</td>
+                            </tr>
+                            <tr>
+                                <td>numVisible</td>
+                                <td>number</td>
+                                <td>3</td>
+                                <td>Number of items per page.</td>
+                            </tr>
+                            <tr>
+                                <td>responsiveOptions</td>
+                                <td>any</td>
+                                <td>null</td>
+                                <td>An array of options for responsive design.</td>
+                            </tr>
+                            <tr>
+                                <td>showItemNavigators</td>
+                                <td>boolean</td>
+                                <td>false</td>
+                                <td>Whether to display navigation buttons in item section.</td>
+                            </tr>
+                            <tr>
+                                <td>showThumbnailNavigators</td>
+                                <td>boolean</td>
+                                <td>true</td>
+                                <td>Whether to display navigation buttons in thumbnail container.</td>
+                            </tr>
+                            <tr>
+                                <td>showItemNavigatorsOnHover</td>
+                                <td>boolean</td>
+                                <td>false</td>
+                                <td>Whether to display navigation buttons on item hover.</td>
+                            </tr>
+                            <tr>
+                                <td>changeItemOnIndicatorHover</td>
+                                <td>boolean</td>
+                                <td>false</td>
+                                <td>When enabled, item is changed on indicator hover.</td>
+                            </tr>
+                            <tr>
+                                <td>circular</td>
+                                <td>boolean</td>
+                                <td>false</td>
+                                <td>Defines if scrolling would be infinite.</td>
+                            </tr>
+                            <tr>
+                                <td>autoPlay</td>
+                                <td>boolean</td>
+                                <td>false</td>
+                                <td>Items are displayed with a slideshow in autoPlay mode.</td>
+                            </tr>
+                            <tr>
+                                <td>transitionInterval</td>
+                                <td>number</td>
+                                <td>4000</td>
+                                <td>Time in milliseconds to scroll items.</td>
+                            </tr>
+                            <tr>
+                                <td>showThumbnails</td>
+                                <td>boolean</td>
+                                <td>true</td>
+                                <td>Whether to display thumbnail container.</td>
+                            </tr>
+                            <tr>
+                                <td>thumbnailsPosition</td>
+                                <td>string</td>
+                                <td>bottom</td>
+                                <td>Position of thumbnails. Valid values are "bottom", "top", "left" and "right".</td>
+                            </tr>
+                            <tr>
+                                <td>verticalThumbnailViewPortHeight</td>
+                                <td>string</td>
+                                <td>300px</td>
+                                <td>Height of the viewport in vertical thumbnail.</td>
+                            </tr>
+                            <tr>
+                                <td>showIndicators</td>
+                                <td>boolean</td>
+                                <td>false</td>
+                                <td>Whether to display indicator container.</td>
+                            </tr>
+                            <tr>
+                                <td>showIndicatorsOnItem</td>
+                                <td>boolean</td>
+                                <td>false</td>
+                                <td>When enabled, indicator container is displayed on item container.</td>
+                            </tr>
+                            <tr>
+                                <td>indicatorsPosition</td>
+                                <td>string</td>
+                                <td>bottom</td>
+                                <td>Position of indicators. Valid values are "bottom", "top", "left" and "right".</td>
+                            </tr>
+                            <tr>
+                                <td>baseZIndex</td>
+                                <td>number</td>
+                                <td>0</td>
+                                <td>Base zIndex value to use in layering.</td>
+                            </tr>
+                            <tr>
+                                <td>maskClass</td>
+                                <td>string</td>
+                                <td>null</td>
+                                <td>Style class of the mask on fullscreen mode.</td>
+                            </tr>
+                            <tr>
+                                <td>containerStyle</td>
+                                <td>any</td>
+                                <td>null</td>
+                                <td>Inline style of the component on fullscreen mode. Otherwise, the 'style' property can be used.</td>
+                            </tr>
+                            <tr>
+                                <td>containerClass</td>
+                                <td>any</td>
+                                <td>null</td>
+                                <td>Style class of the component on fullscreen mode. Otherwise, the 'class' property can be used.</td>
+                            </tr>
+                            <tr>
+                                <td>containerProps</td>
+                                <td>object</td>
+                                <td>null</td>
+                                <td>Uses to pass all properties of the HTMLDivElement to the container element on fullscreen mode.</td>
+                            </tr>
+                            <tr>
+                                <td>prevButtonProps</td>
+                                <td>object</td>
+                                <td>null</td>
+                                <td>Uses to pass all properties of the HTMLButtonElement to the previous navigation button.</td>
+                            </tr>
+                            <tr>
+                                <td>nextButtonProps</td>
+                                <td>object</td>
+                                <td>null</td>
+                                <td>Uses to pass all properties of the HTMLButtonElement to the next navigation button.</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
 
-                    <h5>Slots</h5>
-                    <div class="doc-tablewrapper">
-                        <table class="doc-table">
-                            <thead>
-                                <tr>
-                                    <th>Name</th>
-                                    <th>Parameters</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <tr>
-                                    <td>header</td>
-                                    <td>-</td>
-                                </tr>
-                                <tr>
-                                    <td>footer</td>
-                                    <td>-</td>
-                                </tr>
-                                <tr>
-                                    <td>item</td>
-                                    <td>item: Item instance</td>
-                                </tr>
-                                <tr>
-                                    <td>caption</td>
-                                    <td>item: Item instance</td>
-                                </tr>
-                                <tr>
-                                    <td>thumbnail</td>
-                                    <td>item: Item instance</td>
-                                </tr>
-                                <tr>
-                                    <td>indicator</td>
-                                    <td>index: Index of the indicator item</td>
-                                </tr>
-                            </tbody>
-                        </table>
-                    </div>
+                <h5>Slots</h5>
+                <div class="doc-tablewrapper">
+                    <table class="doc-table">
+                        <thead>
+                            <tr>
+                                <th>Name</th>
+                                <th>Parameters</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td>header</td>
+                                <td>-</td>
+                            </tr>
+                            <tr>
+                                <td>footer</td>
+                                <td>-</td>
+                            </tr>
+                            <tr>
+                                <td>item</td>
+                                <td>item: Item instance</td>
+                            </tr>
+                            <tr>
+                                <td>caption</td>
+                                <td>item: Item instance</td>
+                            </tr>
+                            <tr>
+                                <td>thumbnail</td>
+                                <td>item: Item instance</td>
+                            </tr>
+                            <tr>
+                                <td>indicator</td>
+                                <td>index: Index of the indicator item</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
 
-                    <h5>Styling</h5>
-                    <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
-                    <div class="doc-tablewrapper">
-                        <table class="doc-table">
-                            <thead>
-                                <tr>
-                                    <th>Name</th>
-                                    <th>Element</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <tr>
-                                    <td>p-galleria</td>
-                                    <td>Container element.</td>
-                                </tr>
-                                <tr>
-                                    <td>p-galleria-header</td>
-                                    <td>Header section.</td>
-                                </tr>
-                                <tr>
-                                    <td>p-galleria-footer</td>
-                                    <td>Footer section.</td>
-                                </tr>
-                                <tr>
-                                    <td>p-galleria-item-wrapper</td>
-                                    <td>Item wrapper element. It contains item container and indicators.</td>
-                                </tr>
-                                <tr>
-                                    <td>p-galleria-item-container</td>
-                                    <td>Container of the item wrapper. It contains navigation buttons, items and caption content.</td>
-                                </tr>
-                                <tr>
-                                    <td>p-galleria-indicators</td>
-                                    <td>Container of the indicators. It contains indicator items.</td>
-                                </tr>
-                                <tr>
-                                    <td>p-galleria-thumbnail-content</td>
-                                    <td>Thumbnail content element.</td>
-                                </tr>
-                                <tr>
-                                    <td>p-galleria-thumbnail-container</td>
-                                    <td>Container of the thumbnail content. It contains navigation buttons and thumbnail items.</td>
-                                </tr>
-                                <tr>
-                                    <td>p-galleria-caption</td>
-                                    <td>Content of the item caption.</td>
-                                </tr>
-                            </tbody>
-                        </table>
-                    </div>
+                <h5>Styling</h5>
+                <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+                <div class="doc-tablewrapper">
+                    <table class="doc-table">
+                        <thead>
+                            <tr>
+                                <th>Name</th>
+                                <th>Element</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td>p-galleria</td>
+                                <td>Container element.</td>
+                            </tr>
+                            <tr>
+                                <td>p-galleria-header</td>
+                                <td>Header section.</td>
+                            </tr>
+                            <tr>
+                                <td>p-galleria-footer</td>
+                                <td>Footer section.</td>
+                            </tr>
+                            <tr>
+                                <td>p-galleria-item-wrapper</td>
+                                <td>Item wrapper element. It contains item container and indicators.</td>
+                            </tr>
+                            <tr>
+                                <td>p-galleria-item-container</td>
+                                <td>Container of the item wrapper. It contains navigation buttons, items and caption content.</td>
+                            </tr>
+                            <tr>
+                                <td>p-galleria-indicators</td>
+                                <td>Container of the indicators. It contains indicator items.</td>
+                            </tr>
+                            <tr>
+                                <td>p-galleria-thumbnail-content</td>
+                                <td>Thumbnail content element.</td>
+                            </tr>
+                            <tr>
+                                <td>p-galleria-thumbnail-container</td>
+                                <td>Container of the thumbnail content. It contains navigation buttons and thumbnail items.</td>
+                            </tr>
+                            <tr>
+                                <td>p-galleria-caption</td>
+                                <td>Content of the item caption.</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
 
-                    <h5>Dependencies</h5>
-                    <p>None.</p>
-                </TabPanel>
+                <h5>Accessibility</h5>
+                <h6>Screen Reader</h6>
+                <p>
+                    Galleria uses <i>region</i> role and since any attribute is passed to the main container element, attributes such as <i>aria-label</i> and <i>aria-roledescription</i> can be used as well. The slides container has
+                    <i>aria-live</i> attribute set as "polite" if galleria is not in autoplay mode, otherwise "off" would be the value in autoplay.
+                </p>
 
-                <TabPanel header="Source">
-                    <a href="https://github.com/primefaces/primevue/tree/master/src/views/galleria" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
-                        <span>View on GitHub</span>
-                    </a>
-                    <pre v-code><code><template v-pre>
+                <p>
+                    A slide has a <i>group</i> role with an aria-label that refers to the <i>aria.slideNumber</i> property of the <router-link to="/locale">locale</router-link> API. Similarly <i>aria.slide</i> is used as the
+                    <i>aria-roledescription</i> of the item. Inactive slides are hidden from the readers with <i>aria-hidden</i>.
+                </p>
+
+                <p>
+                    Next and Previous navigators are button elements with <i>aria-label</i> attributes referring to the <i>aria.prevPageLabel</i> and <i>aria.nextPageLabel</i> properties of the <router-link to="/locale">locale</router-link> API by
+                    default respectively, you may still use your own aria roles and attributes as any valid attribute is passed to the button elements implicitly by using <i>nextButtonProps</i> and <i>prevButtonProps</i>.
+                </p>
+
+                <p>
+                    Quick navigation elements and thumnbails follow the tab pattern. They are placed inside an element with a <i>tablist</i> role whereas each item has a <i>tab</i> role with <i>aria-selected</i> and <i>aria-controls</i> attributes.
+                    The <i>aria-label</i> attribute of a quick navigation item refers to the <i>aria.pageLabel</i> of the <router-link to="/locale">locale</router-link> API. Current page is marked with <i>aria-current</i>.
+                </p>
+
+                <p>
+                    In full screen mode, modal element uses <i>dialog</i> role with <i>aria-modal</i> enabled. The close button retrieves <i>aria-label</i> from the <i>aria.close</i> property of the <router-link to="/locale">locale</router-link> API.
+                </p>
+
+                <h6>Next/Prev Keyboard Support</h6>
+                <div class="doc-tablewrapper">
+                    <table class="doc-table">
+                        <thead>
+                            <tr>
+                                <th>Key</th>
+                                <th>Function</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td>
+                                    <i>tab</i>
+                                </td>
+                                <td>Moves focus through interactive elements in the carousel.</td>
+                            </tr>
+                            <tr>
+                                <td>
+                                    <i>enter</i>
+                                </td>
+                                <td>Activates navigation.</td>
+                            </tr>
+                            <tr>
+                                <td>
+                                    <i>space</i>
+                                </td>
+                                <td>Activates navigation.</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+
+                <h6>Quick Navigation Keyboard Support</h6>
+                <div class="doc-tablewrapper">
+                    <table class="doc-table">
+                        <thead>
+                            <tr>
+                                <th>Key</th>
+                                <th>Function</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td>
+                                    <i>tab</i>
+                                </td>
+                                <td>Moves focus through the active slide link.</td>
+                            </tr>
+                            <tr>
+                                <td>
+                                    <i>enter</i>
+                                </td>
+                                <td>Activates the focused slide link.</td>
+                            </tr>
+                            <tr>
+                                <td>
+                                    <i>space</i>
+                                </td>
+                                <td>Activates the focused slide link.</td>
+                            </tr>
+                            <tr>
+                                <td>
+                                    <i>right arrow</i>
+                                </td>
+                                <td>Moves focus to the next slide link.</td>
+                            </tr>
+                            <tr>
+                                <td>
+                                    <i>left arrow</i>
+                                </td>
+                                <td>Moves focus to the previous slide link.</td>
+                            </tr>
+                            <tr>
+                                <td>
+                                    <i>home</i>
+                                </td>
+                                <td>Moves focus to the first slide link.</td>
+                            </tr>
+                            <tr>
+                                <td>
+                                    <i>end</i>
+                                </td>
+                                <td>Moves focus to the last slide link.</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+
+                <h5>Dependencies</h5>
+                <p>None.</p>
+            </TabPanel>
+
+            <TabPanel header="Source">
+                <a href="https://github.com/primefaces/primevue/tree/master/src/views/galleria" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
+                    <span>View on GitHub</span>
+                </a>
+                <pre v-code><code><template v-pre>
 &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"&gt;
     &lt;template #item="slotProps"&gt;
         &lt;img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" /&gt;
@@ -506,7 +637,7 @@ responsiveOptions: [
 </template>
 </code></pre>
 
-                    <pre v-code.script><code>
+                <pre v-code.script><code>
 import PhotoService from '../../service/PhotoService';
 
 export default {
@@ -539,8 +670,7 @@ export default {
 }
 
 </code></pre>
-                </TabPanel>
-            </TabView>
-        </ClientOnly>
+            </TabPanel>
+        </TabView>
     </div>
 </template>
diff --git a/pages/galleria/Programmatic.vue b/pages/galleria/Programmatic.vue
index f84984c92..26c2c69b5 100644
--- a/pages/galleria/Programmatic.vue
+++ b/pages/galleria/Programmatic.vue
@@ -14,7 +14,7 @@
                     <Button icon="pi pi-plus" @click="next" class="p-button-secondary" style="margin-left: 0.5rem" />
                 </div>
 
-                <Galleria :value="images" v-model:activeIndex="activeIndex" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
+                <Galleria v-model:activeIndex="activeIndex" :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
                     <template #item="slotProps">
                         <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
                     </template>
diff --git a/pages/icons/index.vue b/pages/icons/index.vue
index cef5e48f4..6936671b5 100755
--- a/pages/icons/index.vue
+++ b/pages/icons/index.vue
@@ -94,7 +94,7 @@ export default {
             <InputText v-model="filter" class="icon-filter" placeholder="Search an icon" />
 
             <div class="grid icons-list">
-                <div class="col-12 md:col-2 icon" v-for="icon of filteredIcons" :key="icon.properties.name">
+                <div v-for="icon of filteredIcons" :key="icon.properties.name" class="col-12 md:col-2 icon">
                     <i :class="'pi pi-' + icon.properties.name"></i>
                     <div>pi-{{ icon.properties.name }}</div>
                 </div>
@@ -119,8 +119,10 @@ export default {
                 let data = icons.filter((value) => {
                     return value.icon.tags.indexOf('deprecate') === -1;
                 });
+
                 data.sort((icon1, icon2) => {
                     if (icon1.properties.name < icon2.properties.name) return -1;
+                    // eslint-disable-next-line no-dupe-else-if
                     else if (icon1.properties.name < icon2.properties.name) return 1;
                     else return 0;
                 });
diff --git a/pages/image/ImageDoc.vue b/pages/image/ImageDoc.vue
index c5d9c48b8..444e5642a 100644
--- a/pages/image/ImageDoc.vue
+++ b/pages/image/ImageDoc.vue
@@ -1,32 +1,31 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="ImageDemo" :sources="sources" github="image/ImageDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="ImageDemo" :sources="sources" github="image/ImageDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import Image from 'primevue/image';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/image/image.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p>Image is used as the native <i>img</i> element and supports all properties that the native element has.</p>
-            <pre v-code><code>
+        <h5>Getting Started</h5>
+        <p>Image is used as the native <i>img</i> element and supports all properties that the native element has.</p>
+        <pre v-code><code>
 &lt;Image src="image1.png" alt="Image Text" /&gt;
 
 </code></pre>
 
-            <h5>Preview</h5>
-            <p>Preview mode displays a modal layer when the image is clicked that provides transformation options such as rotating and zooming.</p>
+        <h5>Preview</h5>
+        <p>Preview mode displays a modal layer when the image is clicked that provides transformation options such as rotating and zooming.</p>
 
-            <h5>Indicator Templating</h5>
-            <p>An eye icon is displayed by default when the image is hovered in preview mode. Use the <i>indicator</i> template for custom content.</p>
-            <pre v-code><code>
+        <h5>Indicator Templating</h5>
+        <p>An eye icon is displayed by default when the image is hovered in preview mode. Use the <i>indicator</i> template for custom content.</p>
+        <pre v-code><code>
 &lt;Image src="image1.png" alt="Image Text"&gt;
     &lt;template #indicator&gt;
         Preview Content
@@ -35,141 +34,190 @@ import Image from 'primevue/image';
 
 </code></pre>
 
-            <h5>Properties</h5>
-            <p>Image passes any valid attribute to the underlying img element, additional attribute is the following.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>preview</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Controls the preview functionality.</td>
-                        </tr>
-                        <tr>
-                            <td>imageStyle</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Inline style of the image element.</td>
-                        </tr>
-                        <tr>
-                            <td>imageClass</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the image element.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <p>Image passes any valid attribute to the underlying img element, additional attribute is the following.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>preview</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Controls the preview functionality.</td>
+                    </tr>
+                    <tr>
+                        <td>imageStyle</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Inline style of the image element.</td>
+                    </tr>
+                    <tr>
+                        <td>imageClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the image element.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Events</h5>
-            <p>Any valid event like click and mouseover are passed to the underlying input element. Events below are the additional ones related to the preview functionality.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>show</td>
-                            <td>-</td>
-                            <td>Triggered when the preview overlay is shown.</td>
-                        </tr>
-                        <tr>
-                            <td>hide</td>
-                            <td>-</td>
-                            <td>Triggered when the preview overlay is hidden.</td>
-                        </tr>
-                        <tr>
-                            <td>error</td>
-                            <td>-</td>
-                            <td>Triggered when an error occurs while loading an image file.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Events</h5>
+        <p>Any valid event like click and mouseover are passed to the underlying input element. Events below are the additional ones related to the preview functionality.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>show</td>
+                        <td>-</td>
+                        <td>Triggered when the preview overlay is shown.</td>
+                    </tr>
+                    <tr>
+                        <td>hide</td>
+                        <td>-</td>
+                        <td>Triggered when the preview overlay is hidden.</td>
+                    </tr>
+                    <tr>
+                        <td>error</td>
+                        <td>-</td>
+                        <td>Triggered when an error occurs while loading an image file.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Slots</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>indicator</td>
-                            <td>-</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Slots</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>indicator</td>
+                        <td>-</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-image</td>
-                            <td>Container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-image-preview-container</td>
-                            <td>Container element with preview enabled.</td>
-                        </tr>
-                        <tr>
-                            <td>p-image-preview-indicator</td>
-                            <td>Mask layer over the image when hovered.</td>
-                        </tr>
-                        <tr>
-                            <td>p-image-preview-icon</td>
-                            <td>Icon of the preview indicator.</td>
-                        </tr>
-                        <tr>
-                            <td>p-image-mask</td>
-                            <td>Preview overlay container.</td>
-                        </tr>
-                        <tr>
-                            <td>p-image-toolbar</td>
-                            <td>Transformation options container.</td>
-                        </tr>
-                        <tr>
-                            <td>p-image-action</td>
-                            <td>An element inside the toolbar.</td>
-                        </tr>
-                        <tr>
-                            <td>p-image-preview</td>
-                            <td>Image element inside the preview overlay.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-image</td>
+                        <td>Container element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-image-preview-container</td>
+                        <td>Container element with preview enabled.</td>
+                    </tr>
+                    <tr>
+                        <td>p-image-preview-indicator</td>
+                        <td>Mask layer over the image when hovered.</td>
+                    </tr>
+                    <tr>
+                        <td>p-image-preview-icon</td>
+                        <td>Icon of the preview indicator.</td>
+                    </tr>
+                    <tr>
+                        <td>p-image-mask</td>
+                        <td>Preview overlay container.</td>
+                    </tr>
+                    <tr>
+                        <td>p-image-toolbar</td>
+                        <td>Transformation options container.</td>
+                    </tr>
+                    <tr>
+                        <td>p-image-action</td>
+                        <td>An element inside the toolbar.</td>
+                    </tr>
+                    <tr>
+                        <td>p-image-preview</td>
+                        <td>Image element inside the preview overlay.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc>
-    </ClientOnly>
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>
+            The preview button is a native <i>button</i> element with an <i>aria-label</i> that refers to the <i>aria.zoomImage</i> property of the <router-link to="/locale">locale</router-link> API by default, with <i>previewButtonProps</i>
+            you may use your own aria roles and attributes as any valid attribute is passed to the button element implicitly.
+        </p>
+
+        <p>When preview is active, <i>dialog</i> role with <i>aria-modal</i> is applied to the overlay image container.</p>
+
+        <p>Button controls use <i>aria.rotateRight</i>, <i>aria.rotateLeft</i>, <i>aria.zoomIn</i>, <i>aria.zoomOut</i> and <i>aria.close</i> from the <router-link to="/locale">locale</router-link> API as <i>aria-label</i>.</p>
+
+        <h6>ButtonBar Keyboard Support</h6>
+        <p>When preview is activated, close button receives the initial focus.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>tab</i>
+                        </td>
+                        <td>Moves focus through button bar.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>Activates the button.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>Activates the button.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>esc</i>
+                        </td>
+                        <td>Closes the image preview.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
diff --git a/pages/image/index.vue b/pages/image/index.vue
index 82a384304..bb6ab9673 100644
--- a/pages/image/index.vue
+++ b/pages/image/index.vue
@@ -3,7 +3,7 @@
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>Image</h1>
-                <p>Displays an image with preview and tranformation options. For multiple image, see <nuxt-link to="galleria">Galleria</nuxt-link>.</p>
+                <p>Displays an image with preview and tranformation options. For multiple image, see <router-link to="galleria">Galleria</router-link>.</p>
             </div>
             <AppDemoActions />
         </div>
@@ -11,10 +11,10 @@
         <div class="content-section implementation">
             <div class="card">
                 <h5>Basic</h5>
-                <Image src="/demo/images/galleria/galleria1.jpg" alt="Image" width="250" />
+                <Image src="demo/images/galleria/galleria1.jpg" alt="Image" width="250" />
 
                 <h5>Preview</h5>
-                <Image src="/demo/images/galleria/galleria11.jpg" alt="Image" width="250" preview />
+                <Image src="demo/images/galleria/galleria11.jpg" alt="Image" width="250" preview />
             </div>
         </div>
 
diff --git a/pages/index.vue b/pages/index.vue
index dfc68ad5c..ad248bbd1 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -20,17 +20,17 @@
 
 <script>
 import EventBus from '@/layouts/AppEventBus';
-import HeaderSection from './landing/HeaderSection';
-import HeroSection from './landing/HeroSection';
-import ComponentSection from './landing/ComponentSection';
-import ThemeSection from './landing/ThemeSection';
+import AppNews from '@/layouts/AppNews';
 import BlockSection from './landing/BlockSection';
+import ComponentSection from './landing/ComponentSection';
 import DesignerSection from './landing/DesignerSection';
-import TemplateSection from './landing/TemplateSection';
-import UsersSection from './landing/UsersSection';
 import FeaturesSection from './landing/FeaturesSection';
 import FooterSection from './landing/FooterSection';
-import AppNews from '@/layouts/AppNews';
+import HeaderSection from './landing/HeaderSection';
+import HeroSection from './landing/HeroSection';
+import TemplateSection from './landing/TemplateSection';
+import ThemeSection from './landing/ThemeSection';
+import UsersSection from './landing/UsersSection';
 
 export default {
     props: {
diff --git a/pages/inplace/InplaceDoc.vue b/pages/inplace/InplaceDoc.vue
index 137e30a54..e9f36ac2e 100755
--- a/pages/inplace/InplaceDoc.vue
+++ b/pages/inplace/InplaceDoc.vue
@@ -1,38 +1,37 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="InplaceDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="inplace/InplaceDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="InplaceDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="inplace/InplaceDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import Inplace from 'primevue/inplace';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/inplace/inplace.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p>Inplace requires <i>display</i> and <i>content</i> templates to define the content of each state.</p>
+        <h5>Getting Started</h5>
+        <p>Inplace requires <i>display</i> and <i>content</i> templates to define the content of each state.</p>
 
-            <pre v-code><code><template v-pre>
+        <pre v-code><code><template v-pre>
 &lt;Inplace&gt;
     &lt;template #display&gt;
         &lt;span class="pi pi-search" style="vertical-align: middle"&gt;&lt;/span&gt;
         &lt;span style="margin-left:.5rem; vertical-align: middle"&gt;View Picture&lt;/span&gt;
     &lt;/template&gt;
     &lt;template #content&gt;
-        &lt;img src="/demo/images/nature/nature1.jpg" /&gt;
+        &lt;img src="demo/images/nature/nature1.jpg" /&gt;
     &lt;/template&gt;
 &lt;/Inplace&gt;
 </template>
 </code></pre>
 
-            <h5>Closable</h5>
-            <p><i>closable</i> property is handy within forms as it enables to switch back to output mode after editing is completed using a button displayed next to the form field.</p>
-            <pre v-code><code><template v-pre>
+        <h5>Closable</h5>
+        <p><i>closable</i> property is handy within forms as it enables to switch back to output mode after editing is completed using a button displayed next to the form field.</p>
+        <pre v-code><code><template v-pre>
 &lt;Inplace :closable="true"&gt;
     &lt;template #display&gt;
         &#123;&#123;text || 'Click to Edit'&#125;&#125;
@@ -44,9 +43,9 @@ import Inplace from 'primevue/inplace';
 </template>
 </code></pre>
 
-            <h5>Lazy Data</h5>
-            <p>Inplace allows lazy loading content so that the content gets initialized after getting opened instead of on load. Here is an example that loads, data of a table if the user decides to open the inplace.</p>
-            <pre v-code><code><template v-pre>
+        <h5>Lazy Data</h5>
+        <p>Inplace allows lazy loading content so that the content gets initialized after getting opened instead of on load. Here is an example that loads, data of a table if the user decides to open the inplace.</p>
+        <pre v-code><code><template v-pre>
 &lt;Inplace @open="loadData"&gt;
     &lt;template #display&gt;
         View Data
@@ -63,7 +62,7 @@ import Inplace from 'primevue/inplace';
 </template>
 </code></pre>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 import CarService from '../../service/CarService';
 
 export default {
@@ -85,119 +84,194 @@ export default {
 
 </code></pre>
 
-            <h5>Properties</h5>
-            <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>active</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Whether the content is displayed or not.</td>
-                        </tr>
-                        <tr>
-                            <td>closable</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Displays a button to switch back to display mode.</td>
-                        </tr>
-                        <tr>
-                            <td>disabled</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When present, it specifies that the element should be disabled.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>active</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Whether the content is displayed or not.</td>
+                    </tr>
+                    <tr>
+                        <td>closable</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Displays a button to switch back to display mode.</td>
+                    </tr>
+                    <tr>
+                        <td>disabled</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When present, it specifies that the element should be disabled.</td>
+                    </tr>
+                    <tr>
+                        <td>closeIcon</td>
+                        <td>string</td>
+                        <td>pi pi-times</td>
+                        <td>Icon to display in the close button.</td>
+                    </tr>
+                    <tr>
+                        <td>displayProps</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Uses to pass all properties of the HTMLDivElement to display container.</td>
+                    </tr>
+                    <tr>
+                        <td>closeButtonProps</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Uses to pass all properties of the HTMLButtonElement to the close button.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Events</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>open</td>
-                            <td>event: browser event</td>
-                            <td>Callback to invoke when inplace is opened.</td>
-                        </tr>
-                        <tr>
-                            <td>close</td>
-                            <td>event: browser event</td>
-                            <td>Callback to invoke when inplace is closed.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Events</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>open</td>
+                        <td>event: browser event</td>
+                        <td>Callback to invoke when inplace is opened.</td>
+                    </tr>
+                    <tr>
+                        <td>close</td>
+                        <td>event: browser event</td>
+                        <td>Callback to invoke when inplace is closed.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Slots</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>display</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>content</td>
-                            <td>-</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Slots</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>display</td>
+                        <td>-</td>
+                    </tr>
+                    <tr>
+                        <td>content</td>
+                        <td>-</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-inplace</td>
-                            <td>Container element</td>
-                        </tr>
-                        <tr>
-                            <td>p-inplace-display</td>
-                            <td>Display container</td>
-                        </tr>
-                        <tr>
-                            <td>p-inplace-content</td>
-                            <td>Content container</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-inplace</td>
+                        <td>Container element</td>
+                    </tr>
+                    <tr>
+                        <td>p-inplace-display</td>
+                        <td>Display container</td>
+                    </tr>
+                    <tr>
+                        <td>p-inplace-content</td>
+                        <td>Content container</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc>
-    </ClientOnly>
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>Inplace component defines <i>aria-live</i> as "polite" by default, since any valid attribute is passed to the main container aria roles and attributes of the root element can be customized easily.</p>
+        <p>
+            Display element uses <i>button</i> role in view mode by default, <i>displayProps</i> can be used for customizations like adding <i>aria-label</i> or <i>aria-labelledby</i> attributes to describe the content of the view mode or even
+            overriding the default role.
+        </p>
+        <p>
+            Closable inplace components displays a button with an <i>aria-label</i> that refers to the <i>aria.close</i> property of the <router-link to="/locale">locale</router-link> API by default, you may use <i>closeButtonProps</i> to customize
+            the element and override the default <i>aria-label</i>.
+        </p>
+
+        <h6>View Mode Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>Switches to content.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h6>Close Button Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>Switches to display.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>Switches to display.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
diff --git a/pages/inplace/index.vue b/pages/inplace/index.vue
index a58c551ac..bc54de3f8 100755
--- a/pages/inplace/index.vue
+++ b/pages/inplace/index.vue
@@ -27,7 +27,7 @@
                         <span style="margin-left: 0.5rem; vertical-align: middle">View Picture</span>
                     </template>
                     <template #content>
-                        <img src="/demo/images/nature/nature1.jpg" />
+                        <img src="demo/images/nature/nature1.jpg" />
                     </template>
                 </Inplace>
 
diff --git a/pages/inputgroup/InputGroupDoc.vue b/pages/inputgroup/InputGroupDoc.vue
index fef17a7eb..afb2d6aa8 100755
--- a/pages/inputgroup/InputGroupDoc.vue
+++ b/pages/inputgroup/InputGroupDoc.vue
@@ -1,7 +1,5 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="InputGroupDemo" :sources="sources" github="inputgroup/InputGroupDemo.vue" />
-    </ClientOnly>
+    <AppDoc name="InputGroupDemo" :sources="sources" github="inputgroup/InputGroupDemo.vue" />
 </template>
 
 <script>
diff --git a/pages/inputgroup/index.vue b/pages/inputgroup/index.vue
index be61596ab..4a565ed9b 100755
--- a/pages/inputgroup/index.vue
+++ b/pages/inputgroup/index.vue
@@ -94,7 +94,7 @@
                         <div class="p-inputgroup">
                             <InputText placeholder="Price" />
                             <span class="p-inputgroup-addon">
-                                <RadioButton name="rb1" value="rb1" v-model="radioValue1" />
+                                <RadioButton v-model="radioValue1" name="rb1" value="rb1" />
                             </span>
                         </div>
                     </div>
@@ -106,7 +106,7 @@
                             </span>
                             <InputText placeholder="Website" />
                             <span class="p-inputgroup-addon">
-                                <RadioButton name="rb2" value="rb2" v-model="radioValue2" />
+                                <RadioButton v-model="radioValue2" name="rb2" value="rb2" />
                             </span>
                         </div>
                     </div>
diff --git a/pages/inputmask/InputMaskDoc.vue b/pages/inputmask/InputMaskDoc.vue
index 2aa69570a..0c32f67c9 100755
--- a/pages/inputmask/InputMaskDoc.vue
+++ b/pages/inputmask/InputMaskDoc.vue
@@ -1,132 +1,131 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="InputMaskDemo" :sources="sources" github="inputmask/InputMaskDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="InputMaskDemo" :sources="sources" github="inputmask/InputMaskDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import InputMask from 'primevue/inputmask';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/inputmask/inputmask.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p>A model can be bound using the standard v-model directive.</p>
-            <pre v-code><code>
+        <h5>Getting Started</h5>
+        <p>A model can be bound using the standard v-model directive.</p>
+        <pre v-code><code>
 &lt;InputMask v-model="value" mask="99-999999" /&gt;
 
 </code></pre>
 
-            <h5>Mask</h5>
-            <p>Mask format can be a combination of the the following built-in definitions.</p>
+        <h5>Mask</h5>
+        <p>Mask format can be a combination of the the following built-in definitions.</p>
 
-            <ul>
-                <li>a - Alpha character (A-Z,a-z)</li>
-                <li>9 - Numeric character (0-9)</li>
-                <li>* - Alpha numberic character (A-Z,a-z,0-9)</li>
-            </ul>
-            <pre v-code><code>
+        <ul>
+            <li>a - Alpha character (A-Z,a-z)</li>
+            <li>9 - Numeric character (0-9)</li>
+            <li>* - Alpha numberic character (A-Z,a-z,0-9)</li>
+        </ul>
+        <pre v-code><code>
 &lt;InputMask v-model="value" mask="a*-999-a999" /&gt;
 
 </code></pre>
 
-            <h5>SlotChar</h5>
-            <p>Underscore is the default placeholder for a mask and this can be customized using <i>slotChart</i> option.</p>
-            <pre v-code><code>
+        <h5>SlotChar</h5>
+        <p>Underscore is the default placeholder for a mask and this can be customized using <i>slotChart</i> option.</p>
+        <pre v-code><code>
 &lt;InputMask v-model="value" mask="99/99/9999" slotChar="mm/dd/yyyy" /&gt;
 
 </code></pre>
-            <h5>Optional Values</h5>
-            <p>
-                If the input does not complete the mask definition, it is cleared by default. Use <i>autoClear</i> property to control this behavior. In addition, certain part of a mask can be made optional by using ? symbol where anything after the
-                question mark becomes optional.
-            </p>
-            <pre v-code><code>
+        <h5>Optional Values</h5>
+        <p>
+            If the input does not complete the mask definition, it is cleared by default. Use <i>autoClear</i> property to control this behavior. In addition, certain part of a mask can be made optional by using ? symbol where anything after the
+            question mark becomes optional.
+        </p>
+        <pre v-code><code>
 &lt;InputMask v-model="value" mask="(999) 999-9999? x99999" /&gt;
 
 </code></pre>
 
-            <h5>Properties</h5>
-            <p>InputText passes any valid attribute to the underlying input element. In addition;</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>modelValue</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Value of the component.</td>
-                        </tr>
-                        <tr>
-                            <td>mask</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Mask pattern.</td>
-                        </tr>
-                        <tr>
-                            <td>slotChar</td>
-                            <td>string</td>
-                            <td>_</td>
-                            <td>Placeholder character in mask, default is underscore.</td>
-                        </tr>
-                        <tr>
-                            <td>autoClear</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Clears the incomplete value on blur.</td>
-                        </tr>
-                        <tr>
-                            <td>unmask</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Defines if model sets the raw unmasked value to bound value or the formatted mask value.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <p>InputText passes any valid attribute to the underlying input element. In addition;</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>modelValue</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Value of the component.</td>
+                    </tr>
+                    <tr>
+                        <td>mask</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Mask pattern.</td>
+                    </tr>
+                    <tr>
+                        <td>slotChar</td>
+                        <td>string</td>
+                        <td>_</td>
+                        <td>Placeholder character in mask, default is underscore.</td>
+                    </tr>
+                    <tr>
+                        <td>autoClear</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Clears the incomplete value on blur.</td>
+                    </tr>
+                    <tr>
+                        <td>unmask</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Defines if model sets the raw unmasked value to bound value or the formatted mask value.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Events</h5>
-            <p>Any valid event such as focus, blur and input are passed to the underlying input element.</p>
+        <h5>Events</h5>
+        <p>Any valid event such as focus, blur and input are passed to the underlying input element.</p>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-inputmask p-inputtext</td>
-                            <td>Input element</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-inputmask p-inputtext</td>
+                        <td>Input element</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Accessibility</h5>
-            <h6>Screen Reader</h6>
-            <p>
-                InputMask component renders a native input element that implicitly includes any passed prop. Value to describe the component can either be provided via <i>label</i> tag combined with <i>id</i> prop or using <i>aria-labelledby</i>,
-                <i>aria-label</i> props.
-            </p>
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>
+            InputMask component renders a native input element that implicitly includes any passed prop. Value to describe the component can either be provided via <i>label</i> tag combined with <i>id</i> prop or using <i>aria-labelledby</i>,
+            <i>aria-label</i> props.
+        </p>
 
-            <pre v-code><code>
+        <pre v-code><code>
 &lt;label for="date"&gt;Date&lt;/label&gt;
 &lt;InputMask id="date" /&gt;
 
@@ -137,28 +136,27 @@ import InputMask from 'primevue/inputmask';
 
 </code></pre>
 
-            <h6>Keyboard Support</h6>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Key</th>
-                            <th>Function</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td><i>tab</i></td>
-                            <td>Moves focus to the input.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h6>Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>tab</i></td>
+                        <td>Moves focus to the input.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc>
-    </ClientOnly>
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
diff --git a/pages/inputmask/index.vue b/pages/inputmask/index.vue
index 97d018057..3bea061e8 100755
--- a/pages/inputmask/index.vue
+++ b/pages/inputmask/index.vue
@@ -13,32 +13,32 @@
                 <div class="p-fluid formgrid grid">
                     <div class="field col-12 md:col-4">
                         <label for="basic">Basic</label>
-                        <InputMask id="basic" mask="99-999999" v-model="val1" placeholder="99-999999" />
+                        <InputMask id="basic" v-model="val1" mask="99-999999" placeholder="99-999999" />
                     </div>
 
                     <div class="field col-12 md:col-4">
                         <label for="ssn">SSN</label>
-                        <InputMask id="ssn" mask="999-99-9999" v-model="val2" placeholder="999-99-9999" />
+                        <InputMask id="ssn" v-model="val2" mask="999-99-9999" placeholder="999-99-9999" />
                     </div>
 
                     <div class="field col-12 md:col-4">
                         <label for="date">Date</label>
-                        <InputMask id="date" mask="99/99/9999" v-model="val3" placeholder="99/99/9999" slotChar="mm/dd/yyyy" />
+                        <InputMask id="date" v-model="val3" mask="99/99/9999" placeholder="99/99/9999" slotChar="mm/dd/yyyy" />
                     </div>
 
                     <div class="field col-12 md:col-4">
                         <label for="phone">Phone</label>
-                        <InputMask date="phone" mask="(999) 999-9999" v-model="val4" placeholder="(999) 999-9999" />
+                        <InputMask v-model="val4" date="phone" mask="(999) 999-9999" placeholder="(999) 999-9999" />
                     </div>
 
                     <div class="field col-12 md:col-4">
                         <label for="phoneext">Phone Ext</label>
-                        <InputMask id="phoneext" mask="(999) 999-9999? x99999" v-model="val5" placeholder="(999) 999-9999? x99999" />
+                        <InputMask id="phoneext" v-model="val5" mask="(999) 999-9999? x99999" placeholder="(999) 999-9999? x99999" />
                     </div>
 
                     <div class="field col-12 md:col-4">
                         <label for="serial">Serial</label>
-                        <InputMask id="serial" mask="a*-999-a999" v-model="val6" placeholder="a*-999-a999" />
+                        <InputMask id="serial" v-model="val6" mask="a*-999-a999" placeholder="a*-999-a999" />
                     </div>
                 </div>
             </div>
diff --git a/pages/inputnumber/InputNumberDoc.vue b/pages/inputnumber/InputNumberDoc.vue
index cb9a4bcd0..b64c3e7d2 100755
--- a/pages/inputnumber/InputNumberDoc.vue
+++ b/pages/inputnumber/InputNumberDoc.vue
@@ -1,45 +1,44 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="InputNumberDemo" :sources="sources" github="inputnumber/InputNumberDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="InputNumberDemo" :sources="sources" github="inputnumber/InputNumberDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import InputNumber from 'primevue/inputnumber';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p>InputNumber is used with the standard v-model directive. Component always provides a number type although formatting on the input is a string.</p>
+        <h5>Getting Started</h5>
+        <p>InputNumber is used with the standard v-model directive. Component always provides a number type although formatting on the input is a string.</p>
 
-            <pre v-code><code>
+        <pre v-code><code>
 &lt;InputNumber v-model="value" /&gt;
 
 </code></pre>
 
-            <h5>Decimal Mode</h5>
-            <p>Format is defined using the <i>mode</i> property, "decimal" is the default value allowing only integers when there is no other configuration.</p>
-            <pre v-code><code>
+        <h5>Decimal Mode</h5>
+        <p>Format is defined using the <i>mode</i> property, "decimal" is the default value allowing only integers when there is no other configuration.</p>
+        <pre v-code><code>
 &lt;InputNumber v-model="value" mode="decimal" /&gt;
 
 </code></pre>
 
-            <p>Fractions are configured with the <i>minFractionDigits</i> property. Optionally <i>maxFractionDigits</i> can be used to defined a boundary for the maximum digits.</p>
-            <pre v-code><code>
+        <p>Fractions are configured with the <i>minFractionDigits</i> property. Optionally <i>maxFractionDigits</i> can be used to defined a boundary for the maximum digits.</p>
+        <pre v-code><code>
 &lt;InputNumber v-model="value1" mode="decimal" :minFractionDigits="2" /&gt;
 &lt;InputNumber v-model="value2" mode="decimal" :minFractionDigits="2" :maxFractionDigits="2" /&gt;
 
 </code></pre>
 
-            <p>
-                <i>locale</i> option is available to set the localization information such as grouping and decimal symbols where default value is the browser locale. Locales are defined per
-                <a href="https://tools.ietf.org/html/rfc5646">BCP Language Tag</a>.
-            </p>
-            <pre v-code><code>
+        <p>
+            <i>locale</i> option is available to set the localization information such as grouping and decimal symbols where default value is the browser locale. Locales are defined per
+            <a href="https://tools.ietf.org/html/rfc5646">BCP Language Tag</a>.
+        </p>
+        <pre v-code><code>
 User Locale
 &lt;InputNumber v-model="value1" mode="decimal" :minFractionDigits="2" /&gt;
 
@@ -54,12 +53,9 @@ Indian Locale
 
 </code></pre>
 
-            <h5>Currency</h5>
-            <p>
-                Currency formatting is specified by setting the <i>mode</i> option to currency and <i>currency</i> property. In addition <i>currencyDisplay</i> option allows how the currency is displayed, valid values are "symbol" (default) or
-                "code".
-            </p>
-            <pre v-code><code>
+        <h5>Currency</h5>
+        <p>Currency formatting is specified by setting the <i>mode</i> option to currency and <i>currency</i> property. In addition <i>currencyDisplay</i> option allows how the currency is displayed, valid values are "symbol" (default) or "code".</p>
+        <pre v-code><code>
 United States
 &lt;InputNumber v-model="value1" mode="currency" currency="USD" locale="en-US" /&gt;
 
@@ -74,9 +70,9 @@ Japan
 
 </code></pre>
 
-            <h5>Prefix and Suffix</h5>
-            <p>Custom texts e.g. units can be placed before or after the input section with the <i>prefix</i> and <i>suffix</i> properties.</p>
-            <pre v-code><code>
+        <h5>Prefix and Suffix</h5>
+        <p>Custom texts e.g. units can be placed before or after the input section with the <i>prefix</i> and <i>suffix</i> properties.</p>
+        <pre v-code><code>
 Mile
 &lt;InputNumber v-model="value1" suffix=" mi" /&gt;
 
@@ -91,12 +87,12 @@ Temperature
 
 </code></pre>
 
-            <h5>Buttons</h5>
-            <p>
-                Spinner buttons is enabled using the <i>showButtons</i> options and layout is defined with the <i>buttonLayout</i>. Default value is "stacked" whereas "horizontal" and "stacked" are alternatives. Note that even there are no buttons,
-                up and down arrow keys can be used to spin the values with keyboard.
-            </p>
-            <pre v-code><code>
+        <h5>Buttons</h5>
+        <p>
+            Spinner buttons is enabled using the <i>showButtons</i> options and layout is defined with the <i>buttonLayout</i>. Default value is "stacked" whereas "horizontal" and "stacked" are alternatives. Note that even there are no buttons, up
+            and down arrow keys can be used to spin the values with keyboard.
+        </p>
+        <pre v-code><code>
 Stacked
 &lt;InputNumber v-model="value1" showButtons mode="currency" currency="USD" /&gt;
 
@@ -110,355 +106,361 @@ Vertical
 
 </code></pre>
 
-            <h5>Step</h5>
-            <p>Step factor is 1 by default and can be customized with <i>step</i> option.</p>
-            <pre v-code><code>
+        <h5>Step</h5>
+        <p>Step factor is 1 by default and can be customized with <i>step</i> option.</p>
+        <pre v-code><code>
 &lt;InputNumber v-model="value" :step="0.25" /&gt;
 
 </code></pre>
 
-            <h5>Min and Max Boundaries</h5>
-            <p>Value to be entered can be restricted by configuring the <i>min</i> and <i>max</i> options.</p>
-            <pre v-code><code>
+        <h5>Min and Max Boundaries</h5>
+        <p>Value to be entered can be restricted by configuring the <i>min</i> and <i>max</i> options.</p>
+        <pre v-code><code>
 &lt;InputNumber v-model="value" :min="0" :max="100" /&gt;
 
 </code></pre>
 
-            <h5>Properties</h5>
-            <p>InputNumber passes any valid attribute to the underlying input element.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>modelValue</td>
-                            <td>number</td>
-                            <td>null</td>
-                            <td>Value of the component.</td>
-                        </tr>
-                        <tr>
-                            <td>format</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether to format the value.</td>
-                        </tr>
-                        <tr>
-                            <td>showButtons</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Displays spinner buttons.</td>
-                        </tr>
-                        <tr>
-                            <td>buttonLayout</td>
-                            <td>string</td>
-                            <td>stacked</td>
-                            <td>Layout of the buttons, valid values are "stacked" (default), "horizontal" and "vertical".</td>
-                        </tr>
-                        <tr>
-                            <td>incrementButtonClass</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the increment button.</td>
-                        </tr>
-                        <tr>
-                            <td>decrementButtonClass</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the decrement button.</td>
-                        </tr>
-                        <tr>
-                            <td>incrementButtonIcon</td>
-                            <td>string</td>
-                            <td>pi pi-angle-up</td>
-                            <td>Style class of the increment button.</td>
-                        </tr>
-                        <tr>
-                            <td>decrementButtonIcon</td>
-                            <td>string</td>
-                            <td>pi pi-angle-down</td>
-                            <td>Style class of the decrement button.</td>
-                        </tr>
-                        <tr>
-                            <td>locale</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Locale to be used in formatting.</td>
-                        </tr>
-                        <tr>
-                            <td>localeMatcher</td>
-                            <td>string</td>
-                            <td>best fit</td>
-                            <td>
-                                The locale matching algorithm to use. Possible values are "lookup" and "best fit"; the default is "best fit". See
-                                <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_negotiation">Locale Negotation</a> for details.
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>mode</td>
-                            <td>string</td>
-                            <td>decimal</td>
-                            <td>Defines the behavior of the component, valid values are "decimal" and "currency".</td>
-                        </tr>
-                        <tr>
-                            <td>prefix</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Text to display before the value.</td>
-                        </tr>
-                        <tr>
-                            <td>suffix</td>
-                            <td>string</td>
-                            <td>decimal</td>
-                            <td>Text to display after the value.</td>
-                        </tr>
-                        <tr>
-                            <td>currency</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>
-                                The currency to use in currency formatting. Possible values are the <a href="https://www.currency-iso.org/en/home/tables/table-a1.html">ISO 4217 currency codes</a>, such as "USD" for the US dollar, "EUR" for the euro,
-                                or "CNY" for the Chinese RMB. There is no default value; if the style is "currency", the currency property must be provided.
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>currencyDisplay</td>
-                            <td>string</td>
-                            <td>symbol</td>
-                            <td>
-                                How to display the currency in currency formatting. Possible values are "symbol" to use a localized currency symbol such as €, "code" to use the ISO currency code, "name" to use a localized currency name such as
-                                "dollar"; the default is "symbol".
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>useGrouping</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether to use grouping separators, such as thousands separators or thousand/lakh/crore separators.</td>
-                        </tr>
-                        <tr>
-                            <td>minFractionDigits</td>
-                            <td>number</td>
-                            <td>null</td>
-                            <td>
-                                The minimum number of fraction digits to use. Possible values are from 0 to 20; the default for plain number and percent formatting is 0; the default for currency formatting is the number of minor unit digits provided
-                                by the <a href="https://www.currency-iso.org/en/home/tables/table-a1.html">ISO 4217 currency code list</a> (2 if the list doesn't provide that information).
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>maxFractionDigits</td>
-                            <td>number</td>
-                            <td>null</td>
-                            <td>
-                                The maximum number of fraction digits to use. Possible values are from 0 to 20; the default for plain number formatting is the larger of minimumFractionDigits and 3; the default for currency formatting is the larger of
-                                minimumFractionDigits and the number of minor unit digits provided by the <a href="https://www.currency-iso.org/en/home/tables/table-a1.html">ISO 4217 currency code list</a> (2 if the list doesn't provide that
-                                information).
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>min</td>
-                            <td>number</td>
-                            <td>null</td>
-                            <td>Mininum boundary value.</td>
-                        </tr>
-                        <tr>
-                            <td>max</td>
-                            <td>number</td>
-                            <td>null</td>
-                            <td>Maximum boundary value.</td>
-                        </tr>
-                        <tr>
-                            <td>step</td>
-                            <td>number</td>
-                            <td>1</td>
-                            <td>Step factor to increment/decrement the value.</td>
-                        </tr>
-                        <tr>
-                            <td>allowEmpty</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Determines whether the input field is empty.</td>
-                        </tr>
-                        <tr>
-                            <td>disabled</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When present, it specifies that the element should be disabled.</td>
-                        </tr>
-                        <tr>
-                            <td>readonly</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When present, it specifies that an input field is read-only.</td>
-                        </tr>
-                        <tr>
-                            <td>placeholder</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Placeholder text for the input.</td>
-                        </tr>
-                        <tr>
-                            <td>inputId</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the component input field.</td>
-                        </tr>
-                        <tr>
-                            <td>inputStyle</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Inline style of the input field.</td>
-                        </tr>
-                        <tr>
-                            <td>inputClass</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the input field.</td>
-                        </tr>
-                        <tr>
-                            <td>inputProps</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.</td>
-                        </tr>
-                        <tr>
-                            <td>incrementButtonProps</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Uses to pass all properties of the HTMLButtonElement to increment button inside the component.</td>
-                        </tr>
-                        <tr>
-                            <td>decrementButtonProps</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Uses to pass all properties of the HTMLButtonElement to decrement button inside the component.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <p>InputNumber passes any valid attribute to the underlying input element.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>modelValue</td>
+                        <td>number</td>
+                        <td>null</td>
+                        <td>Value of the component.</td>
+                    </tr>
+                    <tr>
+                        <td>format</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Whether to format the value.</td>
+                    </tr>
+                    <tr>
+                        <td>showButtons</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Displays spinner buttons.</td>
+                    </tr>
+                    <tr>
+                        <td>buttonLayout</td>
+                        <td>string</td>
+                        <td>stacked</td>
+                        <td>Layout of the buttons, valid values are "stacked" (default), "horizontal" and "vertical".</td>
+                    </tr>
+                    <tr>
+                        <td>incrementButtonClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the increment button.</td>
+                    </tr>
+                    <tr>
+                        <td>decrementButtonClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the decrement button.</td>
+                    </tr>
+                    <tr>
+                        <td>incrementButtonIcon</td>
+                        <td>string</td>
+                        <td>pi pi-angle-up</td>
+                        <td>Style class of the increment button.</td>
+                    </tr>
+                    <tr>
+                        <td>decrementButtonIcon</td>
+                        <td>string</td>
+                        <td>pi pi-angle-down</td>
+                        <td>Style class of the decrement button.</td>
+                    </tr>
+                    <tr>
+                        <td>locale</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Locale to be used in formatting.</td>
+                    </tr>
+                    <tr>
+                        <td>localeMatcher</td>
+                        <td>string</td>
+                        <td>best fit</td>
+                        <td>
+                            The locale matching algorithm to use. Possible values are "lookup" and "best fit"; the default is "best fit". See
+                            <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_negotiation">Locale Negotation</a> for details.
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>mode</td>
+                        <td>string</td>
+                        <td>decimal</td>
+                        <td>Defines the behavior of the component, valid values are "decimal" and "currency".</td>
+                    </tr>
+                    <tr>
+                        <td>prefix</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Text to display before the value.</td>
+                    </tr>
+                    <tr>
+                        <td>suffix</td>
+                        <td>string</td>
+                        <td>decimal</td>
+                        <td>Text to display after the value.</td>
+                    </tr>
+                    <tr>
+                        <td>currency</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>
+                            The currency to use in currency formatting. Possible values are the <a href="https://www.currency-iso.org/en/home/tables/table-a1.html">ISO 4217 currency codes</a>, such as "USD" for the US dollar, "EUR" for the euro, or
+                            "CNY" for the Chinese RMB. There is no default value; if the style is "currency", the currency property must be provided.
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>currencyDisplay</td>
+                        <td>string</td>
+                        <td>symbol</td>
+                        <td>
+                            How to display the currency in currency formatting. Possible values are "symbol" to use a localized currency symbol such as €, "code" to use the ISO currency code, "name" to use a localized currency name such as "dollar";
+                            the default is "symbol".
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>useGrouping</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Whether to use grouping separators, such as thousands separators or thousand/lakh/crore separators.</td>
+                    </tr>
+                    <tr>
+                        <td>minFractionDigits</td>
+                        <td>number</td>
+                        <td>null</td>
+                        <td>
+                            The minimum number of fraction digits to use. Possible values are from 0 to 20; the default for plain number and percent formatting is 0; the default for currency formatting is the number of minor unit digits provided by
+                            the <a href="https://www.currency-iso.org/en/home/tables/table-a1.html">ISO 4217 currency code list</a> (2 if the list doesn't provide that information).
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>maxFractionDigits</td>
+                        <td>number</td>
+                        <td>null</td>
+                        <td>
+                            The maximum number of fraction digits to use. Possible values are from 0 to 20; the default for plain number formatting is the larger of minimumFractionDigits and 3; the default for currency formatting is the larger of
+                            minimumFractionDigits and the number of minor unit digits provided by the <a href="https://www.currency-iso.org/en/home/tables/table-a1.html">ISO 4217 currency code list</a> (2 if the list doesn't provide that
+                            information).
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>min</td>
+                        <td>number</td>
+                        <td>null</td>
+                        <td>Mininum boundary value.</td>
+                    </tr>
+                    <tr>
+                        <td>max</td>
+                        <td>number</td>
+                        <td>null</td>
+                        <td>Maximum boundary value.</td>
+                    </tr>
+                    <tr>
+                        <td>step</td>
+                        <td>number</td>
+                        <td>1</td>
+                        <td>Step factor to increment/decrement the value.</td>
+                    </tr>
+                    <tr>
+                        <td>allowEmpty</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Determines whether the input field is empty.</td>
+                    </tr>
+                    <tr>
+                        <td>highlightOnFocus</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Highlights automatically the input value.</td>
+                    </tr>
+                    <tr>
+                        <td>disabled</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When present, it specifies that the element should be disabled.</td>
+                    </tr>
+                    <tr>
+                        <td>readonly</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When present, it specifies that an input field is read-only.</td>
+                    </tr>
+                    <tr>
+                        <td>placeholder</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Placeholder text for the input.</td>
+                    </tr>
+                    <tr>
+                        <td>inputId</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the component input field.</td>
+                    </tr>
+                    <tr>
+                        <td>inputStyle</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Inline style of the input field.</td>
+                    </tr>
+                    <tr>
+                        <td>inputClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the input field.</td>
+                    </tr>
+                    <tr>
+                        <td>inputProps</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.</td>
+                    </tr>
+                    <tr>
+                        <td>incrementButtonProps</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Uses to pass all properties of the HTMLButtonElement to increment button inside the component.</td>
+                    </tr>
+                    <tr>
+                        <td>decrementButtonProps</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Uses to pass all properties of the HTMLButtonElement to decrement button inside the component.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Methods</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>getFormatter</td>
-                            <td>-</td>
-                            <td>Returns Intl.NumberFormat object.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Methods</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>getFormatter</td>
+                        <td>-</td>
+                        <td>Returns Intl.NumberFormat object.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Events</h5>
-            <p>Any valid event such as focus and blur are passed to the underlying input element. Following are the additional events to configure the component.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>input</td>
-                            <td>
-                                event.originalEvent: Browser event <br />
-                                event.value: New value
-                            </td>
-                            <td>Callback to invoke when the value is entered.</td>
-                        </tr>
-                        <tr>
-                            <td>focus</td>
-                            <td>event: Focus event</td>
-                            <td>Callback to invoke on focus of input field.</td>
-                        </tr>
-                        <tr>
-                            <td>blur</td>
-                            <td>
-                                event.originalEvent: Blur event <br />
-                                event.value: Input value
-                            </td>
-                            <td>Callback to invoke on blur of input field.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Events</h5>
+        <p>Any valid event such as focus and blur are passed to the underlying input element. Following are the additional events to configure the component.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>input</td>
+                        <td>
+                            event.originalEvent: Browser event <br />
+                            event.value: New value
+                        </td>
+                        <td>Callback to invoke when the value is entered.</td>
+                    </tr>
+                    <tr>
+                        <td>focus</td>
+                        <td>event: Focus event</td>
+                        <td>Callback to invoke on focus of input field.</td>
+                    </tr>
+                    <tr>
+                        <td>blur</td>
+                        <td>
+                            event.originalEvent: Blur event <br />
+                            event.value: Input value
+                        </td>
+                        <td>Callback to invoke on blur of input field.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-inputnumber</td>
-                            <td>Container element</td>
-                        </tr>
-                        <tr>
-                            <td>p-inputnumber-stacked</td>
-                            <td>Container element with stacked buttons.</td>
-                        </tr>
-                        <tr>
-                            <td>p-inputnumber-horizontal</td>
-                            <td>Container element with horizontal buttons.</td>
-                        </tr>
-                        <tr>
-                            <td>p-inputnumber-vertical</td>
-                            <td>Container element with vertical buttons.</td>
-                        </tr>
-                        <tr>
-                            <td>p-inputnumber-input</td>
-                            <td>Input element</td>
-                        </tr>
-                        <tr>
-                            <td>p-inputnumber-button</td>
-                            <td>Input element</td>
-                        </tr>
-                        <tr>
-                            <td>p-inputnumber-button-up</td>
-                            <td>Increment button</td>
-                        </tr>
-                        <tr>
-                            <td>p-inputnumber-button-down</td>
-                            <td>Decrement button</td>
-                        </tr>
-                        <tr>
-                            <td>p-inputnumber-button-icon</td>
-                            <td>Button icon</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-inputnumber</td>
+                        <td>Container element</td>
+                    </tr>
+                    <tr>
+                        <td>p-inputnumber-stacked</td>
+                        <td>Container element with stacked buttons.</td>
+                    </tr>
+                    <tr>
+                        <td>p-inputnumber-horizontal</td>
+                        <td>Container element with horizontal buttons.</td>
+                    </tr>
+                    <tr>
+                        <td>p-inputnumber-vertical</td>
+                        <td>Container element with vertical buttons.</td>
+                    </tr>
+                    <tr>
+                        <td>p-inputnumber-input</td>
+                        <td>Input element</td>
+                    </tr>
+                    <tr>
+                        <td>p-inputnumber-button</td>
+                        <td>Input element</td>
+                    </tr>
+                    <tr>
+                        <td>p-inputnumber-button-up</td>
+                        <td>Increment button</td>
+                    </tr>
+                    <tr>
+                        <td>p-inputnumber-button-down</td>
+                        <td>Decrement button</td>
+                    </tr>
+                    <tr>
+                        <td>p-inputnumber-button-icon</td>
+                        <td>Button icon</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Accessibility</h5>
-            <h6>Screen Reader</h6>
-            <p>
-                Value to describe the component can either be provided via <i>label</i> tag combined with <i>inputId</i> prop or using <i>aria-labelledby</i>, <i>aria-label</i> props. The input element uses <i>spinbutton</i> role in addition to the
-                <i>aria-valuemin</i>, <i>aria-valuemax</i> and <i>aria-valuenow</i> attributes.
-            </p>
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>
+            Value to describe the component can either be provided via <i>label</i> tag combined with <i>inputId</i> prop or using <i>aria-labelledby</i>, <i>aria-label</i> props. The input element uses <i>spinbutton</i> role in addition to the
+            <i>aria-valuemin</i>, <i>aria-valuemax</i> and <i>aria-valuenow</i> attributes.
+        </p>
 
-            <pre v-code><code>
+        <pre v-code><code>
 &lt;label for="price"&gt;Price&lt;/label&gt;
 &lt;InputNumber inputId="price" /&gt;
 
@@ -469,44 +471,43 @@ Vertical
 
 </code></pre>
 
-            <h6>Keyboard Support</h6>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Key</th>
-                            <th>Function</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td><i>tab</i></td>
-                            <td>Moves focus to the input.</td>
-                        </tr>
-                        <tr>
-                            <td><i>up arrow</i></td>
-                            <td>Increments the value.</td>
-                        </tr>
-                        <tr>
-                            <td><i>down arrow</i></td>
-                            <td>Decrements the value.</td>
-                        </tr>
-                        <tr>
-                            <td><i>home</i></td>
-                            <td>Set the minimum value if provided.</td>
-                        </tr>
-                        <tr>
-                            <td><i>end</i></td>
-                            <td>Set the maximum value if provided.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h6>Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>tab</i></td>
+                        <td>Moves focus to the input.</td>
+                    </tr>
+                    <tr>
+                        <td><i>up arrow</i></td>
+                        <td>Increments the value.</td>
+                    </tr>
+                    <tr>
+                        <td><i>down arrow</i></td>
+                        <td>Decrements the value.</td>
+                    </tr>
+                    <tr>
+                        <td><i>home</i></td>
+                        <td>Set the minimum value if provided.</td>
+                    </tr>
+                    <tr>
+                        <td><i>end</i></td>
+                        <td>Set the maximum value if provided.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc>
-    </ClientOnly>
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
diff --git a/pages/inputnumber/index.vue b/pages/inputnumber/index.vue
index 681901e4f..d8b74fad9 100755
--- a/pages/inputnumber/index.vue
+++ b/pages/inputnumber/index.vue
@@ -14,36 +14,36 @@
                 <div class="p-fluid grid formgrid">
                     <div class="field col-12 md:col-3">
                         <label for="integeronly">Integer Only</label>
-                        <InputNumber inputId="integeronly" v-model="value1" />
+                        <InputNumber v-model="value1" inputId="integeronly" />
                     </div>
                     <div class="field col-12 md:col-3">
                         <label for="withoutgrouping">Without Grouping</label>
-                        <InputNumber inputId="withoutgrouping" v-model="value2" mode="decimal" :useGrouping="false" />
+                        <InputNumber v-model="value2" inputId="withoutgrouping" mode="decimal" :useGrouping="false" />
                     </div>
                     <div class="field col-12 md:col-3">
                         <label for="minmaxfraction">Min-Max Fraction Digits</label>
-                        <InputNumber inputId="minmaxfraction" v-model="value3" mode="decimal" :minFractionDigits="2" :maxFractionDigits="5" />
+                        <InputNumber v-model="value3" inputId="minmaxfraction" mode="decimal" :minFractionDigits="2" :maxFractionDigits="5" />
                     </div>
                     <div class="field col-12 md:col-3">
                         <label for="minmax">Min-Max Boundaries</label>
-                        <InputNumber inputId="minmax" v-model="value4" mode="decimal" :min="0" :max="100" />
+                        <InputNumber v-model="value4" inputId="minmax" mode="decimal" :min="0" :max="100" />
                     </div>
 
                     <div class="field col-12 md:col-3">
                         <label for="locale-user">User Locale</label>
-                        <InputNumber inputId="locale-user" v-model="value5" mode="decimal" :minFractionDigits="2" />
+                        <InputNumber v-model="value5" inputId="locale-user" mode="decimal" :minFractionDigits="2" />
                     </div>
                     <div class="field col-12 md:col-3">
                         <label for="locale-us">United States Locale</label>
-                        <InputNumber inputId="locale-us" v-model="value6" mode="decimal" locale="en-US" :minFractionDigits="2" />
+                        <InputNumber v-model="value6" inputId="locale-us" mode="decimal" locale="en-US" :minFractionDigits="2" />
                     </div>
                     <div class="field col-12 md:col-3">
                         <label for="locale-german">German Locale</label>
-                        <InputNumber inputId="locale-german" v-model="value7" mode="decimal" locale="de-DE" :minFractionDigits="2" />
+                        <InputNumber v-model="value7" inputId="locale-german" mode="decimal" locale="de-DE" :minFractionDigits="2" />
                     </div>
                     <div class="field col-12 md:col-3">
                         <label for="locale-indian">Indian Locale</label>
-                        <InputNumber inputId="locale-indian" v-model="value8" mode="decimal" locale="en-IN" :minFractionDigits="2" />
+                        <InputNumber v-model="value8" inputId="locale-indian" mode="decimal" locale="en-IN" :minFractionDigits="2" />
                     </div>
                 </div>
 
@@ -51,19 +51,19 @@
                 <div class="grid p-fluid">
                     <div class="field col-12 md:col-3">
                         <label for="currency-us">United States</label>
-                        <InputNumber inputId="currency-us" v-model="value9" mode="currency" currency="USD" locale="en-US" />
+                        <InputNumber v-model="value9" inputId="currency-us" mode="currency" currency="USD" locale="en-US" />
                     </div>
                     <div class="field col-12 md:col-3">
                         <label for="currency-germany">Germany</label>
-                        <InputNumber inputId="currency-germany" v-model="value10" mode="currency" currency="EUR" locale="de-DE" />
+                        <InputNumber v-model="value10" inputId="currency-germany" mode="currency" currency="EUR" locale="de-DE" />
                     </div>
                     <div class="field col-12 md:col-3">
                         <label for="currency-india">India</label>
-                        <InputNumber inputId="currency-india" v-model="value11" mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" />
+                        <InputNumber v-model="value11" inputId="currency-india" mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" />
                     </div>
                     <div class="field col-12 md:col-3">
                         <label for="currency-japan">Japan</label>
-                        <InputNumber inputId="currency-japan" v-model="value12" mode="currency" currency="JPY" locale="jp-JP" />
+                        <InputNumber v-model="value12" inputId="currency-japan" mode="currency" currency="JPY" locale="jp-JP" />
                     </div>
                 </div>
 
@@ -71,19 +71,19 @@
                 <div class="grid p-fluid">
                     <div class="field col-12 md:col-3">
                         <label for="mile">Mile</label>
-                        <InputNumber inputId="mile" v-model="value13" suffix=" mi" />
+                        <InputNumber v-model="value13" inputId="mile" suffix=" mi" />
                     </div>
                     <div class="field col-12 md:col-3">
                         <label for="percent">Percent</label>
-                        <InputNumber inputId="percent" v-model="value14" prefix="%" />
+                        <InputNumber v-model="value14" inputId="percent" prefix="%" />
                     </div>
                     <div class="field col-12 md:col-3">
                         <label for="expiry">Expiry</label>
-                        <InputNumber inputId="expiry" v-model="value15" prefix="Expires in " suffix=" days" />
+                        <InputNumber v-model="value15" inputId="expiry" prefix="Expires in " suffix=" days" />
                     </div>
                     <div class="field col-12 md:col-3">
                         <label for="temperature">Temperature</label>
-                        <InputNumber inputId="temperature" v-model="value16" prefix="↑ " suffix="℃" :min="0" :max="40" />
+                        <InputNumber v-model="value16" inputId="temperature" prefix="↑ " suffix="℃" :min="0" :max="40" />
                     </div>
                 </div>
 
@@ -91,13 +91,13 @@
                 <div class="grid p-fluid">
                     <div class="field col-12 md:col-3">
                         <label for="stacked">Stacked</label>
-                        <InputNumber inputId="stacked" v-model="value17" showButtons mode="currency" currency="USD" />
+                        <InputNumber v-model="value17" inputId="stacked" showButtons mode="currency" currency="USD" />
                     </div>
                     <div class="field col-12 md:col-3">
                         <label for="horizontal">Horizontal with Step</label>
                         <InputNumber
-                            inputId="horizontal"
                             v-model="value18"
+                            inputId="horizontal"
                             showButtons
                             buttonLayout="horizontal"
                             :step="0.25"
@@ -111,15 +111,15 @@
                     </div>
                     <div class="field col-12 md:col-3">
                         <label for="minmax-buttons">Min-Max Boundaries</label>
-                        <InputNumber inputId="minmax-buttons" v-model="value20" mode="decimal" showButtons :min="0" :max="100" />
+                        <InputNumber v-model="value20" inputId="minmax-buttons" mode="decimal" showButtons :min="0" :max="100" />
                     </div>
                 </div>
 
                 <div class="field col-12 md:col-3">
                     <label for="vertical" style="display: block">Vertical</label>
                     <InputNumber
-                        inputId="vertical"
                         v-model="value19"
+                        inputId="vertical"
                         mode="decimal"
                         showButtons
                         buttonLayout="vertical"
diff --git a/pages/inputswitch/InputSwitchDoc.vue b/pages/inputswitch/InputSwitchDoc.vue
index 307761052..4ccb6dc33 100755
--- a/pages/inputswitch/InputSwitchDoc.vue
+++ b/pages/inputswitch/InputSwitchDoc.vue
@@ -1,27 +1,26 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="InputSwitchDemo" :sources="sources" github="inputswitch/InputSwitchDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="InputSwitchDemo" :sources="sources" github="inputswitch/InputSwitchDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import InputSwitch from 'primevue/inputswitch';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/inputswitch/inputswitch.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p>Two-way binding to a boolean property is defined using the standard v-model directive.</p>
-            <pre v-code><code>
+        <h5>Getting Started</h5>
+        <p>Two-way binding to a boolean property is defined using the standard v-model directive.</p>
+        <pre v-code><code>
 &lt;InputSwitch v-model="checked" /&gt;
 
 </code></pre>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 export default {
 	data() {
 		return {
@@ -32,9 +31,9 @@ export default {
 
 </code></pre>
 
-            <p>As model is two-way binding enabled, setting the bound value as true displays the state as checked by default.</p>
+        <p>As model is two-way binding enabled, setting the bound value as true displays the state as checked by default.</p>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 export default {
 	data() {
 		return {
@@ -45,131 +44,131 @@ export default {
 
 </code></pre>
 
-            <h5>Properties</h5>
-            <p>Any valid attribute is passed to the root element implicitly, extended properties are as follows;</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>modelValue</td>
-                            <td>boolean</td>
-                            <td>null</td>
-                            <td>Specifies whether a inputswitch should be checked or not.</td>
-                        </tr>
-                        <tr>
-                            <td>trueValue</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Value in checked state.</td>
-                        </tr>
-                        <tr>
-                            <td>falseValue</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Value in unchecked state.</td>
-                        </tr>
-                        <tr>
-                            <td>inputId</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the component input field.</td>
-                        </tr>
-                        <tr>
-                            <td>inputClass</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the input field.</td>
-                        </tr>
-                        <tr>
-                            <td>inputStyle</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Inline style of the input field.</td>
-                        </tr>
-                        <tr>
-                            <td>inputProps</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <p>Any valid attribute is passed to the root element implicitly, extended properties are as follows;</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>modelValue</td>
+                        <td>boolean</td>
+                        <td>null</td>
+                        <td>Specifies whether a inputswitch should be checked or not.</td>
+                    </tr>
+                    <tr>
+                        <td>trueValue</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Value in checked state.</td>
+                    </tr>
+                    <tr>
+                        <td>falseValue</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Value in unchecked state.</td>
+                    </tr>
+                    <tr>
+                        <td>inputId</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the component input field.</td>
+                    </tr>
+                    <tr>
+                        <td>inputClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the input field.</td>
+                    </tr>
+                    <tr>
+                        <td>inputStyle</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Inline style of the input field.</td>
+                    </tr>
+                    <tr>
+                        <td>inputProps</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Events</h5>
-            <p>In addition to the following events, any other valid events such as focus and blur are passed implicitly.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>click</td>
-                            <td>event: Browser event</td>
-                            <td>Callback to invoke on click.</td>
-                        </tr>
-                        <tr>
-                            <td>change</td>
-                            <td>event: Browser event</td>
-                            <td>Callback to invoke on value change.</td>
-                        </tr>
-                        <tr>
-                            <td>input</td>
-                            <td>value: New value</td>
-                            <td>Callback to invoke on value change.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Events</h5>
+        <p>In addition to the following events, any other valid events such as focus and blur are passed implicitly.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>click</td>
+                        <td>event: Browser event</td>
+                        <td>Callback to invoke on click.</td>
+                    </tr>
+                    <tr>
+                        <td>change</td>
+                        <td>event: Browser event</td>
+                        <td>Callback to invoke on value change.</td>
+                    </tr>
+                    <tr>
+                        <td>input</td>
+                        <td>value: New value</td>
+                        <td>Callback to invoke on value change.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-inputswitch</td>
-                            <td>Container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-inputswitch-checked</td>
-                            <td>Container element in active state.</td>
-                        </tr>
-                        <tr>
-                            <td>p-inputswitch-slider</td>
-                            <td>Slider element behind the handle.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-inputswitch</td>
+                        <td>Container element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-inputswitch-checked</td>
+                        <td>Container element in active state.</td>
+                    </tr>
+                    <tr>
+                        <td>p-inputswitch-slider</td>
+                        <td>Slider element behind the handle.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Accessibility</h5>
-            <h6>Screen Reader</h6>
-            <p>
-                InputSwitch component uses a hidden native checkbox element with <i>switch</i> role internally that is only visible to screen readers. Value to describe the component can either be provided via <i>label</i> tag combined with
-                <i>id</i> prop or using <i>aria-labelledby</i>, <i>aria-label</i> props.
-            </p>
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>
+            InputSwitch component uses a hidden native checkbox element with <i>switch</i> role internally that is only visible to screen readers. Value to describe the component can either be provided via <i>label</i> tag combined with
+            <i>id</i> prop or using <i>aria-labelledby</i>, <i>aria-label</i> props.
+        </p>
 
-            <pre v-code><code>
+        <pre v-code><code>
 &lt;label for="switch1"&gt;Remember Me&lt;/label&gt;
 &lt;InputSwitch inputId="switch1" /&gt;
 
@@ -180,32 +179,31 @@ export default {
 
 </code></pre>
 
-            <h6>Keyboard Support</h6>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Key</th>
-                            <th>Function</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td><i>tab</i></td>
-                            <td>Moves focus to the switch.</td>
-                        </tr>
-                        <tr>
-                            <td><i>space</i></td>
-                            <td>Toggles the checked state.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h6>Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>tab</i></td>
+                        <td>Moves focus to the switch.</td>
+                    </tr>
+                    <tr>
+                        <td><i>space</i></td>
+                        <td>Toggles the checked state.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc>
-    </ClientOnly>
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
diff --git a/pages/inputtext/InputTextDoc.vue b/pages/inputtext/InputTextDoc.vue
index 47e663761..34b4fbe38 100755
--- a/pages/inputtext/InputTextDoc.vue
+++ b/pages/inputtext/InputTextDoc.vue
@@ -1,28 +1,27 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="InputTextDemo" :sources="sources" github="inputtext/InputTextDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="InputTextDemo" :sources="sources" github="inputtext/InputTextDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import InputText from 'primevue/inputtext';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p>A model can be bound using the standard v-model directive.</p>
-            <pre v-code><code>
+        <h5>Getting Started</h5>
+        <p>A model can be bound using the standard v-model directive.</p>
+        <pre v-code><code>
 &lt;InputText type="text" v-model="value" /&gt;
 
 </code></pre>
 
-            <h5>Float Label</h5>
-            <p>A floating label is implemented by wrapping the input and the label inside a container having <i>.p-float-label</i> style class.</p>
-            <pre v-code><code>
+        <h5>Float Label</h5>
+        <p>A floating label is implemented by wrapping the input and the label inside a container having <i>.p-float-label</i> style class.</p>
+        <pre v-code><code>
 &lt;span class="p-float-label"&gt;
 	&lt;InputText id="username" type="text" v-model="value" /&gt;
 	&lt;label for="username"&gt;Username&lt;/label&gt;
@@ -30,9 +29,9 @@ import InputText from 'primevue/inputtext';
 
 </code></pre>
 
-            <h5>Icons</h5>
-            <p>An icon can be integrated within an input field by wrapping the input and the icon with an element having <i>p-input-icon-right</i> and <i>p-input-icon-left</i> classes depending on the icon location.</p>
-            <pre v-code><code>
+        <h5>Icons</h5>
+        <p>An icon can be integrated within an input field by wrapping the input and the icon with an element having <i>p-input-icon-right</i> and <i>p-input-icon-left</i> classes depending on the icon location.</p>
+        <pre v-code><code>
 &lt;span class="p-input-icon-left"&gt;
     &lt;i class="pi pi-search" /&gt;
     &lt;InputText type="text" v-model="value1" placeholder="Search" /&gt;
@@ -51,20 +50,20 @@ import InputText from 'primevue/inputtext';
 
 </code></pre>
 
-            <h5>Sizes</h5>
-            <p>
-                2 more sizes are available in addition to a regular input, for a smaller input add <i>p-inputtext-sm</i> and for a larger one, use <i>p-inputtext-lg</i>. Note that these classes are mainly be used to change the size of a particular
-                field, for global scaling see the <nuxt-link to="/theming">theming</nuxt-link> page.
-            </p>
-            <pre v-code><code>
+        <h5>Sizes</h5>
+        <p>
+            2 more sizes are available in addition to a regular input, for a smaller input add <i>p-inputtext-sm</i> and for a larger one, use <i>p-inputtext-lg</i>. Note that these classes are mainly be used to change the size of a particular field,
+            for global scaling see the <router-link to="/theming">theming</router-link> page.
+        </p>
+        <pre v-code><code>
 &lt;InputText type="text" class="p-inputtext-sm" placeholder="Small" /&gt;
 &lt;InputText type="text" placeholder="Normal" /&gt;
 &lt;InputText type="text" class="p-inputtext-lg"  placeholder="Large" /&gt;
 
 </code></pre>
 
-            <p>Instead of repeating the scale classes for each input, sizing can also be applied to a group by adding the class to a container element so that descendant inputs share the same style easier.</p>
-            <pre v-code><code>
+        <p>Instead of repeating the scale classes for each input, sizing can also be applied to a group by adding the class to a container element so that descendant inputs share the same style easier.</p>
+        <pre v-code><code>
 &lt;div class="p-inputtext-sm"&gt;
     &lt;InputText /&gt;
     &lt;InputNumber /&gt;
@@ -73,13 +72,13 @@ import InputText from 'primevue/inputtext';
 
 </code></pre>
 
-            <h5>Outlined vs Filled</h5>
-            <p>
-                Input fields come in two styles, default is <i>outlined</i> with borders around the field whereas <i>filled</i> alternative adds a background color to the field. Applying <i>p-input-filled</i> to an ancestor of an input enables the
-                filled style. If you prefer to use filled inputs in the entire application, use a global container such as document body or the application element to apply the style class.
-            </p>
+        <h5>Outlined vs Filled</h5>
+        <p>
+            Input fields come in two styles, default is <i>outlined</i> with borders around the field whereas <i>filled</i> alternative adds a background color to the field. Applying <i>p-input-filled</i> to an ancestor of an input enables the filled
+            style. If you prefer to use filled inputs in the entire application, use a global container such as document body or the application element to apply the style class.
+        </p>
 
-            <pre v-code><code>
+        <pre v-code><code>
 &lt;div class="p-input-filled"&gt;
     &lt;InputText type="text" /&gt;
     &lt;InputText type="text" /&gt;
@@ -88,71 +87,71 @@ import InputText from 'primevue/inputtext';
 
 </code></pre>
 
-            <h5>Properties</h5>
-            <p>InputText passes any valid attribute to the underlying input element, additional attribute is the following.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>modelValue</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Value of the component.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <p>InputText passes any valid attribute to the underlying input element, additional attribute is the following.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>modelValue</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Value of the component.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Events</h5>
-            <p>Any valid event such as focus, blur and input are passed to the underlying input element.</p>
+        <h5>Events</h5>
+        <p>Any valid event such as focus, blur and input are passed to the underlying input element.</p>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-inputtext</td>
-                            <td>Input element</td>
-                        </tr>
-                        <tr>
-                            <td>p-inputtext-sm</td>
-                            <td>Smaller input element</td>
-                        </tr>
-                        <tr>
-                            <td>p-inputtext-lg</td>
-                            <td>Larger input element</td>
-                        </tr>
-                        <tr>
-                            <td>p-inputtext-filled</td>
-                            <td>Filled input style.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-inputtext</td>
+                        <td>Input element</td>
+                    </tr>
+                    <tr>
+                        <td>p-inputtext-sm</td>
+                        <td>Smaller input element</td>
+                    </tr>
+                    <tr>
+                        <td>p-inputtext-lg</td>
+                        <td>Larger input element</td>
+                    </tr>
+                    <tr>
+                        <td>p-inputtext-filled</td>
+                        <td>Filled input style.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Accessibility</h5>
-            <h6>Screen Reader</h6>
-            <p>
-                InputText component renders a native input element that implicitly includes any passed prop. Value to describe the component can either be provided via <i>label</i> tag combined with <i>id</i> prop or using <i>aria-labelledby</i>,
-                <i>aria-label</i> props.
-            </p>
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>
+            InputText component renders a native input element that implicitly includes any passed prop. Value to describe the component can either be provided via <i>label</i> tag combined with <i>id</i> prop or using <i>aria-labelledby</i>,
+            <i>aria-label</i> props.
+        </p>
 
-            <pre v-code><code>
+        <pre v-code><code>
 &lt;label for="firstname"&gt;Firstname&lt;/label&gt;
 &lt;InputText id="firstname" /&gt;
 
@@ -163,28 +162,27 @@ import InputText from 'primevue/inputtext';
 
 </code></pre>
 
-            <h6>Keyboard Support</h6>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Key</th>
-                            <th>Function</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td><i>tab</i></td>
-                            <td>Moves focus to the input.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h6>Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>tab</i></td>
+                        <td>Moves focus to the input.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc>
-    </ClientOnly>
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
diff --git a/pages/inputtext/index.vue b/pages/inputtext/index.vue
index 81495d447..47aeaf688 100755
--- a/pages/inputtext/index.vue
+++ b/pages/inputtext/index.vue
@@ -11,25 +11,25 @@
         <div class="content-section implementation">
             <div class="card">
                 <h5>Basic</h5>
-                <InputText type="text" v-model="value1" />
+                <InputText v-model="value1" type="text" />
                 <span :style="{ marginLeft: '.5em' }">{{ value1 }}</span>
 
                 <h5>Floating Label</h5>
                 <span class="p-float-label">
-                    <InputText id="username" type="text" v-model="value2" />
+                    <InputText id="username" v-model="value2" type="text" />
                     <label for="username">Username</label>
                 </span>
 
                 <h5>Left Icon</h5>
                 <span class="p-input-icon-left">
                     <i class="pi pi-search" />
-                    <InputText type="text" v-model="value3" placeholder="Search" />
+                    <InputText v-model="value3" type="text" placeholder="Search" />
                 </span>
 
                 <h5>Right Icon</h5>
                 <span class="p-input-icon-right">
                     <i class="pi pi-spin pi-spinner" />
-                    <InputText type="text" v-model="value4" />
+                    <InputText v-model="value4" type="text" />
                 </span>
 
                 <h5>Help Text</h5>
@@ -47,7 +47,7 @@
                 </div>
 
                 <h5>Disabled</h5>
-                <InputText type="text" v-model="value5" disabled />
+                <InputText v-model="value5" type="text" disabled />
 
                 <h5>Sizes</h5>
                 <div class="sizes">
diff --git a/pages/invalid/index.vue b/pages/invalid/index.vue
index 6c969f706..fbbc31584 100644
--- a/pages/invalid/index.vue
+++ b/pages/invalid/index.vue
@@ -12,7 +12,7 @@
             <div class="card">
                 <div class="p-fluid grid">
                     <div class="field col-12 md:col-4">
-                        <InputText id="inputtext" type="text" v-model="value1" placeholder="InputText" class="p-invalid" />
+                        <InputText id="inputtext" v-model="value1" type="text" placeholder="InputText" class="p-invalid" />
                     </div>
                     <div class="field col-12 md:col-4">
                         <AutoComplete v-model="value2" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" placeholder="AutoComplete" class="p-invalid" />
@@ -51,9 +51,7 @@
             </div>
         </div>
 
-        <ClientOnly>
-            <AppDoc name="InvalidDemo" :sources="sources" :service="['CountryService', 'NodeService']" :data="['countries', 'treenodes']" github="invalid/InvalidDemo.vue" />
-        </ClientOnly>
+        <AppDoc name="InvalidDemo" :sources="sources" :service="['CountryService', 'NodeService']" :data="['countries', 'treenodes']" github="invalid/InvalidDemo.vue" />
     </div>
 </template>
 
diff --git a/pages/knob/KnobDoc.vue b/pages/knob/KnobDoc.vue
index 2083795da..dff6017fb 100644
--- a/pages/knob/KnobDoc.vue
+++ b/pages/knob/KnobDoc.vue
@@ -1,26 +1,25 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="KnobDemo" :sources="sources" github="knob/KnobDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="KnobDemo" :sources="sources" github="knob/KnobDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import Knob from 'primevue/knob';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/knob/knob.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p>Knob is an input component and used with the standard <i>v-model</i> directive.</p>
-            <pre v-code><code>
+        <h5>Getting Started</h5>
+        <p>Knob is an input component and used with the standard <i>v-model</i> directive.</p>
+        <pre v-code><code>
 &lt;Knob v-model="value" /&gt;
 
 </code></pre>
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 data() {
 	return {
 		value: 0
@@ -29,197 +28,209 @@ data() {
 
 </code></pre>
 
-            <h5>Minimum and Maximum</h5>
-            <p>Boundaries are configured with the <i>min</i> and <i>max</i> values whose defaults are 0 and 100 respectively.</p>
-            <pre v-code><code>
+        <h5>Minimum and Maximum</h5>
+        <p>Boundaries are configured with the <i>min</i> and <i>max</i> values whose defaults are 0 and 100 respectively.</p>
+        <pre v-code><code>
 &lt;Knob v-model="value" :min="-50" :max="10" /&gt;
 
 </code></pre>
 
-            <h5>Step</h5>
-            <p>Step factor is 1 by default and can be customized with <i>step</i> option.</p>
-            <pre v-code><code>
+        <h5>Step</h5>
+        <p>Step factor is 1 by default and can be customized with <i>step</i> option.</p>
+        <pre v-code><code>
 &lt;Knob v-model="value" :step="10" /&gt;
 
 </code></pre>
 
-            <h5>Styling</h5>
-            <p>
-                <i>valueColor</i> defines the value color, <i>rangeColor</i> defines the range background and similarly <i>textColor</i> configures the color of the value text. In addition, <i>strokeWidth</i> is used to determine the width of the
-                stroke of range and value sections.
-            </p>
-            <pre v-code><code>
+        <h5>Styling</h5>
+        <p>
+            <i>valueColor</i> defines the value color, <i>rangeColor</i> defines the range background and similarly <i>textColor</i> configures the color of the value text. In addition, <i>strokeWidth</i> is used to determine the width of the stroke
+            of range and value sections.
+        </p>
+        <pre v-code><code>
 &lt;Knob v-model="value" valueColor="SlateGray" rangeColor="MediumTurquoise"  /&gt;
 
 </code></pre>
 
-            <h5>Size</h5>
-            <p>Default size of the Knob is 100 pixels for width and height, use the <i>size</i> property to customize it per your requirements.</p>
-            <pre v-code><code>
+        <h5>Size</h5>
+        <p>Default size of the Knob is 100 pixels for width and height, use the <i>size</i> property to customize it per your requirements.</p>
+        <pre v-code><code>
 &lt;Knob v-model="value" :size="200" /&gt;
 
 </code></pre>
 
-            <h5>Properties</h5>
-            <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>modelValue</td>
-                            <td>number</td>
-                            <td>null</td>
-                            <td>Value of the component.</td>
-                        </tr>
-                        <tr>
-                            <td>size</td>
-                            <td>number</td>
-                            <td>100</td>
-                            <td>Size of the component in pixels.</td>
-                        </tr>
-                        <tr>
-                            <td>disabled</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When present, it specifies that the component should be disabled.</td>
-                        </tr>
-                        <tr>
-                            <td>readonly</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When present, it specifies that the component value cannot be edited.</td>
-                        </tr>
-                        <tr>
-                            <td>tabindex</td>
-                            <td>number</td>
-                            <td>null</td>
-                            <td>Index of the element in tabbing order.</td>
-                        </tr>
-                        <tr>
-                            <td>step</td>
-                            <td>number</td>
-                            <td>null</td>
-                            <td>Step factor to increment/decrement the value.</td>
-                        </tr>
-                        <tr>
-                            <td>min</td>
-                            <td>number</td>
-                            <td>0</td>
-                            <td>Mininum boundary value.</td>
-                        </tr>
-                        <tr>
-                            <td>max</td>
-                            <td>number</td>
-                            <td>100</td>
-                            <td>Maximum boundary value.</td>
-                        </tr>
-                        <tr>
-                            <td>valueColor</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Background of the value.</td>
-                        </tr>
-                        <tr>
-                            <td>rangeColor</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Background color of the range.</td>
-                        </tr>
-                        <tr>
-                            <td>textColor</td>
-                            <td>number</td>
-                            <td>null</td>
-                            <td>Color of the value text.</td>
-                        </tr>
-                        <tr>
-                            <td>strokeWidth</td>
-                            <td>number</td>
-                            <td>14</td>
-                            <td>Width of the knob stroke.</td>
-                        </tr>
-                        <tr>
-                            <td>showValue</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether the show the value inside the knob.</td>
-                        </tr>
-                        <tr>
-                            <td>valueTemplate</td>
-                            <td>string</td>
-                            <td>{value}</td>
-                            <td>Template string of the value.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>modelValue</td>
+                        <td>number</td>
+                        <td>null</td>
+                        <td>Value of the component.</td>
+                    </tr>
+                    <tr>
+                        <td>size</td>
+                        <td>number</td>
+                        <td>100</td>
+                        <td>Size of the component in pixels.</td>
+                    </tr>
+                    <tr>
+                        <td>disabled</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When present, it specifies that the component should be disabled.</td>
+                    </tr>
+                    <tr>
+                        <td>readonly</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When present, it specifies that the component value cannot be edited.</td>
+                    </tr>
+                    <tr>
+                        <td>tabindex</td>
+                        <td>number</td>
+                        <td>null</td>
+                        <td>Index of the element in tabbing order.</td>
+                    </tr>
+                    <tr>
+                        <td>step</td>
+                        <td>number</td>
+                        <td>null</td>
+                        <td>Step factor to increment/decrement the value.</td>
+                    </tr>
+                    <tr>
+                        <td>min</td>
+                        <td>number</td>
+                        <td>0</td>
+                        <td>Mininum boundary value.</td>
+                    </tr>
+                    <tr>
+                        <td>max</td>
+                        <td>number</td>
+                        <td>100</td>
+                        <td>Maximum boundary value.</td>
+                    </tr>
+                    <tr>
+                        <td>valueColor</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Background of the value.</td>
+                    </tr>
+                    <tr>
+                        <td>rangeColor</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Background color of the range.</td>
+                    </tr>
+                    <tr>
+                        <td>textColor</td>
+                        <td>number</td>
+                        <td>null</td>
+                        <td>Color of the value text.</td>
+                    </tr>
+                    <tr>
+                        <td>strokeWidth</td>
+                        <td>number</td>
+                        <td>14</td>
+                        <td>Width of the knob stroke.</td>
+                    </tr>
+                    <tr>
+                        <td>showValue</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Whether the show the value inside the knob.</td>
+                    </tr>
+                    <tr>
+                        <td>valueTemplate</td>
+                        <td>string</td>
+                        <td>{value}</td>
+                        <td>Template string of the value.</td>
+                    </tr>
+                    <tr>
+                        <td>aria-label</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Defines a string value that labels an interactive element.</td>
+                    </tr>
+                    <tr>
+                        <td>aria-labelledby</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Events</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>change</td>
-                            <td>value: New value</td>
-                            <td>Callback to invoke when the value changes.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Events</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>change</td>
+                        <td>value: New value</td>
+                        <td>Callback to invoke when the value changes.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-knob</td>
-                            <td>Container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-knob-text</td>
-                            <td>Text element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-knob-value</td>
-                            <td>Value element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-knob-text</td>
-                            <td>Text element.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-knob</td>
+                        <td>Container element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-knob-text</td>
+                        <td>Text element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-knob-value</td>
+                        <td>Value element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-knob-text</td>
+                        <td>Text element.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Accessibility</h5>
-            <h6>Screen Reader</h6>
-            <p>
-                Knob element component uses <i>slider</i> role in addition to the <i>aria-valuemin</i>, <i>aria-valuemax</i> and <i>aria-valuenow</i> attributes. Value to describe the component can be defined using <i>aria-labelledby</i> and
-                <i>aria-label</i> props.
-            </p>
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>
+            Knob element component uses <i>slider</i> role in addition to the <i>aria-valuemin</i>, <i>aria-valuemax</i> and <i>aria-valuenow</i> attributes. Value to describe the component can be defined using <i>aria-labelledby</i> and
+            <i>aria-label</i> props.
+        </p>
 
-            <pre v-code><code>
+        <pre v-code><code>
 &lt;span id="label_number"&gt;Number&lt;/span&gt;
 &lt;Knob aria-labelledby="label_number" /&gt;
 
@@ -227,67 +238,64 @@ data() {
 
 </code></pre>
 
-            <h6>Keyboard Support</h6>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Key</th>
-                            <th>Function</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td><i>tab</i></td>
-                            <td>Moves focus to the slider.</td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <span class="inline-flex flex-column">
-                                    <i class="mb-1">left arrow</i>
-                                    <i>down arrow</i>
-                                </span>
-                            </td>
-                            <td>Decrements the value.</td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <span class="inline-flex flex-column">
-                                    <i class="mb-1">right arrow</i>
-                                    <i>up arrow</i>
-                                </span>
-                            </td>
-                            <td>Increments the value.</td>
-                        </tr>
-                        <tr>
-                            <td><i>home</i></td>
-                            <td>Set the minimum value.</td>
-                        </tr>
-                        <tr>
-                            <td><i>end</i></td>
-                            <td>Set the maximum value.</td>
-                        </tr>
-                        <tr>
-                            <td><i>page up</i></td>
-                            <td>Increments the value by 10 steps.</td>
-                        </tr>
-                        <tr>
-                            <td><i>page down</i></td>
-                            <td>Decrements the value by 10 steps.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h6>Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>tab</i></td>
+                        <td>Moves focus to the slider.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <span class="inline-flex flex-column">
+                                <i class="mb-1">left arrow</i>
+                                <i>down arrow</i>
+                            </span>
+                        </td>
+                        <td>Decrements the value.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <span class="inline-flex flex-column">
+                                <i class="mb-1">right arrow</i>
+                                <i>up arrow</i>
+                            </span>
+                        </td>
+                        <td>Increments the value.</td>
+                    </tr>
+                    <tr>
+                        <td><i>home</i></td>
+                        <td>Set the minimum value.</td>
+                    </tr>
+                    <tr>
+                        <td><i>end</i></td>
+                        <td>Set the maximum value.</td>
+                    </tr>
+                    <tr>
+                        <td><i>page up</i></td>
+                        <td>Increments the value by 10 steps.</td>
+                    </tr>
+                    <tr>
+                        <td><i>page down</i></td>
+                        <td>Decrements the value by 10 steps.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
+        <h5>Dependencies</h5>
+        <p>None.</p>
 
-            <h5>Knob Vue</h5>
-            <p>
-                PrimeVue Knob has no dependency however implementation is derived and inspired from <a href="https://github.com/kramer99/vue-knob-control">vue-knob-control</a> component authored by <a href="https://github.com/kramer99">kramer99</a>.
-            </p>
-        </AppDoc>
-    </ClientOnly>
+        <h5>Knob Vue</h5>
+        <p>PrimeVue Knob has no dependency however implementation is derived and inspired from <a href="https://github.com/kramer99/vue-knob-control">vue-knob-control</a> component authored by <a href="https://github.com/kramer99">kramer99</a>.</p>
+    </AppDoc>
 </template>
 
 <script>
diff --git a/pages/landing/BlockSection.vue b/pages/landing/BlockSection.vue
index eb0f7358f..ffb7c4ef8 100644
--- a/pages/landing/BlockSection.vue
+++ b/pages/landing/BlockSection.vue
@@ -3,17 +3,17 @@
         <div class="section-header">PrimeBlocks</div>
         <p class="section-detail">350+ ready to copy-paste UI blocks to build spectacular applications in no time.</p>
         <div class="flex justify-content-center mt-4">
-            <nuxt-link to="https://www.primefaces.org/primeblocks-vue" class="font-semibold p-3 border-round flex align-items-center linkbox active z-2">
+            <a href="https://www.primefaces.org/primeblocks-vue" class="font-semibold p-3 border-round flex align-items-center linkbox active z-2">
                 <span>Learn More</span>
                 <i class="pi pi-arrow-right ml-2"></i>
-            </nuxt-link>
+            </a>
         </div>
         <section :class="['prime-blocks flex justify-content-center align-items-center flex-column z-1', { 'blocks-animation': setAnimation }]">
             <div class="flex">
                 <div class="prime-block flex align-self-stretch p-1">
                     <div class="block-sidebar w-1 p-3">
                         <div class="logo">
-                            <img src="/demo/images/landing/blocks/logo-1.svg" alt="block logo" />
+                            <img src="demo/images/landing/blocks/logo-1.svg" alt="block logo" />
                         </div>
                         <div class="sidebar-menu mt-5">
                             <div class="bar w-8 my-3"></div>
@@ -106,7 +106,7 @@
                 <div class="prime-block p-1 flex align-self-stretch flex-column">
                     <div class="block-header py-3 px-4 flex justify-content-between align-items-center">
                         <div class="logo pr-5">
-                            <img src="/demo/images/landing/blocks/logo-1.svg" alt="block logo" />
+                            <img src="demo/images/landing/blocks/logo-1.svg" alt="block logo" />
                         </div>
                         <div class="flex-auto sidebar-menu flex">
                             <div class="bar w-2rem mx-2"></div>
@@ -148,7 +148,7 @@
                 <div class="prime-block flex align-self-stretch p-1">
                     <div class="block-sidebar p-3">
                         <div class="logo">
-                            <img src="/demo/images/landing/blocks/logo-2.svg" alt="block logo" />
+                            <img src="demo/images/landing/blocks/logo-2.svg" alt="block logo" />
                         </div>
                         <div class="sidebar-menu mt-5">
                             <div class="circle my-3"></div>
@@ -214,7 +214,7 @@
                 <div class="prime-block flex align-self-stretch p-1">
                     <div class="block-sidebar w-1 p-3">
                         <div class="logo">
-                            <img src="/demo/images/landing/blocks/logo-1.svg" alt="block logo" />
+                            <img src="demo/images/landing/blocks/logo-1.svg" alt="block logo" />
                         </div>
                         <div class="sidebar-menu mt-5">
                             <div class="bar w-8 my-3"></div>
@@ -278,7 +278,7 @@
                 <div class="prime-block flex align-self-stretch p-1">
                     <div class="block-sidebar p-3">
                         <div class="logo">
-                            <img src="/demo/images/landing/blocks/logo-2.svg" alt="block logo" />
+                            <img src="demo/images/landing/blocks/logo-2.svg" alt="block logo" />
                         </div>
                         <div class="sidebar-menu mt-5">
                             <div class="circle my-3"></div>
@@ -341,7 +341,7 @@
                 <div class="prime-block p-1 flex align-self-stretch flex-column">
                     <div class="block-header py-3 px-4 flex justify-content-between align-items-center">
                         <div class="logo pr-5">
-                            <img src="/demo/images/landing/blocks/logo-1.svg" alt="block logo" />
+                            <img src="demo/images/landing/blocks/logo-1.svg" alt="block logo" />
                         </div>
                         <div class="flex-auto sidebar-menu flex">
                             <div class="bar w-2rem mx-2"></div>
@@ -356,7 +356,7 @@
                         <div class="block-main h-full flex justify-content-center align-items-center flex-column">
                             <div class="block-item block-item-active animation-2 mx-3 w-8rem text-center flex flex-column align-items-center overflow-visible">
                                 <div class="-mt-4">
-                                    <img src="/demo/images/landing/blocks/question.svg" alt="question mark" />
+                                    <img src="demo/images/landing/blocks/question.svg" alt="question mark" />
                                 </div>
                                 <div class="bar w-2rem mt-2"></div>
                                 <div class="bar w-6rem mt-2"></div>
diff --git a/pages/landing/ComponentSection.vue b/pages/landing/ComponentSection.vue
index 10b713e8b..a71b2863c 100644
--- a/pages/landing/ComponentSection.vue
+++ b/pages/landing/ComponentSection.vue
@@ -30,36 +30,36 @@
                     <Chart type="line" :data="chartData" :options="chartOptions" />
                 </div>
                 <div class="box p-4 mb-5">
-                    <TabMenu :model="items" v-model:activeIndex="activeTabIndex" />
+                    <TabMenu v-model:activeIndex="activeTabIndex" :model="items" />
                 </div>
                 <div class="box p-4">
                     <ul class="list-none p-0 m-0">
                         <li class="flex align-items-center mb-3">
-                            <img src="/demo/images/landing/avatar-1.svg" alt="avatar 1" class="w-2rem h-2rem mr-3" />
+                            <img src="demo/images/landing/avatar-1.svg" alt="avatar 1" class="w-2rem h-2rem mr-3" />
                             <span class="font-medium">Darrel Steward</span>
                             <ProgressBar :value="pbValue1" :showValue="false" class="w-10rem ml-auto mr-3" style="height: 0.5rem" />
                             <span class="text-secondary font-medium">15%</span>
                         </li>
                         <li class="flex align-items-center mb-3">
-                            <img src="/demo/images/landing/avatar-2.svg" alt="avatar 2" class="w-2rem h-2rem mr-3" />
+                            <img src="demo/images/landing/avatar-2.svg" alt="avatar 2" class="w-2rem h-2rem mr-3" />
                             <span class="font-medium">Albert Flores</span>
                             <ProgressBar :value="pbValue3" :showValue="false" class="w-10rem ml-auto mr-3" style="height: 0.5rem" />
                             <span class="text-secondary font-medium">85%</span>
                         </li>
                         <li class="flex align-items-center mb-3">
-                            <img src="/demo/images/landing/avatar-3.svg" alt="avatar 3" class="w-2rem h-2rem mr-3" />
+                            <img src="demo/images/landing/avatar-3.svg" alt="avatar 3" class="w-2rem h-2rem mr-3" />
                             <span class="font-medium">Kathryn Murphy</span>
                             <ProgressBar :value="pbValue3" :showValue="false" class="w-10rem ml-auto mr-3" style="height: 0.5rem" />
                             <span class="text-secondary font-medium">50%</span>
                         </li>
                         <li class="flex align-items-center mb-3">
-                            <img src="/demo/images/landing/avatar-4.svg" alt="avatar 4" class="w-2rem h-2rem mr-3" />
+                            <img src="demo/images/landing/avatar-4.svg" alt="avatar 4" class="w-2rem h-2rem mr-3" />
                             <span class="font-medium">Cody Fisher</span>
                             <ProgressBar :value="pbValue4" :showValue="false" class="w-10rem ml-auto mr-3" style="height: 0.5rem" />
                             <span class="text-secondary font-medium">75%</span>
                         </li>
                         <li class="flex align-items-center mb-3">
-                            <img src="/demo/images/landing/avatar-5.svg" alt="avatar 5" class="w-2rem h-2rem mr-3" />
+                            <img src="demo/images/landing/avatar-5.svg" alt="avatar 5" class="w-2rem h-2rem mr-3" />
                             <span class="font-medium">Brandon Atkinson</span>
                             <ProgressBar :value="pbValue5" :showValue="false" class="w-10rem ml-auto mr-3" style="height: 0.5rem" />
                             <span class="text-secondary font-medium">60%</span>
@@ -70,7 +70,7 @@
             <div class="flex flex-column justify-content-start px-3 z-1">
                 <div class="box p-4 mb-5">
                     <div class="surface-card mb-4 w-20rem text-center p-5" style="border-radius: '10px'">
-                        <img src="/demo/images/landing/watch.png" alt="Watch" />
+                        <img src="demo/images/landing/watch.png" alt="Watch" />
                     </div>
                     <div class="flex align-items-center mb-4">
                         <div class="flex flex-column">
@@ -88,7 +88,7 @@
                     <div class="flex align-items-center">
                         <Chip label="Vue" class="mr-2 font-medium" removable />
                         <span class="font-medium">Typescript</span>
-                        <InputSwitch class="ml-auto" v-model="switchValue"></InputSwitch>
+                        <InputSwitch v-model="switchValue" class="ml-auto"></InputSwitch>
                     </div>
                     <div class="mt-5">
                         <SelectButton v-model="selectButtonValue" :options="selectButtonOptions" optionLabel="name" />
@@ -105,7 +105,7 @@
                     <ul class="list-none p-0 m-0">
                         <li class="flex mb-3">
                             <span class="mr-3">
-                                <img src="/demo/images/landing/avatar.png" alt="Avatar" class="w-3rem h-3rem" />
+                                <img src="demo/images/landing/avatar.png" alt="Avatar" class="w-3rem h-3rem" />
                             </span>
                             <div class="flex flex-column">
                                 <span class="font-bold mb-2">Amanda Williams</span>
diff --git a/pages/landing/DesignerSection.vue b/pages/landing/DesignerSection.vue
index 70f1e8c5c..6912c0199 100644
--- a/pages/landing/DesignerSection.vue
+++ b/pages/landing/DesignerSection.vue
@@ -2,11 +2,11 @@
     <section class="landing-designer py-8">
         <div class="section-header">Theme Designer</div>
         <p class="section-detail">Designer is the ultimate tool to create your own PrimeVue experience powered by a SASS based theme engine with 500+ variables and a Visual Designer.</p>
-        <div class="designer-main mt-7 justify-content-center pad-section" :style="{ backgroundImage: `url('/demo/images/landing/wave-${$appState.darkTheme ? 'dark' : 'light'}.svg')`, backgroundSize: 'cover' }">
+        <div class="designer-main mt-7 justify-content-center pad-section" :style="{ backgroundImage: `url('demo/images/landing/wave-${$appState.darkTheme ? 'dark' : 'light'}.svg')`, backgroundSize: 'cover' }">
             <div class="box p-4 flex flex-column md:flex-row z-1 designer-editor">
                 <div class="mr-0 md:mr-4 p-4 designer-controls box border-bottom-1 border-left-none border-right-none border-top-none md:border-bottom-none md:border-right-1" style="border-radius: '10px'">
                     <div class="text-center mb-4">
-                        <img :src="'/demo/images/landing/' + `${$appState.darkTheme ? 'designer-light.svg' : 'designer-dark.svg'}`" />
+                        <img :src="'demo/images/landing/' + `${$appState.darkTheme ? 'designer-light.svg' : 'designer-dark.svg'}`" />
                     </div>
                     <div class="p-fluid">
                         <span class="font-semibold block mb-3">Primary</span>
@@ -23,15 +23,15 @@
                         <span class="font-semibold block mt-4 mb-3">Size</span>
                         <div class="flex align-items-center">
                             <div class="flex align-items-center">
-                                <RadioButton id="size-small" value="small" name="sizevalue" v-model="size" />
+                                <RadioButton id="size-small" v-model="size" value="small" name="sizevalue" />
                                 <label for="size-small" class="ml-2 font-medium">Small</label>
                             </div>
                             <div class="flex align-items-center ml-4">
-                                <RadioButton id="size-normal" value="normal" name="sizevalue" v-model="size" />
+                                <RadioButton id="size-normal" v-model="size" value="normal" name="sizevalue" />
                                 <label for="size-normal" class="ml-2 font-medium">Normal</label>
                             </div>
                             <div class="flex align-items-center ml-4">
-                                <RadioButton id="size-large" value="large" name="sizevalue" v-model="size" />
+                                <RadioButton id="size-large" v-model="size" value="large" name="sizevalue" />
                                 <label for="size-large" class="ml-2 font-medium">Large</label>
                             </div>
                         </div>
@@ -48,13 +48,13 @@
                             </div>
                         </div>
 
-                        <nuxt-link to="https://www.primefaces.org/designer-vue" class="font-semibold p-3 border-round flex align-items-center linkbox active">
+                        <a href="https://www.primefaces.org/designer-vue" class="font-semibold p-3 border-round flex align-items-center linkbox active">
                             <span>View Full Version</span>
                             <i class="pi pi-arrow-right ml-auto"></i>
-                        </nuxt-link>
+                        </a>
                     </div>
                 </div>
-                <div :class="editorclass" style="border-radius: '10px'" :ref="editorRef">
+                <div :ref="editorRef" :class="editorclass" style="border-radius: '10px'">
                     <div class="p-fluid formgrid grid">
                         <div class="field col-12 xl:col-6">
                             <label for="username" class="font-semibold mb-3 p-component">Username</label>
@@ -92,11 +92,11 @@
                             <span class="font-semibold mb-2 block mb-3 mt-5 p-component">Checkboxes</span>
                             <div class="flex flex-column xl:flex-row xl:align-items-center">
                                 <div class="flex align-items-center">
-                                    <Checkbox id="cb1" :value="value1" name="cbvalue" v-model="values" />
+                                    <Checkbox id="cb1" v-model="values" :value="value1" name="cbvalue" />
                                     <label for="cb1" class="ml-2 font-medium p-component white-space-nowrap">Option 1</label>
                                 </div>
                                 <div class="flex align-items-center mt-3 xl:mt-0 xl:ml-4">
-                                    <Checkbox id="cb2" :value="value2" name="cbvalue" v-model="values" />
+                                    <Checkbox id="cb2" v-model="values" :value="value2" name="cbvalue" />
                                     <label for="cb2" class="ml-2 font-medium p-component white-space-nowrap">Option 2</label>
                                 </div>
                             </div>
diff --git a/pages/landing/FeaturesSection.vue b/pages/landing/FeaturesSection.vue
index 65a22c0ed..4af15e2ce 100644
--- a/pages/landing/FeaturesSection.vue
+++ b/pages/landing/FeaturesSection.vue
@@ -2,59 +2,59 @@
     <section class="landing-features py-8">
         <div class="section-header">Features</div>
         <p class="section-detail">PrimeVue is the most complete solution for your UI requirements.</p>
-        <div class="grid mt-7 pad-section" :style="{ backgroundImage: `url('/demo/images/landing/wave-${$appState.darkTheme ? 'dark-alt' : 'light-alt'}.svg')`, backgroundSize: 'cover' }">
+        <div class="grid mt-7 pad-section" :style="{ backgroundImage: `url('demo/images/landing/wave-${$appState.darkTheme ? 'dark-alt' : 'light-alt'}.svg')`, backgroundSize: 'cover' }">
             <div class="col-12 md:col-6 xl:col-3 flex justify-content-center p-3">
                 <div class="box p-4 w-full">
-                    <img src="/demo/images/landing/features/icon-components.svg" alt="components icon" class="block mb-3" />
+                    <img src="demo/images/landing/features/icon-components.svg" alt="components icon" class="block mb-3" />
                     <div class="font-semibold mb-3 text-lg">90+ UI Components</div>
                     <p class="m-0 text-secondary font-medium">The ultimate set of UI Components to assist you with 90+ impressive Vue Components.</p>
                 </div>
             </div>
             <div class="col-12 md:col-6 xl:col-3 flex justify-content-center p-3">
                 <div class="box p-4 w-full">
-                    <img src="/demo/images/landing/features/icon-community.svg" alt="components icon" class="block mb-3" />
+                    <img src="demo/images/landing/features/icon-community.svg" alt="components icon" class="block mb-3" />
                     <div class="font-semibold mb-3 text-lg">Community</div>
                     <p class="m-0 text-secondary font-medium">Connect with the other open source community members, collaborate and have a voice in the project roadmap.</p>
                 </div>
             </div>
             <div class="col-12 md:col-6 xl:col-3 flex justify-content-center p-3">
                 <div class="box p-4 w-full">
-                    <img src="/demo/images/landing/features/icon-productivity.svg" alt="components icon" class="block mb-3" />
+                    <img src="demo/images/landing/features/icon-productivity.svg" alt="components icon" class="block mb-3" />
                     <div class="font-semibold mb-3 text-lg">Productivity</div>
                     <p class="m-0 text-secondary font-medium">Boost your productivity by achieving more in less time and accomplish amazing results.</p>
                 </div>
             </div>
             <div class="col-12 md:col-6 xl:col-3 flex justify-content-center p-3">
                 <div class="box p-4 w-full">
-                    <img src="/demo/images/landing/features/icon-accessibility.svg" alt="components icon" class="block mb-3" />
+                    <img src="demo/images/landing/features/icon-accessibility.svg" alt="components icon" class="block mb-3" />
                     <div class="font-semibold mb-3 text-lg">Accessibility</div>
                     <p class="m-0 text-secondary font-medium">Compliant with the Web Content Accessibility Guidelines (WCAG 2.0).</p>
                 </div>
             </div>
             <div class="col-12 md:col-6 xl:col-3 flex justify-content-center p-3">
                 <div class="box p-4 w-full">
-                    <img src="/demo/images/landing/features/icon-support.svg" alt="components icon" class="block mb-3" />
+                    <img src="demo/images/landing/features/icon-support.svg" alt="components icon" class="block mb-3" />
                     <div class="font-semibold mb-3 text-lg">Enterprise Support</div>
                     <p class="m-0 text-secondary font-medium">Exceptional support service featuring response within 1 business day and option to request enhancements and new features for the library.</p>
                 </div>
             </div>
             <div class="col-12 md:col-6 xl:col-3 flex justify-content-center p-3">
                 <div class="box p-4 w-full">
-                    <img src="/demo/images/landing/features/icon-mobile.svg" alt="components icon" class="block mb-3" />
+                    <img src="demo/images/landing/features/icon-mobile.svg" alt="components icon" class="block mb-3" />
                     <div class="font-semibold mb-3 text-lg">Mobile</div>
                     <p class="m-0 text-secondary font-medium">First class support for responsive design led by touch optimized elements.</p>
                 </div>
             </div>
             <div class="col-12 md:col-6 xl:col-3 flex justify-content-center p-3">
                 <div class="box p-4 w-full">
-                    <img src="/demo/images/landing/features/icon-theme.svg" alt="components icon" class="block mb-3" />
+                    <img src="demo/images/landing/features/icon-theme.svg" alt="components icon" class="block mb-3" />
                     <div class="font-semibold mb-3 text-lg">Themes</div>
                     <p class="m-0 text-secondary font-medium">Built on a design-agnostic api, choose from a vast amount of themes such as material, bootstrap, custom or develop your own.</p>
                 </div>
             </div>
             <div class="col-12 md:col-6 xl:col-3 flex justify-content-center p-3">
                 <div class="box p-4 w-full">
-                    <img src="/demo/images/landing/features/icon-ts.svg" alt="components icon" class="block mb-3" />
+                    <img src="demo/images/landing/features/icon-ts.svg" alt="components icon" class="block mb-3" />
                     <div class="font-semibold mb-3 text-lg">Typescript</div>
                     <p class="m-0 text-secondary font-medium">Top-notch support for Typescript with types and tooling assistance.</p>
                 </div>
diff --git a/pages/landing/FooterSection.vue b/pages/landing/FooterSection.vue
index 6068ba1d5..5433d07d2 100644
--- a/pages/landing/FooterSection.vue
+++ b/pages/landing/FooterSection.vue
@@ -5,7 +5,7 @@
                 <ul class="list-none p-0 m-0">
                     <li class="font-bold mb-5">General</li>
                     <li class="mb-4">
-                        <nuxt-link to="/setup" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Get Started</nuxt-link>
+                        <router-link to="/setup" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Get Started</router-link>
                     </li>
                 </ul>
             </div>
@@ -13,13 +13,13 @@
                 <ul class="list-none p-0 m-0">
                     <li class="font-bold mb-5">Support</li>
                     <li class="mb-4">
-                        <nuxt-link to="https://forum.primefaces.org/viewforum.php?f=57" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Forum</nuxt-link>
+                        <a href="https://forum.primefaces.org/viewforum.php?f=57" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Forum</a>
                     </li>
                     <li class="mb-4">
-                        <nuxt-link to="https://discord.gg/gzKFYnpmCY" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Discord</nuxt-link>
+                        <a href="https://discord.gg/gzKFYnpmCY" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Discord</a>
                     </li>
                     <li class="mb-4">
-                        <nuxt-link to="/support" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">PRO Support</nuxt-link>
+                        <router-link to="/support" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">PRO Support</router-link>
                     </li>
                 </ul>
             </div>
@@ -27,25 +27,25 @@
                 <ul class="list-none p-0 m-0">
                     <li class="font-bold mt-5 lg:mt-0 mb-5">Resources</li>
                     <li class="mb-4">
-                        <nuxt-link to="https://www.youtube.com/channel/UCTgmp69aBOlLnPEqlUyetWw" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">PrimeTV</nuxt-link>
+                        <a href="https://www.youtube.com/channel/UCTgmp69aBOlLnPEqlUyetWw" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">PrimeTV</a>
                     </li>
                     <li class="mb-4">
-                        <nuxt-link to="https://www.primefaces.org/store/" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Store</nuxt-link>
+                        <a href="https://www.primefaces.org/store/" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Store</a>
                     </li>
                     <li class="mb-4">
-                        <nuxt-link to="https://github.com/primefaces/primevue" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Source Code</nuxt-link>
+                        <a href="https://github.com/primefaces/primevue" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Source Code</a>
                     </li>
                     <li class="mb-4">
-                        <nuxt-link to="https://twitter.com/primevue" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Twitter</nuxt-link>
+                        <a href="https://twitter.com/primevue" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Twitter</a>
                     </li>
                     <li class="mb-4">
-                        <nuxt-link to="https://www.primefaces.org/newsletter" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Newsletter</nuxt-link>
+                        <a href="https://www.primefaces.org/newsletter" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Newsletter</a>
                     </li>
                     <li class="mb-4">
-                        <nuxt-link to="https://gear.primefaces.org/" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">PrimeGear</nuxt-link>
+                        <a href="https://gear.primefaces.org/" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">PrimeGear</a>
                     </li>
                     <li class="mb-4">
-                        <nuxt-link to="mailto:contact@primetek.com.tr" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Contact Us</nuxt-link>
+                        <a href="mailto:contact@primetek.com.tr" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Contact Us</a>
                     </li>
                 </ul>
             </div>
@@ -53,13 +53,13 @@
                 <ul class="list-none p-0 m-0">
                     <li class="font-bold mt-5 lg:mt-0 mb-5">Theming</li>
                     <li class="mb-4">
-                        <nuxt-link to="/theming" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Guide</nuxt-link>
+                        <router-link to="/theming" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Guide</router-link>
                     </li>
                     <li class="mb-4">
-                        <nuxt-link to="https://www.primefaces.org/designer/primevue" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Designer</nuxt-link>
+                        <a href="https://www.primefaces.org/designer/primevue" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Designer</a>
                     </li>
                     <li class="mb-4">
-                        <nuxt-link to="/colors" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Colors</nuxt-link>
+                        <router-link to="/colors" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Colors</router-link>
                     </li>
                 </ul>
             </div>
@@ -69,18 +69,18 @@
 
         <div class="flex justify-content-between py-6">
             <span>
-                <img :src="'/demo/images/primevue-logo-' + `${$appState.darkTheme ? 'light' : 'dark'}` + '.svg'" alt="primevue logo" />
+                <img :src="'demo/images/primevue-logo-' + `${$appState.darkTheme ? 'light' : 'dark'}` + '.svg'" alt="primevue logo" />
             </span>
             <div class="flex align-items-center">
-                <nuxt-link to="https://twitter.com/primevue" class="linkbox block w-3rem h-3rem flex align-items-center justify-content-center mr-3">
+                <a href="https://twitter.com/primevue" class="linkbox block w-3rem h-3rem flex align-items-center justify-content-center mr-3">
                     <i class="pi pi-twitter"></i>
-                </nuxt-link>
-                <nuxt-link to="https://github.com/primefaces/primevue" class="linkbox block w-3rem h-3rem flex align-items-center justify-content-center mr-3">
+                </a>
+                <a href="https://github.com/primefaces/primevue" class="linkbox block w-3rem h-3rem flex align-items-center justify-content-center mr-3">
                     <i class="pi pi-github"></i>
-                </nuxt-link>
-                <nuxt-link to="https://discord.gg/gzKFYnpmCY" class="linkbox block w-3rem h-3rem flex align-items-center justify-content-center">
+                </a>
+                <a href="https://discord.gg/gzKFYnpmCY" class="linkbox block w-3rem h-3rem flex align-items-center justify-content-center">
                     <i class="pi pi-discord"></i>
-                </nuxt-link>
+                </a>
             </div>
         </div>
     </section>
diff --git a/pages/landing/HeaderSection.vue b/pages/landing/HeaderSection.vue
index d1517ae1f..ce37f5b73 100644
--- a/pages/landing/HeaderSection.vue
+++ b/pages/landing/HeaderSection.vue
@@ -8,37 +8,37 @@
             <nav class="scalein origin-top">
                 <ol class="list-none m-0 p-0 flex flex-column lg:flex-row flex-wrap lg:flex-nowrap lg:align-items-center font-semibold">
                     <li class="mr-0 lg:mr-2">
-                        <nuxt-link to="/setup">
-                            <img src="/demo/images/landing/core-icon.svg" alt="primevue core" />
+                        <router-link to="/setup">
+                            <img src="demo/images/landing/core-icon.svg" alt="primevue core" />
                             <span>Components</span>
-                        </nuxt-link>
+                        </router-link>
                     </li>
                     <li class="mr-0 lg:mr-2">
-                        <nuxt-link to="https://www.primefaces.org/primeblocks-vue">
-                            <img src="/demo/images/landing/blocks-icon.svg" alt="primevue templates" />
+                        <a href="https://www.primefaces.org/primeblocks-vue">
+                            <img src="demo/images/landing/blocks-icon.svg" alt="primevue templates" />
                             <span>Blocks</span>
-                        </nuxt-link>
+                        </a>
                     </li>
                     <li class="mr-0 lg:mr-2">
-                        <nuxt-link to="https://www.primefaces.org/designer-vue">
-                            <img src="/demo/images/landing/designer-icon.svg" alt="primevue templates" />
+                        <a href="https://www.primefaces.org/designer-vue">
+                            <img src="demo/images/landing/designer-icon.svg" alt="primevue templates" />
                             <span>Designer</span>
-                        </nuxt-link>
+                        </a>
                     </li>
                     <li class="mr-0 lg:mr-2">
-                        <nuxt-link to="https://www.primefaces.org/store/templates.xhtml">
-                            <img src="/demo/images/landing/templates-icon.svg" alt="primevue templates" />
+                        <a href="https://www.primefaces.org/store/templates.xhtml">
+                            <img src="demo/images/landing/templates-icon.svg" alt="primevue templates" />
                             <span>Templates</span>
-                        </nuxt-link>
+                        </a>
                     </li>
                 </ol>
             </nav>
-            <nuxt-link to="https://github.com/primefaces/primevue" rel="noopener noreferrer" class="linkbox p-0 header-button mr-2 flex align-items-center justify-content-center flex-shrink-0">
+            <a href="https://github.com/primefaces/primevue" rel="noopener noreferrer" class="linkbox p-0 header-button mr-2 flex align-items-center justify-content-center flex-shrink-0">
                 <i class="pi pi-github"></i>
-            </nuxt-link>
-            <nuxt-link to="https://discord.gg/gzKFYnpmCY" rel="noopener noreferrer" class="linkbox p-0 header-button mr-2 flex align-items-center justify-content-center flex-shrink-0">
+            </a>
+            <a href="https://discord.gg/gzKFYnpmCY" rel="noopener noreferrer" class="linkbox p-0 header-button mr-2 flex align-items-center justify-content-center flex-shrink-0">
                 <i class="pi pi-discord"></i>
-            </nuxt-link>
+            </a>
             <button type="button" class="linkbox header-button inline-flex align-items-center justify-content-center" @click="toggleTheme">
                 <i :class="['pi', { 'pi-sun': isDarkTheme(), 'pi-moon': !isDarkTheme() }]"></i>
             </button>
@@ -86,6 +86,7 @@ export default {
                     this.checkSticky();
                 };
             }
+
             window.addEventListener('scroll', this.scrollListener);
         },
         unbindScrollListener() {
diff --git a/pages/landing/HeroSection.vue b/pages/landing/HeroSection.vue
index 370a8761f..62ab1cb8c 100644
--- a/pages/landing/HeroSection.vue
+++ b/pages/landing/HeroSection.vue
@@ -5,7 +5,7 @@
                 <div class="p-2 flex flex-row md:flex-column">
                     <div class="hero-box w-10rem h-10rem md:w-12rem md:h-12rem animation flex align-items-center justify-content-center" @click="navigateTo('https://www.primefaces.org/store')">
                         <div class="flex flex-column align-items-center">
-                            <img src="/demo/images/landing/templates-icon.svg" alt="primevue templates" />
+                            <img src="demo/images/landing/templates-icon.svg" alt="primevue templates" />
                             <div class="name">
                                 <b>Templates</b>
                                 <span>Spectacular Designs</span>
@@ -14,7 +14,7 @@
                     </div>
                     <div class="hero-box w-10rem h-10rem md:w-12rem md:h-12rem animation ml-4 md:ml-0 md:mt-4 flex align-items-center justify-content-center" @click="navigateTo('https://www.primefaces.org/designer-vue')">
                         <div class="flex flex-column align-items-center">
-                            <img src="/demo/images/landing/designer-icon.svg" alt="primevue templates" />
+                            <img src="demo/images/landing/designer-icon.svg" alt="primevue templates" />
                             <div class="name">
                                 <b>Theme Designer</b>
                                 <span>Create Your Own</span>
@@ -25,26 +25,26 @@
                 <div class="p-2 flex flex-row md:flex-column">
                     <div class="hero-box w-10rem h-10rem md:w-12rem md:h-12rem animation flex align-items-center justify-content-center" @click="navigateTo('https://github.com/primefaces/primevue')">
                         <div class="flex flex-column align-items-center">
-                            <img src="/demo/images/landing/core-icon.svg" alt="primevue core" />
+                            <img src="demo/images/landing/core-icon.svg" alt="primevue core" />
                             <div class="name">
                                 <b>Open Source</b>
                                 <span>90+ UI Components</span>
                             </div>
                         </div>
                     </div>
-                    <nuxt-link to="/setup">
+                    <router-link to="/setup">
                         <div class="hero-box w-10rem h-10rem md:w-12rem md:h-12rem animation logo hidden md:flex my-4 align-items-center justify-content-center">
                             <div class="hero-box-inner text-center">
-                                <img src="/demo/images/landing/overview-icon.svg" alt="primevue main" />
+                                <img src="demo/images/landing/overview-icon.svg" alt="primevue main" />
                                 <div class="name">
                                     <b class="font-bold">NEXT-GEN VUE UI</b>
                                 </div>
                             </div>
                         </div>
-                    </nuxt-link>
+                    </router-link>
                     <div class="hero-box w-10rem h-10rem md:w-12rem md:h-12rem animation flex ml-4 md:ml-0 align-items-center justify-content-center" @click="navigateTo('https://www.primefaces.org/primeflex')">
                         <div class="flex flex-column align-items-center">
-                            <img src="/demo/images/landing/css-icon.svg" alt="primevue icons" />
+                            <img src="demo/images/landing/css-icon.svg" alt="primevue icons" />
                             <div class="name">
                                 <b>CSS Utilities</b>
                                 <span>PrimeFlex CSS</span>
@@ -55,24 +55,24 @@
                 <div class="p-2 flex flex-row md:flex-column">
                     <div class="hero-box w-10rem h-10rem md:w-12rem md:h-12rem animation flex align-items-center justify-content-center" @click="navigateTo('https://www.primefaces.org/primeblocks-vue')">
                         <div class="flex flex-column align-items-center">
-                            <img src="/demo/images/landing/blocks-icon.svg" alt="primevue templates" />
+                            <img src="demo/images/landing/blocks-icon.svg" alt="primevue templates" />
                             <div class="name">
                                 <b>Prime Blocks</b>
                                 <span>350+ UI Blocks</span>
                             </div>
                         </div>
                     </div>
-                    <nuxt-link to="/icons">
+                    <router-link to="/icons">
                         <div class="hero-box w-10rem h-10rem md:w-12rem md:h-12rem animation flex ml-4 md:ml-0 md:mt-4 align-items-center justify-content-center">
                             <div class="flex flex-column align-items-center">
-                                <img src="/demo/images/landing/icons-icon.svg" alt="primevue templates" />
+                                <img src="demo/images/landing/icons-icon.svg" alt="primevue templates" />
                                 <div class="name">
                                     <b>Icon Library</b>
                                     <span>200+ Icons</span>
                                 </div>
                             </div>
                         </div>
-                    </nuxt-link>
+                    </router-link>
                 </div>
             </div>
             <div class="hero-border-top hidden md:block"></div>
@@ -81,10 +81,10 @@
         </div>
 
         <section class="landing-getstarted flex flex-column md:flex-row align-items-center justify-content-center mt-8 z-1">
-            <nuxt-link to="/setup" class="linkbox active font-semibold py-3 px-4 ml-0 md:ml-6 fadeinleft animation-duration-2000 animation-ease-out">
+            <router-link to="/setup" class="linkbox active font-semibold py-3 px-4 ml-0 md:ml-6 fadeinleft animation-duration-2000 animation-ease-out">
                 Get Started
                 <i class="pi pi-arrow-right ml-3"></i>
-            </nuxt-link>
+            </router-link>
             <div class="box download-box font-medium p-3 px-4 mt-3 md:mt-0 md:ml-3 bg-transparent inline-flex align-items-center fadeinright animation-duration-2000 animation-ease-out">
                 <i class="download-icon pi pi-download mr-3"></i>
                 <span class="font-bold" :style="{ fontFamily: 'monaco' }">npm i primevue</span>
diff --git a/pages/landing/TemplateSection.vue b/pages/landing/TemplateSection.vue
index f367214bd..1bd6de7ef 100644
--- a/pages/landing/TemplateSection.vue
+++ b/pages/landing/TemplateSection.vue
@@ -3,37 +3,37 @@
         <div class="section-header">Templates</div>
         <p class="section-detail">Professionally designed highly customizable application templates to get started in style.</p>
         <div class="flex justify-content-center mt-4">
-            <nuxt-link to="https://www.primefaces.org/store" class="font-semibold p-3 border-round flex align-items-center linkbox active">
+            <a href="https://www.primefaces.org/store" class="font-semibold p-3 border-round flex align-items-center linkbox active">
                 <span>Learn More</span>
                 <i class="pi pi-arrow-right ml-2"></i>
-            </nuxt-link>
+            </a>
         </div>
         <section :class="['templates flex justify-content-center align-items-center flex-column mt-7', { 'templates-animation': setAnimation }]">
             <div class="flex">
                 <div class="template-block block-1 mr-2 flex justify-content-center align-items-center" :style="{ backgroundImage: imageBg('diamond') }">
-                    <nuxt-link class="templates-btn" target="_blank" to="https://www.primefaces.org/diamond-vue/">Diamond Preview</nuxt-link>
+                    <a class="templates-btn" target="_blank" href="https://www.primefaces.org/diamond-vue/">Diamond Preview</a>
                 </div>
                 <div class="template-block block-2 ml-2 flex justify-content-center align-items-center" :style="{ backgroundImage: imageBg('freya') }">
-                    <nuxt-link class="templates-btn" target="_blank" to="https://www.primefaces.org/freya-vue/">Freya Preview</nuxt-link>
+                    <a class="templates-btn" target="_blank" href="https://www.primefaces.org/freya-vue/">Freya Preview</a>
                 </div>
             </div>
             <div class="flex my-4">
                 <div class="template-block block-3 mr-2 flex justify-content-center align-items-center" :style="{ backgroundImage: imageBg('atlantis') }">
-                    <nuxt-link class="templates-btn" target="_blank" to="https://www.primefaces.org/atlantis-vue/">Atlantis Preview</nuxt-link>
+                    <a class="templates-btn" target="_blank" href="https://www.primefaces.org/atlantis-vue/">Atlantis Preview</a>
                 </div>
                 <div class="template-block block-middle border-none box-shadow-none mr-2 flex justify-content-center align-items-center flex-column">
                     <img class="img-1" :src="templateImg()" height="110" />
                 </div>
                 <div class="template-block block-4 ml-2 flex justify-content-center align-items-center" :style="{ backgroundImage: imageBg('apollo') }">
-                    <nuxt-link class="templates-btn" target="_blank" to="https://www.primefaces.org/apollo-vue/">Apollo Preview</nuxt-link>
+                    <a class="templates-btn" target="_blank" href="https://www.primefaces.org/apollo-vue/">Apollo Preview</a>
                 </div>
             </div>
             <div class="flex">
                 <div class="template-block block-5 mr-2 flex justify-content-center align-items-center" :style="{ backgroundImage: imageBg('serenity') }">
-                    <nuxt-link class="templates-btn" target="_blank" to="https://www.primefaces.org/serenity-vue/">Serenity Preview</nuxt-link>
+                    <a class="templates-btn" target="_blank" href="https://www.primefaces.org/serenity-vue/">Serenity Preview</a>
                 </div>
                 <div class="template-block block-6 ml-2 flex justify-content-center align-items-center" :style="{ backgroundImage: imageBg('ultima') }">
-                    <nuxt-link class="templates-btn" target="_blank" to="https://www.primefaces.org/ultima-vue/">Ultima Preview</nuxt-link>
+                    <a class="templates-btn" target="_blank" href="https://www.primefaces.org/ultima-vue/">Ultima Preview</a>
                 </div>
             </div>
             <div class="lines">
@@ -113,10 +113,10 @@ export default {
             const isDark = this.$appState.darkTheme;
             const url = template === 'templates-text' ? 'png' : 'jpeg';
 
-            return `url('/demo/images/landing/templates/${template}-${isDark ? 'dark' : 'light'}.${url}')`;
+            return `url('demo/images/landing/templates/${template}-${isDark ? 'dark' : 'light'}.${url}')`;
         },
         templateImg() {
-            return `/demo/images/landing/templates/templates-text-${this.$appState.darkTheme ? 'dark' : 'light'}.png`;
+            return `demo/images/landing/templates/templates-text-${this.$appState.darkTheme ? 'dark' : 'light'}.png`;
         }
     }
 };
diff --git a/pages/landing/ThemeSection.vue b/pages/landing/ThemeSection.vue
index 7daa1c83c..63b4a9573 100644
--- a/pages/landing/ThemeSection.vue
+++ b/pages/landing/ThemeSection.vue
@@ -6,18 +6,18 @@
             <button type="button" :class="['font-medium linkbox mr-3 mt-4', { active: theme && theme.startsWith('lara') }]" @click="changeTheme('lara', 'blue')">PrimeOne</button>
             <button type="button" :class="['font-medium linkbox mr-3 mt-4', { active: theme && theme.startsWith('md') }]" @click="changeTheme('md', 'indigo')">Material</button>
             <button type="button" :class="['font-medium linkbox mr-3 mt-4', { active: theme && theme.startsWith('bootstrap4') }]" @click="changeTheme('bootstrap4', 'blue')">Bootstrap</button>
-            <nuxt-link type="button" class="font-medium p-link linkbox mt-4" to="https://www.primefaces.org/designer-vue">more...</nuxt-link>
+            <a type="button" class="font-medium p-link linkbox mt-4" href="https://www.primefaces.org/designer-vue">more...</a>
         </div>
-        <div class="themes-main flex mt-7 justify-content-center pad-section" :style="{ backgroundImage: `url('/demo/images/landing/wave-${$appState.darkTheme ? 'dark-alt' : 'light-alt'}.svg')`, backgroundSize: 'cover' }">
+        <div class="themes-main flex mt-7 justify-content-center pad-section" :style="{ backgroundImage: `url('demo/images/landing/wave-${$appState.darkTheme ? 'dark-alt' : 'light-alt'}.svg')`, backgroundSize: 'cover' }">
             <div class="box overflow-hidden z-1 p-5 table-container">
                 <DataTable
+                    v-model:selection="selectedCustomers"
+                    v-model:filters="filters"
                     :value="customers"
                     :paginator="true"
                     :rows="5"
                     dataKey="id"
                     :rowHover="true"
-                    v-model:selection="selectedCustomers"
-                    v-model:filters="filters"
                     filterDisplay="menu"
                     :loading="loading"
                     paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
@@ -50,7 +50,7 @@
                     </Column>
                     <Column header="Agent" sortable sortField="representative.name" style="min-width: 14rem">
                         <template #body="{ data }">
-                            <img :alt="data.representative.name" :src="'/demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
+                            <img :alt="data.representative.name" :src="'demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
                             <span class="image-text">{{ data.representative.name }}</span>
                         </template>
                     </Column>
@@ -126,6 +126,7 @@ export default {
     methods: {
         changeTheme(name, color) {
             let newTheme = name + '-' + (this.$appState.darkTheme ? 'dark' : 'light') + '-' + color;
+
             this.$emit('table-theme-change', newTheme);
         },
         formatDate(value) {
diff --git a/pages/landing/UsersSection.vue b/pages/landing/UsersSection.vue
index fddbe9ea8..ee6a4869e 100644
--- a/pages/landing/UsersSection.vue
+++ b/pages/landing/UsersSection.vue
@@ -71,7 +71,7 @@
 export default {
     methods: {
         imgSrc(brand) {
-            return `/demo/images/landing/whouses/${brand}-${this.colorScheme}.svg`;
+            return `demo/images/landing/whouses/${brand}-${this.colorScheme}.svg`;
         }
     },
     computed: {
diff --git a/pages/listbox/ListboxDoc.vue b/pages/listbox/ListboxDoc.vue
index 19885c1ca..ad12d2902 100755
--- a/pages/listbox/ListboxDoc.vue
+++ b/pages/listbox/ListboxDoc.vue
@@ -1,27 +1,26 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="ListboxDemo" :sources="sources" github="listbox/ListboxDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="ListboxDemo" :sources="sources" github="listbox/ListboxDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import Listbox from 'primevue/listbox';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/listbox/listbox.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p>Listbox requires a value to bind and a collection of arbitrary objects along with the <i>optionLabel</i> property to specify the label property of the option.</p>
-            <pre v-code><code>
+        <h5>Getting Started</h5>
+        <p>Listbox requires a value to bind and a collection of arbitrary objects along with the <i>optionLabel</i> property to specify the label property of the option.</p>
+        <pre v-code><code>
 &lt;Listbox v-model="selectedCity" :options="cities" optionLabel="name" /&gt;
 
 </code></pre>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 data() {
 	return {
 		selectedCity: null,
@@ -37,19 +36,19 @@ data() {
 
 </code></pre>
 
-            <h5>Selection</h5>
-            <p>
-                Listbox allows selection of either single or multiple items. In single case, model should be a single object reference whereas in multiple case should be an array. Multiple items can either be selected using metaKey or toggled
-                individually depending on the value of <i>metaKeySelection</i> property value which is true by default. On touch enabled devices metaKeySelection is turned off automatically.
-            </p>
-            <pre v-code><code>
+        <h5>Selection</h5>
+        <p>
+            Listbox allows selection of either single or multiple items. In single case, model should be a single object reference whereas in multiple case should be an array. Multiple items can either be selected using metaKey or toggled
+            individually depending on the value of <i>metaKeySelection</i> property value which is true by default. On touch enabled devices metaKeySelection is turned off automatically.
+        </p>
+        <pre v-code><code>
 &lt;Listbox v-model="selectedCity" :options="cities" optionLabel="name" :multiple="true"/&gt;
 
 </code></pre>
 
-            <h5>Grouping</h5>
-            <p>Options groups are specified with the <i>optionGroupLabel</i> and <i>optionGroupChildren</i> properties.</p>
-            <pre v-code.script><code>
+        <h5>Grouping</h5>
+        <p>Options groups are specified with the <i>optionGroupLabel</i> and <i>optionGroupChildren</i> properties.</p>
+        <pre v-code.script><code>
 export default {
     data() {
         return {
@@ -86,33 +85,33 @@ export default {
 }
 </code></pre>
 
-            <pre v-code><code><template v-pre>
+        <pre v-code><code><template v-pre>
 &lt;Listbox v-model="selectedGroupedCity" :options="groupedCities"
         optionLabel="label" optionGroupLabel="label" optionGroupChildren="items"&gt;
 &lt;/Listbox&gt;
 </template>
 </code></pre>
 
-            <h5>Filter</h5>
-            <p>
-                Filtering allows searching items in the list using an input field at the header. In order to use filtering, enable <i>filter</i> property. By default, optionLabel is used when searching and <i>filterFields</i> can be used to customize
-                the fields being utilized. Furthermore, <i>filterMatchMode</i> is available to define the search algorithm. Valid values are "contains" (default), "startsWith" and "endsWith".
-            </p>
-            <pre v-code><code>
+        <h5>Filter</h5>
+        <p>
+            Filtering allows searching items in the list using an input field at the header. In order to use filtering, enable <i>filter</i> property. By default, optionLabel is used when searching and <i>filterFields</i> can be used to customize the
+            fields being utilized. Furthermore, <i>filterMatchMode</i> is available to define the search algorithm. Valid values are "contains" (default), "startsWith" and "endsWith".
+        </p>
+        <pre v-code><code>
 &lt;Listbox v-model="selectedCity" :options="cities" optionLabel="name" :filter="true"/&gt;
 
 </code></pre>
 
-            <h5>Templating</h5>
-            <p>
-                Label of an option is used as the display text of an item by default, for custom content support define an <i>option</i> template that gets the option instance as a parameter. In addition <i>optiongroup</i>, <i>header</i>,
-                <i>footer</i>, <i>emptyfilter</i> and <i>empty</i> slots are provided for further customization.
-            </p>
-            <pre v-code><code><template v-pre>
+        <h5>Templating</h5>
+        <p>
+            Label of an option is used as the display text of an item by default, for custom content support define an <i>option</i> template that gets the option instance as a parameter. In addition <i>optiongroup</i>, <i>header</i>, <i>footer</i>,
+            <i>emptyfilter</i> and <i>empty</i> slots are provided for further customization.
+        </p>
+        <pre v-code><code><template v-pre>
 &lt;Listbox v-model="selectedCars" :options="cars" :multiple="true" :filter="true" optionLabel="brand" listStyle="max-height:250px" style="width:15em"&gt;
     &lt;template #option="slotProps"&gt;
 		&lt;div&gt;
-			&lt;img :alt="slotProps.option.brand" :src="'/demo/images/car/' + slotProps.option.brand + '.png'" /&gt;
+			&lt;img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" /&gt;
 			&lt;span&gt;{{slotProps.option.brand}}&lt;/span&gt;
 		&lt;/div&gt;
 	&lt;/template&gt;
@@ -120,347 +119,353 @@ export default {
 </template>
 </code></pre>
 
-            <h5>Properties</h5>
-            <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>modelValue</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Value of the component.</td>
-                        </tr>
-                        <tr>
-                            <td>options</td>
-                            <td>array</td>
-                            <td>null</td>
-                            <td>An array of selectitems to display as the available options.</td>
-                        </tr>
-                        <tr>
-                            <td>optionLabel</td>
-                            <td>string | function</td>
-                            <td>null</td>
-                            <td>Property name or getter function to use as the label of an option.</td>
-                        </tr>
-                        <tr>
-                            <td>optionValue</td>
-                            <td>string | function</td>
-                            <td>null</td>
-                            <td>Property name or getter function to use as the value of an option, defaults to the option itself when not defined.</td>
-                        </tr>
-                        <tr>
-                            <td>optionDisabled</td>
-                            <td>string | function</td>
-                            <td>null</td>
-                            <td>Property name or getter function to use as the disabled flag of an option, defaults to false when not defined.</td>
-                        </tr>
-                        <tr>
-                            <td>optionGroupLabel</td>
-                            <td>string | function</td>
-                            <td>null</td>
-                            <td>Property name or getter function to use as the label of an option group.</td>
-                        </tr>
-                        <tr>
-                            <td>optionGroupChildren</td>
-                            <td>string | function</td>
-                            <td>null</td>
-                            <td>Property name or getter function that refers to the children options of option group.</td>
-                        </tr>
-                        <tr>
-                            <td>listStyle</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Inline style of inner list element.</td>
-                        </tr>
-                        <tr>
-                            <td>disabled</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When specified, disables the component.</td>
-                        </tr>
-                        <tr>
-                            <td>dataKey</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>A property to uniquely identify an option.</td>
-                        </tr>
-                        <tr>
-                            <td>multiple</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When specified, allows selecting multiple values.</td>
-                        </tr>
-                        <tr>
-                            <td>metaKeySelection</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>
-                                Defines how multiple items can be selected, when true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item can be toggled individually. On touch enabled devices,
-                                metaKeySelection is turned off automatically.
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>filter</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When specified, displays a filter input at header.</td>
-                        </tr>
-                        <tr>
-                            <td>filterPlaceholder</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Placeholder text to show when filter input is empty.</td>
-                        </tr>
-                        <tr>
-                            <td>filterLocale</td>
-                            <td>string</td>
-                            <td>undefined</td>
-                            <td>Locale to use in filtering. The default locale is the host environment's current locale.</td>
-                        </tr>
-                        <tr>
-                            <td>filterMatchMode</td>
-                            <td>string</td>
-                            <td>contains</td>
-                            <td>Defines the filtering algorithm to use when searching the options. Valid values are "contains" (default), "startsWith" and "endsWith"</td>
-                        </tr>
-                        <tr>
-                            <td>filterFields</td>
-                            <td>array</td>
-                            <td>null</td>
-                            <td>Fields used when filtering the options, defaults to optionLabel.</td>
-                        </tr>
-                        <tr>
-                            <td>filterInputProps</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Uses to pass all properties of the HTMLInputElement to the filter input inside the component.</td>
-                        </tr>
-                        <tr>
-                            <td>virtualScrollerOptions</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Whether to use the virtualScroller feature. The properties of <nuxt-link to="/virtualscroller">VirtualScroller</nuxt-link> component can be used like an object in it.</td>
-                        </tr>
-                        <tr>
-                            <td>autoOptionFocus</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether to focus on the first visible or selected element.</td>
-                        </tr>
-                        <tr>
-                            <td>selectOnFocus</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When enabled, the focused option is selected.</td>
-                        </tr>
-                        <tr>
-                            <td>filterMessage</td>
-                            <td>string</td>
-                            <td>{0} results are available</td>
-                            <td>Text to be displayed in hidden accessible field when filtering returns any results. Defaults to value from PrimeVue locale configuration.</td>
-                        </tr>
-                        <tr>
-                            <td>selectionMessage</td>
-                            <td>string</td>
-                            <td>{0} items selected</td>
-                            <td>Text to be displayed in hidden accessible field when options are selected. Defaults to value from PrimeVue locale configuration.</td>
-                        </tr>
-                        <tr>
-                            <td>emptySelectionMessage</td>
-                            <td>string</td>
-                            <td>No selected item</td>
-                            <td>Text to be displayed in hidden accessible field when any option is not selected. Defaults to value from PrimeVue locale configuration.</td>
-                        </tr>
-                        <tr>
-                            <td>emptyFilterMessage</td>
-                            <td>string</td>
-                            <td>No results found</td>
-                            <td>Text to display when filtering does not return any results. Defaults to value from PrimeVue locale configuration.</td>
-                        </tr>
-                        <tr>
-                            <td>emptyMessage</td>
-                            <td>string</td>
-                            <td>No results found</td>
-                            <td>Text to display when there are no options available. Defaults to value from PrimeVue locale configuration.</td>
-                        </tr>
-                        <tr>
-                            <td>tabindex</td>
-                            <td>number</td>
-                            <td>0</td>
-                            <td>Index of the element in tabbing order.</td>
-                        </tr>
-                        <tr>
-                            <td>aria-label</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Defines a string value that labels an interactive element.</td>
-                        </tr>
-                        <tr>
-                            <td>aria-labelledby</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>modelValue</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Value of the component.</td>
+                    </tr>
+                    <tr>
+                        <td>options</td>
+                        <td>array</td>
+                        <td>null</td>
+                        <td>An array of selectitems to display as the available options.</td>
+                    </tr>
+                    <tr>
+                        <td>optionLabel</td>
+                        <td>string | function</td>
+                        <td>null</td>
+                        <td>Property name or getter function to use as the label of an option.</td>
+                    </tr>
+                    <tr>
+                        <td>optionValue</td>
+                        <td>string | function</td>
+                        <td>null</td>
+                        <td>Property name or getter function to use as the value of an option, defaults to the option itself when not defined.</td>
+                    </tr>
+                    <tr>
+                        <td>optionDisabled</td>
+                        <td>string | function</td>
+                        <td>null</td>
+                        <td>Property name or getter function to use as the disabled flag of an option, defaults to false when not defined.</td>
+                    </tr>
+                    <tr>
+                        <td>optionGroupLabel</td>
+                        <td>string | function</td>
+                        <td>null</td>
+                        <td>Property name or getter function to use as the label of an option group.</td>
+                    </tr>
+                    <tr>
+                        <td>optionGroupChildren</td>
+                        <td>string | function</td>
+                        <td>null</td>
+                        <td>Property name or getter function that refers to the children options of option group.</td>
+                    </tr>
+                    <tr>
+                        <td>listStyle</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Inline style of inner list element.</td>
+                    </tr>
+                    <tr>
+                        <td>disabled</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When specified, disables the component.</td>
+                    </tr>
+                    <tr>
+                        <td>dataKey</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>A property to uniquely identify an option.</td>
+                    </tr>
+                    <tr>
+                        <td>multiple</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When specified, allows selecting multiple values.</td>
+                    </tr>
+                    <tr>
+                        <td>metaKeySelection</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>
+                            Defines how multiple items can be selected, when true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item can be toggled individually. On touch enabled devices,
+                            metaKeySelection is turned off automatically.
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>filter</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When specified, displays a filter input at header.</td>
+                    </tr>
+                    <tr>
+                        <td>filterPlaceholder</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Placeholder text to show when filter input is empty.</td>
+                    </tr>
+                    <tr>
+                        <td>filterLocale</td>
+                        <td>string</td>
+                        <td>undefined</td>
+                        <td>Locale to use in filtering. The default locale is the host environment's current locale.</td>
+                    </tr>
+                    <tr>
+                        <td>filterMatchMode</td>
+                        <td>string</td>
+                        <td>contains</td>
+                        <td>Defines the filtering algorithm to use when searching the options. Valid values are "contains" (default), "startsWith" and "endsWith"</td>
+                    </tr>
+                    <tr>
+                        <td>filterFields</td>
+                        <td>array</td>
+                        <td>null</td>
+                        <td>Fields used when filtering the options, defaults to optionLabel.</td>
+                    </tr>
+                    <tr>
+                        <td>filterInputProps</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Uses to pass all properties of the HTMLInputElement to the filter input inside the component.</td>
+                    </tr>
+                    <tr>
+                        <td>virtualScrollerOptions</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Whether to use the virtualScroller feature. The properties of <router-link to="/virtualscroller">VirtualScroller</router-link> component can be used like an object in it.</td>
+                    </tr>
+                    <tr>
+                        <td>autoOptionFocus</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Whether to focus on the first visible or selected element.</td>
+                    </tr>
+                    <tr>
+                        <td>selectOnFocus</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When enabled, the focused option is selected.</td>
+                    </tr>
+                    <tr>
+                        <td>filterMessage</td>
+                        <td>string</td>
+                        <td>{0} results are available</td>
+                        <td>Text to be displayed in hidden accessible field when filtering returns any results. Defaults to value from PrimeVue locale configuration.</td>
+                    </tr>
+                    <tr>
+                        <td>selectionMessage</td>
+                        <td>string</td>
+                        <td>{0} items selected</td>
+                        <td>Text to be displayed in hidden accessible field when options are selected. Defaults to value from PrimeVue locale configuration.</td>
+                    </tr>
+                    <tr>
+                        <td>emptySelectionMessage</td>
+                        <td>string</td>
+                        <td>No selected item</td>
+                        <td>Text to be displayed in hidden accessible field when any option is not selected. Defaults to value from PrimeVue locale configuration.</td>
+                    </tr>
+                    <tr>
+                        <td>emptyFilterMessage</td>
+                        <td>string</td>
+                        <td>No results found</td>
+                        <td>Text to display when filtering does not return any results. Defaults to value from PrimeVue locale configuration.</td>
+                    </tr>
+                    <tr>
+                        <td>emptyMessage</td>
+                        <td>string</td>
+                        <td>No results found</td>
+                        <td>Text to display when there are no options available. Defaults to value from PrimeVue locale configuration.</td>
+                    </tr>
+                    <tr>
+                        <td>tabindex</td>
+                        <td>number</td>
+                        <td>0</td>
+                        <td>Index of the element in tabbing order.</td>
+                    </tr>
+                    <tr>
+                        <td>filterIcon</td>
+                        <td>string</td>
+                        <td>pi pi-search</td>
+                        <td>Icon to display in filter input</td>
+                    </tr>
+                    <tr>
+                        <td>aria-label</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Defines a string value that labels an interactive element.</td>
+                    </tr>
+                    <tr>
+                        <td>aria-labelledby</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Events</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>change</td>
-                            <td>
-                                event.originalEvent: Original event <br />
-                                event.value: Selected option value
-                            </td>
-                            <td>Callback to invoke on value change.</td>
-                        </tr>
-                        <tr>
-                            <td>focus</td>
-                            <td>event</td>
-                            <td>Callback to invoke when the component receives focus.</td>
-                        </tr>
-                        <tr>
-                            <td>blur</td>
-                            <td>event</td>
-                            <td>Callback to invoke when the component loses focus.</td>
-                        </tr>
-                        <tr>
-                            <td>filter</td>
-                            <td>
-                                event.originalEvent: Original event <br />
-                                event.value: Filter value
-                            </td>
-                            <td>Callback to invoke on filter input.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Events</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>change</td>
+                        <td>
+                            event.originalEvent: Original event <br />
+                            event.value: Selected option value
+                        </td>
+                        <td>Callback to invoke on value change.</td>
+                    </tr>
+                    <tr>
+                        <td>focus</td>
+                        <td>event</td>
+                        <td>Callback to invoke when the component receives focus.</td>
+                    </tr>
+                    <tr>
+                        <td>blur</td>
+                        <td>event</td>
+                        <td>Callback to invoke when the component loses focus.</td>
+                    </tr>
+                    <tr>
+                        <td>filter</td>
+                        <td>
+                            event.originalEvent: Original event <br />
+                            event.value: Filter value
+                        </td>
+                        <td>Callback to invoke on filter input.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Slots</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>option</td>
-                            <td>
-                                option: Option instance <br />
-                                index: Index of the option
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>optiongroup</td>
-                            <td>
-                                option: OptionGroup instance <br />
-                                index: Index of the option group
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>header</td>
-                            <td>
-                                value: Value of the component <br />
-                                options: Displayed options
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>footer</td>
-                            <td>
-                                value: Value of the component <br />
-                                options: Displayed options
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>emptyfilter</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>empty</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>content</td>
-                            <td>
-                                items: An array of objects to display for virtualscroller<br />
-                                styleClass: Style class of the component<br />
-                                contentRef: Referance of the content<br />
-                                getItemOptions: Options of the items
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>loader</td>
-                            <td>options: Options of the loader items for virtualscroller</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Slots</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>option</td>
+                        <td>
+                            option: Option instance <br />
+                            index: Index of the option
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>optiongroup</td>
+                        <td>
+                            option: OptionGroup instance <br />
+                            index: Index of the option group
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>header</td>
+                        <td>
+                            value: Value of the component <br />
+                            options: Displayed options
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>footer</td>
+                        <td>
+                            value: Value of the component <br />
+                            options: Displayed options
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>emptyfilter</td>
+                        <td>-</td>
+                    </tr>
+                    <tr>
+                        <td>empty</td>
+                        <td>-</td>
+                    </tr>
+                    <tr>
+                        <td>content</td>
+                        <td>
+                            items: An array of objects to display for virtualscroller<br />
+                            styleClass: Style class of the component<br />
+                            contentRef: Referance of the content<br />
+                            getItemOptions: Options of the items
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>loader</td>
+                        <td>options: Options of the loader items for virtualscroller</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-listbox</td>
-                            <td>Main container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-listbox-header</td>
-                            <td>Header element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-listbox-list-wrapper</td>
-                            <td>Container of list element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-listbox-list</td>
-                            <td>List element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-listbox-item</td>
-                            <td>An item in the list element.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-listbox</td>
+                        <td>Main container element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-listbox-header</td>
+                        <td>Header element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-listbox-list-wrapper</td>
+                        <td>Container of list element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-listbox-list</td>
+                        <td>List element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-listbox-item</td>
+                        <td>An item in the list element.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Accessibility</h5>
-            <h6>Screen Reader</h6>
-            <p>
-                Value to describe the component can be provided <i>aria-labelledby</i> or <i>aria-label</i> props. The list element has a <i>listbox</i> role with the <i>aria-multiselectable</i> attribute that sets to true when multiple selection is
-                enabled. Each list item has an <i>option</i> role with <i>aria-selected</i> and <i>aria-disabled</i> as their attributes.
-            </p>
-            <p>If filtering is enabled, <i>filterInputProps</i> can be defined to give <i>aria-*</i> props to the input element. Alternatively <i>filterPlaceholder</i> is usually utilized by the screen readers as well.</p>
-            <pre v-code><code>
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>
+            Value to describe the component can be provided <i>aria-labelledby</i> or <i>aria-label</i> props. The list element has a <i>listbox</i> role with the <i>aria-multiselectable</i> attribute that sets to true when multiple selection is
+            enabled. Each list item has an <i>option</i> role with <i>aria-selected</i> and <i>aria-disabled</i> as their attributes.
+        </p>
+        <p>If filtering is enabled, <i>filterInputProps</i> can be defined to give <i>aria-*</i> props to the input element. Alternatively <i>filterPlaceholder</i> is usually utilized by the screen readers as well.</p>
+        <pre v-code><code>
 &lt;span id="lb"&gt;Options&lt;/span&gt;
 &lt;ListBox aria-labelledby="lb" /&gt;
 
@@ -468,138 +473,137 @@ export default {
 
 </code></pre>
 
-            <h6>Keyboard Support</h6>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Key</th>
-                            <th>Function</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td><i>tab</i></td>
-                            <td>Moves focus to the first selected option, if there is none then first option receives the focus.</td>
-                        </tr>
-                        <tr>
-                            <td><i>up arrow</i></td>
-                            <td>Moves focus to the previous option.</td>
-                        </tr>
-                        <tr>
-                            <td><i>down arrow</i></td>
-                            <td>Moves focus to the next option.</td>
-                        </tr>
-                        <tr>
-                            <td><i>enter</i></td>
-                            <td>Toggles the selected state of the focused option.</td>
-                        </tr>
-                        <tr>
-                            <td><i>space</i></td>
-                            <td>Toggles the selected state of the focused option.</td>
-                        </tr>
-                        <tr>
-                            <td><i>home</i></td>
-                            <td>Moves focus to the first option.</td>
-                        </tr>
-                        <tr>
-                            <td><i>end</i></td>
-                            <td>Moves focus to the last option.</td>
-                        </tr>
-                        <tr>
-                            <td><i>shift</i> + <i>down arrow</i></td>
-                            <td>Moves focus to the next option and toggles the selection state.</td>
-                        </tr>
-                        <tr>
-                            <td><i>shift</i> + <i>up arrow</i></td>
-                            <td>Moves focus to the previous option and toggles the selection state.</td>
-                        </tr>
-                        <tr>
-                            <td><i>shift</i> + <i>space</i></td>
-                            <td>Selects the items between the most recently selected option and the focused option.</td>
-                        </tr>
-                        <tr>
-                            <td><i>control</i> + <i>shift</i> + <i>home</i></td>
-                            <td>Selects the focused options and all the options up to the first one.</td>
-                        </tr>
-                        <tr>
-                            <td><i>control</i> + <i>shift</i> + <i>end</i></td>
-                            <td>Selects the focused options and all the options down to the last one.</td>
-                        </tr>
-                        <tr>
-                            <td><i>control</i> + <i>a</i></td>
-                            <td>Selects all options.</td>
-                        </tr>
-                        <tr>
-                            <td><i>pageUp</i></td>
-                            <td>Jumps visual focus to first option.</td>
-                        </tr>
-                        <tr>
-                            <td><i>pageDown</i></td>
-                            <td>Jumps visual focus to last option.</td>
-                        </tr>
-                        <tr>
-                            <td><i>any printable character</i></td>
-                            <td>Moves focus to the option whose label starts with the characters being typed.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h6>Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>tab</i></td>
+                        <td>Moves focus to the first selected option, if there is none then first option receives the focus.</td>
+                    </tr>
+                    <tr>
+                        <td><i>up arrow</i></td>
+                        <td>Moves focus to the previous option.</td>
+                    </tr>
+                    <tr>
+                        <td><i>down arrow</i></td>
+                        <td>Moves focus to the next option.</td>
+                    </tr>
+                    <tr>
+                        <td><i>enter</i></td>
+                        <td>Toggles the selected state of the focused option.</td>
+                    </tr>
+                    <tr>
+                        <td><i>space</i></td>
+                        <td>Toggles the selected state of the focused option.</td>
+                    </tr>
+                    <tr>
+                        <td><i>home</i></td>
+                        <td>Moves focus to the first option.</td>
+                    </tr>
+                    <tr>
+                        <td><i>end</i></td>
+                        <td>Moves focus to the last option.</td>
+                    </tr>
+                    <tr>
+                        <td><i>shift</i> + <i>down arrow</i></td>
+                        <td>Moves focus to the next option and toggles the selection state.</td>
+                    </tr>
+                    <tr>
+                        <td><i>shift</i> + <i>up arrow</i></td>
+                        <td>Moves focus to the previous option and toggles the selection state.</td>
+                    </tr>
+                    <tr>
+                        <td><i>shift</i> + <i>space</i></td>
+                        <td>Selects the items between the most recently selected option and the focused option.</td>
+                    </tr>
+                    <tr>
+                        <td><i>control</i> + <i>shift</i> + <i>home</i></td>
+                        <td>Selects the focused options and all the options up to the first one.</td>
+                    </tr>
+                    <tr>
+                        <td><i>control</i> + <i>shift</i> + <i>end</i></td>
+                        <td>Selects the focused options and all the options down to the last one.</td>
+                    </tr>
+                    <tr>
+                        <td><i>control</i> + <i>a</i></td>
+                        <td>Selects all options.</td>
+                    </tr>
+                    <tr>
+                        <td><i>pageUp</i></td>
+                        <td>Jumps visual focus to first option.</td>
+                    </tr>
+                    <tr>
+                        <td><i>pageDown</i></td>
+                        <td>Jumps visual focus to last option.</td>
+                    </tr>
+                    <tr>
+                        <td><i>any printable character</i></td>
+                        <td>Moves focus to the option whose label starts with the characters being typed.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h6>Filter Input Keyboard Support</h6>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Key</th>
-                            <th>Function</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td><i>down arrow</i></td>
-                            <td>Moves focus to the next option, if there is none then visual focus does not change.</td>
-                        </tr>
-                        <tr>
-                            <td><i>up arrow</i></td>
-                            <td>Moves focus to the previous option, if there is none then visual focus does not change.</td>
-                        </tr>
-                        <tr>
-                            <td><i>left arrow</i></td>
-                            <td>Removes the visual focus from the current option and moves input cursor to one character left.</td>
-                        </tr>
-                        <tr>
-                            <td><i>right arrow</i></td>
-                            <td>Removes the visual focus from the current option and moves input cursor to one character right.</td>
-                        </tr>
-                        <tr>
-                            <td><i>home</i></td>
-                            <td>Moves input cursor at the end, if not then moves focus to the first option.</td>
-                        </tr>
-                        <tr>
-                            <td><i>end</i></td>
-                            <td>Moves input cursor at the beginning, if not then moves focus to the last option.</td>
-                        </tr>
-                        <tr>
-                            <td><i>enter</i></td>
-                            <td>Closes the popup and moves focus to the multiselect element.</td>
-                        </tr>
-                        <tr>
-                            <td><i>escape</i></td>
-                            <td>Closes the popup and moves focus to the multiselect element.</td>
-                        </tr>
-                        <tr>
-                            <td><i>tab</i></td>
-                            <td>Moves focus to the next focusable element in the component. If there is none, moves focus to next element in page.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h6>Filter Input Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>down arrow</i></td>
+                        <td>Moves focus to the next option, if there is none then visual focus does not change.</td>
+                    </tr>
+                    <tr>
+                        <td><i>up arrow</i></td>
+                        <td>Moves focus to the previous option, if there is none then visual focus does not change.</td>
+                    </tr>
+                    <tr>
+                        <td><i>left arrow</i></td>
+                        <td>Removes the visual focus from the current option and moves input cursor to one character left.</td>
+                    </tr>
+                    <tr>
+                        <td><i>right arrow</i></td>
+                        <td>Removes the visual focus from the current option and moves input cursor to one character right.</td>
+                    </tr>
+                    <tr>
+                        <td><i>home</i></td>
+                        <td>Moves input cursor at the end, if not then moves focus to the first option.</td>
+                    </tr>
+                    <tr>
+                        <td><i>end</i></td>
+                        <td>Moves input cursor at the beginning, if not then moves focus to the last option.</td>
+                    </tr>
+                    <tr>
+                        <td><i>enter</i></td>
+                        <td>Closes the popup and moves focus to the multiselect element.</td>
+                    </tr>
+                    <tr>
+                        <td><i>escape</i></td>
+                        <td>Closes the popup and moves focus to the multiselect element.</td>
+                    </tr>
+                    <tr>
+                        <td><i>tab</i></td>
+                        <td>Moves focus to the next focusable element in the component. If there is none, moves focus to next element in page.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc>
-    </ClientOnly>
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
diff --git a/pages/liveeditor/LiveEditor.vue b/pages/liveeditor/LiveEditor.vue
index f5821ead7..7f60abadb 100644
--- a/pages/liveeditor/LiveEditor.vue
+++ b/pages/liveeditor/LiveEditor.vue
@@ -1,44 +1,16 @@
 <template>
-    <div>
-        <span v-if="showEditor" class="flex justify-content-end">
-            <SplitButton :model="items" label="Edit in CodeSandbox" class="liveEditorSplitButton" @click="openDefaultCSB" v-show="false" />
-        </span>
-    </div>
+    <span v-if="showEditor" class="flex justify-content-end">
+        <SplitButton v-show="false" :model="items" label="Edit in CodeSandbox" class="liveEditorSplitButton" @click="openDefaultCSB" />
+    </span>
 </template>
 
 <script>
 import EventBus from '@/layouts/AppEventBus';
-import { services, data } from './LiveEditorData';
-import packageJson from '@/package.json';
+import { data, services } from './LiveEditorData';
+
 const sourceTypes = ['options-api', 'composition-api', 'browser-source'];
 
 export default {
-    data() {
-        return {
-            sandbox_id: null,
-            showCodeHighlight: false,
-            items: [
-                {
-                    label: 'Options API',
-                    command: () => {
-                        this.postSandboxParameters('options-api');
-                    }
-                },
-                {
-                    label: 'Composition API',
-                    command: () => {
-                        this.postSandboxParameters('composition-api');
-                    }
-                },
-                {
-                    label: 'Browser Source',
-                    command: () => {
-                        this.postSandboxParameters('browser-source');
-                    }
-                }
-            ]
-        };
-    },
     props: {
         name: {
             type: String,
@@ -73,11 +45,38 @@ export default {
             default: null
         }
     },
+    data() {
+        return {
+            sandbox_id: null,
+            showCodeHighlight: false,
+            items: [
+                {
+                    label: 'Options API',
+                    command: () => {
+                        this.postSandboxParameters('options-api');
+                    }
+                },
+                {
+                    label: 'Composition API',
+                    command: () => {
+                        this.postSandboxParameters('composition-api');
+                    }
+                },
+                {
+                    label: 'Browser Source',
+                    command: () => {
+                        this.postSandboxParameters('browser-source');
+                    }
+                }
+            ]
+        };
+    },
     runDemoListener: null,
     mounted() {
         this.runDemoListener = (type) => {
             this.postSandboxParameters(type);
         };
+
         EventBus.on('run-demo', this.runDemoListener);
     },
     beforeUnmount() {
@@ -112,7 +111,7 @@ export default {
             let extIndexCSS = extFiles['index.css'] || '';
             delete extFiles['index.css'];
 
-            const dependencies = packageJson ? packageJson.devDependencies : {};
+            const dependencies = require('../../../package.json') ? require('../../../package.json').devDependencies : {};
 
             let defaultCss = {
                 content: `html {
@@ -339,20 +338,21 @@ export default {
                             main: `src/demo/${nameWithExt}`,
                             dependencies: {
                                 ...extDependencies,
-                                vue: '3.2.31',
-                                primevue: '^3.16.2',
+                                vue: dependencies['vue'],
+                                primevue: '^3.21.0',
                                 primeflex: dependencies['primeflex'],
                                 primeicons: dependencies['primeicons'],
-                                '@babel/cli': '^7.4.4',
-                                'core-js': '^3.6.5',
-                                'vue-router': '^4.0.0-0'
+                                '@babel/cli': dependencies['@babel/cli'],
+                                'core-js': dependencies['core-js'],
+                                'vue-router': dependencies['vue-router']
                             },
                             devDependencies: {
-                                '@vue/cli-plugin-babel': '~4.5.0',
-                                '@vue/cli-plugin-eslint': '~4.5.0',
-                                '@vue/cli-service': '~4.5.0',
-                                eslint: '^6.0.0',
-                                'eslint-plugin-vue': '^7.0.0'
+                                '@vue/cli-plugin-babel': dependencies['@vue/cli-plugin-babel'],
+                                '@vue/cli-plugin-eslint': dependencies['@vue/cli-plugin-eslint'],
+                                '@vue/cli-service': dependencies['@vue/cli-service'],
+                                '@vue/compiler-sfc': dependencies['@vue/compiler-sfc'],
+                                eslint: dependencies['eslint'],
+                                'eslint-plugin-vue': dependencies['eslint-plugin-vue']
                             }
                         }
                     },
@@ -523,8 +523,7 @@ export const router = createRouter({
                 }
 
                 _files['src/main.js'] = {
-                    content: `
-import "primeflex/primeflex.css";
+                    content: `import "primeflex/primeflex.css";
 import "primevue/resources/themes/lara-light-blue/theme.css";
 import "primevue/resources/primevue.min.css";
 import "primeicons/primeicons.css";
@@ -570,6 +569,7 @@ import Dropdown from 'primevue/dropdown';
 import DynamicDialog from 'primevue/dynamicdialog';
 import Fieldset from 'primevue/fieldset';
 import FileUpload from 'primevue/fileupload';
+import FocusTrap from 'primevue/focustrap';
 import Galleria from 'primevue/galleria';
 import Image from 'primevue/image';
 import InlineMessage from 'primevue/inlinemessage';
@@ -643,6 +643,7 @@ app.directive('tooltip', Tooltip);
 app.directive('badge', BadgeDirective);
 app.directive('ripple', Ripple);
 app.directive('styleclass', StyleClass);
+app.directive('focustrap', FocusTrap);
 
 app.component('Accordion', Accordion);
 app.component('AccordionTab', AccordionTab);
diff --git a/pages/liveeditor/LiveEditorData.js b/pages/liveeditor/LiveEditorData.js
index 7409b34d1..46b42b2ca 100644
--- a/pages/liveeditor/LiveEditorData.js
+++ b/pages/liveeditor/LiveEditorData.js
@@ -2,5751 +2,5751 @@ const services = {
     CountryService: `
 export default class CountryService {
 
-    getCountries() {
-        return fetch('demo/data/countries.json').then(res => res.json())
-            .then(d => d.data);
-    }
+   getCountries() {
+       return fetch('demo/data/countries.json').then(res => res.json())
+           .then(d => d.data);
+   }
 }
-    `,
+   `,
     CustomerService: `
 export default class CustomerService {
 
-    getCustomersSmall() {
-        return fetch('demo/data/customers-small.json').then(res => res.json())
-                .then(d => d.data);
-    }
+   getCustomersSmall() {
+       return fetch('demo/data/customers-small.json').then(res => res.json())
+               .then(d => d.data);
+   }
 
-    getCustomersMedium() {
-        return fetch('demo/data/customers-medium.json').then(res => res.json())
-                .then(d => d.data);
-    }
+   getCustomersMedium() {
+       return fetch('demo/data/customers-medium.json').then(res => res.json())
+               .then(d => d.data);
+   }
 
-    getCustomersLarge() {
-        return fetch('demo/data/customers-large.json').then(res => res.json())
-                .then(d => d.data);
-    }
+   getCustomersLarge() {
+       return fetch('demo/data/customers-large.json').then(res => res.json())
+               .then(d => d.data);
+   }
 
-    getCustomersXLarge() {
-        return fetch('demo/data/customers-xlarge.json').then(res => res.json())
-                .then(d => d.data);
-    }
+   getCustomersXLarge() {
+       return fetch('demo/data/customers-xlarge.json').then(res => res.json())
+               .then(d => d.data);
+   }
 
-    getCustomers(params) {
-        const queryParams = params ? Object.keys(params).map(k => encodeURIComponent(k) + '=' + encodeURIComponent(params[k])).join('&') : '';
-        return fetch('https://www.primefaces.org/data/customers?' + queryParams).then(res => res.json())
-    }
+   getCustomers(params) {
+       const queryParams = params ? Object.keys(params).map(k => encodeURIComponent(k) + '=' + encodeURIComponent(params[k])).join('&') : '';
+       return fetch('https://www.primefaces.org/data/customers?' + queryParams).then(res => res.json())
+   }
 }
-    `,
+   `,
     EventService: `
 export default class EventService {
 
-    getEvents() {
-        return fetch('demo/data/events.json').then(res => res.json())
-                .then(d => d.data);
-    }
+   getEvents() {
+       return fetch('demo/data/events.json').then(res => res.json())
+               .then(d => d.data);
+   }
 }
-    `,
+   `,
     NodeService: `
 export default class NodeService {
 
-    getTreeTableNodes() {
-        return fetch('demo/data/treetablenodes.json').then(res => res.json())
-                .then(d => d.root);
-    }
+   getTreeTableNodes() {
+       return fetch('demo/data/treetablenodes.json').then(res => res.json())
+               .then(d => d.root);
+   }
 
-    getTreeNodes() {
-        return fetch('demo/data/treenodes.json').then(res => res.json())
-                .then(d => d.root);
-    }
+   getTreeNodes() {
+       return fetch('demo/data/treenodes.json').then(res => res.json())
+               .then(d => d.root);
+   }
 }
-    `,
+   `,
     PhotoService: `
 export default class PhotoService {
 
-    getImages() {
-        return fetch('demo/data/photos.json').then(res => res.json())
-                .then(d => d.data);
-    }
+   getImages() {
+       return fetch('demo/data/photos.json').then(res => res.json())
+               .then(d => d.data);
+   }
 }
 `,
     ProductService: `
 export default class ProductService {
 
-    getProductsSmall() {
-		return fetch('demo/data/products-small.json').then(res => res.json()).then(d => d.data);
-	}
+   getProductsSmall() {
+     return fetch('demo/data/products-small.json').then(res => res.json()).then(d => d.data);
+  }
 
-	getProducts() {
-		return fetch('demo/data/products.json').then(res => res.json()).then(d => d.data);
-    }
+  getProducts() {
+     return fetch('demo/data/products.json').then(res => res.json()).then(d => d.data);
+   }
 
-    getProductsWithOrdersSmall() {
-		return fetch('demo/data/products-orders-small.json').then(res => res.json()).then(d => d.data);
-	}
+   getProductsWithOrdersSmall() {
+     return fetch('demo/data/products-orders-small.json').then(res => res.json()).then(d => d.data);
+  }
 }
 
-    `,
+   `,
     CarService: `
 export default class CarService {
 
-    brands = ['Vapid', 'Carson', 'Kitano', 'Dabver', 'Ibex', 'Morello', 'Akira', 'Titan', 'Dover', 'Norma'];
+   brands = ['Vapid', 'Carson', 'Kitano', 'Dabver', 'Ibex', 'Morello', 'Akira', 'Titan', 'Dover', 'Norma'];
 
-    colors = ['Black', 'White', 'Red', 'Blue', 'Silver', 'Green', 'Yellow'];
+   colors = ['Black', 'White', 'Red', 'Blue', 'Silver', 'Green', 'Yellow'];
 
-    generateCar(id) {
-        return {
-            id,
-            vin: this.generateVin(),
-            brand: this.generateBrand(),
-            color: this.generateColor(),
-            year: this.generateYear()
-        }
-    }
+   generateCar(id) {
+       return {
+           id,
+           vin: this.generateVin(),
+           brand: this.generateBrand(),
+           color: this.generateColor(),
+           year: this.generateYear()
+       }
+   }
 
-    generateVin() {
-        let text = "";
-        let possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+   generateVin() {
+       let text = "";
+       let possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
 
-        for (let i = 0; i < 5; i++) {
-            text += possible.charAt(Math.floor(Math.random() * possible.length));
-        }
+       for (let i = 0; i < 5; i++) {
+           text += possible.charAt(Math.floor(Math.random() * possible.length));
+       }
 
-        return text;
-    }
+       return text;
+   }
 
-    generateBrand() {
-        return this.brands[Math.floor(Math.random() * Math.floor(10))];
-    }
+   generateBrand() {
+       return this.brands[Math.floor(Math.random() * Math.floor(10))];
+   }
 
-    generateColor() {
-        return this.colors[Math.floor(Math.random() * Math.floor(7))];
-    }
+   generateColor() {
+       return this.colors[Math.floor(Math.random() * Math.floor(7))];
+   }
 
-    generateYear() {
-        return 2000 + Math.floor(Math.random() * Math.floor(19));
-    }
+   generateYear() {
+       return 2000 + Math.floor(Math.random() * Math.floor(19));
+   }
 }
 
-    `
+   `
 };
 
 const data = {
     countries: `
 {
-    "data": [
-        {"name": "Afghanistan", "code": "AF"},
-        {"name": "Åland Islands", "code": "AX"},
-        {"name": "Albania", "code": "AL"},
-        {"name": "Algeria", "code": "DZ"},
-        {"name": "American Samoa", "code": "AS"},
-        {"name": "Andorra", "code": "AD"},
-        {"name": "Angola", "code": "AO"},
-        {"name": "Anguilla", "code": "AI"},
-        {"name": "Antarctica", "code": "AQ"},
-        {"name": "Antigua and Barbuda", "code": "AG"},
-        {"name": "Argentina", "code": "AR"},
-        {"name": "Armenia", "code": "AM"},
-        {"name": "Aruba", "code": "AW"},
-        {"name": "Australia", "code": "AU"},
-        {"name": "Austria", "code": "AT"},
-        {"name": "Azerbaijan", "code": "AZ"},
-        {"name": "Bahamas", "code": "BS"},
-        {"name": "Bahrain", "code": "BH"},
-        {"name": "Bangladesh", "code": "BD"},
-        {"name": "Barbados", "code": "BB"},
-        {"name": "Belarus", "code": "BY"},
-        {"name": "Belgium", "code": "BE"},
-        {"name": "Belize", "code": "BZ"},
-        {"name": "Benin", "code": "BJ"},
-        {"name": "Bermuda", "code": "BM"},
-        {"name": "Bhutan", "code": "BT"},
-        {"name": "Bolivia", "code": "BO"},
-        {"name": "Bosnia and Herzegovina", "code": "BA"},
-        {"name": "Botswana", "code": "BW"},
-        {"name": "Bouvet Island", "code": "BV"},
-        {"name": "Brazil", "code": "BR"},
-        {"name": "British Indian Ocean Territory", "code": "IO"},
-        {"name": "Brunei Darussalam", "code": "BN"},
-        {"name": "Bulgaria", "code": "BG"},
-        {"name": "Burkina Faso", "code": "BF"},
-        {"name": "Burundi", "code": "BI"},
-        {"name": "Cambodia", "code": "KH"},
-        {"name": "Cameroon", "code": "CM"},
-        {"name": "Canada", "code": "CA"},
-        {"name": "Cape Verde", "code": "CV"},
-        {"name": "Cayman Islands", "code": "KY"},
-        {"name": "Central African Republic", "code": "CF"},
-        {"name": "Chad", "code": "TD"},
-        {"name": "Chile", "code": "CL"},
-        {"name": "China", "code": "CN"},
-        {"name": "Christmas Island", "code": "CX"},
-        {"name": "Cocos (Keeling) Islands", "code": "CC"},
-        {"name": "Colombia", "code": "CO"},
-        {"name": "Comoros", "code": "KM"},
-        {"name": "Congo", "code": "CG"},
-        {"name": "Congo, The Democratic Republic of the", "code": "CD"},
-        {"name": "Cook Islands", "code": "CK"},
-        {"name": "Costa Rica", "code": "CR"},
-        {"name": "Cote D\\"Ivoire", "code": "CI"},
-        {"name": "Croatia", "code": "HR"},
-        {"name": "Cuba", "code": "CU"},
-        {"name": "Cyprus", "code": "CY"},
-        {"name": "Czech Republic", "code": "CZ"},
-        {"name": "Denmark", "code": "DK"},
-        {"name": "Djibouti", "code": "DJ"},
-        {"name": "Dominica", "code": "DM"},
-        {"name": "Dominican Republic", "code": "DO"},
-        {"name": "Ecuador", "code": "EC"},
-        {"name": "Egypt", "code": "EG"},
-        {"name": "El Salvador", "code": "SV"},
-        {"name": "Equatorial Guinea", "code": "GQ"},
-        {"name": "Eritrea", "code": "ER"},
-        {"name": "Estonia", "code": "EE"},
-        {"name": "Ethiopia", "code": "ET"},
-        {"name": "Falkland Islands (Malvinas)", "code": "FK"},
-        {"name": "Faroe Islands", "code": "FO"},
-        {"name": "Fiji", "code": "FJ"},
-        {"name": "Finland", "code": "FI"},
-        {"name": "France", "code": "FR"},
-        {"name": "French Guiana", "code": "GF"},
-        {"name": "French Polynesia", "code": "PF"},
-        {"name": "French Southern Territories", "code": "TF"},
-        {"name": "Gabon", "code": "GA"},
-        {"name": "Gambia", "code": "GM"},
-        {"name": "Georgia", "code": "GE"},
-        {"name": "Germany", "code": "DE"},
-        {"name": "Ghana", "code": "GH"},
-        {"name": "Gibraltar", "code": "GI"},
-        {"name": "Greece", "code": "GR"},
-        {"name": "Greenland", "code": "GL"},
-        {"name": "Grenada", "code": "GD"},
-        {"name": "Guadeloupe", "code": "GP"},
-        {"name": "Guam", "code": "GU"},
-        {"name": "Guatemala", "code": "GT"},
-        {"name": "Guernsey", "code": "GG"},
-        {"name": "Guinea", "code": "GN"},
-        {"name": "Guinea-Bissau", "code": "GW"},
-        {"name": "Guyana", "code": "GY"},
-        {"name": "Haiti", "code": "HT"},
-        {"name": "Heard Island and Mcdonald Islands", "code": "HM"},
-        {"name": "Holy See (Vatican City State)", "code": "VA"},
-        {"name": "Honduras", "code": "HN"},
-        {"name": "Hong Kong", "code": "HK"},
-        {"name": "Hungary", "code": "HU"},
-        {"name": "Iceland", "code": "IS"},
-        {"name": "India", "code": "IN"},
-        {"name": "Indonesia", "code": "ID"},
-        {"name": "Iran, Islamic Republic Of", "code": "IR"},
-        {"name": "Iraq", "code": "IQ"},
-        {"name": "Ireland", "code": "IE"},
-        {"name": "Isle of Man", "code": "IM"},
-        {"name": "Israel", "code": "IL"},
-        {"name": "Italy", "code": "IT"},
-        {"name": "Jamaica", "code": "JM"},
-        {"name": "Japan", "code": "JP"},
-        {"name": "Jersey", "code": "JE"},
-        {"name": "Jordan", "code": "JO"},
-        {"name": "Kazakhstan", "code": "KZ"},
-        {"name": "Kenya", "code": "KE"},
-        {"name": "Kiribati", "code": "KI"},
-        {"name": "Korea, Democratic People\\"S Republic of", "code": "KP"},
-        {"name": "Korea, Republic of", "code": "KR"},
-        {"name": "Kuwait", "code": "KW"},
-        {"name": "Kyrgyzstan", "code": "KG"},
-        {"name": "Lao People\\"S Democratic Republic", "code": "LA"},
-        {"name": "Latvia", "code": "LV"},
-        {"name": "Lebanon", "code": "LB"},
-        {"name": "Lesotho", "code": "LS"},
-        {"name": "Liberia", "code": "LR"},
-        {"name": "Libyan Arab Jamahiriya", "code": "LY"},
-        {"name": "Liechtenstein", "code": "LI"},
-        {"name": "Lithuania", "code": "LT"},
-        {"name": "Luxembourg", "code": "LU"},
-        {"name": "Macao", "code": "MO"},
-        {"name": "Macedonia, The Former Yugoslav Republic of", "code": "MK"},
-        {"name": "Madagascar", "code": "MG"},
-        {"name": "Malawi", "code": "MW"},
-        {"name": "Malaysia", "code": "MY"},
-        {"name": "Maldives", "code": "MV"},
-        {"name": "Mali", "code": "ML"},
-        {"name": "Malta", "code": "MT"},
-        {"name": "Marshall Islands", "code": "MH"},
-        {"name": "Martinique", "code": "MQ"},
-        {"name": "Mauritania", "code": "MR"},
-        {"name": "Mauritius", "code": "MU"},
-        {"name": "Mayotte", "code": "YT"},
-        {"name": "Mexico", "code": "MX"},
-        {"name": "Micronesia, Federated States of", "code": "FM"},
-        {"name": "Moldova, Republic of", "code": "MD"},
-        {"name": "Monaco", "code": "MC"},
-        {"name": "Mongolia", "code": "MN"},
-        {"name": "Montserrat", "code": "MS"},
-        {"name": "Morocco", "code": "MA"},
-        {"name": "Mozambique", "code": "MZ"},
-        {"name": "Myanmar", "code": "MM"},
-        {"name": "Namibia", "code": "NA"},
-        {"name": "Nauru", "code": "NR"},
-        {"name": "Nepal", "code": "NP"},
-        {"name": "Netherlands", "code": "NL"},
-        {"name": "Netherlands Antilles", "code": "AN"},
-        {"name": "New Caledonia", "code": "NC"},
-        {"name": "New Zealand", "code": "NZ"},
-        {"name": "Nicaragua", "code": "NI"},
-        {"name": "Niger", "code": "NE"},
-        {"name": "Nigeria", "code": "NG"},
-        {"name": "Niue", "code": "NU"},
-        {"name": "Norfolk Island", "code": "NF"},
-        {"name": "Northern Mariana Islands", "code": "MP"},
-        {"name": "Norway", "code": "NO"},
-        {"name": "Oman", "code": "OM"},
-        {"name": "Pakistan", "code": "PK"},
-        {"name": "Palau", "code": "PW"},
-        {"name": "Palestinian Territory, Occupied", "code": "PS"},
-        {"name": "Panama", "code": "PA"},
-        {"name": "Papua New Guinea", "code": "PG"},
-        {"name": "Paraguay", "code": "PY"},
-        {"name": "Peru", "code": "PE"},
-        {"name": "Philippines", "code": "PH"},
-        {"name": "Pitcairn", "code": "PN"},
-        {"name": "Poland", "code": "PL"},
-        {"name": "Portugal", "code": "PT"},
-        {"name": "Puerto Rico", "code": "PR"},
-        {"name": "Qatar", "code": "QA"},
-        {"name": "Reunion", "code": "RE"},
-        {"name": "Romania", "code": "RO"},
-        {"name": "Russian Federation", "code": "RU"},
-        {"name": "RWANDA", "code": "RW"},
-        {"name": "Saint Helena", "code": "SH"},
-        {"name": "Saint Kitts and Nevis", "code": "KN"},
-        {"name": "Saint Lucia", "code": "LC"},
-        {"name": "Saint Pierre and Miquelon", "code": "PM"},
-        {"name": "Saint Vincent and the Grenadines", "code": "VC"},
-        {"name": "Samoa", "code": "WS"},
-        {"name": "San Marino", "code": "SM"},
-        {"name": "Sao Tome and Principe", "code": "ST"},
-        {"name": "Saudi Arabia", "code": "SA"},
-        {"name": "Senegal", "code": "SN"},
-        {"name": "Serbia and Montenegro", "code": "CS"},
-        {"name": "Seychelles", "code": "SC"},
-        {"name": "Sierra Leone", "code": "SL"},
-        {"name": "Singapore", "code": "SG"},
-        {"name": "Slovakia", "code": "SK"},
-        {"name": "Slovenia", "code": "SI"},
-        {"name": "Solomon Islands", "code": "SB"},
-        {"name": "Somalia", "code": "SO"},
-        {"name": "South Africa", "code": "ZA"},
-        {"name": "South Georgia and the South Sandwich Islands", "code": "GS"},
-        {"name": "Spain", "code": "ES"},
-        {"name": "Sri Lanka", "code": "LK"},
-        {"name": "Sudan", "code": "SD"},
-        {"name": "Suriname", "code": "SR"},
-        {"name": "Svalbard and Jan Mayen", "code": "SJ"},
-        {"name": "Swaziland", "code": "SZ"},
-        {"name": "Sweden", "code": "SE"},
-        {"name": "Switzerland", "code": "CH"},
-        {"name": "Syrian Arab Republic", "code": "SY"},
-        {"name": "Taiwan, Province of China", "code": "TW"},
-        {"name": "Tajikistan", "code": "TJ"},
-        {"name": "Tanzania, United Republic of", "code": "TZ"},
-        {"name": "Thailand", "code": "TH"},
-        {"name": "Timor-Leste", "code": "TL"},
-        {"name": "Togo", "code": "TG"},
-        {"name": "Tokelau", "code": "TK"},
-        {"name": "Tonga", "code": "TO"},
-        {"name": "Trinidad and Tobago", "code": "TT"},
-        {"name": "Tunisia", "code": "TN"},
-        {"name": "Turkey", "code": "TR"},
-        {"name": "Turkmenistan", "code": "TM"},
-        {"name": "Turks and Caicos Islands", "code": "TC"},
-        {"name": "Tuvalu", "code": "TV"},
-        {"name": "Uganda", "code": "UG"},
-        {"name": "Ukraine", "code": "UA"},
-        {"name": "United Arab Emirates", "code": "AE"},
-        {"name": "United Kingdom", "code": "GB"},
-        {"name": "United States", "code": "US"},
-        {"name": "United States Minor Outlying Islands", "code": "UM"},
-        {"name": "Uruguay", "code": "UY"},
-        {"name": "Uzbekistan", "code": "UZ"},
-        {"name": "Vanuatu", "code": "VU"},
-        {"name": "Venezuela", "code": "VE"},
-        {"name": "Viet Nam", "code": "VN"},
-        {"name": "Virgin Islands, British", "code": "VG"},
-        {"name": "Virgin Islands, U.S.", "code": "VI"},
-        {"name": "Wallis and Futuna", "code": "WF"},
-        {"name": "Western Sahara", "code": "EH"},
-        {"name": "Yemen", "code": "YE"},
-        {"name": "Zambia", "code": "ZM"},
-        {"name": "Zimbabwe", "code": "ZW"}
-    ]
+   "data": [
+       {"name": "Afghanistan", "code": "AF"},
+       {"name": "Åland Islands", "code": "AX"},
+       {"name": "Albania", "code": "AL"},
+       {"name": "Algeria", "code": "DZ"},
+       {"name": "American Samoa", "code": "AS"},
+       {"name": "Andorra", "code": "AD"},
+       {"name": "Angola", "code": "AO"},
+       {"name": "Anguilla", "code": "AI"},
+       {"name": "Antarctica", "code": "AQ"},
+       {"name": "Antigua and Barbuda", "code": "AG"},
+       {"name": "Argentina", "code": "AR"},
+       {"name": "Armenia", "code": "AM"},
+       {"name": "Aruba", "code": "AW"},
+       {"name": "Australia", "code": "AU"},
+       {"name": "Austria", "code": "AT"},
+       {"name": "Azerbaijan", "code": "AZ"},
+       {"name": "Bahamas", "code": "BS"},
+       {"name": "Bahrain", "code": "BH"},
+       {"name": "Bangladesh", "code": "BD"},
+       {"name": "Barbados", "code": "BB"},
+       {"name": "Belarus", "code": "BY"},
+       {"name": "Belgium", "code": "BE"},
+       {"name": "Belize", "code": "BZ"},
+       {"name": "Benin", "code": "BJ"},
+       {"name": "Bermuda", "code": "BM"},
+       {"name": "Bhutan", "code": "BT"},
+       {"name": "Bolivia", "code": "BO"},
+       {"name": "Bosnia and Herzegovina", "code": "BA"},
+       {"name": "Botswana", "code": "BW"},
+       {"name": "Bouvet Island", "code": "BV"},
+       {"name": "Brazil", "code": "BR"},
+       {"name": "British Indian Ocean Territory", "code": "IO"},
+       {"name": "Brunei Darussalam", "code": "BN"},
+       {"name": "Bulgaria", "code": "BG"},
+       {"name": "Burkina Faso", "code": "BF"},
+       {"name": "Burundi", "code": "BI"},
+       {"name": "Cambodia", "code": "KH"},
+       {"name": "Cameroon", "code": "CM"},
+       {"name": "Canada", "code": "CA"},
+       {"name": "Cape Verde", "code": "CV"},
+       {"name": "Cayman Islands", "code": "KY"},
+       {"name": "Central African Republic", "code": "CF"},
+       {"name": "Chad", "code": "TD"},
+       {"name": "Chile", "code": "CL"},
+       {"name": "China", "code": "CN"},
+       {"name": "Christmas Island", "code": "CX"},
+       {"name": "Cocos (Keeling) Islands", "code": "CC"},
+       {"name": "Colombia", "code": "CO"},
+       {"name": "Comoros", "code": "KM"},
+       {"name": "Congo", "code": "CG"},
+       {"name": "Congo, The Democratic Republic of the", "code": "CD"},
+       {"name": "Cook Islands", "code": "CK"},
+       {"name": "Costa Rica", "code": "CR"},
+       {"name": "Cote D\\"Ivoire", "code": "CI"},
+       {"name": "Croatia", "code": "HR"},
+       {"name": "Cuba", "code": "CU"},
+       {"name": "Cyprus", "code": "CY"},
+       {"name": "Czech Republic", "code": "CZ"},
+       {"name": "Denmark", "code": "DK"},
+       {"name": "Djibouti", "code": "DJ"},
+       {"name": "Dominica", "code": "DM"},
+       {"name": "Dominican Republic", "code": "DO"},
+       {"name": "Ecuador", "code": "EC"},
+       {"name": "Egypt", "code": "EG"},
+       {"name": "El Salvador", "code": "SV"},
+       {"name": "Equatorial Guinea", "code": "GQ"},
+       {"name": "Eritrea", "code": "ER"},
+       {"name": "Estonia", "code": "EE"},
+       {"name": "Ethiopia", "code": "ET"},
+       {"name": "Falkland Islands (Malvinas)", "code": "FK"},
+       {"name": "Faroe Islands", "code": "FO"},
+       {"name": "Fiji", "code": "FJ"},
+       {"name": "Finland", "code": "FI"},
+       {"name": "France", "code": "FR"},
+       {"name": "French Guiana", "code": "GF"},
+       {"name": "French Polynesia", "code": "PF"},
+       {"name": "French Southern Territories", "code": "TF"},
+       {"name": "Gabon", "code": "GA"},
+       {"name": "Gambia", "code": "GM"},
+       {"name": "Georgia", "code": "GE"},
+       {"name": "Germany", "code": "DE"},
+       {"name": "Ghana", "code": "GH"},
+       {"name": "Gibraltar", "code": "GI"},
+       {"name": "Greece", "code": "GR"},
+       {"name": "Greenland", "code": "GL"},
+       {"name": "Grenada", "code": "GD"},
+       {"name": "Guadeloupe", "code": "GP"},
+       {"name": "Guam", "code": "GU"},
+       {"name": "Guatemala", "code": "GT"},
+       {"name": "Guernsey", "code": "GG"},
+       {"name": "Guinea", "code": "GN"},
+       {"name": "Guinea-Bissau", "code": "GW"},
+       {"name": "Guyana", "code": "GY"},
+       {"name": "Haiti", "code": "HT"},
+       {"name": "Heard Island and Mcdonald Islands", "code": "HM"},
+       {"name": "Holy See (Vatican City State)", "code": "VA"},
+       {"name": "Honduras", "code": "HN"},
+       {"name": "Hong Kong", "code": "HK"},
+       {"name": "Hungary", "code": "HU"},
+       {"name": "Iceland", "code": "IS"},
+       {"name": "India", "code": "IN"},
+       {"name": "Indonesia", "code": "ID"},
+       {"name": "Iran, Islamic Republic Of", "code": "IR"},
+       {"name": "Iraq", "code": "IQ"},
+       {"name": "Ireland", "code": "IE"},
+       {"name": "Isle of Man", "code": "IM"},
+       {"name": "Israel", "code": "IL"},
+       {"name": "Italy", "code": "IT"},
+       {"name": "Jamaica", "code": "JM"},
+       {"name": "Japan", "code": "JP"},
+       {"name": "Jersey", "code": "JE"},
+       {"name": "Jordan", "code": "JO"},
+       {"name": "Kazakhstan", "code": "KZ"},
+       {"name": "Kenya", "code": "KE"},
+       {"name": "Kiribati", "code": "KI"},
+       {"name": "Korea, Democratic People\\"S Republic of", "code": "KP"},
+       {"name": "Korea, Republic of", "code": "KR"},
+       {"name": "Kuwait", "code": "KW"},
+       {"name": "Kyrgyzstan", "code": "KG"},
+       {"name": "Lao People\\"S Democratic Republic", "code": "LA"},
+       {"name": "Latvia", "code": "LV"},
+       {"name": "Lebanon", "code": "LB"},
+       {"name": "Lesotho", "code": "LS"},
+       {"name": "Liberia", "code": "LR"},
+       {"name": "Libyan Arab Jamahiriya", "code": "LY"},
+       {"name": "Liechtenstein", "code": "LI"},
+       {"name": "Lithuania", "code": "LT"},
+       {"name": "Luxembourg", "code": "LU"},
+       {"name": "Macao", "code": "MO"},
+       {"name": "Macedonia, The Former Yugoslav Republic of", "code": "MK"},
+       {"name": "Madagascar", "code": "MG"},
+       {"name": "Malawi", "code": "MW"},
+       {"name": "Malaysia", "code": "MY"},
+       {"name": "Maldives", "code": "MV"},
+       {"name": "Mali", "code": "ML"},
+       {"name": "Malta", "code": "MT"},
+       {"name": "Marshall Islands", "code": "MH"},
+       {"name": "Martinique", "code": "MQ"},
+       {"name": "Mauritania", "code": "MR"},
+       {"name": "Mauritius", "code": "MU"},
+       {"name": "Mayotte", "code": "YT"},
+       {"name": "Mexico", "code": "MX"},
+       {"name": "Micronesia, Federated States of", "code": "FM"},
+       {"name": "Moldova, Republic of", "code": "MD"},
+       {"name": "Monaco", "code": "MC"},
+       {"name": "Mongolia", "code": "MN"},
+       {"name": "Montserrat", "code": "MS"},
+       {"name": "Morocco", "code": "MA"},
+       {"name": "Mozambique", "code": "MZ"},
+       {"name": "Myanmar", "code": "MM"},
+       {"name": "Namibia", "code": "NA"},
+       {"name": "Nauru", "code": "NR"},
+       {"name": "Nepal", "code": "NP"},
+       {"name": "Netherlands", "code": "NL"},
+       {"name": "Netherlands Antilles", "code": "AN"},
+       {"name": "New Caledonia", "code": "NC"},
+       {"name": "New Zealand", "code": "NZ"},
+       {"name": "Nicaragua", "code": "NI"},
+       {"name": "Niger", "code": "NE"},
+       {"name": "Nigeria", "code": "NG"},
+       {"name": "Niue", "code": "NU"},
+       {"name": "Norfolk Island", "code": "NF"},
+       {"name": "Northern Mariana Islands", "code": "MP"},
+       {"name": "Norway", "code": "NO"},
+       {"name": "Oman", "code": "OM"},
+       {"name": "Pakistan", "code": "PK"},
+       {"name": "Palau", "code": "PW"},
+       {"name": "Palestinian Territory, Occupied", "code": "PS"},
+       {"name": "Panama", "code": "PA"},
+       {"name": "Papua New Guinea", "code": "PG"},
+       {"name": "Paraguay", "code": "PY"},
+       {"name": "Peru", "code": "PE"},
+       {"name": "Philippines", "code": "PH"},
+       {"name": "Pitcairn", "code": "PN"},
+       {"name": "Poland", "code": "PL"},
+       {"name": "Portugal", "code": "PT"},
+       {"name": "Puerto Rico", "code": "PR"},
+       {"name": "Qatar", "code": "QA"},
+       {"name": "Reunion", "code": "RE"},
+       {"name": "Romania", "code": "RO"},
+       {"name": "Russian Federation", "code": "RU"},
+       {"name": "RWANDA", "code": "RW"},
+       {"name": "Saint Helena", "code": "SH"},
+       {"name": "Saint Kitts and Nevis", "code": "KN"},
+       {"name": "Saint Lucia", "code": "LC"},
+       {"name": "Saint Pierre and Miquelon", "code": "PM"},
+       {"name": "Saint Vincent and the Grenadines", "code": "VC"},
+       {"name": "Samoa", "code": "WS"},
+       {"name": "San Marino", "code": "SM"},
+       {"name": "Sao Tome and Principe", "code": "ST"},
+       {"name": "Saudi Arabia", "code": "SA"},
+       {"name": "Senegal", "code": "SN"},
+       {"name": "Serbia and Montenegro", "code": "CS"},
+       {"name": "Seychelles", "code": "SC"},
+       {"name": "Sierra Leone", "code": "SL"},
+       {"name": "Singapore", "code": "SG"},
+       {"name": "Slovakia", "code": "SK"},
+       {"name": "Slovenia", "code": "SI"},
+       {"name": "Solomon Islands", "code": "SB"},
+       {"name": "Somalia", "code": "SO"},
+       {"name": "South Africa", "code": "ZA"},
+       {"name": "South Georgia and the South Sandwich Islands", "code": "GS"},
+       {"name": "Spain", "code": "ES"},
+       {"name": "Sri Lanka", "code": "LK"},
+       {"name": "Sudan", "code": "SD"},
+       {"name": "Suriname", "code": "SR"},
+       {"name": "Svalbard and Jan Mayen", "code": "SJ"},
+       {"name": "Swaziland", "code": "SZ"},
+       {"name": "Sweden", "code": "SE"},
+       {"name": "Switzerland", "code": "CH"},
+       {"name": "Syrian Arab Republic", "code": "SY"},
+       {"name": "Taiwan, Province of China", "code": "TW"},
+       {"name": "Tajikistan", "code": "TJ"},
+       {"name": "Tanzania, United Republic of", "code": "TZ"},
+       {"name": "Thailand", "code": "TH"},
+       {"name": "Timor-Leste", "code": "TL"},
+       {"name": "Togo", "code": "TG"},
+       {"name": "Tokelau", "code": "TK"},
+       {"name": "Tonga", "code": "TO"},
+       {"name": "Trinidad and Tobago", "code": "TT"},
+       {"name": "Tunisia", "code": "TN"},
+       {"name": "Turkey", "code": "TR"},
+       {"name": "Turkmenistan", "code": "TM"},
+       {"name": "Turks and Caicos Islands", "code": "TC"},
+       {"name": "Tuvalu", "code": "TV"},
+       {"name": "Uganda", "code": "UG"},
+       {"name": "Ukraine", "code": "UA"},
+       {"name": "United Arab Emirates", "code": "AE"},
+       {"name": "United Kingdom", "code": "GB"},
+       {"name": "United States", "code": "US"},
+       {"name": "United States Minor Outlying Islands", "code": "UM"},
+       {"name": "Uruguay", "code": "UY"},
+       {"name": "Uzbekistan", "code": "UZ"},
+       {"name": "Vanuatu", "code": "VU"},
+       {"name": "Venezuela", "code": "VE"},
+       {"name": "Viet Nam", "code": "VN"},
+       {"name": "Virgin Islands, British", "code": "VG"},
+       {"name": "Virgin Islands, U.S.", "code": "VI"},
+       {"name": "Wallis and Futuna", "code": "WF"},
+       {"name": "Western Sahara", "code": "EH"},
+       {"name": "Yemen", "code": "YE"},
+       {"name": "Zambia", "code": "ZM"},
+       {"name": "Zimbabwe", "code": "ZW"}
+   ]
 }
-    `,
+   `,
     events: `
 {
-    "data": [
-        {"id": 1,"title": "All Day Event","start": "2017-02-01"},
-        {"id": 2,"title": "Long Event","start": "2017-02-07","end": "2017-02-10"},
-        {"id": 3,"title": "Repeating Event","start": "2017-02-09T16:00:00"},
-        {"id": 4,"title": "Repeating Event","start": "2017-02-16T16:00:00"},
-        {"id": 5,"title": "Conference","start": "2017-02-11","end": "2017-02-13"},
-        {"id": 6,"title": "Meeting","start": "2017-02-12T10:30:00","end": "2017-02-12T12:30:00"},
-        {"id": 7,"title": "Lunch","start": "2017-02-12T12:00:00"},
-        {"id": 8,"title": "Meeting","start": "2017-02-12T14:30:00"},
-        {"id": 9,"title": "Happy Hour","start": "2017-02-12T17:30:00"},
-        {"id": 10,"title": "Dinner","start": "2017-02-12T20:00:00"},
-        {"id": 11,"title": "Birthday Party","start": "2017-02-13T07:00:00"},
-        {"id": 12,"title": "Click for Google","url": "https://www.google.com/","start": "2017-02-28"}
-    ]
+   "data": [
+       {"id": 1,"title": "All Day Event","start": "2017-02-01"},
+       {"id": 2,"title": "Long Event","start": "2017-02-07","end": "2017-02-10"},
+       {"id": 3,"title": "Repeating Event","start": "2017-02-09T16:00:00"},
+       {"id": 4,"title": "Repeating Event","start": "2017-02-16T16:00:00"},
+       {"id": 5,"title": "Conference","start": "2017-02-11","end": "2017-02-13"},
+       {"id": 6,"title": "Meeting","start": "2017-02-12T10:30:00","end": "2017-02-12T12:30:00"},
+       {"id": 7,"title": "Lunch","start": "2017-02-12T12:00:00"},
+       {"id": 8,"title": "Meeting","start": "2017-02-12T14:30:00"},
+       {"id": 9,"title": "Happy Hour","start": "2017-02-12T17:30:00"},
+       {"id": 10,"title": "Dinner","start": "2017-02-12T20:00:00"},
+       {"id": 11,"title": "Birthday Party","start": "2017-02-13T07:00:00"},
+       {"id": 12,"title": "Click for Google","url": "https://www.google.com/","start": "2017-02-28"}
+   ]
 }
-    `,
+   `,
     photos: `
 {
-    "data":[
-        {"itemImageSrc": "images/galleria/galleria1.jpg","thumbnailImageSrc": "images/galleria/galleria1s.jpg","alt": "Description for Image 1","title": "Title 1"},
-        {"itemImageSrc": "images/galleria/galleria2.jpg","thumbnailImageSrc": "images/galleria/galleria2s.jpg","alt": "Description for Image 2","title": "Title 2"},
-        {"itemImageSrc": "images/galleria/galleria3.jpg","thumbnailImageSrc": "images/galleria/galleria3s.jpg","alt": "Description for Image 3","title": "Title 3"},
-        {"itemImageSrc": "images/galleria/galleria4.jpg","thumbnailImageSrc": "images/galleria/galleria4s.jpg","alt": "Description for Image 4","title": "Title 4"},
-        {"itemImageSrc": "images/galleria/galleria5.jpg","thumbnailImageSrc": "images/galleria/galleria5s.jpg","alt": "Description for Image 5","title": "Title 5"},
-        {"itemImageSrc": "images/galleria/galleria6.jpg","thumbnailImageSrc": "images/galleria/galleria6s.jpg","alt": "Description for Image 6","title": "Title 6"},
-        {"itemImageSrc": "images/galleria/galleria7.jpg","thumbnailImageSrc": "images/galleria/galleria7s.jpg","alt": "Description for Image 7","title": "Title 7"},
-        {"itemImageSrc": "images/galleria/galleria8.jpg","thumbnailImageSrc": "images/galleria/galleria8s.jpg","alt": "Description for Image 8","title": "Title 8"},
-        {"itemImageSrc": "images/galleria/galleria9.jpg","thumbnailImageSrc": "images/galleria/galleria9s.jpg","alt": "Description for Image 9","title": "Title 9"},
-        {"itemImageSrc": "images/galleria/galleria10.jpg","thumbnailImageSrc": "images/galleria/galleria10s.jpg","alt": "Description for Image 10","title": "Title 10"},
-        {"itemImageSrc": "images/galleria/galleria11.jpg","thumbnailImageSrc": "images/galleria/galleria11s.jpg","alt": "Description for Image 11","title": "Title 11"},
-        {"itemImageSrc": "images/galleria/galleria12.jpg","thumbnailImageSrc": "images/galleria/galleria12s.jpg","alt": "Description for Image 12","title": "Title 12"},
-        {"itemImageSrc": "images/galleria/galleria13.jpg","thumbnailImageSrc": "images/galleria/galleria13s.jpg","alt": "Description for Image 13","title": "Title 13"},
-        {"itemImageSrc": "images/galleria/galleria14.jpg","thumbnailImageSrc": "images/galleria/galleria14s.jpg","alt": "Description for Image 14","title": "Title 14"},
-        {"itemImageSrc": "images/galleria/galleria15.jpg","thumbnailImageSrc": "images/galleria/galleria15s.jpg","alt": "Description for Image 15","title": "Title 15"}
-    ]
+   "data":[
+       {"itemImageSrc": "images/galleria/galleria1.jpg","thumbnailImageSrc": "images/galleria/galleria1s.jpg","alt": "Description for Image 1","title": "Title 1"},
+       {"itemImageSrc": "images/galleria/galleria2.jpg","thumbnailImageSrc": "images/galleria/galleria2s.jpg","alt": "Description for Image 2","title": "Title 2"},
+       {"itemImageSrc": "images/galleria/galleria3.jpg","thumbnailImageSrc": "images/galleria/galleria3s.jpg","alt": "Description for Image 3","title": "Title 3"},
+       {"itemImageSrc": "images/galleria/galleria4.jpg","thumbnailImageSrc": "images/galleria/galleria4s.jpg","alt": "Description for Image 4","title": "Title 4"},
+       {"itemImageSrc": "images/galleria/galleria5.jpg","thumbnailImageSrc": "images/galleria/galleria5s.jpg","alt": "Description for Image 5","title": "Title 5"},
+       {"itemImageSrc": "images/galleria/galleria6.jpg","thumbnailImageSrc": "images/galleria/galleria6s.jpg","alt": "Description for Image 6","title": "Title 6"},
+       {"itemImageSrc": "images/galleria/galleria7.jpg","thumbnailImageSrc": "images/galleria/galleria7s.jpg","alt": "Description for Image 7","title": "Title 7"},
+       {"itemImageSrc": "images/galleria/galleria8.jpg","thumbnailImageSrc": "images/galleria/galleria8s.jpg","alt": "Description for Image 8","title": "Title 8"},
+       {"itemImageSrc": "images/galleria/galleria9.jpg","thumbnailImageSrc": "images/galleria/galleria9s.jpg","alt": "Description for Image 9","title": "Title 9"},
+       {"itemImageSrc": "images/galleria/galleria10.jpg","thumbnailImageSrc": "images/galleria/galleria10s.jpg","alt": "Description for Image 10","title": "Title 10"},
+       {"itemImageSrc": "images/galleria/galleria11.jpg","thumbnailImageSrc": "images/galleria/galleria11s.jpg","alt": "Description for Image 11","title": "Title 11"},
+       {"itemImageSrc": "images/galleria/galleria12.jpg","thumbnailImageSrc": "images/galleria/galleria12s.jpg","alt": "Description for Image 12","title": "Title 12"},
+       {"itemImageSrc": "images/galleria/galleria13.jpg","thumbnailImageSrc": "images/galleria/galleria13s.jpg","alt": "Description for Image 13","title": "Title 13"},
+       {"itemImageSrc": "images/galleria/galleria14.jpg","thumbnailImageSrc": "images/galleria/galleria14s.jpg","alt": "Description for Image 14","title": "Title 14"},
+       {"itemImageSrc": "images/galleria/galleria15.jpg","thumbnailImageSrc": "images/galleria/galleria15s.jpg","alt": "Description for Image 15","title": "Title 15"}
+   ]
 }
-    `,
+   `,
     treenodes: `
 {
-    "root": [
-        {"key":"0","label":"Documents","data":"Documents Folder","icon":"pi pi-fw pi-inbox","children": [{"key": "0-0","label": "Work","data": "Work Folder","icon": "pi pi-fw pi-cog","children": [{ "key": "0-0-0", "label": "Expenses.doc", "icon": "pi pi-fw pi-file", "data": "Expenses Document" }, { "key": "0-0-1", "label": "Resume.doc", "icon": "pi pi-fw pi-file", "data": "Resume Document" }]},{"key": "0-1","label": "Home","data": "Home Folder","icon": "pi pi-fw pi-home","children": [{ "key": "0-1-0", "label": "Invoices.txt", "icon": "pi pi-fw pi-file", "data": "Invoices for this month" }]}]},
-        {"key":"1","label":"Events","data":"Events Folder","icon":"pi pi-fw pi-calendar","children": [{ "key": "1-0", "label": "Meeting", "icon": "pi pi-fw pi-calendar-plus", "data": "Meeting" },{ "key": "1-1", "label": "Product Launch", "icon": "pi pi-fw pi-calendar-plus", "data": "Product Launch" },{ "key": "1-2", "label": "Report Review", "icon": "pi pi-fw pi-calendar-plus", "data": "Report Review" }]},
-        {"key":"2","label":"Movies","data":"Movies Folder","icon":"pi pi-fw pi-star-fill","children": [{"key": "2-0","icon": "pi pi-fw pi-star-fill","label": "Al Pacino","data": "Pacino Movies","children": [{ "key": "2-0-0", "label": "Scarface", "icon": "pi pi-fw pi-video", "data": "Scarface Movie" }, { "key": "2-0-1", "label": "Serpico", "icon": "pi pi-fw pi-video", "data": "Serpico Movie" }]},{"key": "2-1","label": "Robert De Niro","icon": "pi pi-fw pi-star-fill","data": "De Niro Movies","children": [{ "key": "2-1-0", "label": "Goodfellas", "icon": "pi pi-fw pi-video", "data": "Goodfellas Movie" }, { "key": "2-1-1", "label": "Untouchables", "icon": "pi pi-fw pi-video", "data": "Untouchables Movie" }]}]}
-    ]
+   "root": [
+       {"key":"0","label":"Documents","data":"Documents Folder","icon":"pi pi-fw pi-inbox","children": [{"key": "0-0","label": "Work","data": "Work Folder","icon": "pi pi-fw pi-cog","children": [{ "key": "0-0-0", "label": "Expenses.doc", "icon": "pi pi-fw pi-file", "data": "Expenses Document" }, { "key": "0-0-1", "label": "Resume.doc", "icon": "pi pi-fw pi-file", "data": "Resume Document" }]},{"key": "0-1","label": "Home","data": "Home Folder","icon": "pi pi-fw pi-home","children": [{ "key": "0-1-0", "label": "Invoices.txt", "icon": "pi pi-fw pi-file", "data": "Invoices for this month" }]}]},
+       {"key":"1","label":"Events","data":"Events Folder","icon":"pi pi-fw pi-calendar","children": [{ "key": "1-0", "label": "Meeting", "icon": "pi pi-fw pi-calendar-plus", "data": "Meeting" },{ "key": "1-1", "label": "Product Launch", "icon": "pi pi-fw pi-calendar-plus", "data": "Product Launch" },{ "key": "1-2", "label": "Report Review", "icon": "pi pi-fw pi-calendar-plus", "data": "Report Review" }]},
+       {"key":"2","label":"Movies","data":"Movies Folder","icon":"pi pi-fw pi-star-fill","children": [{"key": "2-0","icon": "pi pi-fw pi-star-fill","label": "Al Pacino","data": "Pacino Movies","children": [{ "key": "2-0-0", "label": "Scarface", "icon": "pi pi-fw pi-video", "data": "Scarface Movie" }, { "key": "2-0-1", "label": "Serpico", "icon": "pi pi-fw pi-video", "data": "Serpico Movie" }]},{"key": "2-1","label": "Robert De Niro","icon": "pi pi-fw pi-star-fill","data": "De Niro Movies","children": [{ "key": "2-1-0", "label": "Goodfellas", "icon": "pi pi-fw pi-video", "data": "Goodfellas Movie" }, { "key": "2-1-1", "label": "Untouchables", "icon": "pi pi-fw pi-video", "data": "Untouchables Movie" }]}]}
+   ]
 }
-    `,
+   `,
     treetablenodes: `
 {
-    "root":[
-        {"key":"0","data":{"name":"Applications","size":"100kb","type":"Folder"},"children":[{"key":"0-0","data":{"name":"Vue","size":"25kb","type":"Folder"},"children":[{"key":"0-0-0","data":{"name":"vue.app","size":"10kb","type":"Application"}},{"key":"0-0-1","data":{"name":"native.app","size":"10kb","type":"Application"}},{"key":"0-0-2","data":{"name":"mobile.app","size":"5kb","type":"Application"}}]},{"key":"0-1","data":{"name":"editor.app","size":"25kb","type":"Application"}},{"key":"0-2","data":{"name":"settings.app","size":"50kb","type":"Application"}}]},
-        {"key":"1","data":{"name":"Cloud","size":"20kb","type":"Folder"},"children":[{"key":"1-0","data":{"name":"backup-1.zip","size":"10kb","type":"Zip"}},{"key":"1-1","data":{"name":"backup-2.zip","size":"10kb","type":"Zip"}}]},
-        {"key":"2","data":{"name":"Desktop","size":"150kb","type":"Folder"},"children":[{"key":"2-0","data":{"name":"note-meeting.txt","size":"50kb","type":"Text"}},{"key":"2-1","data":{"name":"note-todo.txt","size":"100kb","type":"Text"}}]},
-        {"key":"3","data":{"name":"Documents","size":"75kb","type":"Folder"},"children":[{"key":"3-0","data":{"name":"Work","size":"55kb","type":"Folder"},"children":[{"key":"3-0-0","data":{"name":"Expenses.doc","size":"30kb","type":"Document"}},{"key":"3-0-1","data":{"name":"Resume.doc","size":"25kb","type":"Resume"}}]},{"key":"3-1","data":{"name":"Home","size":"20kb","type":"Folder"},"children":[{"key":"3-1-0","data":{"name":"Invoices","size":"20kb","type":"Text"}}]}]},
-        {"key":"4","data":{"name":"Downloads","size":"25kb","type":"Folder"},"children":[{"key":"4-0","data":{"name":"Spanish","size":"10kb","type":"Folder"},"children":[{"key":"4-0-0","data":{"name":"tutorial-a1.txt","size":"5kb","type":"Text"}},{"key":"4-0-1","data":{"name":"tutorial-a2.txt","size":"5kb","type":"Text"}}]},{"key":"4-1","data":{"name":"Travel","size":"15kb","type":"Text"},"children":[{"key":"4-1-0","data":{"name":"Hotel.pdf","size":"10kb","type":"PDF"}},{"key":"4-1-1","data":{"name":"Flight.pdf","size":"5kb","type":"PDF"}}]}]},
-        {"key":"5","data":{"name":"Main","size":"50kb","type":"Folder"},"children":[{"key":"5-0","data":{"name":"bin","size":"50kb","type":"Link"}},{"key":"5-1","data":{"name":"etc","size":"100kb","type":"Link"}},{"key":"5-2","data":{"name":"var","size":"100kb","type":"Link"}}]},
-        {"key":"6","data":{"name":"Other","size":"5kb","type":"Folder"},"children":[{"key":"6-0","data":{"name":"todo.txt","size":"3kb","type":"Text"}},{"key":"6-1","data":{"name":"logo.png","size":"2kb","type":"Picture"}}]},
-        {"key":"7","data":{"name":"Pictures","size":"150kb","type":"Folder"},"children":[{"key":"7-0","data":{"name":"barcelona.jpg","size":"90kb","type":"Picture"}},{"key":"7-1","data":{"name":"primeng.png","size":"30kb","type":"Picture"}},{"key":"7-2","data":{"name":"prime.jpg","size":"30kb","type":"Picture"}}]},
-        {"key":"8","data":{"name":"Videos","size":"1500kb","type":"Folder"},"children":[{"key":"8-0","data":{"name":"primefaces.mkv","size":"1000kb","type":"Video"}},{"key":"8-1","data":{"name":"intro.avi","size":"500kb","type":"Video"}}]}
-    ]
+   "root":[
+       {"key":"0","data":{"name":"Applications","size":"100kb","type":"Folder"},"children":[{"key":"0-0","data":{"name":"Vue","size":"25kb","type":"Folder"},"children":[{"key":"0-0-0","data":{"name":"vue.app","size":"10kb","type":"Application"}},{"key":"0-0-1","data":{"name":"native.app","size":"10kb","type":"Application"}},{"key":"0-0-2","data":{"name":"mobile.app","size":"5kb","type":"Application"}}]},{"key":"0-1","data":{"name":"editor.app","size":"25kb","type":"Application"}},{"key":"0-2","data":{"name":"settings.app","size":"50kb","type":"Application"}}]},
+       {"key":"1","data":{"name":"Cloud","size":"20kb","type":"Folder"},"children":[{"key":"1-0","data":{"name":"backup-1.zip","size":"10kb","type":"Zip"}},{"key":"1-1","data":{"name":"backup-2.zip","size":"10kb","type":"Zip"}}]},
+       {"key":"2","data":{"name":"Desktop","size":"150kb","type":"Folder"},"children":[{"key":"2-0","data":{"name":"note-meeting.txt","size":"50kb","type":"Text"}},{"key":"2-1","data":{"name":"note-todo.txt","size":"100kb","type":"Text"}}]},
+       {"key":"3","data":{"name":"Documents","size":"75kb","type":"Folder"},"children":[{"key":"3-0","data":{"name":"Work","size":"55kb","type":"Folder"},"children":[{"key":"3-0-0","data":{"name":"Expenses.doc","size":"30kb","type":"Document"}},{"key":"3-0-1","data":{"name":"Resume.doc","size":"25kb","type":"Resume"}}]},{"key":"3-1","data":{"name":"Home","size":"20kb","type":"Folder"},"children":[{"key":"3-1-0","data":{"name":"Invoices","size":"20kb","type":"Text"}}]}]},
+       {"key":"4","data":{"name":"Downloads","size":"25kb","type":"Folder"},"children":[{"key":"4-0","data":{"name":"Spanish","size":"10kb","type":"Folder"},"children":[{"key":"4-0-0","data":{"name":"tutorial-a1.txt","size":"5kb","type":"Text"}},{"key":"4-0-1","data":{"name":"tutorial-a2.txt","size":"5kb","type":"Text"}}]},{"key":"4-1","data":{"name":"Travel","size":"15kb","type":"Text"},"children":[{"key":"4-1-0","data":{"name":"Hotel.pdf","size":"10kb","type":"PDF"}},{"key":"4-1-1","data":{"name":"Flight.pdf","size":"5kb","type":"PDF"}}]}]},
+       {"key":"5","data":{"name":"Main","size":"50kb","type":"Folder"},"children":[{"key":"5-0","data":{"name":"bin","size":"50kb","type":"Link"}},{"key":"5-1","data":{"name":"etc","size":"100kb","type":"Link"}},{"key":"5-2","data":{"name":"var","size":"100kb","type":"Link"}}]},
+       {"key":"6","data":{"name":"Other","size":"5kb","type":"Folder"},"children":[{"key":"6-0","data":{"name":"todo.txt","size":"3kb","type":"Text"}},{"key":"6-1","data":{"name":"logo.png","size":"2kb","type":"Picture"}}]},
+       {"key":"7","data":{"name":"Pictures","size":"150kb","type":"Folder"},"children":[{"key":"7-0","data":{"name":"barcelona.jpg","size":"90kb","type":"Picture"}},{"key":"7-1","data":{"name":"primeng.png","size":"30kb","type":"Picture"}},{"key":"7-2","data":{"name":"prime.jpg","size":"30kb","type":"Picture"}}]},
+       {"key":"8","data":{"name":"Videos","size":"1500kb","type":"Folder"},"children":[{"key":"8-0","data":{"name":"primefaces.mkv","size":"1000kb","type":"Video"}},{"key":"8-1","data":{"name":"intro.avi","size":"500kb","type":"Video"}}]}
+   ]
 }
-    `,
+   `,
     'customers-large': `
 {
-        "data":[
-           {
-              "id":1000,
-              "name":"James Butt",
-              "country":{
-                 "name":"Algeria",
-                 "code":"dz"
-              },
-              "company":"Benton, John B Jr",
-              "date":"2015-09-13",
-              "status":"unqualified",
-              "verified":true,
-              "activity":17,
-              "representative":{
-                 "name":"Ioni Bowcher",
-                 "image":"ionibowcher.png"
-              },
-              "balance":70663
-           },
-           {
-              "id":1001,
-              "name":"Josephine Darakjy",
-              "country":{
-                 "name":"Egypt",
-                 "code":"eg"
-              },
-              "company":"Chanay, Jeffrey A Esq",
-              "date":"2019-02-09",
-              "status":"proposal",
-              "verified":true,
-              "activity":0,
-              "representative":{
-                 "name":"Amy Elsner",
-                 "image":"amyelsner.png"
-              },
-              "balance":82429
-           },
-           {
-              "id":1002,
-              "name":"Art Venere",
-              "country":{
-                 "name":"Panama",
-                 "code":"pa"
-              },
-              "company":"Chemel, James L Cpa",
-              "date":"2017-05-13",
-              "status":"qualified",
-              "verified":false,
-              "activity":63,
-              "representative":{
-                 "name":"Asiya Javayant",
-                 "image":"asiyajavayant.png"
-              },
-              "balance":28334
-           },
-           {
-              "id":1003,
-              "name":"Lenna Paprocki",
-              "country":{
-                 "name":"Slovenia",
-                 "code":"si"
-              },
-              "company":"Feltz Printing Service",
-              "date":"2020-09-15",
-              "status":"new",
-              "verified":false,
-              "activity":37,
-              "representative":{
-                 "name":"Xuxue Feng",
-                 "image":"xuxuefeng.png"
-              },
-              "balance":88521
-           },
-           {
-              "id":1004,
-              "name":"Donette Foller",
-              "country":{
-                 "name":"South Africa",
-                 "code":"za"
-              },
-              "company":"Printing Dimensions",
-              "date":"2016-05-20",
-              "status":"proposal",
-              "verified":true,
-              "activity":33,
-              "representative":{
-                 "name":"Asiya Javayant",
-                 "image":"asiyajavayant.png"
-              },
-              "balance":93905
-           },
-           {
-              "id":1005,
-              "name":"Simona Morasca",
-              "country":{
-                 "name":"Egypt",
-                 "code":"eg"
-              },
-              "company":"Chapman, Ross E Esq",
-              "date":"2018-02-16",
-              "status":"qualified",
-              "verified":false,
-              "activity":68,
-              "representative":{
-                 "name":"Ivan Magalhaes",
-                 "image":"ivanmagalhaes.png"
-              },
-              "balance":50041
-           },
-           {
-              "id":1006,
-              "name":"Mitsue Tollner",
-              "country":{
-                 "name":"Paraguay",
-                 "code":"py"
-              },
-              "company":"Morlong Associates",
-              "date":"2018-02-19",
-              "status":"renewal",
-              "verified":true,
-              "activity":54,
-              "representative":{
-                 "name":"Ivan Magalhaes",
-                 "image":"ivanmagalhaes.png"
-              },
-              "balance":58706
-           },
-           {
-              "id":1007,
-              "name":"Leota Dilliard",
-              "country":{
-                 "name":"Serbia",
-                 "code":"rs"
-              },
-              "company":"Commercial Press",
-              "date":"2019-08-13",
-              "status":"renewal",
-              "verified":true,
-              "activity":69,
-              "representative":{
-                 "name":"Onyama Limba",
-                 "image":"onyamalimba.png"
-              },
-              "balance":26640
-           },
-           {
-              "id":1008,
-              "name":"Sage Wieser",
-              "country":{
-                 "name":"Egypt",
-                 "code":"eg"
-              },
-              "company":"Truhlar And Truhlar Attys",
-              "date":"2018-11-21",
-              "status":"unqualified",
-              "verified":true,
-              "activity":76,
-              "representative":{
-                 "name":"Ivan Magalhaes",
-                 "image":"ivanmagalhaes.png"
-              },
-              "balance":65369
-           },
-           {
-              "id":1009,
-              "name":"Kris Marrier",
-              "country":{
-                 "name":"Mexico",
-                 "code":"mx"
-              },
-              "company":"King, Christopher A Esq",
-              "date":"2015-07-07",
-              "status":"proposal",
-              "verified":false,
-              "activity":3,
-              "representative":{
-                 "name":"Onyama Limba",
-                 "image":"onyamalimba.png"
-              },
-              "balance":63451
-           },
-           {
-              "id":1010,
-              "name":"Minna Amigon",
-              "country":{
-                 "name":"Romania",
-                 "code":"ro"
-              },
-              "company":"Dorl, James J Esq",
-              "date":"2018-11-07",
-              "status":"qualified",
-              "verified":false,
-              "activity":38,
-              "representative":{
-                 "name":"Anna Fali",
-                 "image":"annafali.png"
-              },
-              "balance":71169
-           },
-           {
-              "id":1011,
-              "name":"Abel Maclead",
-              "country":{
-                 "name":"Singapore",
-                 "code":"sg"
-              },
-              "company":"Rangoni Of Florence",
-              "date":"2017-03-11",
-              "status":"qualified",
-              "verified":true,
-              "activity":87,
-              "representative":{
-                 "name":"Bernardo Dominic",
-                 "image":"bernardodominic.png"
-              },
-              "balance":96842
-           },
-           {
-              "id":1012,
-              "name":"Kiley Caldarera",
-              "country":{
-                 "name":"Serbia",
-                 "code":"rs"
-              },
-              "company":"Feiner Bros",
-              "date":"2015-10-20",
-              "status":"unqualified",
-              "verified":false,
-              "activity":80,
-              "representative":{
-                 "name":"Onyama Limba",
-                 "image":"onyamalimba.png"
-              },
-              "balance":92734
-           },
-           {
-              "id":1013,
-              "name":"Graciela Ruta",
-              "country":{
-                 "name":"Chile",
-                 "code":"cl"
-              },
-              "company":"Buckley Miller & Wright",
-              "date":"2016-07-25",
-              "status":"negotiation",
-              "verified":false,
-              "activity":59,
-              "representative":{
-                 "name":"Amy Elsner",
-                 "image":"amyelsner.png"
-              },
-              "balance":45250
-           },
-           {
-              "id":1014,
-              "name":"Cammy Albares",
-              "country":{
-                 "name":"Philippines",
-                 "code":"ph"
-              },
-              "company":"Rousseaux, Michael Esq",
-              "date":"2019-06-25",
-              "status":"new",
-              "verified":true,
-              "activity":90,
-              "representative":{
-                 "name":"Asiya Javayant",
-                 "image":"asiyajavayant.png"
-              },
-              "balance":30236
-           },
-           {
-              "id":1015,
-              "name":"Mattie Poquette",
-              "country":{
-                 "name":"Venezuela",
-                 "code":"ve"
-              },
-              "company":"Century Communications",
-              "date":"2017-12-12",
-              "status":"negotiation",
-              "verified":false,
-              "activity":52,
-              "representative":{
-                 "name":"Anna Fali",
-                 "image":"annafali.png"
-              },
-              "balance":64533
-           },
-           {
-              "id":1016,
-              "name":"Meaghan Garufi",
-              "country":{
-                 "name":"Malaysia",
-                 "code":"my"
-              },
-              "company":"Bolton, Wilbur Esq",
-              "date":"2018-07-04",
-              "status":"unqualified",
-              "verified":false,
-              "activity":31,
-              "representative":{
-                 "name":"Ivan Magalhaes",
-                 "image":"ivanmagalhaes.png"
-              },
-              "balance":37279
-           },
-           {
-              "id":1017,
-              "name":"Gladys Rim",
-              "country":{
-                 "name":"Netherlands",
-                 "code":"nl"
-              },
-              "company":"T M Byxbee Company Pc",
-              "date":"2020-02-27",
-              "status":"renewal",
-              "verified":true,
-              "activity":48,
-              "representative":{
-                 "name":"Stephen Shaw",
-                 "image":"stephenshaw.png"
-              },
-              "balance":27381
-           },
-           {
-              "id":1018,
-              "name":"Yuki Whobrey",
-              "country":{
-                 "name":"Israel",
-                 "code":"il"
-              },
-              "company":"Farmers Insurance Group",
-              "date":"2017-12-21",
-              "status":"negotiation",
-              "verified":true,
-              "activity":16,
-              "representative":{
-                 "name":"Bernardo Dominic",
-                 "image":"bernardodominic.png"
-              },
-              "balance":9257
-           },
-           {
-              "id":1019,
-              "name":"Fletcher Flosi",
-              "country":{
-                 "name":"Argentina",
-                 "code":"ar"
-              },
-              "company":"Post Box Services Plus",
-              "date":"2016-01-04",
-              "status":"renewal",
-              "verified":true,
-              "activity":19,
-              "representative":{
-                 "name":"Xuxue Feng",
-                 "image":"xuxuefeng.png"
-              },
-              "balance":67783
-           },
-           {
-              "id":1020,
-              "name":"Bette Nicka",
-              "country":{
-                 "name":"Paraguay",
-                 "code":"py"
-              },
-              "company":"Sport En Art",
-              "date":"2016-10-21",
-              "status":"renewal",
-              "verified":false,
-              "activity":100,
-              "representative":{
-                 "name":"Onyama Limba",
-                 "image":"onyamalimba.png"
-              },
-              "balance":4609
-           },
-           {
-              "id":1021,
-              "name":"Veronika Inouye",
-              "country":{
-                 "name":"Ecuador",
-                 "code":"ec"
-              },
-              "company":"C 4 Network Inc",
-              "date":"2017-03-24",
-              "status":"renewal",
-              "verified":false,
-              "activity":72,
-              "representative":{
-                 "name":"Ioni Bowcher",
-                 "image":"ionibowcher.png"
-              },
-              "balance":26565
-           },
-           {
-              "id":1022,
-              "name":"Willard Kolmetz",
-              "country":{
-                 "name":"Tunisia",
-                 "code":"tn"
-              },
-              "company":"Ingalls, Donald R Esq",
-              "date":"2017-04-15",
-              "status":"renewal",
-              "verified":true,
-              "activity":94,
-              "representative":{
-                 "name":"Asiya Javayant",
-                 "image":"asiyajavayant.png"
-              },
-              "balance":75876
-           },
-           {
-              "id":1023,
-              "name":"Maryann Royster",
-              "country":{
-                 "name":"Belarus",
-                 "code":"by"
-              },
-              "company":"Franklin, Peter L Esq",
-              "date":"2017-03-11",
-              "status":"qualified",
-              "verified":false,
-              "activity":56,
-              "representative":{
-                 "name":"Elwin Sharvill",
-                 "image":"elwinsharvill.png"
-              },
-              "balance":41121
-           },
-           {
-              "id":1024,
-              "name":"Alisha Slusarski",
-              "country":{
-                 "name":"Iceland",
-                 "code":"is"
-              },
-              "company":"Wtlz Power 107 Fm",
-              "date":"2018-03-27",
-              "status":"qualified",
-              "verified":true,
-              "activity":7,
-              "representative":{
-                 "name":"Stephen Shaw",
-                 "image":"stephenshaw.png"
-              },
-              "balance":91691
-           },
-           {
-              "id":1025,
-              "name":"Allene Iturbide",
-              "country":{
-                 "name":"Italy",
-                 "code":"it"
-              },
-              "company":"Ledecky, David Esq",
-              "date":"2016-02-20",
-              "status":"qualified",
-              "verified":true,
-              "activity":1,
-              "representative":{
-                 "name":"Ivan Magalhaes",
-                 "image":"ivanmagalhaes.png"
-              },
-              "balance":40137
-           },
-           {
-              "id":1026,
-              "name":"Chanel Caudy",
-              "country":{
-                 "name":"Argentina",
-                 "code":"ar"
-              },
-              "company":"Professional Image Inc",
-              "date":"2018-06-24",
-              "status":"new",
-              "verified":true,
-              "activity":26,
-              "representative":{
-                 "name":"Ioni Bowcher",
-                 "image":"ionibowcher.png"
-              },
-              "balance":21304
-           },
-           {
-              "id":1027,
-              "name":"Ezekiel Chui",
-              "country":{
-                 "name":"Ireland",
-                 "code":"ie"
-              },
-              "company":"Sider, Donald C Esq",
-              "date":"2016-09-24",
-              "status":"new",
-              "verified":false,
-              "activity":76,
-              "representative":{
-                 "name":"Amy Elsner",
-                 "image":"amyelsner.png"
-              },
-              "balance":60454
-           },
-           {
-              "id":1028,
-              "name":"Willow Kusko",
-              "country":{
-                 "name":"Romania",
-                 "code":"ro"
-              },
-              "company":"U Pull It",
-              "date":"2020-04-11",
-              "status":"qualified",
-              "verified":true,
-              "activity":7,
-              "representative":{
-                 "name":"Onyama Limba",
-                 "image":"onyamalimba.png"
-              },
-              "balance":17565
-           },
-           {
-              "id":1029,
-              "name":"Bernardo Figeroa",
-              "country":{
-                 "name":"Israel",
-                 "code":"il"
-              },
-              "company":"Clark, Richard Cpa",
-              "date":"2018-04-11",
-              "status":"renewal",
-              "verified":true,
-              "activity":81,
-              "representative":{
-                 "name":"Ioni Bowcher",
-                 "image":"ionibowcher.png"
-              },
-              "balance":17774
-           },
-           {
-              "id":1030,
-              "name":"Ammie Corrio",
-              "country":{
-                 "name":"Hungary",
-                 "code":"hu"
-              },
-              "company":"Moskowitz, Barry S",
-              "date":"2016-06-11",
-              "status":"negotiation",
-              "verified":true,
-              "activity":56,
-              "representative":{
-                 "name":"Asiya Javayant",
-                 "image":"asiyajavayant.png"
-              },
-              "balance":49201
-           },
-           {
-              "id":1031,
-              "name":"Francine Vocelka",
-              "country":{
-                 "name":"Honduras",
-                 "code":"hn"
-              },
-              "company":"Cascade Realty Advisors Inc",
-              "date":"2017-08-02",
-              "status":"qualified",
-              "verified":true,
-              "activity":94,
-              "representative":{
-                 "name":"Ioni Bowcher",
-                 "image":"ionibowcher.png"
-              },
-              "balance":67126
-           },
-           {
-              "id":1032,
-              "name":"Ernie Stenseth",
-              "country":{
-                 "name":"Australia",
-                 "code":"au"
-              },
-              "company":"Knwz Newsradio",
-              "date":"2018-06-06",
-              "status":"renewal",
-              "verified":true,
-              "activity":68,
-              "representative":{
-                 "name":"Xuxue Feng",
-                 "image":"xuxuefeng.png"
-              },
-              "balance":76017
-           },
-           {
-              "id":1033,
-              "name":"Albina Glick",
-              "country":{
-                 "name":"Ukraine",
-                 "code":"ua"
-              },
-              "company":"Giampetro, Anthony D",
-              "date":"2019-08-08",
-              "status":"proposal",
-              "verified":true,
-              "activity":85,
-              "representative":{
-                 "name":"Bernardo Dominic",
-                 "image":"bernardodominic.png"
-              },
-              "balance":91201
-           },
-           {
-              "id":1034,
-              "name":"Alishia Sergi",
-              "country":{
-                 "name":"Qatar",
-                 "code":"qa"
-              },
-              "company":"Milford Enterprises Inc",
-              "date":"2018-05-19",
-              "status":"negotiation",
-              "verified":false,
-              "activity":46,
-              "representative":{
-                 "name":"Ivan Magalhaes",
-                 "image":"ivanmagalhaes.png"
-              },
-              "balance":12237
-           },
-           {
-              "id":1035,
-              "name":"Solange Shinko",
-              "country":{
-                 "name":"Cameroon",
-                 "code":"cm"
-              },
-              "company":"Mosocco, Ronald A",
-              "date":"2015-02-12",
-              "status":"qualified",
-              "verified":true,
-              "activity":32,
-              "representative":{
-                 "name":"Onyama Limba",
-                 "image":"onyamalimba.png"
-              },
-              "balance":34072
-           },
-           {
-              "id":1036,
-              "name":"Jose Stockham",
-              "country":{
-                 "name":"Italy",
-                 "code":"it"
-              },
-              "company":"Tri State Refueler Co",
-              "date":"2018-04-25",
-              "status":"qualified",
-              "verified":true,
-              "activity":77,
-              "representative":{
-                 "name":"Amy Elsner",
-                 "image":"amyelsner.png"
-              },
-              "balance":94909
-           },
-           {
-              "id":1037,
-              "name":"Rozella Ostrosky",
-              "country":{
-                 "name":"Venezuela",
-                 "code":"ve"
-              },
-              "company":"Parkway Company",
-              "date":"2016-02-27",
-              "status":"unqualified",
-              "verified":true,
-              "activity":66,
-              "representative":{
-                 "name":"Amy Elsner",
-                 "image":"amyelsner.png"
-              },
-              "balance":57245
-           },
-           {
-              "id":1038,
-              "name":"Valentine Gillian",
-              "country":{
-                 "name":"Paraguay",
-                 "code":"py"
-              },
-              "company":"Fbs Business Finance",
-              "date":"2019-09-17",
-              "status":"qualified",
-              "verified":true,
-              "activity":25,
-              "representative":{
-                 "name":"Bernardo Dominic",
-                 "image":"bernardodominic.png"
-              },
-              "balance":75502
-           },
-           {
-              "id":1039,
-              "name":"Kati Rulapaugh",
-              "country":{
-                 "name":"Puerto Rico",
-                 "code":"pr"
-              },
-              "company":"Eder Assocs Consltng Engrs Pc",
-              "date":"2016-12-03",
-              "status":"renewal",
-              "verified":false,
-              "activity":51,
-              "representative":{
-                 "name":"Ioni Bowcher",
-                 "image":"ionibowcher.png"
-              },
-              "balance":82075
-           },
-           {
-              "id":1040,
-              "name":"Youlanda Schemmer",
-              "country":{
-                 "name":"Bolivia",
-                 "code":"bo"
-              },
-              "company":"Tri M Tool Inc",
-              "date":"2017-12-15",
-              "status":"negotiation",
-              "verified":true,
-              "activity":49,
-              "representative":{
-                 "name":"Xuxue Feng",
-                 "image":"xuxuefeng.png"
-              },
-              "balance":19208
-           },
-           {
-              "id":1041,
-              "name":"Dyan Oldroyd",
-              "country":{
-                 "name":"Argentina",
-                 "code":"ar"
-              },
-              "company":"International Eyelets Inc",
-              "date":"2017-02-02",
-              "status":"qualified",
-              "verified":false,
-              "activity":5,
-              "representative":{
-                 "name":"Amy Elsner",
-                 "image":"amyelsner.png"
-              },
-              "balance":50194
-           },
-           {
-              "id":1042,
-              "name":"Roxane Campain",
-              "country":{
-                 "name":"France",
-                 "code":"fr"
-              },
-              "company":"Rapid Trading Intl",
-              "date":"2018-12-25",
-              "status":"unqualified",
-              "verified":false,
-              "activity":100,
-              "representative":{
-                 "name":"Anna Fali",
-                 "image":"annafali.png"
-              },
-              "balance":77714
-           },
-           {
-              "id":1043,
-              "name":"Lavera Perin",
-              "country":{
-                 "name":"Vietnam",
-                 "code":"vn"
-              },
-              "company":"Abc Enterprises Inc",
-              "date":"2018-04-10",
-              "status":"qualified",
-              "verified":false,
-              "activity":71,
-              "representative":{
-                 "name":"Stephen Shaw",
-                 "image":"stephenshaw.png"
-              },
-              "balance":35740
-           },
-           {
-              "id":1044,
-              "name":"Erick Ferencz",
-              "country":{
-                 "name":"Belgium",
-                 "code":"be"
-              },
-              "company":"Cindy Turner Associates",
-              "date":"2018-05-06",
-              "status":"unqualified",
-              "verified":true,
-              "activity":54,
-              "representative":{
-                 "name":"Amy Elsner",
-                 "image":"amyelsner.png"
-              },
-              "balance":30790
-           },
-           {
-              "id":1045,
-              "name":"Fatima Saylors",
-              "country":{
-                 "name":"Canada",
-                 "code":"ca"
-              },
-              "company":"Stanton, James D Esq",
-              "date":"2019-07-10",
-              "status":"renewal",
-              "verified":true,
-              "activity":93,
-              "representative":{
-                 "name":"Onyama Limba",
-                 "image":"onyamalimba.png"
-              },
-              "balance":52343
-           },
-           {
-              "id":1046,
-              "name":"Jina Briddick",
-              "country":{
-                 "name":"Mexico",
-                 "code":"mx"
-              },
-              "company":"Grace Pastries Inc",
-              "date":"2018-02-19",
-              "status":"unqualified",
-              "verified":false,
-              "activity":97,
-              "representative":{
-                 "name":"Xuxue Feng",
-                 "image":"xuxuefeng.png"
-              },
-              "balance":53966
-           },
-           {
-              "id":1047,
-              "name":"Kanisha Waycott",
-              "country":{
-                 "name":"Ecuador",
-                 "code":"ec"
-              },
-              "company":"Schroer, Gene E Esq",
-              "date":"2019-11-27",
-              "status":"new",
-              "verified":false,
-              "activity":80,
-              "representative":{
-                 "name":"Xuxue Feng",
-                 "image":"xuxuefeng.png"
-              },
-              "balance":9920
-           },
-           {
-              "id":1048,
-              "name":"Emerson Bowley",
-              "country":{
-                 "name":"Finland",
-                 "code":"fi"
-              },
-              "company":"Knights Inn",
-              "date":"2018-11-24",
-              "status":"new",
-              "verified":false,
-              "activity":63,
-              "representative":{
-                 "name":"Stephen Shaw",
-                 "image":"stephenshaw.png"
-              },
-              "balance":78069
-           },
-           {
-              "id":1049,
-              "name":"Blair Malet",
-              "country":{
-                 "name":"Finland",
-                 "code":"fi"
-              },
-              "company":"Bollinger Mach Shp & Shipyard",
-              "date":"2018-04-19",
-              "status":"new",
-              "verified":true,
-              "activity":92,
-              "representative":{
-                 "name":"Asiya Javayant",
-                 "image":"asiyajavayant.png"
-              },
-              "balance":65005
-           },
-           {
-              "id":1050,
-              "name":"Brock Bolognia",
-              "country":{
-                 "name":"Bolivia",
-                 "code":"bo"
-              },
-              "company":"Orinda News",
-              "date":"2019-09-06",
-              "status":"renewal",
-              "verified":true,
-              "activity":72,
-              "representative":{
-                 "name":"Onyama Limba",
-                 "image":"onyamalimba.png"
-              },
-              "balance":51038
-           },
-           {
-              "id":1051,
-              "name":"Lorrie Nestle",
-              "country":{
-                 "name":"Germany",
-                 "code":"de"
-              },
-              "company":"Ballard Spahr Andrews",
-              "date":"2018-04-26",
-              "status":"renewal",
-              "verified":false,
-              "activity":36,
-              "representative":{
-                 "name":"Anna Fali",
-                 "image":"annafali.png"
-              },
-              "balance":28218
-           },
-           {
-              "id":1052,
-              "name":"Sabra Uyetake",
-              "country":{
-                 "name":"Peru",
-                 "code":"pe"
-              },
-              "company":"Lowy Limousine Service",
-              "date":"2018-04-12",
-              "status":"new",
-              "verified":false,
-              "activity":31,
-              "representative":{
-                 "name":"Amy Elsner",
-                 "image":"amyelsner.png"
-              },
-              "balance":78527
-           },
-           {
-              "id":1053,
-              "name":"Marjory Mastella",
-              "country":{
-                 "name":"Netherlands",
-                 "code":"nl"
-              },
-              "company":"Vicon Corporation",
-              "date":"2018-01-24",
-              "status":"negotiation",
-              "verified":false,
-              "activity":89,
-              "representative":{
-                 "name":"Anna Fali",
-                 "image":"annafali.png"
-              },
-              "balance":23381
-           },
-           {
-              "id":1054,
-              "name":"Karl Klonowski",
-              "country":{
-                 "name":"Saudi Arabia",
-                 "code":"sa"
-              },
-              "company":"Rossi, Michael M",
-              "date":"2017-04-17",
-              "status":"unqualified",
-              "verified":true,
-              "activity":27,
-              "representative":{
-                 "name":"Onyama Limba",
-                 "image":"onyamalimba.png"
-              },
-              "balance":64821
-           },
-           {
-              "id":1055,
-              "name":"Tonette Wenner",
-              "country":{
-                 "name":"Australia",
-                 "code":"au"
-              },
-              "company":"Northwest Publishing",
-              "date":"2019-04-14",
-              "status":"qualified",
-              "verified":false,
-              "activity":27,
-              "representative":{
-                 "name":"Elwin Sharvill",
-                 "image":"elwinsharvill.png"
-              },
-              "balance":55334
-           },
-           {
-              "id":1056,
-              "name":"Amber Monarrez",
-              "country":{
-                 "name":"Sweden",
-                 "code":"se"
-              },
-              "company":"Branford Wire & Mfg Co",
-              "date":"2019-09-09",
-              "status":"new",
-              "verified":false,
-              "activity":79,
-              "representative":{
-                 "name":"Bernardo Dominic",
-                 "image":"bernardodominic.png"
-              },
-              "balance":83391
-           },
-           {
-              "id":1057,
-              "name":"Shenika Seewald",
-              "country":{
-                 "name":"Australia",
-                 "code":"au"
-              },
-              "company":"East Coast Marketing",
-              "date":"2017-02-18",
-              "status":"renewal",
-              "verified":true,
-              "activity":39,
-              "representative":{
-                 "name":"Xuxue Feng",
-                 "image":"xuxuefeng.png"
-              },
-              "balance":31580
-           },
-           {
-              "id":1058,
-              "name":"Delmy Ahle",
-              "country":{
-                 "name":"Belgium",
-                 "code":"be"
-              },
-              "company":"Wye Technologies Inc",
-              "date":"2020-10-05",
-              "status":"unqualified",
-              "verified":false,
-              "activity":55,
-              "representative":{
-                 "name":"Anna Fali",
-                 "image":"annafali.png"
-              },
-              "balance":11723
-           },
-           {
-              "id":1059,
-              "name":"Deeanna Juhas",
-              "country":{
-                 "name":"Sweden",
-                 "code":"se"
-              },
-              "company":"Healy, George W Iv",
-              "date":"2018-09-28",
-              "status":"negotiation",
-              "verified":false,
-              "activity":79,
-              "representative":{
-                 "name":"Asiya Javayant",
-                 "image":"asiyajavayant.png"
-              },
-              "balance":8454
-           },
-           {
-              "id":1060,
-              "name":"Blondell Pugh",
-              "country":{
-                 "name":"Ireland",
-                 "code":"ie"
-              },
-              "company":"Alpenlite Inc",
-              "date":"2016-06-16",
-              "status":"renewal",
-              "verified":false,
-              "activity":49,
-              "representative":{
-                 "name":"Bernardo Dominic",
-                 "image":"bernardodominic.png"
-              },
-              "balance":99235
-           },
-           {
-              "id":1061,
-              "name":"Jamal Vanausdal",
-              "country":{
-                 "name":"Morocco",
-                 "code":"ma"
-              },
-              "company":"Hubbard, Bruce Esq",
-              "date":"2017-05-25",
-              "status":"proposal",
-              "verified":true,
-              "activity":87,
-              "representative":{
-                 "name":"Ioni Bowcher",
-                 "image":"ionibowcher.png"
-              },
-              "balance":15656
-           },
-           {
-              "id":1062,
-              "name":"Cecily Hollack",
-              "country":{
-                 "name":"Bolivia",
-                 "code":"bo"
-              },
-              "company":"Arthur A Oliver & Son Inc",
-              "date":"2020-05-09",
-              "status":"negotiation",
-              "verified":true,
-              "activity":5,
-              "representative":{
-                 "name":"Amy Elsner",
-                 "image":"amyelsner.png"
-              },
-              "balance":60586
-           },
-           {
-              "id":1063,
-              "name":"Carmelina Lindall",
-              "country":{
-                 "name":"Puerto Rico",
-                 "code":"pr"
-              },
-              "company":"George Jessop Carter Jewelers",
-              "date":"2019-09-07",
-              "status":"qualified",
-              "verified":true,
-              "activity":77,
-              "representative":{
-                 "name":"Asiya Javayant",
-                 "image":"asiyajavayant.png"
-              },
-              "balance":86239
-           },
-           {
-              "id":1064,
-              "name":"Maurine Yglesias",
-              "country":{
-                 "name":"Taiwan",
-                 "code":"tw"
-              },
-              "company":"Schultz, Thomas C Md",
-              "date":"2015-08-10",
-              "status":"renewal",
-              "verified":false,
-              "activity":94,
-              "representative":{
-                 "name":"Ioni Bowcher",
-                 "image":"ionibowcher.png"
-              },
-              "balance":15621
-           },
-           {
-              "id":1065,
-              "name":"Tawna Buvens",
-              "country":{
-                 "name":"Indonesia",
-                 "code":"id"
-              },
-              "company":"H H H Enterprises Inc",
-              "date":"2018-03-20",
-              "status":"new",
-              "verified":false,
-              "activity":25,
-              "representative":{
-                 "name":"Amy Elsner",
-                 "image":"amyelsner.png"
-              },
-              "balance":77248
-           },
-           {
-              "id":1066,
-              "name":"Penney Weight",
-              "country":{
-                 "name":"South Africa",
-                 "code":"za"
-              },
-              "company":"Hawaiian King Hotel",
-              "date":"2020-03-03",
-              "status":"qualified",
-              "verified":false,
-              "activity":96,
-              "representative":{
-                 "name":"Amy Elsner",
-                 "image":"amyelsner.png"
-              },
-              "balance":478
-           },
-           {
-              "id":1067,
-              "name":"Elly Morocco",
-              "country":{
-                 "name":"Thailand",
-                 "code":"th"
-              },
-              "company":"Killion Industries",
-              "date":"2018-09-18",
-              "status":"qualified",
-              "verified":true,
-              "activity":38,
-              "representative":{
-                 "name":"Xuxue Feng",
-                 "image":"xuxuefeng.png"
-              },
-              "balance":62505
-           },
-           {
-              "id":1068,
-              "name":"Ilene Eroman",
-              "country":{
-                 "name":"Netherlands",
-                 "code":"nl"
-              },
-              "company":"Robinson, William J Esq",
-              "date":"2019-06-08",
-              "status":"new",
-              "verified":true,
-              "activity":49,
-              "representative":{
-                 "name":"Anna Fali",
-                 "image":"annafali.png"
-              },
-              "balance":91480
-           },
-           {
-              "id":1069,
-              "name":"Vallie Mondella",
-              "country":{
-                 "name":"Latvia",
-                 "code":"lv"
-              },
-              "company":"Private Properties",
-              "date":"2018-12-06",
-              "status":"new",
-              "verified":false,
-              "activity":16,
-              "representative":{
-                 "name":"Ivan Magalhaes",
-                 "image":"ivanmagalhaes.png"
-              },
-              "balance":21671
-           },
-           {
-              "id":1070,
-              "name":"Kallie Blackwood",
-              "country":{
-                 "name":"Iceland",
-                 "code":"is"
-              },
-              "company":"Rowley Schlimgen Inc",
-              "date":"2017-04-05",
-              "status":"unqualified",
-              "verified":false,
-              "activity":25,
-              "representative":{
-                 "name":"Amy Elsner",
-                 "image":"amyelsner.png"
-              },
-              "balance":13775
-           },
-           {
-              "id":1071,
-              "name":"Johnetta Abdallah",
-              "country":{
-                 "name":"Netherlands",
-                 "code":"nl"
-              },
-              "company":"Forging Specialties",
-              "date":"2015-02-02",
-              "status":"new",
-              "verified":false,
-              "activity":16,
-              "representative":{
-                 "name":"Elwin Sharvill",
-                 "image":"elwinsharvill.png"
-              },
-              "balance":60253
-           },
-           {
-              "id":1072,
-              "name":"Bobbye Rhym",
-              "country":{
-                 "name":"Ukraine",
-                 "code":"ua"
-              },
-              "company":"Smits, Patricia Garity",
-              "date":"2018-08-17",
-              "status":"qualified",
-              "verified":true,
-              "activity":85,
-              "representative":{
-                 "name":"Xuxue Feng",
-                 "image":"xuxuefeng.png"
-              },
-              "balance":75225
-           },
-           {
-              "id":1073,
-              "name":"Micaela Rhymes",
-              "country":{
-                 "name":"France",
-                 "code":"fr"
-              },
-              "company":"H Lee Leonard Attorney At Law",
-              "date":"2018-09-08",
-              "status":"renewal",
-              "verified":true,
-              "activity":92,
-              "representative":{
-                 "name":"Asiya Javayant",
-                 "image":"asiyajavayant.png"
-              },
-              "balance":3308
-           },
-           {
-              "id":1074,
-              "name":"Tamar Hoogland",
-              "country":{
-                 "name":"Guatemala",
-                 "code":"gt"
-              },
-              "company":"A K Construction Co",
-              "date":"2018-11-13",
-              "status":"proposal",
-              "verified":true,
-              "activity":22,
-              "representative":{
-                 "name":"Asiya Javayant",
-                 "image":"asiyajavayant.png"
-              },
-              "balance":19711
-           },
-           {
-              "id":1075,
-              "name":"Moon Parlato",
-              "country":{
-                 "name":"Czech Republic",
-                 "code":"cz"
-              },
-              "company":"Ambelang, Jessica M Md",
-              "date":"2019-08-18",
-              "status":"renewal",
-              "verified":false,
-              "activity":64,
-              "representative":{
-                 "name":"Onyama Limba",
-                 "image":"onyamalimba.png"
-              },
-              "balance":55110
-           },
-           {
-              "id":1076,
-              "name":"Laurel Reitler",
-              "country":{
-                 "name":"United Kingdom",
-                 "code":"gb"
-              },
-              "company":"Q A Service",
-              "date":"2015-04-02",
-              "status":"negotiation",
-              "verified":false,
-              "activity":80,
-              "representative":{
-                 "name":"Amy Elsner",
-                 "image":"amyelsner.png"
-              },
-              "balance":62392
-           },
-           {
-              "id":1077,
-              "name":"Delisa Crupi",
-              "country":{
-                 "name":"Taiwan",
-                 "code":"tw"
-              },
-              "company":"Wood & Whitacre Contractors",
-              "date":"2017-09-15",
-              "status":"unqualified",
-              "verified":false,
-              "activity":70,
-              "representative":{
-                 "name":"Xuxue Feng",
-                 "image":"xuxuefeng.png"
-              },
-              "balance":76530
-           },
-           {
-              "id":1078,
-              "name":"Viva Toelkes",
-              "country":{
-                 "name":"United States",
-                 "code":"us"
-              },
-              "company":"Mark Iv Press Ltd",
-              "date":"2017-03-27",
-              "status":"qualified",
-              "verified":false,
-              "activity":16,
-              "representative":{
-                 "name":"Stephen Shaw",
-                 "image":"stephenshaw.png"
-              },
-              "balance":7460
-           },
-           {
-              "id":1079,
-              "name":"Elza Lipke",
-              "country":{
-                 "name":"Ireland",
-                 "code":"ie"
-              },
-              "company":"Museum Of Science & Industry",
-              "date":"2017-06-01",
-              "status":"proposal",
-              "verified":true,
-              "activity":90,
-              "representative":{
-                 "name":"Elwin Sharvill",
-                 "image":"elwinsharvill.png"
-              },
-              "balance":42251
-           },
-           {
-              "id":1080,
-              "name":"Devorah Chickering",
-              "country":{
-                 "name":"Spain",
-                 "code":"es"
-              },
-              "company":"Garrison Ind",
-              "date":"2017-03-14",
-              "status":"proposal",
-              "verified":true,
-              "activity":96,
-              "representative":{
-                 "name":"Asiya Javayant",
-                 "image":"asiyajavayant.png"
-              },
-              "balance":36435
-           },
-           {
-              "id":1081,
-              "name":"Timothy Mulqueen",
-              "country":{
-                 "name":"Netherlands",
-                 "code":"nl"
-              },
-              "company":"Saronix Nymph Products",
-              "date":"2018-07-09",
-              "status":"renewal",
-              "verified":true,
-              "activity":77,
-              "representative":{
-                 "name":"Asiya Javayant",
-                 "image":"asiyajavayant.png"
-              },
-              "balance":39197
-           },
-           {
-              "id":1082,
-              "name":"Arlette Honeywell",
-              "country":{
-                 "name":"Panama",
-                 "code":"pa"
-              },
-              "company":"Smc Inc",
-              "date":"2018-09-11",
-              "status":"proposal",
-              "verified":true,
-              "activity":46,
-              "representative":{
-                 "name":"Amy Elsner",
-                 "image":"amyelsner.png"
-              },
-              "balance":72707
-           },
-           {
-              "id":1083,
-              "name":"Dominque Dickerson",
-              "country":{
-                 "name":"Argentina",
-                 "code":"ar"
-              },
-              "company":"E A I Electronic Assocs Inc",
-              "date":"2017-11-12",
-              "status":"qualified",
-              "verified":true,
-              "activity":83,
-              "representative":{
-                 "name":"Bernardo Dominic",
-                 "image":"bernardodominic.png"
-              },
-              "balance":97965
-           },
-           {
-              "id":1084,
-              "name":"Lettie Isenhower",
-              "country":{
-                 "name":"Canada",
-                 "code":"ca"
-              },
-              "company":"Conte, Christopher A Esq",
-              "date":"2016-03-01",
-              "status":"qualified",
-              "verified":true,
-              "activity":83,
-              "representative":{
-                 "name":"Bernardo Dominic",
-                 "image":"bernardodominic.png"
-              },
-              "balance":5823
-           },
-           {
-              "id":1085,
-              "name":"Myra Munns",
-              "country":{
-                 "name":"Lithuania",
-                 "code":"lt"
-              },
-              "company":"Anker Law Office",
-              "date":"2016-05-21",
-              "status":"unqualified",
-              "verified":true,
-              "activity":49,
-              "representative":{
-                 "name":"Elwin Sharvill",
-                 "image":"elwinsharvill.png"
-              },
-              "balance":96471
-           },
-           {
-              "id":1086,
-              "name":"Stephaine Barfield",
-              "country":{
-                 "name":"Belgium",
-                 "code":"be"
-              },
-              "company":"Beutelschies & Company",
-              "date":"2016-01-22",
-              "status":"new",
-              "verified":true,
-              "activity":34,
-              "representative":{
-                 "name":"Anna Fali",
-                 "image":"annafali.png"
-              },
-              "balance":33710
-           },
-           {
-              "id":1087,
-              "name":"Lai Gato",
-              "country":{
-                 "name":"Nigeria",
-                 "code":"ng"
-              },
-              "company":"Fligg, Kenneth I Jr",
-              "date":"2016-07-26",
-              "status":"unqualified",
-              "verified":false,
-              "activity":64,
-              "representative":{
-                 "name":"Onyama Limba",
-                 "image":"onyamalimba.png"
-              },
-              "balance":30611
-           },
-           {
-              "id":1088,
-              "name":"Stephen Emigh",
-              "country":{
-                 "name":"Cuba",
-                 "code":"cu"
-              },
-              "company":"Sharp, J Daniel Esq",
-              "date":"2020-07-24",
-              "status":"renewal",
-              "verified":false,
-              "activity":51,
-              "representative":{
-                 "name":"Elwin Sharvill",
-                 "image":"elwinsharvill.png"
-              },
-              "balance":32960
-           },
-           {
-              "id":1089,
-              "name":"Tyra Shields",
-              "country":{
-                 "name":"Honduras",
-                 "code":"hn"
-              },
-              "company":"Assink, Anne H Esq",
-              "date":"2019-11-10",
-              "status":"negotiation",
-              "verified":false,
-              "activity":11,
-              "representative":{
-                 "name":"Anna Fali",
-                 "image":"annafali.png"
-              },
-              "balance":57423
-           },
-           {
-              "id":1090,
-              "name":"Tammara Wardrip",
-              "country":{
-                 "name":"Saudi Arabia",
-                 "code":"sa"
-              },
-              "company":"Jewel My Shop Inc",
-              "date":"2016-06-05",
-              "status":"renewal",
-              "verified":true,
-              "activity":64,
-              "representative":{
-                 "name":"Xuxue Feng",
-                 "image":"xuxuefeng.png"
-              },
-              "balance":23027
-           },
-           {
-              "id":1091,
-              "name":"Cory Gibes",
-              "country":{
-                 "name":"Malaysia",
-                 "code":"my"
-              },
-              "company":"Chinese Translation Resources",
-              "date":"2016-02-28",
-              "status":"new",
-              "verified":false,
-              "activity":44,
-              "representative":{
-                 "name":"Anna Fali",
-                 "image":"annafali.png"
-              },
-              "balance":84182
-           },
-           {
-              "id":1092,
-              "name":"Danica Bruschke",
-              "country":{
-                 "name":"Taiwan",
-                 "code":"tw"
-              },
-              "company":"Stevens, Charles T",
-              "date":"2018-12-13",
-              "status":"unqualified",
-              "verified":true,
-              "activity":62,
-              "representative":{
-                 "name":"Stephen Shaw",
-                 "image":"stephenshaw.png"
-              },
-              "balance":25237
-           },
-           {
-              "id":1093,
-              "name":"Wilda Giguere",
-              "country":{
-                 "name":"Iceland",
-                 "code":"is"
-              },
-              "company":"Mclaughlin, Luther W Cpa",
-              "date":"2017-06-16",
-              "status":"new",
-              "verified":true,
-              "activity":79,
-              "representative":{
-                 "name":"Asiya Javayant",
-                 "image":"asiyajavayant.png"
-              },
-              "balance":87736
-           },
-           {
-              "id":1094,
-              "name":"Elvera Benimadho",
-              "country":{
-                 "name":"Malaysia",
-                 "code":"my"
-              },
-              "company":"Tree Musketeers",
-              "date":"2019-02-17",
-              "status":"proposal",
-              "verified":true,
-              "activity":50,
-              "representative":{
-                 "name":"Onyama Limba",
-                 "image":"onyamalimba.png"
-              },
-              "balance":38674
-           },
-           {
-              "id":1095,
-              "name":"Carma Vanheusen",
-              "country":{
-                 "name":"Turkey",
-                 "code":"tr"
-              },
-              "company":"Springfield Div Oh Edison Co",
-              "date":"2019-11-26",
-              "status":"renewal",
-              "verified":false,
-              "activity":84,
-              "representative":{
-                 "name":"Stephen Shaw",
-                 "image":"stephenshaw.png"
-              },
-              "balance":67762
-           },
-           {
-              "id":1096,
-              "name":"Malinda Hochard",
-              "country":{
-                 "name":"Serbia",
-                 "code":"rs"
-              },
-              "company":"Logan Memorial Hospital",
-              "date":"2016-07-06",
-              "status":"new",
-              "verified":false,
-              "activity":88,
-              "representative":{
-                 "name":"Asiya Javayant",
-                 "image":"asiyajavayant.png"
-              },
-              "balance":81299
-           },
-           {
-              "id":1097,
-              "name":"Natalie Fern",
-              "country":{
-                 "name":"Canada",
-                 "code":"ca"
-              },
-              "company":"Kelly, Charles G Esq",
-              "date":"2019-10-02",
-              "status":"proposal",
-              "verified":true,
-              "activity":44,
-              "representative":{
-                 "name":"Amy Elsner",
-                 "image":"amyelsner.png"
-              },
-              "balance":64794
-           },
-           {
-              "id":1098,
-              "name":"Lisha Centini",
-              "country":{
-                 "name":"Netherlands",
-                 "code":"nl"
-              },
-              "company":"Industrial Paper Shredders Inc",
-              "date":"2018-07-05",
-              "status":"new",
-              "verified":true,
-              "activity":7,
-              "representative":{
-                 "name":"Ioni Bowcher",
-                 "image":"ionibowcher.png"
-              },
-              "balance":7815
-           },
-           {
-              "id":1099,
-              "name":"Arlene Klusman",
-              "country":{
-                 "name":"Jamaica",
-                 "code":"jm"
-              },
-              "company":"Beck Horizon Builders",
-              "date":"2018-05-14",
-              "status":"proposal",
-              "verified":true,
-              "activity":99,
-              "representative":{
-                 "name":"Elwin Sharvill",
-                 "image":"elwinsharvill.png"
-              },
-              "balance":37976
-           },
-           {
-              "id":1100,
-              "name":"Alease Buemi",
-              "country":{
-                 "name":"Costa Rica",
-                 "code":"cr"
-              },
-              "company":"Porto Cayo At Hawks Cay",
-              "date":"2018-03-14",
-              "status":"unqualified",
-              "verified":true,
-              "activity":0,
-              "representative":{
-                 "name":"Onyama Limba",
-                 "image":"onyamalimba.png"
-              },
-              "balance":59594
-           },
-           {
-              "id":1101,
-              "name":"Louisa Cronauer",
-              "country":{
-                 "name":"Costa Rica",
-                 "code":"cr"
-              },
-              "company":"Pacific Grove Museum Ntrl Hist",
-              "date":"2018-09-23",
-              "status":"qualified",
-              "verified":false,
-              "activity":3,
-              "representative":{
-                 "name":"Anna Fali",
-                 "image":"annafali.png"
-              },
-              "balance":92528
-           },
-           {
-              "id":1102,
-              "name":"Angella Cetta",
-              "country":{
-                 "name":"Vietnam",
-                 "code":"vn"
-              },
-              "company":"Bender & Hatley Pc",
-              "date":"2018-04-10",
-              "status":"qualified",
-              "verified":false,
-              "activity":88,
-              "representative":{
-                 "name":"Ivan Magalhaes",
-                 "image":"ivanmagalhaes.png"
-              },
-              "balance":58964
-           },
-           {
-              "id":1103,
-              "name":"Cyndy Goldammer",
-              "country":{
-                 "name":"Burkina Faso",
-                 "code":"bf"
-              },
-              "company":"Di Cristina J & Son",
-              "date":"2017-09-18",
-              "status":"unqualified",
-              "verified":false,
-              "activity":92,
-              "representative":{
-                 "name":"Stephen Shaw",
-                 "image":"stephenshaw.png"
-              },
-              "balance":65860
-           },
-           {
-              "id":1104,
-              "name":"Rosio Cork",
-              "country":{
-                 "name":"Singapore",
-                 "code":"sg"
-              },
-              "company":"Green Goddess",
-              "date":"2017-08-19",
-              "status":"negotiation",
-              "verified":true,
-              "activity":19,
-              "representative":{
-                 "name":"Asiya Javayant",
-                 "image":"asiyajavayant.png"
-              },
-              "balance":63863
-           },
-           {
-              "id":1105,
-              "name":"Celeste Korando",
-              "country":{
-                 "name":"Costa Rica",
-                 "code":"cr"
-              },
-              "company":"American Arts & Graphics",
-              "date":"2020-06-18",
-              "status":"proposal",
-              "verified":true,
-              "activity":21,
-              "representative":{
-                 "name":"Amy Elsner",
-                 "image":"amyelsner.png"
-              },
-              "balance":37510
-           },
-           {
-              "id":1106,
-              "name":"Twana Felger",
-              "country":{
-                 "name":"Croatia",
-                 "code":"hr"
-              },
-              "company":"Opryland Hotel",
-              "date":"2016-11-18",
-              "status":"negotiation",
-              "verified":false,
-              "activity":97,
-              "representative":{
-                 "name":"Ioni Bowcher",
-                 "image":"ionibowcher.png"
-              },
-              "balance":63876
-           },
-           {
-              "id":1107,
-              "name":"Estrella Samu",
-              "country":{
-                 "name":"Vietnam",
-                 "code":"vn"
-              },
-              "company":"Marking Devices Pubg Co",
-              "date":"2017-06-25",
-              "status":"unqualified",
-              "verified":false,
-              "activity":27,
-              "representative":{
-                 "name":"Bernardo Dominic",
-                 "image":"bernardodominic.png"
-              },
-              "balance":93263
-           },
-           {
-              "id":1108,
-              "name":"Donte Kines",
-              "country":{
-                 "name":"Slovakia",
-                 "code":"sk"
-              },
-              "company":"W Tc Industries Inc",
-              "date":"2019-02-16",
-              "status":"new",
-              "verified":true,
-              "activity":35,
-              "representative":{
-                 "name":"Onyama Limba",
-                 "image":"onyamalimba.png"
-              },
-              "balance":57198
-           },
-           {
-              "id":1109,
-              "name":"Tiffiny Steffensmeier",
-              "country":{
-                 "name":"Pakistan",
-                 "code":"pk"
-              },
-              "company":"Whitehall Robbins Labs Divsn",
-              "date":"2018-03-11",
-              "status":"new",
-              "verified":true,
-              "activity":81,
-              "representative":{
-                 "name":"Ivan Magalhaes",
-                 "image":"ivanmagalhaes.png"
-              },
-              "balance":89147
-           },
-           {
-              "id":1110,
-              "name":"Edna Miceli",
-              "country":{
-                 "name":"France",
-                 "code":"fr"
-              },
-              "company":"Sampler",
-              "date":"2017-10-15",
-              "status":"renewal",
-              "verified":true,
-              "activity":54,
-              "representative":{
-                 "name":"Asiya Javayant",
-                 "image":"asiyajavayant.png"
-              },
-              "balance":41466
-           },
-           {
-              "id":1111,
-              "name":"Sue Kownacki",
-              "country":{
-                 "name":"Jamaica",
-                 "code":"jm"
-              },
-              "company":"Juno Chefs Incorporated",
-              "date":"2017-03-17",
-              "status":"proposal",
-              "verified":false,
-              "activity":31,
-              "representative":{
-                 "name":"Onyama Limba",
-                 "image":"onyamalimba.png"
-              },
-              "balance":38918
-           },
-           {
-              "id":1112,
-              "name":"Jesusa Shin",
-              "country":{
-                 "name":"Ukraine",
-                 "code":"ua"
-              },
-              "company":"Carroccio, A Thomas Esq",
-              "date":"2017-04-06",
-              "status":"renewal",
-              "verified":false,
-              "activity":28,
-              "representative":{
-                 "name":"Bernardo Dominic",
-                 "image":"bernardodominic.png"
-              },
-              "balance":11397
-           },
-           {
-              "id":1113,
-              "name":"Rolland Francescon",
-              "country":{
-                 "name":"United Kingdom",
-                 "code":"gb"
-              },
-              "company":"Stanley, Richard L Esq",
-              "date":"2019-02-03",
-              "status":"qualified",
-              "verified":false,
-              "activity":45,
-              "representative":{
-                 "name":"Onyama Limba",
-                 "image":"onyamalimba.png"
-              },
-              "balance":40930
-           },
-           {
-              "id":1114,
-              "name":"Pamella Schmierer",
-              "country":{
-                 "name":"Belgium",
-                 "code":"be"
-              },
-              "company":"K Cs Cstm Mouldings Windows",
-              "date":"2016-09-22",
-              "status":"unqualified",
-              "verified":true,
-              "activity":34,
-              "representative":{
-                 "name":"Ioni Bowcher",
-                 "image":"ionibowcher.png"
-              },
-              "balance":40847
-           },
-           {
-              "id":1115,
-              "name":"Glory Kulzer",
-              "country":{
-                 "name":"Croatia",
-                 "code":"hr"
-              },
-              "company":"Comfort Inn",
-              "date":"2017-09-27",
-              "status":"unqualified",
-              "verified":true,
-              "activity":36,
-              "representative":{
-                 "name":"Onyama Limba",
-                 "image":"onyamalimba.png"
-              },
-              "balance":27832
-           },
-           {
-              "id":1116,
-              "name":"Shawna Palaspas",
-              "country":{
-                 "name":"Estonia",
-                 "code":"ee"
-              },
-              "company":"Windsor, James L Esq",
-              "date":"2017-06-25",
-              "status":"unqualified",
-              "verified":true,
-              "activity":69,
-              "representative":{
-                 "name":"Bernardo Dominic",
-                 "image":"bernardodominic.png"
-              },
-              "balance":89060
-           },
-           {
-              "id":1117,
-              "name":"Brandon Callaro",
-              "country":{
-                 "name":"Romania",
-                 "code":"ro"
-              },
-              "company":"Jackson Shields Yeiser",
-              "date":"2016-07-13",
-              "status":"proposal",
-              "verified":true,
-              "activity":55,
-              "representative":{
-                 "name":"Anna Fali",
-                 "image":"annafali.png"
-              },
-              "balance":52474
-           },
-           {
-              "id":1118,
-              "name":"Scarlet Cartan",
-              "country":{
-                 "name":"Panama",
-                 "code":"pa"
-              },
-              "company":"Box, J Calvin Esq",
-              "date":"2018-09-13",
-              "status":"renewal",
-              "verified":false,
-              "activity":1,
-              "representative":{
-                 "name":"Xuxue Feng",
-                 "image":"xuxuefeng.png"
-              },
-              "balance":19094
-           },
-           {
-              "id":1119,
-              "name":"Oretha Menter",
-              "country":{
-                 "name":"Panama",
-                 "code":"pa"
-              },
-              "company":"Custom Engineering Inc",
-              "date":"2017-09-11",
-              "status":"renewal",
-              "verified":false,
-              "activity":8,
-              "representative":{
-                 "name":"Elwin Sharvill",
-                 "image":"elwinsharvill.png"
-              },
-              "balance":93756
-           },
-           {
-              "id":1120,
-              "name":"Ty Smith",
-              "country":{
-                 "name":"United States",
-                 "code":"us"
-              },
-              "company":"Bresler Eitel Framg Gllry Ltd",
-              "date":"2019-07-06",
-              "status":"unqualified",
-              "verified":false,
-              "activity":50,
-              "representative":{
-                 "name":"Anna Fali",
-                 "image":"annafali.png"
-              },
-              "balance":77388
-           },
-           {
-              "id":1121,
-              "name":"Xuan Rochin",
-              "country":{
-                 "name":"Colombia",
-                 "code":"co"
-              },
-              "company":"Carol, Drake Sparks Esq",
-              "date":"2018-05-22",
-              "status":"proposal",
-              "verified":true,
-              "activity":77,
-              "representative":{
-                 "name":"Amy Elsner",
-                 "image":"amyelsner.png"
-              },
-              "balance":48759
-           },
-           {
-              "id":1122,
-              "name":"Lindsey Dilello",
-              "country":{
-                 "name":"Austria",
-                 "code":"at"
-              },
-              "company":"Biltmore Investors Bank",
-              "date":"2017-07-18",
-              "status":"renewal",
-              "verified":true,
-              "activity":65,
-              "representative":{
-                 "name":"Amy Elsner",
-                 "image":"amyelsner.png"
-              },
-              "balance":37568
-           },
-           {
-              "id":1123,
-              "name":"Devora Perez",
-              "country":{
-                 "name":"Uruguay",
-                 "code":"uy"
-              },
-              "company":"Desco Equipment Corp",
-              "date":"2017-10-09",
-              "status":"unqualified",
-              "verified":true,
-              "activity":30,
-              "representative":{
-                 "name":"Onyama Limba",
-                 "image":"onyamalimba.png"
-              },
-              "balance":4477
-           },
-           {
-              "id":1124,
-              "name":"Herman Demesa",
-              "country":{
-                 "name":"Paraguay",
-                 "code":"py"
-              },
-              "company":"Merlin Electric Co",
-              "date":"2019-05-23",
-              "status":"proposal",
-              "verified":true,
-              "activity":10,
-              "representative":{
-                 "name":"Asiya Javayant",
-                 "image":"asiyajavayant.png"
-              },
-              "balance":13764
-           },
-           {
-              "id":1125,
-              "name":"Rory Papasergi",
-              "country":{
-                 "name":"Egypt",
-                 "code":"eg"
-              },
-              "company":"Bailey Cntl Co Div Babcock",
-              "date":"2019-03-02",
-              "status":"qualified",
-              "verified":false,
-              "activity":22,
-              "representative":{
-                 "name":"Anna Fali",
-                 "image":"annafali.png"
-              },
-              "balance":68222
-           },
-           {
-              "id":1126,
-              "name":"Talia Riopelle",
-              "country":{
-                 "name":"Guatemala",
-                 "code":"gt"
-              },
-              "company":"Ford Brothers Wholesale Inc",
-              "date":"2017-02-18",
-              "status":"new",
-              "verified":false,
-              "activity":69,
-              "representative":{
-                 "name":"Elwin Sharvill",
-                 "image":"elwinsharvill.png"
-              },
-              "balance":29164
-           },
-           {
-              "id":1127,
-              "name":"Van Shire",
-              "country":{
-                 "name":"Netherlands",
-                 "code":"nl"
-              },
-              "company":"Cambridge Inn",
-              "date":"2020-05-12",
-              "status":"new",
-              "verified":false,
-              "activity":4,
-              "representative":{
-                 "name":"Ioni Bowcher",
-                 "image":"ionibowcher.png"
-              },
-              "balance":61651
-           },
-           {
-              "id":1128,
-              "name":"Lucina Lary",
-              "country":{
-                 "name":"Switzerland",
-                 "code":"ch"
-              },
-              "company":"Matricciani, Albert J Jr",
-              "date":"2019-11-20",
-              "status":"negotiation",
-              "verified":true,
-              "activity":11,
-              "representative":{
-                 "name":"Xuxue Feng",
-                 "image":"xuxuefeng.png"
-              },
-              "balance":79938
-           },
-           {
-              "id":1129,
-              "name":"Bok Isaacs",
-              "country":{
-                 "name":"Chile",
-                 "code":"cl"
-              },
-              "company":"Nelson Hawaiian Ltd",
-              "date":"2016-11-10",
-              "status":"proposal",
-              "verified":true,
-              "activity":41,
-              "representative":{
-                 "name":"Asiya Javayant",
-                 "image":"asiyajavayant.png"
-              },
-              "balance":44037
-           },
-           {
-              "id":1130,
-              "name":"Rolande Spickerman",
-              "country":{
-                 "name":"Panama",
-                 "code":"pa"
-              },
-              "company":"Neland Travel Agency",
-              "date":"2016-07-11",
-              "status":"renewal",
-              "verified":true,
-              "activity":84,
-              "representative":{
-                 "name":"Bernardo Dominic",
-                 "image":"bernardodominic.png"
-              },
-              "balance":89918
-           },
-           {
-              "id":1131,
-              "name":"Howard Paulas",
-              "country":{
-                 "name":"Indonesia",
-                 "code":"id"
-              },
-              "company":"Asendorf, J Alan Esq",
-              "date":"2017-07-17",
-              "status":"negotiation",
-              "verified":false,
-              "activity":22,
-              "representative":{
-                 "name":"Ioni Bowcher",
-                 "image":"ionibowcher.png"
-              },
-              "balance":32372
-           },
-           {
-              "id":1132,
-              "name":"Kimbery Madarang",
-              "country":{
-                 "name":"Senegal",
-                 "code":"sn"
-              },
-              "company":"Silberman, Arthur L Esq",
-              "date":"2018-08-19",
-              "status":"negotiation",
-              "verified":true,
-              "activity":63,
-              "representative":{
-                 "name":"Onyama Limba",
-                 "image":"onyamalimba.png"
-              },
-              "balance":46478
-           },
-           {
-              "id":1133,
-              "name":"Thurman Manno",
-              "country":{
-                 "name":"Colombia",
-                 "code":"co"
-              },
-              "company":"Honey Bee Breeding Genetics &",
-              "date":"2016-05-02",
-              "status":"qualified",
-              "verified":true,
-              "activity":47,
-              "representative":{
-                 "name":"Ivan Magalhaes",
-                 "image":"ivanmagalhaes.png"
-              },
-              "balance":30674
-           },
-           {
-              "id":1134,
-              "name":"Becky Mirafuentes",
-              "country":{
-                 "name":"Serbia",
-                 "code":"rs"
-              },
-              "company":"Wells Kravitz Schnitzer",
-              "date":"2018-04-13",
-              "status":"unqualified",
-              "verified":true,
-              "activity":62,
-              "representative":{
-                 "name":"Elwin Sharvill",
-                 "image":"elwinsharvill.png"
-              },
-              "balance":47714
-           },
-           {
-              "id":1135,
-              "name":"Beatriz Corrington",
-              "country":{
-                 "name":"South Africa",
-                 "code":"za"
-              },
-              "company":"Prohab Rehabilitation Servs",
-              "date":"2020-01-04",
-              "status":"renewal",
-              "verified":true,
-              "activity":55,
-              "representative":{
-                 "name":"Stephen Shaw",
-                 "image":"stephenshaw.png"
-              },
-              "balance":14307
-           },
-           {
-              "id":1136,
-              "name":"Marti Maybury",
-              "country":{
-                 "name":"Thailand",
-                 "code":"th"
-              },
-              "company":"Eldridge, Kristin K Esq",
-              "date":"2016-02-05",
-              "status":"unqualified",
-              "verified":false,
-              "activity":3,
-              "representative":{
-                 "name":"Bernardo Dominic",
-                 "image":"bernardodominic.png"
-              },
-              "balance":82069
-           },
-           {
-              "id":1137,
-              "name":"Nieves Gotter",
-              "country":{
-                 "name":"Latvia",
-                 "code":"lv"
-              },
-              "company":"Vlahos, John J Esq",
-              "date":"2017-03-12",
-              "status":"proposal",
-              "verified":false,
-              "activity":3,
-              "representative":{
-                 "name":"Elwin Sharvill",
-                 "image":"elwinsharvill.png"
-              },
-              "balance":11182
-           },
-           {
-              "id":1138,
-              "name":"Leatha Hagele",
-              "country":{
-                 "name":"Ukraine",
-                 "code":"ua"
-              },
-              "company":"Ninas Indian Grs & Videos",
-              "date":"2019-03-27",
-              "status":"unqualified",
-              "verified":false,
-              "activity":67,
-              "representative":{
-                 "name":"Stephen Shaw",
-                 "image":"stephenshaw.png"
-              },
-              "balance":17126
-           },
-           {
-              "id":1139,
-              "name":"Valentin Klimek",
-              "country":{
-                 "name":"Ivory Coast",
-                 "code":"ci"
-              },
-              "company":"Schmid, Gayanne K Esq",
-              "date":"2019-08-06",
-              "status":"unqualified",
-              "verified":true,
-              "activity":14,
-              "representative":{
-                 "name":"Ivan Magalhaes",
-                 "image":"ivanmagalhaes.png"
-              },
-              "balance":19724
-           },
-           {
-              "id":1140,
-              "name":"Melissa Wiklund",
-              "country":{
-                 "name":"Japan",
-                 "code":"jp"
-              },
-              "company":"Moapa Valley Federal Credit Un",
-              "date":"2018-03-20",
-              "status":"qualified",
-              "verified":true,
-              "activity":8,
-              "representative":{
-                 "name":"Onyama Limba",
-                 "image":"onyamalimba.png"
-              },
-              "balance":91888
-           },
-           {
-              "id":1141,
-              "name":"Sheridan Zane",
-              "country":{
-                 "name":"Croatia",
-                 "code":"hr"
-              },
-              "company":"Kentucky Tennessee Clay Co",
-              "date":"2016-02-15",
-              "status":"qualified",
-              "verified":true,
-              "activity":17,
-              "representative":{
-                 "name":"Bernardo Dominic",
-                 "image":"bernardodominic.png"
-              },
-              "balance":15016
-           },
-           {
-              "id":1142,
-              "name":"Bulah Padilla",
-              "country":{
-                 "name":"Philippines",
-                 "code":"ph"
-              },
-              "company":"Admiral Party Rentals & Sales",
-              "date":"2016-02-10",
-              "status":"proposal",
-              "verified":false,
-              "activity":58,
-              "representative":{
-                 "name":"Ioni Bowcher",
-                 "image":"ionibowcher.png"
-              },
-              "balance":23118
-           },
-           {
-              "id":1143,
-              "name":"Audra Kohnert",
-              "country":{
-                 "name":"Netherlands",
-                 "code":"nl"
-              },
-              "company":"Nelson, Karolyn King Esq",
-              "date":"2019-07-16",
-              "status":"unqualified",
-              "verified":false,
-              "activity":82,
-              "representative":{
-                 "name":"Bernardo Dominic",
-                 "image":"bernardodominic.png"
-              },
-              "balance":90560
-           },
-           {
-              "id":1144,
-              "name":"Daren Weirather",
-              "country":{
-                 "name":"Israel",
-                 "code":"il"
-              },
-              "company":"Panasystems",
-              "date":"2015-07-23",
-              "status":"negotiation",
-              "verified":false,
-              "activity":96,
-              "representative":{
-                 "name":"Onyama Limba",
-                 "image":"onyamalimba.png"
-              },
-              "balance":34155
-           },
-           {
-              "id":1145,
-              "name":"Fernanda Jillson",
-              "country":{
-                 "name":"Mexico",
-                 "code":"mx"
-              },
-              "company":"Shank, Edward L Esq",
-              "date":"2017-07-02",
-              "status":"unqualified",
-              "verified":true,
-              "activity":92,
-              "representative":{
-                 "name":"Xuxue Feng",
-                 "image":"xuxuefeng.png"
-              },
-              "balance":6350
-           },
-           {
-              "id":1146,
-              "name":"Gearldine Gellinger",
-              "country":{
-                 "name":"Egypt",
-                 "code":"eg"
-              },
-              "company":"Megibow & Edwards",
-              "date":"2019-08-17",
-              "status":"proposal",
-              "verified":true,
-              "activity":18,
-              "representative":{
-                 "name":"Anna Fali",
-                 "image":"annafali.png"
-              },
-              "balance":77641
-           },
-           {
-              "id":1147,
-              "name":"Chau Kitzman",
-              "country":{
-                 "name":"Paraguay",
-                 "code":"py"
-              },
-              "company":"Benoff, Edward Esq",
-              "date":"2019-07-04",
-              "status":"new",
-              "verified":true,
-              "activity":9,
-              "representative":{
-                 "name":"Onyama Limba",
-                 "image":"onyamalimba.png"
-              },
-              "balance":43289
-           },
-           {
-              "id":1148,
-              "name":"Theola Frey",
-              "country":{
-                 "name":"Vietnam",
-                 "code":"vn"
-              },
-              "company":"Woodbridge Free Public Library",
-              "date":"2020-03-14",
-              "status":"unqualified",
-              "verified":true,
-              "activity":44,
-              "representative":{
-                 "name":"Ioni Bowcher",
-                 "image":"ionibowcher.png"
-              },
-              "balance":85657
-           },
-           {
-              "id":1149,
-              "name":"Cheryl Haroldson",
-              "country":{
-                 "name":"France",
-                 "code":"fr"
-              },
-              "company":"New York Life John Thune",
-              "date":"2018-04-03",
-              "status":"new",
-              "verified":false,
-              "activity":55,
-              "representative":{
-                 "name":"Elwin Sharvill",
-                 "image":"elwinsharvill.png"
-              },
-              "balance":82733
-           },
-           {
-              "id":1150,
-              "name":"Laticia Merced",
-              "country":{
-                 "name":"Burkina Faso",
-                 "code":"bf"
-              },
-              "company":"Alinabal Inc",
-              "date":"2017-03-04",
-              "status":"unqualified",
-              "verified":false,
-              "activity":21,
-              "representative":{
-                 "name":"Ivan Magalhaes",
-                 "image":"ivanmagalhaes.png"
-              },
-              "balance":38004
-           },
-           {
-              "id":1151,
-              "name":"Carissa Batman",
-              "country":{
-                 "name":"Greece",
-                 "code":"gr"
-              },
-              "company":"Poletto, Kim David Esq",
-              "date":"2016-05-05",
-              "status":"negotiation",
-              "verified":true,
-              "activity":91,
-              "representative":{
-                 "name":"Ivan Magalhaes",
-                 "image":"ivanmagalhaes.png"
-              },
-              "balance":29038
-           },
-           {
-              "id":1152,
-              "name":"Lezlie Craghead",
-              "country":{
-                 "name":"Panama",
-                 "code":"pa"
-              },
-              "company":"Chang, Carolyn Esq",
-              "date":"2019-05-28",
-              "status":"renewal",
-              "verified":false,
-              "activity":30,
-              "representative":{
-                 "name":"Xuxue Feng",
-                 "image":"xuxuefeng.png"
-              },
-              "balance":75123
-           },
-           {
-              "id":1153,
-              "name":"Ozell Shealy",
-              "country":{
-                 "name":"Pakistan",
-                 "code":"pk"
-              },
-              "company":"Silver Bros Inc",
-              "date":"2016-08-19",
-              "status":"proposal",
-              "verified":true,
-              "activity":14,
-              "representative":{
-                 "name":"Bernardo Dominic",
-                 "image":"bernardodominic.png"
-              },
-              "balance":33214
-           },
-           {
-              "id":1154,
-              "name":"Arminda Parvis",
-              "country":{
-                 "name":"Indonesia",
-                 "code":"id"
-              },
-              "company":"Newtec Inc",
-              "date":"2020-02-09",
-              "status":"proposal",
-              "verified":true,
-              "activity":77,
-              "representative":{
-                 "name":"Elwin Sharvill",
-                 "image":"elwinsharvill.png"
-              },
-              "balance":80651
-           },
-           {
-              "id":1155,
-              "name":"Reita Leto",
-              "country":{
-                 "name":"Belgium",
-                 "code":"be"
-              },
-              "company":"Creative Business Systems",
-              "date":"2020-04-03",
-              "status":"unqualified",
-              "verified":true,
-              "activity":58,
-              "representative":{
-                 "name":"Ioni Bowcher",
-                 "image":"ionibowcher.png"
-              },
-              "balance":5085
-           },
-           {
-              "id":1156,
-              "name":"Yolando Luczki",
-              "country":{
-                 "name":"France",
-                 "code":"fr"
-              },
-              "company":"Dal Tile Corporation",
-              "date":"2015-01-27",
-              "status":"renewal",
-              "verified":true,
-              "activity":78,
-              "representative":{
-                 "name":"Ioni Bowcher",
-                 "image":"ionibowcher.png"
-              },
-              "balance":93021
-           },
-           {
-              "id":1157,
-              "name":"Lizette Stem",
-              "country":{
-                 "name":"Slovakia",
-                 "code":"sk"
-              },
-              "company":"Edward S Katz",
-              "date":"2018-08-06",
-              "status":"new",
-              "verified":false,
-              "activity":67,
-              "representative":{
-                 "name":"Stephen Shaw",
-                 "image":"stephenshaw.png"
-              },
-              "balance":37287
-           },
-           {
-              "id":1158,
-              "name":"Gregoria Pawlowicz",
-              "country":{
-                 "name":"Egypt",
-                 "code":"eg"
-              },
-              "company":"Oh My Goodknits Inc",
-              "date":"2020-02-20",
-              "status":"renewal",
-              "verified":false,
-              "activity":29,
-              "representative":{
-                 "name":"Stephen Shaw",
-                 "image":"stephenshaw.png"
-              },
-              "balance":73070
-           },
-           {
-              "id":1159,
-              "name":"Carin Deleo",
-              "country":{
-                 "name":"China",
-                 "code":"cn"
-              },
-              "company":"Redeker, Debbie",
-              "date":"2015-05-28",
-              "status":"qualified",
-              "verified":true,
-              "activity":13,
-              "representative":{
-                 "name":"Asiya Javayant",
-                 "image":"asiyajavayant.png"
-              },
-              "balance":64422
-           },
-           {
-              "id":1160,
-              "name":"Chantell Maynerich",
-              "country":{
-                 "name":"Estonia",
-                 "code":"ee"
-              },
-              "company":"Desert Sands Motel",
-              "date":"2016-09-05",
-              "status":"unqualified",
-              "verified":true,
-              "activity":75,
-              "representative":{
-                 "name":"Ivan Magalhaes",
-                 "image":"ivanmagalhaes.png"
-              },
-              "balance":36826
-           },
-           {
-              "id":1161,
-              "name":"Dierdre Yum",
-              "country":{
-                 "name":"Czech Republic",
-                 "code":"cz"
-              },
-              "company":"Cummins Southern Plains Inc",
-              "date":"2016-12-20",
-              "status":"negotiation",
-              "verified":true,
-              "activity":1,
-              "representative":{
-                 "name":"Onyama Limba",
-                 "image":"onyamalimba.png"
-              },
-              "balance":93101
-           },
-           {
-              "id":1162,
-              "name":"Larae Gudroe",
-              "country":{
-                 "name":"Slovenia",
-                 "code":"si"
-              },
-              "company":"Lehigh Furn Divsn Lehigh",
-              "date":"2015-11-28",
-              "status":"unqualified",
-              "verified":false,
-              "activity":13,
-              "representative":{
-                 "name":"Ioni Bowcher",
-                 "image":"ionibowcher.png"
-              },
-              "balance":60177
-           },
-           {
-              "id":1163,
-              "name":"Latrice Tolfree",
-              "country":{
-                 "name":"Jamaica",
-                 "code":"jm"
-              },
-              "company":"United Van Lines Agent",
-              "date":"2018-11-11",
-              "status":"renewal",
-              "verified":false,
-              "activity":73,
-              "representative":{
-                 "name":"Ioni Bowcher",
-                 "image":"ionibowcher.png"
-              },
-              "balance":47198
-           },
-           {
-              "id":1164,
-              "name":"Kerry Theodorov",
-              "country":{
-                 "name":"Romania",
-                 "code":"ro"
-              },
-              "company":"Capitol Reporters",
-              "date":"2016-11-05",
-              "status":"unqualified",
-              "verified":true,
-              "activity":76,
-              "representative":{
-                 "name":"Amy Elsner",
-                 "image":"amyelsner.png"
-              },
-              "balance":71305
-           },
-           {
-              "id":1165,
-              "name":"Dorthy Hidvegi",
-              "country":{
-                 "name":"Poland",
-                 "code":"pl"
-              },
-              "company":"Kwik Kopy Printing",
-              "date":"2020-08-13",
-              "status":"qualified",
-              "verified":true,
-              "activity":60,
-              "representative":{
-                 "name":"Ivan Magalhaes",
-                 "image":"ivanmagalhaes.png"
-              },
-              "balance":17526
-           },
-           {
-              "id":1166,
-              "name":"Fannie Lungren",
-              "country":{
-                 "name":"Belarus",
-                 "code":"by"
-              },
-              "company":"Centro Inc",
-              "date":"2015-07-06",
-              "status":"negotiation",
-              "verified":true,
-              "activity":24,
-              "representative":{
-                 "name":"Stephen Shaw",
-                 "image":"stephenshaw.png"
-              },
-              "balance":16596
-           },
-           {
-              "id":1167,
-              "name":"Evangelina Radde",
-              "country":{
-                 "name":"Ivory Coast",
-                 "code":"ci"
-              },
-              "company":"Campbell, Jan Esq",
-              "date":"2020-02-25",
-              "status":"unqualified",
-              "verified":true,
-              "activity":93,
-              "representative":{
-                 "name":"Anna Fali",
-                 "image":"annafali.png"
-              },
-              "balance":56870
-           },
-           {
-              "id":1168,
-              "name":"Novella Degroot",
-              "country":{
-                 "name":"Slovenia",
-                 "code":"si"
-              },
-              "company":"Evans, C Kelly Esq",
-              "date":"2017-12-19",
-              "status":"unqualified",
-              "verified":false,
-              "activity":30,
-              "representative":{
-                 "name":"Amy Elsner",
-                 "image":"amyelsner.png"
-              },
-              "balance":82928
-           },
-           {
-              "id":1169,
-              "name":"Clay Hoa",
-              "country":{
-                 "name":"Paraguay",
-                 "code":"py"
-              },
-              "company":"Scat Enterprises",
-              "date":"2016-02-22",
-              "status":"negotiation",
-              "verified":false,
-              "activity":93,
-              "representative":{
-                 "name":"Amy Elsner",
-                 "image":"amyelsner.png"
-              },
-              "balance":64181
-           },
-           {
-              "id":1170,
-              "name":"Jennifer Fallick",
-              "country":{
-                 "name":"Australia",
-                 "code":"au"
-              },
-              "company":"Nagle, Daniel J Esq",
-              "date":"2016-12-24",
-              "status":"unqualified",
-              "verified":true,
-              "activity":88,
-              "representative":{
-                 "name":"Bernardo Dominic",
-                 "image":"bernardodominic.png"
-              },
-              "balance":30561
-           },
-           {
-              "id":1171,
-              "name":"Irma Wolfgramm",
-              "country":{
-                 "name":"Belgium",
-                 "code":"be"
-              },
-              "company":"Serendiquity Bed & Breakfast",
-              "date":"2020-10-18",
-              "status":"negotiation",
-              "verified":true,
-              "activity":70,
-              "representative":{
-                 "name":"Stephen Shaw",
-                 "image":"stephenshaw.png"
-              },
-              "balance":24617
-           },
-           {
-              "id":1172,
-              "name":"Eun Coody",
-              "country":{
-                 "name":"Taiwan",
-                 "code":"tw"
-              },
-              "company":"Ray Carolyne Realty",
-              "date":"2018-02-12",
-              "status":"qualified",
-              "verified":true,
-              "activity":61,
-              "representative":{
-                 "name":"Ioni Bowcher",
-                 "image":"ionibowcher.png"
-              },
-              "balance":77860
-           },
-           {
-              "id":1173,
-              "name":"Sylvia Cousey",
-              "country":{
-                 "name":"Ireland",
-                 "code":"ie"
-              },
-              "company":"Berg, Charles E",
-              "date":"2018-06-10",
-              "status":"unqualified",
-              "verified":false,
-              "activity":91,
-              "representative":{
-                 "name":"Ioni Bowcher",
-                 "image":"ionibowcher.png"
-              },
-              "balance":25664
-           },
-           {
-              "id":1174,
-              "name":"Nana Wrinkles",
-              "country":{
-                 "name":"Austria",
-                 "code":"at"
-              },
-              "company":"Ray, Milbern D",
-              "date":"2017-04-11",
-              "status":"renewal",
-              "verified":true,
-              "activity":98,
-              "representative":{
-                 "name":"Asiya Javayant",
-                 "image":"asiyajavayant.png"
-              },
-              "balance":98113
-           },
-           {
-              "id":1175,
-              "name":"Layla Springe",
-              "country":{
-                 "name":"South Africa",
-                 "code":"za"
-              },
-              "company":"Chadds Ford Winery",
-              "date":"2019-07-27",
-              "status":"unqualified",
-              "verified":true,
-              "activity":97,
-              "representative":{
-                 "name":"Ioni Bowcher",
-                 "image":"ionibowcher.png"
-              },
-              "balance":14763
-           },
-           {
-              "id":1176,
-              "name":"Joesph Degonia",
-              "country":{
-                 "name":"Serbia",
-                 "code":"rs"
-              },
-              "company":"A R Packaging",
-              "date":"2020-04-23",
-              "status":"renewal",
-              "verified":true,
-              "activity":56,
-              "representative":{
-                 "name":"Elwin Sharvill",
-                 "image":"elwinsharvill.png"
-              },
-              "balance":31317
-           },
-           {
-              "id":1177,
-              "name":"Annabelle Boord",
-              "country":{
-                 "name":"Guatemala",
-                 "code":"gt"
-              },
-              "company":"Corn Popper",
-              "date":"2020-09-16",
-              "status":"proposal",
-              "verified":true,
-              "activity":76,
-              "representative":{
-                 "name":"Anna Fali",
-                 "image":"annafali.png"
-              },
-              "balance":30883
-           },
-           {
-              "id":1178,
-              "name":"Stephaine Vinning",
-              "country":{
-                 "name":"Australia",
-                 "code":"au"
-              },
-              "company":"Birite Foodservice Distr",
-              "date":"2016-05-14",
-              "status":"negotiation",
-              "verified":true,
-              "activity":43,
-              "representative":{
-                 "name":"Xuxue Feng",
-                 "image":"xuxuefeng.png"
-              },
-              "balance":93785
-           },
-           {
-              "id":1179,
-              "name":"Nelida Sawchuk",
-              "country":{
-                 "name":"South Africa",
-                 "code":"za"
-              },
-              "company":"Anchorage Museum Of Hist & Art",
-              "date":"2018-06-22",
-              "status":"qualified",
-              "verified":true,
-              "activity":58,
-              "representative":{
-                 "name":"Onyama Limba",
-                 "image":"onyamalimba.png"
-              },
-              "balance":68380
-           },
-           {
-              "id":1180,
-              "name":"Marguerita Hiatt",
-              "country":{
-                 "name":"United Kingdom",
-                 "code":"gb"
-              },
-              "company":"Haber, George D Md",
-              "date":"2018-10-25",
-              "status":"qualified",
-              "verified":false,
-              "activity":72,
-              "representative":{
-                 "name":"Anna Fali",
-                 "image":"annafali.png"
-              },
-              "balance":93454
-           },
-           {
-              "id":1181,
-              "name":"Carmela Cookey",
-              "country":{
-                 "name":"France",
-                 "code":"fr"
-              },
-              "company":"Royal Pontiac Olds Inc",
-              "date":"2018-07-19",
-              "status":"proposal",
-              "verified":false,
-              "activity":24,
-              "representative":{
-                 "name":"Xuxue Feng",
-                 "image":"xuxuefeng.png"
-              },
-              "balance":30570
-           },
-           {
-              "id":1182,
-              "name":"Junita Brideau",
-              "country":{
-                 "name":"Indonesia",
-                 "code":"id"
-              },
-              "company":"Leonards Antiques Inc",
-              "date":"2015-03-15",
-              "status":"proposal",
-              "verified":true,
-              "activity":86,
-              "representative":{
-                 "name":"Anna Fali",
-                 "image":"annafali.png"
-              },
-              "balance":79506
-           },
-           {
-              "id":1183,
-              "name":"Claribel Varriano",
-              "country":{
-                 "name":"Ecuador",
-                 "code":"ec"
-              },
-              "company":"Meca",
-              "date":"2017-04-14",
-              "status":"unqualified",
-              "verified":true,
-              "activity":15,
-              "representative":{
-                 "name":"Onyama Limba",
-                 "image":"onyamalimba.png"
-              },
-              "balance":8654
-           },
-           {
-              "id":1184,
-              "name":"Benton Skursky",
-              "country":{
-                 "name":"Iceland",
-                 "code":"is"
-              },
-              "company":"Nercon Engineering & Mfg Inc",
-              "date":"2015-02-19",
-              "status":"proposal",
-              "verified":true,
-              "activity":9,
-              "representative":{
-                 "name":"Asiya Javayant",
-                 "image":"asiyajavayant.png"
-              },
-              "balance":13368
-           },
-           {
-              "id":1185,
-              "name":"Hillary Skulski",
-              "country":{
-                 "name":"France",
-                 "code":"fr"
-              },
-              "company":"Replica I",
-              "date":"2016-03-25",
-              "status":"unqualified",
-              "verified":true,
-              "activity":82,
-              "representative":{
-                 "name":"Bernardo Dominic",
-                 "image":"bernardodominic.png"
-              },
-              "balance":92631
-           },
-           {
-              "id":1186,
-              "name":"Merilyn Bayless",
-              "country":{
-                 "name":"Jamaica",
-                 "code":"jm"
-              },
-              "company":"20 20 Printing Inc",
-              "date":"2020-10-13",
-              "status":"unqualified",
-              "verified":true,
-              "activity":13,
-              "representative":{
-                 "name":"Ivan Magalhaes",
-                 "image":"ivanmagalhaes.png"
-              },
-              "balance":4989
-           },
-           {
-              "id":1187,
-              "name":"Teri Ennaco",
-              "country":{
-                 "name":"Pakistan",
-                 "code":"pk"
-              },
-              "company":"Publishers Group West",
-              "date":"2019-12-21",
-              "status":"unqualified",
-              "verified":true,
-              "activity":57,
-              "representative":{
-                 "name":"Bernardo Dominic",
-                 "image":"bernardodominic.png"
-              },
-              "balance":77668
-           },
-           {
-              "id":1188,
-              "name":"Merlyn Lawler",
-              "country":{
-                 "name":"Germany",
-                 "code":"de"
-              },
-              "company":"Nischwitz, Jeffrey L Esq",
-              "date":"2016-02-26",
-              "status":"renewal",
-              "verified":true,
-              "activity":45,
-              "representative":{
-                 "name":"Ivan Magalhaes",
-                 "image":"ivanmagalhaes.png"
-              },
-              "balance":3525
-           },
-           {
-              "id":1189,
-              "name":"Georgene Montezuma",
-              "country":{
-                 "name":"Senegal",
-                 "code":"sn"
-              },
-              "company":"Payne Blades & Wellborn Pa",
-              "date":"2018-10-11",
-              "status":"new",
-              "verified":true,
-              "activity":64,
-              "representative":{
-                 "name":"Elwin Sharvill",
-                 "image":"elwinsharvill.png"
-              },
-              "balance":45838
-           },
-           {
-              "id":1190,
-              "name":"Jettie Mconnell",
-              "country":{
-                 "name":"Denmark",
-                 "code":"dk"
-              },
-              "company":"Coldwell Bnkr Wright Real Est",
-              "date":"2015-10-18",
-              "status":"negotiation",
-              "verified":false,
-              "activity":74,
-              "representative":{
-                 "name":"Ivan Magalhaes",
-                 "image":"ivanmagalhaes.png"
-              },
-              "balance":49148
-           },
-           {
-              "id":1191,
-              "name":"Lemuel Latzke",
-              "country":{
-                 "name":"Colombia",
-                 "code":"co"
-              },
-              "company":"Computer Repair Service",
-              "date":"2016-02-13",
-              "status":"proposal",
-              "verified":false,
-              "activity":79,
-              "representative":{
-                 "name":"Stephen Shaw",
-                 "image":"stephenshaw.png"
-              },
-              "balance":96709
-           },
-           {
-              "id":1192,
-              "name":"Melodie Knipp",
-              "country":{
-                 "name":"Finland",
-                 "code":"fi"
-              },
-              "company":"Fleetwood Building Block Inc",
-              "date":"2018-03-08",
-              "status":"negotiation",
-              "verified":false,
-              "activity":19,
-              "representative":{
-                 "name":"Asiya Javayant",
-                 "image":"asiyajavayant.png"
-              },
-              "balance":23253
-           },
-           {
-              "id":1193,
-              "name":"Candida Corbley",
-              "country":{
-                 "name":"Poland",
-                 "code":"pl"
-              },
-              "company":"Colts Neck Medical Assocs Inc",
-              "date":"2017-12-02",
-              "status":"negotiation",
-              "verified":true,
-              "activity":11,
-              "representative":{
-                 "name":"Onyama Limba",
-                 "image":"onyamalimba.png"
-              },
-              "balance":40836
-           },
-           {
-              "id":1194,
-              "name":"Karan Karpin",
-              "country":{
-                 "name":"Estonia",
-                 "code":"ee"
-              },
-              "company":"New England Taxidermy",
-              "date":"2019-01-07",
-              "status":"proposal",
-              "verified":true,
-              "activity":4,
-              "representative":{
-                 "name":"Stephen Shaw",
-                 "image":"stephenshaw.png"
-              },
-              "balance":60719
-           },
-           {
-              "id":1195,
-              "name":"Andra Scheyer",
-              "country":{
-                 "name":"Romania",
-                 "code":"ro"
-              },
-              "company":"Ludcke, George O Esq",
-              "date":"2016-08-14",
-              "status":"qualified",
-              "verified":true,
-              "activity":62,
-              "representative":{
-                 "name":"Elwin Sharvill",
-                 "image":"elwinsharvill.png"
-              },
-              "balance":17419
-           },
-           {
-              "id":1196,
-              "name":"Felicidad Poullion",
-              "country":{
-                 "name":"Greece",
-                 "code":"gr"
-              },
-              "company":"Mccorkle, Tom S Esq",
-              "date":"2016-03-05",
-              "status":"renewal",
-              "verified":true,
-              "activity":64,
-              "representative":{
-                 "name":"Elwin Sharvill",
-                 "image":"elwinsharvill.png"
-              },
-              "balance":94052
-           },
-           {
-              "id":1197,
-              "name":"Belen Strassner",
-              "country":{
-                 "name":"Ivory Coast",
-                 "code":"ci"
-              },
-              "company":"Eagle Software Inc",
-              "date":"2015-12-14",
-              "status":"qualified",
-              "verified":true,
-              "activity":91,
-              "representative":{
-                 "name":"Xuxue Feng",
-                 "image":"xuxuefeng.png"
-              },
-              "balance":54241
-           },
-           {
-              "id":1198,
-              "name":"Gracia Melnyk",
-              "country":{
-                 "name":"Costa Rica",
-                 "code":"cr"
-              },
-              "company":"Juvenile & Adult Super",
-              "date":"2019-06-01",
-              "status":"unqualified",
-              "verified":true,
-              "activity":40,
-              "representative":{
-                 "name":"Asiya Javayant",
-                 "image":"asiyajavayant.png"
-              },
-              "balance":87668
-           },
-           {
-              "id":1199,
-              "name":"Jolanda Hanafan",
-              "country":{
-                 "name":"Cameroon",
-                 "code":"cm"
-              },
-              "company":"Perez, Joseph J Esq",
-              "date":"2015-12-09",
-              "status":"qualified",
-              "verified":true,
-              "activity":27,
-              "representative":{
-                 "name":"Ivan Magalhaes",
-                 "image":"ivanmagalhaes.png"
-              },
-              "balance":99417
-           }
-        ]
-      }`,
+       "data":[
+          {
+             "id":1000,
+             "name":"James Butt",
+             "country":{
+                "name":"Algeria",
+                "code":"dz"
+             },
+             "company":"Benton, John B Jr",
+             "date":"2015-09-13",
+             "status":"unqualified",
+             "verified":true,
+             "activity":17,
+             "representative":{
+                "name":"Ioni Bowcher",
+                "image":"ionibowcher.png"
+             },
+             "balance":70663
+          },
+          {
+             "id":1001,
+             "name":"Josephine Darakjy",
+             "country":{
+                "name":"Egypt",
+                "code":"eg"
+             },
+             "company":"Chanay, Jeffrey A Esq",
+             "date":"2019-02-09",
+             "status":"proposal",
+             "verified":true,
+             "activity":0,
+             "representative":{
+                "name":"Amy Elsner",
+                "image":"amyelsner.png"
+             },
+             "balance":82429
+          },
+          {
+             "id":1002,
+             "name":"Art Venere",
+             "country":{
+                "name":"Panama",
+                "code":"pa"
+             },
+             "company":"Chemel, James L Cpa",
+             "date":"2017-05-13",
+             "status":"qualified",
+             "verified":false,
+             "activity":63,
+             "representative":{
+                "name":"Asiya Javayant",
+                "image":"asiyajavayant.png"
+             },
+             "balance":28334
+          },
+          {
+             "id":1003,
+             "name":"Lenna Paprocki",
+             "country":{
+                "name":"Slovenia",
+                "code":"si"
+             },
+             "company":"Feltz Printing Service",
+             "date":"2020-09-15",
+             "status":"new",
+             "verified":false,
+             "activity":37,
+             "representative":{
+                "name":"Xuxue Feng",
+                "image":"xuxuefeng.png"
+             },
+             "balance":88521
+          },
+          {
+             "id":1004,
+             "name":"Donette Foller",
+             "country":{
+                "name":"South Africa",
+                "code":"za"
+             },
+             "company":"Printing Dimensions",
+             "date":"2016-05-20",
+             "status":"proposal",
+             "verified":true,
+             "activity":33,
+             "representative":{
+                "name":"Asiya Javayant",
+                "image":"asiyajavayant.png"
+             },
+             "balance":93905
+          },
+          {
+             "id":1005,
+             "name":"Simona Morasca",
+             "country":{
+                "name":"Egypt",
+                "code":"eg"
+             },
+             "company":"Chapman, Ross E Esq",
+             "date":"2018-02-16",
+             "status":"qualified",
+             "verified":false,
+             "activity":68,
+             "representative":{
+                "name":"Ivan Magalhaes",
+                "image":"ivanmagalhaes.png"
+             },
+             "balance":50041
+          },
+          {
+             "id":1006,
+             "name":"Mitsue Tollner",
+             "country":{
+                "name":"Paraguay",
+                "code":"py"
+             },
+             "company":"Morlong Associates",
+             "date":"2018-02-19",
+             "status":"renewal",
+             "verified":true,
+             "activity":54,
+             "representative":{
+                "name":"Ivan Magalhaes",
+                "image":"ivanmagalhaes.png"
+             },
+             "balance":58706
+          },
+          {
+             "id":1007,
+             "name":"Leota Dilliard",
+             "country":{
+                "name":"Serbia",
+                "code":"rs"
+             },
+             "company":"Commercial Press",
+             "date":"2019-08-13",
+             "status":"renewal",
+             "verified":true,
+             "activity":69,
+             "representative":{
+                "name":"Onyama Limba",
+                "image":"onyamalimba.png"
+             },
+             "balance":26640
+          },
+          {
+             "id":1008,
+             "name":"Sage Wieser",
+             "country":{
+                "name":"Egypt",
+                "code":"eg"
+             },
+             "company":"Truhlar And Truhlar Attys",
+             "date":"2018-11-21",
+             "status":"unqualified",
+             "verified":true,
+             "activity":76,
+             "representative":{
+                "name":"Ivan Magalhaes",
+                "image":"ivanmagalhaes.png"
+             },
+             "balance":65369
+          },
+          {
+             "id":1009,
+             "name":"Kris Marrier",
+             "country":{
+                "name":"Mexico",
+                "code":"mx"
+             },
+             "company":"King, Christopher A Esq",
+             "date":"2015-07-07",
+             "status":"proposal",
+             "verified":false,
+             "activity":3,
+             "representative":{
+                "name":"Onyama Limba",
+                "image":"onyamalimba.png"
+             },
+             "balance":63451
+          },
+          {
+             "id":1010,
+             "name":"Minna Amigon",
+             "country":{
+                "name":"Romania",
+                "code":"ro"
+             },
+             "company":"Dorl, James J Esq",
+             "date":"2018-11-07",
+             "status":"qualified",
+             "verified":false,
+             "activity":38,
+             "representative":{
+                "name":"Anna Fali",
+                "image":"annafali.png"
+             },
+             "balance":71169
+          },
+          {
+             "id":1011,
+             "name":"Abel Maclead",
+             "country":{
+                "name":"Singapore",
+                "code":"sg"
+             },
+             "company":"Rangoni Of Florence",
+             "date":"2017-03-11",
+             "status":"qualified",
+             "verified":true,
+             "activity":87,
+             "representative":{
+                "name":"Bernardo Dominic",
+                "image":"bernardodominic.png"
+             },
+             "balance":96842
+          },
+          {
+             "id":1012,
+             "name":"Kiley Caldarera",
+             "country":{
+                "name":"Serbia",
+                "code":"rs"
+             },
+             "company":"Feiner Bros",
+             "date":"2015-10-20",
+             "status":"unqualified",
+             "verified":false,
+             "activity":80,
+             "representative":{
+                "name":"Onyama Limba",
+                "image":"onyamalimba.png"
+             },
+             "balance":92734
+          },
+          {
+             "id":1013,
+             "name":"Graciela Ruta",
+             "country":{
+                "name":"Chile",
+                "code":"cl"
+             },
+             "company":"Buckley Miller & Wright",
+             "date":"2016-07-25",
+             "status":"negotiation",
+             "verified":false,
+             "activity":59,
+             "representative":{
+                "name":"Amy Elsner",
+                "image":"amyelsner.png"
+             },
+             "balance":45250
+          },
+          {
+             "id":1014,
+             "name":"Cammy Albares",
+             "country":{
+                "name":"Philippines",
+                "code":"ph"
+             },
+             "company":"Rousseaux, Michael Esq",
+             "date":"2019-06-25",
+             "status":"new",
+             "verified":true,
+             "activity":90,
+             "representative":{
+                "name":"Asiya Javayant",
+                "image":"asiyajavayant.png"
+             },
+             "balance":30236
+          },
+          {
+             "id":1015,
+             "name":"Mattie Poquette",
+             "country":{
+                "name":"Venezuela",
+                "code":"ve"
+             },
+             "company":"Century Communications",
+             "date":"2017-12-12",
+             "status":"negotiation",
+             "verified":false,
+             "activity":52,
+             "representative":{
+                "name":"Anna Fali",
+                "image":"annafali.png"
+             },
+             "balance":64533
+          },
+          {
+             "id":1016,
+             "name":"Meaghan Garufi",
+             "country":{
+                "name":"Malaysia",
+                "code":"my"
+             },
+             "company":"Bolton, Wilbur Esq",
+             "date":"2018-07-04",
+             "status":"unqualified",
+             "verified":false,
+             "activity":31,
+             "representative":{
+                "name":"Ivan Magalhaes",
+                "image":"ivanmagalhaes.png"
+             },
+             "balance":37279
+          },
+          {
+             "id":1017,
+             "name":"Gladys Rim",
+             "country":{
+                "name":"Netherlands",
+                "code":"nl"
+             },
+             "company":"T M Byxbee Company Pc",
+             "date":"2020-02-27",
+             "status":"renewal",
+             "verified":true,
+             "activity":48,
+             "representative":{
+                "name":"Stephen Shaw",
+                "image":"stephenshaw.png"
+             },
+             "balance":27381
+          },
+          {
+             "id":1018,
+             "name":"Yuki Whobrey",
+             "country":{
+                "name":"Israel",
+                "code":"il"
+             },
+             "company":"Farmers Insurance Group",
+             "date":"2017-12-21",
+             "status":"negotiation",
+             "verified":true,
+             "activity":16,
+             "representative":{
+                "name":"Bernardo Dominic",
+                "image":"bernardodominic.png"
+             },
+             "balance":9257
+          },
+          {
+             "id":1019,
+             "name":"Fletcher Flosi",
+             "country":{
+                "name":"Argentina",
+                "code":"ar"
+             },
+             "company":"Post Box Services Plus",
+             "date":"2016-01-04",
+             "status":"renewal",
+             "verified":true,
+             "activity":19,
+             "representative":{
+                "name":"Xuxue Feng",
+                "image":"xuxuefeng.png"
+             },
+             "balance":67783
+          },
+          {
+             "id":1020,
+             "name":"Bette Nicka",
+             "country":{
+                "name":"Paraguay",
+                "code":"py"
+             },
+             "company":"Sport En Art",
+             "date":"2016-10-21",
+             "status":"renewal",
+             "verified":false,
+             "activity":100,
+             "representative":{
+                "name":"Onyama Limba",
+                "image":"onyamalimba.png"
+             },
+             "balance":4609
+          },
+          {
+             "id":1021,
+             "name":"Veronika Inouye",
+             "country":{
+                "name":"Ecuador",
+                "code":"ec"
+             },
+             "company":"C 4 Network Inc",
+             "date":"2017-03-24",
+             "status":"renewal",
+             "verified":false,
+             "activity":72,
+             "representative":{
+                "name":"Ioni Bowcher",
+                "image":"ionibowcher.png"
+             },
+             "balance":26565
+          },
+          {
+             "id":1022,
+             "name":"Willard Kolmetz",
+             "country":{
+                "name":"Tunisia",
+                "code":"tn"
+             },
+             "company":"Ingalls, Donald R Esq",
+             "date":"2017-04-15",
+             "status":"renewal",
+             "verified":true,
+             "activity":94,
+             "representative":{
+                "name":"Asiya Javayant",
+                "image":"asiyajavayant.png"
+             },
+             "balance":75876
+          },
+          {
+             "id":1023,
+             "name":"Maryann Royster",
+             "country":{
+                "name":"Belarus",
+                "code":"by"
+             },
+             "company":"Franklin, Peter L Esq",
+             "date":"2017-03-11",
+             "status":"qualified",
+             "verified":false,
+             "activity":56,
+             "representative":{
+                "name":"Elwin Sharvill",
+                "image":"elwinsharvill.png"
+             },
+             "balance":41121
+          },
+          {
+             "id":1024,
+             "name":"Alisha Slusarski",
+             "country":{
+                "name":"Iceland",
+                "code":"is"
+             },
+             "company":"Wtlz Power 107 Fm",
+             "date":"2018-03-27",
+             "status":"qualified",
+             "verified":true,
+             "activity":7,
+             "representative":{
+                "name":"Stephen Shaw",
+                "image":"stephenshaw.png"
+             },
+             "balance":91691
+          },
+          {
+             "id":1025,
+             "name":"Allene Iturbide",
+             "country":{
+                "name":"Italy",
+                "code":"it"
+             },
+             "company":"Ledecky, David Esq",
+             "date":"2016-02-20",
+             "status":"qualified",
+             "verified":true,
+             "activity":1,
+             "representative":{
+                "name":"Ivan Magalhaes",
+                "image":"ivanmagalhaes.png"
+             },
+             "balance":40137
+          },
+          {
+             "id":1026,
+             "name":"Chanel Caudy",
+             "country":{
+                "name":"Argentina",
+                "code":"ar"
+             },
+             "company":"Professional Image Inc",
+             "date":"2018-06-24",
+             "status":"new",
+             "verified":true,
+             "activity":26,
+             "representative":{
+                "name":"Ioni Bowcher",
+                "image":"ionibowcher.png"
+             },
+             "balance":21304
+          },
+          {
+             "id":1027,
+             "name":"Ezekiel Chui",
+             "country":{
+                "name":"Ireland",
+                "code":"ie"
+             },
+             "company":"Sider, Donald C Esq",
+             "date":"2016-09-24",
+             "status":"new",
+             "verified":false,
+             "activity":76,
+             "representative":{
+                "name":"Amy Elsner",
+                "image":"amyelsner.png"
+             },
+             "balance":60454
+          },
+          {
+             "id":1028,
+             "name":"Willow Kusko",
+             "country":{
+                "name":"Romania",
+                "code":"ro"
+             },
+             "company":"U Pull It",
+             "date":"2020-04-11",
+             "status":"qualified",
+             "verified":true,
+             "activity":7,
+             "representative":{
+                "name":"Onyama Limba",
+                "image":"onyamalimba.png"
+             },
+             "balance":17565
+          },
+          {
+             "id":1029,
+             "name":"Bernardo Figeroa",
+             "country":{
+                "name":"Israel",
+                "code":"il"
+             },
+             "company":"Clark, Richard Cpa",
+             "date":"2018-04-11",
+             "status":"renewal",
+             "verified":true,
+             "activity":81,
+             "representative":{
+                "name":"Ioni Bowcher",
+                "image":"ionibowcher.png"
+             },
+             "balance":17774
+          },
+          {
+             "id":1030,
+             "name":"Ammie Corrio",
+             "country":{
+                "name":"Hungary",
+                "code":"hu"
+             },
+             "company":"Moskowitz, Barry S",
+             "date":"2016-06-11",
+             "status":"negotiation",
+             "verified":true,
+             "activity":56,
+             "representative":{
+                "name":"Asiya Javayant",
+                "image":"asiyajavayant.png"
+             },
+             "balance":49201
+          },
+          {
+             "id":1031,
+             "name":"Francine Vocelka",
+             "country":{
+                "name":"Honduras",
+                "code":"hn"
+             },
+             "company":"Cascade Realty Advisors Inc",
+             "date":"2017-08-02",
+             "status":"qualified",
+             "verified":true,
+             "activity":94,
+             "representative":{
+                "name":"Ioni Bowcher",
+                "image":"ionibowcher.png"
+             },
+             "balance":67126
+          },
+          {
+             "id":1032,
+             "name":"Ernie Stenseth",
+             "country":{
+                "name":"Australia",
+                "code":"au"
+             },
+             "company":"Knwz Newsradio",
+             "date":"2018-06-06",
+             "status":"renewal",
+             "verified":true,
+             "activity":68,
+             "representative":{
+                "name":"Xuxue Feng",
+                "image":"xuxuefeng.png"
+             },
+             "balance":76017
+          },
+          {
+             "id":1033,
+             "name":"Albina Glick",
+             "country":{
+                "name":"Ukraine",
+                "code":"ua"
+             },
+             "company":"Giampetro, Anthony D",
+             "date":"2019-08-08",
+             "status":"proposal",
+             "verified":true,
+             "activity":85,
+             "representative":{
+                "name":"Bernardo Dominic",
+                "image":"bernardodominic.png"
+             },
+             "balance":91201
+          },
+          {
+             "id":1034,
+             "name":"Alishia Sergi",
+             "country":{
+                "name":"Qatar",
+                "code":"qa"
+             },
+             "company":"Milford Enterprises Inc",
+             "date":"2018-05-19",
+             "status":"negotiation",
+             "verified":false,
+             "activity":46,
+             "representative":{
+                "name":"Ivan Magalhaes",
+                "image":"ivanmagalhaes.png"
+             },
+             "balance":12237
+          },
+          {
+             "id":1035,
+             "name":"Solange Shinko",
+             "country":{
+                "name":"Cameroon",
+                "code":"cm"
+             },
+             "company":"Mosocco, Ronald A",
+             "date":"2015-02-12",
+             "status":"qualified",
+             "verified":true,
+             "activity":32,
+             "representative":{
+                "name":"Onyama Limba",
+                "image":"onyamalimba.png"
+             },
+             "balance":34072
+          },
+          {
+             "id":1036,
+             "name":"Jose Stockham",
+             "country":{
+                "name":"Italy",
+                "code":"it"
+             },
+             "company":"Tri State Refueler Co",
+             "date":"2018-04-25",
+             "status":"qualified",
+             "verified":true,
+             "activity":77,
+             "representative":{
+                "name":"Amy Elsner",
+                "image":"amyelsner.png"
+             },
+             "balance":94909
+          },
+          {
+             "id":1037,
+             "name":"Rozella Ostrosky",
+             "country":{
+                "name":"Venezuela",
+                "code":"ve"
+             },
+             "company":"Parkway Company",
+             "date":"2016-02-27",
+             "status":"unqualified",
+             "verified":true,
+             "activity":66,
+             "representative":{
+                "name":"Amy Elsner",
+                "image":"amyelsner.png"
+             },
+             "balance":57245
+          },
+          {
+             "id":1038,
+             "name":"Valentine Gillian",
+             "country":{
+                "name":"Paraguay",
+                "code":"py"
+             },
+             "company":"Fbs Business Finance",
+             "date":"2019-09-17",
+             "status":"qualified",
+             "verified":true,
+             "activity":25,
+             "representative":{
+                "name":"Bernardo Dominic",
+                "image":"bernardodominic.png"
+             },
+             "balance":75502
+          },
+          {
+             "id":1039,
+             "name":"Kati Rulapaugh",
+             "country":{
+                "name":"Puerto Rico",
+                "code":"pr"
+             },
+             "company":"Eder Assocs Consltng Engrs Pc",
+             "date":"2016-12-03",
+             "status":"renewal",
+             "verified":false,
+             "activity":51,
+             "representative":{
+                "name":"Ioni Bowcher",
+                "image":"ionibowcher.png"
+             },
+             "balance":82075
+          },
+          {
+             "id":1040,
+             "name":"Youlanda Schemmer",
+             "country":{
+                "name":"Bolivia",
+                "code":"bo"
+             },
+             "company":"Tri M Tool Inc",
+             "date":"2017-12-15",
+             "status":"negotiation",
+             "verified":true,
+             "activity":49,
+             "representative":{
+                "name":"Xuxue Feng",
+                "image":"xuxuefeng.png"
+             },
+             "balance":19208
+          },
+          {
+             "id":1041,
+             "name":"Dyan Oldroyd",
+             "country":{
+                "name":"Argentina",
+                "code":"ar"
+             },
+             "company":"International Eyelets Inc",
+             "date":"2017-02-02",
+             "status":"qualified",
+             "verified":false,
+             "activity":5,
+             "representative":{
+                "name":"Amy Elsner",
+                "image":"amyelsner.png"
+             },
+             "balance":50194
+          },
+          {
+             "id":1042,
+             "name":"Roxane Campain",
+             "country":{
+                "name":"France",
+                "code":"fr"
+             },
+             "company":"Rapid Trading Intl",
+             "date":"2018-12-25",
+             "status":"unqualified",
+             "verified":false,
+             "activity":100,
+             "representative":{
+                "name":"Anna Fali",
+                "image":"annafali.png"
+             },
+             "balance":77714
+          },
+          {
+             "id":1043,
+             "name":"Lavera Perin",
+             "country":{
+                "name":"Vietnam",
+                "code":"vn"
+             },
+             "company":"Abc Enterprises Inc",
+             "date":"2018-04-10",
+             "status":"qualified",
+             "verified":false,
+             "activity":71,
+             "representative":{
+                "name":"Stephen Shaw",
+                "image":"stephenshaw.png"
+             },
+             "balance":35740
+          },
+          {
+             "id":1044,
+             "name":"Erick Ferencz",
+             "country":{
+                "name":"Belgium",
+                "code":"be"
+             },
+             "company":"Cindy Turner Associates",
+             "date":"2018-05-06",
+             "status":"unqualified",
+             "verified":true,
+             "activity":54,
+             "representative":{
+                "name":"Amy Elsner",
+                "image":"amyelsner.png"
+             },
+             "balance":30790
+          },
+          {
+             "id":1045,
+             "name":"Fatima Saylors",
+             "country":{
+                "name":"Canada",
+                "code":"ca"
+             },
+             "company":"Stanton, James D Esq",
+             "date":"2019-07-10",
+             "status":"renewal",
+             "verified":true,
+             "activity":93,
+             "representative":{
+                "name":"Onyama Limba",
+                "image":"onyamalimba.png"
+             },
+             "balance":52343
+          },
+          {
+             "id":1046,
+             "name":"Jina Briddick",
+             "country":{
+                "name":"Mexico",
+                "code":"mx"
+             },
+             "company":"Grace Pastries Inc",
+             "date":"2018-02-19",
+             "status":"unqualified",
+             "verified":false,
+             "activity":97,
+             "representative":{
+                "name":"Xuxue Feng",
+                "image":"xuxuefeng.png"
+             },
+             "balance":53966
+          },
+          {
+             "id":1047,
+             "name":"Kanisha Waycott",
+             "country":{
+                "name":"Ecuador",
+                "code":"ec"
+             },
+             "company":"Schroer, Gene E Esq",
+             "date":"2019-11-27",
+             "status":"new",
+             "verified":false,
+             "activity":80,
+             "representative":{
+                "name":"Xuxue Feng",
+                "image":"xuxuefeng.png"
+             },
+             "balance":9920
+          },
+          {
+             "id":1048,
+             "name":"Emerson Bowley",
+             "country":{
+                "name":"Finland",
+                "code":"fi"
+             },
+             "company":"Knights Inn",
+             "date":"2018-11-24",
+             "status":"new",
+             "verified":false,
+             "activity":63,
+             "representative":{
+                "name":"Stephen Shaw",
+                "image":"stephenshaw.png"
+             },
+             "balance":78069
+          },
+          {
+             "id":1049,
+             "name":"Blair Malet",
+             "country":{
+                "name":"Finland",
+                "code":"fi"
+             },
+             "company":"Bollinger Mach Shp & Shipyard",
+             "date":"2018-04-19",
+             "status":"new",
+             "verified":true,
+             "activity":92,
+             "representative":{
+                "name":"Asiya Javayant",
+                "image":"asiyajavayant.png"
+             },
+             "balance":65005
+          },
+          {
+             "id":1050,
+             "name":"Brock Bolognia",
+             "country":{
+                "name":"Bolivia",
+                "code":"bo"
+             },
+             "company":"Orinda News",
+             "date":"2019-09-06",
+             "status":"renewal",
+             "verified":true,
+             "activity":72,
+             "representative":{
+                "name":"Onyama Limba",
+                "image":"onyamalimba.png"
+             },
+             "balance":51038
+          },
+          {
+             "id":1051,
+             "name":"Lorrie Nestle",
+             "country":{
+                "name":"Germany",
+                "code":"de"
+             },
+             "company":"Ballard Spahr Andrews",
+             "date":"2018-04-26",
+             "status":"renewal",
+             "verified":false,
+             "activity":36,
+             "representative":{
+                "name":"Anna Fali",
+                "image":"annafali.png"
+             },
+             "balance":28218
+          },
+          {
+             "id":1052,
+             "name":"Sabra Uyetake",
+             "country":{
+                "name":"Peru",
+                "code":"pe"
+             },
+             "company":"Lowy Limousine Service",
+             "date":"2018-04-12",
+             "status":"new",
+             "verified":false,
+             "activity":31,
+             "representative":{
+                "name":"Amy Elsner",
+                "image":"amyelsner.png"
+             },
+             "balance":78527
+          },
+          {
+             "id":1053,
+             "name":"Marjory Mastella",
+             "country":{
+                "name":"Netherlands",
+                "code":"nl"
+             },
+             "company":"Vicon Corporation",
+             "date":"2018-01-24",
+             "status":"negotiation",
+             "verified":false,
+             "activity":89,
+             "representative":{
+                "name":"Anna Fali",
+                "image":"annafali.png"
+             },
+             "balance":23381
+          },
+          {
+             "id":1054,
+             "name":"Karl Klonowski",
+             "country":{
+                "name":"Saudi Arabia",
+                "code":"sa"
+             },
+             "company":"Rossi, Michael M",
+             "date":"2017-04-17",
+             "status":"unqualified",
+             "verified":true,
+             "activity":27,
+             "representative":{
+                "name":"Onyama Limba",
+                "image":"onyamalimba.png"
+             },
+             "balance":64821
+          },
+          {
+             "id":1055,
+             "name":"Tonette Wenner",
+             "country":{
+                "name":"Australia",
+                "code":"au"
+             },
+             "company":"Northwest Publishing",
+             "date":"2019-04-14",
+             "status":"qualified",
+             "verified":false,
+             "activity":27,
+             "representative":{
+                "name":"Elwin Sharvill",
+                "image":"elwinsharvill.png"
+             },
+             "balance":55334
+          },
+          {
+             "id":1056,
+             "name":"Amber Monarrez",
+             "country":{
+                "name":"Sweden",
+                "code":"se"
+             },
+             "company":"Branford Wire & Mfg Co",
+             "date":"2019-09-09",
+             "status":"new",
+             "verified":false,
+             "activity":79,
+             "representative":{
+                "name":"Bernardo Dominic",
+                "image":"bernardodominic.png"
+             },
+             "balance":83391
+          },
+          {
+             "id":1057,
+             "name":"Shenika Seewald",
+             "country":{
+                "name":"Australia",
+                "code":"au"
+             },
+             "company":"East Coast Marketing",
+             "date":"2017-02-18",
+             "status":"renewal",
+             "verified":true,
+             "activity":39,
+             "representative":{
+                "name":"Xuxue Feng",
+                "image":"xuxuefeng.png"
+             },
+             "balance":31580
+          },
+          {
+             "id":1058,
+             "name":"Delmy Ahle",
+             "country":{
+                "name":"Belgium",
+                "code":"be"
+             },
+             "company":"Wye Technologies Inc",
+             "date":"2020-10-05",
+             "status":"unqualified",
+             "verified":false,
+             "activity":55,
+             "representative":{
+                "name":"Anna Fali",
+                "image":"annafali.png"
+             },
+             "balance":11723
+          },
+          {
+             "id":1059,
+             "name":"Deeanna Juhas",
+             "country":{
+                "name":"Sweden",
+                "code":"se"
+             },
+             "company":"Healy, George W Iv",
+             "date":"2018-09-28",
+             "status":"negotiation",
+             "verified":false,
+             "activity":79,
+             "representative":{
+                "name":"Asiya Javayant",
+                "image":"asiyajavayant.png"
+             },
+             "balance":8454
+          },
+          {
+             "id":1060,
+             "name":"Blondell Pugh",
+             "country":{
+                "name":"Ireland",
+                "code":"ie"
+             },
+             "company":"Alpenlite Inc",
+             "date":"2016-06-16",
+             "status":"renewal",
+             "verified":false,
+             "activity":49,
+             "representative":{
+                "name":"Bernardo Dominic",
+                "image":"bernardodominic.png"
+             },
+             "balance":99235
+          },
+          {
+             "id":1061,
+             "name":"Jamal Vanausdal",
+             "country":{
+                "name":"Morocco",
+                "code":"ma"
+             },
+             "company":"Hubbard, Bruce Esq",
+             "date":"2017-05-25",
+             "status":"proposal",
+             "verified":true,
+             "activity":87,
+             "representative":{
+                "name":"Ioni Bowcher",
+                "image":"ionibowcher.png"
+             },
+             "balance":15656
+          },
+          {
+             "id":1062,
+             "name":"Cecily Hollack",
+             "country":{
+                "name":"Bolivia",
+                "code":"bo"
+             },
+             "company":"Arthur A Oliver & Son Inc",
+             "date":"2020-05-09",
+             "status":"negotiation",
+             "verified":true,
+             "activity":5,
+             "representative":{
+                "name":"Amy Elsner",
+                "image":"amyelsner.png"
+             },
+             "balance":60586
+          },
+          {
+             "id":1063,
+             "name":"Carmelina Lindall",
+             "country":{
+                "name":"Puerto Rico",
+                "code":"pr"
+             },
+             "company":"George Jessop Carter Jewelers",
+             "date":"2019-09-07",
+             "status":"qualified",
+             "verified":true,
+             "activity":77,
+             "representative":{
+                "name":"Asiya Javayant",
+                "image":"asiyajavayant.png"
+             },
+             "balance":86239
+          },
+          {
+             "id":1064,
+             "name":"Maurine Yglesias",
+             "country":{
+                "name":"Taiwan",
+                "code":"tw"
+             },
+             "company":"Schultz, Thomas C Md",
+             "date":"2015-08-10",
+             "status":"renewal",
+             "verified":false,
+             "activity":94,
+             "representative":{
+                "name":"Ioni Bowcher",
+                "image":"ionibowcher.png"
+             },
+             "balance":15621
+          },
+          {
+             "id":1065,
+             "name":"Tawna Buvens",
+             "country":{
+                "name":"Indonesia",
+                "code":"id"
+             },
+             "company":"H H H Enterprises Inc",
+             "date":"2018-03-20",
+             "status":"new",
+             "verified":false,
+             "activity":25,
+             "representative":{
+                "name":"Amy Elsner",
+                "image":"amyelsner.png"
+             },
+             "balance":77248
+          },
+          {
+             "id":1066,
+             "name":"Penney Weight",
+             "country":{
+                "name":"South Africa",
+                "code":"za"
+             },
+             "company":"Hawaiian King Hotel",
+             "date":"2020-03-03",
+             "status":"qualified",
+             "verified":false,
+             "activity":96,
+             "representative":{
+                "name":"Amy Elsner",
+                "image":"amyelsner.png"
+             },
+             "balance":478
+          },
+          {
+             "id":1067,
+             "name":"Elly Morocco",
+             "country":{
+                "name":"Thailand",
+                "code":"th"
+             },
+             "company":"Killion Industries",
+             "date":"2018-09-18",
+             "status":"qualified",
+             "verified":true,
+             "activity":38,
+             "representative":{
+                "name":"Xuxue Feng",
+                "image":"xuxuefeng.png"
+             },
+             "balance":62505
+          },
+          {
+             "id":1068,
+             "name":"Ilene Eroman",
+             "country":{
+                "name":"Netherlands",
+                "code":"nl"
+             },
+             "company":"Robinson, William J Esq",
+             "date":"2019-06-08",
+             "status":"new",
+             "verified":true,
+             "activity":49,
+             "representative":{
+                "name":"Anna Fali",
+                "image":"annafali.png"
+             },
+             "balance":91480
+          },
+          {
+             "id":1069,
+             "name":"Vallie Mondella",
+             "country":{
+                "name":"Latvia",
+                "code":"lv"
+             },
+             "company":"Private Properties",
+             "date":"2018-12-06",
+             "status":"new",
+             "verified":false,
+             "activity":16,
+             "representative":{
+                "name":"Ivan Magalhaes",
+                "image":"ivanmagalhaes.png"
+             },
+             "balance":21671
+          },
+          {
+             "id":1070,
+             "name":"Kallie Blackwood",
+             "country":{
+                "name":"Iceland",
+                "code":"is"
+             },
+             "company":"Rowley Schlimgen Inc",
+             "date":"2017-04-05",
+             "status":"unqualified",
+             "verified":false,
+             "activity":25,
+             "representative":{
+                "name":"Amy Elsner",
+                "image":"amyelsner.png"
+             },
+             "balance":13775
+          },
+          {
+             "id":1071,
+             "name":"Johnetta Abdallah",
+             "country":{
+                "name":"Netherlands",
+                "code":"nl"
+             },
+             "company":"Forging Specialties",
+             "date":"2015-02-02",
+             "status":"new",
+             "verified":false,
+             "activity":16,
+             "representative":{
+                "name":"Elwin Sharvill",
+                "image":"elwinsharvill.png"
+             },
+             "balance":60253
+          },
+          {
+             "id":1072,
+             "name":"Bobbye Rhym",
+             "country":{
+                "name":"Ukraine",
+                "code":"ua"
+             },
+             "company":"Smits, Patricia Garity",
+             "date":"2018-08-17",
+             "status":"qualified",
+             "verified":true,
+             "activity":85,
+             "representative":{
+                "name":"Xuxue Feng",
+                "image":"xuxuefeng.png"
+             },
+             "balance":75225
+          },
+          {
+             "id":1073,
+             "name":"Micaela Rhymes",
+             "country":{
+                "name":"France",
+                "code":"fr"
+             },
+             "company":"H Lee Leonard Attorney At Law",
+             "date":"2018-09-08",
+             "status":"renewal",
+             "verified":true,
+             "activity":92,
+             "representative":{
+                "name":"Asiya Javayant",
+                "image":"asiyajavayant.png"
+             },
+             "balance":3308
+          },
+          {
+             "id":1074,
+             "name":"Tamar Hoogland",
+             "country":{
+                "name":"Guatemala",
+                "code":"gt"
+             },
+             "company":"A K Construction Co",
+             "date":"2018-11-13",
+             "status":"proposal",
+             "verified":true,
+             "activity":22,
+             "representative":{
+                "name":"Asiya Javayant",
+                "image":"asiyajavayant.png"
+             },
+             "balance":19711
+          },
+          {
+             "id":1075,
+             "name":"Moon Parlato",
+             "country":{
+                "name":"Czech Republic",
+                "code":"cz"
+             },
+             "company":"Ambelang, Jessica M Md",
+             "date":"2019-08-18",
+             "status":"renewal",
+             "verified":false,
+             "activity":64,
+             "representative":{
+                "name":"Onyama Limba",
+                "image":"onyamalimba.png"
+             },
+             "balance":55110
+          },
+          {
+             "id":1076,
+             "name":"Laurel Reitler",
+             "country":{
+                "name":"United Kingdom",
+                "code":"gb"
+             },
+             "company":"Q A Service",
+             "date":"2015-04-02",
+             "status":"negotiation",
+             "verified":false,
+             "activity":80,
+             "representative":{
+                "name":"Amy Elsner",
+                "image":"amyelsner.png"
+             },
+             "balance":62392
+          },
+          {
+             "id":1077,
+             "name":"Delisa Crupi",
+             "country":{
+                "name":"Taiwan",
+                "code":"tw"
+             },
+             "company":"Wood & Whitacre Contractors",
+             "date":"2017-09-15",
+             "status":"unqualified",
+             "verified":false,
+             "activity":70,
+             "representative":{
+                "name":"Xuxue Feng",
+                "image":"xuxuefeng.png"
+             },
+             "balance":76530
+          },
+          {
+             "id":1078,
+             "name":"Viva Toelkes",
+             "country":{
+                "name":"United States",
+                "code":"us"
+             },
+             "company":"Mark Iv Press Ltd",
+             "date":"2017-03-27",
+             "status":"qualified",
+             "verified":false,
+             "activity":16,
+             "representative":{
+                "name":"Stephen Shaw",
+                "image":"stephenshaw.png"
+             },
+             "balance":7460
+          },
+          {
+             "id":1079,
+             "name":"Elza Lipke",
+             "country":{
+                "name":"Ireland",
+                "code":"ie"
+             },
+             "company":"Museum Of Science & Industry",
+             "date":"2017-06-01",
+             "status":"proposal",
+             "verified":true,
+             "activity":90,
+             "representative":{
+                "name":"Elwin Sharvill",
+                "image":"elwinsharvill.png"
+             },
+             "balance":42251
+          },
+          {
+             "id":1080,
+             "name":"Devorah Chickering",
+             "country":{
+                "name":"Spain",
+                "code":"es"
+             },
+             "company":"Garrison Ind",
+             "date":"2017-03-14",
+             "status":"proposal",
+             "verified":true,
+             "activity":96,
+             "representative":{
+                "name":"Asiya Javayant",
+                "image":"asiyajavayant.png"
+             },
+             "balance":36435
+          },
+          {
+             "id":1081,
+             "name":"Timothy Mulqueen",
+             "country":{
+                "name":"Netherlands",
+                "code":"nl"
+             },
+             "company":"Saronix Nymph Products",
+             "date":"2018-07-09",
+             "status":"renewal",
+             "verified":true,
+             "activity":77,
+             "representative":{
+                "name":"Asiya Javayant",
+                "image":"asiyajavayant.png"
+             },
+             "balance":39197
+          },
+          {
+             "id":1082,
+             "name":"Arlette Honeywell",
+             "country":{
+                "name":"Panama",
+                "code":"pa"
+             },
+             "company":"Smc Inc",
+             "date":"2018-09-11",
+             "status":"proposal",
+             "verified":true,
+             "activity":46,
+             "representative":{
+                "name":"Amy Elsner",
+                "image":"amyelsner.png"
+             },
+             "balance":72707
+          },
+          {
+             "id":1083,
+             "name":"Dominque Dickerson",
+             "country":{
+                "name":"Argentina",
+                "code":"ar"
+             },
+             "company":"E A I Electronic Assocs Inc",
+             "date":"2017-11-12",
+             "status":"qualified",
+             "verified":true,
+             "activity":83,
+             "representative":{
+                "name":"Bernardo Dominic",
+                "image":"bernardodominic.png"
+             },
+             "balance":97965
+          },
+          {
+             "id":1084,
+             "name":"Lettie Isenhower",
+             "country":{
+                "name":"Canada",
+                "code":"ca"
+             },
+             "company":"Conte, Christopher A Esq",
+             "date":"2016-03-01",
+             "status":"qualified",
+             "verified":true,
+             "activity":83,
+             "representative":{
+                "name":"Bernardo Dominic",
+                "image":"bernardodominic.png"
+             },
+             "balance":5823
+          },
+          {
+             "id":1085,
+             "name":"Myra Munns",
+             "country":{
+                "name":"Lithuania",
+                "code":"lt"
+             },
+             "company":"Anker Law Office",
+             "date":"2016-05-21",
+             "status":"unqualified",
+             "verified":true,
+             "activity":49,
+             "representative":{
+                "name":"Elwin Sharvill",
+                "image":"elwinsharvill.png"
+             },
+             "balance":96471
+          },
+          {
+             "id":1086,
+             "name":"Stephaine Barfield",
+             "country":{
+                "name":"Belgium",
+                "code":"be"
+             },
+             "company":"Beutelschies & Company",
+             "date":"2016-01-22",
+             "status":"new",
+             "verified":true,
+             "activity":34,
+             "representative":{
+                "name":"Anna Fali",
+                "image":"annafali.png"
+             },
+             "balance":33710
+          },
+          {
+             "id":1087,
+             "name":"Lai Gato",
+             "country":{
+                "name":"Nigeria",
+                "code":"ng"
+             },
+             "company":"Fligg, Kenneth I Jr",
+             "date":"2016-07-26",
+             "status":"unqualified",
+             "verified":false,
+             "activity":64,
+             "representative":{
+                "name":"Onyama Limba",
+                "image":"onyamalimba.png"
+             },
+             "balance":30611
+          },
+          {
+             "id":1088,
+             "name":"Stephen Emigh",
+             "country":{
+                "name":"Cuba",
+                "code":"cu"
+             },
+             "company":"Sharp, J Daniel Esq",
+             "date":"2020-07-24",
+             "status":"renewal",
+             "verified":false,
+             "activity":51,
+             "representative":{
+                "name":"Elwin Sharvill",
+                "image":"elwinsharvill.png"
+             },
+             "balance":32960
+          },
+          {
+             "id":1089,
+             "name":"Tyra Shields",
+             "country":{
+                "name":"Honduras",
+                "code":"hn"
+             },
+             "company":"Assink, Anne H Esq",
+             "date":"2019-11-10",
+             "status":"negotiation",
+             "verified":false,
+             "activity":11,
+             "representative":{
+                "name":"Anna Fali",
+                "image":"annafali.png"
+             },
+             "balance":57423
+          },
+          {
+             "id":1090,
+             "name":"Tammara Wardrip",
+             "country":{
+                "name":"Saudi Arabia",
+                "code":"sa"
+             },
+             "company":"Jewel My Shop Inc",
+             "date":"2016-06-05",
+             "status":"renewal",
+             "verified":true,
+             "activity":64,
+             "representative":{
+                "name":"Xuxue Feng",
+                "image":"xuxuefeng.png"
+             },
+             "balance":23027
+          },
+          {
+             "id":1091,
+             "name":"Cory Gibes",
+             "country":{
+                "name":"Malaysia",
+                "code":"my"
+             },
+             "company":"Chinese Translation Resources",
+             "date":"2016-02-28",
+             "status":"new",
+             "verified":false,
+             "activity":44,
+             "representative":{
+                "name":"Anna Fali",
+                "image":"annafali.png"
+             },
+             "balance":84182
+          },
+          {
+             "id":1092,
+             "name":"Danica Bruschke",
+             "country":{
+                "name":"Taiwan",
+                "code":"tw"
+             },
+             "company":"Stevens, Charles T",
+             "date":"2018-12-13",
+             "status":"unqualified",
+             "verified":true,
+             "activity":62,
+             "representative":{
+                "name":"Stephen Shaw",
+                "image":"stephenshaw.png"
+             },
+             "balance":25237
+          },
+          {
+             "id":1093,
+             "name":"Wilda Giguere",
+             "country":{
+                "name":"Iceland",
+                "code":"is"
+             },
+             "company":"Mclaughlin, Luther W Cpa",
+             "date":"2017-06-16",
+             "status":"new",
+             "verified":true,
+             "activity":79,
+             "representative":{
+                "name":"Asiya Javayant",
+                "image":"asiyajavayant.png"
+             },
+             "balance":87736
+          },
+          {
+             "id":1094,
+             "name":"Elvera Benimadho",
+             "country":{
+                "name":"Malaysia",
+                "code":"my"
+             },
+             "company":"Tree Musketeers",
+             "date":"2019-02-17",
+             "status":"proposal",
+             "verified":true,
+             "activity":50,
+             "representative":{
+                "name":"Onyama Limba",
+                "image":"onyamalimba.png"
+             },
+             "balance":38674
+          },
+          {
+             "id":1095,
+             "name":"Carma Vanheusen",
+             "country":{
+                "name":"Turkey",
+                "code":"tr"
+             },
+             "company":"Springfield Div Oh Edison Co",
+             "date":"2019-11-26",
+             "status":"renewal",
+             "verified":false,
+             "activity":84,
+             "representative":{
+                "name":"Stephen Shaw",
+                "image":"stephenshaw.png"
+             },
+             "balance":67762
+          },
+          {
+             "id":1096,
+             "name":"Malinda Hochard",
+             "country":{
+                "name":"Serbia",
+                "code":"rs"
+             },
+             "company":"Logan Memorial Hospital",
+             "date":"2016-07-06",
+             "status":"new",
+             "verified":false,
+             "activity":88,
+             "representative":{
+                "name":"Asiya Javayant",
+                "image":"asiyajavayant.png"
+             },
+             "balance":81299
+          },
+          {
+             "id":1097,
+             "name":"Natalie Fern",
+             "country":{
+                "name":"Canada",
+                "code":"ca"
+             },
+             "company":"Kelly, Charles G Esq",
+             "date":"2019-10-02",
+             "status":"proposal",
+             "verified":true,
+             "activity":44,
+             "representative":{
+                "name":"Amy Elsner",
+                "image":"amyelsner.png"
+             },
+             "balance":64794
+          },
+          {
+             "id":1098,
+             "name":"Lisha Centini",
+             "country":{
+                "name":"Netherlands",
+                "code":"nl"
+             },
+             "company":"Industrial Paper Shredders Inc",
+             "date":"2018-07-05",
+             "status":"new",
+             "verified":true,
+             "activity":7,
+             "representative":{
+                "name":"Ioni Bowcher",
+                "image":"ionibowcher.png"
+             },
+             "balance":7815
+          },
+          {
+             "id":1099,
+             "name":"Arlene Klusman",
+             "country":{
+                "name":"Jamaica",
+                "code":"jm"
+             },
+             "company":"Beck Horizon Builders",
+             "date":"2018-05-14",
+             "status":"proposal",
+             "verified":true,
+             "activity":99,
+             "representative":{
+                "name":"Elwin Sharvill",
+                "image":"elwinsharvill.png"
+             },
+             "balance":37976
+          },
+          {
+             "id":1100,
+             "name":"Alease Buemi",
+             "country":{
+                "name":"Costa Rica",
+                "code":"cr"
+             },
+             "company":"Porto Cayo At Hawks Cay",
+             "date":"2018-03-14",
+             "status":"unqualified",
+             "verified":true,
+             "activity":0,
+             "representative":{
+                "name":"Onyama Limba",
+                "image":"onyamalimba.png"
+             },
+             "balance":59594
+          },
+          {
+             "id":1101,
+             "name":"Louisa Cronauer",
+             "country":{
+                "name":"Costa Rica",
+                "code":"cr"
+             },
+             "company":"Pacific Grove Museum Ntrl Hist",
+             "date":"2018-09-23",
+             "status":"qualified",
+             "verified":false,
+             "activity":3,
+             "representative":{
+                "name":"Anna Fali",
+                "image":"annafali.png"
+             },
+             "balance":92528
+          },
+          {
+             "id":1102,
+             "name":"Angella Cetta",
+             "country":{
+                "name":"Vietnam",
+                "code":"vn"
+             },
+             "company":"Bender & Hatley Pc",
+             "date":"2018-04-10",
+             "status":"qualified",
+             "verified":false,
+             "activity":88,
+             "representative":{
+                "name":"Ivan Magalhaes",
+                "image":"ivanmagalhaes.png"
+             },
+             "balance":58964
+          },
+          {
+             "id":1103,
+             "name":"Cyndy Goldammer",
+             "country":{
+                "name":"Burkina Faso",
+                "code":"bf"
+             },
+             "company":"Di Cristina J & Son",
+             "date":"2017-09-18",
+             "status":"unqualified",
+             "verified":false,
+             "activity":92,
+             "representative":{
+                "name":"Stephen Shaw",
+                "image":"stephenshaw.png"
+             },
+             "balance":65860
+          },
+          {
+             "id":1104,
+             "name":"Rosio Cork",
+             "country":{
+                "name":"Singapore",
+                "code":"sg"
+             },
+             "company":"Green Goddess",
+             "date":"2017-08-19",
+             "status":"negotiation",
+             "verified":true,
+             "activity":19,
+             "representative":{
+                "name":"Asiya Javayant",
+                "image":"asiyajavayant.png"
+             },
+             "balance":63863
+          },
+          {
+             "id":1105,
+             "name":"Celeste Korando",
+             "country":{
+                "name":"Costa Rica",
+                "code":"cr"
+             },
+             "company":"American Arts & Graphics",
+             "date":"2020-06-18",
+             "status":"proposal",
+             "verified":true,
+             "activity":21,
+             "representative":{
+                "name":"Amy Elsner",
+                "image":"amyelsner.png"
+             },
+             "balance":37510
+          },
+          {
+             "id":1106,
+             "name":"Twana Felger",
+             "country":{
+                "name":"Croatia",
+                "code":"hr"
+             },
+             "company":"Opryland Hotel",
+             "date":"2016-11-18",
+             "status":"negotiation",
+             "verified":false,
+             "activity":97,
+             "representative":{
+                "name":"Ioni Bowcher",
+                "image":"ionibowcher.png"
+             },
+             "balance":63876
+          },
+          {
+             "id":1107,
+             "name":"Estrella Samu",
+             "country":{
+                "name":"Vietnam",
+                "code":"vn"
+             },
+             "company":"Marking Devices Pubg Co",
+             "date":"2017-06-25",
+             "status":"unqualified",
+             "verified":false,
+             "activity":27,
+             "representative":{
+                "name":"Bernardo Dominic",
+                "image":"bernardodominic.png"
+             },
+             "balance":93263
+          },
+          {
+             "id":1108,
+             "name":"Donte Kines",
+             "country":{
+                "name":"Slovakia",
+                "code":"sk"
+             },
+             "company":"W Tc Industries Inc",
+             "date":"2019-02-16",
+             "status":"new",
+             "verified":true,
+             "activity":35,
+             "representative":{
+                "name":"Onyama Limba",
+                "image":"onyamalimba.png"
+             },
+             "balance":57198
+          },
+          {
+             "id":1109,
+             "name":"Tiffiny Steffensmeier",
+             "country":{
+                "name":"Pakistan",
+                "code":"pk"
+             },
+             "company":"Whitehall Robbins Labs Divsn",
+             "date":"2018-03-11",
+             "status":"new",
+             "verified":true,
+             "activity":81,
+             "representative":{
+                "name":"Ivan Magalhaes",
+                "image":"ivanmagalhaes.png"
+             },
+             "balance":89147
+          },
+          {
+             "id":1110,
+             "name":"Edna Miceli",
+             "country":{
+                "name":"France",
+                "code":"fr"
+             },
+             "company":"Sampler",
+             "date":"2017-10-15",
+             "status":"renewal",
+             "verified":true,
+             "activity":54,
+             "representative":{
+                "name":"Asiya Javayant",
+                "image":"asiyajavayant.png"
+             },
+             "balance":41466
+          },
+          {
+             "id":1111,
+             "name":"Sue Kownacki",
+             "country":{
+                "name":"Jamaica",
+                "code":"jm"
+             },
+             "company":"Juno Chefs Incorporated",
+             "date":"2017-03-17",
+             "status":"proposal",
+             "verified":false,
+             "activity":31,
+             "representative":{
+                "name":"Onyama Limba",
+                "image":"onyamalimba.png"
+             },
+             "balance":38918
+          },
+          {
+             "id":1112,
+             "name":"Jesusa Shin",
+             "country":{
+                "name":"Ukraine",
+                "code":"ua"
+             },
+             "company":"Carroccio, A Thomas Esq",
+             "date":"2017-04-06",
+             "status":"renewal",
+             "verified":false,
+             "activity":28,
+             "representative":{
+                "name":"Bernardo Dominic",
+                "image":"bernardodominic.png"
+             },
+             "balance":11397
+          },
+          {
+             "id":1113,
+             "name":"Rolland Francescon",
+             "country":{
+                "name":"United Kingdom",
+                "code":"gb"
+             },
+             "company":"Stanley, Richard L Esq",
+             "date":"2019-02-03",
+             "status":"qualified",
+             "verified":false,
+             "activity":45,
+             "representative":{
+                "name":"Onyama Limba",
+                "image":"onyamalimba.png"
+             },
+             "balance":40930
+          },
+          {
+             "id":1114,
+             "name":"Pamella Schmierer",
+             "country":{
+                "name":"Belgium",
+                "code":"be"
+             },
+             "company":"K Cs Cstm Mouldings Windows",
+             "date":"2016-09-22",
+             "status":"unqualified",
+             "verified":true,
+             "activity":34,
+             "representative":{
+                "name":"Ioni Bowcher",
+                "image":"ionibowcher.png"
+             },
+             "balance":40847
+          },
+          {
+             "id":1115,
+             "name":"Glory Kulzer",
+             "country":{
+                "name":"Croatia",
+                "code":"hr"
+             },
+             "company":"Comfort Inn",
+             "date":"2017-09-27",
+             "status":"unqualified",
+             "verified":true,
+             "activity":36,
+             "representative":{
+                "name":"Onyama Limba",
+                "image":"onyamalimba.png"
+             },
+             "balance":27832
+          },
+          {
+             "id":1116,
+             "name":"Shawna Palaspas",
+             "country":{
+                "name":"Estonia",
+                "code":"ee"
+             },
+             "company":"Windsor, James L Esq",
+             "date":"2017-06-25",
+             "status":"unqualified",
+             "verified":true,
+             "activity":69,
+             "representative":{
+                "name":"Bernardo Dominic",
+                "image":"bernardodominic.png"
+             },
+             "balance":89060
+          },
+          {
+             "id":1117,
+             "name":"Brandon Callaro",
+             "country":{
+                "name":"Romania",
+                "code":"ro"
+             },
+             "company":"Jackson Shields Yeiser",
+             "date":"2016-07-13",
+             "status":"proposal",
+             "verified":true,
+             "activity":55,
+             "representative":{
+                "name":"Anna Fali",
+                "image":"annafali.png"
+             },
+             "balance":52474
+          },
+          {
+             "id":1118,
+             "name":"Scarlet Cartan",
+             "country":{
+                "name":"Panama",
+                "code":"pa"
+             },
+             "company":"Box, J Calvin Esq",
+             "date":"2018-09-13",
+             "status":"renewal",
+             "verified":false,
+             "activity":1,
+             "representative":{
+                "name":"Xuxue Feng",
+                "image":"xuxuefeng.png"
+             },
+             "balance":19094
+          },
+          {
+             "id":1119,
+             "name":"Oretha Menter",
+             "country":{
+                "name":"Panama",
+                "code":"pa"
+             },
+             "company":"Custom Engineering Inc",
+             "date":"2017-09-11",
+             "status":"renewal",
+             "verified":false,
+             "activity":8,
+             "representative":{
+                "name":"Elwin Sharvill",
+                "image":"elwinsharvill.png"
+             },
+             "balance":93756
+          },
+          {
+             "id":1120,
+             "name":"Ty Smith",
+             "country":{
+                "name":"United States",
+                "code":"us"
+             },
+             "company":"Bresler Eitel Framg Gllry Ltd",
+             "date":"2019-07-06",
+             "status":"unqualified",
+             "verified":false,
+             "activity":50,
+             "representative":{
+                "name":"Anna Fali",
+                "image":"annafali.png"
+             },
+             "balance":77388
+          },
+          {
+             "id":1121,
+             "name":"Xuan Rochin",
+             "country":{
+                "name":"Colombia",
+                "code":"co"
+             },
+             "company":"Carol, Drake Sparks Esq",
+             "date":"2018-05-22",
+             "status":"proposal",
+             "verified":true,
+             "activity":77,
+             "representative":{
+                "name":"Amy Elsner",
+                "image":"amyelsner.png"
+             },
+             "balance":48759
+          },
+          {
+             "id":1122,
+             "name":"Lindsey Dilello",
+             "country":{
+                "name":"Austria",
+                "code":"at"
+             },
+             "company":"Biltmore Investors Bank",
+             "date":"2017-07-18",
+             "status":"renewal",
+             "verified":true,
+             "activity":65,
+             "representative":{
+                "name":"Amy Elsner",
+                "image":"amyelsner.png"
+             },
+             "balance":37568
+          },
+          {
+             "id":1123,
+             "name":"Devora Perez",
+             "country":{
+                "name":"Uruguay",
+                "code":"uy"
+             },
+             "company":"Desco Equipment Corp",
+             "date":"2017-10-09",
+             "status":"unqualified",
+             "verified":true,
+             "activity":30,
+             "representative":{
+                "name":"Onyama Limba",
+                "image":"onyamalimba.png"
+             },
+             "balance":4477
+          },
+          {
+             "id":1124,
+             "name":"Herman Demesa",
+             "country":{
+                "name":"Paraguay",
+                "code":"py"
+             },
+             "company":"Merlin Electric Co",
+             "date":"2019-05-23",
+             "status":"proposal",
+             "verified":true,
+             "activity":10,
+             "representative":{
+                "name":"Asiya Javayant",
+                "image":"asiyajavayant.png"
+             },
+             "balance":13764
+          },
+          {
+             "id":1125,
+             "name":"Rory Papasergi",
+             "country":{
+                "name":"Egypt",
+                "code":"eg"
+             },
+             "company":"Bailey Cntl Co Div Babcock",
+             "date":"2019-03-02",
+             "status":"qualified",
+             "verified":false,
+             "activity":22,
+             "representative":{
+                "name":"Anna Fali",
+                "image":"annafali.png"
+             },
+             "balance":68222
+          },
+          {
+             "id":1126,
+             "name":"Talia Riopelle",
+             "country":{
+                "name":"Guatemala",
+                "code":"gt"
+             },
+             "company":"Ford Brothers Wholesale Inc",
+             "date":"2017-02-18",
+             "status":"new",
+             "verified":false,
+             "activity":69,
+             "representative":{
+                "name":"Elwin Sharvill",
+                "image":"elwinsharvill.png"
+             },
+             "balance":29164
+          },
+          {
+             "id":1127,
+             "name":"Van Shire",
+             "country":{
+                "name":"Netherlands",
+                "code":"nl"
+             },
+             "company":"Cambridge Inn",
+             "date":"2020-05-12",
+             "status":"new",
+             "verified":false,
+             "activity":4,
+             "representative":{
+                "name":"Ioni Bowcher",
+                "image":"ionibowcher.png"
+             },
+             "balance":61651
+          },
+          {
+             "id":1128,
+             "name":"Lucina Lary",
+             "country":{
+                "name":"Switzerland",
+                "code":"ch"
+             },
+             "company":"Matricciani, Albert J Jr",
+             "date":"2019-11-20",
+             "status":"negotiation",
+             "verified":true,
+             "activity":11,
+             "representative":{
+                "name":"Xuxue Feng",
+                "image":"xuxuefeng.png"
+             },
+             "balance":79938
+          },
+          {
+             "id":1129,
+             "name":"Bok Isaacs",
+             "country":{
+                "name":"Chile",
+                "code":"cl"
+             },
+             "company":"Nelson Hawaiian Ltd",
+             "date":"2016-11-10",
+             "status":"proposal",
+             "verified":true,
+             "activity":41,
+             "representative":{
+                "name":"Asiya Javayant",
+                "image":"asiyajavayant.png"
+             },
+             "balance":44037
+          },
+          {
+             "id":1130,
+             "name":"Rolande Spickerman",
+             "country":{
+                "name":"Panama",
+                "code":"pa"
+             },
+             "company":"Neland Travel Agency",
+             "date":"2016-07-11",
+             "status":"renewal",
+             "verified":true,
+             "activity":84,
+             "representative":{
+                "name":"Bernardo Dominic",
+                "image":"bernardodominic.png"
+             },
+             "balance":89918
+          },
+          {
+             "id":1131,
+             "name":"Howard Paulas",
+             "country":{
+                "name":"Indonesia",
+                "code":"id"
+             },
+             "company":"Asendorf, J Alan Esq",
+             "date":"2017-07-17",
+             "status":"negotiation",
+             "verified":false,
+             "activity":22,
+             "representative":{
+                "name":"Ioni Bowcher",
+                "image":"ionibowcher.png"
+             },
+             "balance":32372
+          },
+          {
+             "id":1132,
+             "name":"Kimbery Madarang",
+             "country":{
+                "name":"Senegal",
+                "code":"sn"
+             },
+             "company":"Silberman, Arthur L Esq",
+             "date":"2018-08-19",
+             "status":"negotiation",
+             "verified":true,
+             "activity":63,
+             "representative":{
+                "name":"Onyama Limba",
+                "image":"onyamalimba.png"
+             },
+             "balance":46478
+          },
+          {
+             "id":1133,
+             "name":"Thurman Manno",
+             "country":{
+                "name":"Colombia",
+                "code":"co"
+             },
+             "company":"Honey Bee Breeding Genetics &",
+             "date":"2016-05-02",
+             "status":"qualified",
+             "verified":true,
+             "activity":47,
+             "representative":{
+                "name":"Ivan Magalhaes",
+                "image":"ivanmagalhaes.png"
+             },
+             "balance":30674
+          },
+          {
+             "id":1134,
+             "name":"Becky Mirafuentes",
+             "country":{
+                "name":"Serbia",
+                "code":"rs"
+             },
+             "company":"Wells Kravitz Schnitzer",
+             "date":"2018-04-13",
+             "status":"unqualified",
+             "verified":true,
+             "activity":62,
+             "representative":{
+                "name":"Elwin Sharvill",
+                "image":"elwinsharvill.png"
+             },
+             "balance":47714
+          },
+          {
+             "id":1135,
+             "name":"Beatriz Corrington",
+             "country":{
+                "name":"South Africa",
+                "code":"za"
+             },
+             "company":"Prohab Rehabilitation Servs",
+             "date":"2020-01-04",
+             "status":"renewal",
+             "verified":true,
+             "activity":55,
+             "representative":{
+                "name":"Stephen Shaw",
+                "image":"stephenshaw.png"
+             },
+             "balance":14307
+          },
+          {
+             "id":1136,
+             "name":"Marti Maybury",
+             "country":{
+                "name":"Thailand",
+                "code":"th"
+             },
+             "company":"Eldridge, Kristin K Esq",
+             "date":"2016-02-05",
+             "status":"unqualified",
+             "verified":false,
+             "activity":3,
+             "representative":{
+                "name":"Bernardo Dominic",
+                "image":"bernardodominic.png"
+             },
+             "balance":82069
+          },
+          {
+             "id":1137,
+             "name":"Nieves Gotter",
+             "country":{
+                "name":"Latvia",
+                "code":"lv"
+             },
+             "company":"Vlahos, John J Esq",
+             "date":"2017-03-12",
+             "status":"proposal",
+             "verified":false,
+             "activity":3,
+             "representative":{
+                "name":"Elwin Sharvill",
+                "image":"elwinsharvill.png"
+             },
+             "balance":11182
+          },
+          {
+             "id":1138,
+             "name":"Leatha Hagele",
+             "country":{
+                "name":"Ukraine",
+                "code":"ua"
+             },
+             "company":"Ninas Indian Grs & Videos",
+             "date":"2019-03-27",
+             "status":"unqualified",
+             "verified":false,
+             "activity":67,
+             "representative":{
+                "name":"Stephen Shaw",
+                "image":"stephenshaw.png"
+             },
+             "balance":17126
+          },
+          {
+             "id":1139,
+             "name":"Valentin Klimek",
+             "country":{
+                "name":"Ivory Coast",
+                "code":"ci"
+             },
+             "company":"Schmid, Gayanne K Esq",
+             "date":"2019-08-06",
+             "status":"unqualified",
+             "verified":true,
+             "activity":14,
+             "representative":{
+                "name":"Ivan Magalhaes",
+                "image":"ivanmagalhaes.png"
+             },
+             "balance":19724
+          },
+          {
+             "id":1140,
+             "name":"Melissa Wiklund",
+             "country":{
+                "name":"Japan",
+                "code":"jp"
+             },
+             "company":"Moapa Valley Federal Credit Un",
+             "date":"2018-03-20",
+             "status":"qualified",
+             "verified":true,
+             "activity":8,
+             "representative":{
+                "name":"Onyama Limba",
+                "image":"onyamalimba.png"
+             },
+             "balance":91888
+          },
+          {
+             "id":1141,
+             "name":"Sheridan Zane",
+             "country":{
+                "name":"Croatia",
+                "code":"hr"
+             },
+             "company":"Kentucky Tennessee Clay Co",
+             "date":"2016-02-15",
+             "status":"qualified",
+             "verified":true,
+             "activity":17,
+             "representative":{
+                "name":"Bernardo Dominic",
+                "image":"bernardodominic.png"
+             },
+             "balance":15016
+          },
+          {
+             "id":1142,
+             "name":"Bulah Padilla",
+             "country":{
+                "name":"Philippines",
+                "code":"ph"
+             },
+             "company":"Admiral Party Rentals & Sales",
+             "date":"2016-02-10",
+             "status":"proposal",
+             "verified":false,
+             "activity":58,
+             "representative":{
+                "name":"Ioni Bowcher",
+                "image":"ionibowcher.png"
+             },
+             "balance":23118
+          },
+          {
+             "id":1143,
+             "name":"Audra Kohnert",
+             "country":{
+                "name":"Netherlands",
+                "code":"nl"
+             },
+             "company":"Nelson, Karolyn King Esq",
+             "date":"2019-07-16",
+             "status":"unqualified",
+             "verified":false,
+             "activity":82,
+             "representative":{
+                "name":"Bernardo Dominic",
+                "image":"bernardodominic.png"
+             },
+             "balance":90560
+          },
+          {
+             "id":1144,
+             "name":"Daren Weirather",
+             "country":{
+                "name":"Israel",
+                "code":"il"
+             },
+             "company":"Panasystems",
+             "date":"2015-07-23",
+             "status":"negotiation",
+             "verified":false,
+             "activity":96,
+             "representative":{
+                "name":"Onyama Limba",
+                "image":"onyamalimba.png"
+             },
+             "balance":34155
+          },
+          {
+             "id":1145,
+             "name":"Fernanda Jillson",
+             "country":{
+                "name":"Mexico",
+                "code":"mx"
+             },
+             "company":"Shank, Edward L Esq",
+             "date":"2017-07-02",
+             "status":"unqualified",
+             "verified":true,
+             "activity":92,
+             "representative":{
+                "name":"Xuxue Feng",
+                "image":"xuxuefeng.png"
+             },
+             "balance":6350
+          },
+          {
+             "id":1146,
+             "name":"Gearldine Gellinger",
+             "country":{
+                "name":"Egypt",
+                "code":"eg"
+             },
+             "company":"Megibow & Edwards",
+             "date":"2019-08-17",
+             "status":"proposal",
+             "verified":true,
+             "activity":18,
+             "representative":{
+                "name":"Anna Fali",
+                "image":"annafali.png"
+             },
+             "balance":77641
+          },
+          {
+             "id":1147,
+             "name":"Chau Kitzman",
+             "country":{
+                "name":"Paraguay",
+                "code":"py"
+             },
+             "company":"Benoff, Edward Esq",
+             "date":"2019-07-04",
+             "status":"new",
+             "verified":true,
+             "activity":9,
+             "representative":{
+                "name":"Onyama Limba",
+                "image":"onyamalimba.png"
+             },
+             "balance":43289
+          },
+          {
+             "id":1148,
+             "name":"Theola Frey",
+             "country":{
+                "name":"Vietnam",
+                "code":"vn"
+             },
+             "company":"Woodbridge Free Public Library",
+             "date":"2020-03-14",
+             "status":"unqualified",
+             "verified":true,
+             "activity":44,
+             "representative":{
+                "name":"Ioni Bowcher",
+                "image":"ionibowcher.png"
+             },
+             "balance":85657
+          },
+          {
+             "id":1149,
+             "name":"Cheryl Haroldson",
+             "country":{
+                "name":"France",
+                "code":"fr"
+             },
+             "company":"New York Life John Thune",
+             "date":"2018-04-03",
+             "status":"new",
+             "verified":false,
+             "activity":55,
+             "representative":{
+                "name":"Elwin Sharvill",
+                "image":"elwinsharvill.png"
+             },
+             "balance":82733
+          },
+          {
+             "id":1150,
+             "name":"Laticia Merced",
+             "country":{
+                "name":"Burkina Faso",
+                "code":"bf"
+             },
+             "company":"Alinabal Inc",
+             "date":"2017-03-04",
+             "status":"unqualified",
+             "verified":false,
+             "activity":21,
+             "representative":{
+                "name":"Ivan Magalhaes",
+                "image":"ivanmagalhaes.png"
+             },
+             "balance":38004
+          },
+          {
+             "id":1151,
+             "name":"Carissa Batman",
+             "country":{
+                "name":"Greece",
+                "code":"gr"
+             },
+             "company":"Poletto, Kim David Esq",
+             "date":"2016-05-05",
+             "status":"negotiation",
+             "verified":true,
+             "activity":91,
+             "representative":{
+                "name":"Ivan Magalhaes",
+                "image":"ivanmagalhaes.png"
+             },
+             "balance":29038
+          },
+          {
+             "id":1152,
+             "name":"Lezlie Craghead",
+             "country":{
+                "name":"Panama",
+                "code":"pa"
+             },
+             "company":"Chang, Carolyn Esq",
+             "date":"2019-05-28",
+             "status":"renewal",
+             "verified":false,
+             "activity":30,
+             "representative":{
+                "name":"Xuxue Feng",
+                "image":"xuxuefeng.png"
+             },
+             "balance":75123
+          },
+          {
+             "id":1153,
+             "name":"Ozell Shealy",
+             "country":{
+                "name":"Pakistan",
+                "code":"pk"
+             },
+             "company":"Silver Bros Inc",
+             "date":"2016-08-19",
+             "status":"proposal",
+             "verified":true,
+             "activity":14,
+             "representative":{
+                "name":"Bernardo Dominic",
+                "image":"bernardodominic.png"
+             },
+             "balance":33214
+          },
+          {
+             "id":1154,
+             "name":"Arminda Parvis",
+             "country":{
+                "name":"Indonesia",
+                "code":"id"
+             },
+             "company":"Newtec Inc",
+             "date":"2020-02-09",
+             "status":"proposal",
+             "verified":true,
+             "activity":77,
+             "representative":{
+                "name":"Elwin Sharvill",
+                "image":"elwinsharvill.png"
+             },
+             "balance":80651
+          },
+          {
+             "id":1155,
+             "name":"Reita Leto",
+             "country":{
+                "name":"Belgium",
+                "code":"be"
+             },
+             "company":"Creative Business Systems",
+             "date":"2020-04-03",
+             "status":"unqualified",
+             "verified":true,
+             "activity":58,
+             "representative":{
+                "name":"Ioni Bowcher",
+                "image":"ionibowcher.png"
+             },
+             "balance":5085
+          },
+          {
+             "id":1156,
+             "name":"Yolando Luczki",
+             "country":{
+                "name":"France",
+                "code":"fr"
+             },
+             "company":"Dal Tile Corporation",
+             "date":"2015-01-27",
+             "status":"renewal",
+             "verified":true,
+             "activity":78,
+             "representative":{
+                "name":"Ioni Bowcher",
+                "image":"ionibowcher.png"
+             },
+             "balance":93021
+          },
+          {
+             "id":1157,
+             "name":"Lizette Stem",
+             "country":{
+                "name":"Slovakia",
+                "code":"sk"
+             },
+             "company":"Edward S Katz",
+             "date":"2018-08-06",
+             "status":"new",
+             "verified":false,
+             "activity":67,
+             "representative":{
+                "name":"Stephen Shaw",
+                "image":"stephenshaw.png"
+             },
+             "balance":37287
+          },
+          {
+             "id":1158,
+             "name":"Gregoria Pawlowicz",
+             "country":{
+                "name":"Egypt",
+                "code":"eg"
+             },
+             "company":"Oh My Goodknits Inc",
+             "date":"2020-02-20",
+             "status":"renewal",
+             "verified":false,
+             "activity":29,
+             "representative":{
+                "name":"Stephen Shaw",
+                "image":"stephenshaw.png"
+             },
+             "balance":73070
+          },
+          {
+             "id":1159,
+             "name":"Carin Deleo",
+             "country":{
+                "name":"China",
+                "code":"cn"
+             },
+             "company":"Redeker, Debbie",
+             "date":"2015-05-28",
+             "status":"qualified",
+             "verified":true,
+             "activity":13,
+             "representative":{
+                "name":"Asiya Javayant",
+                "image":"asiyajavayant.png"
+             },
+             "balance":64422
+          },
+          {
+             "id":1160,
+             "name":"Chantell Maynerich",
+             "country":{
+                "name":"Estonia",
+                "code":"ee"
+             },
+             "company":"Desert Sands Motel",
+             "date":"2016-09-05",
+             "status":"unqualified",
+             "verified":true,
+             "activity":75,
+             "representative":{
+                "name":"Ivan Magalhaes",
+                "image":"ivanmagalhaes.png"
+             },
+             "balance":36826
+          },
+          {
+             "id":1161,
+             "name":"Dierdre Yum",
+             "country":{
+                "name":"Czech Republic",
+                "code":"cz"
+             },
+             "company":"Cummins Southern Plains Inc",
+             "date":"2016-12-20",
+             "status":"negotiation",
+             "verified":true,
+             "activity":1,
+             "representative":{
+                "name":"Onyama Limba",
+                "image":"onyamalimba.png"
+             },
+             "balance":93101
+          },
+          {
+             "id":1162,
+             "name":"Larae Gudroe",
+             "country":{
+                "name":"Slovenia",
+                "code":"si"
+             },
+             "company":"Lehigh Furn Divsn Lehigh",
+             "date":"2015-11-28",
+             "status":"unqualified",
+             "verified":false,
+             "activity":13,
+             "representative":{
+                "name":"Ioni Bowcher",
+                "image":"ionibowcher.png"
+             },
+             "balance":60177
+          },
+          {
+             "id":1163,
+             "name":"Latrice Tolfree",
+             "country":{
+                "name":"Jamaica",
+                "code":"jm"
+             },
+             "company":"United Van Lines Agent",
+             "date":"2018-11-11",
+             "status":"renewal",
+             "verified":false,
+             "activity":73,
+             "representative":{
+                "name":"Ioni Bowcher",
+                "image":"ionibowcher.png"
+             },
+             "balance":47198
+          },
+          {
+             "id":1164,
+             "name":"Kerry Theodorov",
+             "country":{
+                "name":"Romania",
+                "code":"ro"
+             },
+             "company":"Capitol Reporters",
+             "date":"2016-11-05",
+             "status":"unqualified",
+             "verified":true,
+             "activity":76,
+             "representative":{
+                "name":"Amy Elsner",
+                "image":"amyelsner.png"
+             },
+             "balance":71305
+          },
+          {
+             "id":1165,
+             "name":"Dorthy Hidvegi",
+             "country":{
+                "name":"Poland",
+                "code":"pl"
+             },
+             "company":"Kwik Kopy Printing",
+             "date":"2020-08-13",
+             "status":"qualified",
+             "verified":true,
+             "activity":60,
+             "representative":{
+                "name":"Ivan Magalhaes",
+                "image":"ivanmagalhaes.png"
+             },
+             "balance":17526
+          },
+          {
+             "id":1166,
+             "name":"Fannie Lungren",
+             "country":{
+                "name":"Belarus",
+                "code":"by"
+             },
+             "company":"Centro Inc",
+             "date":"2015-07-06",
+             "status":"negotiation",
+             "verified":true,
+             "activity":24,
+             "representative":{
+                "name":"Stephen Shaw",
+                "image":"stephenshaw.png"
+             },
+             "balance":16596
+          },
+          {
+             "id":1167,
+             "name":"Evangelina Radde",
+             "country":{
+                "name":"Ivory Coast",
+                "code":"ci"
+             },
+             "company":"Campbell, Jan Esq",
+             "date":"2020-02-25",
+             "status":"unqualified",
+             "verified":true,
+             "activity":93,
+             "representative":{
+                "name":"Anna Fali",
+                "image":"annafali.png"
+             },
+             "balance":56870
+          },
+          {
+             "id":1168,
+             "name":"Novella Degroot",
+             "country":{
+                "name":"Slovenia",
+                "code":"si"
+             },
+             "company":"Evans, C Kelly Esq",
+             "date":"2017-12-19",
+             "status":"unqualified",
+             "verified":false,
+             "activity":30,
+             "representative":{
+                "name":"Amy Elsner",
+                "image":"amyelsner.png"
+             },
+             "balance":82928
+          },
+          {
+             "id":1169,
+             "name":"Clay Hoa",
+             "country":{
+                "name":"Paraguay",
+                "code":"py"
+             },
+             "company":"Scat Enterprises",
+             "date":"2016-02-22",
+             "status":"negotiation",
+             "verified":false,
+             "activity":93,
+             "representative":{
+                "name":"Amy Elsner",
+                "image":"amyelsner.png"
+             },
+             "balance":64181
+          },
+          {
+             "id":1170,
+             "name":"Jennifer Fallick",
+             "country":{
+                "name":"Australia",
+                "code":"au"
+             },
+             "company":"Nagle, Daniel J Esq",
+             "date":"2016-12-24",
+             "status":"unqualified",
+             "verified":true,
+             "activity":88,
+             "representative":{
+                "name":"Bernardo Dominic",
+                "image":"bernardodominic.png"
+             },
+             "balance":30561
+          },
+          {
+             "id":1171,
+             "name":"Irma Wolfgramm",
+             "country":{
+                "name":"Belgium",
+                "code":"be"
+             },
+             "company":"Serendiquity Bed & Breakfast",
+             "date":"2020-10-18",
+             "status":"negotiation",
+             "verified":true,
+             "activity":70,
+             "representative":{
+                "name":"Stephen Shaw",
+                "image":"stephenshaw.png"
+             },
+             "balance":24617
+          },
+          {
+             "id":1172,
+             "name":"Eun Coody",
+             "country":{
+                "name":"Taiwan",
+                "code":"tw"
+             },
+             "company":"Ray Carolyne Realty",
+             "date":"2018-02-12",
+             "status":"qualified",
+             "verified":true,
+             "activity":61,
+             "representative":{
+                "name":"Ioni Bowcher",
+                "image":"ionibowcher.png"
+             },
+             "balance":77860
+          },
+          {
+             "id":1173,
+             "name":"Sylvia Cousey",
+             "country":{
+                "name":"Ireland",
+                "code":"ie"
+             },
+             "company":"Berg, Charles E",
+             "date":"2018-06-10",
+             "status":"unqualified",
+             "verified":false,
+             "activity":91,
+             "representative":{
+                "name":"Ioni Bowcher",
+                "image":"ionibowcher.png"
+             },
+             "balance":25664
+          },
+          {
+             "id":1174,
+             "name":"Nana Wrinkles",
+             "country":{
+                "name":"Austria",
+                "code":"at"
+             },
+             "company":"Ray, Milbern D",
+             "date":"2017-04-11",
+             "status":"renewal",
+             "verified":true,
+             "activity":98,
+             "representative":{
+                "name":"Asiya Javayant",
+                "image":"asiyajavayant.png"
+             },
+             "balance":98113
+          },
+          {
+             "id":1175,
+             "name":"Layla Springe",
+             "country":{
+                "name":"South Africa",
+                "code":"za"
+             },
+             "company":"Chadds Ford Winery",
+             "date":"2019-07-27",
+             "status":"unqualified",
+             "verified":true,
+             "activity":97,
+             "representative":{
+                "name":"Ioni Bowcher",
+                "image":"ionibowcher.png"
+             },
+             "balance":14763
+          },
+          {
+             "id":1176,
+             "name":"Joesph Degonia",
+             "country":{
+                "name":"Serbia",
+                "code":"rs"
+             },
+             "company":"A R Packaging",
+             "date":"2020-04-23",
+             "status":"renewal",
+             "verified":true,
+             "activity":56,
+             "representative":{
+                "name":"Elwin Sharvill",
+                "image":"elwinsharvill.png"
+             },
+             "balance":31317
+          },
+          {
+             "id":1177,
+             "name":"Annabelle Boord",
+             "country":{
+                "name":"Guatemala",
+                "code":"gt"
+             },
+             "company":"Corn Popper",
+             "date":"2020-09-16",
+             "status":"proposal",
+             "verified":true,
+             "activity":76,
+             "representative":{
+                "name":"Anna Fali",
+                "image":"annafali.png"
+             },
+             "balance":30883
+          },
+          {
+             "id":1178,
+             "name":"Stephaine Vinning",
+             "country":{
+                "name":"Australia",
+                "code":"au"
+             },
+             "company":"Birite Foodservice Distr",
+             "date":"2016-05-14",
+             "status":"negotiation",
+             "verified":true,
+             "activity":43,
+             "representative":{
+                "name":"Xuxue Feng",
+                "image":"xuxuefeng.png"
+             },
+             "balance":93785
+          },
+          {
+             "id":1179,
+             "name":"Nelida Sawchuk",
+             "country":{
+                "name":"South Africa",
+                "code":"za"
+             },
+             "company":"Anchorage Museum Of Hist & Art",
+             "date":"2018-06-22",
+             "status":"qualified",
+             "verified":true,
+             "activity":58,
+             "representative":{
+                "name":"Onyama Limba",
+                "image":"onyamalimba.png"
+             },
+             "balance":68380
+          },
+          {
+             "id":1180,
+             "name":"Marguerita Hiatt",
+             "country":{
+                "name":"United Kingdom",
+                "code":"gb"
+             },
+             "company":"Haber, George D Md",
+             "date":"2018-10-25",
+             "status":"qualified",
+             "verified":false,
+             "activity":72,
+             "representative":{
+                "name":"Anna Fali",
+                "image":"annafali.png"
+             },
+             "balance":93454
+          },
+          {
+             "id":1181,
+             "name":"Carmela Cookey",
+             "country":{
+                "name":"France",
+                "code":"fr"
+             },
+             "company":"Royal Pontiac Olds Inc",
+             "date":"2018-07-19",
+             "status":"proposal",
+             "verified":false,
+             "activity":24,
+             "representative":{
+                "name":"Xuxue Feng",
+                "image":"xuxuefeng.png"
+             },
+             "balance":30570
+          },
+          {
+             "id":1182,
+             "name":"Junita Brideau",
+             "country":{
+                "name":"Indonesia",
+                "code":"id"
+             },
+             "company":"Leonards Antiques Inc",
+             "date":"2015-03-15",
+             "status":"proposal",
+             "verified":true,
+             "activity":86,
+             "representative":{
+                "name":"Anna Fali",
+                "image":"annafali.png"
+             },
+             "balance":79506
+          },
+          {
+             "id":1183,
+             "name":"Claribel Varriano",
+             "country":{
+                "name":"Ecuador",
+                "code":"ec"
+             },
+             "company":"Meca",
+             "date":"2017-04-14",
+             "status":"unqualified",
+             "verified":true,
+             "activity":15,
+             "representative":{
+                "name":"Onyama Limba",
+                "image":"onyamalimba.png"
+             },
+             "balance":8654
+          },
+          {
+             "id":1184,
+             "name":"Benton Skursky",
+             "country":{
+                "name":"Iceland",
+                "code":"is"
+             },
+             "company":"Nercon Engineering & Mfg Inc",
+             "date":"2015-02-19",
+             "status":"proposal",
+             "verified":true,
+             "activity":9,
+             "representative":{
+                "name":"Asiya Javayant",
+                "image":"asiyajavayant.png"
+             },
+             "balance":13368
+          },
+          {
+             "id":1185,
+             "name":"Hillary Skulski",
+             "country":{
+                "name":"France",
+                "code":"fr"
+             },
+             "company":"Replica I",
+             "date":"2016-03-25",
+             "status":"unqualified",
+             "verified":true,
+             "activity":82,
+             "representative":{
+                "name":"Bernardo Dominic",
+                "image":"bernardodominic.png"
+             },
+             "balance":92631
+          },
+          {
+             "id":1186,
+             "name":"Merilyn Bayless",
+             "country":{
+                "name":"Jamaica",
+                "code":"jm"
+             },
+             "company":"20 20 Printing Inc",
+             "date":"2020-10-13",
+             "status":"unqualified",
+             "verified":true,
+             "activity":13,
+             "representative":{
+                "name":"Ivan Magalhaes",
+                "image":"ivanmagalhaes.png"
+             },
+             "balance":4989
+          },
+          {
+             "id":1187,
+             "name":"Teri Ennaco",
+             "country":{
+                "name":"Pakistan",
+                "code":"pk"
+             },
+             "company":"Publishers Group West",
+             "date":"2019-12-21",
+             "status":"unqualified",
+             "verified":true,
+             "activity":57,
+             "representative":{
+                "name":"Bernardo Dominic",
+                "image":"bernardodominic.png"
+             },
+             "balance":77668
+          },
+          {
+             "id":1188,
+             "name":"Merlyn Lawler",
+             "country":{
+                "name":"Germany",
+                "code":"de"
+             },
+             "company":"Nischwitz, Jeffrey L Esq",
+             "date":"2016-02-26",
+             "status":"renewal",
+             "verified":true,
+             "activity":45,
+             "representative":{
+                "name":"Ivan Magalhaes",
+                "image":"ivanmagalhaes.png"
+             },
+             "balance":3525
+          },
+          {
+             "id":1189,
+             "name":"Georgene Montezuma",
+             "country":{
+                "name":"Senegal",
+                "code":"sn"
+             },
+             "company":"Payne Blades & Wellborn Pa",
+             "date":"2018-10-11",
+             "status":"new",
+             "verified":true,
+             "activity":64,
+             "representative":{
+                "name":"Elwin Sharvill",
+                "image":"elwinsharvill.png"
+             },
+             "balance":45838
+          },
+          {
+             "id":1190,
+             "name":"Jettie Mconnell",
+             "country":{
+                "name":"Denmark",
+                "code":"dk"
+             },
+             "company":"Coldwell Bnkr Wright Real Est",
+             "date":"2015-10-18",
+             "status":"negotiation",
+             "verified":false,
+             "activity":74,
+             "representative":{
+                "name":"Ivan Magalhaes",
+                "image":"ivanmagalhaes.png"
+             },
+             "balance":49148
+          },
+          {
+             "id":1191,
+             "name":"Lemuel Latzke",
+             "country":{
+                "name":"Colombia",
+                "code":"co"
+             },
+             "company":"Computer Repair Service",
+             "date":"2016-02-13",
+             "status":"proposal",
+             "verified":false,
+             "activity":79,
+             "representative":{
+                "name":"Stephen Shaw",
+                "image":"stephenshaw.png"
+             },
+             "balance":96709
+          },
+          {
+             "id":1192,
+             "name":"Melodie Knipp",
+             "country":{
+                "name":"Finland",
+                "code":"fi"
+             },
+             "company":"Fleetwood Building Block Inc",
+             "date":"2018-03-08",
+             "status":"negotiation",
+             "verified":false,
+             "activity":19,
+             "representative":{
+                "name":"Asiya Javayant",
+                "image":"asiyajavayant.png"
+             },
+             "balance":23253
+          },
+          {
+             "id":1193,
+             "name":"Candida Corbley",
+             "country":{
+                "name":"Poland",
+                "code":"pl"
+             },
+             "company":"Colts Neck Medical Assocs Inc",
+             "date":"2017-12-02",
+             "status":"negotiation",
+             "verified":true,
+             "activity":11,
+             "representative":{
+                "name":"Onyama Limba",
+                "image":"onyamalimba.png"
+             },
+             "balance":40836
+          },
+          {
+             "id":1194,
+             "name":"Karan Karpin",
+             "country":{
+                "name":"Estonia",
+                "code":"ee"
+             },
+             "company":"New England Taxidermy",
+             "date":"2019-01-07",
+             "status":"proposal",
+             "verified":true,
+             "activity":4,
+             "representative":{
+                "name":"Stephen Shaw",
+                "image":"stephenshaw.png"
+             },
+             "balance":60719
+          },
+          {
+             "id":1195,
+             "name":"Andra Scheyer",
+             "country":{
+                "name":"Romania",
+                "code":"ro"
+             },
+             "company":"Ludcke, George O Esq",
+             "date":"2016-08-14",
+             "status":"qualified",
+             "verified":true,
+             "activity":62,
+             "representative":{
+                "name":"Elwin Sharvill",
+                "image":"elwinsharvill.png"
+             },
+             "balance":17419
+          },
+          {
+             "id":1196,
+             "name":"Felicidad Poullion",
+             "country":{
+                "name":"Greece",
+                "code":"gr"
+             },
+             "company":"Mccorkle, Tom S Esq",
+             "date":"2016-03-05",
+             "status":"renewal",
+             "verified":true,
+             "activity":64,
+             "representative":{
+                "name":"Elwin Sharvill",
+                "image":"elwinsharvill.png"
+             },
+             "balance":94052
+          },
+          {
+             "id":1197,
+             "name":"Belen Strassner",
+             "country":{
+                "name":"Ivory Coast",
+                "code":"ci"
+             },
+             "company":"Eagle Software Inc",
+             "date":"2015-12-14",
+             "status":"qualified",
+             "verified":true,
+             "activity":91,
+             "representative":{
+                "name":"Xuxue Feng",
+                "image":"xuxuefeng.png"
+             },
+             "balance":54241
+          },
+          {
+             "id":1198,
+             "name":"Gracia Melnyk",
+             "country":{
+                "name":"Costa Rica",
+                "code":"cr"
+             },
+             "company":"Juvenile & Adult Super",
+             "date":"2019-06-01",
+             "status":"unqualified",
+             "verified":true,
+             "activity":40,
+             "representative":{
+                "name":"Asiya Javayant",
+                "image":"asiyajavayant.png"
+             },
+             "balance":87668
+          },
+          {
+             "id":1199,
+             "name":"Jolanda Hanafan",
+             "country":{
+                "name":"Cameroon",
+                "code":"cm"
+             },
+             "company":"Perez, Joseph J Esq",
+             "date":"2015-12-09",
+             "status":"qualified",
+             "verified":true,
+             "activity":27,
+             "representative":{
+                "name":"Ivan Magalhaes",
+                "image":"ivanmagalhaes.png"
+             },
+             "balance":99417
+          }
+       ]
+     }`,
     'customers-medium': `{
-        "data":[
-           {
-              "id":1000,
-              "name":"James Butt",
-              "country":{
-                 "name":"Algeria",
-                 "code":"dz"
-              },
-              "company":"Benton, John B Jr",
-              "date":"2015-09-13",
-              "status":"unqualified",
-              "verified":true,
-              "activity":17,
-              "representative":{
-                 "name":"Ioni Bowcher",
-                 "image":"ionibowcher.png"
-              },
-              "balance":70663
-           },
-           {
-              "id":1001,
-              "name":"Josephine Darakjy",
-              "country":{
-                 "name":"Egypt",
-                 "code":"eg"
-              },
-              "company":"Chanay, Jeffrey A Esq",
-              "date":"2019-02-09",
-              "status":"proposal",
-              "verified":true,
-              "activity":0,
-              "representative":{
-                 "name":"Amy Elsner",
-                 "image":"amyelsner.png"
-              },
-              "balance":82429
-           },
-           {
-              "id":1002,
-              "name":"Art Venere",
-              "country":{
-                 "name":"Panama",
-                 "code":"pa"
-              },
-              "company":"Chemel, James L Cpa",
-              "date":"2017-05-13",
-              "status":"qualified",
-              "verified":false,
-              "activity":63,
-              "representative":{
-                 "name":"Asiya Javayant",
-                 "image":"asiyajavayant.png"
-              },
-              "balance":28334
-           },
-           {
-              "id":1003,
-              "name":"Lenna Paprocki",
-              "country":{
-                 "name":"Slovenia",
-                 "code":"si"
-              },
-              "company":"Feltz Printing Service",
-              "date":"2020-09-15",
-              "status":"new",
-              "verified":false,
-              "activity":37,
-              "representative":{
-                 "name":"Xuxue Feng",
-                 "image":"xuxuefeng.png"
-              },
-              "balance":88521
-           },
-           {
-              "id":1004,
-              "name":"Donette Foller",
-              "country":{
-                 "name":"South Africa",
-                 "code":"za"
-              },
-              "company":"Printing Dimensions",
-              "date":"2016-05-20",
-              "status":"proposal",
-              "verified":true,
-              "activity":33,
-              "representative":{
-                 "name":"Asiya Javayant",
-                 "image":"asiyajavayant.png"
-              },
-              "balance":93905
-           },
-           {
-              "id":1005,
-              "name":"Simona Morasca",
-              "country":{
-                 "name":"Egypt",
-                 "code":"eg"
-              },
-              "company":"Chapman, Ross E Esq",
-              "date":"2018-02-16",
-              "status":"qualified",
-              "verified":false,
-              "activity":68,
-              "representative":{
-                 "name":"Ivan Magalhaes",
-                 "image":"ivanmagalhaes.png"
-              },
-              "balance":50041
-           },
-           {
-              "id":1006,
-              "name":"Mitsue Tollner",
-              "country":{
-                 "name":"Paraguay",
-                 "code":"py"
-              },
-              "company":"Morlong Associates",
-              "date":"2018-02-19",
-              "status":"renewal",
-              "verified":true,
-              "activity":54,
-              "representative":{
-                 "name":"Ivan Magalhaes",
-                 "image":"ivanmagalhaes.png"
-              },
-              "balance":58706
-           },
-           {
-              "id":1007,
-              "name":"Leota Dilliard",
-              "country":{
-                 "name":"Serbia",
-                 "code":"rs"
-              },
-              "company":"Commercial Press",
-              "date":"2019-08-13",
-              "status":"renewal",
-              "verified":true,
-              "activity":69,
-              "representative":{
-                 "name":"Onyama Limba",
-                 "image":"onyamalimba.png"
-              },
-              "balance":26640
-           },
-           {
-              "id":1008,
-              "name":"Sage Wieser",
-              "country":{
-                 "name":"Egypt",
-                 "code":"eg"
-              },
-              "company":"Truhlar And Truhlar Attys",
-              "date":"2018-11-21",
-              "status":"unqualified",
-              "verified":true,
-              "activity":76,
-              "representative":{
-                 "name":"Ivan Magalhaes",
-                 "image":"ivanmagalhaes.png"
-              },
-              "balance":65369
-           },
-           {
-              "id":1009,
-              "name":"Kris Marrier",
-              "country":{
-                 "name":"Mexico",
-                 "code":"mx"
-              },
-              "company":"King, Christopher A Esq",
-              "date":"2015-07-07",
-              "status":"proposal",
-              "verified":false,
-              "activity":3,
-              "representative":{
-                 "name":"Onyama Limba",
-                 "image":"onyamalimba.png"
-              },
-              "balance":63451
-           },
-           {
-              "id":1010,
-              "name":"Minna Amigon",
-              "country":{
-                 "name":"Romania",
-                 "code":"ro"
-              },
-              "company":"Dorl, James J Esq",
-              "date":"2018-11-07",
-              "status":"qualified",
-              "verified":false,
-              "activity":38,
-              "representative":{
-                 "name":"Anna Fali",
-                 "image":"annafali.png"
-              },
-              "balance":71169
-           },
-           {
-              "id":1011,
-              "name":"Abel Maclead",
-              "country":{
-                 "name":"Singapore",
-                 "code":"sg"
-              },
-              "company":"Rangoni Of Florence",
-              "date":"2017-03-11",
-              "status":"qualified",
-              "verified":true,
-              "activity":87,
-              "representative":{
-                 "name":"Bernardo Dominic",
-                 "image":"bernardodominic.png"
-              },
-              "balance":96842
-           },
-           {
-              "id":1012,
-              "name":"Kiley Caldarera",
-              "country":{
-                 "name":"Serbia",
-                 "code":"rs"
-              },
-              "company":"Feiner Bros",
-              "date":"2015-10-20",
-              "status":"unqualified",
-              "verified":false,
-              "activity":80,
-              "representative":{
-                 "name":"Onyama Limba",
-                 "image":"onyamalimba.png"
-              },
-              "balance":92734
-           },
-           {
-              "id":1013,
-              "name":"Graciela Ruta",
-              "country":{
-                 "name":"Chile",
-                 "code":"cl"
-              },
-              "company":"Buckley Miller & Wright",
-              "date":"2016-07-25",
-              "status":"negotiation",
-              "verified":false,
-              "activity":59,
-              "representative":{
-                 "name":"Amy Elsner",
-                 "image":"amyelsner.png"
-              },
-              "balance":45250
-           },
-           {
-              "id":1014,
-              "name":"Cammy Albares",
-              "country":{
-                 "name":"Philippines",
-                 "code":"ph"
-              },
-              "company":"Rousseaux, Michael Esq",
-              "date":"2019-06-25",
-              "status":"new",
-              "verified":true,
-              "activity":90,
-              "representative":{
-                 "name":"Asiya Javayant",
-                 "image":"asiyajavayant.png"
-              },
-              "balance":30236
-           },
-           {
-              "id":1015,
-              "name":"Mattie Poquette",
-              "country":{
-                 "name":"Venezuela",
-                 "code":"ve"
-              },
-              "company":"Century Communications",
-              "date":"2017-12-12",
-              "status":"negotiation",
-              "verified":false,
-              "activity":52,
-              "representative":{
-                 "name":"Anna Fali",
-                 "image":"annafali.png"
-              },
-              "balance":64533
-           },
-           {
-              "id":1016,
-              "name":"Meaghan Garufi",
-              "country":{
-                 "name":"Malaysia",
-                 "code":"my"
-              },
-              "company":"Bolton, Wilbur Esq",
-              "date":"2018-07-04",
-              "status":"unqualified",
-              "verified":false,
-              "activity":31,
-              "representative":{
-                 "name":"Ivan Magalhaes",
-                 "image":"ivanmagalhaes.png"
-              },
-              "balance":37279
-           },
-           {
-              "id":1017,
-              "name":"Gladys Rim",
-              "country":{
-                 "name":"Netherlands",
-                 "code":"nl"
-              },
-              "company":"T M Byxbee Company Pc",
-              "date":"2020-02-27",
-              "status":"renewal",
-              "verified":true,
-              "activity":48,
-              "representative":{
-                 "name":"Stephen Shaw",
-                 "image":"stephenshaw.png"
-              },
-              "balance":27381
-           },
-           {
-              "id":1018,
-              "name":"Yuki Whobrey",
-              "country":{
-                 "name":"Israel",
-                 "code":"il"
-              },
-              "company":"Farmers Insurance Group",
-              "date":"2017-12-21",
-              "status":"negotiation",
-              "verified":true,
-              "activity":16,
-              "representative":{
-                 "name":"Bernardo Dominic",
-                 "image":"bernardodominic.png"
-              },
-              "balance":9257
-           },
-           {
-              "id":1019,
-              "name":"Fletcher Flosi",
-              "country":{
-                 "name":"Argentina",
-                 "code":"ar"
-              },
-              "company":"Post Box Services Plus",
-              "date":"2016-01-04",
-              "status":"renewal",
-              "verified":true,
-              "activity":19,
-              "representative":{
-                 "name":"Xuxue Feng",
-                 "image":"xuxuefeng.png"
-              },
-              "balance":67783
-           },
-           {
-              "id":1020,
-              "name":"Bette Nicka",
-              "country":{
-                 "name":"Paraguay",
-                 "code":"py"
-              },
-              "company":"Sport En Art",
-              "date":"2016-10-21",
-              "status":"renewal",
-              "verified":false,
-              "activity":100,
-              "representative":{
-                 "name":"Onyama Limba",
-                 "image":"onyamalimba.png"
-              },
-              "balance":4609
-           },
-           {
-              "id":1021,
-              "name":"Veronika Inouye",
-              "country":{
-                 "name":"Ecuador",
-                 "code":"ec"
-              },
-              "company":"C 4 Network Inc",
-              "date":"2017-03-24",
-              "status":"renewal",
-              "verified":false,
-              "activity":72,
-              "representative":{
-                 "name":"Ioni Bowcher",
-                 "image":"ionibowcher.png"
-              },
-              "balance":26565
-           },
-           {
-              "id":1022,
-              "name":"Willard Kolmetz",
-              "country":{
-                 "name":"Tunisia",
-                 "code":"tn"
-              },
-              "company":"Ingalls, Donald R Esq",
-              "date":"2017-04-15",
-              "status":"renewal",
-              "verified":true,
-              "activity":94,
-              "representative":{
-                 "name":"Asiya Javayant",
-                 "image":"asiyajavayant.png"
-              },
-              "balance":75876
-           },
-           {
-              "id":1023,
-              "name":"Maryann Royster",
-              "country":{
-                 "name":"Belarus",
-                 "code":"by"
-              },
-              "company":"Franklin, Peter L Esq",
-              "date":"2017-03-11",
-              "status":"qualified",
-              "verified":false,
-              "activity":56,
-              "representative":{
-                 "name":"Elwin Sharvill",
-                 "image":"elwinsharvill.png"
-              },
-              "balance":41121
-           },
-           {
-              "id":1024,
-              "name":"Alisha Slusarski",
-              "country":{
-                 "name":"Iceland",
-                 "code":"is"
-              },
-              "company":"Wtlz Power 107 Fm",
-              "date":"2018-03-27",
-              "status":"qualified",
-              "verified":true,
-              "activity":7,
-              "representative":{
-                 "name":"Stephen Shaw",
-                 "image":"stephenshaw.png"
-              },
-              "balance":91691
-           },
-           {
-              "id":1025,
-              "name":"Allene Iturbide",
-              "country":{
-                 "name":"Italy",
-                 "code":"it"
-              },
-              "company":"Ledecky, David Esq",
-              "date":"2016-02-20",
-              "status":"qualified",
-              "verified":true,
-              "activity":1,
-              "representative":{
-                 "name":"Ivan Magalhaes",
-                 "image":"ivanmagalhaes.png"
-              },
-              "balance":40137
-           },
-           {
-              "id":1026,
-              "name":"Chanel Caudy",
-              "country":{
-                 "name":"Argentina",
-                 "code":"ar"
-              },
-              "company":"Professional Image Inc",
-              "date":"2018-06-24",
-              "status":"new",
-              "verified":true,
-              "activity":26,
-              "representative":{
-                 "name":"Ioni Bowcher",
-                 "image":"ionibowcher.png"
-              },
-              "balance":21304
-           },
-           {
-              "id":1027,
-              "name":"Ezekiel Chui",
-              "country":{
-                 "name":"Ireland",
-                 "code":"ie"
-              },
-              "company":"Sider, Donald C Esq",
-              "date":"2016-09-24",
-              "status":"new",
-              "verified":false,
-              "activity":76,
-              "representative":{
-                 "name":"Amy Elsner",
-                 "image":"amyelsner.png"
-              },
-              "balance":60454
-           },
-           {
-              "id":1028,
-              "name":"Willow Kusko",
-              "country":{
-                 "name":"Romania",
-                 "code":"ro"
-              },
-              "company":"U Pull It",
-              "date":"2020-04-11",
-              "status":"qualified",
-              "verified":true,
-              "activity":7,
-              "representative":{
-                 "name":"Onyama Limba",
-                 "image":"onyamalimba.png"
-              },
-              "balance":17565
-           },
-           {
-              "id":1029,
-              "name":"Bernardo Figeroa",
-              "country":{
-                 "name":"Israel",
-                 "code":"il"
-              },
-              "company":"Clark, Richard Cpa",
-              "date":"2018-04-11",
-              "status":"renewal",
-              "verified":true,
-              "activity":81,
-              "representative":{
-                 "name":"Ioni Bowcher",
-                 "image":"ionibowcher.png"
-              },
-              "balance":17774
-           },
-           {
-              "id":1030,
-              "name":"Ammie Corrio",
-              "country":{
-                 "name":"Hungary",
-                 "code":"hu"
-              },
-              "company":"Moskowitz, Barry S",
-              "date":"2016-06-11",
-              "status":"negotiation",
-              "verified":true,
-              "activity":56,
-              "representative":{
-                 "name":"Asiya Javayant",
-                 "image":"asiyajavayant.png"
-              },
-              "balance":49201
-           },
-           {
-              "id":1031,
-              "name":"Francine Vocelka",
-              "country":{
-                 "name":"Honduras",
-                 "code":"hn"
-              },
-              "company":"Cascade Realty Advisors Inc",
-              "date":"2017-08-02",
-              "status":"qualified",
-              "verified":true,
-              "activity":94,
-              "representative":{
-                 "name":"Ioni Bowcher",
-                 "image":"ionibowcher.png"
-              },
-              "balance":67126
-           },
-           {
-              "id":1032,
-              "name":"Ernie Stenseth",
-              "country":{
-                 "name":"Australia",
-                 "code":"au"
-              },
-              "company":"Knwz Newsradio",
-              "date":"2018-06-06",
-              "status":"renewal",
-              "verified":true,
-              "activity":68,
-              "representative":{
-                 "name":"Xuxue Feng",
-                 "image":"xuxuefeng.png"
-              },
-              "balance":76017
-           },
-           {
-              "id":1033,
-              "name":"Albina Glick",
-              "country":{
-                 "name":"Ukraine",
-                 "code":"ua"
-              },
-              "company":"Giampetro, Anthony D",
-              "date":"2019-08-08",
-              "status":"proposal",
-              "verified":true,
-              "activity":85,
-              "representative":{
-                 "name":"Bernardo Dominic",
-                 "image":"bernardodominic.png"
-              },
-              "balance":91201
-           },
-           {
-              "id":1034,
-              "name":"Alishia Sergi",
-              "country":{
-                 "name":"Qatar",
-                 "code":"qa"
-              },
-              "company":"Milford Enterprises Inc",
-              "date":"2018-05-19",
-              "status":"negotiation",
-              "verified":false,
-              "activity":46,
-              "representative":{
-                 "name":"Ivan Magalhaes",
-                 "image":"ivanmagalhaes.png"
-              },
-              "balance":12237
-           },
-           {
-              "id":1035,
-              "name":"Solange Shinko",
-              "country":{
-                 "name":"Cameroon",
-                 "code":"cm"
-              },
-              "company":"Mosocco, Ronald A",
-              "date":"2015-02-12",
-              "status":"qualified",
-              "verified":true,
-              "activity":32,
-              "representative":{
-                 "name":"Onyama Limba",
-                 "image":"onyamalimba.png"
-              },
-              "balance":34072
-           },
-           {
-              "id":1036,
-              "name":"Jose Stockham",
-              "country":{
-                 "name":"Italy",
-                 "code":"it"
-              },
-              "company":"Tri State Refueler Co",
-              "date":"2018-04-25",
-              "status":"qualified",
-              "verified":true,
-              "activity":77,
-              "representative":{
-                 "name":"Amy Elsner",
-                 "image":"amyelsner.png"
-              },
-              "balance":94909
-           },
-           {
-              "id":1037,
-              "name":"Rozella Ostrosky",
-              "country":{
-                 "name":"Venezuela",
-                 "code":"ve"
-              },
-              "company":"Parkway Company",
-              "date":"2016-02-27",
-              "status":"unqualified",
-              "verified":true,
-              "activity":66,
-              "representative":{
-                 "name":"Amy Elsner",
-                 "image":"amyelsner.png"
-              },
-              "balance":57245
-           },
-           {
-              "id":1038,
-              "name":"Valentine Gillian",
-              "country":{
-                 "name":"Paraguay",
-                 "code":"py"
-              },
-              "company":"Fbs Business Finance",
-              "date":"2019-09-17",
-              "status":"qualified",
-              "verified":true,
-              "activity":25,
-              "representative":{
-                 "name":"Bernardo Dominic",
-                 "image":"bernardodominic.png"
-              },
-              "balance":75502
-           },
-           {
-              "id":1039,
-              "name":"Kati Rulapaugh",
-              "country":{
-                 "name":"Puerto Rico",
-                 "code":"pr"
-              },
-              "company":"Eder Assocs Consltng Engrs Pc",
-              "date":"2016-12-03",
-              "status":"renewal",
-              "verified":false,
-              "activity":51,
-              "representative":{
-                 "name":"Ioni Bowcher",
-                 "image":"ionibowcher.png"
-              },
-              "balance":82075
-           },
-           {
-              "id":1040,
-              "name":"Youlanda Schemmer",
-              "country":{
-                 "name":"Bolivia",
-                 "code":"bo"
-              },
-              "company":"Tri M Tool Inc",
-              "date":"2017-12-15",
-              "status":"negotiation",
-              "verified":true,
-              "activity":49,
-              "representative":{
-                 "name":"Xuxue Feng",
-                 "image":"xuxuefeng.png"
-              },
-              "balance":19208
-           },
-           {
-              "id":1041,
-              "name":"Dyan Oldroyd",
-              "country":{
-                 "name":"Argentina",
-                 "code":"ar"
-              },
-              "company":"International Eyelets Inc",
-              "date":"2017-02-02",
-              "status":"qualified",
-              "verified":false,
-              "activity":5,
-              "representative":{
-                 "name":"Amy Elsner",
-                 "image":"amyelsner.png"
-              },
-              "balance":50194
-           },
-           {
-              "id":1042,
-              "name":"Roxane Campain",
-              "country":{
-                 "name":"France",
-                 "code":"fr"
-              },
-              "company":"Rapid Trading Intl",
-              "date":"2018-12-25",
-              "status":"unqualified",
-              "verified":false,
-              "activity":100,
-              "representative":{
-                 "name":"Anna Fali",
-                 "image":"annafali.png"
-              },
-              "balance":77714
-           },
-           {
-              "id":1043,
-              "name":"Lavera Perin",
-              "country":{
-                 "name":"Vietnam",
-                 "code":"vn"
-              },
-              "company":"Abc Enterprises Inc",
-              "date":"2018-04-10",
-              "status":"qualified",
-              "verified":false,
-              "activity":71,
-              "representative":{
-                 "name":"Stephen Shaw",
-                 "image":"stephenshaw.png"
-              },
-              "balance":35740
-           },
-           {
-              "id":1044,
-              "name":"Erick Ferencz",
-              "country":{
-                 "name":"Belgium",
-                 "code":"be"
-              },
-              "company":"Cindy Turner Associates",
-              "date":"2018-05-06",
-              "status":"unqualified",
-              "verified":true,
-              "activity":54,
-              "representative":{
-                 "name":"Amy Elsner",
-                 "image":"amyelsner.png"
-              },
-              "balance":30790
-           },
-           {
-              "id":1045,
-              "name":"Fatima Saylors",
-              "country":{
-                 "name":"Canada",
-                 "code":"ca"
-              },
-              "company":"Stanton, James D Esq",
-              "date":"2019-07-10",
-              "status":"renewal",
-              "verified":true,
-              "activity":93,
-              "representative":{
-                 "name":"Onyama Limba",
-                 "image":"onyamalimba.png"
-              },
-              "balance":52343
-           },
-           {
-              "id":1046,
-              "name":"Jina Briddick",
-              "country":{
-                 "name":"Mexico",
-                 "code":"mx"
-              },
-              "company":"Grace Pastries Inc",
-              "date":"2018-02-19",
-              "status":"unqualified",
-              "verified":false,
-              "activity":97,
-              "representative":{
-                 "name":"Xuxue Feng",
-                 "image":"xuxuefeng.png"
-              },
-              "balance":53966
-           },
-           {
-              "id":1047,
-              "name":"Kanisha Waycott",
-              "country":{
-                 "name":"Ecuador",
-                 "code":"ec"
-              },
-              "company":"Schroer, Gene E Esq",
-              "date":"2019-11-27",
-              "status":"new",
-              "verified":false,
-              "activity":80,
-              "representative":{
-                 "name":"Xuxue Feng",
-                 "image":"xuxuefeng.png"
-              },
-              "balance":9920
-           },
-           {
-              "id":1048,
-              "name":"Emerson Bowley",
-              "country":{
-                 "name":"Finland",
-                 "code":"fi"
-              },
-              "company":"Knights Inn",
-              "date":"2018-11-24",
-              "status":"new",
-              "verified":false,
-              "activity":63,
-              "representative":{
-                 "name":"Stephen Shaw",
-                 "image":"stephenshaw.png"
-              },
-              "balance":78069
-           },
-           {
-              "id":1049,
-              "name":"Blair Malet",
-              "country":{
-                 "name":"Finland",
-                 "code":"fi"
-              },
-              "company":"Bollinger Mach Shp & Shipyard",
-              "date":"2018-04-19",
-              "status":"new",
-              "verified":true,
-              "activity":92,
-              "representative":{
-                 "name":"Asiya Javayant",
-                 "image":"asiyajavayant.png"
-              },
-              "balance":65005
-           }
-        ]
-      }`,
+       "data":[
+          {
+             "id":1000,
+             "name":"James Butt",
+             "country":{
+                "name":"Algeria",
+                "code":"dz"
+             },
+             "company":"Benton, John B Jr",
+             "date":"2015-09-13",
+             "status":"unqualified",
+             "verified":true,
+             "activity":17,
+             "representative":{
+                "name":"Ioni Bowcher",
+                "image":"ionibowcher.png"
+             },
+             "balance":70663
+          },
+          {
+             "id":1001,
+             "name":"Josephine Darakjy",
+             "country":{
+                "name":"Egypt",
+                "code":"eg"
+             },
+             "company":"Chanay, Jeffrey A Esq",
+             "date":"2019-02-09",
+             "status":"proposal",
+             "verified":true,
+             "activity":0,
+             "representative":{
+                "name":"Amy Elsner",
+                "image":"amyelsner.png"
+             },
+             "balance":82429
+          },
+          {
+             "id":1002,
+             "name":"Art Venere",
+             "country":{
+                "name":"Panama",
+                "code":"pa"
+             },
+             "company":"Chemel, James L Cpa",
+             "date":"2017-05-13",
+             "status":"qualified",
+             "verified":false,
+             "activity":63,
+             "representative":{
+                "name":"Asiya Javayant",
+                "image":"asiyajavayant.png"
+             },
+             "balance":28334
+          },
+          {
+             "id":1003,
+             "name":"Lenna Paprocki",
+             "country":{
+                "name":"Slovenia",
+                "code":"si"
+             },
+             "company":"Feltz Printing Service",
+             "date":"2020-09-15",
+             "status":"new",
+             "verified":false,
+             "activity":37,
+             "representative":{
+                "name":"Xuxue Feng",
+                "image":"xuxuefeng.png"
+             },
+             "balance":88521
+          },
+          {
+             "id":1004,
+             "name":"Donette Foller",
+             "country":{
+                "name":"South Africa",
+                "code":"za"
+             },
+             "company":"Printing Dimensions",
+             "date":"2016-05-20",
+             "status":"proposal",
+             "verified":true,
+             "activity":33,
+             "representative":{
+                "name":"Asiya Javayant",
+                "image":"asiyajavayant.png"
+             },
+             "balance":93905
+          },
+          {
+             "id":1005,
+             "name":"Simona Morasca",
+             "country":{
+                "name":"Egypt",
+                "code":"eg"
+             },
+             "company":"Chapman, Ross E Esq",
+             "date":"2018-02-16",
+             "status":"qualified",
+             "verified":false,
+             "activity":68,
+             "representative":{
+                "name":"Ivan Magalhaes",
+                "image":"ivanmagalhaes.png"
+             },
+             "balance":50041
+          },
+          {
+             "id":1006,
+             "name":"Mitsue Tollner",
+             "country":{
+                "name":"Paraguay",
+                "code":"py"
+             },
+             "company":"Morlong Associates",
+             "date":"2018-02-19",
+             "status":"renewal",
+             "verified":true,
+             "activity":54,
+             "representative":{
+                "name":"Ivan Magalhaes",
+                "image":"ivanmagalhaes.png"
+             },
+             "balance":58706
+          },
+          {
+             "id":1007,
+             "name":"Leota Dilliard",
+             "country":{
+                "name":"Serbia",
+                "code":"rs"
+             },
+             "company":"Commercial Press",
+             "date":"2019-08-13",
+             "status":"renewal",
+             "verified":true,
+             "activity":69,
+             "representative":{
+                "name":"Onyama Limba",
+                "image":"onyamalimba.png"
+             },
+             "balance":26640
+          },
+          {
+             "id":1008,
+             "name":"Sage Wieser",
+             "country":{
+                "name":"Egypt",
+                "code":"eg"
+             },
+             "company":"Truhlar And Truhlar Attys",
+             "date":"2018-11-21",
+             "status":"unqualified",
+             "verified":true,
+             "activity":76,
+             "representative":{
+                "name":"Ivan Magalhaes",
+                "image":"ivanmagalhaes.png"
+             },
+             "balance":65369
+          },
+          {
+             "id":1009,
+             "name":"Kris Marrier",
+             "country":{
+                "name":"Mexico",
+                "code":"mx"
+             },
+             "company":"King, Christopher A Esq",
+             "date":"2015-07-07",
+             "status":"proposal",
+             "verified":false,
+             "activity":3,
+             "representative":{
+                "name":"Onyama Limba",
+                "image":"onyamalimba.png"
+             },
+             "balance":63451
+          },
+          {
+             "id":1010,
+             "name":"Minna Amigon",
+             "country":{
+                "name":"Romania",
+                "code":"ro"
+             },
+             "company":"Dorl, James J Esq",
+             "date":"2018-11-07",
+             "status":"qualified",
+             "verified":false,
+             "activity":38,
+             "representative":{
+                "name":"Anna Fali",
+                "image":"annafali.png"
+             },
+             "balance":71169
+          },
+          {
+             "id":1011,
+             "name":"Abel Maclead",
+             "country":{
+                "name":"Singapore",
+                "code":"sg"
+             },
+             "company":"Rangoni Of Florence",
+             "date":"2017-03-11",
+             "status":"qualified",
+             "verified":true,
+             "activity":87,
+             "representative":{
+                "name":"Bernardo Dominic",
+                "image":"bernardodominic.png"
+             },
+             "balance":96842
+          },
+          {
+             "id":1012,
+             "name":"Kiley Caldarera",
+             "country":{
+                "name":"Serbia",
+                "code":"rs"
+             },
+             "company":"Feiner Bros",
+             "date":"2015-10-20",
+             "status":"unqualified",
+             "verified":false,
+             "activity":80,
+             "representative":{
+                "name":"Onyama Limba",
+                "image":"onyamalimba.png"
+             },
+             "balance":92734
+          },
+          {
+             "id":1013,
+             "name":"Graciela Ruta",
+             "country":{
+                "name":"Chile",
+                "code":"cl"
+             },
+             "company":"Buckley Miller & Wright",
+             "date":"2016-07-25",
+             "status":"negotiation",
+             "verified":false,
+             "activity":59,
+             "representative":{
+                "name":"Amy Elsner",
+                "image":"amyelsner.png"
+             },
+             "balance":45250
+          },
+          {
+             "id":1014,
+             "name":"Cammy Albares",
+             "country":{
+                "name":"Philippines",
+                "code":"ph"
+             },
+             "company":"Rousseaux, Michael Esq",
+             "date":"2019-06-25",
+             "status":"new",
+             "verified":true,
+             "activity":90,
+             "representative":{
+                "name":"Asiya Javayant",
+                "image":"asiyajavayant.png"
+             },
+             "balance":30236
+          },
+          {
+             "id":1015,
+             "name":"Mattie Poquette",
+             "country":{
+                "name":"Venezuela",
+                "code":"ve"
+             },
+             "company":"Century Communications",
+             "date":"2017-12-12",
+             "status":"negotiation",
+             "verified":false,
+             "activity":52,
+             "representative":{
+                "name":"Anna Fali",
+                "image":"annafali.png"
+             },
+             "balance":64533
+          },
+          {
+             "id":1016,
+             "name":"Meaghan Garufi",
+             "country":{
+                "name":"Malaysia",
+                "code":"my"
+             },
+             "company":"Bolton, Wilbur Esq",
+             "date":"2018-07-04",
+             "status":"unqualified",
+             "verified":false,
+             "activity":31,
+             "representative":{
+                "name":"Ivan Magalhaes",
+                "image":"ivanmagalhaes.png"
+             },
+             "balance":37279
+          },
+          {
+             "id":1017,
+             "name":"Gladys Rim",
+             "country":{
+                "name":"Netherlands",
+                "code":"nl"
+             },
+             "company":"T M Byxbee Company Pc",
+             "date":"2020-02-27",
+             "status":"renewal",
+             "verified":true,
+             "activity":48,
+             "representative":{
+                "name":"Stephen Shaw",
+                "image":"stephenshaw.png"
+             },
+             "balance":27381
+          },
+          {
+             "id":1018,
+             "name":"Yuki Whobrey",
+             "country":{
+                "name":"Israel",
+                "code":"il"
+             },
+             "company":"Farmers Insurance Group",
+             "date":"2017-12-21",
+             "status":"negotiation",
+             "verified":true,
+             "activity":16,
+             "representative":{
+                "name":"Bernardo Dominic",
+                "image":"bernardodominic.png"
+             },
+             "balance":9257
+          },
+          {
+             "id":1019,
+             "name":"Fletcher Flosi",
+             "country":{
+                "name":"Argentina",
+                "code":"ar"
+             },
+             "company":"Post Box Services Plus",
+             "date":"2016-01-04",
+             "status":"renewal",
+             "verified":true,
+             "activity":19,
+             "representative":{
+                "name":"Xuxue Feng",
+                "image":"xuxuefeng.png"
+             },
+             "balance":67783
+          },
+          {
+             "id":1020,
+             "name":"Bette Nicka",
+             "country":{
+                "name":"Paraguay",
+                "code":"py"
+             },
+             "company":"Sport En Art",
+             "date":"2016-10-21",
+             "status":"renewal",
+             "verified":false,
+             "activity":100,
+             "representative":{
+                "name":"Onyama Limba",
+                "image":"onyamalimba.png"
+             },
+             "balance":4609
+          },
+          {
+             "id":1021,
+             "name":"Veronika Inouye",
+             "country":{
+                "name":"Ecuador",
+                "code":"ec"
+             },
+             "company":"C 4 Network Inc",
+             "date":"2017-03-24",
+             "status":"renewal",
+             "verified":false,
+             "activity":72,
+             "representative":{
+                "name":"Ioni Bowcher",
+                "image":"ionibowcher.png"
+             },
+             "balance":26565
+          },
+          {
+             "id":1022,
+             "name":"Willard Kolmetz",
+             "country":{
+                "name":"Tunisia",
+                "code":"tn"
+             },
+             "company":"Ingalls, Donald R Esq",
+             "date":"2017-04-15",
+             "status":"renewal",
+             "verified":true,
+             "activity":94,
+             "representative":{
+                "name":"Asiya Javayant",
+                "image":"asiyajavayant.png"
+             },
+             "balance":75876
+          },
+          {
+             "id":1023,
+             "name":"Maryann Royster",
+             "country":{
+                "name":"Belarus",
+                "code":"by"
+             },
+             "company":"Franklin, Peter L Esq",
+             "date":"2017-03-11",
+             "status":"qualified",
+             "verified":false,
+             "activity":56,
+             "representative":{
+                "name":"Elwin Sharvill",
+                "image":"elwinsharvill.png"
+             },
+             "balance":41121
+          },
+          {
+             "id":1024,
+             "name":"Alisha Slusarski",
+             "country":{
+                "name":"Iceland",
+                "code":"is"
+             },
+             "company":"Wtlz Power 107 Fm",
+             "date":"2018-03-27",
+             "status":"qualified",
+             "verified":true,
+             "activity":7,
+             "representative":{
+                "name":"Stephen Shaw",
+                "image":"stephenshaw.png"
+             },
+             "balance":91691
+          },
+          {
+             "id":1025,
+             "name":"Allene Iturbide",
+             "country":{
+                "name":"Italy",
+                "code":"it"
+             },
+             "company":"Ledecky, David Esq",
+             "date":"2016-02-20",
+             "status":"qualified",
+             "verified":true,
+             "activity":1,
+             "representative":{
+                "name":"Ivan Magalhaes",
+                "image":"ivanmagalhaes.png"
+             },
+             "balance":40137
+          },
+          {
+             "id":1026,
+             "name":"Chanel Caudy",
+             "country":{
+                "name":"Argentina",
+                "code":"ar"
+             },
+             "company":"Professional Image Inc",
+             "date":"2018-06-24",
+             "status":"new",
+             "verified":true,
+             "activity":26,
+             "representative":{
+                "name":"Ioni Bowcher",
+                "image":"ionibowcher.png"
+             },
+             "balance":21304
+          },
+          {
+             "id":1027,
+             "name":"Ezekiel Chui",
+             "country":{
+                "name":"Ireland",
+                "code":"ie"
+             },
+             "company":"Sider, Donald C Esq",
+             "date":"2016-09-24",
+             "status":"new",
+             "verified":false,
+             "activity":76,
+             "representative":{
+                "name":"Amy Elsner",
+                "image":"amyelsner.png"
+             },
+             "balance":60454
+          },
+          {
+             "id":1028,
+             "name":"Willow Kusko",
+             "country":{
+                "name":"Romania",
+                "code":"ro"
+             },
+             "company":"U Pull It",
+             "date":"2020-04-11",
+             "status":"qualified",
+             "verified":true,
+             "activity":7,
+             "representative":{
+                "name":"Onyama Limba",
+                "image":"onyamalimba.png"
+             },
+             "balance":17565
+          },
+          {
+             "id":1029,
+             "name":"Bernardo Figeroa",
+             "country":{
+                "name":"Israel",
+                "code":"il"
+             },
+             "company":"Clark, Richard Cpa",
+             "date":"2018-04-11",
+             "status":"renewal",
+             "verified":true,
+             "activity":81,
+             "representative":{
+                "name":"Ioni Bowcher",
+                "image":"ionibowcher.png"
+             },
+             "balance":17774
+          },
+          {
+             "id":1030,
+             "name":"Ammie Corrio",
+             "country":{
+                "name":"Hungary",
+                "code":"hu"
+             },
+             "company":"Moskowitz, Barry S",
+             "date":"2016-06-11",
+             "status":"negotiation",
+             "verified":true,
+             "activity":56,
+             "representative":{
+                "name":"Asiya Javayant",
+                "image":"asiyajavayant.png"
+             },
+             "balance":49201
+          },
+          {
+             "id":1031,
+             "name":"Francine Vocelka",
+             "country":{
+                "name":"Honduras",
+                "code":"hn"
+             },
+             "company":"Cascade Realty Advisors Inc",
+             "date":"2017-08-02",
+             "status":"qualified",
+             "verified":true,
+             "activity":94,
+             "representative":{
+                "name":"Ioni Bowcher",
+                "image":"ionibowcher.png"
+             },
+             "balance":67126
+          },
+          {
+             "id":1032,
+             "name":"Ernie Stenseth",
+             "country":{
+                "name":"Australia",
+                "code":"au"
+             },
+             "company":"Knwz Newsradio",
+             "date":"2018-06-06",
+             "status":"renewal",
+             "verified":true,
+             "activity":68,
+             "representative":{
+                "name":"Xuxue Feng",
+                "image":"xuxuefeng.png"
+             },
+             "balance":76017
+          },
+          {
+             "id":1033,
+             "name":"Albina Glick",
+             "country":{
+                "name":"Ukraine",
+                "code":"ua"
+             },
+             "company":"Giampetro, Anthony D",
+             "date":"2019-08-08",
+             "status":"proposal",
+             "verified":true,
+             "activity":85,
+             "representative":{
+                "name":"Bernardo Dominic",
+                "image":"bernardodominic.png"
+             },
+             "balance":91201
+          },
+          {
+             "id":1034,
+             "name":"Alishia Sergi",
+             "country":{
+                "name":"Qatar",
+                "code":"qa"
+             },
+             "company":"Milford Enterprises Inc",
+             "date":"2018-05-19",
+             "status":"negotiation",
+             "verified":false,
+             "activity":46,
+             "representative":{
+                "name":"Ivan Magalhaes",
+                "image":"ivanmagalhaes.png"
+             },
+             "balance":12237
+          },
+          {
+             "id":1035,
+             "name":"Solange Shinko",
+             "country":{
+                "name":"Cameroon",
+                "code":"cm"
+             },
+             "company":"Mosocco, Ronald A",
+             "date":"2015-02-12",
+             "status":"qualified",
+             "verified":true,
+             "activity":32,
+             "representative":{
+                "name":"Onyama Limba",
+                "image":"onyamalimba.png"
+             },
+             "balance":34072
+          },
+          {
+             "id":1036,
+             "name":"Jose Stockham",
+             "country":{
+                "name":"Italy",
+                "code":"it"
+             },
+             "company":"Tri State Refueler Co",
+             "date":"2018-04-25",
+             "status":"qualified",
+             "verified":true,
+             "activity":77,
+             "representative":{
+                "name":"Amy Elsner",
+                "image":"amyelsner.png"
+             },
+             "balance":94909
+          },
+          {
+             "id":1037,
+             "name":"Rozella Ostrosky",
+             "country":{
+                "name":"Venezuela",
+                "code":"ve"
+             },
+             "company":"Parkway Company",
+             "date":"2016-02-27",
+             "status":"unqualified",
+             "verified":true,
+             "activity":66,
+             "representative":{
+                "name":"Amy Elsner",
+                "image":"amyelsner.png"
+             },
+             "balance":57245
+          },
+          {
+             "id":1038,
+             "name":"Valentine Gillian",
+             "country":{
+                "name":"Paraguay",
+                "code":"py"
+             },
+             "company":"Fbs Business Finance",
+             "date":"2019-09-17",
+             "status":"qualified",
+             "verified":true,
+             "activity":25,
+             "representative":{
+                "name":"Bernardo Dominic",
+                "image":"bernardodominic.png"
+             },
+             "balance":75502
+          },
+          {
+             "id":1039,
+             "name":"Kati Rulapaugh",
+             "country":{
+                "name":"Puerto Rico",
+                "code":"pr"
+             },
+             "company":"Eder Assocs Consltng Engrs Pc",
+             "date":"2016-12-03",
+             "status":"renewal",
+             "verified":false,
+             "activity":51,
+             "representative":{
+                "name":"Ioni Bowcher",
+                "image":"ionibowcher.png"
+             },
+             "balance":82075
+          },
+          {
+             "id":1040,
+             "name":"Youlanda Schemmer",
+             "country":{
+                "name":"Bolivia",
+                "code":"bo"
+             },
+             "company":"Tri M Tool Inc",
+             "date":"2017-12-15",
+             "status":"negotiation",
+             "verified":true,
+             "activity":49,
+             "representative":{
+                "name":"Xuxue Feng",
+                "image":"xuxuefeng.png"
+             },
+             "balance":19208
+          },
+          {
+             "id":1041,
+             "name":"Dyan Oldroyd",
+             "country":{
+                "name":"Argentina",
+                "code":"ar"
+             },
+             "company":"International Eyelets Inc",
+             "date":"2017-02-02",
+             "status":"qualified",
+             "verified":false,
+             "activity":5,
+             "representative":{
+                "name":"Amy Elsner",
+                "image":"amyelsner.png"
+             },
+             "balance":50194
+          },
+          {
+             "id":1042,
+             "name":"Roxane Campain",
+             "country":{
+                "name":"France",
+                "code":"fr"
+             },
+             "company":"Rapid Trading Intl",
+             "date":"2018-12-25",
+             "status":"unqualified",
+             "verified":false,
+             "activity":100,
+             "representative":{
+                "name":"Anna Fali",
+                "image":"annafali.png"
+             },
+             "balance":77714
+          },
+          {
+             "id":1043,
+             "name":"Lavera Perin",
+             "country":{
+                "name":"Vietnam",
+                "code":"vn"
+             },
+             "company":"Abc Enterprises Inc",
+             "date":"2018-04-10",
+             "status":"qualified",
+             "verified":false,
+             "activity":71,
+             "representative":{
+                "name":"Stephen Shaw",
+                "image":"stephenshaw.png"
+             },
+             "balance":35740
+          },
+          {
+             "id":1044,
+             "name":"Erick Ferencz",
+             "country":{
+                "name":"Belgium",
+                "code":"be"
+             },
+             "company":"Cindy Turner Associates",
+             "date":"2018-05-06",
+             "status":"unqualified",
+             "verified":true,
+             "activity":54,
+             "representative":{
+                "name":"Amy Elsner",
+                "image":"amyelsner.png"
+             },
+             "balance":30790
+          },
+          {
+             "id":1045,
+             "name":"Fatima Saylors",
+             "country":{
+                "name":"Canada",
+                "code":"ca"
+             },
+             "company":"Stanton, James D Esq",
+             "date":"2019-07-10",
+             "status":"renewal",
+             "verified":true,
+             "activity":93,
+             "representative":{
+                "name":"Onyama Limba",
+                "image":"onyamalimba.png"
+             },
+             "balance":52343
+          },
+          {
+             "id":1046,
+             "name":"Jina Briddick",
+             "country":{
+                "name":"Mexico",
+                "code":"mx"
+             },
+             "company":"Grace Pastries Inc",
+             "date":"2018-02-19",
+             "status":"unqualified",
+             "verified":false,
+             "activity":97,
+             "representative":{
+                "name":"Xuxue Feng",
+                "image":"xuxuefeng.png"
+             },
+             "balance":53966
+          },
+          {
+             "id":1047,
+             "name":"Kanisha Waycott",
+             "country":{
+                "name":"Ecuador",
+                "code":"ec"
+             },
+             "company":"Schroer, Gene E Esq",
+             "date":"2019-11-27",
+             "status":"new",
+             "verified":false,
+             "activity":80,
+             "representative":{
+                "name":"Xuxue Feng",
+                "image":"xuxuefeng.png"
+             },
+             "balance":9920
+          },
+          {
+             "id":1048,
+             "name":"Emerson Bowley",
+             "country":{
+                "name":"Finland",
+                "code":"fi"
+             },
+             "company":"Knights Inn",
+             "date":"2018-11-24",
+             "status":"new",
+             "verified":false,
+             "activity":63,
+             "representative":{
+                "name":"Stephen Shaw",
+                "image":"stephenshaw.png"
+             },
+             "balance":78069
+          },
+          {
+             "id":1049,
+             "name":"Blair Malet",
+             "country":{
+                "name":"Finland",
+                "code":"fi"
+             },
+             "company":"Bollinger Mach Shp & Shipyard",
+             "date":"2018-04-19",
+             "status":"new",
+             "verified":true,
+             "activity":92,
+             "representative":{
+                "name":"Asiya Javayant",
+                "image":"asiyajavayant.png"
+             },
+             "balance":65005
+          }
+       ]
+     }`,
     'customers-small': `
 {
-        "data":[
-           {
-              "id":1000,
-              "name":"James Butt",
-              "country":{
-                 "name":"Algeria",
-                 "code":"dz"
-              },
-              "company":"Benton, John B Jr",
-              "date":"2015-09-13",
-              "status":"unqualified",
-              "verified":true,
-              "activity":17,
-              "representative":{
-                 "name":"Ioni Bowcher",
-                 "image":"ionibowcher.png"
-              },
-              "balance":70663
-           },
-           {
-              "id":1001,
-              "name":"Josephine Darakjy",
-              "country":{
-                 "name":"Egypt",
-                 "code":"eg"
-              },
-              "company":"Chanay, Jeffrey A Esq",
-              "date":"2019-02-09",
-              "status":"proposal",
-              "verified":true,
-              "activity":0,
-              "representative":{
-                 "name":"Amy Elsner",
-                 "image":"amyelsner.png"
-              },
-              "balance":82429
-           },
-           {
-              "id":1002,
-              "name":"Art Venere",
-              "country":{
-                 "name":"Panama",
-                 "code":"pa"
-              },
-              "company":"Chemel, James L Cpa",
-              "date":"2017-05-13",
-              "status":"qualified",
-              "verified":false,
-              "activity":63,
-              "representative":{
-                 "name":"Asiya Javayant",
-                 "image":"asiyajavayant.png"
-              },
-              "balance":28334
-           },
-           {
-              "id":1003,
-              "name":"Lenna Paprocki",
-              "country":{
-                 "name":"Slovenia",
-                 "code":"si"
-              },
-              "company":"Feltz Printing Service",
-              "date":"2020-09-15",
-              "status":"new",
-              "verified":false,
-              "activity":37,
-              "representative":{
-                 "name":"Xuxue Feng",
-                 "image":"xuxuefeng.png"
-              },
-              "balance":88521
-           },
-           {
-              "id":1004,
-              "name":"Donette Foller",
-              "country":{
-                 "name":"South Africa",
-                 "code":"za"
-              },
-              "company":"Printing Dimensions",
-              "date":"2016-05-20",
-              "status":"proposal",
-              "verified":true,
-              "activity":33,
-              "representative":{
-                 "name":"Asiya Javayant",
-                 "image":"asiyajavayant.png"
-              },
-              "balance":93905
-           },
-           {
-              "id":1005,
-              "name":"Simona Morasca",
-              "country":{
-                 "name":"Egypt",
-                 "code":"eg"
-              },
-              "company":"Chapman, Ross E Esq",
-              "date":"2018-02-16",
-              "status":"qualified",
-              "verified":false,
-              "activity":68,
-              "representative":{
-                 "name":"Ivan Magalhaes",
-                 "image":"ivanmagalhaes.png"
-              },
-              "balance":50041
-           },
-           {
-              "id":1006,
-              "name":"Mitsue Tollner",
-              "country":{
-                 "name":"Paraguay",
-                 "code":"py"
-              },
-              "company":"Morlong Associates",
-              "date":"2018-02-19",
-              "status":"renewal",
-              "verified":true,
-              "activity":54,
-              "representative":{
-                 "name":"Ivan Magalhaes",
-                 "image":"ivanmagalhaes.png"
-              },
-              "balance":58706
-           },
-           {
-              "id":1007,
-              "name":"Leota Dilliard",
-              "country":{
-                 "name":"Serbia",
-                 "code":"rs"
-              },
-              "company":"Commercial Press",
-              "date":"2019-08-13",
-              "status":"renewal",
-              "verified":true,
-              "activity":69,
-              "representative":{
-                 "name":"Onyama Limba",
-                 "image":"onyamalimba.png"
-              },
-              "balance":26640
-           },
-           {
-              "id":1008,
-              "name":"Sage Wieser",
-              "country":{
-                 "name":"Egypt",
-                 "code":"eg"
-              },
-              "company":"Truhlar And Truhlar Attys",
-              "date":"2018-11-21",
-              "status":"unqualified",
-              "verified":true,
-              "activity":76,
-              "representative":{
-                 "name":"Ivan Magalhaes",
-                 "image":"ivanmagalhaes.png"
-              },
-              "balance":65369
-           },
-           {
-              "id":1009,
-              "name":"Kris Marrier",
-              "country":{
-                 "name":"Mexico",
-                 "code":"mx"
-              },
-              "company":"King, Christopher A Esq",
-              "date":"2015-07-07",
-              "status":"proposal",
-              "verified":false,
-              "activity":3,
-              "representative":{
-                 "name":"Onyama Limba",
-                 "image":"onyamalimba.png"
-              },
-              "balance":63451
-           }
-        ]
-      }`,
+       "data":[
+          {
+             "id":1000,
+             "name":"James Butt",
+             "country":{
+                "name":"Algeria",
+                "code":"dz"
+             },
+             "company":"Benton, John B Jr",
+             "date":"2015-09-13",
+             "status":"unqualified",
+             "verified":true,
+             "activity":17,
+             "representative":{
+                "name":"Ioni Bowcher",
+                "image":"ionibowcher.png"
+             },
+             "balance":70663
+          },
+          {
+             "id":1001,
+             "name":"Josephine Darakjy",
+             "country":{
+                "name":"Egypt",
+                "code":"eg"
+             },
+             "company":"Chanay, Jeffrey A Esq",
+             "date":"2019-02-09",
+             "status":"proposal",
+             "verified":true,
+             "activity":0,
+             "representative":{
+                "name":"Amy Elsner",
+                "image":"amyelsner.png"
+             },
+             "balance":82429
+          },
+          {
+             "id":1002,
+             "name":"Art Venere",
+             "country":{
+                "name":"Panama",
+                "code":"pa"
+             },
+             "company":"Chemel, James L Cpa",
+             "date":"2017-05-13",
+             "status":"qualified",
+             "verified":false,
+             "activity":63,
+             "representative":{
+                "name":"Asiya Javayant",
+                "image":"asiyajavayant.png"
+             },
+             "balance":28334
+          },
+          {
+             "id":1003,
+             "name":"Lenna Paprocki",
+             "country":{
+                "name":"Slovenia",
+                "code":"si"
+             },
+             "company":"Feltz Printing Service",
+             "date":"2020-09-15",
+             "status":"new",
+             "verified":false,
+             "activity":37,
+             "representative":{
+                "name":"Xuxue Feng",
+                "image":"xuxuefeng.png"
+             },
+             "balance":88521
+          },
+          {
+             "id":1004,
+             "name":"Donette Foller",
+             "country":{
+                "name":"South Africa",
+                "code":"za"
+             },
+             "company":"Printing Dimensions",
+             "date":"2016-05-20",
+             "status":"proposal",
+             "verified":true,
+             "activity":33,
+             "representative":{
+                "name":"Asiya Javayant",
+                "image":"asiyajavayant.png"
+             },
+             "balance":93905
+          },
+          {
+             "id":1005,
+             "name":"Simona Morasca",
+             "country":{
+                "name":"Egypt",
+                "code":"eg"
+             },
+             "company":"Chapman, Ross E Esq",
+             "date":"2018-02-16",
+             "status":"qualified",
+             "verified":false,
+             "activity":68,
+             "representative":{
+                "name":"Ivan Magalhaes",
+                "image":"ivanmagalhaes.png"
+             },
+             "balance":50041
+          },
+          {
+             "id":1006,
+             "name":"Mitsue Tollner",
+             "country":{
+                "name":"Paraguay",
+                "code":"py"
+             },
+             "company":"Morlong Associates",
+             "date":"2018-02-19",
+             "status":"renewal",
+             "verified":true,
+             "activity":54,
+             "representative":{
+                "name":"Ivan Magalhaes",
+                "image":"ivanmagalhaes.png"
+             },
+             "balance":58706
+          },
+          {
+             "id":1007,
+             "name":"Leota Dilliard",
+             "country":{
+                "name":"Serbia",
+                "code":"rs"
+             },
+             "company":"Commercial Press",
+             "date":"2019-08-13",
+             "status":"renewal",
+             "verified":true,
+             "activity":69,
+             "representative":{
+                "name":"Onyama Limba",
+                "image":"onyamalimba.png"
+             },
+             "balance":26640
+          },
+          {
+             "id":1008,
+             "name":"Sage Wieser",
+             "country":{
+                "name":"Egypt",
+                "code":"eg"
+             },
+             "company":"Truhlar And Truhlar Attys",
+             "date":"2018-11-21",
+             "status":"unqualified",
+             "verified":true,
+             "activity":76,
+             "representative":{
+                "name":"Ivan Magalhaes",
+                "image":"ivanmagalhaes.png"
+             },
+             "balance":65369
+          },
+          {
+             "id":1009,
+             "name":"Kris Marrier",
+             "country":{
+                "name":"Mexico",
+                "code":"mx"
+             },
+             "company":"King, Christopher A Esq",
+             "date":"2015-07-07",
+             "status":"proposal",
+             "verified":false,
+             "activity":3,
+             "representative":{
+                "name":"Onyama Limba",
+                "image":"onyamalimba.png"
+             },
+             "balance":63451
+          }
+       ]
+     }`,
     'customers-xlarge': `
 {
-    "data": [
-        {"id": 1000,"name": "James Butt","country": {"name": "Algeria","code": "dz"},"company": "Benton, John B Jr","date": "2015-09-13","status": "unqualified","activity": 17,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
-        {"id": 1001,"name": "Josephine Darakjy","country": {"name": "Egypt","code": "eg"},"company": "Chanay, Jeffrey A Esq","date": "2019-02-09","status": "proposal","activity": 0,"representative": {"name": "Amy Elsner","image": "amyelsner.png"}},
-        {"id": 1002,"name": "Art Venere","country": {"name": "Panama","code": "pa"},"company": "Chemel, James L Cpa","date": "2017-05-13","status": "qualified","activity": 63,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
-        {"id": 1003,"name": "Lenna Paprocki","country": {"name": "Slovenia","code": "si"},"company": "Feltz Printing Service","date": "2020-09-15","status": "new","activity": 37,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
-        {"id": 1004,"name": "Donette Foller","country": {"name": "South Africa","code": "za"},"company": "Printing Dimensions","date": "2016-05-20","status": "proposal","activity": 33,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
-        {"id": 1005,"name": "Simona Morasca","country": {"name": "Egypt","code": "eg"},"company": "Chapman, Ross E Esq","date": "2018-02-16","status": "qualified","activity": 68,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
-        {"id": 1006,"name": "Mitsue Tollner","country": {"name": "Paraguay","code": "py"},"company": "Morlong Associates","date": "2018-02-19","status": "renewal","activity": 54,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
-        {"id": 1007,"name": "Leota Dilliard","country": {"name": "Serbia","code": "rs"},"company": "Commercial Press","date": "2019-08-13","status": "renewal","activity": 69,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
-        {"id": 1008,"name": "Sage Wieser","country": {"name": "Egypt","code": "eg"},"company": "Truhlar And Truhlar Attys","date": "2018-11-21","status": "unqualified","activity": 76,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
-        {"id": 1009,"name": "Kris Marrier","country": {"name": "Mexico","code": "mx"},"company": "King, Christopher A Esq","date": "2015-07-07","status": "proposal","activity": 3,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
-        {"id": 1010,"name": "Minna Amigon","country": {"name": "Romania","code": "ro"},"company": "Dorl, James J Esq","date": "2018-11-07","status": "qualified","activity": 38,"representative": {"name": "Anna Fali","image": "annafali.png"}},
-        {"id": 1011,"name": "Abel Maclead","country": {"name": "Singapore","code": "sg"},"company": "Rangoni Of Florence","date": "2017-03-11","status": "qualified","activity": 87,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
-        {"id": 1012,"name": "Kiley Caldarera","country": {"name": "Serbia","code": "rs"},"company": "Feiner Bros","date": "2015-10-20","status": "unqualified","activity": 80,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
-        {"id": 1013,"name": "Graciela Ruta","country": {"name": "Chile","code": "cl"},"company": "Buckley Miller \u0026 Wright","date": "2016-07-25","status": "negotiation","activity": 59,"representative": {"name": "Amy Elsner","image": "amyelsner.png"}},
-        {"id": 1014,"name": "Cammy Albares","country": {"name": "Philippines","code": "ph"},"company": "Rousseaux, Michael Esq","date": "2019-06-25","status": "new","activity": 90,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
-        {"id": 1015,"name": "Mattie Poquette","country": {"name": "Venezuela","code": "ve"},"company": "Century Communications","date": "2017-12-12","status": "negotiation","activity": 52,"representative": {"name": "Anna Fali","image": "annafali.png"}},
-        {"id": 1016,"name": "Meaghan Garufi","country": {"name": "Malaysia","code": "my"},"company": "Bolton, Wilbur Esq","date": "2018-07-04","status": "unqualified","activity": 31,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
-        {"id": 1017,"name": "Gladys Rim","country": {"name": "Netherlands","code": "nl"},"company": "T M Byxbee Company Pc","date": "2020-02-27","status": "renewal","activity": 48,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
-        {"id": 1018,"name": "Yuki Whobrey","country": {"name": "Israel","code": "il"},"company": "Farmers Insurance Group","date": "2017-12-21","status": "negotiation","activity": 16,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
-        {"id": 1019,"name": "Fletcher Flosi","country": {"name": "Argentina","code": "ar"},"company": "Post Box Services Plus","date": "2016-01-04","status": "renewal","activity": 19,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
-        {"id": 1020,"name": "Bette Nicka","country": {"name": "Paraguay","code": "py"},"company": "Sport En Art","date": "2016-10-21","status": "renewal","activity": 100,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
-        {"id": 1021,"name": "Veronika Inouye","country": {"name": "Ecuador","code": "ec"},"company": "C 4 Network Inc","date": "2017-03-24","status": "renewal","activity": 72,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
-        {"id": 1022,"name": "Willard Kolmetz","country": {"name": "Tunisia","code": "tn"},"company": "Ingalls, Donald R Esq","date": "2017-04-15","status": "renewal","activity": 94,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
-        {"id": 1023,"name": "Maryann Royster","country": {"name": "Belarus","code": "by"},"company": "Franklin, Peter L Esq","date": "2017-03-11","status": "qualified","activity": 56,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
-        {"id": 1024,"name": "Alisha Slusarski","country": {"name": "Iceland","code": "is"},"company": "Wtlz Power 107 Fm","date": "2018-03-27","status": "qualified","activity": 7,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
-        {"id": 1025,"name": "Allene Iturbide","country": {"name": "Italy","code": "it"},"company": "Ledecky, David Esq","date": "2016-02-20","status": "qualified","activity": 1,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
-        {"id": 1026,"name": "Chanel Caudy","country": {"name": "Argentina","code": "ar"},"company": "Professional Image Inc","date": "2018-06-24","status": "new","activity": 26,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
-        {"id": 1027,"name": "Ezekiel Chui","country": {"name": "Ireland","code": "ie"},"company": "Sider, Donald C Esq","date": "2016-09-24","status": "new","activity": 76,"representative": {"name": "Amy Elsner","image": "amyelsner.png"}},
-        {"id": 1028,"name": "Willow Kusko","country": {"name": "Romania","code": "ro"},"company": "U Pull It","date": "2020-04-11","status": "qualified","activity": 7,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
-        {"id": 1029,"name": "Bernardo Figeroa","country": {"name": "Israel","code": "il"},"company": "Clark, Richard Cpa","date": "2018-04-11","status": "renewal","activity": 81,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
-        {"id": 1030,"name": "Ammie Corrio","country": {"name": "Hungary","code": "hu"},"company": "Moskowitz, Barry S","date": "2016-06-11","status": "negotiation","activity": 56,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
-        {"id": 1031,"name": "Francine Vocelka","country": {"name": "Honduras","code": "hn"},"company": "Cascade Realty Advisors Inc","date": "2017-08-02","status": "qualified","activity": 94,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
-        {"id": 1032,"name": "Ernie Stenseth","country": {"name": "Australia","code": "au"},"company": "Knwz Newsradio","date": "2018-06-06","status": "renewal","activity": 68,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
-        {"id": 1033,"name": "Albina Glick","country": {"name": "Ukraine","code": "ua"},"company": "Giampetro, Anthony D","date": "2019-08-08","status": "proposal","activity": 85,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
-        {"id": 1034,"name": "Alishia Sergi","country": {"name": "Qatar","code": "qa"},"company": "Milford Enterprises Inc","date": "2018-05-19","status": "negotiation","activity": 46,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
-        {"id": 1035,"name": "Solange Shinko","country": {"name": "Cameroon","code": "cm"},"company": "Mosocco, Ronald A","date": "2015-02-12","status": "qualified","activity": 32,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
-        {"id": 1036,"name": "Jose Stockham","country": {"name": "Italy","code": "it"},"company": "Tri State Refueler Co","date": "2018-04-25","status": "qualified","activity": 77,"representative": {"name": "Amy Elsner","image": "amyelsner.png"}},
-        {"id": 1037,"name": "Rozella Ostrosky","country": {"name": "Venezuela","code": "ve"},"company": "Parkway Company","date": "2016-02-27","status": "unqualified","activity": 66,"representative": {"name": "Amy Elsner","image": "amyelsner.png"}},
-        {"id": 1038,"name": "Valentine Gillian","country": {"name": "Paraguay","code": "py"},"company": "Fbs Business Finance","date": "2019-09-17","status": "qualified","activity": 25,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
-        {"id": 1039,"name": "Kati Rulapaugh","country": {"name": "Puerto Rico","code": "pr"},"company": "Eder Assocs Consltng Engrs Pc","date": "2016-12-03","status": "renewal","activity": 51,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
-        {"id": 1040,"name": "Youlanda Schemmer","country": {"name": "Bolivia","code": "bo"},"company": "Tri M Tool Inc","date": "2017-12-15","status": "negotiation","activity": 49,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
-        {"id": 1041,"name": "Dyan Oldroyd","country": {"name": "Argentina","code": "ar"},"company": "International Eyelets Inc","date": "2017-02-02","status": "qualified","activity": 5,"representative": {"name": "Amy Elsner","image": "amyelsner.png"}},
-        {"id": 1042,"name": "Roxane Campain","country": {"name": "France","code": "fr"},"company": "Rapid Trading Intl","date": "2018-12-25","status": "unqualified","activity": 100,"representative": {"name": "Anna Fali","image": "annafali.png"}},
-        {"id": 1043,"name": "Lavera Perin","country": {"name": "Vietnam","code": "vn"},"company": "Abc Enterprises Inc","date": "2018-04-10","status": "qualified","activity": 71,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
-        {"id": 1044,"name": "Erick Ferencz","country": {"name": "Belgium","code": "be"},"company": "Cindy Turner Associates","date": "2018-05-06","status": "unqualified","activity": 54,"representative": {"name": "Amy Elsner","image": "amyelsner.png"}},
-        {"id": 1045,"name": "Fatima Saylors","country": {"name": "Canada","code": "ca"},"company": "Stanton, James D Esq","date": "2019-07-10","status": "renewal","activity": 93,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
-        {"id": 1046,"name": "Jina Briddick","country": {"name": "Mexico","code": "mx"},"company": "Grace Pastries Inc","date": "2018-02-19","status": "unqualified","activity": 97,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
-        {"id": 1047,"name": "Kanisha Waycott","country": {"name": "Ecuador","code": "ec"},"company": "Schroer, Gene E Esq","date": "2019-11-27","status": "new","activity": 80,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
-        {"id": 1048,"name": "Emerson Bowley","country": {"name": "Finland","code": "fi"},"company": "Knights Inn","date": "2018-11-24","status": "new","activity": 63,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
-        {"id": 1049,"name": "Blair Malet","country": {"name": "Finland","code": "fi"},"company": "Bollinger Mach Shp \u0026 Shipyard","date": "2018-04-19","status": "new","activity": 92,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
-        {"id": 1050,"name": "Brock Bolognia","country": {"name": "Bolivia","code": "bo"},"company": "Orinda News","date": "2019-09-06","status": "renewal","activity": 72,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
-        {"id": 1051,"name": "Lorrie Nestle","country": {"name": "Germany","code": "de"},"company": "Ballard Spahr Andrews","date": "2018-04-26","status": "renewal","activity": 36,"representative": {"name": "Anna Fali","image": "annafali.png"}},
-        {"id": 1052,"name": "Sabra Uyetake","country": {"name": "Peru","code": "pe"},"company": "Lowy Limousine Service","date": "2018-04-12","status": "new","activity": 31,"representative": {"name": "Amy Elsner","image": "amyelsner.png"}},
-        {"id": 1053,"name": "Marjory Mastella","country": {"name": "Netherlands","code": "nl"},"company": "Vicon Corporation","date": "2018-01-24","status": "negotiation","activity": 89,"representative": {"name": "Anna Fali","image": "annafali.png"}},
-        {"id": 1054,"name": "Karl Klonowski","country": {"name": "Saudi Arabia","code": "sa"},"company": "Rossi, Michael M","date": "2017-04-17","status": "unqualified","activity": 27,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
-        {"id": 1055,"name": "Tonette Wenner","country": {"name": "Australia","code": "au"},"company": "Northwest Publishing","date": "2019-04-14","status": "qualified","activity": 27,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
-        {"id": 1056,"name": "Amber Monarrez","country": {"name": "Sweden","code": "se"},"company": "Branford Wire \u0026 Mfg Co","date": "2019-09-09","status": "new","activity": 79,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
-        {"id": 1057,"name": "Shenika Seewald","country": {"name": "Australia","code": "au"},"company": "East Coast Marketing","date": "2017-02-18","status": "renewal","activity": 39,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
-        {"id": 1058,"name": "Delmy Ahle","country": {"name": "Belgium","code": "be"},"company": "Wye Technologies Inc","date": "2020-10-05","status": "unqualified","activity": 55,"representative": {"name": "Anna Fali","image": "annafali.png"}},
-        {"id": 1059,"name": "Deeanna Juhas","country": {"name": "Sweden","code": "se"},"company": "Healy, George W Iv","date": "2018-09-28","status": "negotiation","activity": 79,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
-        {"id": 1060,"name": "Blondell Pugh","country": {"name": "Ireland","code": "ie"},"company": "Alpenlite Inc","date": "2016-06-16","status": "renewal","activity": 49,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
-        {"id": 1061,"name": "Jamal Vanausdal","country": {"name": "Morocco","code": "ma"},"company": "Hubbard, Bruce Esq","date": "2017-05-25","status": "proposal","activity": 87,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
-        {"id": 1062,"name": "Cecily Hollack","country": {"name": "Bolivia","code": "bo"},"company": "Arthur A Oliver \u0026 Son Inc","date": "2020-05-09","status": "negotiation","activity": 5,"representative": {"name": "Amy Elsner","image": "amyelsner.png"}},
-        {"id": 1063,"name": "Carmelina Lindall","country": {"name": "Puerto Rico","code": "pr"},"company": "George Jessop Carter Jewelers","date": "2019-09-07","status": "qualified","activity": 77,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
-        {"id": 1064,"name": "Maurine Yglesias","country": {"name": "Taiwan","code": "tw"},"company": "Schultz, Thomas C Md","date": "2015-08-10","status": "renewal","activity": 94,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
-        {"id": 1065,"name": "Tawna Buvens","country": {"name": "Indonesia","code": "id"},"company": "H H H Enterprises Inc","date": "2018-03-20","status": "new","activity": 25,"representative": {"name": "Amy Elsner","image": "amyelsner.png"}},
-        {"id": 1066,"name": "Penney Weight","country": {"name": "South Africa","code": "za"},"company": "Hawaiian King Hotel","date": "2020-03-03","status": "qualified","activity": 96,"representative": {"name": "Amy Elsner","image": "amyelsner.png"}},
-        {"id": 1067,"name": "Elly Morocco","country": {"name": "Thailand","code": "th"},"company": "Killion Industries","date": "2018-09-18","status": "qualified","activity": 38,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
-        {"id": 1068,"name": "Ilene Eroman","country": {"name": "Netherlands","code": "nl"},"company": "Robinson, William J Esq","date": "2019-06-08","status": "new","activity": 49,"representative": {"name": "Anna Fali","image": "annafali.png"}},
-        {"id": 1069,"name": "Vallie Mondella","country": {"name": "Latvia","code": "lv"},"company": "Private Properties","date": "2018-12-06","status": "new","activity": 16,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
-        {"id": 1070,"name": "Kallie Blackwood","country": {"name": "Iceland","code": "is"},"company": "Rowley Schlimgen Inc","date": "2017-04-05","status": "unqualified","activity": 25,"representative": {"name": "Amy Elsner","image": "amyelsner.png"}},
-        {"id": 1071,"name": "Johnetta Abdallah","country": {"name": "Netherlands","code": "nl"},"company": "Forging Specialties","date": "2015-02-02","status": "new","activity": 16,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
-        {"id": 1072,"name": "Bobbye Rhym","country": {"name": "Ukraine","code": "ua"},"company": "Smits, Patricia Garity","date": "2018-08-17","status": "qualified","activity": 85,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
-        {"id": 1073,"name": "Micaela Rhymes","country": {"name": "France","code": "fr"},"company": "H Lee Leonard Attorney At Law","date": "2018-09-08","status": "renewal","activity": 92,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
-        {"id": 1074,"name": "Tamar Hoogland","country": {"name": "Guatemala","code": "gt"},"company": "A K Construction Co","date": "2018-11-13","status": "proposal","activity": 22,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
-        {"id": 1075,"name": "Moon Parlato","country": {"name": "Czech Republic","code": "cz"},"company": "Ambelang, Jessica M Md","date": "2019-08-18","status": "renewal","activity": 64,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
-        {"id": 1076,"name": "Laurel Reitler","country": {"name": "United Kingdom","code": "gb"},"company": "Q A Service","date": "2015-04-02","status": "negotiation","activity": 80,"representative": {"name": "Amy Elsner","image": "amyelsner.png"}},
-        {"id": 1077,"name": "Delisa Crupi","country": {"name": "Taiwan","code": "tw"},"company": "Wood \u0026 Whitacre Contractors","date": "2017-09-15","status": "unqualified","activity": 70,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
-        {"id": 1078,"name": "Viva Toelkes","country": {"name": "United States","code": "us"},"company": "Mark Iv Press Ltd","date": "2017-03-27","status": "qualified","activity": 16,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
-        {"id": 1079,"name": "Elza Lipke","country": {"name": "Ireland","code": "ie"},"company": "Museum Of Science \u0026 Industry","date": "2017-06-01","status": "proposal","activity": 90,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
-        {"id": 1080,"name": "Devorah Chickering","country": {"name": "Spain","code": "es"},"company": "Garrison Ind","date": "2017-03-14","status": "proposal","activity": 96,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
-        {"id": 1081,"name": "Timothy Mulqueen","country": {"name": "Netherlands","code": "nl"},"company": "Saronix Nymph Products","date": "2018-07-09","status": "renewal","activity": 77,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
-        {"id": 1082,"name": "Arlette Honeywell","country": {"name": "Panama","code": "pa"},"company": "Smc Inc","date": "2018-09-11","status": "proposal","activity": 46,"representative": {"name": "Amy Elsner","image": "amyelsner.png"}},
-        {"id": 1083,"name": "Dominque Dickerson","country": {"name": "Argentina","code": "ar"},"company": "E A I Electronic Assocs Inc","date": "2017-11-12","status": "qualified","activity": 83,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
-        {"id": 1084,"name": "Lettie Isenhower","country": {"name": "Canada","code": "ca"},"company": "Conte, Christopher A Esq","date": "2016-03-01","status": "qualified","activity": 83,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
-        {"id": 1085,"name": "Myra Munns","country": {"name": "Lithuania","code": "lt"},"company": "Anker Law Office","date": "2016-05-21","status": "unqualified","activity": 49,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
-        {"id": 1086,"name": "Stephaine Barfield","country": {"name": "Belgium","code": "be"},"company": "Beutelschies \u0026 Company","date": "2016-01-22","status": "new","activity": 34,"representative": {"name": "Anna Fali","image": "annafali.png"}},
-        {"id": 1087,"name": "Lai Gato","country": {"name": "Nigeria","code": "ng"},"company": "Fligg, Kenneth I Jr","date": "2016-07-26","status": "unqualified","activity": 64,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
-        {"id": 1088,"name": "Stephen Emigh","country": {"name": "Cuba","code": "cu"},"company": "Sharp, J Daniel Esq","date": "2020-07-24","status": "renewal","activity": 51,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
-        {"id": 1089,"name": "Tyra Shields","country": {"name": "Honduras","code": "hn"},"company": "Assink, Anne H Esq","date": "2019-11-10","status": "negotiation","activity": 11,"representative": {"name": "Anna Fali","image": "annafali.png"}},
-        {"id": 1090,"name": "Tammara Wardrip","country": {"name": "Saudi Arabia","code": "sa"},"company": "Jewel My Shop Inc","date": "2016-06-05","status": "renewal","activity": 64,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
-        {"id": 1091,"name": "Cory Gibes","country": {"name": "Malaysia","code": "my"},"company": "Chinese Translation Resources","date": "2016-02-28","status": "new","activity": 44,"representative": {"name": "Anna Fali","image": "annafali.png"}},
-        {"id": 1092,"name": "Danica Bruschke","country": {"name": "Taiwan","code": "tw"},"company": "Stevens, Charles T","date": "2018-12-13","status": "unqualified","activity": 62,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
-        {"id": 1093,"name": "Wilda Giguere","country": {"name": "Iceland","code": "is"},"company": "Mclaughlin, Luther W Cpa","date": "2017-06-16","status": "new","activity": 79,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
-        {"id": 1094,"name": "Elvera Benimadho","country": {"name": "Malaysia","code": "my"},"company": "Tree Musketeers","date": "2019-02-17","status": "proposal","activity": 50,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
-        {"id": 1095,"name": "Carma Vanheusen","country": {"name": "Turkey","code": "tr"},"company": "Springfield Div Oh Edison Co","date": "2019-11-26","status": "renewal","activity": 84,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
-        {"id": 1096,"name": "Malinda Hochard","country": {"name": "Serbia","code": "rs"},"company": "Logan Memorial Hospital","date": "2016-07-06","status": "new","activity": 88,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
-        {"id": 1097,"name": "Natalie Fern","country": {"name": "Canada","code": "ca"},"company": "Kelly, Charles G Esq","date": "2019-10-02","status": "proposal","activity": 44,"representative": {"name": "Amy Elsner","image": "amyelsner.png"}},
-        {"id": 1098,"name": "Lisha Centini","country": {"name": "Netherlands","code": "nl"},"company": "Industrial Paper Shredders Inc","date": "2018-07-05","status": "new","activity": 7,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
-        {"id": 1099,"name": "Arlene Klusman","country": {"name": "Jamaica","code": "jm"},"company": "Beck Horizon Builders","date": "2018-05-14","status": "proposal","activity": 99,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
-        {"id": 1100,"name": "Alease Buemi","country": {"name": "Costa Rica","code": "cr"},"company": "Porto Cayo At Hawks Cay","date": "2018-03-14","status": "unqualified","activity": 0,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
-        {"id": 1101,"name": "Louisa Cronauer","country": {"name": "Costa Rica","code": "cr"},"company": "Pacific Grove Museum Ntrl Hist","date": "2018-09-23","status": "qualified","activity": 3,"representative": {"name": "Anna Fali","image": "annafali.png"}},
-        {"id": 1102,"name": "Angella Cetta","country": {"name": "Vietnam","code": "vn"},"company": "Bender \u0026 Hatley Pc","date": "2018-04-10","status": "qualified","activity": 88,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
-        {"id": 1103,"name": "Cyndy Goldammer","country": {"name": "Burkina Faso","code": "bf"},"company": "Di Cristina J \u0026 Son","date": "2017-09-18","status": "unqualified","activity": 92,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
-        {"id": 1104,"name": "Rosio Cork","country": {"name": "Singapore","code": "sg"},"company": "Green Goddess","date": "2017-08-19","status": "negotiation","activity": 19,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
-        {"id": 1105,"name": "Celeste Korando","country": {"name": "Costa Rica","code": "cr"},"company": "American Arts \u0026 Graphics","date": "2020-06-18","status": "proposal","activity": 21,"representative": {"name": "Amy Elsner","image": "amyelsner.png"}},
-        {"id": 1106,"name": "Twana Felger","country": {"name": "Croatia","code": "hr"},"company": "Opryland Hotel","date": "2016-11-18","status": "negotiation","activity": 97,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
-        {"id": 1107,"name": "Estrella Samu","country": {"name": "Vietnam","code": "vn"},"company": "Marking Devices Pubg Co","date": "2017-06-25","status": "unqualified","activity": 27,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
-        {"id": 1108,"name": "Donte Kines","country": {"name": "Slovakia","code": "sk"},"company": "W Tc Industries Inc","date": "2019-02-16","status": "new","activity": 35,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
-        {"id": 1109,"name": "Tiffiny Steffensmeier","country": {"name": "Pakistan","code": "pk"},"company": "Whitehall Robbins Labs Divsn","date": "2018-03-11","status": "new","activity": 81,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
-        {"id": 1110,"name": "Edna Miceli","country": {"name": "France","code": "fr"},"company": "Sampler","date": "2017-10-15","status": "renewal","activity": 54,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
-        {"id": 1111,"name": "Sue Kownacki","country": {"name": "Jamaica","code": "jm"},"company": "Juno Chefs Incorporated","date": "2017-03-17","status": "proposal","activity": 31,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
-        {"id": 1112,"name": "Jesusa Shin","country": {"name": "Ukraine","code": "ua"},"company": "Carroccio, A Thomas Esq","date": "2017-04-06","status": "renewal","activity": 28,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
-        {"id": 1113,"name": "Rolland Francescon","country": {"name": "United Kingdom","code": "gb"},"company": "Stanley, Richard L Esq","date": "2019-02-03","status": "qualified","activity": 45,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
-        {"id": 1114,"name": "Pamella Schmierer","country": {"name": "Belgium","code": "be"},"company": "K Cs Cstm Mouldings Windows","date": "2016-09-22","status": "unqualified","activity": 34,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
-        {"id": 1115,"name": "Glory Kulzer","country": {"name": "Croatia","code": "hr"},"company": "Comfort Inn","date": "2017-09-27","status": "unqualified","activity": 36,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
-        {"id": 1116,"name": "Shawna Palaspas","country": {"name": "Estonia","code": "ee"},"company": "Windsor, James L Esq","date": "2017-06-25","status": "unqualified","activity": 69,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
-        {"id": 1117,"name": "Brandon Callaro","country": {"name": "Romania","code": "ro"},"company": "Jackson Shields Yeiser","date": "2016-07-13","status": "proposal","activity": 55,"representative": {"name": "Anna Fali","image": "annafali.png"}},
-        {"id": 1118,"name": "Scarlet Cartan","country": {"name": "Panama","code": "pa"},"company": "Box, J Calvin Esq","date": "2018-09-13","status": "renewal","activity": 1,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
-        {"id": 1119,"name": "Oretha Menter","country": {"name": "Panama","code": "pa"},"company": "Custom Engineering Inc","date": "2017-09-11","status": "renewal","activity": 8,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
-        {"id": 1120,"name": "Ty Smith","country": {"name": "United States","code": "us"},"company": "Bresler Eitel Framg Gllry Ltd","date": "2019-07-06","status": "unqualified","activity": 50,"representative": {"name": "Anna Fali","image": "annafali.png"}},
-        {"id": 1121,"name": "Xuan Rochin","country": {"name": "Colombia","code": "co"},"company": "Carol, Drake Sparks Esq","date": "2018-05-22","status": "proposal","activity": 77,"representative": {"name": "Amy Elsner","image": "amyelsner.png"}},
-        {"id": 1122,"name": "Lindsey Dilello","country": {"name": "Austria","code": "at"},"company": "Biltmore Investors Bank","date": "2017-07-18","status": "renewal","activity": 65,"representative": {"name": "Amy Elsner","image": "amyelsner.png"}},
-        {"id": 1123,"name": "Devora Perez","country": {"name": "Uruguay","code": "uy"},"company": "Desco Equipment Corp","date": "2017-10-09","status": "unqualified","activity": 30,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
-        {"id": 1124,"name": "Herman Demesa","country": {"name": "Paraguay","code": "py"},"company": "Merlin Electric Co","date": "2019-05-23","status": "proposal","activity": 10,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
-        {"id": 1125,"name": "Rory Papasergi","country": {"name": "Egypt","code": "eg"},"company": "Bailey Cntl Co Div Babcock","date": "2019-03-02","status": "qualified","activity": 22,"representative": {"name": "Anna Fali","image": "annafali.png"}},
-        {"id": 1126,"name": "Talia Riopelle","country": {"name": "Guatemala","code": "gt"},"company": "Ford Brothers Wholesale Inc","date": "2017-02-18","status": "new","activity": 69,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
-        {"id": 1127,"name": "Van Shire","country": {"name": "Netherlands","code": "nl"},"company": "Cambridge Inn","date": "2020-05-12","status": "new","activity": 4,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
-        {"id": 1128,"name": "Lucina Lary","country": {"name": "Switzerland","code": "ch"},"company": "Matricciani, Albert J Jr","date": "2019-11-20","status": "negotiation","activity": 11,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
-        {"id": 1129,"name": "Bok Isaacs","country": {"name": "Chile","code": "cl"},"company": "Nelson Hawaiian Ltd","date": "2016-11-10","status": "proposal","activity": 41,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
-        {"id": 1130,"name": "Rolande Spickerman","country": {"name": "Panama","code": "pa"},"company": "Neland Travel Agency","date": "2016-07-11","status": "renewal","activity": 84,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
-        {"id": 1131,"name": "Howard Paulas","country": {"name": "Indonesia","code": "id"},"company": "Asendorf, J Alan Esq","date": "2017-07-17","status": "negotiation","activity": 22,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
-        {"id": 1132,"name": "Kimbery Madarang","country": {"name": "Senegal","code": "sn"},"company": "Silberman, Arthur L Esq","date": "2018-08-19","status": "negotiation","activity": 63,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
-        {"id": 1133,"name": "Thurman Manno","country": {"name": "Colombia","code": "co"},"company": "Honey Bee Breeding Genetics \u0026","date": "2016-05-02","status": "qualified","activity": 47,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
-        {"id": 1134,"name": "Becky Mirafuentes","country": {"name": "Serbia","code": "rs"},"company": "Wells Kravitz Schnitzer","date": "2018-04-13","status": "unqualified","activity": 62,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
-        {"id": 1135,"name": "Beatriz Corrington","country": {"name": "South Africa","code": "za"},"company": "Prohab Rehabilitation Servs","date": "2020-01-04","status": "renewal","activity": 55,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
-        {"id": 1136,"name": "Marti Maybury","country": {"name": "Thailand","code": "th"},"company": "Eldridge, Kristin K Esq","date": "2016-02-05","status": "unqualified","activity": 3,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
-        {"id": 1137,"name": "Nieves Gotter","country": {"name": "Latvia","code": "lv"},"company": "Vlahos, John J Esq","date": "2017-03-12","status": "proposal","activity": 3,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
-        {"id": 1138,"name": "Leatha Hagele","country": {"name": "Ukraine","code": "ua"},"company": "Ninas Indian Grs \u0026 Videos","date": "2019-03-27","status": "unqualified","activity": 67,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
-        {"id": 1139,"name": "Valentin Klimek","country": {"name": "Ivory Coast","code": "ci"},"company": "Schmid, Gayanne K Esq","date": "2019-08-06","status": "unqualified","activity": 14,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
-        {"id": 1140,"name": "Melissa Wiklund","country": {"name": "Japan","code": "jp"},"company": "Moapa Valley Federal Credit Un","date": "2018-03-20","status": "qualified","activity": 8,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
-        {"id": 1141,"name": "Sheridan Zane","country": {"name": "Croatia","code": "hr"},"company": "Kentucky Tennessee Clay Co","date": "2016-02-15","status": "qualified","activity": 17,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
-        {"id": 1142,"name": "Bulah Padilla","country": {"name": "Philippines","code": "ph"},"company": "Admiral Party Rentals \u0026 Sales","date": "2016-02-10","status": "proposal","activity": 58,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
-        {"id": 1143,"name": "Audra Kohnert","country": {"name": "Netherlands","code": "nl"},"company": "Nelson, Karolyn King Esq","date": "2019-07-16","status": "unqualified","activity": 82,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
-        {"id": 1144,"name": "Daren Weirather","country": {"name": "Israel","code": "il"},"company": "Panasystems","date": "2015-07-23","status": "negotiation","activity": 96,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
-        {"id": 1145,"name": "Fernanda Jillson","country": {"name": "Mexico","code": "mx"},"company": "Shank, Edward L Esq","date": "2017-07-02","status": "unqualified","activity": 92,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
-        {"id": 1146,"name": "Gearldine Gellinger","country": {"name": "Egypt","code": "eg"},"company": "Megibow \u0026 Edwards","date": "2019-08-17","status": "proposal","activity": 18,"representative": {"name": "Anna Fali","image": "annafali.png"}},
-        {"id": 1147,"name": "Chau Kitzman","country": {"name": "Paraguay","code": "py"},"company": "Benoff, Edward Esq","date": "2019-07-04","status": "new","activity": 9,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
-        {"id": 1148,"name": "Theola Frey","country": {"name": "Vietnam","code": "vn"},"company": "Woodbridge Free Public Library","date": "2020-03-14","status": "unqualified","activity": 44,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
-        {"id": 1149,"name": "Cheryl Haroldson","country": {"name": "France","code": "fr"},"company": "New York Life John Thune","date": "2018-04-03","status": "new","activity": 55,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
-        {"id": 1150,"name": "Laticia Merced","country": {"name": "Burkina Faso","code": "bf"},"company": "Alinabal Inc","date": "2017-03-04","status": "unqualified","activity": 21,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
-        {"id": 1151,"name": "Carissa Batman","country": {"name": "Greece","code": "gr"},"company": "Poletto, Kim David Esq","date": "2016-05-05","status": "negotiation","activity": 91,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
-        {"id": 1152,"name": "Lezlie Craghead","country": {"name": "Panama","code": "pa"},"company": "Chang, Carolyn Esq","date": "2019-05-28","status": "renewal","activity": 30,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
-        {"id": 1153,"name": "Ozell Shealy","country": {"name": "Pakistan","code": "pk"},"company": "Silver Bros Inc","date": "2016-08-19","status": "proposal","activity": 14,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
-        {"id": 1154,"name": "Arminda Parvis","country": {"name": "Indonesia","code": "id"},"company": "Newtec Inc","date": "2020-02-09","status": "proposal","activity": 77,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
-        {"id": 1155,"name": "Reita Leto","country": {"name": "Belgium","code": "be"},"company": "Creative Business Systems","date": "2020-04-03","status": "unqualified","activity": 58,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
-        {"id": 1156,"name": "Yolando Luczki","country": {"name": "France","code": "fr"},"company": "Dal Tile Corporation","date": "2015-01-27","status": "renewal","activity": 78,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
-        {"id": 1157,"name": "Lizette Stem","country": {"name": "Slovakia","code": "sk"},"company": "Edward S Katz","date": "2018-08-06","status": "new","activity": 67,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
-        {"id": 1158,"name": "Gregoria Pawlowicz","country": {"name": "Egypt","code": "eg"},"company": "Oh My Goodknits Inc","date": "2020-02-20","status": "renewal","activity": 29,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
-        {"id": 1159,"name": "Carin Deleo","country": {"name": "China","code": "cn"},"company": "Redeker, Debbie","date": "2015-05-28","status": "qualified","activity": 13,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
-        {"id": 1160,"name": "Chantell Maynerich","country": {"name": "Estonia","code": "ee"},"company": "Desert Sands Motel","date": "2016-09-05","status": "unqualified","activity": 75,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
-        {"id": 1161,"name": "Dierdre Yum","country": {"name": "Czech Republic","code": "cz"},"company": "Cummins Southern Plains Inc","date": "2016-12-20","status": "negotiation","activity": 1,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
-        {"id": 1162,"name": "Larae Gudroe","country": {"name": "Slovenia","code": "si"},"company": "Lehigh Furn Divsn Lehigh","date": "2015-11-28","status": "unqualified","activity": 13,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
-        {"id": 1163,"name": "Latrice Tolfree","country": {"name": "Jamaica","code": "jm"},"company": "United Van Lines Agent","date": "2018-11-11","status": "renewal","activity": 73,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
-        {"id": 1164,"name": "Kerry Theodorov","country": {"name": "Romania","code": "ro"},"company": "Capitol Reporters","date": "2016-11-05","status": "unqualified","activity": 76,"representative": {"name": "Amy Elsner","image": "amyelsner.png"}},
-        {"id": 1165,"name": "Dorthy Hidvegi","country": {"name": "Poland","code": "pl"},"company": "Kwik Kopy Printing","date": "2020-08-13","status": "qualified","activity": 60,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
-        {"id": 1166,"name": "Fannie Lungren","country": {"name": "Belarus","code": "by"},"company": "Centro Inc","date": "2015-07-06","status": "negotiation","activity": 24,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
-        {"id": 1167,"name": "Evangelina Radde","country": {"name": "Ivory Coast","code": "ci"},"company": "Campbell, Jan Esq","date": "2020-02-25","status": "unqualified","activity": 93,"representative": {"name": "Anna Fali","image": "annafali.png"}},
-        {"id": 1168,"name": "Novella Degroot","country": {"name": "Slovenia","code": "si"},"company": "Evans, C Kelly Esq","date": "2017-12-19","status": "unqualified","activity": 30,"representative": {"name": "Amy Elsner","image": "amyelsner.png"}},
-        {"id": 1169,"name": "Clay Hoa","country": {"name": "Paraguay","code": "py"},"company": "Scat Enterprises","date": "2016-02-22","status": "negotiation","activity": 93,"representative": {"name": "Amy Elsner","image": "amyelsner.png"}},
-        {"id": 1170,"name": "Jennifer Fallick","country": {"name": "Australia","code": "au"},"company": "Nagle, Daniel J Esq","date": "2016-12-24","status": "unqualified","activity": 88,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
-        {"id": 1171,"name": "Irma Wolfgramm","country": {"name": "Belgium","code": "be"},"company": "Serendiquity Bed \u0026 Breakfast","date": "2020-10-18","status": "negotiation","activity": 70,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
-        {"id": 1172,"name": "Eun Coody","country": {"name": "Taiwan","code": "tw"},"company": "Ray Carolyne Realty","date": "2018-02-12","status": "qualified","activity": 61,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
-        {"id": 1173,"name": "Sylvia Cousey","country": {"name": "Ireland","code": "ie"},"company": "Berg, Charles E","date": "2018-06-10","status": "unqualified","activity": 91,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
-        {"id": 1174,"name": "Nana Wrinkles","country": {"name": "Austria","code": "at"},"company": "Ray, Milbern D","date": "2017-04-11","status": "renewal","activity": 98,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
-        {"id": 1175,"name": "Layla Springe","country": {"name": "South Africa","code": "za"},"company": "Chadds Ford Winery","date": "2019-07-27","status": "unqualified","activity": 97,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
-        {"id": 1176,"name": "Joesph Degonia","country": {"name": "Serbia","code": "rs"},"company": "A R Packaging","date": "2020-04-23","status": "renewal","activity": 56,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
-        {"id": 1177,"name": "Annabelle Boord","country": {"name": "Guatemala","code": "gt"},"company": "Corn Popper","date": "2020-09-16","status": "proposal","activity": 76,"representative": {"name": "Anna Fali","image": "annafali.png"}},
-        {"id": 1178,"name": "Stephaine Vinning","country": {"name": "Australia","code": "au"},"company": "Birite Foodservice Distr","date": "2016-05-14","status": "negotiation","activity": 43,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
-        {"id": 1179,"name": "Nelida Sawchuk","country": {"name": "South Africa","code": "za"},"company": "Anchorage Museum Of Hist \u0026 Art","date": "2018-06-22","status": "qualified","activity": 58,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
-        {"id": 1180,"name": "Marguerita Hiatt","country": {"name": "United Kingdom","code": "gb"},"company": "Haber, George D Md","date": "2018-10-25","status": "qualified","activity": 72,"representative": {"name": "Anna Fali","image": "annafali.png"}},
-        {"id": 1181,"name": "Carmela Cookey","country": {"name": "France","code": "fr"},"company": "Royal Pontiac Olds Inc","date": "2018-07-19","status": "proposal","activity": 24,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
-        {"id": 1182,"name": "Junita Brideau","country": {"name": "Indonesia","code": "id"},"company": "Leonards Antiques Inc","date": "2015-03-15","status": "proposal","activity": 86,"representative": {"name": "Anna Fali","image": "annafali.png"}},
-        {"id": 1183,"name": "Claribel Varriano","country": {"name": "Ecuador","code": "ec"},"company": "Meca","date": "2017-04-14","status": "unqualified","activity": 15,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
-        {"id": 1184,"name": "Benton Skursky","country": {"name": "Iceland","code": "is"},"company": "Nercon Engineering \u0026 Mfg Inc","date": "2015-02-19","status": "proposal","activity": 9,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
-        {"id": 1185,"name": "Hillary Skulski","country": {"name": "France","code": "fr"},"company": "Replica I","date": "2016-03-25","status": "unqualified","activity": 82,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
-        {"id": 1186,"name": "Merilyn Bayless","country": {"name": "Jamaica","code": "jm"},"company": "20 20 Printing Inc","date": "2020-10-13","status": "unqualified","activity": 13,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
-        {"id": 1187,"name": "Teri Ennaco","country": {"name": "Pakistan","code": "pk"},"company": "Publishers Group West","date": "2019-12-21","status": "unqualified","activity": 57,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
-        {"id": 1188,"name": "Merlyn Lawler","country": {"name": "Germany","code": "de"},"company": "Nischwitz, Jeffrey L Esq","date": "2016-02-26","status": "renewal","activity": 45,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
-        {"id": 1189,"name": "Georgene Montezuma","country": {"name": "Senegal","code": "sn"},"company": "Payne Blades \u0026 Wellborn Pa","date": "2018-10-11","status": "new","activity": 64,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
-        {"id": 1190,"name": "Jettie Mconnell","country": {"name": "Denmark","code": "dk"},"company": "Coldwell Bnkr Wright Real Est","date": "2015-10-18","status": "negotiation","activity": 74,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
-        {"id": 1191,"name": "Lemuel Latzke","country": {"name": "Colombia","code": "co"},"company": "Computer Repair Service","date": "2016-02-13","status": "proposal","activity": 79,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
-        {"id": 1192,"name": "Melodie Knipp","country": {"name": "Finland","code": "fi"},"company": "Fleetwood Building Block Inc","date": "2018-03-08","status": "negotiation","activity": 19,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
-        {"id": 1193,"name": "Candida Corbley","country": {"name": "Poland","code": "pl"},"company": "Colts Neck Medical Assocs Inc","date": "2017-12-02","status": "negotiation","activity": 11,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
-        {"id": 1194,"name": "Karan Karpin","country": {"name": "Estonia","code": "ee"},"company": "New England Taxidermy","date": "2019-01-07","status": "proposal","activity": 4,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
-        {"id": 1195,"name": "Andra Scheyer","country": {"name": "Romania","code": "ro"},"company": "Ludcke, George O Esq","date": "2016-08-14","status": "qualified","activity": 62,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
-        {"id": 1196,"name": "Felicidad Poullion","country": {"name": "Greece","code": "gr"},"company": "Mccorkle, Tom S Esq","date": "2016-03-05","status": "renewal","activity": 64,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
-        {"id": 1197,"name": "Belen Strassner","country": {"name": "Ivory Coast","code": "ci"},"company": "Eagle Software Inc","date": "2015-12-14","status": "qualified","activity": 91,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
-        {"id": 1198,"name": "Gracia Melnyk","country": {"name": "Costa Rica","code": "cr"},"company": "Juvenile \u0026 Adult Super","date": "2019-06-01","status": "unqualified","activity": 40,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
-        {"id": 1199,"name": "Jolanda Hanafan","country": {"name": "Cameroon","code": "cm"},"company": "Perez, Joseph J Esq","date": "2015-12-09","status": "qualified","activity": 27,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
-        {"id": 1200,"name": "Barrett Toyama","country": {"name": "Thailand","code": "th"},"company": "Case Foundation Co","date": "2019-08-16","status": "new","activity": 82,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
-        {"id": 1201,"name": "Helga Fredicks","country": {"name": "Guatemala","code": "gt"},"company": "Eis Environmental Engrs Inc","date": "2018-06-20","status": "new","activity": 33,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
-        {"id": 1202,"name": "Ashlyn Pinilla","country": {"name": "Japan","code": "jp"},"company": "Art Crafters","date": "2018-04-11","status": "unqualified","activity": 5,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
-        {"id": 1203,"name": "Fausto Agramonte","country": {"name": "Belgium","code": "be"},"company": "Marriott Hotels Resorts Suites","date": "2019-06-25","status": "new","activity": 22,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
-        {"id": 1204,"name": "Ronny Caiafa","country": {"name": "Argentina","code": "ar"},"company": "Remaco Inc","date": "2020-07-21","status": "new","activity": 61,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
-        {"id": 1205,"name": "Marge Limmel","country": {"name": "Cameroon","code": "cm"},"company": "Bjork, Robert D Jr","date": "2015-03-12","status": "unqualified","activity": 90,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
-        {"id": 1206,"name": "Norah Waymire","country": {"name": "United States","code": "us"},"company": "Carmichael, Jeffery L Esq","date": "2019-06-11","status": "renewal","activity": 48,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
-        {"id": 1207,"name": "Aliza Baltimore","country": {"name": "Malaysia","code": "my"},"company": "Andrews, J Robert Esq","date": "2020-11-25","status": "unqualified","activity": 59,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
-        {"id": 1208,"name": "Mozell Pelkowski","country": {"name": "Latvia","code": "lv"},"company": "Winship \u0026 Byrne","date": "2018-04-13","status": "unqualified","activity": 94,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
-        {"id": 1209,"name": "Viola Bitsuie","country": {"name": "Denmark","code": "dk"},"company": "Burton \u0026 Davis","date": "2018-07-07","status": "new","activity": 94,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
-        {"id": 1210,"name": "Franklyn Emard","country": {"name": "Iceland","code": "is"},"company": "Olympic Graphic Arts","date": "2018-02-25","status": "qualified","activity": 95,"representative": {"name": "Anna Fali","image": "annafali.png"}},
-        {"id": 1211,"name": "Willodean Konopacki","country": {"name": "Hong Kong","code": "hk"},"company": "Magnuson","date": "2017-10-03","status": "renewal","activity": 20,"representative": {"name": "Anna Fali","image": "annafali.png"}},
-        {"id": 1212,"name": "Beckie Silvestrini","country": {"name": "Poland","code": "pl"},"company": "A All American Travel Inc","date": "2016-11-26","status": "renewal","activity": 81,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
-        {"id": 1213,"name": "Rebecka Gesick","country": {"name": "Philippines","code": "ph"},"company": "Polykote Inc","date": "2019-06-22","status": "renewal","activity": 45,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
-        {"id": 1214,"name": "Frederica Blunk","country": {"name": "Lithuania","code": "lt"},"company": "Jets Cybernetics","date": "2019-06-07","status": "renewal","activity": 56,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
-        {"id": 1215,"name": "Glen Bartolet","country": {"name": "Germany","code": "de"},"company": "Metlab Testing Services","date": "2015-02-13","status": "proposal","activity": 99,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
-        {"id": 1216,"name": "Freeman Gochal","country": {"name": "Slovenia","code": "si"},"company": "Kellermann, William T Esq","date": "2019-08-27","status": "negotiation","activity": 2,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
-        {"id": 1217,"name": "Vincent Meinerding","country": {"name": "United States","code": "us"},"company": "Arturi, Peter D Esq","date": "2018-06-18","status": "new","activity": 58,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
-        {"id": 1218,"name": "Rima Bevelacqua","country": {"name": "Taiwan","code": "tw"},"company": "Mcauley Mfg Co","date": "2019-05-18","status": "new","activity": 31,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
-        {"id": 1219,"name": "Glendora Sarbacher","country": {"name": "Lithuania","code": "lt"},"company": "Defur Voran Hanley Radcliff","date": "2018-04-21","status": "new","activity": 79,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
-        {"id": 1220,"name": "Avery Steier","country": {"name": "Mexico","code": "mx"},"company": "Dill Dill Carr \u0026 Stonbraker Pc","date": "2017-07-27","status": "proposal","activity": 63,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
-        {"id": 1221,"name": "Cristy Lother","country": {"name": "Burkina Faso","code": "bf"},"company": "Kleensteel","date": "2018-05-19","status": "renewal","activity": 55,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
-        {"id": 1222,"name": "Nicolette Brossart","country": {"name": "Egypt","code": "eg"},"company": "Goulds Pumps Inc Slurry Pump","date": "2015-05-26","status": "new","activity": 25,"representative": {"name": "Anna Fali","image": "annafali.png"}},
-        {"id": 1223,"name": "Tracey Modzelewski","country": {"name": "Denmark","code": "dk"},"company": "Kansas City Insurance Report","date": "2019-07-02","status": "renewal","activity": 4,"representative": {"name": "Anna Fali","image": "annafali.png"}},
-        {"id": 1224,"name": "Virgina Tegarden","country": {"name": "Cameroon","code": "cm"},"company": "Berhanu International Foods","date": "2017-10-09","status": "qualified","activity": 62,"representative": {"name": "Amy Elsner","image": "amyelsner.png"}},
-        {"id": 1225,"name": "Tiera Frankel","country": {"name": "India","code": "in"},"company": "Roland Ashcroft","date": "2018-03-27","status": "unqualified","activity": 90,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
-        {"id": 1226,"name": "Alaine Bergesen","country": {"name": "Peru","code": "pe"},"company": "Hispanic Magazine","date": "2017-08-10","status": "qualified","activity": 34,"representative": {"name": "Anna Fali","image": "annafali.png"}},
-        {"id": 1227,"name": "Earleen Mai","country": {"name": "Italy","code": "it"},"company": "Little Sheet Metal Co","date": "2016-06-22","status": "proposal","activity": 38,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
-        {"id": 1228,"name": "Leonida Gobern","country": {"name": "Cuba","code": "cu"},"company": "Holmes, Armstead J Esq","date": "2020-02-24","status": "renewal","activity": 96,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
-        {"id": 1229,"name": "Ressie Auffrey","country": {"name": "Japan","code": "jp"},"company": "Faw, James C Cpa","date": "2016-10-21","status": "negotiation","activity": 28,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
-        {"id": 1230,"name": "Justine Mugnolo","country": {"name": "Argentina","code": "ar"},"company": "Evans Rule Company","date": "2016-02-21","status": "negotiation","activity": 83,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
-        {"id": 1231,"name": "Eladia Saulter","country": {"name": "Switzerland","code": "ch"},"company": "Tyee Productions Inc","date": "2016-03-10","status": "new","activity": 16,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
-        {"id": 1232,"name": "Chaya Malvin","country": {"name": "Cuba","code": "cu"},"company": "Dunnells \u0026 Duvall","date": "2016-07-22","status": "renewal","activity": 12,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
-        {"id": 1233,"name": "Gwenn Suffield","country": {"name": "Austria","code": "at"},"company": "Deltam Systems Inc","date": "2019-06-23","status": "qualified","activity": 67,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
-        {"id": 1234,"name": "Salena Karpel","country": {"name": "Puerto Rico","code": "pr"},"company": "Hammill Mfg Co","date": "2016-08-02","status": "renewal","activity": 0,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
-        {"id": 1235,"name": "Yoko Fishburne","country": {"name": "Croatia","code": "hr"},"company": "Sams Corner Store","date": "2017-08-06","status": "unqualified","activity": 73,"representative": {"name": "Anna Fali","image": "annafali.png"}},
-        {"id": 1236,"name": "Taryn Moyd","country": {"name": "Serbia","code": "rs"},"company": "Siskin, Mark J Esq","date": "2016-12-18","status": "negotiation","activity": 57,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
-        {"id": 1237,"name": "Katina Polidori","country": {"name": "Nigeria","code": "ng"},"company": "Cape \u0026 Associates Real Estate","date": "2016-08-25","status": "unqualified","activity": 37,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
-        {"id": 1238,"name": "Rickie Plumer","country": {"name": "Turkey","code": "tr"},"company": "Merrill Lynch","date": "2018-11-04","status": "unqualified","activity": 71,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
-        {"id": 1239,"name": "Alex Loader","country": {"name": "Italy","code": "it"},"company": "Sublett, Scott Esq","date": "2016-01-07","status": "unqualified","activity": 22,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
-        {"id": 1240,"name": "Lashon Vizarro","country": {"name": "Ecuador","code": "ec"},"company": "Sentry Signs","date": "2019-08-02","status": "negotiation","activity": 46,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
-        {"id": 1241,"name": "Lauran Burnard","country": {"name": "Czech Republic","code": "cz"},"company": "Professionals Unlimited","date": "2016-04-27","status": "renewal","activity": 30,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
-        {"id": 1242,"name": "Ceola Setter","country": {"name": "Taiwan","code": "tw"},"company": "Southern Steel Shelving Co","date": "2017-05-13","status": "qualified","activity": 43,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
-        {"id": 1243,"name": "My Rantanen","country": {"name": "Philippines","code": "ph"},"company": "Bosco, Paul J","date": "2017-09-11","status": "proposal","activity": 60,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
-        {"id": 1244,"name": "Lorrine Worlds","country": {"name": "Argentina","code": "ar"},"company": "Longo, Nicholas J Esq","date": "2018-05-10","status": "renewal","activity": 51,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
-        {"id": 1245,"name": "Peggie Sturiale","country": {"name": "Malaysia","code": "my"},"company": "Henry County Middle School","date": "2019-11-03","status": "renewal","activity": 41,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
-        {"id": 1246,"name": "Marvel Raymo","country": {"name": "Belgium","code": "be"},"company": "Edison Supply \u0026 Equipment Co","date": "2016-03-08","status": "renewal","activity": 9,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
-        {"id": 1247,"name": "Daron Dinos","country": {"name": "Hungary","code": "hu"},"company": "Wolf, Warren R Esq","date": "2016-03-25","status": "unqualified","activity": 30,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
-        {"id": 1248,"name": "An Fritz","country": {"name": "Netherlands","code": "nl"},"company": "Linguistic Systems Inc","date": "2017-08-04","status": "proposal","activity": 86,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
-        {"id": 1249,"name": "Portia Stimmel","country": {"name": "Australia","code": "au"},"company": "Peace Christian Center","date": "2020-01-13","status": "qualified","activity": 30,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
-        {"id": 1250,"name": "Rhea Aredondo","country": {"name": "Greece","code": "gr"},"company": "Double B Foods Inc","date": "2016-06-19","status": "qualified","activity": 68,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
-        {"id": 1251,"name": "Benedict Sama","country": {"name": "Israel","code": "il"},"company": "Alexander \u0026 Alexander Inc","date": "2018-08-18","status": "negotiation","activity": 79,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
-        {"id": 1252,"name": "Alyce Arias","country": {"name": "Egypt","code": "eg"},"company": "Fairbanks Scales","date": "2018-09-14","status": "new","activity": 77,"representative": {"name": "Anna Fali","image": "annafali.png"}},
-        {"id": 1253,"name": "Heike Berganza","country": {"name": "Bulgaria","code": "bg"},"company": "Cali Sportswear Cutting Dept","date": "2019-01-21","status": "unqualified","activity": 95,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
-        {"id": 1254,"name": "Carey Dopico","country": {"name": "Saudi Arabia","code": "sa"},"company": "Garofani, John Esq","date": "2020-05-25","status": "negotiation","activity": 35,"representative": {"name": "Anna Fali","image": "annafali.png"}},
-        {"id": 1255,"name": "Dottie Hellickson","country": {"name": "Chile","code": "cl"},"company": "Thompson Fabricating Co","date": "2016-02-12","status": "qualified","activity": 7,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
-        {"id": 1256,"name": "Deandrea Hughey","country": {"name": "South Africa","code": "za"},"company": "Century 21 Krall Real Estate","date": "2018-09-26","status": "unqualified","activity": 96,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
-        {"id": 1257,"name": "Kimberlie Duenas","country": {"name": "Bulgaria","code": "bg"},"company": "Mid Contntl Rlty \u0026 Prop Mgmt","date": "2015-07-27","status": "qualified","activity": 96,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
-        {"id": 1258,"name": "Martina Staback","country": {"name": "Luxembourg","code": "lu"},"company": "Ace Signs Inc","date": "2017-02-14","status": "new","activity": 47,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
-        {"id": 1259,"name": "Skye Fillingim","country": {"name": "Belgium","code": "be"},"company": "Rodeway Inn","date": "2017-02-12","status": "new","activity": 86,"representative": {"name": "Anna Fali","image": "annafali.png"}},
-        {"id": 1260,"name": "Jade Farrar","country": {"name": "Mexico","code": "mx"},"company": "Bonnet \u0026 Daughter","date": "2017-02-23","status": "new","activity": 73,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
-        {"id": 1261,"name": "Charlene Hamilton","country": {"name": "India","code": "in"},"company": "Oshins \u0026 Gibbons","date": "2017-09-23","status": "unqualified","activity": 32,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
-        {"id": 1262,"name": "Geoffrey Acey","country": {"name": "Hong Kong","code": "hk"},"company": "Price Business Services","date": "2019-10-11","status": "proposal","activity": 98,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
-        {"id": 1263,"name": "Stevie Westerbeck","country": {"name": "Lithuania","code": "lt"},"company": "Wise, Dennis W Md","date": "2017-08-01","status": "renewal","activity": 57,"representative": {"name": "Amy Elsner","image": "amyelsner.png"}},
-        {"id": 1264,"name": "Pamella Fortino","country": {"name": "Panama","code": "pa"},"company": "Super 8 Motel","date": "2018-09-03","status": "new","activity": 100,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
-        {"id": 1265,"name": "Harrison Haufler","country": {"name": "Malaysia","code": "my"},"company": "John Wagner Associates","date": "2016-08-25","status": "qualified","activity": 85,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
-        {"id": 1266,"name": "Johnna Engelberg","country": {"name": "Thailand","code": "th"},"company": "Thrifty Oil Co","date": "2019-06-02","status": "renewal","activity": 1,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
-        {"id": 1267,"name": "Buddy Cloney","country": {"name": "Hungary","code": "hu"},"company": "Larkfield Photo","date": "2020-05-14","status": "qualified","activity": 9,"representative": {"name": "Anna Fali","image": "annafali.png"}},
-        {"id": 1268,"name": "Dalene Riden","country": {"name": "Bolivia","code": "bo"},"company": "Silverman Planetarium","date": "2019-08-23","status": "renewal","activity": 31,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
-        {"id": 1269,"name": "Jerry Zurcher","country": {"name": "Ukraine","code": "ua"},"company": "J \u0026 F Lumber","date": "2015-05-11","status": "renewal","activity": 52,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
-        {"id": 1270,"name": "Haydee Denooyer","country": {"name": "Ivory Coast","code": "ci"},"company": "Cleaning Station Inc","date": "2016-04-17","status": "qualified","activity": 80,"representative": {"name": "Amy Elsner","image": "amyelsner.png"}},
-        {"id": 1271,"name": "Joseph Cryer","country": {"name": "Philippines","code": "ph"},"company": "Ames Stationers","date": "2019-11-26","status": "qualified","activity": 53,"representative": {"name": "Anna Fali","image": "annafali.png"}},
-        {"id": 1272,"name": "Deonna Kippley","country": {"name": "South Africa","code": "za"},"company": "Midas Muffler Shops","date": "2017-08-26","status": "qualified","activity": 52,"representative": {"name": "Amy Elsner","image": "amyelsner.png"}},
-        {"id": 1273,"name": "Raymon Calvaresi","country": {"name": "South Africa","code": "za"},"company": "Seaboard Securities Inc","date": "2017-07-09","status": "qualified","activity": 45,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
-        {"id": 1274,"name": "Alecia Bubash","country": {"name": "Poland","code": "pl"},"company": "Petersen, James E Esq","date": "2016-05-19","status": "new","activity": 28,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
-        {"id": 1275,"name": "Ma Layous","country": {"name": "Latvia","code": "lv"},"company": "Development Authority","date": "2016-02-11","status": "qualified","activity": 2,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
-        {"id": 1276,"name": "Detra Coyier","country": {"name": "Ivory Coast","code": "ci"},"company": "Schott Fiber Optics Inc","date": "2019-06-05","status": "proposal","activity": 95,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
-        {"id": 1277,"name": "Terrilyn Rodeigues","country": {"name": "Thailand","code": "th"},"company": "Stuart J Agins","date": "2016-08-04","status": "renewal","activity": 35,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
-        {"id": 1278,"name": "Salome Lacovara","country": {"name": "Romania","code": "ro"},"company": "Mitsumi Electronics Corp","date": "2015-06-05","status": "unqualified","activity": 78,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
-        {"id": 1279,"name": "Garry Keetch","country": {"name": "Luxembourg","code": "lu"},"company": "Italian Express Franchise Corp","date": "2015-06-20","status": "unqualified","activity": 86,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
-        {"id": 1280,"name": "Matthew Neither","country": {"name": "United Kingdom","code": "gb"},"company": "American Council On Sci \u0026 Hlth","date": "2018-06-24","status": "qualified","activity": 4,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
-        {"id": 1281,"name": "Theodora Restrepo","country": {"name": "Paraguay","code": "py"},"company": "Kleri, Patricia S Esq","date": "2017-08-15","status": "renewal","activity": 66,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
-        {"id": 1282,"name": "Noah Kalafatis","country": {"name": "Saudi Arabia","code": "sa"},"company": "Twiggs Abrams Blanchard","date": "2020-06-24","status": "negotiation","activity": 35,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
-        {"id": 1283,"name": "Carmen Sweigard","country": {"name": "Bolivia","code": "bo"},"company": "Maui Research \u0026 Technology Pk","date": "2019-08-08","status": "new","activity": 96,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
-        {"id": 1284,"name": "Lavonda Hengel","country": {"name": "Hungary","code": "hu"},"company": "Bradley Nameplate Corp","date": "2019-10-25","status": "negotiation","activity": 48,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
-        {"id": 1285,"name": "Junita Stoltzman","country": {"name": "Turkey","code": "tr"},"company": "Geonex Martel Inc","date": "2015-03-19","status": "proposal","activity": 64,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
-        {"id": 1286,"name": "Herminia Nicolozakes","country": {"name": "Venezuela","code": "ve"},"company": "Sea Island Div Of Fstr Ind Inc","date": "2019-09-09","status": "negotiation","activity": 0,"representative": {"name": "Anna Fali","image": "annafali.png"}},
-        {"id": 1287,"name": "Casie Good","country": {"name": "Japan","code": "jp"},"company": "Papay, Debbie J Esq","date": "2016-11-27","status": "new","activity": 87,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
-        {"id": 1288,"name": "Reena Maisto","country": {"name": "Panama","code": "pa"},"company": "Lane Promotions","date": "2016-08-22","status": "new","activity": 16,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
-        {"id": 1289,"name": "Mirta Mallett","country": {"name": "Singapore","code": "sg"},"company": "Stephen Kennerly Archts Inc Pc","date": "2017-11-27","status": "renewal","activity": 14,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
-        {"id": 1290,"name": "Cathrine Pontoriero","country": {"name": "Finland","code": "fi"},"company": "Business Systems Of Wis Inc","date": "2020-02-07","status": "negotiation","activity": 58,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
-        {"id": 1291,"name": "Filiberto Tawil","country": {"name": "Panama","code": "pa"},"company": "Flash, Elena Salerno Esq","date": "2018-01-28","status": "proposal","activity": 0,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
-        {"id": 1292,"name": "Raul Upthegrove","country": {"name": "Panama","code": "pa"},"company": "Neeley, Gregory W Esq","date": "2019-11-16","status": "renewal","activity": 59,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
-        {"id": 1293,"name": "Sarah Candlish","country": {"name": "Hong Kong","code": "hk"},"company": "Alabama Educational Tv Comm","date": "2019-06-09","status": "proposal","activity": 30,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
-        {"id": 1294,"name": "Lucy Treston","country": {"name": "Jamaica","code": "jm"},"company": "Franz Inc","date": "2017-02-07","status": "proposal","activity": 59,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
-        {"id": 1295,"name": "Judy Aquas","country": {"name": "Romania","code": "ro"},"company": "Plantation Restaurant","date": "2020-09-14","status": "renewal","activity": 86,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
-        {"id": 1296,"name": "Yvonne Tjepkema","country": {"name": "United Kingdom","code": "gb"},"company": "Radio Communications Co","date": "2017-01-06","status": "renewal","activity": 33,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
-        {"id": 1297,"name": "Kayleigh Lace","country": {"name": "Denmark","code": "dk"},"company": "Dentalaw Divsn Hlth Care","date": "2019-11-04","status": "negotiation","activity": 70,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
-        {"id": 1298,"name": "Felix Hirpara","country": {"name": "Panama","code": "pa"},"company": "American Speedy Printing Ctrs","date": "2015-03-13","status": "new","activity": 8,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
-        {"id": 1299,"name": "Tresa Sweely","country": {"name": "Germany","code": "de"},"company": "Grayson, Grant S Esq","date": "2019-12-22","status": "proposal","activity": 22,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
-        {"id": 1300,"name": "Kristeen Turinetti","country": {"name": "Burkina Faso","code": "bf"},"company": "Jeanerette Middle School","date": "2017-09-28","status": "new","activity": 67,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
-        {"id": 1301,"name": "Jenelle Regusters","country": {"name": "Hungary","code": "hu"},"company": "Haavisto, Brian F Esq","date": "2019-07-27","status": "qualified","activity": 13,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
-        {"id": 1302,"name": "Renea Monterrubio","country": {"name": "Greece","code": "gr"},"company": "Wmmt Radio Station","date": "2016-03-28","status": "proposal","activity": 73,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
-        {"id": 1303,"name": "Olive Matuszak","country": {"name": "Germany","code": "de"},"company": "Colony Paints Sales Ofc \u0026 Plnt","date": "2018-04-15","status": "unqualified","activity": 70,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
-        {"id": 1304,"name": "Ligia Reiber","country": {"name": "Cameroon","code": "cm"},"company": "Floral Expressions","date": "2017-02-02","status": "negotiation","activity": 51,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
-        {"id": 1305,"name": "Christiane Eschberger","country": {"name": "Romania","code": "ro"},"company": "Casco Services Inc","date": "2018-03-27","status": "unqualified","activity": 81,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
-        {"id": 1306,"name": "Goldie Schirpke","country": {"name": "Paraguay","code": "py"},"company": "Reuter, Arthur C Jr","date": "2015-04-21","status": "renewal","activity": 8,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
-        {"id": 1307,"name": "Loreta Timenez","country": {"name": "Burkina Faso","code": "bf"},"company": "Kaminski, Katherine Andritsaki","date": "2015-07-17","status": "proposal","activity": 29,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
-        {"id": 1308,"name": "Fabiola Hauenstein","country": {"name": "Czech Republic","code": "cz"},"company": "Sidewinder Products Corp","date": "2015-12-12","status": "renewal","activity": 42,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
-        {"id": 1309,"name": "Amie Perigo","country": {"name": "Russia","code": "ru"},"company": "General Foam Corporation","date": "2016-06-13","status": "new","activity": 55,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
-        {"id": 1310,"name": "Raina Brachle","country": {"name": "Greece","code": "gr"},"company": "Ikg Borden Divsn Harsco Corp","date": "2016-11-28","status": "negotiation","activity": 12,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
-        {"id": 1311,"name": "Erinn Canlas","country": {"name": "United Kingdom","code": "gb"},"company": "Anchor Computer Inc","date": "2018-12-08","status": "proposal","activity": 89,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
-        {"id": 1312,"name": "Cherry Lietz","country": {"name": "Bulgaria","code": "bg"},"company": "Sebring \u0026 Co","date": "2017-11-04","status": "qualified","activity": 22,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
-        {"id": 1313,"name": "Kattie Vonasek","country": {"name": "Austria","code": "at"},"company": "H A C Farm Lines Co Optv Assoc","date": "2017-02-17","status": "proposal","activity": 58,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
-        {"id": 1314,"name": "Lilli Scriven","country": {"name": "Egypt","code": "eg"},"company": "Hunter, John J Esq","date": "2017-04-15","status": "qualified","activity": 79,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
-        {"id": 1315,"name": "Whitley Tomasulo","country": {"name": "Qatar","code": "qa"},"company": "Freehold Fence Co","date": "2017-11-16","status": "qualified","activity": 6,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
-        {"id": 1316,"name": "Barbra Adkin","country": {"name": "Nigeria","code": "ng"},"company": "Binswanger","date": "2019-07-24","status": "qualified","activity": 64,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
-        {"id": 1317,"name": "Hermila Thyberg","country": {"name": "Argentina","code": "ar"},"company": "Chilton Malting Co","date": "2016-11-05","status": "qualified","activity": 57,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
-        {"id": 1318,"name": "Jesusita Flister","country": {"name": "Ukraine","code": "ua"},"company": "Schoen, Edward J Jr","date": "2017-03-03","status": "proposal","activity": 29,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
-        {"id": 1319,"name": "Caitlin Julia","country": {"name": "Israel","code": "il"},"company": "Helderman, Seymour Cpa","date": "2018-03-13","status": "renewal","activity": 19,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
-        {"id": 1320,"name": "Roosevelt Hoffis","country": {"name": "Puerto Rico","code": "pr"},"company": "Denbrook, Myron","date": "2019-04-14","status": "new","activity": 49,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
-        {"id": 1321,"name": "Helaine Halter","country": {"name": "Estonia","code": "ee"},"company": "Lippitt, Mike","date": "2019-09-28","status": "renewal","activity": 62,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
-        {"id": 1322,"name": "Lorean Martabano","country": {"name": "Slovakia","code": "sk"},"company": "Hiram, Hogg P Esq","date": "2017-03-23","status": "negotiation","activity": 8,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
-        {"id": 1323,"name": "France Buzick","country": {"name": "Nigeria","code": "ng"},"company": "In Travel Agency","date": "2016-12-14","status": "renewal","activity": 22,"representative": {"name": "Amy Elsner","image": "amyelsner.png"}},
-        {"id": 1324,"name": "Justine Ferrario","country": {"name": "Ukraine","code": "ua"},"company": "Newhart Foods Inc","date": "2015-09-07","status": "unqualified","activity": 7,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
-        {"id": 1325,"name": "Adelina Nabours","country": {"name": "Mexico","code": "mx"},"company": "Courtyard By Marriott","date": "2018-05-26","status": "renewal","activity": 59,"representative": {"name": "Amy Elsner","image": "amyelsner.png"}},
-        {"id": 1326,"name": "Derick Dhamer","country": {"name": "Hungary","code": "hu"},"company": "Studer, Eugene A Esq","date": "2020-07-04","status": "new","activity": 72,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
-        {"id": 1327,"name": "Jerry Dallen","country": {"name": "Egypt","code": "eg"},"company": "Seashore Supply Co Waretown","date": "2015-10-23","status": "renewal","activity": 21,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
-        {"id": 1328,"name": "Leota Ragel","country": {"name": "Qatar","code": "qa"},"company": "Mayar Silk Inc","date": "2019-06-15","status": "negotiation","activity": 74,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
-        {"id": 1329,"name": "Jutta Amyot","country": {"name": "Cameroon","code": "cm"},"company": "National Medical Excess Corp","date": "2019-09-01","status": "proposal","activity": 8,"representative": {"name": "Amy Elsner","image": "amyelsner.png"}},
-        {"id": 1330,"name": "Aja Gehrett","country": {"name": "Sweden","code": "se"},"company": "Stero Company","date": "2018-01-28","status": "qualified","activity": 46,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
-        {"id": 1331,"name": "Kirk Herritt","country": {"name": "Morocco","code": "ma"},"company": "Hasting, H Duane Esq","date": "2018-10-24","status": "renewal","activity": 2,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
-        {"id": 1332,"name": "Leonora Mauson","country": {"name": "Hong Kong","code": "hk"},"company": "Insty Prints","date": "2019-02-02","status": "proposal","activity": 8,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
-        {"id": 1333,"name": "Winfred Brucato","country": {"name": "Austria","code": "at"},"company": "Glenridge Manor Mobile Home Pk","date": "2019-08-16","status": "renewal","activity": 8,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
-        {"id": 1334,"name": "Tarra Nachor","country": {"name": "Panama","code": "pa"},"company": "Circuit Solution Inc","date": "2019-07-10","status": "proposal","activity": 88,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
-        {"id": 1335,"name": "Corinne Loder","country": {"name": "Brazil","code": "br"},"company": "Local Office","date": "2016-05-21","status": "proposal","activity": 85,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
-        {"id": 1336,"name": "Dulce Labreche","country": {"name": "South Africa","code": "za"},"company": "Lee Kilkelly Paulson \u0026 Kabaker","date": "2019-11-10","status": "qualified","activity": 24,"representative": {"name": "Amy Elsner","image": "amyelsner.png"}},
-        {"id": 1337,"name": "Kate Keneipp","country": {"name": "Latvia","code": "lv"},"company": "Davis, Maxon R Esq","date": "2019-06-20","status": "proposal","activity": 44,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
-        {"id": 1338,"name": "Kaitlyn Ogg","country": {"name": "Tunisia","code": "tn"},"company": "Garrison, Paul E Esq","date": "2019-08-01","status": "proposal","activity": 91,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
-        {"id": 1339,"name": "Sherita Saras","country": {"name": "Taiwan","code": "tw"},"company": "Black History Resource Center","date": "2017-06-09","status": "unqualified","activity": 79,"representative": {"name": "Anna Fali","image": "annafali.png"}},
-        {"id": 1340,"name": "Lashawnda Stuer","country": {"name": "Indonesia","code": "id"},"company": "Rodriguez, J Christopher Esq","date": "2018-01-08","status": "negotiation","activity": 6,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
-        {"id": 1341,"name": "Ernest Syrop","country": {"name": "Jamaica","code": "jm"},"company": "Grant Family Health Center","date": "2016-10-06","status": "unqualified","activity": 90,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
-        {"id": 1342,"name": "Nobuko Halsey","country": {"name": "Argentina","code": "ar"},"company": "Goeman Wood Products Inc","date": "2019-01-02","status": "unqualified","activity": 72,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
-        {"id": 1343,"name": "Lavonna Wolny","country": {"name": "Czech Republic","code": "cz"},"company": "Linhares, Kenneth A Esq","date": "2019-03-09","status": "negotiation","activity": 77,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
-        {"id": 1344,"name": "Lashaunda Lizama","country": {"name": "Ecuador","code": "ec"},"company": "Earnhardt Printing","date": "2016-02-16","status": "negotiation","activity": 76,"representative": {"name": "Amy Elsner","image": "amyelsner.png"}},
-        {"id": 1345,"name": "Mariann Bilden","country": {"name": "Argentina","code": "ar"},"company": "H P G Industrys Inc","date": "2019-12-15","status": "proposal","activity": 20,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
-        {"id": 1346,"name": "Helene Rodenberger","country": {"name": "Bolivia","code": "bo"},"company": "Bailey Transportation Prod Inc","date": "2016-09-22","status": "unqualified","activity": 26,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
-        {"id": 1347,"name": "Roselle Estell","country": {"name": "Hungary","code": "hu"},"company": "Mcglynn Bliss Pc","date": "2016-11-25","status": "negotiation","activity": 80,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
-        {"id": 1348,"name": "Samira Heintzman","country": {"name": "Vietnam","code": "vn"},"company": "Mutual Fish Co","date": "2019-11-26","status": "qualified","activity": 70,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
-        {"id": 1349,"name": "Margart Meisel","country": {"name": "Serbia","code": "rs"},"company": "Yeates, Arthur L Aia","date": "2019-10-27","status": "negotiation","activity": 77,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
-        {"id": 1350,"name": "Kristofer Bennick","country": {"name": "Tunisia","code": "tn"},"company": "Logan, Ronald J Esq","date": "2016-02-13","status": "proposal","activity": 5,"representative": {"name": "Anna Fali","image": "annafali.png"}},
-        {"id": 1351,"name": "Weldon Acuff","country": {"name": "Estonia","code": "ee"},"company": "Advantage Martgage Company","date": "2019-10-22","status": "qualified","activity": 38,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
-        {"id": 1352,"name": "Shalon Shadrick","country": {"name": "Iceland","code": "is"},"company": "Germer And Gertz Llp","date": "2015-01-03","status": "proposal","activity": 66,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
-        {"id": 1353,"name": "Denise Patak","country": {"name": "Uruguay","code": "uy"},"company": "Spence Law Offices","date": "2016-11-03","status": "qualified","activity": 77,"representative": {"name": "Anna Fali","image": "annafali.png"}},
-        {"id": 1354,"name": "Louvenia Beech","country": {"name": "Ecuador","code": "ec"},"company": "John Ortiz Nts Therapy Center","date": "2016-04-11","status": "renewal","activity": 62,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
-        {"id": 1355,"name": "Audry Yaw","country": {"name": "Portugal","code": "pt"},"company": "Mike Uchrin Htg \u0026 Air Cond Inc","date": "2017-11-22","status": "unqualified","activity": 12,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
-        {"id": 1356,"name": "Kristel Ehmann","country": {"name": "Israel","code": "il"},"company": "Mccoy, Joy Reynolds Esq","date": "2016-06-23","status": "new","activity": 67,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
-        {"id": 1357,"name": "Vincenza Zepp","country": {"name": "Pakistan","code": "pk"},"company": "Kbor 1600 Am","date": "2016-01-04","status": "qualified","activity": 25,"representative": {"name": "Anna Fali","image": "annafali.png"}},
-        {"id": 1358,"name": "Elouise Gwalthney","country": {"name": "Netherlands","code": "nl"},"company": "Quality Inn Northwest","date": "2016-04-05","status": "proposal","activity": 14,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
-        {"id": 1359,"name": "Venita Maillard","country": {"name": "Poland","code": "pl"},"company": "Wallace Church Assoc Inc","date": "2016-03-23","status": "negotiation","activity": 69,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
-        {"id": 1360,"name": "Kasandra Semidey","country": {"name": "Indonesia","code": "id"},"company": "Can Tron","date": "2015-09-03","status": "new","activity": 25,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
-        {"id": 1361,"name": "Xochitl Discipio","country": {"name": "Slovakia","code": "sk"},"company": "Ravaal Enterprises Inc","date": "2016-11-14","status": "qualified","activity": 47,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
-        {"id": 1362,"name": "Maile Linahan","country": {"name": "Nigeria","code": "ng"},"company": "Thompson Steel Company Inc","date": "2016-07-24","status": "new","activity": 0,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
-        {"id": 1363,"name": "Krissy Rauser","country": {"name": "Thailand","code": "th"},"company": "Anderson, Mark A Esq","date": "2020-03-06","status": "renewal","activity": 33,"representative": {"name": "Amy Elsner","image": "amyelsner.png"}},
-        {"id": 1364,"name": "Pete Dubaldi","country": {"name": "Bolivia","code": "bo"},"company": "Womack \u0026 Galich","date": "2015-11-22","status": "unqualified","activity": 31,"representative": {"name": "Anna Fali","image": "annafali.png"}},
-        {"id": 1365,"name": "Linn Paa","country": {"name": "Bolivia","code": "bo"},"company": "Valerie \u0026 Company","date": "2015-08-12","status": "unqualified","activity": 26,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
-        {"id": 1366,"name": "Paris Wide","country": {"name": "Uruguay","code": "uy"},"company": "Gehring Pumps Inc","date": "2018-10-21","status": "proposal","activity": 90,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
-        {"id": 1367,"name": "Wynell Dorshorst","country": {"name": "Romania","code": "ro"},"company": "Haehnel, Craig W Esq","date": "2018-05-10","status": "new","activity": 60,"representative": {"name": "Amy Elsner","image": "amyelsner.png"}},
-        {"id": 1368,"name": "Quentin Birkner","country": {"name": "Senegal","code": "sn"},"company": "Spoor Behrins Campbell \u0026 Young","date": "2019-02-03","status": "unqualified","activity": 68,"representative": {"name": "Anna Fali","image": "annafali.png"}},
-        {"id": 1369,"name": "Regenia Kannady","country": {"name": "Portugal","code": "pt"},"company": "Ken Jeter Store Equipment Inc","date": "2018-07-13","status": "new","activity": 74,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
-        {"id": 1370,"name": "Sheron Louissant","country": {"name": "France","code": "fr"},"company": "Potter, Brenda J Cpa","date": "2017-01-04","status": "qualified","activity": 86,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
-        {"id": 1371,"name": "Izetta Funnell","country": {"name": "Hong Kong","code": "hk"},"company": "Baird Kurtz \u0026 Dobson","date": "2019-11-05","status": "new","activity": 67,"representative": {"name": "Anna Fali","image": "annafali.png"}},
-        {"id": 1372,"name": "Rodolfo Butzen","country": {"name": "Taiwan","code": "tw"},"company": "Minor, Cynthia A Esq","date": "2020-09-25","status": "proposal","activity": 17,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
-        {"id": 1373,"name": "Zona Colla","country": {"name": "Switzerland","code": "ch"},"company": "Solove, Robert A Esq","date": "2020-10-08","status": "negotiation","activity": 64,"representative": {"name": "Anna Fali","image": "annafali.png"}},
-        {"id": 1374,"name": "Serina Zagen","country": {"name": "Paraguay","code": "py"},"company": "Mark Ii Imports Inc","date": "2018-07-14","status": "negotiation","activity": 46,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
-        {"id": 1375,"name": "Paz Sahagun","country": {"name": "Colombia","code": "co"},"company": "White Sign Div Ctrl Equip Co","date": "2018-03-23","status": "negotiation","activity": 49,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
-        {"id": 1376,"name": "Markus Lukasik","country": {"name": "Burkina Faso","code": "bf"},"company": "M \u0026 M Store Fixtures Co Inc","date": "2018-03-21","status": "negotiation","activity": 23,"representative": {"name": "Anna Fali","image": "annafali.png"}},
-        {"id": 1377,"name": "Jaclyn Bachman","country": {"name": "Slovakia","code": "sk"},"company": "Judah Caster \u0026 Wheel Co","date": "2020-10-20","status": "new","activity": 10,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
-        {"id": 1378,"name": "Cyril Daufeldt","country": {"name": "India","code": "in"},"company": "Galaxy International Inc","date": "2019-02-11","status": "qualified","activity": 79,"representative": {"name": "Amy Elsner","image": "amyelsner.png"}},
-        {"id": 1379,"name": "Gayla Schnitzler","country": {"name": "Brazil","code": "br"},"company": "Sigma Corp Of America","date": "2017-09-15","status": "new","activity": 14,"representative": {"name": "Amy Elsner","image": "amyelsner.png"}},
-        {"id": 1380,"name": "Erick Nievas","country": {"name": "Argentina","code": "ar"},"company": "Soward, Anne Esq","date": "2018-10-07","status": "proposal","activity": 28,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
-        {"id": 1381,"name": "Jennie Drymon","country": {"name": "Egypt","code": "eg"},"company": "Osborne, Michelle M Esq","date": "2016-09-14","status": "negotiation","activity": 80,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
-        {"id": 1382,"name": "Mitsue Scipione","country": {"name": "Ecuador","code": "ec"},"company": "Students In Free Entrprs Natl","date": "2019-07-28","status": "qualified","activity": 24,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
-        {"id": 1383,"name": "Ciara Ventura","country": {"name": "Sweden","code": "se"},"company": "Johnson, Robert M Esq","date": "2018-04-02","status": "renewal","activity": 24,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
-        {"id": 1384,"name": "Galen Cantres","country": {"name": "Saudi Arabia","code": "sa"},"company": "Del Charro Apartments","date": "2020-02-16","status": "unqualified","activity": 61,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
-        {"id": 1385,"name": "Truman Feichtner","country": {"name": "Iceland","code": "is"},"company": "Legal Search Inc","date": "2019-10-16","status": "renewal","activity": 98,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
-        {"id": 1386,"name": "Gail Kitty","country": {"name": "Pakistan","code": "pk"},"company": "Service Supply Co Inc","date": "2020-01-15","status": "negotiation","activity": 67,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
-        {"id": 1387,"name": "Dalene Schoeneck","country": {"name": "Latvia","code": "lv"},"company": "Sameshima, Douglas J Esq","date": "2019-11-27","status": "proposal","activity": 85,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
-        {"id": 1388,"name": "Gertude Witten","country": {"name": "Morocco","code": "ma"},"company": "Thompson, John Randolph Jr","date": "2017-08-13","status": "proposal","activity": 40,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
-        {"id": 1389,"name": "Lizbeth Kohl","country": {"name": "Serbia","code": "rs"},"company": "E T Balancing Co Inc","date": "2019-04-20","status": "qualified","activity": 57,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
-        {"id": 1390,"name": "Glenn Berray","country": {"name": "Poland","code": "pl"},"company": "Griswold, John E Esq","date": "2017-08-13","status": "negotiation","activity": 68,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
-        {"id": 1391,"name": "Lashandra Klang","country": {"name": "Bulgaria","code": "bg"},"company": "Acqua Group","date": "2016-06-08","status": "negotiation","activity": 32,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
-        {"id": 1392,"name": "Lenna Newville","country": {"name": "Venezuela","code": "ve"},"company": "Brooks, Morris J Jr","date": "2020-09-12","status": "qualified","activity": 82,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
-        {"id": 1393,"name": "Laurel Pagliuca","country": {"name": "Russia","code": "ru"},"company": "Printing Images Corp","date": "2017-05-26","status": "unqualified","activity": 21,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
-        {"id": 1394,"name": "Mireya Frerking","country": {"name": "Belarus","code": "by"},"company": "Roberts Supply Co Inc","date": "2017-04-21","status": "renewal","activity": 54,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
-        {"id": 1395,"name": "Annelle Tagala","country": {"name": "Colombia","code": "co"},"company": "Vico Products Mfg Co","date": "2017-10-02","status": "proposal","activity": 53,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
-        {"id": 1396,"name": "Dean Ketelsen","country": {"name": "Ivory Coast","code": "ci"},"company": "J M Custom Design Millwork","date": "2019-07-25","status": "negotiation","activity": 98,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
-        {"id": 1397,"name": "Levi Munis","country": {"name": "Pakistan","code": "pk"},"company": "Farrell \u0026 Johnson Office Equip","date": "2017-06-24","status": "proposal","activity": 39,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
-        {"id": 1398,"name": "Sylvie Ryser","country": {"name": "India","code": "in"},"company": "Millers Market \u0026 Deli","date": "2016-02-23","status": "unqualified","activity": 89,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
-        {"id": 1399,"name": "Sharee Maile","country": {"name": "Ireland","code": "ie"},"company": "Holiday Inn Naperville","date": "2020-07-17","status": "renewal","activity": 0,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
-        {"id": 1400,"name": "Cordelia Storment","country": {"name": "Guatemala","code": "gt"},"company": "Burrows, Jon H Esq","date": "2020-02-17","status": "negotiation","activity": 45,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
-        {"id": 1401,"name": "Mollie Mcdoniel","country": {"name": "Vietnam","code": "vn"},"company": "Dock Seal Specialty","date": "2017-08-13","status": "unqualified","activity": 59,"representative": {"name": "Amy Elsner","image": "amyelsner.png"}},
-        {"id": 1402,"name": "Brett Mccullan","country": {"name": "Senegal","code": "sn"},"company": "Five Star Limousines Of Tx Inc","date": "2015-05-21","status": "qualified","activity": 9,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
-        {"id": 1403,"name": "Teddy Pedrozo","country": {"name": "Burkina Faso","code": "bf"},"company": "Barkan, Neal J Esq","date": "2019-02-19","status": "proposal","activity": 38,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
-        {"id": 1404,"name": "Tasia Andreason","country": {"name": "Venezuela","code": "ve"},"company": "Campbell, Robert A","date": "2016-03-06","status": "renewal","activity": 25,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
-        {"id": 1405,"name": "Hubert Walthall","country": {"name": "Mexico","code": "mx"},"company": "Dee, Deanna","date": "2020-12-19","status": "renewal","activity": 32,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
-        {"id": 1406,"name": "Arthur Farrow","country": {"name": "Brazil","code": "br"},"company": "Young, Timothy L Esq","date": "2019-02-05","status": "proposal","activity": 55,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
-        {"id": 1407,"name": "Vilma Berlanga","country": {"name": "Tunisia","code": "tn"},"company": "Wells, D Fred Esq","date": "2016-02-09","status": "unqualified","activity": 26,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
-        {"id": 1408,"name": "Billye Miro","country": {"name": "Hungary","code": "hu"},"company": "Gray, Francine H Esq","date": "2015-09-05","status": "new","activity": 70,"representative": {"name": "Anna Fali","image": "annafali.png"}},
-        {"id": 1409,"name": "Glenna Slayton","country": {"name": "Iceland","code": "is"},"company": "Toledo Iv Care","date": "2016-03-10","status": "unqualified","activity": 86,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
-        {"id": 1410,"name": "Mitzie Hudnall","country": {"name": "Iceland","code": "is"},"company": "Cangro Transmission Co","date": "2020-05-04","status": "new","activity": 19,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
-        {"id": 1411,"name": "Bernardine Rodefer","country": {"name": "Switzerland","code": "ch"},"company": "Sat Poly Inc","date": "2020-10-19","status": "proposal","activity": 69,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
-        {"id": 1412,"name": "Staci Schmaltz","country": {"name": "Iceland","code": "is"},"company": "Midwest Contracting \u0026 Mfg Inc","date": "2018-03-14","status": "unqualified","activity": 81,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
-        {"id": 1413,"name": "Nichelle Meteer","country": {"name": "Denmark","code": "dk"},"company": "Print Doctor","date": "2016-09-23","status": "renewal","activity": 39,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
-        {"id": 1414,"name": "Janine Rhoden","country": {"name": "Nigeria","code": "ng"},"company": "Nordic Group Inc","date": "2018-08-13","status": "qualified","activity": 95,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
-        {"id": 1415,"name": "Ettie Hoopengardner","country": {"name": "Switzerland","code": "ch"},"company": "Jackson Millwork Co","date": "2017-07-24","status": "renewal","activity": 23,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
-        {"id": 1416,"name": "Eden Jayson","country": {"name": "Sweden","code": "se"},"company": "Harris Corporation","date": "2018-03-15","status": "renewal","activity": 9,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
-        {"id": 1417,"name": "Lynelle Auber","country": {"name": "Netherlands","code": "nl"},"company": "United Cerebral Palsy Of Ne Pa","date": "2020-12-11","status": "proposal","activity": 0,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
-        {"id": 1418,"name": "Merissa Tomblin","country": {"name": "Jamaica","code": "jm"},"company": "One Day Surgery Center Inc","date": "2018-03-05","status": "new","activity": 50,"representative": {"name": "Anna Fali","image": "annafali.png"}},
-        {"id": 1419,"name": "Golda Kaniecki","country": {"name": "Burkina Faso","code": "bf"},"company": "Calaveras Prospect","date": "2019-04-17","status": "negotiation","activity": 91,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
-        {"id": 1420,"name": "Catarina Gleich","country": {"name": "Malaysia","code": "my"},"company": "Terk, Robert E Esq","date": "2017-01-26","status": "unqualified","activity": 12,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
-        {"id": 1421,"name": "Virgie Kiel","country": {"name": "Latvia","code": "lv"},"company": "Cullen, Terrence P Esq","date": "2016-06-28","status": "renewal","activity": 89,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
-        {"id": 1422,"name": "Jolene Ostolaza","country": {"name": "Puerto Rico","code": "pr"},"company": "Central Die Casting Mfg Co Inc","date": "2016-08-08","status": "negotiation","activity": 85,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
-        {"id": 1423,"name": "Keneth Borgman","country": {"name": "Qatar","code": "qa"},"company": "Centerline Engineering","date": "2019-02-04","status": "unqualified","activity": 41,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
-        {"id": 1424,"name": "Rikki Nayar","country": {"name": "Norway","code": "no"},"company": "Targan \u0026 Kievit Pa","date": "2017-03-06","status": "negotiation","activity": 47,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
-        {"id": 1425,"name": "Elke Sengbusch","country": {"name": "Canada","code": "ca"},"company": "Riley Riper Hollin \u0026 Colagreco","date": "2019-05-28","status": "renewal","activity": 76,"representative": {"name": "Anna Fali","image": "annafali.png"}},
-        {"id": 1426,"name": "Hoa Sarao","country": {"name": "Sweden","code": "se"},"company": "Kaplan, Joel S Esq","date": "2020-08-13","status": "negotiation","activity": 0,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
-        {"id": 1427,"name": "Trinidad Mcrae","country": {"name": "Burkina Faso","code": "bf"},"company": "Water Office","date": "2020-12-26","status": "renewal","activity": 76,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
-        {"id": 1428,"name": "Mari Lueckenbach","country": {"name": "Cuba","code": "cu"},"company": "Westbrooks, Nelson E Jr","date": "2017-10-27","status": "new","activity": 34,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
-        {"id": 1429,"name": "Selma Husser","country": {"name": "Morocco","code": "ma"},"company": "Armon Communications","date": "2018-02-16","status": "proposal","activity": 84,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
-        {"id": 1430,"name": "Antione Onofrio","country": {"name": "Taiwan","code": "tw"},"company": "Jacobs \u0026 Gerber Inc","date": "2017-11-07","status": "negotiation","activity": 37,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
-        {"id": 1431,"name": "Luisa Jurney","country": {"name": "Canada","code": "ca"},"company": "Forest Fire Laboratory","date": "2018-06-12","status": "unqualified","activity": 96,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
-        {"id": 1432,"name": "Clorinda Heimann","country": {"name": "Israel","code": "il"},"company": "Haughey, Charles Jr","date": "2016-11-03","status": "proposal","activity": 63,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
-        {"id": 1433,"name": "Dick Wenzinger","country": {"name": "Mexico","code": "mx"},"company": "Wheaton Plastic Products","date": "2017-04-05","status": "negotiation","activity": 92,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
-        {"id": 1434,"name": "Ahmed Angalich","country": {"name": "Australia","code": "au"},"company": "Reese Plastics","date": "2018-11-20","status": "unqualified","activity": 83,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
-        {"id": 1435,"name": "Iluminada Ohms","country": {"name": "Croatia","code": "hr"},"company": "Nazette Marner Good Wendt","date": "2015-08-18","status": "proposal","activity": 66,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
-        {"id": 1436,"name": "Joanna Leinenbach","country": {"name": "Thailand","code": "th"},"company": "Levinson Axelrod Wheaton","date": "2016-02-11","status": "proposal","activity": 64,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
-        {"id": 1437,"name": "Caprice Suell","country": {"name": "Algeria","code": "dz"},"company": "Egnor, W Dan Esq","date": "2018-07-09","status": "unqualified","activity": 99,"representative": {"name": "Amy Elsner","image": "amyelsner.png"}},
-        {"id": 1438,"name": "Stephane Myricks","country": {"name": "Honduras","code": "hn"},"company": "Portland Central Thriftlodge","date": "2018-05-28","status": "renewal","activity": 51,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
-        {"id": 1439,"name": "Quentin Swayze","country": {"name": "Tunisia","code": "tn"},"company": "Ulbrich Trucking","date": "2019-02-11","status": "negotiation","activity": 37,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
-        {"id": 1440,"name": "Annmarie Castros","country": {"name": "Jamaica","code": "jm"},"company": "Tipiak Inc","date": "2015-08-24","status": "qualified","activity": 46,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
-        {"id": 1441,"name": "Shonda Greenbush","country": {"name": "Costa Rica","code": "cr"},"company": "Saint George Well Drilling","date": "2018-06-01","status": "negotiation","activity": 16,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
-        {"id": 1442,"name": "Cecil Lapage","country": {"name": "Malaysia","code": "my"},"company": "Hawkes, Douglas D","date": "2018-11-09","status": "qualified","activity": 43,"representative": {"name": "Amy Elsner","image": "amyelsner.png"}},
-        {"id": 1443,"name": "Jeanice Claucherty","country": {"name": "Lithuania","code": "lt"},"company": "Accurel Systems Intrntl Corp","date": "2016-06-02","status": "qualified","activity": 48,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
-        {"id": 1444,"name": "Josphine Villanueva","country": {"name": "Japan","code": "jp"},"company": "Santa Cruz Community Internet","date": "2019-11-08","status": "unqualified","activity": 39,"representative": {"name": "Amy Elsner","image": "amyelsner.png"}},
-        {"id": 1445,"name": "Daniel Perruzza","country": {"name": "Malaysia","code": "my"},"company": "Gersh \u0026 Danielson","date": "2017-09-24","status": "renewal","activity": 86,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
-        {"id": 1446,"name": "Cassi Wildfong","country": {"name": "Tunisia","code": "tn"},"company": "Cobb, James O Esq","date": "2015-09-08","status": "qualified","activity": 85,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
-        {"id": 1447,"name": "Britt Galam","country": {"name": "Poland","code": "pl"},"company": "Wheatley Trucking Company","date": "2020-10-26","status": "new","activity": 69,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
-        {"id": 1448,"name": "Adell Lipkin","country": {"name": "Saudi Arabia","code": "sa"},"company": "Systems Graph Inc Ab Dick Dlr","date": "2017-05-09","status": "unqualified","activity": 92,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
-        {"id": 1449,"name": "Jacqueline Rowling","country": {"name": "Qatar","code": "qa"},"company": "John Hancock Mutl Life Ins Co","date": "2019-06-28","status": "negotiation","activity": 79,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
-        {"id": 1450,"name": "Lonny Weglarz","country": {"name": "Chile","code": "cl"},"company": "History Division Of State","date": "2016-08-12","status": "new","activity": 49,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
-        {"id": 1451,"name": "Lonna Diestel","country": {"name": "Philippines","code": "ph"},"company": "Dimmock, Thomas J Esq","date": "2017-02-10","status": "proposal","activity": 9,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
-        {"id": 1452,"name": "Cristal Samara","country": {"name": "Australia","code": "au"},"company": "Intermed Inc","date": "2016-08-17","status": "qualified","activity": 99,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
-        {"id": 1453,"name": "Kenneth Grenet","country": {"name": "Croatia","code": "hr"},"company": "Bank Of New York","date": "2020-07-24","status": "negotiation","activity": 78,"representative": {"name": "Anna Fali","image": "annafali.png"}},
-        {"id": 1454,"name": "Elli Mclaird","country": {"name": "Switzerland","code": "ch"},"company": "Sportmaster Intrnatl","date": "2017-06-10","status": "qualified","activity": 61,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
-        {"id": 1455,"name": "Alline Jeanty","country": {"name": "Denmark","code": "dk"},"company": "W W John Holden Inc","date": "2015-12-08","status": "renewal","activity": 74,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
-        {"id": 1456,"name": "Sharika Eanes","country": {"name": "Chile","code": "cl"},"company": "Maccani \u0026 Delp","date": "2018-08-16","status": "qualified","activity": 14,"representative": {"name": "Amy Elsner","image": "amyelsner.png"}},
-        {"id": 1457,"name": "Nu Mcnease","country": {"name": "Pakistan","code": "pk"},"company": "Amazonia Film Project","date": "2018-07-03","status": "negotiation","activity": 47,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
-        {"id": 1458,"name": "Daniela Comnick","country": {"name": "Tunisia","code": "tn"},"company": "Water \u0026 Sewer Department","date": "2017-07-07","status": "negotiation","activity": 31,"representative": {"name": "Anna Fali","image": "annafali.png"}},
-        {"id": 1459,"name": "Cecilia Colaizzo","country": {"name": "Costa Rica","code": "cr"},"company": "Switchcraft Inc","date": "2019-06-08","status": "proposal","activity": 21,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
-        {"id": 1460,"name": "Leslie Threets","country": {"name": "Sweden","code": "se"},"company": "C W D C Metal Fabricators","date": "2016-11-26","status": "unqualified","activity": 50,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
-        {"id": 1461,"name": "Nan Koppinger","country": {"name": "Norway","code": "no"},"company": "Shimotani, Grace T","date": "2020-11-15","status": "proposal","activity": 94,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
-        {"id": 1462,"name": "Izetta Dewar","country": {"name": "Cuba","code": "cu"},"company": "Lisatoni, Jean Esq","date": "2019-11-22","status": "renewal","activity": 41,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
-        {"id": 1463,"name": "Tegan Arceo","country": {"name": "Iceland","code": "is"},"company": "Ceramic Tile Sales Inc","date": "2016-08-07","status": "new","activity": 79,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
-        {"id": 1464,"name": "Ruthann Keener","country": {"name": "Morocco","code": "ma"},"company": "Maiden Craft Inc","date": "2019-04-25","status": "negotiation","activity": 43,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
-        {"id": 1465,"name": "Joni Breland","country": {"name": "Uruguay","code": "uy"},"company": "Carriage House Cllsn Rpr Inc","date": "2018-07-20","status": "new","activity": 18,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
-        {"id": 1466,"name": "Vi Rentfro","country": {"name": "Malaysia","code": "my"},"company": "Video Workshop","date": "2018-10-01","status": "negotiation","activity": 99,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
-        {"id": 1467,"name": "Colette Kardas","country": {"name": "Honduras","code": "hn"},"company": "Fresno Tile Center Inc","date": "2017-08-22","status": "new","activity": 14,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
-        {"id": 1468,"name": "Malcolm Tromblay","country": {"name": "Uruguay","code": "uy"},"company": "Versatile Sash \u0026 Woodwork","date": "2019-11-25","status": "renewal","activity": 23,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
-        {"id": 1469,"name": "Ryan Harnos","country": {"name": "Paraguay","code": "py"},"company": "Warner Electric Brk \u0026 Cltch Co","date": "2019-02-12","status": "qualified","activity": 71,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
-        {"id": 1470,"name": "Jess Chaffins","country": {"name": "Belarus","code": "by"},"company": "New York Public Library","date": "2017-02-12","status": "qualified","activity": 91,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
-        {"id": 1471,"name": "Sharen Bourbon","country": {"name": "Saudi Arabia","code": "sa"},"company": "Mccaleb, John A Esq","date": "2017-06-13","status": "renewal","activity": 35,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
-        {"id": 1472,"name": "Nickolas Juvera","country": {"name": "Finland","code": "fi"},"company": "United Oil Co Inc","date": "2019-01-06","status": "negotiation","activity": 14,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
-        {"id": 1473,"name": "Gary Nunlee","country": {"name": "Turkey","code": "tr"},"company": "Irving Foot Center","date": "2015-07-22","status": "renewal","activity": 72,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
-        {"id": 1474,"name": "Diane Devreese","country": {"name": "Bolivia","code": "bo"},"company": "Acme Supply Co","date": "2018-05-13","status": "renewal","activity": 78,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
-        {"id": 1475,"name": "Roslyn Chavous","country": {"name": "Israel","code": "il"},"company": "Mcrae, James L","date": "2018-03-20","status": "proposal","activity": 45,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
-        {"id": 1476,"name": "Glory Schieler","country": {"name": "Italy","code": "it"},"company": "Mcgraths Seafood","date": "2017-05-13","status": "proposal","activity": 34,"representative": {"name": "Anna Fali","image": "annafali.png"}},
-        {"id": 1477,"name": "Rasheeda Sayaphon","country": {"name": "Latvia","code": "lv"},"company": "Kummerer, J Michael Esq","date": "2017-02-21","status": "proposal","activity": 12,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
-        {"id": 1478,"name": "Alpha Palaia","country": {"name": "Costa Rica","code": "cr"},"company": "Stoffer, James M Jr","date": "2017-07-21","status": "renewal","activity": 4,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
-        {"id": 1479,"name": "Refugia Jacobos","country": {"name": "China","code": "cn"},"company": "North Central Fl Sfty Cncl","date": "2020-11-25","status": "negotiation","activity": 18,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
-        {"id": 1480,"name": "Shawnda Yori","country": {"name": "Luxembourg","code": "lu"},"company": "Fiorucci Foods Usa Inc","date": "2018-05-09","status": "unqualified","activity": 11,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
-        {"id": 1481,"name": "Mona Delasancha","country": {"name": "Hong Kong","code": "hk"},"company": "Sign All","date": "2017-10-06","status": "renewal","activity": 61,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
-        {"id": 1482,"name": "Gilma Liukko","country": {"name": "Morocco","code": "ma"},"company": "Sammys Steak Den","date": "2018-10-06","status": "unqualified","activity": 34,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
-        {"id": 1483,"name": "Janey Gabisi","country": {"name": "Israel","code": "il"},"company": "Dobscha, Stephen F Esq","date": "2019-05-22","status": "unqualified","activity": 38,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
-        {"id": 1484,"name": "Lili Paskin","country": {"name": "Costa Rica","code": "cr"},"company": "Morgan Custom Homes","date": "2018-06-11","status": "unqualified","activity": 69,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
-        {"id": 1485,"name": "Loren Asar","country": {"name": "Italy","code": "it"},"company": "Olsen Payne \u0026 Company","date": "2017-12-11","status": "unqualified","activity": 16,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
-        {"id": 1486,"name": "Dorothy Chesterfield","country": {"name": "Spain","code": "es"},"company": "Cowan \u0026 Kelly","date": "2015-08-11","status": "renewal","activity": 31,"representative": {"name": "Anna Fali","image": "annafali.png"}},
-        {"id": 1487,"name": "Gail Similton","country": {"name": "Malaysia","code": "my"},"company": "Johnson, Wes Esq","date": "2016-08-10","status": "qualified","activity": 63,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
-        {"id": 1488,"name": "Catalina Tillotson","country": {"name": "Pakistan","code": "pk"},"company": "Icn Pharmaceuticals Inc","date": "2018-08-04","status": "negotiation","activity": 13,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
-        {"id": 1489,"name": "Lawrence Lorens","country": {"name": "Egypt","code": "eg"},"company": "New England Sec Equip Co Inc","date": "2020-04-15","status": "negotiation","activity": 82,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
-        {"id": 1490,"name": "Carlee Boulter","country": {"name": "Vietnam","code": "vn"},"company": "Tippett, Troy M Ii","date": "2016-09-22","status": "renewal","activity": 71,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
-        {"id": 1491,"name": "Thaddeus Ankeny","country": {"name": "Qatar","code": "qa"},"company": "Atc Contracting","date": "2015-03-08","status": "unqualified","activity": 78,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
-        {"id": 1492,"name": "Jovita Oles","country": {"name": "Sweden","code": "se"},"company": "Pagano, Philip G Esq","date": "2019-07-18","status": "negotiation","activity": 42,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
-        {"id": 1493,"name": "Alesia Hixenbaugh","country": {"name": "Thailand","code": "th"},"company": "Kwikprint","date": "2017-07-24","status": "negotiation","activity": 23,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
-        {"id": 1494,"name": "Lai Harabedian","country": {"name": "Serbia","code": "rs"},"company": "Buergi \u0026 Madden Scale","date": "2018-11-11","status": "new","activity": 28,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
-        {"id": 1495,"name": "Brittni Gillaspie","country": {"name": "Senegal","code": "sn"},"company": "Inner Label","date": "2019-11-23","status": "renewal","activity": 14,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
-        {"id": 1496,"name": "Raylene Kampa","country": {"name": "Belgium","code": "be"},"company": "Hermar Inc","date": "2020-04-22","status": "unqualified","activity": 65,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
-        {"id": 1497,"name": "Flo Bookamer","country": {"name": "Argentina","code": "ar"},"company": "Simonton Howe \u0026 Schneider Pc","date": "2020-08-10","status": "unqualified","activity": 30,"representative": {"name": "Amy Elsner","image": "amyelsner.png"}},
-        {"id": 1498,"name": "Jani Biddy","country": {"name": "Switzerland","code": "ch"},"company": "Warehouse Office \u0026 Paper Prod","date": "2019-11-07","status": "negotiation","activity": 20,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
-        {"id": 1499,"name": "Chauncey Motley","country": {"name": "Argentina","code": "ar"},"company": "Affiliated With Travelodge","date": "2019-04-23","status": "renewal","activity": 42,"representative": {"name": "Amy Elsner","image": "amyelsner.png"}}
-    ]
+   "data": [
+       {"id": 1000,"name": "James Butt","country": {"name": "Algeria","code": "dz"},"company": "Benton, John B Jr","date": "2015-09-13","status": "unqualified","activity": 17,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
+       {"id": 1001,"name": "Josephine Darakjy","country": {"name": "Egypt","code": "eg"},"company": "Chanay, Jeffrey A Esq","date": "2019-02-09","status": "proposal","activity": 0,"representative": {"name": "Amy Elsner","image": "amyelsner.png"}},
+       {"id": 1002,"name": "Art Venere","country": {"name": "Panama","code": "pa"},"company": "Chemel, James L Cpa","date": "2017-05-13","status": "qualified","activity": 63,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
+       {"id": 1003,"name": "Lenna Paprocki","country": {"name": "Slovenia","code": "si"},"company": "Feltz Printing Service","date": "2020-09-15","status": "new","activity": 37,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
+       {"id": 1004,"name": "Donette Foller","country": {"name": "South Africa","code": "za"},"company": "Printing Dimensions","date": "2016-05-20","status": "proposal","activity": 33,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
+       {"id": 1005,"name": "Simona Morasca","country": {"name": "Egypt","code": "eg"},"company": "Chapman, Ross E Esq","date": "2018-02-16","status": "qualified","activity": 68,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
+       {"id": 1006,"name": "Mitsue Tollner","country": {"name": "Paraguay","code": "py"},"company": "Morlong Associates","date": "2018-02-19","status": "renewal","activity": 54,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
+       {"id": 1007,"name": "Leota Dilliard","country": {"name": "Serbia","code": "rs"},"company": "Commercial Press","date": "2019-08-13","status": "renewal","activity": 69,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
+       {"id": 1008,"name": "Sage Wieser","country": {"name": "Egypt","code": "eg"},"company": "Truhlar And Truhlar Attys","date": "2018-11-21","status": "unqualified","activity": 76,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
+       {"id": 1009,"name": "Kris Marrier","country": {"name": "Mexico","code": "mx"},"company": "King, Christopher A Esq","date": "2015-07-07","status": "proposal","activity": 3,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
+       {"id": 1010,"name": "Minna Amigon","country": {"name": "Romania","code": "ro"},"company": "Dorl, James J Esq","date": "2018-11-07","status": "qualified","activity": 38,"representative": {"name": "Anna Fali","image": "annafali.png"}},
+       {"id": 1011,"name": "Abel Maclead","country": {"name": "Singapore","code": "sg"},"company": "Rangoni Of Florence","date": "2017-03-11","status": "qualified","activity": 87,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
+       {"id": 1012,"name": "Kiley Caldarera","country": {"name": "Serbia","code": "rs"},"company": "Feiner Bros","date": "2015-10-20","status": "unqualified","activity": 80,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
+       {"id": 1013,"name": "Graciela Ruta","country": {"name": "Chile","code": "cl"},"company": "Buckley Miller \u0026 Wright","date": "2016-07-25","status": "negotiation","activity": 59,"representative": {"name": "Amy Elsner","image": "amyelsner.png"}},
+       {"id": 1014,"name": "Cammy Albares","country": {"name": "Philippines","code": "ph"},"company": "Rousseaux, Michael Esq","date": "2019-06-25","status": "new","activity": 90,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
+       {"id": 1015,"name": "Mattie Poquette","country": {"name": "Venezuela","code": "ve"},"company": "Century Communications","date": "2017-12-12","status": "negotiation","activity": 52,"representative": {"name": "Anna Fali","image": "annafali.png"}},
+       {"id": 1016,"name": "Meaghan Garufi","country": {"name": "Malaysia","code": "my"},"company": "Bolton, Wilbur Esq","date": "2018-07-04","status": "unqualified","activity": 31,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
+       {"id": 1017,"name": "Gladys Rim","country": {"name": "Netherlands","code": "nl"},"company": "T M Byxbee Company Pc","date": "2020-02-27","status": "renewal","activity": 48,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
+       {"id": 1018,"name": "Yuki Whobrey","country": {"name": "Israel","code": "il"},"company": "Farmers Insurance Group","date": "2017-12-21","status": "negotiation","activity": 16,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
+       {"id": 1019,"name": "Fletcher Flosi","country": {"name": "Argentina","code": "ar"},"company": "Post Box Services Plus","date": "2016-01-04","status": "renewal","activity": 19,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
+       {"id": 1020,"name": "Bette Nicka","country": {"name": "Paraguay","code": "py"},"company": "Sport En Art","date": "2016-10-21","status": "renewal","activity": 100,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
+       {"id": 1021,"name": "Veronika Inouye","country": {"name": "Ecuador","code": "ec"},"company": "C 4 Network Inc","date": "2017-03-24","status": "renewal","activity": 72,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
+       {"id": 1022,"name": "Willard Kolmetz","country": {"name": "Tunisia","code": "tn"},"company": "Ingalls, Donald R Esq","date": "2017-04-15","status": "renewal","activity": 94,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
+       {"id": 1023,"name": "Maryann Royster","country": {"name": "Belarus","code": "by"},"company": "Franklin, Peter L Esq","date": "2017-03-11","status": "qualified","activity": 56,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
+       {"id": 1024,"name": "Alisha Slusarski","country": {"name": "Iceland","code": "is"},"company": "Wtlz Power 107 Fm","date": "2018-03-27","status": "qualified","activity": 7,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
+       {"id": 1025,"name": "Allene Iturbide","country": {"name": "Italy","code": "it"},"company": "Ledecky, David Esq","date": "2016-02-20","status": "qualified","activity": 1,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
+       {"id": 1026,"name": "Chanel Caudy","country": {"name": "Argentina","code": "ar"},"company": "Professional Image Inc","date": "2018-06-24","status": "new","activity": 26,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
+       {"id": 1027,"name": "Ezekiel Chui","country": {"name": "Ireland","code": "ie"},"company": "Sider, Donald C Esq","date": "2016-09-24","status": "new","activity": 76,"representative": {"name": "Amy Elsner","image": "amyelsner.png"}},
+       {"id": 1028,"name": "Willow Kusko","country": {"name": "Romania","code": "ro"},"company": "U Pull It","date": "2020-04-11","status": "qualified","activity": 7,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
+       {"id": 1029,"name": "Bernardo Figeroa","country": {"name": "Israel","code": "il"},"company": "Clark, Richard Cpa","date": "2018-04-11","status": "renewal","activity": 81,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
+       {"id": 1030,"name": "Ammie Corrio","country": {"name": "Hungary","code": "hu"},"company": "Moskowitz, Barry S","date": "2016-06-11","status": "negotiation","activity": 56,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
+       {"id": 1031,"name": "Francine Vocelka","country": {"name": "Honduras","code": "hn"},"company": "Cascade Realty Advisors Inc","date": "2017-08-02","status": "qualified","activity": 94,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
+       {"id": 1032,"name": "Ernie Stenseth","country": {"name": "Australia","code": "au"},"company": "Knwz Newsradio","date": "2018-06-06","status": "renewal","activity": 68,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
+       {"id": 1033,"name": "Albina Glick","country": {"name": "Ukraine","code": "ua"},"company": "Giampetro, Anthony D","date": "2019-08-08","status": "proposal","activity": 85,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
+       {"id": 1034,"name": "Alishia Sergi","country": {"name": "Qatar","code": "qa"},"company": "Milford Enterprises Inc","date": "2018-05-19","status": "negotiation","activity": 46,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
+       {"id": 1035,"name": "Solange Shinko","country": {"name": "Cameroon","code": "cm"},"company": "Mosocco, Ronald A","date": "2015-02-12","status": "qualified","activity": 32,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
+       {"id": 1036,"name": "Jose Stockham","country": {"name": "Italy","code": "it"},"company": "Tri State Refueler Co","date": "2018-04-25","status": "qualified","activity": 77,"representative": {"name": "Amy Elsner","image": "amyelsner.png"}},
+       {"id": 1037,"name": "Rozella Ostrosky","country": {"name": "Venezuela","code": "ve"},"company": "Parkway Company","date": "2016-02-27","status": "unqualified","activity": 66,"representative": {"name": "Amy Elsner","image": "amyelsner.png"}},
+       {"id": 1038,"name": "Valentine Gillian","country": {"name": "Paraguay","code": "py"},"company": "Fbs Business Finance","date": "2019-09-17","status": "qualified","activity": 25,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
+       {"id": 1039,"name": "Kati Rulapaugh","country": {"name": "Puerto Rico","code": "pr"},"company": "Eder Assocs Consltng Engrs Pc","date": "2016-12-03","status": "renewal","activity": 51,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
+       {"id": 1040,"name": "Youlanda Schemmer","country": {"name": "Bolivia","code": "bo"},"company": "Tri M Tool Inc","date": "2017-12-15","status": "negotiation","activity": 49,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
+       {"id": 1041,"name": "Dyan Oldroyd","country": {"name": "Argentina","code": "ar"},"company": "International Eyelets Inc","date": "2017-02-02","status": "qualified","activity": 5,"representative": {"name": "Amy Elsner","image": "amyelsner.png"}},
+       {"id": 1042,"name": "Roxane Campain","country": {"name": "France","code": "fr"},"company": "Rapid Trading Intl","date": "2018-12-25","status": "unqualified","activity": 100,"representative": {"name": "Anna Fali","image": "annafali.png"}},
+       {"id": 1043,"name": "Lavera Perin","country": {"name": "Vietnam","code": "vn"},"company": "Abc Enterprises Inc","date": "2018-04-10","status": "qualified","activity": 71,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
+       {"id": 1044,"name": "Erick Ferencz","country": {"name": "Belgium","code": "be"},"company": "Cindy Turner Associates","date": "2018-05-06","status": "unqualified","activity": 54,"representative": {"name": "Amy Elsner","image": "amyelsner.png"}},
+       {"id": 1045,"name": "Fatima Saylors","country": {"name": "Canada","code": "ca"},"company": "Stanton, James D Esq","date": "2019-07-10","status": "renewal","activity": 93,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
+       {"id": 1046,"name": "Jina Briddick","country": {"name": "Mexico","code": "mx"},"company": "Grace Pastries Inc","date": "2018-02-19","status": "unqualified","activity": 97,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
+       {"id": 1047,"name": "Kanisha Waycott","country": {"name": "Ecuador","code": "ec"},"company": "Schroer, Gene E Esq","date": "2019-11-27","status": "new","activity": 80,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
+       {"id": 1048,"name": "Emerson Bowley","country": {"name": "Finland","code": "fi"},"company": "Knights Inn","date": "2018-11-24","status": "new","activity": 63,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
+       {"id": 1049,"name": "Blair Malet","country": {"name": "Finland","code": "fi"},"company": "Bollinger Mach Shp \u0026 Shipyard","date": "2018-04-19","status": "new","activity": 92,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
+       {"id": 1050,"name": "Brock Bolognia","country": {"name": "Bolivia","code": "bo"},"company": "Orinda News","date": "2019-09-06","status": "renewal","activity": 72,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
+       {"id": 1051,"name": "Lorrie Nestle","country": {"name": "Germany","code": "de"},"company": "Ballard Spahr Andrews","date": "2018-04-26","status": "renewal","activity": 36,"representative": {"name": "Anna Fali","image": "annafali.png"}},
+       {"id": 1052,"name": "Sabra Uyetake","country": {"name": "Peru","code": "pe"},"company": "Lowy Limousine Service","date": "2018-04-12","status": "new","activity": 31,"representative": {"name": "Amy Elsner","image": "amyelsner.png"}},
+       {"id": 1053,"name": "Marjory Mastella","country": {"name": "Netherlands","code": "nl"},"company": "Vicon Corporation","date": "2018-01-24","status": "negotiation","activity": 89,"representative": {"name": "Anna Fali","image": "annafali.png"}},
+       {"id": 1054,"name": "Karl Klonowski","country": {"name": "Saudi Arabia","code": "sa"},"company": "Rossi, Michael M","date": "2017-04-17","status": "unqualified","activity": 27,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
+       {"id": 1055,"name": "Tonette Wenner","country": {"name": "Australia","code": "au"},"company": "Northwest Publishing","date": "2019-04-14","status": "qualified","activity": 27,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
+       {"id": 1056,"name": "Amber Monarrez","country": {"name": "Sweden","code": "se"},"company": "Branford Wire \u0026 Mfg Co","date": "2019-09-09","status": "new","activity": 79,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
+       {"id": 1057,"name": "Shenika Seewald","country": {"name": "Australia","code": "au"},"company": "East Coast Marketing","date": "2017-02-18","status": "renewal","activity": 39,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
+       {"id": 1058,"name": "Delmy Ahle","country": {"name": "Belgium","code": "be"},"company": "Wye Technologies Inc","date": "2020-10-05","status": "unqualified","activity": 55,"representative": {"name": "Anna Fali","image": "annafali.png"}},
+       {"id": 1059,"name": "Deeanna Juhas","country": {"name": "Sweden","code": "se"},"company": "Healy, George W Iv","date": "2018-09-28","status": "negotiation","activity": 79,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
+       {"id": 1060,"name": "Blondell Pugh","country": {"name": "Ireland","code": "ie"},"company": "Alpenlite Inc","date": "2016-06-16","status": "renewal","activity": 49,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
+       {"id": 1061,"name": "Jamal Vanausdal","country": {"name": "Morocco","code": "ma"},"company": "Hubbard, Bruce Esq","date": "2017-05-25","status": "proposal","activity": 87,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
+       {"id": 1062,"name": "Cecily Hollack","country": {"name": "Bolivia","code": "bo"},"company": "Arthur A Oliver \u0026 Son Inc","date": "2020-05-09","status": "negotiation","activity": 5,"representative": {"name": "Amy Elsner","image": "amyelsner.png"}},
+       {"id": 1063,"name": "Carmelina Lindall","country": {"name": "Puerto Rico","code": "pr"},"company": "George Jessop Carter Jewelers","date": "2019-09-07","status": "qualified","activity": 77,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
+       {"id": 1064,"name": "Maurine Yglesias","country": {"name": "Taiwan","code": "tw"},"company": "Schultz, Thomas C Md","date": "2015-08-10","status": "renewal","activity": 94,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
+       {"id": 1065,"name": "Tawna Buvens","country": {"name": "Indonesia","code": "id"},"company": "H H H Enterprises Inc","date": "2018-03-20","status": "new","activity": 25,"representative": {"name": "Amy Elsner","image": "amyelsner.png"}},
+       {"id": 1066,"name": "Penney Weight","country": {"name": "South Africa","code": "za"},"company": "Hawaiian King Hotel","date": "2020-03-03","status": "qualified","activity": 96,"representative": {"name": "Amy Elsner","image": "amyelsner.png"}},
+       {"id": 1067,"name": "Elly Morocco","country": {"name": "Thailand","code": "th"},"company": "Killion Industries","date": "2018-09-18","status": "qualified","activity": 38,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
+       {"id": 1068,"name": "Ilene Eroman","country": {"name": "Netherlands","code": "nl"},"company": "Robinson, William J Esq","date": "2019-06-08","status": "new","activity": 49,"representative": {"name": "Anna Fali","image": "annafali.png"}},
+       {"id": 1069,"name": "Vallie Mondella","country": {"name": "Latvia","code": "lv"},"company": "Private Properties","date": "2018-12-06","status": "new","activity": 16,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
+       {"id": 1070,"name": "Kallie Blackwood","country": {"name": "Iceland","code": "is"},"company": "Rowley Schlimgen Inc","date": "2017-04-05","status": "unqualified","activity": 25,"representative": {"name": "Amy Elsner","image": "amyelsner.png"}},
+       {"id": 1071,"name": "Johnetta Abdallah","country": {"name": "Netherlands","code": "nl"},"company": "Forging Specialties","date": "2015-02-02","status": "new","activity": 16,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
+       {"id": 1072,"name": "Bobbye Rhym","country": {"name": "Ukraine","code": "ua"},"company": "Smits, Patricia Garity","date": "2018-08-17","status": "qualified","activity": 85,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
+       {"id": 1073,"name": "Micaela Rhymes","country": {"name": "France","code": "fr"},"company": "H Lee Leonard Attorney At Law","date": "2018-09-08","status": "renewal","activity": 92,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
+       {"id": 1074,"name": "Tamar Hoogland","country": {"name": "Guatemala","code": "gt"},"company": "A K Construction Co","date": "2018-11-13","status": "proposal","activity": 22,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
+       {"id": 1075,"name": "Moon Parlato","country": {"name": "Czech Republic","code": "cz"},"company": "Ambelang, Jessica M Md","date": "2019-08-18","status": "renewal","activity": 64,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
+       {"id": 1076,"name": "Laurel Reitler","country": {"name": "United Kingdom","code": "gb"},"company": "Q A Service","date": "2015-04-02","status": "negotiation","activity": 80,"representative": {"name": "Amy Elsner","image": "amyelsner.png"}},
+       {"id": 1077,"name": "Delisa Crupi","country": {"name": "Taiwan","code": "tw"},"company": "Wood \u0026 Whitacre Contractors","date": "2017-09-15","status": "unqualified","activity": 70,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
+       {"id": 1078,"name": "Viva Toelkes","country": {"name": "United States","code": "us"},"company": "Mark Iv Press Ltd","date": "2017-03-27","status": "qualified","activity": 16,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
+       {"id": 1079,"name": "Elza Lipke","country": {"name": "Ireland","code": "ie"},"company": "Museum Of Science \u0026 Industry","date": "2017-06-01","status": "proposal","activity": 90,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
+       {"id": 1080,"name": "Devorah Chickering","country": {"name": "Spain","code": "es"},"company": "Garrison Ind","date": "2017-03-14","status": "proposal","activity": 96,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
+       {"id": 1081,"name": "Timothy Mulqueen","country": {"name": "Netherlands","code": "nl"},"company": "Saronix Nymph Products","date": "2018-07-09","status": "renewal","activity": 77,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
+       {"id": 1082,"name": "Arlette Honeywell","country": {"name": "Panama","code": "pa"},"company": "Smc Inc","date": "2018-09-11","status": "proposal","activity": 46,"representative": {"name": "Amy Elsner","image": "amyelsner.png"}},
+       {"id": 1083,"name": "Dominque Dickerson","country": {"name": "Argentina","code": "ar"},"company": "E A I Electronic Assocs Inc","date": "2017-11-12","status": "qualified","activity": 83,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
+       {"id": 1084,"name": "Lettie Isenhower","country": {"name": "Canada","code": "ca"},"company": "Conte, Christopher A Esq","date": "2016-03-01","status": "qualified","activity": 83,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
+       {"id": 1085,"name": "Myra Munns","country": {"name": "Lithuania","code": "lt"},"company": "Anker Law Office","date": "2016-05-21","status": "unqualified","activity": 49,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
+       {"id": 1086,"name": "Stephaine Barfield","country": {"name": "Belgium","code": "be"},"company": "Beutelschies \u0026 Company","date": "2016-01-22","status": "new","activity": 34,"representative": {"name": "Anna Fali","image": "annafali.png"}},
+       {"id": 1087,"name": "Lai Gato","country": {"name": "Nigeria","code": "ng"},"company": "Fligg, Kenneth I Jr","date": "2016-07-26","status": "unqualified","activity": 64,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
+       {"id": 1088,"name": "Stephen Emigh","country": {"name": "Cuba","code": "cu"},"company": "Sharp, J Daniel Esq","date": "2020-07-24","status": "renewal","activity": 51,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
+       {"id": 1089,"name": "Tyra Shields","country": {"name": "Honduras","code": "hn"},"company": "Assink, Anne H Esq","date": "2019-11-10","status": "negotiation","activity": 11,"representative": {"name": "Anna Fali","image": "annafali.png"}},
+       {"id": 1090,"name": "Tammara Wardrip","country": {"name": "Saudi Arabia","code": "sa"},"company": "Jewel My Shop Inc","date": "2016-06-05","status": "renewal","activity": 64,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
+       {"id": 1091,"name": "Cory Gibes","country": {"name": "Malaysia","code": "my"},"company": "Chinese Translation Resources","date": "2016-02-28","status": "new","activity": 44,"representative": {"name": "Anna Fali","image": "annafali.png"}},
+       {"id": 1092,"name": "Danica Bruschke","country": {"name": "Taiwan","code": "tw"},"company": "Stevens, Charles T","date": "2018-12-13","status": "unqualified","activity": 62,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
+       {"id": 1093,"name": "Wilda Giguere","country": {"name": "Iceland","code": "is"},"company": "Mclaughlin, Luther W Cpa","date": "2017-06-16","status": "new","activity": 79,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
+       {"id": 1094,"name": "Elvera Benimadho","country": {"name": "Malaysia","code": "my"},"company": "Tree Musketeers","date": "2019-02-17","status": "proposal","activity": 50,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
+       {"id": 1095,"name": "Carma Vanheusen","country": {"name": "Turkey","code": "tr"},"company": "Springfield Div Oh Edison Co","date": "2019-11-26","status": "renewal","activity": 84,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
+       {"id": 1096,"name": "Malinda Hochard","country": {"name": "Serbia","code": "rs"},"company": "Logan Memorial Hospital","date": "2016-07-06","status": "new","activity": 88,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
+       {"id": 1097,"name": "Natalie Fern","country": {"name": "Canada","code": "ca"},"company": "Kelly, Charles G Esq","date": "2019-10-02","status": "proposal","activity": 44,"representative": {"name": "Amy Elsner","image": "amyelsner.png"}},
+       {"id": 1098,"name": "Lisha Centini","country": {"name": "Netherlands","code": "nl"},"company": "Industrial Paper Shredders Inc","date": "2018-07-05","status": "new","activity": 7,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
+       {"id": 1099,"name": "Arlene Klusman","country": {"name": "Jamaica","code": "jm"},"company": "Beck Horizon Builders","date": "2018-05-14","status": "proposal","activity": 99,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
+       {"id": 1100,"name": "Alease Buemi","country": {"name": "Costa Rica","code": "cr"},"company": "Porto Cayo At Hawks Cay","date": "2018-03-14","status": "unqualified","activity": 0,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
+       {"id": 1101,"name": "Louisa Cronauer","country": {"name": "Costa Rica","code": "cr"},"company": "Pacific Grove Museum Ntrl Hist","date": "2018-09-23","status": "qualified","activity": 3,"representative": {"name": "Anna Fali","image": "annafali.png"}},
+       {"id": 1102,"name": "Angella Cetta","country": {"name": "Vietnam","code": "vn"},"company": "Bender \u0026 Hatley Pc","date": "2018-04-10","status": "qualified","activity": 88,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
+       {"id": 1103,"name": "Cyndy Goldammer","country": {"name": "Burkina Faso","code": "bf"},"company": "Di Cristina J \u0026 Son","date": "2017-09-18","status": "unqualified","activity": 92,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
+       {"id": 1104,"name": "Rosio Cork","country": {"name": "Singapore","code": "sg"},"company": "Green Goddess","date": "2017-08-19","status": "negotiation","activity": 19,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
+       {"id": 1105,"name": "Celeste Korando","country": {"name": "Costa Rica","code": "cr"},"company": "American Arts \u0026 Graphics","date": "2020-06-18","status": "proposal","activity": 21,"representative": {"name": "Amy Elsner","image": "amyelsner.png"}},
+       {"id": 1106,"name": "Twana Felger","country": {"name": "Croatia","code": "hr"},"company": "Opryland Hotel","date": "2016-11-18","status": "negotiation","activity": 97,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
+       {"id": 1107,"name": "Estrella Samu","country": {"name": "Vietnam","code": "vn"},"company": "Marking Devices Pubg Co","date": "2017-06-25","status": "unqualified","activity": 27,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
+       {"id": 1108,"name": "Donte Kines","country": {"name": "Slovakia","code": "sk"},"company": "W Tc Industries Inc","date": "2019-02-16","status": "new","activity": 35,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
+       {"id": 1109,"name": "Tiffiny Steffensmeier","country": {"name": "Pakistan","code": "pk"},"company": "Whitehall Robbins Labs Divsn","date": "2018-03-11","status": "new","activity": 81,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
+       {"id": 1110,"name": "Edna Miceli","country": {"name": "France","code": "fr"},"company": "Sampler","date": "2017-10-15","status": "renewal","activity": 54,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
+       {"id": 1111,"name": "Sue Kownacki","country": {"name": "Jamaica","code": "jm"},"company": "Juno Chefs Incorporated","date": "2017-03-17","status": "proposal","activity": 31,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
+       {"id": 1112,"name": "Jesusa Shin","country": {"name": "Ukraine","code": "ua"},"company": "Carroccio, A Thomas Esq","date": "2017-04-06","status": "renewal","activity": 28,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
+       {"id": 1113,"name": "Rolland Francescon","country": {"name": "United Kingdom","code": "gb"},"company": "Stanley, Richard L Esq","date": "2019-02-03","status": "qualified","activity": 45,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
+       {"id": 1114,"name": "Pamella Schmierer","country": {"name": "Belgium","code": "be"},"company": "K Cs Cstm Mouldings Windows","date": "2016-09-22","status": "unqualified","activity": 34,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
+       {"id": 1115,"name": "Glory Kulzer","country": {"name": "Croatia","code": "hr"},"company": "Comfort Inn","date": "2017-09-27","status": "unqualified","activity": 36,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
+       {"id": 1116,"name": "Shawna Palaspas","country": {"name": "Estonia","code": "ee"},"company": "Windsor, James L Esq","date": "2017-06-25","status": "unqualified","activity": 69,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
+       {"id": 1117,"name": "Brandon Callaro","country": {"name": "Romania","code": "ro"},"company": "Jackson Shields Yeiser","date": "2016-07-13","status": "proposal","activity": 55,"representative": {"name": "Anna Fali","image": "annafali.png"}},
+       {"id": 1118,"name": "Scarlet Cartan","country": {"name": "Panama","code": "pa"},"company": "Box, J Calvin Esq","date": "2018-09-13","status": "renewal","activity": 1,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
+       {"id": 1119,"name": "Oretha Menter","country": {"name": "Panama","code": "pa"},"company": "Custom Engineering Inc","date": "2017-09-11","status": "renewal","activity": 8,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
+       {"id": 1120,"name": "Ty Smith","country": {"name": "United States","code": "us"},"company": "Bresler Eitel Framg Gllry Ltd","date": "2019-07-06","status": "unqualified","activity": 50,"representative": {"name": "Anna Fali","image": "annafali.png"}},
+       {"id": 1121,"name": "Xuan Rochin","country": {"name": "Colombia","code": "co"},"company": "Carol, Drake Sparks Esq","date": "2018-05-22","status": "proposal","activity": 77,"representative": {"name": "Amy Elsner","image": "amyelsner.png"}},
+       {"id": 1122,"name": "Lindsey Dilello","country": {"name": "Austria","code": "at"},"company": "Biltmore Investors Bank","date": "2017-07-18","status": "renewal","activity": 65,"representative": {"name": "Amy Elsner","image": "amyelsner.png"}},
+       {"id": 1123,"name": "Devora Perez","country": {"name": "Uruguay","code": "uy"},"company": "Desco Equipment Corp","date": "2017-10-09","status": "unqualified","activity": 30,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
+       {"id": 1124,"name": "Herman Demesa","country": {"name": "Paraguay","code": "py"},"company": "Merlin Electric Co","date": "2019-05-23","status": "proposal","activity": 10,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
+       {"id": 1125,"name": "Rory Papasergi","country": {"name": "Egypt","code": "eg"},"company": "Bailey Cntl Co Div Babcock","date": "2019-03-02","status": "qualified","activity": 22,"representative": {"name": "Anna Fali","image": "annafali.png"}},
+       {"id": 1126,"name": "Talia Riopelle","country": {"name": "Guatemala","code": "gt"},"company": "Ford Brothers Wholesale Inc","date": "2017-02-18","status": "new","activity": 69,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
+       {"id": 1127,"name": "Van Shire","country": {"name": "Netherlands","code": "nl"},"company": "Cambridge Inn","date": "2020-05-12","status": "new","activity": 4,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
+       {"id": 1128,"name": "Lucina Lary","country": {"name": "Switzerland","code": "ch"},"company": "Matricciani, Albert J Jr","date": "2019-11-20","status": "negotiation","activity": 11,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
+       {"id": 1129,"name": "Bok Isaacs","country": {"name": "Chile","code": "cl"},"company": "Nelson Hawaiian Ltd","date": "2016-11-10","status": "proposal","activity": 41,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
+       {"id": 1130,"name": "Rolande Spickerman","country": {"name": "Panama","code": "pa"},"company": "Neland Travel Agency","date": "2016-07-11","status": "renewal","activity": 84,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
+       {"id": 1131,"name": "Howard Paulas","country": {"name": "Indonesia","code": "id"},"company": "Asendorf, J Alan Esq","date": "2017-07-17","status": "negotiation","activity": 22,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
+       {"id": 1132,"name": "Kimbery Madarang","country": {"name": "Senegal","code": "sn"},"company": "Silberman, Arthur L Esq","date": "2018-08-19","status": "negotiation","activity": 63,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
+       {"id": 1133,"name": "Thurman Manno","country": {"name": "Colombia","code": "co"},"company": "Honey Bee Breeding Genetics \u0026","date": "2016-05-02","status": "qualified","activity": 47,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
+       {"id": 1134,"name": "Becky Mirafuentes","country": {"name": "Serbia","code": "rs"},"company": "Wells Kravitz Schnitzer","date": "2018-04-13","status": "unqualified","activity": 62,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
+       {"id": 1135,"name": "Beatriz Corrington","country": {"name": "South Africa","code": "za"},"company": "Prohab Rehabilitation Servs","date": "2020-01-04","status": "renewal","activity": 55,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
+       {"id": 1136,"name": "Marti Maybury","country": {"name": "Thailand","code": "th"},"company": "Eldridge, Kristin K Esq","date": "2016-02-05","status": "unqualified","activity": 3,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
+       {"id": 1137,"name": "Nieves Gotter","country": {"name": "Latvia","code": "lv"},"company": "Vlahos, John J Esq","date": "2017-03-12","status": "proposal","activity": 3,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
+       {"id": 1138,"name": "Leatha Hagele","country": {"name": "Ukraine","code": "ua"},"company": "Ninas Indian Grs \u0026 Videos","date": "2019-03-27","status": "unqualified","activity": 67,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
+       {"id": 1139,"name": "Valentin Klimek","country": {"name": "Ivory Coast","code": "ci"},"company": "Schmid, Gayanne K Esq","date": "2019-08-06","status": "unqualified","activity": 14,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
+       {"id": 1140,"name": "Melissa Wiklund","country": {"name": "Japan","code": "jp"},"company": "Moapa Valley Federal Credit Un","date": "2018-03-20","status": "qualified","activity": 8,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
+       {"id": 1141,"name": "Sheridan Zane","country": {"name": "Croatia","code": "hr"},"company": "Kentucky Tennessee Clay Co","date": "2016-02-15","status": "qualified","activity": 17,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
+       {"id": 1142,"name": "Bulah Padilla","country": {"name": "Philippines","code": "ph"},"company": "Admiral Party Rentals \u0026 Sales","date": "2016-02-10","status": "proposal","activity": 58,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
+       {"id": 1143,"name": "Audra Kohnert","country": {"name": "Netherlands","code": "nl"},"company": "Nelson, Karolyn King Esq","date": "2019-07-16","status": "unqualified","activity": 82,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
+       {"id": 1144,"name": "Daren Weirather","country": {"name": "Israel","code": "il"},"company": "Panasystems","date": "2015-07-23","status": "negotiation","activity": 96,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
+       {"id": 1145,"name": "Fernanda Jillson","country": {"name": "Mexico","code": "mx"},"company": "Shank, Edward L Esq","date": "2017-07-02","status": "unqualified","activity": 92,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
+       {"id": 1146,"name": "Gearldine Gellinger","country": {"name": "Egypt","code": "eg"},"company": "Megibow \u0026 Edwards","date": "2019-08-17","status": "proposal","activity": 18,"representative": {"name": "Anna Fali","image": "annafali.png"}},
+       {"id": 1147,"name": "Chau Kitzman","country": {"name": "Paraguay","code": "py"},"company": "Benoff, Edward Esq","date": "2019-07-04","status": "new","activity": 9,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
+       {"id": 1148,"name": "Theola Frey","country": {"name": "Vietnam","code": "vn"},"company": "Woodbridge Free Public Library","date": "2020-03-14","status": "unqualified","activity": 44,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
+       {"id": 1149,"name": "Cheryl Haroldson","country": {"name": "France","code": "fr"},"company": "New York Life John Thune","date": "2018-04-03","status": "new","activity": 55,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
+       {"id": 1150,"name": "Laticia Merced","country": {"name": "Burkina Faso","code": "bf"},"company": "Alinabal Inc","date": "2017-03-04","status": "unqualified","activity": 21,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
+       {"id": 1151,"name": "Carissa Batman","country": {"name": "Greece","code": "gr"},"company": "Poletto, Kim David Esq","date": "2016-05-05","status": "negotiation","activity": 91,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
+       {"id": 1152,"name": "Lezlie Craghead","country": {"name": "Panama","code": "pa"},"company": "Chang, Carolyn Esq","date": "2019-05-28","status": "renewal","activity": 30,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
+       {"id": 1153,"name": "Ozell Shealy","country": {"name": "Pakistan","code": "pk"},"company": "Silver Bros Inc","date": "2016-08-19","status": "proposal","activity": 14,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
+       {"id": 1154,"name": "Arminda Parvis","country": {"name": "Indonesia","code": "id"},"company": "Newtec Inc","date": "2020-02-09","status": "proposal","activity": 77,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
+       {"id": 1155,"name": "Reita Leto","country": {"name": "Belgium","code": "be"},"company": "Creative Business Systems","date": "2020-04-03","status": "unqualified","activity": 58,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
+       {"id": 1156,"name": "Yolando Luczki","country": {"name": "France","code": "fr"},"company": "Dal Tile Corporation","date": "2015-01-27","status": "renewal","activity": 78,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
+       {"id": 1157,"name": "Lizette Stem","country": {"name": "Slovakia","code": "sk"},"company": "Edward S Katz","date": "2018-08-06","status": "new","activity": 67,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
+       {"id": 1158,"name": "Gregoria Pawlowicz","country": {"name": "Egypt","code": "eg"},"company": "Oh My Goodknits Inc","date": "2020-02-20","status": "renewal","activity": 29,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
+       {"id": 1159,"name": "Carin Deleo","country": {"name": "China","code": "cn"},"company": "Redeker, Debbie","date": "2015-05-28","status": "qualified","activity": 13,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
+       {"id": 1160,"name": "Chantell Maynerich","country": {"name": "Estonia","code": "ee"},"company": "Desert Sands Motel","date": "2016-09-05","status": "unqualified","activity": 75,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
+       {"id": 1161,"name": "Dierdre Yum","country": {"name": "Czech Republic","code": "cz"},"company": "Cummins Southern Plains Inc","date": "2016-12-20","status": "negotiation","activity": 1,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
+       {"id": 1162,"name": "Larae Gudroe","country": {"name": "Slovenia","code": "si"},"company": "Lehigh Furn Divsn Lehigh","date": "2015-11-28","status": "unqualified","activity": 13,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
+       {"id": 1163,"name": "Latrice Tolfree","country": {"name": "Jamaica","code": "jm"},"company": "United Van Lines Agent","date": "2018-11-11","status": "renewal","activity": 73,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
+       {"id": 1164,"name": "Kerry Theodorov","country": {"name": "Romania","code": "ro"},"company": "Capitol Reporters","date": "2016-11-05","status": "unqualified","activity": 76,"representative": {"name": "Amy Elsner","image": "amyelsner.png"}},
+       {"id": 1165,"name": "Dorthy Hidvegi","country": {"name": "Poland","code": "pl"},"company": "Kwik Kopy Printing","date": "2020-08-13","status": "qualified","activity": 60,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
+       {"id": 1166,"name": "Fannie Lungren","country": {"name": "Belarus","code": "by"},"company": "Centro Inc","date": "2015-07-06","status": "negotiation","activity": 24,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
+       {"id": 1167,"name": "Evangelina Radde","country": {"name": "Ivory Coast","code": "ci"},"company": "Campbell, Jan Esq","date": "2020-02-25","status": "unqualified","activity": 93,"representative": {"name": "Anna Fali","image": "annafali.png"}},
+       {"id": 1168,"name": "Novella Degroot","country": {"name": "Slovenia","code": "si"},"company": "Evans, C Kelly Esq","date": "2017-12-19","status": "unqualified","activity": 30,"representative": {"name": "Amy Elsner","image": "amyelsner.png"}},
+       {"id": 1169,"name": "Clay Hoa","country": {"name": "Paraguay","code": "py"},"company": "Scat Enterprises","date": "2016-02-22","status": "negotiation","activity": 93,"representative": {"name": "Amy Elsner","image": "amyelsner.png"}},
+       {"id": 1170,"name": "Jennifer Fallick","country": {"name": "Australia","code": "au"},"company": "Nagle, Daniel J Esq","date": "2016-12-24","status": "unqualified","activity": 88,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
+       {"id": 1171,"name": "Irma Wolfgramm","country": {"name": "Belgium","code": "be"},"company": "Serendiquity Bed \u0026 Breakfast","date": "2020-10-18","status": "negotiation","activity": 70,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
+       {"id": 1172,"name": "Eun Coody","country": {"name": "Taiwan","code": "tw"},"company": "Ray Carolyne Realty","date": "2018-02-12","status": "qualified","activity": 61,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
+       {"id": 1173,"name": "Sylvia Cousey","country": {"name": "Ireland","code": "ie"},"company": "Berg, Charles E","date": "2018-06-10","status": "unqualified","activity": 91,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
+       {"id": 1174,"name": "Nana Wrinkles","country": {"name": "Austria","code": "at"},"company": "Ray, Milbern D","date": "2017-04-11","status": "renewal","activity": 98,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
+       {"id": 1175,"name": "Layla Springe","country": {"name": "South Africa","code": "za"},"company": "Chadds Ford Winery","date": "2019-07-27","status": "unqualified","activity": 97,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
+       {"id": 1176,"name": "Joesph Degonia","country": {"name": "Serbia","code": "rs"},"company": "A R Packaging","date": "2020-04-23","status": "renewal","activity": 56,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
+       {"id": 1177,"name": "Annabelle Boord","country": {"name": "Guatemala","code": "gt"},"company": "Corn Popper","date": "2020-09-16","status": "proposal","activity": 76,"representative": {"name": "Anna Fali","image": "annafali.png"}},
+       {"id": 1178,"name": "Stephaine Vinning","country": {"name": "Australia","code": "au"},"company": "Birite Foodservice Distr","date": "2016-05-14","status": "negotiation","activity": 43,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
+       {"id": 1179,"name": "Nelida Sawchuk","country": {"name": "South Africa","code": "za"},"company": "Anchorage Museum Of Hist \u0026 Art","date": "2018-06-22","status": "qualified","activity": 58,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
+       {"id": 1180,"name": "Marguerita Hiatt","country": {"name": "United Kingdom","code": "gb"},"company": "Haber, George D Md","date": "2018-10-25","status": "qualified","activity": 72,"representative": {"name": "Anna Fali","image": "annafali.png"}},
+       {"id": 1181,"name": "Carmela Cookey","country": {"name": "France","code": "fr"},"company": "Royal Pontiac Olds Inc","date": "2018-07-19","status": "proposal","activity": 24,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
+       {"id": 1182,"name": "Junita Brideau","country": {"name": "Indonesia","code": "id"},"company": "Leonards Antiques Inc","date": "2015-03-15","status": "proposal","activity": 86,"representative": {"name": "Anna Fali","image": "annafali.png"}},
+       {"id": 1183,"name": "Claribel Varriano","country": {"name": "Ecuador","code": "ec"},"company": "Meca","date": "2017-04-14","status": "unqualified","activity": 15,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
+       {"id": 1184,"name": "Benton Skursky","country": {"name": "Iceland","code": "is"},"company": "Nercon Engineering \u0026 Mfg Inc","date": "2015-02-19","status": "proposal","activity": 9,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
+       {"id": 1185,"name": "Hillary Skulski","country": {"name": "France","code": "fr"},"company": "Replica I","date": "2016-03-25","status": "unqualified","activity": 82,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
+       {"id": 1186,"name": "Merilyn Bayless","country": {"name": "Jamaica","code": "jm"},"company": "20 20 Printing Inc","date": "2020-10-13","status": "unqualified","activity": 13,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
+       {"id": 1187,"name": "Teri Ennaco","country": {"name": "Pakistan","code": "pk"},"company": "Publishers Group West","date": "2019-12-21","status": "unqualified","activity": 57,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
+       {"id": 1188,"name": "Merlyn Lawler","country": {"name": "Germany","code": "de"},"company": "Nischwitz, Jeffrey L Esq","date": "2016-02-26","status": "renewal","activity": 45,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
+       {"id": 1189,"name": "Georgene Montezuma","country": {"name": "Senegal","code": "sn"},"company": "Payne Blades \u0026 Wellborn Pa","date": "2018-10-11","status": "new","activity": 64,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
+       {"id": 1190,"name": "Jettie Mconnell","country": {"name": "Denmark","code": "dk"},"company": "Coldwell Bnkr Wright Real Est","date": "2015-10-18","status": "negotiation","activity": 74,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
+       {"id": 1191,"name": "Lemuel Latzke","country": {"name": "Colombia","code": "co"},"company": "Computer Repair Service","date": "2016-02-13","status": "proposal","activity": 79,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
+       {"id": 1192,"name": "Melodie Knipp","country": {"name": "Finland","code": "fi"},"company": "Fleetwood Building Block Inc","date": "2018-03-08","status": "negotiation","activity": 19,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
+       {"id": 1193,"name": "Candida Corbley","country": {"name": "Poland","code": "pl"},"company": "Colts Neck Medical Assocs Inc","date": "2017-12-02","status": "negotiation","activity": 11,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
+       {"id": 1194,"name": "Karan Karpin","country": {"name": "Estonia","code": "ee"},"company": "New England Taxidermy","date": "2019-01-07","status": "proposal","activity": 4,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
+       {"id": 1195,"name": "Andra Scheyer","country": {"name": "Romania","code": "ro"},"company": "Ludcke, George O Esq","date": "2016-08-14","status": "qualified","activity": 62,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
+       {"id": 1196,"name": "Felicidad Poullion","country": {"name": "Greece","code": "gr"},"company": "Mccorkle, Tom S Esq","date": "2016-03-05","status": "renewal","activity": 64,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
+       {"id": 1197,"name": "Belen Strassner","country": {"name": "Ivory Coast","code": "ci"},"company": "Eagle Software Inc","date": "2015-12-14","status": "qualified","activity": 91,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
+       {"id": 1198,"name": "Gracia Melnyk","country": {"name": "Costa Rica","code": "cr"},"company": "Juvenile \u0026 Adult Super","date": "2019-06-01","status": "unqualified","activity": 40,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
+       {"id": 1199,"name": "Jolanda Hanafan","country": {"name": "Cameroon","code": "cm"},"company": "Perez, Joseph J Esq","date": "2015-12-09","status": "qualified","activity": 27,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
+       {"id": 1200,"name": "Barrett Toyama","country": {"name": "Thailand","code": "th"},"company": "Case Foundation Co","date": "2019-08-16","status": "new","activity": 82,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
+       {"id": 1201,"name": "Helga Fredicks","country": {"name": "Guatemala","code": "gt"},"company": "Eis Environmental Engrs Inc","date": "2018-06-20","status": "new","activity": 33,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
+       {"id": 1202,"name": "Ashlyn Pinilla","country": {"name": "Japan","code": "jp"},"company": "Art Crafters","date": "2018-04-11","status": "unqualified","activity": 5,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
+       {"id": 1203,"name": "Fausto Agramonte","country": {"name": "Belgium","code": "be"},"company": "Marriott Hotels Resorts Suites","date": "2019-06-25","status": "new","activity": 22,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
+       {"id": 1204,"name": "Ronny Caiafa","country": {"name": "Argentina","code": "ar"},"company": "Remaco Inc","date": "2020-07-21","status": "new","activity": 61,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
+       {"id": 1205,"name": "Marge Limmel","country": {"name": "Cameroon","code": "cm"},"company": "Bjork, Robert D Jr","date": "2015-03-12","status": "unqualified","activity": 90,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
+       {"id": 1206,"name": "Norah Waymire","country": {"name": "United States","code": "us"},"company": "Carmichael, Jeffery L Esq","date": "2019-06-11","status": "renewal","activity": 48,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
+       {"id": 1207,"name": "Aliza Baltimore","country": {"name": "Malaysia","code": "my"},"company": "Andrews, J Robert Esq","date": "2020-11-25","status": "unqualified","activity": 59,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
+       {"id": 1208,"name": "Mozell Pelkowski","country": {"name": "Latvia","code": "lv"},"company": "Winship \u0026 Byrne","date": "2018-04-13","status": "unqualified","activity": 94,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
+       {"id": 1209,"name": "Viola Bitsuie","country": {"name": "Denmark","code": "dk"},"company": "Burton \u0026 Davis","date": "2018-07-07","status": "new","activity": 94,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
+       {"id": 1210,"name": "Franklyn Emard","country": {"name": "Iceland","code": "is"},"company": "Olympic Graphic Arts","date": "2018-02-25","status": "qualified","activity": 95,"representative": {"name": "Anna Fali","image": "annafali.png"}},
+       {"id": 1211,"name": "Willodean Konopacki","country": {"name": "Hong Kong","code": "hk"},"company": "Magnuson","date": "2017-10-03","status": "renewal","activity": 20,"representative": {"name": "Anna Fali","image": "annafali.png"}},
+       {"id": 1212,"name": "Beckie Silvestrini","country": {"name": "Poland","code": "pl"},"company": "A All American Travel Inc","date": "2016-11-26","status": "renewal","activity": 81,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
+       {"id": 1213,"name": "Rebecka Gesick","country": {"name": "Philippines","code": "ph"},"company": "Polykote Inc","date": "2019-06-22","status": "renewal","activity": 45,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
+       {"id": 1214,"name": "Frederica Blunk","country": {"name": "Lithuania","code": "lt"},"company": "Jets Cybernetics","date": "2019-06-07","status": "renewal","activity": 56,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
+       {"id": 1215,"name": "Glen Bartolet","country": {"name": "Germany","code": "de"},"company": "Metlab Testing Services","date": "2015-02-13","status": "proposal","activity": 99,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
+       {"id": 1216,"name": "Freeman Gochal","country": {"name": "Slovenia","code": "si"},"company": "Kellermann, William T Esq","date": "2019-08-27","status": "negotiation","activity": 2,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
+       {"id": 1217,"name": "Vincent Meinerding","country": {"name": "United States","code": "us"},"company": "Arturi, Peter D Esq","date": "2018-06-18","status": "new","activity": 58,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
+       {"id": 1218,"name": "Rima Bevelacqua","country": {"name": "Taiwan","code": "tw"},"company": "Mcauley Mfg Co","date": "2019-05-18","status": "new","activity": 31,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
+       {"id": 1219,"name": "Glendora Sarbacher","country": {"name": "Lithuania","code": "lt"},"company": "Defur Voran Hanley Radcliff","date": "2018-04-21","status": "new","activity": 79,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
+       {"id": 1220,"name": "Avery Steier","country": {"name": "Mexico","code": "mx"},"company": "Dill Dill Carr \u0026 Stonbraker Pc","date": "2017-07-27","status": "proposal","activity": 63,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
+       {"id": 1221,"name": "Cristy Lother","country": {"name": "Burkina Faso","code": "bf"},"company": "Kleensteel","date": "2018-05-19","status": "renewal","activity": 55,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
+       {"id": 1222,"name": "Nicolette Brossart","country": {"name": "Egypt","code": "eg"},"company": "Goulds Pumps Inc Slurry Pump","date": "2015-05-26","status": "new","activity": 25,"representative": {"name": "Anna Fali","image": "annafali.png"}},
+       {"id": 1223,"name": "Tracey Modzelewski","country": {"name": "Denmark","code": "dk"},"company": "Kansas City Insurance Report","date": "2019-07-02","status": "renewal","activity": 4,"representative": {"name": "Anna Fali","image": "annafali.png"}},
+       {"id": 1224,"name": "Virgina Tegarden","country": {"name": "Cameroon","code": "cm"},"company": "Berhanu International Foods","date": "2017-10-09","status": "qualified","activity": 62,"representative": {"name": "Amy Elsner","image": "amyelsner.png"}},
+       {"id": 1225,"name": "Tiera Frankel","country": {"name": "India","code": "in"},"company": "Roland Ashcroft","date": "2018-03-27","status": "unqualified","activity": 90,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
+       {"id": 1226,"name": "Alaine Bergesen","country": {"name": "Peru","code": "pe"},"company": "Hispanic Magazine","date": "2017-08-10","status": "qualified","activity": 34,"representative": {"name": "Anna Fali","image": "annafali.png"}},
+       {"id": 1227,"name": "Earleen Mai","country": {"name": "Italy","code": "it"},"company": "Little Sheet Metal Co","date": "2016-06-22","status": "proposal","activity": 38,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
+       {"id": 1228,"name": "Leonida Gobern","country": {"name": "Cuba","code": "cu"},"company": "Holmes, Armstead J Esq","date": "2020-02-24","status": "renewal","activity": 96,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
+       {"id": 1229,"name": "Ressie Auffrey","country": {"name": "Japan","code": "jp"},"company": "Faw, James C Cpa","date": "2016-10-21","status": "negotiation","activity": 28,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
+       {"id": 1230,"name": "Justine Mugnolo","country": {"name": "Argentina","code": "ar"},"company": "Evans Rule Company","date": "2016-02-21","status": "negotiation","activity": 83,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
+       {"id": 1231,"name": "Eladia Saulter","country": {"name": "Switzerland","code": "ch"},"company": "Tyee Productions Inc","date": "2016-03-10","status": "new","activity": 16,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
+       {"id": 1232,"name": "Chaya Malvin","country": {"name": "Cuba","code": "cu"},"company": "Dunnells \u0026 Duvall","date": "2016-07-22","status": "renewal","activity": 12,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
+       {"id": 1233,"name": "Gwenn Suffield","country": {"name": "Austria","code": "at"},"company": "Deltam Systems Inc","date": "2019-06-23","status": "qualified","activity": 67,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
+       {"id": 1234,"name": "Salena Karpel","country": {"name": "Puerto Rico","code": "pr"},"company": "Hammill Mfg Co","date": "2016-08-02","status": "renewal","activity": 0,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
+       {"id": 1235,"name": "Yoko Fishburne","country": {"name": "Croatia","code": "hr"},"company": "Sams Corner Store","date": "2017-08-06","status": "unqualified","activity": 73,"representative": {"name": "Anna Fali","image": "annafali.png"}},
+       {"id": 1236,"name": "Taryn Moyd","country": {"name": "Serbia","code": "rs"},"company": "Siskin, Mark J Esq","date": "2016-12-18","status": "negotiation","activity": 57,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
+       {"id": 1237,"name": "Katina Polidori","country": {"name": "Nigeria","code": "ng"},"company": "Cape \u0026 Associates Real Estate","date": "2016-08-25","status": "unqualified","activity": 37,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
+       {"id": 1238,"name": "Rickie Plumer","country": {"name": "Turkey","code": "tr"},"company": "Merrill Lynch","date": "2018-11-04","status": "unqualified","activity": 71,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
+       {"id": 1239,"name": "Alex Loader","country": {"name": "Italy","code": "it"},"company": "Sublett, Scott Esq","date": "2016-01-07","status": "unqualified","activity": 22,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
+       {"id": 1240,"name": "Lashon Vizarro","country": {"name": "Ecuador","code": "ec"},"company": "Sentry Signs","date": "2019-08-02","status": "negotiation","activity": 46,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
+       {"id": 1241,"name": "Lauran Burnard","country": {"name": "Czech Republic","code": "cz"},"company": "Professionals Unlimited","date": "2016-04-27","status": "renewal","activity": 30,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
+       {"id": 1242,"name": "Ceola Setter","country": {"name": "Taiwan","code": "tw"},"company": "Southern Steel Shelving Co","date": "2017-05-13","status": "qualified","activity": 43,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
+       {"id": 1243,"name": "My Rantanen","country": {"name": "Philippines","code": "ph"},"company": "Bosco, Paul J","date": "2017-09-11","status": "proposal","activity": 60,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
+       {"id": 1244,"name": "Lorrine Worlds","country": {"name": "Argentina","code": "ar"},"company": "Longo, Nicholas J Esq","date": "2018-05-10","status": "renewal","activity": 51,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
+       {"id": 1245,"name": "Peggie Sturiale","country": {"name": "Malaysia","code": "my"},"company": "Henry County Middle School","date": "2019-11-03","status": "renewal","activity": 41,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
+       {"id": 1246,"name": "Marvel Raymo","country": {"name": "Belgium","code": "be"},"company": "Edison Supply \u0026 Equipment Co","date": "2016-03-08","status": "renewal","activity": 9,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
+       {"id": 1247,"name": "Daron Dinos","country": {"name": "Hungary","code": "hu"},"company": "Wolf, Warren R Esq","date": "2016-03-25","status": "unqualified","activity": 30,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
+       {"id": 1248,"name": "An Fritz","country": {"name": "Netherlands","code": "nl"},"company": "Linguistic Systems Inc","date": "2017-08-04","status": "proposal","activity": 86,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
+       {"id": 1249,"name": "Portia Stimmel","country": {"name": "Australia","code": "au"},"company": "Peace Christian Center","date": "2020-01-13","status": "qualified","activity": 30,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
+       {"id": 1250,"name": "Rhea Aredondo","country": {"name": "Greece","code": "gr"},"company": "Double B Foods Inc","date": "2016-06-19","status": "qualified","activity": 68,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
+       {"id": 1251,"name": "Benedict Sama","country": {"name": "Israel","code": "il"},"company": "Alexander \u0026 Alexander Inc","date": "2018-08-18","status": "negotiation","activity": 79,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
+       {"id": 1252,"name": "Alyce Arias","country": {"name": "Egypt","code": "eg"},"company": "Fairbanks Scales","date": "2018-09-14","status": "new","activity": 77,"representative": {"name": "Anna Fali","image": "annafali.png"}},
+       {"id": 1253,"name": "Heike Berganza","country": {"name": "Bulgaria","code": "bg"},"company": "Cali Sportswear Cutting Dept","date": "2019-01-21","status": "unqualified","activity": 95,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
+       {"id": 1254,"name": "Carey Dopico","country": {"name": "Saudi Arabia","code": "sa"},"company": "Garofani, John Esq","date": "2020-05-25","status": "negotiation","activity": 35,"representative": {"name": "Anna Fali","image": "annafali.png"}},
+       {"id": 1255,"name": "Dottie Hellickson","country": {"name": "Chile","code": "cl"},"company": "Thompson Fabricating Co","date": "2016-02-12","status": "qualified","activity": 7,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
+       {"id": 1256,"name": "Deandrea Hughey","country": {"name": "South Africa","code": "za"},"company": "Century 21 Krall Real Estate","date": "2018-09-26","status": "unqualified","activity": 96,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
+       {"id": 1257,"name": "Kimberlie Duenas","country": {"name": "Bulgaria","code": "bg"},"company": "Mid Contntl Rlty \u0026 Prop Mgmt","date": "2015-07-27","status": "qualified","activity": 96,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
+       {"id": 1258,"name": "Martina Staback","country": {"name": "Luxembourg","code": "lu"},"company": "Ace Signs Inc","date": "2017-02-14","status": "new","activity": 47,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
+       {"id": 1259,"name": "Skye Fillingim","country": {"name": "Belgium","code": "be"},"company": "Rodeway Inn","date": "2017-02-12","status": "new","activity": 86,"representative": {"name": "Anna Fali","image": "annafali.png"}},
+       {"id": 1260,"name": "Jade Farrar","country": {"name": "Mexico","code": "mx"},"company": "Bonnet \u0026 Daughter","date": "2017-02-23","status": "new","activity": 73,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
+       {"id": 1261,"name": "Charlene Hamilton","country": {"name": "India","code": "in"},"company": "Oshins \u0026 Gibbons","date": "2017-09-23","status": "unqualified","activity": 32,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
+       {"id": 1262,"name": "Geoffrey Acey","country": {"name": "Hong Kong","code": "hk"},"company": "Price Business Services","date": "2019-10-11","status": "proposal","activity": 98,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
+       {"id": 1263,"name": "Stevie Westerbeck","country": {"name": "Lithuania","code": "lt"},"company": "Wise, Dennis W Md","date": "2017-08-01","status": "renewal","activity": 57,"representative": {"name": "Amy Elsner","image": "amyelsner.png"}},
+       {"id": 1264,"name": "Pamella Fortino","country": {"name": "Panama","code": "pa"},"company": "Super 8 Motel","date": "2018-09-03","status": "new","activity": 100,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
+       {"id": 1265,"name": "Harrison Haufler","country": {"name": "Malaysia","code": "my"},"company": "John Wagner Associates","date": "2016-08-25","status": "qualified","activity": 85,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
+       {"id": 1266,"name": "Johnna Engelberg","country": {"name": "Thailand","code": "th"},"company": "Thrifty Oil Co","date": "2019-06-02","status": "renewal","activity": 1,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
+       {"id": 1267,"name": "Buddy Cloney","country": {"name": "Hungary","code": "hu"},"company": "Larkfield Photo","date": "2020-05-14","status": "qualified","activity": 9,"representative": {"name": "Anna Fali","image": "annafali.png"}},
+       {"id": 1268,"name": "Dalene Riden","country": {"name": "Bolivia","code": "bo"},"company": "Silverman Planetarium","date": "2019-08-23","status": "renewal","activity": 31,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
+       {"id": 1269,"name": "Jerry Zurcher","country": {"name": "Ukraine","code": "ua"},"company": "J \u0026 F Lumber","date": "2015-05-11","status": "renewal","activity": 52,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
+       {"id": 1270,"name": "Haydee Denooyer","country": {"name": "Ivory Coast","code": "ci"},"company": "Cleaning Station Inc","date": "2016-04-17","status": "qualified","activity": 80,"representative": {"name": "Amy Elsner","image": "amyelsner.png"}},
+       {"id": 1271,"name": "Joseph Cryer","country": {"name": "Philippines","code": "ph"},"company": "Ames Stationers","date": "2019-11-26","status": "qualified","activity": 53,"representative": {"name": "Anna Fali","image": "annafali.png"}},
+       {"id": 1272,"name": "Deonna Kippley","country": {"name": "South Africa","code": "za"},"company": "Midas Muffler Shops","date": "2017-08-26","status": "qualified","activity": 52,"representative": {"name": "Amy Elsner","image": "amyelsner.png"}},
+       {"id": 1273,"name": "Raymon Calvaresi","country": {"name": "South Africa","code": "za"},"company": "Seaboard Securities Inc","date": "2017-07-09","status": "qualified","activity": 45,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
+       {"id": 1274,"name": "Alecia Bubash","country": {"name": "Poland","code": "pl"},"company": "Petersen, James E Esq","date": "2016-05-19","status": "new","activity": 28,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
+       {"id": 1275,"name": "Ma Layous","country": {"name": "Latvia","code": "lv"},"company": "Development Authority","date": "2016-02-11","status": "qualified","activity": 2,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
+       {"id": 1276,"name": "Detra Coyier","country": {"name": "Ivory Coast","code": "ci"},"company": "Schott Fiber Optics Inc","date": "2019-06-05","status": "proposal","activity": 95,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
+       {"id": 1277,"name": "Terrilyn Rodeigues","country": {"name": "Thailand","code": "th"},"company": "Stuart J Agins","date": "2016-08-04","status": "renewal","activity": 35,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
+       {"id": 1278,"name": "Salome Lacovara","country": {"name": "Romania","code": "ro"},"company": "Mitsumi Electronics Corp","date": "2015-06-05","status": "unqualified","activity": 78,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
+       {"id": 1279,"name": "Garry Keetch","country": {"name": "Luxembourg","code": "lu"},"company": "Italian Express Franchise Corp","date": "2015-06-20","status": "unqualified","activity": 86,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
+       {"id": 1280,"name": "Matthew Neither","country": {"name": "United Kingdom","code": "gb"},"company": "American Council On Sci \u0026 Hlth","date": "2018-06-24","status": "qualified","activity": 4,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
+       {"id": 1281,"name": "Theodora Restrepo","country": {"name": "Paraguay","code": "py"},"company": "Kleri, Patricia S Esq","date": "2017-08-15","status": "renewal","activity": 66,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
+       {"id": 1282,"name": "Noah Kalafatis","country": {"name": "Saudi Arabia","code": "sa"},"company": "Twiggs Abrams Blanchard","date": "2020-06-24","status": "negotiation","activity": 35,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
+       {"id": 1283,"name": "Carmen Sweigard","country": {"name": "Bolivia","code": "bo"},"company": "Maui Research \u0026 Technology Pk","date": "2019-08-08","status": "new","activity": 96,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
+       {"id": 1284,"name": "Lavonda Hengel","country": {"name": "Hungary","code": "hu"},"company": "Bradley Nameplate Corp","date": "2019-10-25","status": "negotiation","activity": 48,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
+       {"id": 1285,"name": "Junita Stoltzman","country": {"name": "Turkey","code": "tr"},"company": "Geonex Martel Inc","date": "2015-03-19","status": "proposal","activity": 64,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
+       {"id": 1286,"name": "Herminia Nicolozakes","country": {"name": "Venezuela","code": "ve"},"company": "Sea Island Div Of Fstr Ind Inc","date": "2019-09-09","status": "negotiation","activity": 0,"representative": {"name": "Anna Fali","image": "annafali.png"}},
+       {"id": 1287,"name": "Casie Good","country": {"name": "Japan","code": "jp"},"company": "Papay, Debbie J Esq","date": "2016-11-27","status": "new","activity": 87,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
+       {"id": 1288,"name": "Reena Maisto","country": {"name": "Panama","code": "pa"},"company": "Lane Promotions","date": "2016-08-22","status": "new","activity": 16,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
+       {"id": 1289,"name": "Mirta Mallett","country": {"name": "Singapore","code": "sg"},"company": "Stephen Kennerly Archts Inc Pc","date": "2017-11-27","status": "renewal","activity": 14,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
+       {"id": 1290,"name": "Cathrine Pontoriero","country": {"name": "Finland","code": "fi"},"company": "Business Systems Of Wis Inc","date": "2020-02-07","status": "negotiation","activity": 58,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
+       {"id": 1291,"name": "Filiberto Tawil","country": {"name": "Panama","code": "pa"},"company": "Flash, Elena Salerno Esq","date": "2018-01-28","status": "proposal","activity": 0,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
+       {"id": 1292,"name": "Raul Upthegrove","country": {"name": "Panama","code": "pa"},"company": "Neeley, Gregory W Esq","date": "2019-11-16","status": "renewal","activity": 59,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
+       {"id": 1293,"name": "Sarah Candlish","country": {"name": "Hong Kong","code": "hk"},"company": "Alabama Educational Tv Comm","date": "2019-06-09","status": "proposal","activity": 30,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
+       {"id": 1294,"name": "Lucy Treston","country": {"name": "Jamaica","code": "jm"},"company": "Franz Inc","date": "2017-02-07","status": "proposal","activity": 59,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
+       {"id": 1295,"name": "Judy Aquas","country": {"name": "Romania","code": "ro"},"company": "Plantation Restaurant","date": "2020-09-14","status": "renewal","activity": 86,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
+       {"id": 1296,"name": "Yvonne Tjepkema","country": {"name": "United Kingdom","code": "gb"},"company": "Radio Communications Co","date": "2017-01-06","status": "renewal","activity": 33,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
+       {"id": 1297,"name": "Kayleigh Lace","country": {"name": "Denmark","code": "dk"},"company": "Dentalaw Divsn Hlth Care","date": "2019-11-04","status": "negotiation","activity": 70,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
+       {"id": 1298,"name": "Felix Hirpara","country": {"name": "Panama","code": "pa"},"company": "American Speedy Printing Ctrs","date": "2015-03-13","status": "new","activity": 8,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
+       {"id": 1299,"name": "Tresa Sweely","country": {"name": "Germany","code": "de"},"company": "Grayson, Grant S Esq","date": "2019-12-22","status": "proposal","activity": 22,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
+       {"id": 1300,"name": "Kristeen Turinetti","country": {"name": "Burkina Faso","code": "bf"},"company": "Jeanerette Middle School","date": "2017-09-28","status": "new","activity": 67,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
+       {"id": 1301,"name": "Jenelle Regusters","country": {"name": "Hungary","code": "hu"},"company": "Haavisto, Brian F Esq","date": "2019-07-27","status": "qualified","activity": 13,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
+       {"id": 1302,"name": "Renea Monterrubio","country": {"name": "Greece","code": "gr"},"company": "Wmmt Radio Station","date": "2016-03-28","status": "proposal","activity": 73,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
+       {"id": 1303,"name": "Olive Matuszak","country": {"name": "Germany","code": "de"},"company": "Colony Paints Sales Ofc \u0026 Plnt","date": "2018-04-15","status": "unqualified","activity": 70,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
+       {"id": 1304,"name": "Ligia Reiber","country": {"name": "Cameroon","code": "cm"},"company": "Floral Expressions","date": "2017-02-02","status": "negotiation","activity": 51,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
+       {"id": 1305,"name": "Christiane Eschberger","country": {"name": "Romania","code": "ro"},"company": "Casco Services Inc","date": "2018-03-27","status": "unqualified","activity": 81,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
+       {"id": 1306,"name": "Goldie Schirpke","country": {"name": "Paraguay","code": "py"},"company": "Reuter, Arthur C Jr","date": "2015-04-21","status": "renewal","activity": 8,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
+       {"id": 1307,"name": "Loreta Timenez","country": {"name": "Burkina Faso","code": "bf"},"company": "Kaminski, Katherine Andritsaki","date": "2015-07-17","status": "proposal","activity": 29,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
+       {"id": 1308,"name": "Fabiola Hauenstein","country": {"name": "Czech Republic","code": "cz"},"company": "Sidewinder Products Corp","date": "2015-12-12","status": "renewal","activity": 42,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
+       {"id": 1309,"name": "Amie Perigo","country": {"name": "Russia","code": "ru"},"company": "General Foam Corporation","date": "2016-06-13","status": "new","activity": 55,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
+       {"id": 1310,"name": "Raina Brachle","country": {"name": "Greece","code": "gr"},"company": "Ikg Borden Divsn Harsco Corp","date": "2016-11-28","status": "negotiation","activity": 12,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
+       {"id": 1311,"name": "Erinn Canlas","country": {"name": "United Kingdom","code": "gb"},"company": "Anchor Computer Inc","date": "2018-12-08","status": "proposal","activity": 89,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
+       {"id": 1312,"name": "Cherry Lietz","country": {"name": "Bulgaria","code": "bg"},"company": "Sebring \u0026 Co","date": "2017-11-04","status": "qualified","activity": 22,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
+       {"id": 1313,"name": "Kattie Vonasek","country": {"name": "Austria","code": "at"},"company": "H A C Farm Lines Co Optv Assoc","date": "2017-02-17","status": "proposal","activity": 58,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
+       {"id": 1314,"name": "Lilli Scriven","country": {"name": "Egypt","code": "eg"},"company": "Hunter, John J Esq","date": "2017-04-15","status": "qualified","activity": 79,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
+       {"id": 1315,"name": "Whitley Tomasulo","country": {"name": "Qatar","code": "qa"},"company": "Freehold Fence Co","date": "2017-11-16","status": "qualified","activity": 6,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
+       {"id": 1316,"name": "Barbra Adkin","country": {"name": "Nigeria","code": "ng"},"company": "Binswanger","date": "2019-07-24","status": "qualified","activity": 64,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
+       {"id": 1317,"name": "Hermila Thyberg","country": {"name": "Argentina","code": "ar"},"company": "Chilton Malting Co","date": "2016-11-05","status": "qualified","activity": 57,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
+       {"id": 1318,"name": "Jesusita Flister","country": {"name": "Ukraine","code": "ua"},"company": "Schoen, Edward J Jr","date": "2017-03-03","status": "proposal","activity": 29,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
+       {"id": 1319,"name": "Caitlin Julia","country": {"name": "Israel","code": "il"},"company": "Helderman, Seymour Cpa","date": "2018-03-13","status": "renewal","activity": 19,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
+       {"id": 1320,"name": "Roosevelt Hoffis","country": {"name": "Puerto Rico","code": "pr"},"company": "Denbrook, Myron","date": "2019-04-14","status": "new","activity": 49,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
+       {"id": 1321,"name": "Helaine Halter","country": {"name": "Estonia","code": "ee"},"company": "Lippitt, Mike","date": "2019-09-28","status": "renewal","activity": 62,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
+       {"id": 1322,"name": "Lorean Martabano","country": {"name": "Slovakia","code": "sk"},"company": "Hiram, Hogg P Esq","date": "2017-03-23","status": "negotiation","activity": 8,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
+       {"id": 1323,"name": "France Buzick","country": {"name": "Nigeria","code": "ng"},"company": "In Travel Agency","date": "2016-12-14","status": "renewal","activity": 22,"representative": {"name": "Amy Elsner","image": "amyelsner.png"}},
+       {"id": 1324,"name": "Justine Ferrario","country": {"name": "Ukraine","code": "ua"},"company": "Newhart Foods Inc","date": "2015-09-07","status": "unqualified","activity": 7,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
+       {"id": 1325,"name": "Adelina Nabours","country": {"name": "Mexico","code": "mx"},"company": "Courtyard By Marriott","date": "2018-05-26","status": "renewal","activity": 59,"representative": {"name": "Amy Elsner","image": "amyelsner.png"}},
+       {"id": 1326,"name": "Derick Dhamer","country": {"name": "Hungary","code": "hu"},"company": "Studer, Eugene A Esq","date": "2020-07-04","status": "new","activity": 72,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
+       {"id": 1327,"name": "Jerry Dallen","country": {"name": "Egypt","code": "eg"},"company": "Seashore Supply Co Waretown","date": "2015-10-23","status": "renewal","activity": 21,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
+       {"id": 1328,"name": "Leota Ragel","country": {"name": "Qatar","code": "qa"},"company": "Mayar Silk Inc","date": "2019-06-15","status": "negotiation","activity": 74,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
+       {"id": 1329,"name": "Jutta Amyot","country": {"name": "Cameroon","code": "cm"},"company": "National Medical Excess Corp","date": "2019-09-01","status": "proposal","activity": 8,"representative": {"name": "Amy Elsner","image": "amyelsner.png"}},
+       {"id": 1330,"name": "Aja Gehrett","country": {"name": "Sweden","code": "se"},"company": "Stero Company","date": "2018-01-28","status": "qualified","activity": 46,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
+       {"id": 1331,"name": "Kirk Herritt","country": {"name": "Morocco","code": "ma"},"company": "Hasting, H Duane Esq","date": "2018-10-24","status": "renewal","activity": 2,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
+       {"id": 1332,"name": "Leonora Mauson","country": {"name": "Hong Kong","code": "hk"},"company": "Insty Prints","date": "2019-02-02","status": "proposal","activity": 8,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
+       {"id": 1333,"name": "Winfred Brucato","country": {"name": "Austria","code": "at"},"company": "Glenridge Manor Mobile Home Pk","date": "2019-08-16","status": "renewal","activity": 8,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
+       {"id": 1334,"name": "Tarra Nachor","country": {"name": "Panama","code": "pa"},"company": "Circuit Solution Inc","date": "2019-07-10","status": "proposal","activity": 88,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
+       {"id": 1335,"name": "Corinne Loder","country": {"name": "Brazil","code": "br"},"company": "Local Office","date": "2016-05-21","status": "proposal","activity": 85,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
+       {"id": 1336,"name": "Dulce Labreche","country": {"name": "South Africa","code": "za"},"company": "Lee Kilkelly Paulson \u0026 Kabaker","date": "2019-11-10","status": "qualified","activity": 24,"representative": {"name": "Amy Elsner","image": "amyelsner.png"}},
+       {"id": 1337,"name": "Kate Keneipp","country": {"name": "Latvia","code": "lv"},"company": "Davis, Maxon R Esq","date": "2019-06-20","status": "proposal","activity": 44,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
+       {"id": 1338,"name": "Kaitlyn Ogg","country": {"name": "Tunisia","code": "tn"},"company": "Garrison, Paul E Esq","date": "2019-08-01","status": "proposal","activity": 91,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
+       {"id": 1339,"name": "Sherita Saras","country": {"name": "Taiwan","code": "tw"},"company": "Black History Resource Center","date": "2017-06-09","status": "unqualified","activity": 79,"representative": {"name": "Anna Fali","image": "annafali.png"}},
+       {"id": 1340,"name": "Lashawnda Stuer","country": {"name": "Indonesia","code": "id"},"company": "Rodriguez, J Christopher Esq","date": "2018-01-08","status": "negotiation","activity": 6,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
+       {"id": 1341,"name": "Ernest Syrop","country": {"name": "Jamaica","code": "jm"},"company": "Grant Family Health Center","date": "2016-10-06","status": "unqualified","activity": 90,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
+       {"id": 1342,"name": "Nobuko Halsey","country": {"name": "Argentina","code": "ar"},"company": "Goeman Wood Products Inc","date": "2019-01-02","status": "unqualified","activity": 72,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
+       {"id": 1343,"name": "Lavonna Wolny","country": {"name": "Czech Republic","code": "cz"},"company": "Linhares, Kenneth A Esq","date": "2019-03-09","status": "negotiation","activity": 77,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
+       {"id": 1344,"name": "Lashaunda Lizama","country": {"name": "Ecuador","code": "ec"},"company": "Earnhardt Printing","date": "2016-02-16","status": "negotiation","activity": 76,"representative": {"name": "Amy Elsner","image": "amyelsner.png"}},
+       {"id": 1345,"name": "Mariann Bilden","country": {"name": "Argentina","code": "ar"},"company": "H P G Industrys Inc","date": "2019-12-15","status": "proposal","activity": 20,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
+       {"id": 1346,"name": "Helene Rodenberger","country": {"name": "Bolivia","code": "bo"},"company": "Bailey Transportation Prod Inc","date": "2016-09-22","status": "unqualified","activity": 26,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
+       {"id": 1347,"name": "Roselle Estell","country": {"name": "Hungary","code": "hu"},"company": "Mcglynn Bliss Pc","date": "2016-11-25","status": "negotiation","activity": 80,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
+       {"id": 1348,"name": "Samira Heintzman","country": {"name": "Vietnam","code": "vn"},"company": "Mutual Fish Co","date": "2019-11-26","status": "qualified","activity": 70,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
+       {"id": 1349,"name": "Margart Meisel","country": {"name": "Serbia","code": "rs"},"company": "Yeates, Arthur L Aia","date": "2019-10-27","status": "negotiation","activity": 77,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
+       {"id": 1350,"name": "Kristofer Bennick","country": {"name": "Tunisia","code": "tn"},"company": "Logan, Ronald J Esq","date": "2016-02-13","status": "proposal","activity": 5,"representative": {"name": "Anna Fali","image": "annafali.png"}},
+       {"id": 1351,"name": "Weldon Acuff","country": {"name": "Estonia","code": "ee"},"company": "Advantage Martgage Company","date": "2019-10-22","status": "qualified","activity": 38,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
+       {"id": 1352,"name": "Shalon Shadrick","country": {"name": "Iceland","code": "is"},"company": "Germer And Gertz Llp","date": "2015-01-03","status": "proposal","activity": 66,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
+       {"id": 1353,"name": "Denise Patak","country": {"name": "Uruguay","code": "uy"},"company": "Spence Law Offices","date": "2016-11-03","status": "qualified","activity": 77,"representative": {"name": "Anna Fali","image": "annafali.png"}},
+       {"id": 1354,"name": "Louvenia Beech","country": {"name": "Ecuador","code": "ec"},"company": "John Ortiz Nts Therapy Center","date": "2016-04-11","status": "renewal","activity": 62,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
+       {"id": 1355,"name": "Audry Yaw","country": {"name": "Portugal","code": "pt"},"company": "Mike Uchrin Htg \u0026 Air Cond Inc","date": "2017-11-22","status": "unqualified","activity": 12,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
+       {"id": 1356,"name": "Kristel Ehmann","country": {"name": "Israel","code": "il"},"company": "Mccoy, Joy Reynolds Esq","date": "2016-06-23","status": "new","activity": 67,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
+       {"id": 1357,"name": "Vincenza Zepp","country": {"name": "Pakistan","code": "pk"},"company": "Kbor 1600 Am","date": "2016-01-04","status": "qualified","activity": 25,"representative": {"name": "Anna Fali","image": "annafali.png"}},
+       {"id": 1358,"name": "Elouise Gwalthney","country": {"name": "Netherlands","code": "nl"},"company": "Quality Inn Northwest","date": "2016-04-05","status": "proposal","activity": 14,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
+       {"id": 1359,"name": "Venita Maillard","country": {"name": "Poland","code": "pl"},"company": "Wallace Church Assoc Inc","date": "2016-03-23","status": "negotiation","activity": 69,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
+       {"id": 1360,"name": "Kasandra Semidey","country": {"name": "Indonesia","code": "id"},"company": "Can Tron","date": "2015-09-03","status": "new","activity": 25,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
+       {"id": 1361,"name": "Xochitl Discipio","country": {"name": "Slovakia","code": "sk"},"company": "Ravaal Enterprises Inc","date": "2016-11-14","status": "qualified","activity": 47,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
+       {"id": 1362,"name": "Maile Linahan","country": {"name": "Nigeria","code": "ng"},"company": "Thompson Steel Company Inc","date": "2016-07-24","status": "new","activity": 0,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
+       {"id": 1363,"name": "Krissy Rauser","country": {"name": "Thailand","code": "th"},"company": "Anderson, Mark A Esq","date": "2020-03-06","status": "renewal","activity": 33,"representative": {"name": "Amy Elsner","image": "amyelsner.png"}},
+       {"id": 1364,"name": "Pete Dubaldi","country": {"name": "Bolivia","code": "bo"},"company": "Womack \u0026 Galich","date": "2015-11-22","status": "unqualified","activity": 31,"representative": {"name": "Anna Fali","image": "annafali.png"}},
+       {"id": 1365,"name": "Linn Paa","country": {"name": "Bolivia","code": "bo"},"company": "Valerie \u0026 Company","date": "2015-08-12","status": "unqualified","activity": 26,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
+       {"id": 1366,"name": "Paris Wide","country": {"name": "Uruguay","code": "uy"},"company": "Gehring Pumps Inc","date": "2018-10-21","status": "proposal","activity": 90,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
+       {"id": 1367,"name": "Wynell Dorshorst","country": {"name": "Romania","code": "ro"},"company": "Haehnel, Craig W Esq","date": "2018-05-10","status": "new","activity": 60,"representative": {"name": "Amy Elsner","image": "amyelsner.png"}},
+       {"id": 1368,"name": "Quentin Birkner","country": {"name": "Senegal","code": "sn"},"company": "Spoor Behrins Campbell \u0026 Young","date": "2019-02-03","status": "unqualified","activity": 68,"representative": {"name": "Anna Fali","image": "annafali.png"}},
+       {"id": 1369,"name": "Regenia Kannady","country": {"name": "Portugal","code": "pt"},"company": "Ken Jeter Store Equipment Inc","date": "2018-07-13","status": "new","activity": 74,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
+       {"id": 1370,"name": "Sheron Louissant","country": {"name": "France","code": "fr"},"company": "Potter, Brenda J Cpa","date": "2017-01-04","status": "qualified","activity": 86,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
+       {"id": 1371,"name": "Izetta Funnell","country": {"name": "Hong Kong","code": "hk"},"company": "Baird Kurtz \u0026 Dobson","date": "2019-11-05","status": "new","activity": 67,"representative": {"name": "Anna Fali","image": "annafali.png"}},
+       {"id": 1372,"name": "Rodolfo Butzen","country": {"name": "Taiwan","code": "tw"},"company": "Minor, Cynthia A Esq","date": "2020-09-25","status": "proposal","activity": 17,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
+       {"id": 1373,"name": "Zona Colla","country": {"name": "Switzerland","code": "ch"},"company": "Solove, Robert A Esq","date": "2020-10-08","status": "negotiation","activity": 64,"representative": {"name": "Anna Fali","image": "annafali.png"}},
+       {"id": 1374,"name": "Serina Zagen","country": {"name": "Paraguay","code": "py"},"company": "Mark Ii Imports Inc","date": "2018-07-14","status": "negotiation","activity": 46,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
+       {"id": 1375,"name": "Paz Sahagun","country": {"name": "Colombia","code": "co"},"company": "White Sign Div Ctrl Equip Co","date": "2018-03-23","status": "negotiation","activity": 49,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
+       {"id": 1376,"name": "Markus Lukasik","country": {"name": "Burkina Faso","code": "bf"},"company": "M \u0026 M Store Fixtures Co Inc","date": "2018-03-21","status": "negotiation","activity": 23,"representative": {"name": "Anna Fali","image": "annafali.png"}},
+       {"id": 1377,"name": "Jaclyn Bachman","country": {"name": "Slovakia","code": "sk"},"company": "Judah Caster \u0026 Wheel Co","date": "2020-10-20","status": "new","activity": 10,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
+       {"id": 1378,"name": "Cyril Daufeldt","country": {"name": "India","code": "in"},"company": "Galaxy International Inc","date": "2019-02-11","status": "qualified","activity": 79,"representative": {"name": "Amy Elsner","image": "amyelsner.png"}},
+       {"id": 1379,"name": "Gayla Schnitzler","country": {"name": "Brazil","code": "br"},"company": "Sigma Corp Of America","date": "2017-09-15","status": "new","activity": 14,"representative": {"name": "Amy Elsner","image": "amyelsner.png"}},
+       {"id": 1380,"name": "Erick Nievas","country": {"name": "Argentina","code": "ar"},"company": "Soward, Anne Esq","date": "2018-10-07","status": "proposal","activity": 28,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
+       {"id": 1381,"name": "Jennie Drymon","country": {"name": "Egypt","code": "eg"},"company": "Osborne, Michelle M Esq","date": "2016-09-14","status": "negotiation","activity": 80,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
+       {"id": 1382,"name": "Mitsue Scipione","country": {"name": "Ecuador","code": "ec"},"company": "Students In Free Entrprs Natl","date": "2019-07-28","status": "qualified","activity": 24,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
+       {"id": 1383,"name": "Ciara Ventura","country": {"name": "Sweden","code": "se"},"company": "Johnson, Robert M Esq","date": "2018-04-02","status": "renewal","activity": 24,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
+       {"id": 1384,"name": "Galen Cantres","country": {"name": "Saudi Arabia","code": "sa"},"company": "Del Charro Apartments","date": "2020-02-16","status": "unqualified","activity": 61,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
+       {"id": 1385,"name": "Truman Feichtner","country": {"name": "Iceland","code": "is"},"company": "Legal Search Inc","date": "2019-10-16","status": "renewal","activity": 98,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
+       {"id": 1386,"name": "Gail Kitty","country": {"name": "Pakistan","code": "pk"},"company": "Service Supply Co Inc","date": "2020-01-15","status": "negotiation","activity": 67,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
+       {"id": 1387,"name": "Dalene Schoeneck","country": {"name": "Latvia","code": "lv"},"company": "Sameshima, Douglas J Esq","date": "2019-11-27","status": "proposal","activity": 85,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
+       {"id": 1388,"name": "Gertude Witten","country": {"name": "Morocco","code": "ma"},"company": "Thompson, John Randolph Jr","date": "2017-08-13","status": "proposal","activity": 40,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
+       {"id": 1389,"name": "Lizbeth Kohl","country": {"name": "Serbia","code": "rs"},"company": "E T Balancing Co Inc","date": "2019-04-20","status": "qualified","activity": 57,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
+       {"id": 1390,"name": "Glenn Berray","country": {"name": "Poland","code": "pl"},"company": "Griswold, John E Esq","date": "2017-08-13","status": "negotiation","activity": 68,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
+       {"id": 1391,"name": "Lashandra Klang","country": {"name": "Bulgaria","code": "bg"},"company": "Acqua Group","date": "2016-06-08","status": "negotiation","activity": 32,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
+       {"id": 1392,"name": "Lenna Newville","country": {"name": "Venezuela","code": "ve"},"company": "Brooks, Morris J Jr","date": "2020-09-12","status": "qualified","activity": 82,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
+       {"id": 1393,"name": "Laurel Pagliuca","country": {"name": "Russia","code": "ru"},"company": "Printing Images Corp","date": "2017-05-26","status": "unqualified","activity": 21,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
+       {"id": 1394,"name": "Mireya Frerking","country": {"name": "Belarus","code": "by"},"company": "Roberts Supply Co Inc","date": "2017-04-21","status": "renewal","activity": 54,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
+       {"id": 1395,"name": "Annelle Tagala","country": {"name": "Colombia","code": "co"},"company": "Vico Products Mfg Co","date": "2017-10-02","status": "proposal","activity": 53,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
+       {"id": 1396,"name": "Dean Ketelsen","country": {"name": "Ivory Coast","code": "ci"},"company": "J M Custom Design Millwork","date": "2019-07-25","status": "negotiation","activity": 98,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
+       {"id": 1397,"name": "Levi Munis","country": {"name": "Pakistan","code": "pk"},"company": "Farrell \u0026 Johnson Office Equip","date": "2017-06-24","status": "proposal","activity": 39,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
+       {"id": 1398,"name": "Sylvie Ryser","country": {"name": "India","code": "in"},"company": "Millers Market \u0026 Deli","date": "2016-02-23","status": "unqualified","activity": 89,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
+       {"id": 1399,"name": "Sharee Maile","country": {"name": "Ireland","code": "ie"},"company": "Holiday Inn Naperville","date": "2020-07-17","status": "renewal","activity": 0,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
+       {"id": 1400,"name": "Cordelia Storment","country": {"name": "Guatemala","code": "gt"},"company": "Burrows, Jon H Esq","date": "2020-02-17","status": "negotiation","activity": 45,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
+       {"id": 1401,"name": "Mollie Mcdoniel","country": {"name": "Vietnam","code": "vn"},"company": "Dock Seal Specialty","date": "2017-08-13","status": "unqualified","activity": 59,"representative": {"name": "Amy Elsner","image": "amyelsner.png"}},
+       {"id": 1402,"name": "Brett Mccullan","country": {"name": "Senegal","code": "sn"},"company": "Five Star Limousines Of Tx Inc","date": "2015-05-21","status": "qualified","activity": 9,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
+       {"id": 1403,"name": "Teddy Pedrozo","country": {"name": "Burkina Faso","code": "bf"},"company": "Barkan, Neal J Esq","date": "2019-02-19","status": "proposal","activity": 38,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
+       {"id": 1404,"name": "Tasia Andreason","country": {"name": "Venezuela","code": "ve"},"company": "Campbell, Robert A","date": "2016-03-06","status": "renewal","activity": 25,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
+       {"id": 1405,"name": "Hubert Walthall","country": {"name": "Mexico","code": "mx"},"company": "Dee, Deanna","date": "2020-12-19","status": "renewal","activity": 32,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
+       {"id": 1406,"name": "Arthur Farrow","country": {"name": "Brazil","code": "br"},"company": "Young, Timothy L Esq","date": "2019-02-05","status": "proposal","activity": 55,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
+       {"id": 1407,"name": "Vilma Berlanga","country": {"name": "Tunisia","code": "tn"},"company": "Wells, D Fred Esq","date": "2016-02-09","status": "unqualified","activity": 26,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
+       {"id": 1408,"name": "Billye Miro","country": {"name": "Hungary","code": "hu"},"company": "Gray, Francine H Esq","date": "2015-09-05","status": "new","activity": 70,"representative": {"name": "Anna Fali","image": "annafali.png"}},
+       {"id": 1409,"name": "Glenna Slayton","country": {"name": "Iceland","code": "is"},"company": "Toledo Iv Care","date": "2016-03-10","status": "unqualified","activity": 86,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
+       {"id": 1410,"name": "Mitzie Hudnall","country": {"name": "Iceland","code": "is"},"company": "Cangro Transmission Co","date": "2020-05-04","status": "new","activity": 19,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
+       {"id": 1411,"name": "Bernardine Rodefer","country": {"name": "Switzerland","code": "ch"},"company": "Sat Poly Inc","date": "2020-10-19","status": "proposal","activity": 69,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
+       {"id": 1412,"name": "Staci Schmaltz","country": {"name": "Iceland","code": "is"},"company": "Midwest Contracting \u0026 Mfg Inc","date": "2018-03-14","status": "unqualified","activity": 81,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
+       {"id": 1413,"name": "Nichelle Meteer","country": {"name": "Denmark","code": "dk"},"company": "Print Doctor","date": "2016-09-23","status": "renewal","activity": 39,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
+       {"id": 1414,"name": "Janine Rhoden","country": {"name": "Nigeria","code": "ng"},"company": "Nordic Group Inc","date": "2018-08-13","status": "qualified","activity": 95,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
+       {"id": 1415,"name": "Ettie Hoopengardner","country": {"name": "Switzerland","code": "ch"},"company": "Jackson Millwork Co","date": "2017-07-24","status": "renewal","activity": 23,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
+       {"id": 1416,"name": "Eden Jayson","country": {"name": "Sweden","code": "se"},"company": "Harris Corporation","date": "2018-03-15","status": "renewal","activity": 9,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
+       {"id": 1417,"name": "Lynelle Auber","country": {"name": "Netherlands","code": "nl"},"company": "United Cerebral Palsy Of Ne Pa","date": "2020-12-11","status": "proposal","activity": 0,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
+       {"id": 1418,"name": "Merissa Tomblin","country": {"name": "Jamaica","code": "jm"},"company": "One Day Surgery Center Inc","date": "2018-03-05","status": "new","activity": 50,"representative": {"name": "Anna Fali","image": "annafali.png"}},
+       {"id": 1419,"name": "Golda Kaniecki","country": {"name": "Burkina Faso","code": "bf"},"company": "Calaveras Prospect","date": "2019-04-17","status": "negotiation","activity": 91,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
+       {"id": 1420,"name": "Catarina Gleich","country": {"name": "Malaysia","code": "my"},"company": "Terk, Robert E Esq","date": "2017-01-26","status": "unqualified","activity": 12,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
+       {"id": 1421,"name": "Virgie Kiel","country": {"name": "Latvia","code": "lv"},"company": "Cullen, Terrence P Esq","date": "2016-06-28","status": "renewal","activity": 89,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
+       {"id": 1422,"name": "Jolene Ostolaza","country": {"name": "Puerto Rico","code": "pr"},"company": "Central Die Casting Mfg Co Inc","date": "2016-08-08","status": "negotiation","activity": 85,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
+       {"id": 1423,"name": "Keneth Borgman","country": {"name": "Qatar","code": "qa"},"company": "Centerline Engineering","date": "2019-02-04","status": "unqualified","activity": 41,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
+       {"id": 1424,"name": "Rikki Nayar","country": {"name": "Norway","code": "no"},"company": "Targan \u0026 Kievit Pa","date": "2017-03-06","status": "negotiation","activity": 47,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
+       {"id": 1425,"name": "Elke Sengbusch","country": {"name": "Canada","code": "ca"},"company": "Riley Riper Hollin \u0026 Colagreco","date": "2019-05-28","status": "renewal","activity": 76,"representative": {"name": "Anna Fali","image": "annafali.png"}},
+       {"id": 1426,"name": "Hoa Sarao","country": {"name": "Sweden","code": "se"},"company": "Kaplan, Joel S Esq","date": "2020-08-13","status": "negotiation","activity": 0,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
+       {"id": 1427,"name": "Trinidad Mcrae","country": {"name": "Burkina Faso","code": "bf"},"company": "Water Office","date": "2020-12-26","status": "renewal","activity": 76,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
+       {"id": 1428,"name": "Mari Lueckenbach","country": {"name": "Cuba","code": "cu"},"company": "Westbrooks, Nelson E Jr","date": "2017-10-27","status": "new","activity": 34,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
+       {"id": 1429,"name": "Selma Husser","country": {"name": "Morocco","code": "ma"},"company": "Armon Communications","date": "2018-02-16","status": "proposal","activity": 84,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
+       {"id": 1430,"name": "Antione Onofrio","country": {"name": "Taiwan","code": "tw"},"company": "Jacobs \u0026 Gerber Inc","date": "2017-11-07","status": "negotiation","activity": 37,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
+       {"id": 1431,"name": "Luisa Jurney","country": {"name": "Canada","code": "ca"},"company": "Forest Fire Laboratory","date": "2018-06-12","status": "unqualified","activity": 96,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
+       {"id": 1432,"name": "Clorinda Heimann","country": {"name": "Israel","code": "il"},"company": "Haughey, Charles Jr","date": "2016-11-03","status": "proposal","activity": 63,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
+       {"id": 1433,"name": "Dick Wenzinger","country": {"name": "Mexico","code": "mx"},"company": "Wheaton Plastic Products","date": "2017-04-05","status": "negotiation","activity": 92,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
+       {"id": 1434,"name": "Ahmed Angalich","country": {"name": "Australia","code": "au"},"company": "Reese Plastics","date": "2018-11-20","status": "unqualified","activity": 83,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
+       {"id": 1435,"name": "Iluminada Ohms","country": {"name": "Croatia","code": "hr"},"company": "Nazette Marner Good Wendt","date": "2015-08-18","status": "proposal","activity": 66,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
+       {"id": 1436,"name": "Joanna Leinenbach","country": {"name": "Thailand","code": "th"},"company": "Levinson Axelrod Wheaton","date": "2016-02-11","status": "proposal","activity": 64,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
+       {"id": 1437,"name": "Caprice Suell","country": {"name": "Algeria","code": "dz"},"company": "Egnor, W Dan Esq","date": "2018-07-09","status": "unqualified","activity": 99,"representative": {"name": "Amy Elsner","image": "amyelsner.png"}},
+       {"id": 1438,"name": "Stephane Myricks","country": {"name": "Honduras","code": "hn"},"company": "Portland Central Thriftlodge","date": "2018-05-28","status": "renewal","activity": 51,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
+       {"id": 1439,"name": "Quentin Swayze","country": {"name": "Tunisia","code": "tn"},"company": "Ulbrich Trucking","date": "2019-02-11","status": "negotiation","activity": 37,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
+       {"id": 1440,"name": "Annmarie Castros","country": {"name": "Jamaica","code": "jm"},"company": "Tipiak Inc","date": "2015-08-24","status": "qualified","activity": 46,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
+       {"id": 1441,"name": "Shonda Greenbush","country": {"name": "Costa Rica","code": "cr"},"company": "Saint George Well Drilling","date": "2018-06-01","status": "negotiation","activity": 16,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
+       {"id": 1442,"name": "Cecil Lapage","country": {"name": "Malaysia","code": "my"},"company": "Hawkes, Douglas D","date": "2018-11-09","status": "qualified","activity": 43,"representative": {"name": "Amy Elsner","image": "amyelsner.png"}},
+       {"id": 1443,"name": "Jeanice Claucherty","country": {"name": "Lithuania","code": "lt"},"company": "Accurel Systems Intrntl Corp","date": "2016-06-02","status": "qualified","activity": 48,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
+       {"id": 1444,"name": "Josphine Villanueva","country": {"name": "Japan","code": "jp"},"company": "Santa Cruz Community Internet","date": "2019-11-08","status": "unqualified","activity": 39,"representative": {"name": "Amy Elsner","image": "amyelsner.png"}},
+       {"id": 1445,"name": "Daniel Perruzza","country": {"name": "Malaysia","code": "my"},"company": "Gersh \u0026 Danielson","date": "2017-09-24","status": "renewal","activity": 86,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
+       {"id": 1446,"name": "Cassi Wildfong","country": {"name": "Tunisia","code": "tn"},"company": "Cobb, James O Esq","date": "2015-09-08","status": "qualified","activity": 85,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
+       {"id": 1447,"name": "Britt Galam","country": {"name": "Poland","code": "pl"},"company": "Wheatley Trucking Company","date": "2020-10-26","status": "new","activity": 69,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
+       {"id": 1448,"name": "Adell Lipkin","country": {"name": "Saudi Arabia","code": "sa"},"company": "Systems Graph Inc Ab Dick Dlr","date": "2017-05-09","status": "unqualified","activity": 92,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
+       {"id": 1449,"name": "Jacqueline Rowling","country": {"name": "Qatar","code": "qa"},"company": "John Hancock Mutl Life Ins Co","date": "2019-06-28","status": "negotiation","activity": 79,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
+       {"id": 1450,"name": "Lonny Weglarz","country": {"name": "Chile","code": "cl"},"company": "History Division Of State","date": "2016-08-12","status": "new","activity": 49,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
+       {"id": 1451,"name": "Lonna Diestel","country": {"name": "Philippines","code": "ph"},"company": "Dimmock, Thomas J Esq","date": "2017-02-10","status": "proposal","activity": 9,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
+       {"id": 1452,"name": "Cristal Samara","country": {"name": "Australia","code": "au"},"company": "Intermed Inc","date": "2016-08-17","status": "qualified","activity": 99,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
+       {"id": 1453,"name": "Kenneth Grenet","country": {"name": "Croatia","code": "hr"},"company": "Bank Of New York","date": "2020-07-24","status": "negotiation","activity": 78,"representative": {"name": "Anna Fali","image": "annafali.png"}},
+       {"id": 1454,"name": "Elli Mclaird","country": {"name": "Switzerland","code": "ch"},"company": "Sportmaster Intrnatl","date": "2017-06-10","status": "qualified","activity": 61,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
+       {"id": 1455,"name": "Alline Jeanty","country": {"name": "Denmark","code": "dk"},"company": "W W John Holden Inc","date": "2015-12-08","status": "renewal","activity": 74,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
+       {"id": 1456,"name": "Sharika Eanes","country": {"name": "Chile","code": "cl"},"company": "Maccani \u0026 Delp","date": "2018-08-16","status": "qualified","activity": 14,"representative": {"name": "Amy Elsner","image": "amyelsner.png"}},
+       {"id": 1457,"name": "Nu Mcnease","country": {"name": "Pakistan","code": "pk"},"company": "Amazonia Film Project","date": "2018-07-03","status": "negotiation","activity": 47,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
+       {"id": 1458,"name": "Daniela Comnick","country": {"name": "Tunisia","code": "tn"},"company": "Water \u0026 Sewer Department","date": "2017-07-07","status": "negotiation","activity": 31,"representative": {"name": "Anna Fali","image": "annafali.png"}},
+       {"id": 1459,"name": "Cecilia Colaizzo","country": {"name": "Costa Rica","code": "cr"},"company": "Switchcraft Inc","date": "2019-06-08","status": "proposal","activity": 21,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
+       {"id": 1460,"name": "Leslie Threets","country": {"name": "Sweden","code": "se"},"company": "C W D C Metal Fabricators","date": "2016-11-26","status": "unqualified","activity": 50,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
+       {"id": 1461,"name": "Nan Koppinger","country": {"name": "Norway","code": "no"},"company": "Shimotani, Grace T","date": "2020-11-15","status": "proposal","activity": 94,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
+       {"id": 1462,"name": "Izetta Dewar","country": {"name": "Cuba","code": "cu"},"company": "Lisatoni, Jean Esq","date": "2019-11-22","status": "renewal","activity": 41,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
+       {"id": 1463,"name": "Tegan Arceo","country": {"name": "Iceland","code": "is"},"company": "Ceramic Tile Sales Inc","date": "2016-08-07","status": "new","activity": 79,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
+       {"id": 1464,"name": "Ruthann Keener","country": {"name": "Morocco","code": "ma"},"company": "Maiden Craft Inc","date": "2019-04-25","status": "negotiation","activity": 43,"representative": {"name": "Elwin Sharvill","image": "elwinsharvill.png"}},
+       {"id": 1465,"name": "Joni Breland","country": {"name": "Uruguay","code": "uy"},"company": "Carriage House Cllsn Rpr Inc","date": "2018-07-20","status": "new","activity": 18,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
+       {"id": 1466,"name": "Vi Rentfro","country": {"name": "Malaysia","code": "my"},"company": "Video Workshop","date": "2018-10-01","status": "negotiation","activity": 99,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
+       {"id": 1467,"name": "Colette Kardas","country": {"name": "Honduras","code": "hn"},"company": "Fresno Tile Center Inc","date": "2017-08-22","status": "new","activity": 14,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
+       {"id": 1468,"name": "Malcolm Tromblay","country": {"name": "Uruguay","code": "uy"},"company": "Versatile Sash \u0026 Woodwork","date": "2019-11-25","status": "renewal","activity": 23,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
+       {"id": 1469,"name": "Ryan Harnos","country": {"name": "Paraguay","code": "py"},"company": "Warner Electric Brk \u0026 Cltch Co","date": "2019-02-12","status": "qualified","activity": 71,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
+       {"id": 1470,"name": "Jess Chaffins","country": {"name": "Belarus","code": "by"},"company": "New York Public Library","date": "2017-02-12","status": "qualified","activity": 91,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
+       {"id": 1471,"name": "Sharen Bourbon","country": {"name": "Saudi Arabia","code": "sa"},"company": "Mccaleb, John A Esq","date": "2017-06-13","status": "renewal","activity": 35,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
+       {"id": 1472,"name": "Nickolas Juvera","country": {"name": "Finland","code": "fi"},"company": "United Oil Co Inc","date": "2019-01-06","status": "negotiation","activity": 14,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
+       {"id": 1473,"name": "Gary Nunlee","country": {"name": "Turkey","code": "tr"},"company": "Irving Foot Center","date": "2015-07-22","status": "renewal","activity": 72,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
+       {"id": 1474,"name": "Diane Devreese","country": {"name": "Bolivia","code": "bo"},"company": "Acme Supply Co","date": "2018-05-13","status": "renewal","activity": 78,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
+       {"id": 1475,"name": "Roslyn Chavous","country": {"name": "Israel","code": "il"},"company": "Mcrae, James L","date": "2018-03-20","status": "proposal","activity": 45,"representative": {"name": "Bernardo Dominic","image": "bernardodominic.png"}},
+       {"id": 1476,"name": "Glory Schieler","country": {"name": "Italy","code": "it"},"company": "Mcgraths Seafood","date": "2017-05-13","status": "proposal","activity": 34,"representative": {"name": "Anna Fali","image": "annafali.png"}},
+       {"id": 1477,"name": "Rasheeda Sayaphon","country": {"name": "Latvia","code": "lv"},"company": "Kummerer, J Michael Esq","date": "2017-02-21","status": "proposal","activity": 12,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
+       {"id": 1478,"name": "Alpha Palaia","country": {"name": "Costa Rica","code": "cr"},"company": "Stoffer, James M Jr","date": "2017-07-21","status": "renewal","activity": 4,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
+       {"id": 1479,"name": "Refugia Jacobos","country": {"name": "China","code": "cn"},"company": "North Central Fl Sfty Cncl","date": "2020-11-25","status": "negotiation","activity": 18,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
+       {"id": 1480,"name": "Shawnda Yori","country": {"name": "Luxembourg","code": "lu"},"company": "Fiorucci Foods Usa Inc","date": "2018-05-09","status": "unqualified","activity": 11,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
+       {"id": 1481,"name": "Mona Delasancha","country": {"name": "Hong Kong","code": "hk"},"company": "Sign All","date": "2017-10-06","status": "renewal","activity": 61,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
+       {"id": 1482,"name": "Gilma Liukko","country": {"name": "Morocco","code": "ma"},"company": "Sammys Steak Den","date": "2018-10-06","status": "unqualified","activity": 34,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
+       {"id": 1483,"name": "Janey Gabisi","country": {"name": "Israel","code": "il"},"company": "Dobscha, Stephen F Esq","date": "2019-05-22","status": "unqualified","activity": 38,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
+       {"id": 1484,"name": "Lili Paskin","country": {"name": "Costa Rica","code": "cr"},"company": "Morgan Custom Homes","date": "2018-06-11","status": "unqualified","activity": 69,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
+       {"id": 1485,"name": "Loren Asar","country": {"name": "Italy","code": "it"},"company": "Olsen Payne \u0026 Company","date": "2017-12-11","status": "unqualified","activity": 16,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
+       {"id": 1486,"name": "Dorothy Chesterfield","country": {"name": "Spain","code": "es"},"company": "Cowan \u0026 Kelly","date": "2015-08-11","status": "renewal","activity": 31,"representative": {"name": "Anna Fali","image": "annafali.png"}},
+       {"id": 1487,"name": "Gail Similton","country": {"name": "Malaysia","code": "my"},"company": "Johnson, Wes Esq","date": "2016-08-10","status": "qualified","activity": 63,"representative": {"name": "Xuxue Feng","image": "xuxuefeng.png"}},
+       {"id": 1488,"name": "Catalina Tillotson","country": {"name": "Pakistan","code": "pk"},"company": "Icn Pharmaceuticals Inc","date": "2018-08-04","status": "negotiation","activity": 13,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
+       {"id": 1489,"name": "Lawrence Lorens","country": {"name": "Egypt","code": "eg"},"company": "New England Sec Equip Co Inc","date": "2020-04-15","status": "negotiation","activity": 82,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
+       {"id": 1490,"name": "Carlee Boulter","country": {"name": "Vietnam","code": "vn"},"company": "Tippett, Troy M Ii","date": "2016-09-22","status": "renewal","activity": 71,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
+       {"id": 1491,"name": "Thaddeus Ankeny","country": {"name": "Qatar","code": "qa"},"company": "Atc Contracting","date": "2015-03-08","status": "unqualified","activity": 78,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
+       {"id": 1492,"name": "Jovita Oles","country": {"name": "Sweden","code": "se"},"company": "Pagano, Philip G Esq","date": "2019-07-18","status": "negotiation","activity": 42,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
+       {"id": 1493,"name": "Alesia Hixenbaugh","country": {"name": "Thailand","code": "th"},"company": "Kwikprint","date": "2017-07-24","status": "negotiation","activity": 23,"representative": {"name": "Ivan Magalhaes","image": "ivanmagalhaes.png"}},
+       {"id": 1494,"name": "Lai Harabedian","country": {"name": "Serbia","code": "rs"},"company": "Buergi \u0026 Madden Scale","date": "2018-11-11","status": "new","activity": 28,"representative": {"name": "Asiya Javayant","image": "asiyajavayant.png"}},
+       {"id": 1495,"name": "Brittni Gillaspie","country": {"name": "Senegal","code": "sn"},"company": "Inner Label","date": "2019-11-23","status": "renewal","activity": 14,"representative": {"name": "Ioni Bowcher","image": "ionibowcher.png"}},
+       {"id": 1496,"name": "Raylene Kampa","country": {"name": "Belgium","code": "be"},"company": "Hermar Inc","date": "2020-04-22","status": "unqualified","activity": 65,"representative": {"name": "Stephen Shaw","image": "stephenshaw.png"}},
+       {"id": 1497,"name": "Flo Bookamer","country": {"name": "Argentina","code": "ar"},"company": "Simonton Howe \u0026 Schneider Pc","date": "2020-08-10","status": "unqualified","activity": 30,"representative": {"name": "Amy Elsner","image": "amyelsner.png"}},
+       {"id": 1498,"name": "Jani Biddy","country": {"name": "Switzerland","code": "ch"},"company": "Warehouse Office \u0026 Paper Prod","date": "2019-11-07","status": "negotiation","activity": 20,"representative": {"name": "Onyama Limba","image": "onyamalimba.png"}},
+       {"id": 1499,"name": "Chauncey Motley","country": {"name": "Argentina","code": "ar"},"company": "Affiliated With Travelodge","date": "2019-04-23","status": "renewal","activity": 42,"representative": {"name": "Amy Elsner","image": "amyelsner.png"}}
+   ]
 }
-    `,
+   `,
     products: `
 {
-    "data": [
-        {"id": "1000","code": "f230fh0g3","name": "Bamboo Watch","description": "Product Description","image": "bamboo-watch.jpg","price": 65,"category": "Accessories","quantity": 24,"inventoryStatus": "INSTOCK","rating": 5},
-        {"id": "1001","code": "nvklal433","name": "Black Watch","description": "Product Description","image": "black-watch.jpg","price": 72,"category": "Accessories","quantity": 61,"inventoryStatus": "INSTOCK","rating": 4},
-        {"id": "1002","code": "zz21cz3c1","name": "Blue Band","description": "Product Description","image": "blue-band.jpg","price": 79,"category": "Fitness","quantity": 2,"inventoryStatus": "LOWSTOCK","rating": 3},
-        {"id": "1003","code": "244wgerg2","name": "Blue T-Shirt","description": "Product Description","image": "blue-t-shirt.jpg","price": 29,"category": "Clothing","quantity": 25,"inventoryStatus": "INSTOCK","rating": 5},
-        {"id": "1004","code": "h456wer53","name": "Bracelet","description": "Product Description","image": "bracelet.jpg","price": 15,"category": "Accessories","quantity": 73,"inventoryStatus": "INSTOCK","rating": 4},
-        {"id": "1005","code": "av2231fwg","name": "Brown Purse","description": "Product Description","image": "brown-purse.jpg","price": 120,"category": "Accessories","quantity": 0,"inventoryStatus": "OUTOFSTOCK","rating": 4},
-        {"id": "1006","code": "bib36pfvm","name": "Chakra Bracelet","description": "Product Description","image": "chakra-bracelet.jpg","price": 32,"category": "Accessories","quantity": 5,"inventoryStatus": "LOWSTOCK","rating": 3},
-        {"id": "1007","code": "mbvjkgip5","name": "Galaxy Earrings","description": "Product Description","image": "galaxy-earrings.jpg","price": 34,"category": "Accessories","quantity": 23,"inventoryStatus": "INSTOCK","rating": 5},
-        {"id": "1008","code": "vbb124btr","name": "Game Controller","description": "Product Description","image": "game-controller.jpg","price": 99,"category": "Electronics","quantity": 2,"inventoryStatus": "LOWSTOCK","rating": 4},
-        {"id": "1009","code": "cm230f032","name": "Gaming Set","description": "Product Description","image": "gaming-set.jpg","price": 299,"category": "Electronics","quantity": 63,"inventoryStatus": "INSTOCK","rating": 3},
-        {"id": "1010","code": "plb34234v","name": "Gold Phone Case","description": "Product Description","image": "gold-phone-case.jpg","price": 24,"category": "Accessories","quantity": 0,"inventoryStatus": "OUTOFSTOCK","rating": 4},
-        {"id": "1011","code": "4920nnc2d","name": "Green Earbuds","description": "Product Description","image": "green-earbuds.jpg","price": 89,"category": "Electronics","quantity": 23,"inventoryStatus": "INSTOCK","rating": 4},
-        {"id": "1012","code": "250vm23cc","name": "Green T-Shirt","description": "Product Description","image": "green-t-shirt.jpg","price": 49,"category": "Clothing","quantity": 74,"inventoryStatus": "INSTOCK","rating": 5},
-        {"id": "1013","code": "fldsmn31b","name": "Grey T-Shirt","description": "Product Description","image": "grey-t-shirt.jpg","price": 48,"category": "Clothing","quantity": 0,"inventoryStatus": "OUTOFSTOCK","rating": 3},
-        {"id": "1014","code": "waas1x2as","name": "Headphones","description": "Product Description","image": "headphones.jpg","price": 175,"category": "Electronics","quantity": 8,"inventoryStatus": "LOWSTOCK","rating": 5},
-        {"id": "1015","code": "vb34btbg5","name": "Light Green T-Shirt","description": "Product Description","image": "light-green-t-shirt.jpg","price": 49,"category": "Clothing","quantity": 34,"inventoryStatus": "INSTOCK","rating": 4},
-        {"id": "1016","code": "k8l6j58jl","name": "Lime Band","description": "Product Description","image": "lime-band.jpg","price": 79,"category": "Fitness","quantity": 12,"inventoryStatus": "INSTOCK","rating": 3},
-        {"id": "1017","code": "v435nn85n","name": "Mini Speakers","description": "Product Description","image": "mini-speakers.jpg","price": 85,"category": "Clothing","quantity": 42,"inventoryStatus": "INSTOCK","rating": 4},
-        {"id": "1018","code": "09zx9c0zc","name": "Painted Phone Case","description": "Product Description","image": "painted-phone-case.jpg","price": 56,"category": "Accessories","quantity": 41,"inventoryStatus": "INSTOCK","rating": 5},
-        {"id": "1019","code": "mnb5mb2m5","name": "Pink Band","description": "Product Description","image": "pink-band.jpg","price": 79,"category": "Fitness","quantity": 63,"inventoryStatus": "INSTOCK","rating": 4},
-        {"id": "1020","code": "r23fwf2w3","name": "Pink Purse","description": "Product Description","image": "pink-purse.jpg","price": 110,"category": "Accessories","quantity": 0,"inventoryStatus": "OUTOFSTOCK","rating": 4},
-        {"id": "1021","code": "pxpzczo23","name": "Purple Band","description": "Product Description","image": "purple-band.jpg","price": 79,"category": "Fitness","quantity": 6,"inventoryStatus": "LOWSTOCK","rating": 3},
-        {"id": "1022","code": "2c42cb5cb","name": "Purple Gemstone Necklace","description": "Product Description","image": "purple-gemstone-necklace.jpg","price": 45,"category": "Accessories","quantity": 62,"inventoryStatus": "INSTOCK","rating": 4},
-        {"id": "1023","code": "5k43kkk23","name": "Purple T-Shirt","description": "Product Description","image": "purple-t-shirt.jpg","price": 49,"category": "Clothing","quantity": 2,"inventoryStatus": "LOWSTOCK","rating": 5},
-        {"id": "1024","code": "lm2tny2k4","name": "Shoes","description": "Product Description","image": "shoes.jpg","price": 64,"category": "Clothing","quantity": 0,"inventoryStatus": "INSTOCK","rating": 4},
-        {"id": "1025","code": "nbm5mv45n","name": "Sneakers","description": "Product Description","image": "sneakers.jpg","price": 78,"category": "Clothing","quantity": 52,"inventoryStatus": "INSTOCK","rating": 4},
-        {"id": "1026","code": "zx23zc42c","name": "Teal T-Shirt","description": "Product Description","image": "teal-t-shirt.jpg","price": 49,"category": "Clothing","quantity": 3,"inventoryStatus": "LOWSTOCK","rating": 3},
-        {"id": "1027","code": "acvx872gc","name": "Yellow Earbuds","description": "Product Description","image": "yellow-earbuds.jpg","price": 89,"category": "Electronics","quantity": 35,"inventoryStatus": "INSTOCK","rating": 3},
-        {"id": "1028","code": "tx125ck42","name": "Yoga Mat","description": "Product Description","image": "yoga-mat.jpg","price": 20,"category": "Fitness","quantity": 15,"inventoryStatus": "INSTOCK","rating": 5},
-        {"id": "1029","code": "gwuby345v","name": "Yoga Set","description": "Product Description","image": "yoga-set.jpg","price": 20,"category": "Fitness","quantity": 25,"inventoryStatus": "INSTOCK","rating": 8}
-    ]
+   "data": [
+       {"id": "1000","code": "f230fh0g3","name": "Bamboo Watch","description": "Product Description","image": "bamboo-watch.jpg","price": 65,"category": "Accessories","quantity": 24,"inventoryStatus": "INSTOCK","rating": 5},
+       {"id": "1001","code": "nvklal433","name": "Black Watch","description": "Product Description","image": "black-watch.jpg","price": 72,"category": "Accessories","quantity": 61,"inventoryStatus": "INSTOCK","rating": 4},
+       {"id": "1002","code": "zz21cz3c1","name": "Blue Band","description": "Product Description","image": "blue-band.jpg","price": 79,"category": "Fitness","quantity": 2,"inventoryStatus": "LOWSTOCK","rating": 3},
+       {"id": "1003","code": "244wgerg2","name": "Blue T-Shirt","description": "Product Description","image": "blue-t-shirt.jpg","price": 29,"category": "Clothing","quantity": 25,"inventoryStatus": "INSTOCK","rating": 5},
+       {"id": "1004","code": "h456wer53","name": "Bracelet","description": "Product Description","image": "bracelet.jpg","price": 15,"category": "Accessories","quantity": 73,"inventoryStatus": "INSTOCK","rating": 4},
+       {"id": "1005","code": "av2231fwg","name": "Brown Purse","description": "Product Description","image": "brown-purse.jpg","price": 120,"category": "Accessories","quantity": 0,"inventoryStatus": "OUTOFSTOCK","rating": 4},
+       {"id": "1006","code": "bib36pfvm","name": "Chakra Bracelet","description": "Product Description","image": "chakra-bracelet.jpg","price": 32,"category": "Accessories","quantity": 5,"inventoryStatus": "LOWSTOCK","rating": 3},
+       {"id": "1007","code": "mbvjkgip5","name": "Galaxy Earrings","description": "Product Description","image": "galaxy-earrings.jpg","price": 34,"category": "Accessories","quantity": 23,"inventoryStatus": "INSTOCK","rating": 5},
+       {"id": "1008","code": "vbb124btr","name": "Game Controller","description": "Product Description","image": "game-controller.jpg","price": 99,"category": "Electronics","quantity": 2,"inventoryStatus": "LOWSTOCK","rating": 4},
+       {"id": "1009","code": "cm230f032","name": "Gaming Set","description": "Product Description","image": "gaming-set.jpg","price": 299,"category": "Electronics","quantity": 63,"inventoryStatus": "INSTOCK","rating": 3},
+       {"id": "1010","code": "plb34234v","name": "Gold Phone Case","description": "Product Description","image": "gold-phone-case.jpg","price": 24,"category": "Accessories","quantity": 0,"inventoryStatus": "OUTOFSTOCK","rating": 4},
+       {"id": "1011","code": "4920nnc2d","name": "Green Earbuds","description": "Product Description","image": "green-earbuds.jpg","price": 89,"category": "Electronics","quantity": 23,"inventoryStatus": "INSTOCK","rating": 4},
+       {"id": "1012","code": "250vm23cc","name": "Green T-Shirt","description": "Product Description","image": "green-t-shirt.jpg","price": 49,"category": "Clothing","quantity": 74,"inventoryStatus": "INSTOCK","rating": 5},
+       {"id": "1013","code": "fldsmn31b","name": "Grey T-Shirt","description": "Product Description","image": "grey-t-shirt.jpg","price": 48,"category": "Clothing","quantity": 0,"inventoryStatus": "OUTOFSTOCK","rating": 3},
+       {"id": "1014","code": "waas1x2as","name": "Headphones","description": "Product Description","image": "headphones.jpg","price": 175,"category": "Electronics","quantity": 8,"inventoryStatus": "LOWSTOCK","rating": 5},
+       {"id": "1015","code": "vb34btbg5","name": "Light Green T-Shirt","description": "Product Description","image": "light-green-t-shirt.jpg","price": 49,"category": "Clothing","quantity": 34,"inventoryStatus": "INSTOCK","rating": 4},
+       {"id": "1016","code": "k8l6j58jl","name": "Lime Band","description": "Product Description","image": "lime-band.jpg","price": 79,"category": "Fitness","quantity": 12,"inventoryStatus": "INSTOCK","rating": 3},
+       {"id": "1017","code": "v435nn85n","name": "Mini Speakers","description": "Product Description","image": "mini-speakers.jpg","price": 85,"category": "Clothing","quantity": 42,"inventoryStatus": "INSTOCK","rating": 4},
+       {"id": "1018","code": "09zx9c0zc","name": "Painted Phone Case","description": "Product Description","image": "painted-phone-case.jpg","price": 56,"category": "Accessories","quantity": 41,"inventoryStatus": "INSTOCK","rating": 5},
+       {"id": "1019","code": "mnb5mb2m5","name": "Pink Band","description": "Product Description","image": "pink-band.jpg","price": 79,"category": "Fitness","quantity": 63,"inventoryStatus": "INSTOCK","rating": 4},
+       {"id": "1020","code": "r23fwf2w3","name": "Pink Purse","description": "Product Description","image": "pink-purse.jpg","price": 110,"category": "Accessories","quantity": 0,"inventoryStatus": "OUTOFSTOCK","rating": 4},
+       {"id": "1021","code": "pxpzczo23","name": "Purple Band","description": "Product Description","image": "purple-band.jpg","price": 79,"category": "Fitness","quantity": 6,"inventoryStatus": "LOWSTOCK","rating": 3},
+       {"id": "1022","code": "2c42cb5cb","name": "Purple Gemstone Necklace","description": "Product Description","image": "purple-gemstone-necklace.jpg","price": 45,"category": "Accessories","quantity": 62,"inventoryStatus": "INSTOCK","rating": 4},
+       {"id": "1023","code": "5k43kkk23","name": "Purple T-Shirt","description": "Product Description","image": "purple-t-shirt.jpg","price": 49,"category": "Clothing","quantity": 2,"inventoryStatus": "LOWSTOCK","rating": 5},
+       {"id": "1024","code": "lm2tny2k4","name": "Shoes","description": "Product Description","image": "shoes.jpg","price": 64,"category": "Clothing","quantity": 0,"inventoryStatus": "INSTOCK","rating": 4},
+       {"id": "1025","code": "nbm5mv45n","name": "Sneakers","description": "Product Description","image": "sneakers.jpg","price": 78,"category": "Clothing","quantity": 52,"inventoryStatus": "INSTOCK","rating": 4},
+       {"id": "1026","code": "zx23zc42c","name": "Teal T-Shirt","description": "Product Description","image": "teal-t-shirt.jpg","price": 49,"category": "Clothing","quantity": 3,"inventoryStatus": "LOWSTOCK","rating": 3},
+       {"id": "1027","code": "acvx872gc","name": "Yellow Earbuds","description": "Product Description","image": "yellow-earbuds.jpg","price": 89,"category": "Electronics","quantity": 35,"inventoryStatus": "INSTOCK","rating": 3},
+       {"id": "1028","code": "tx125ck42","name": "Yoga Mat","description": "Product Description","image": "yoga-mat.jpg","price": 20,"category": "Fitness","quantity": 15,"inventoryStatus": "INSTOCK","rating": 5},
+       {"id": "1029","code": "gwuby345v","name": "Yoga Set","description": "Product Description","image": "yoga-set.jpg","price": 20,"category": "Fitness","quantity": 25,"inventoryStatus": "INSTOCK","rating": 8}
+   ]
 }
-    `,
+   `,
     'products-small': `
 {
-    "data": [
-        {"id": "1000","code": "f230fh0g3","name": "Bamboo Watch","description": "Product Description","image": "bamboo-watch.jpg","price": 65,"category": "Accessories","quantity": 24,"inventoryStatus": "INSTOCK","rating": 5},
-        {"id": "1001","code": "nvklal433","name": "Black Watch","description": "Product Description","image": "black-watch.jpg","price": 72,"category": "Accessories","quantity": 61,"inventoryStatus": "INSTOCK","rating": 4},
-        {"id": "1002","code": "zz21cz3c1","name": "Blue Band","description": "Product Description","image": "blue-band.jpg","price": 79,"category": "Fitness","quantity": 2,"inventoryStatus": "LOWSTOCK","rating": 3},
-        {"id": "1003","code": "244wgerg2","name": "Blue T-Shirt","description": "Product Description","image": "blue-t-shirt.jpg","price": 29,"category": "Clothing","quantity": 25,"inventoryStatus": "INSTOCK","rating": 5},
-        {"id": "1004","code": "h456wer53","name": "Bracelet","description": "Product Description","image": "bracelet.jpg","price": 15,"category": "Accessories","quantity": 73,"inventoryStatus": "INSTOCK","rating": 4},
-        {"id": "1005","code": "av2231fwg","name": "Brown Purse","description": "Product Description","image": "brown-purse.jpg","price": 120,"category": "Accessories","quantity": 0,"inventoryStatus": "OUTOFSTOCK","rating": 4},
-        {"id": "1006","code": "bib36pfvm","name": "Chakra Bracelet","description": "Product Description","image": "chakra-bracelet.jpg","price": 32,"category": "Accessories","quantity": 5,"inventoryStatus": "LOWSTOCK","rating": 3},
-        {"id": "1007","code": "mbvjkgip5","name": "Galaxy Earrings","description": "Product Description","image": "galaxy-earrings.jpg","price": 34,"category": "Accessories","quantity": 23,"inventoryStatus": "INSTOCK","rating": 5},
-        {"id": "1008","code": "vbb124btr","name": "Game Controller","description": "Product Description","image": "game-controller.jpg","price": 99,"category": "Electronics","quantity": 2,"inventoryStatus": "LOWSTOCK","rating": 4},
-        {"id": "1009","code": "cm230f032","name": "Gaming Set","description": "Product Description","image": "gaming-set.jpg","price": 299,"category": "Electronics","quantity": 63,"inventoryStatus": "INSTOCK","rating": 3}
-    ]
+   "data": [
+       {"id": "1000","code": "f230fh0g3","name": "Bamboo Watch","description": "Product Description","image": "bamboo-watch.jpg","price": 65,"category": "Accessories","quantity": 24,"inventoryStatus": "INSTOCK","rating": 5},
+       {"id": "1001","code": "nvklal433","name": "Black Watch","description": "Product Description","image": "black-watch.jpg","price": 72,"category": "Accessories","quantity": 61,"inventoryStatus": "INSTOCK","rating": 4},
+       {"id": "1002","code": "zz21cz3c1","name": "Blue Band","description": "Product Description","image": "blue-band.jpg","price": 79,"category": "Fitness","quantity": 2,"inventoryStatus": "LOWSTOCK","rating": 3},
+       {"id": "1003","code": "244wgerg2","name": "Blue T-Shirt","description": "Product Description","image": "blue-t-shirt.jpg","price": 29,"category": "Clothing","quantity": 25,"inventoryStatus": "INSTOCK","rating": 5},
+       {"id": "1004","code": "h456wer53","name": "Bracelet","description": "Product Description","image": "bracelet.jpg","price": 15,"category": "Accessories","quantity": 73,"inventoryStatus": "INSTOCK","rating": 4},
+       {"id": "1005","code": "av2231fwg","name": "Brown Purse","description": "Product Description","image": "brown-purse.jpg","price": 120,"category": "Accessories","quantity": 0,"inventoryStatus": "OUTOFSTOCK","rating": 4},
+       {"id": "1006","code": "bib36pfvm","name": "Chakra Bracelet","description": "Product Description","image": "chakra-bracelet.jpg","price": 32,"category": "Accessories","quantity": 5,"inventoryStatus": "LOWSTOCK","rating": 3},
+       {"id": "1007","code": "mbvjkgip5","name": "Galaxy Earrings","description": "Product Description","image": "galaxy-earrings.jpg","price": 34,"category": "Accessories","quantity": 23,"inventoryStatus": "INSTOCK","rating": 5},
+       {"id": "1008","code": "vbb124btr","name": "Game Controller","description": "Product Description","image": "game-controller.jpg","price": 99,"category": "Electronics","quantity": 2,"inventoryStatus": "LOWSTOCK","rating": 4},
+       {"id": "1009","code": "cm230f032","name": "Gaming Set","description": "Product Description","image": "gaming-set.jpg","price": 299,"category": "Electronics","quantity": 63,"inventoryStatus": "INSTOCK","rating": 3}
+   ]
 }
-    `,
+   `,
     'products-orders': `
 {
-    "data": [
-        {"id": "1000","code": "f230fh0g3","name": "Bamboo Watch","description": "Product Description","image": "bamboo-watch.jpg","price": 65,"category": "Accessories","quantity": 24,"inventoryStatus": "INSTOCK","rating": 5,"orders": [{"id": "1000-0","productCode": "f230fh0g3","date": "2020-09-13","amount": 65,"quantity": 1,"customer": "David James","status": "PENDING"},{"id": "1001-1","productCode": "f230fh0g3","date": "2020-05-14","amount": 130,"quantity": 2,"customer": "Leon Rodrigues","status": "DELIVERED"},{"id": "1002-2","productCode": "f230fh0g3","date": "2019-01-04","amount": 65,"quantity": 1,"customer": "Juan Alejandro","status": "RETURNED"},{"id": "1003-3","productCode": "f230fh0g3","date": "2020-09-13","amount": 195,"quantity": 3,"customer": "Claire Morrow","status": "CANCELLED"}]},
-        {"id": "1001","code": "nvklal433","name": "Black Watch","description": "Product Description","image": "black-watch.jpg","price": 72,"category": "Accessories","quantity": 61,"inventoryStatus": "INSTOCK","rating": 4,"orders": [{"id": "1001-0","productCode": "nvklal433","date": "2020-05-14","amount": 72,"quantity": 1,"customer": "Maisha Jefferson","status": "DELIVERED"},{"id": "1001-1","productCode": "nvklal433","date": "2020-02-28","amount": 144,"quantity": 2,"customer": "Octavia Murillo","status": "PENDING"}]},
-        {"id": "1002","code": "zz21cz3c1","name": "Blue Band","description": "Product Description","image": "blue-band.jpg","price": 79,"category": "Fitness","quantity": 2,"inventoryStatus": "LOWSTOCK","rating": 3,"orders": [{"id": "1002-0","productCode": "zz21cz3c1","date": "2020-07-05","amount": 79,"quantity": 1,"customer": "Stacey Leja","status": "DELIVERED"},{"id": "1002-1","productCode": "zz21cz3c1","date": "2020-02-06","amount": 79,"quantity": 1,"customer": "Ashley Wickens","status": "DELIVERED"}]},
-        {"id": "1003","code": "244wgerg2","name": "Blue T-Shirt","description": "Product Description","image": "blue-t-shirt.jpg","price": 29,"category": "Clothing","quantity": 25,"inventoryStatus": "INSTOCK","rating": 5,"orders": []},
-        {"id": "1004","code": "h456wer53","name": "Bracelet","description": "Product Description","image": "bracelet.jpg","price": 15,"category": "Accessories","quantity": 73,"inventoryStatus": "INSTOCK","rating": 4,"orders": [{"id": "1004-0","productCode": "h456wer53","date": "2020-09-05","amount": 60,"quantity": 4,"customer": "Mayumi Misaki","status": "PENDING"},{"id": "1004-5","productCode": "h456wer53","date": "2019-04-16","amount": 2,"quantity": 30,"customer": "Francesco Salvatore","status": "DELIVERED"}]},
-        {"id": "1005","code": "av2231fwg","name": "Brown Purse","description": "Product Description","image": "brown-purse.jpg","price": 120,"category": "Accessories","quantity": 0,"inventoryStatus": "OUTOFSTOCK","rating": 4,"orders": [{"id": "1005-0","productCode": "av2231fwg","date": "2020-01-25","amount": 120,"quantity": 1,"customer": "Isabel Sinclair","status": "RETURNED"},{"id": "1005-1","productCode": "av2231fwg","date": "2019-03-12","amount": 240,"quantity": 2,"customer": "Lionel Clifford","status": "DELIVERED"},{"id": "1005-2","productCode": "av2231fwg","date": "2019-05-05","amount": 120,"quantity": 1,"customer": "Cody Chavez","status": "DELIVERED"}]},
-        {"id": "1006","code": "bib36pfvm","name": "Chakra Bracelet","description": "Product Description","image": "chakra-bracelet.jpg","price": 32,"category": "Accessories","quantity": 5,"inventoryStatus": "LOWSTOCK","rating": 3,"orders": [{"id": "1006-0","productCode": "bib36pfvm","date": "2020-02-24","amount": 32,"quantity": 1,"customer": "Arvin Darci","status": "DELIVERED"},{"id": "1006-1","productCode": "bib36pfvm","date": "2020-01-14","amount": 64,"quantity": 2,"customer": "Izzy Jones","status": "PENDING"}]},
-        {"id": "1007","code": "mbvjkgip5","name": "Galaxy Earrings","description": "Product Description","image": "galaxy-earrings.jpg","price": 34,"category": "Accessories","quantity": 23,"inventoryStatus": "INSTOCK","rating": 5,"orders": [{"id": "1007-0","productCode": "mbvjkgip5","date": "2020-06-19","amount": 34,"quantity": 1,"customer": "Jennifer Smith","status": "DELIVERED"}]},
-        {"id": "1008","code": "vbb124btr","name": "Game Controller","description": "Product Description","image": "game-controller.jpg","price": 99,"category": "Electronics","quantity": 2,"inventoryStatus": "LOWSTOCK","rating": 4,"orders": [{"id": "1008-0","productCode": "vbb124btr","date": "2020-01-05","amount": 99,"quantity": 1,"customer": "Jeanfrancois David","status": "DELIVERED"},{"id": "1008-1","productCode": "vbb124btr","date": "2020-01-19","amount": 198,"quantity": 2,"customer": "Ivar Greenwood","status": "RETURNED"}]},
-        {"id": "1009","code": "cm230f032","name": "Gaming Set","description": "Product Description","image": "gaming-set.jpg","price": 299,"category": "Electronics","quantity": 63,"inventoryStatus": "INSTOCK","rating": 3,"orders": [{"id": "1009-0","productCode": "cm230f032","date": "2020-06-24","amount": 299,"quantity": 1,"customer": "Kadeem Mujtaba","status": "PENDING"},{"id": "1009-1","productCode": "cm230f032","date": "2020-05-11","amount": 299,"quantity": 1,"customer": "Ashley Wickens","status": "DELIVERED"},{"id": "1009-2","productCode": "cm230f032","date": "2019-02-07","amount": 299,"quantity": 1,"customer": "Julie Johnson","status": "DELIVERED"},{"id": "1009-3","productCode": "cm230f032","date": "2020-04-26","amount": 299,"quantity": 1,"customer": "Tony Costa","status": "CANCELLED"}]},
-        {"id": "1010","code": "plb34234v","name": "Gold Phone Case","description": "Product Description","image": "gold-phone-case.jpg","price": 24,"category": "Accessories","quantity": 0,"inventoryStatus": "OUTOFSTOCK","rating": 4,"orders": [{"id": "1010-0","productCode": "plb34234v","date": "2020-02-04","amount": 24,"quantity": 1,"customer": "James Butt","status": "DELIVERED"},{"id": "1010-1","productCode": "plb34234v","date": "2020-05-05","amount": 48,"quantity": 2,"customer": "Josephine Darakjy","status": "DELIVERED"}]},
-        {"id": "1011","code": "4920nnc2d","name": "Green Earbuds","description": "Product Description","image": "green-earbuds.jpg","price": 89,"category": "Electronics","quantity": 23,"inventoryStatus": "INSTOCK","rating": 4,"orders": [{"id": "1011-0","productCode": "4920nnc2d","date": "2020-06-01","amount": 89,"quantity": 1,"customer": "Art Venere","status": "DELIVERED"}]},
-        {"id": "1012","code": "250vm23cc","name": "Green T-Shirt","description": "Product Description","image": "green-t-shirt.jpg","price": 49,"category": "Clothing","quantity": 74,"inventoryStatus": "INSTOCK","rating": 5,"orders": [{"id": "1012-0","productCode": "250vm23cc","date": "2020-02-05","amount": 49,"quantity": 1,"customer": "Lenna Paprocki","status": "DELIVERED"},{"id": "1012-1","productCode": "250vm23cc","date": "2020-02-15","amount": 49,"quantity": 1,"customer": "Donette Foller","status": "PENDING"}]},
-        {"id": "1013","code": "fldsmn31b","name": "Grey T-Shirt","description": "Product Description","image": "grey-t-shirt.jpg","price": 48,"category": "Clothing","quantity": 0,"inventoryStatus": "OUTOFSTOCK","rating": 3,"orders": [{"id": "1013-0","productCode": "fldsmn31b","date": "2020-04-01","amount": 48,"quantity": 1,"customer": "Simona Morasca","status": "DELIVERED"}]},
-        {"id": "1014","code": "waas1x2as","name": "Headphones","description": "Product Description","image": "headphones.jpg","price": 175,"category": "Electronics","quantity": 8,"inventoryStatus": "LOWSTOCK","rating": 5,"orders": [{"id": "1014-0","productCode": "waas1x2as","date": "2020-05-15","amount": 175,"quantity": 1,"customer": "Lenna Paprocki","status": "DELIVERED"},{"id": "1014-1","productCode": "waas1x2as","date": "2020-01-02","amount": 175,"quantity": 1,"customer": "Donette Foller","status": "CANCELLED"}]},
-        {"id": "1015","code": "vb34btbg5","name": "Light Green T-Shirt","description": "Product Description","image": "light-green-t-shirt.jpg","price": 49,"category": "Clothing","quantity": 34,"inventoryStatus": "INSTOCK","rating": 4,"orders": [{"id": "1015-0","productCode": "vb34btbg5","date": "2020-07-02","amount": 98,"quantity": 2,"customer": "Mitsue Tollner","status": "DELIVERED"}]},
-        {"id": "1016","code": "k8l6j58jl","name": "Lime Band","description": "Product Description","image": "lime-band.jpg","price": 79,"category": "Fitness","quantity": 12,"inventoryStatus": "INSTOCK","rating": 3,"orders": []},
-        {"id": "1017","code": "v435nn85n","name": "Mini Speakers","description": "Product Description","image": "mini-speakers.jpg","price": 85,"category": "Clothing","quantity": 42,"inventoryStatus": "INSTOCK","rating": 4,"orders": [{"id": "1017-0","productCode": "v435nn85n","date": "2020-07-12","amount": 85,"quantity": 1,"customer": "Minna Amigon","status": "DELIVERED"}]},
-        {"id": "1018","code": "09zx9c0zc","name": "Painted Phone Case","description": "Product Description","image": "painted-phone-case.jpg","price": 56,"category": "Accessories","quantity": 41,"inventoryStatus": "INSTOCK","rating": 5,"orders": [{"id": "1018-0","productCode": "09zx9c0zc","date": "2020-07-01","amount": 56,"quantity": 1,"customer": "Abel Maclead","status": "DELIVERED"},{"id": "1018-1","productCode": "09zx9c0zc","date": "2020-05-02","amount": 56,"quantity": 1,"customer": "Minna Amigon","status": "RETURNED"}]},
-        {"id": "1019","code": "mnb5mb2m5","name": "Pink Band","description": "Product Description","image": "pink-band.jpg","price": 79,"category": "Fitness","quantity": 63,"inventoryStatus": "INSTOCK","rating": 4,"orders": []},
-        {"id": "1020","code": "r23fwf2w3","name": "Pink Purse","description": "Product Description","image": "pink-purse.jpg","price": 110,"category": "Accessories","quantity": 0,"inventoryStatus": "OUTOFSTOCK","rating": 4,"orders": [{"id": "1020-0","productCode": "r23fwf2w3","date": "2020-05-29","amount": 110,"quantity": 1,"customer": "Kiley Caldarera","status": "DELIVERED"},{"id": "1020-1","productCode": "r23fwf2w3","date": "2020-02-11","amount": 220,"quantity": 2,"customer": "Graciela Ruta","status": "DELIVERED"}]},
-        {"id": "1021","code": "pxpzczo23","name": "Purple Band","description": "Product Description","image": "purple-band.jpg","price": 79,"category": "Fitness","quantity": 6,"inventoryStatus": "LOWSTOCK","rating": 3,"orders": [{"id": "1021-0","productCode": "pxpzczo23","date": "2020-02-02","amount": 79,"quantity": 1,"customer": "Cammy Albares","status": "DELIVERED"}]},
-        {"id": "1022","code": "2c42cb5cb","name": "Purple Gemstone Necklace","description": "Product Description","image": "purple-gemstone-necklace.jpg","price": 45,"category": "Accessories","quantity": 62,"inventoryStatus": "INSTOCK","rating": 4,"orders": [{"id": "1022-0","productCode": "2c42cb5cb","date": "2020-06-29","amount": 45,"quantity": 1,"customer": "Mattie Poquette","status": "DELIVERED"},{"id": "1022-1","productCode": "2c42cb5cb","date": "2020-02-11","amount": 135,"quantity": 3,"customer": "Meaghan Garufi","status": "DELIVERED"}]},
-        {"id": "1023","code": "5k43kkk23","name": "Purple T-Shirt","description": "Product Description","image": "purple-t-shirt.jpg","price": 49,"category": "Clothing","quantity": 2,"inventoryStatus": "LOWSTOCK","rating": 5,"orders": [{"id": "1023-0","productCode": "5k43kkk23","date": "2020-04-15","amount": 49,"quantity": 1,"customer": "Gladys Rim","status": "RETURNED"}]},
-        {"id": "1024","code": "lm2tny2k4","name": "Shoes","description": "Product Description","image": "shoes.jpg","price": 64,"category": "Clothing","quantity": 0,"inventoryStatus": "INSTOCK","rating": 4,"orders": []},
-        {"id": "1025","code": "nbm5mv45n","name": "Sneakers","description": "Product Description","image": "sneakers.jpg","price": 78,"category": "Clothing","quantity": 52,"inventoryStatus": "INSTOCK","rating": 4,"orders": [{"id": "1025-0","productCode": "nbm5mv45n","date": "2020-02-19","amount": 78,"quantity": 1,"customer": "Yuki Whobrey","status": "DELIVERED"},{"id": "1025-1","productCode": "nbm5mv45n","date": "2020-05-21","amount": 78,"quantity": 1,"customer": "Fletcher Flosi","status": "PENDING"}]},
-        {"id": "1026","code": "zx23zc42c","name": "Teal T-Shirt","description": "Product Description","image": "teal-t-shirt.jpg","price": 49,"category": "Clothing","quantity": 3,"inventoryStatus": "LOWSTOCK","rating": 3,"orders": [{"id": "1026-0","productCode": "zx23zc42c","date": "2020-04-24","amount": 98,"quantity": 2,"customer": "Bette Nicka","status": "DELIVERED"}]},
-        {"id": "1027","code": "acvx872gc","name": "Yellow Earbuds","description": "Product Description","image": "yellow-earbuds.jpg","price": 89,"category": "Electronics","quantity": 35,"inventoryStatus": "INSTOCK","rating": 3,"orders": [{"id": "1027-0","productCode": "acvx872gc","date": "2020-01-29","amount": 89,"quantity": 1,"customer": "Veronika Inouye","status": "DELIVERED"},{"id": "1027-1","productCode": "acvx872gc","date": "2020-06-11","amount": 89,"quantity": 1,"customer": "Willard Kolmetz","status": "DELIVERED"}]},
-        {"id": "1028","code": "tx125ck42","name": "Yoga Mat","description": "Product Description","image": "yoga-mat.jpg","price": 20,"category": "Fitness","quantity": 15,"inventoryStatus": "INSTOCK","rating": 5,"orders": []},
-        {"id": "1029","code": "gwuby345v","name": "Yoga Set","description": "Product Description","image": "yoga-set.jpg","price": 20,"category": "Fitness","quantity": 25,"inventoryStatus": "INSTOCK","rating": 8,"orders": [{"id": "1026-0","productCode": "gwuby345v","date": "2020-02-14","amount": 4,"quantity": 80,"customer": "Maryann Royster","status": "DELIVERED"}]}
-    ]
+   "data": [
+       {"id": "1000","code": "f230fh0g3","name": "Bamboo Watch","description": "Product Description","image": "bamboo-watch.jpg","price": 65,"category": "Accessories","quantity": 24,"inventoryStatus": "INSTOCK","rating": 5,"orders": [{"id": "1000-0","productCode": "f230fh0g3","date": "2020-09-13","amount": 65,"quantity": 1,"customer": "David James","status": "PENDING"},{"id": "1001-1","productCode": "f230fh0g3","date": "2020-05-14","amount": 130,"quantity": 2,"customer": "Leon Rodrigues","status": "DELIVERED"},{"id": "1002-2","productCode": "f230fh0g3","date": "2019-01-04","amount": 65,"quantity": 1,"customer": "Juan Alejandro","status": "RETURNED"},{"id": "1003-3","productCode": "f230fh0g3","date": "2020-09-13","amount": 195,"quantity": 3,"customer": "Claire Morrow","status": "CANCELLED"}]},
+       {"id": "1001","code": "nvklal433","name": "Black Watch","description": "Product Description","image": "black-watch.jpg","price": 72,"category": "Accessories","quantity": 61,"inventoryStatus": "INSTOCK","rating": 4,"orders": [{"id": "1001-0","productCode": "nvklal433","date": "2020-05-14","amount": 72,"quantity": 1,"customer": "Maisha Jefferson","status": "DELIVERED"},{"id": "1001-1","productCode": "nvklal433","date": "2020-02-28","amount": 144,"quantity": 2,"customer": "Octavia Murillo","status": "PENDING"}]},
+       {"id": "1002","code": "zz21cz3c1","name": "Blue Band","description": "Product Description","image": "blue-band.jpg","price": 79,"category": "Fitness","quantity": 2,"inventoryStatus": "LOWSTOCK","rating": 3,"orders": [{"id": "1002-0","productCode": "zz21cz3c1","date": "2020-07-05","amount": 79,"quantity": 1,"customer": "Stacey Leja","status": "DELIVERED"},{"id": "1002-1","productCode": "zz21cz3c1","date": "2020-02-06","amount": 79,"quantity": 1,"customer": "Ashley Wickens","status": "DELIVERED"}]},
+       {"id": "1003","code": "244wgerg2","name": "Blue T-Shirt","description": "Product Description","image": "blue-t-shirt.jpg","price": 29,"category": "Clothing","quantity": 25,"inventoryStatus": "INSTOCK","rating": 5,"orders": []},
+       {"id": "1004","code": "h456wer53","name": "Bracelet","description": "Product Description","image": "bracelet.jpg","price": 15,"category": "Accessories","quantity": 73,"inventoryStatus": "INSTOCK","rating": 4,"orders": [{"id": "1004-0","productCode": "h456wer53","date": "2020-09-05","amount": 60,"quantity": 4,"customer": "Mayumi Misaki","status": "PENDING"},{"id": "1004-5","productCode": "h456wer53","date": "2019-04-16","amount": 2,"quantity": 30,"customer": "Francesco Salvatore","status": "DELIVERED"}]},
+       {"id": "1005","code": "av2231fwg","name": "Brown Purse","description": "Product Description","image": "brown-purse.jpg","price": 120,"category": "Accessories","quantity": 0,"inventoryStatus": "OUTOFSTOCK","rating": 4,"orders": [{"id": "1005-0","productCode": "av2231fwg","date": "2020-01-25","amount": 120,"quantity": 1,"customer": "Isabel Sinclair","status": "RETURNED"},{"id": "1005-1","productCode": "av2231fwg","date": "2019-03-12","amount": 240,"quantity": 2,"customer": "Lionel Clifford","status": "DELIVERED"},{"id": "1005-2","productCode": "av2231fwg","date": "2019-05-05","amount": 120,"quantity": 1,"customer": "Cody Chavez","status": "DELIVERED"}]},
+       {"id": "1006","code": "bib36pfvm","name": "Chakra Bracelet","description": "Product Description","image": "chakra-bracelet.jpg","price": 32,"category": "Accessories","quantity": 5,"inventoryStatus": "LOWSTOCK","rating": 3,"orders": [{"id": "1006-0","productCode": "bib36pfvm","date": "2020-02-24","amount": 32,"quantity": 1,"customer": "Arvin Darci","status": "DELIVERED"},{"id": "1006-1","productCode": "bib36pfvm","date": "2020-01-14","amount": 64,"quantity": 2,"customer": "Izzy Jones","status": "PENDING"}]},
+       {"id": "1007","code": "mbvjkgip5","name": "Galaxy Earrings","description": "Product Description","image": "galaxy-earrings.jpg","price": 34,"category": "Accessories","quantity": 23,"inventoryStatus": "INSTOCK","rating": 5,"orders": [{"id": "1007-0","productCode": "mbvjkgip5","date": "2020-06-19","amount": 34,"quantity": 1,"customer": "Jennifer Smith","status": "DELIVERED"}]},
+       {"id": "1008","code": "vbb124btr","name": "Game Controller","description": "Product Description","image": "game-controller.jpg","price": 99,"category": "Electronics","quantity": 2,"inventoryStatus": "LOWSTOCK","rating": 4,"orders": [{"id": "1008-0","productCode": "vbb124btr","date": "2020-01-05","amount": 99,"quantity": 1,"customer": "Jeanfrancois David","status": "DELIVERED"},{"id": "1008-1","productCode": "vbb124btr","date": "2020-01-19","amount": 198,"quantity": 2,"customer": "Ivar Greenwood","status": "RETURNED"}]},
+       {"id": "1009","code": "cm230f032","name": "Gaming Set","description": "Product Description","image": "gaming-set.jpg","price": 299,"category": "Electronics","quantity": 63,"inventoryStatus": "INSTOCK","rating": 3,"orders": [{"id": "1009-0","productCode": "cm230f032","date": "2020-06-24","amount": 299,"quantity": 1,"customer": "Kadeem Mujtaba","status": "PENDING"},{"id": "1009-1","productCode": "cm230f032","date": "2020-05-11","amount": 299,"quantity": 1,"customer": "Ashley Wickens","status": "DELIVERED"},{"id": "1009-2","productCode": "cm230f032","date": "2019-02-07","amount": 299,"quantity": 1,"customer": "Julie Johnson","status": "DELIVERED"},{"id": "1009-3","productCode": "cm230f032","date": "2020-04-26","amount": 299,"quantity": 1,"customer": "Tony Costa","status": "CANCELLED"}]},
+       {"id": "1010","code": "plb34234v","name": "Gold Phone Case","description": "Product Description","image": "gold-phone-case.jpg","price": 24,"category": "Accessories","quantity": 0,"inventoryStatus": "OUTOFSTOCK","rating": 4,"orders": [{"id": "1010-0","productCode": "plb34234v","date": "2020-02-04","amount": 24,"quantity": 1,"customer": "James Butt","status": "DELIVERED"},{"id": "1010-1","productCode": "plb34234v","date": "2020-05-05","amount": 48,"quantity": 2,"customer": "Josephine Darakjy","status": "DELIVERED"}]},
+       {"id": "1011","code": "4920nnc2d","name": "Green Earbuds","description": "Product Description","image": "green-earbuds.jpg","price": 89,"category": "Electronics","quantity": 23,"inventoryStatus": "INSTOCK","rating": 4,"orders": [{"id": "1011-0","productCode": "4920nnc2d","date": "2020-06-01","amount": 89,"quantity": 1,"customer": "Art Venere","status": "DELIVERED"}]},
+       {"id": "1012","code": "250vm23cc","name": "Green T-Shirt","description": "Product Description","image": "green-t-shirt.jpg","price": 49,"category": "Clothing","quantity": 74,"inventoryStatus": "INSTOCK","rating": 5,"orders": [{"id": "1012-0","productCode": "250vm23cc","date": "2020-02-05","amount": 49,"quantity": 1,"customer": "Lenna Paprocki","status": "DELIVERED"},{"id": "1012-1","productCode": "250vm23cc","date": "2020-02-15","amount": 49,"quantity": 1,"customer": "Donette Foller","status": "PENDING"}]},
+       {"id": "1013","code": "fldsmn31b","name": "Grey T-Shirt","description": "Product Description","image": "grey-t-shirt.jpg","price": 48,"category": "Clothing","quantity": 0,"inventoryStatus": "OUTOFSTOCK","rating": 3,"orders": [{"id": "1013-0","productCode": "fldsmn31b","date": "2020-04-01","amount": 48,"quantity": 1,"customer": "Simona Morasca","status": "DELIVERED"}]},
+       {"id": "1014","code": "waas1x2as","name": "Headphones","description": "Product Description","image": "headphones.jpg","price": 175,"category": "Electronics","quantity": 8,"inventoryStatus": "LOWSTOCK","rating": 5,"orders": [{"id": "1014-0","productCode": "waas1x2as","date": "2020-05-15","amount": 175,"quantity": 1,"customer": "Lenna Paprocki","status": "DELIVERED"},{"id": "1014-1","productCode": "waas1x2as","date": "2020-01-02","amount": 175,"quantity": 1,"customer": "Donette Foller","status": "CANCELLED"}]},
+       {"id": "1015","code": "vb34btbg5","name": "Light Green T-Shirt","description": "Product Description","image": "light-green-t-shirt.jpg","price": 49,"category": "Clothing","quantity": 34,"inventoryStatus": "INSTOCK","rating": 4,"orders": [{"id": "1015-0","productCode": "vb34btbg5","date": "2020-07-02","amount": 98,"quantity": 2,"customer": "Mitsue Tollner","status": "DELIVERED"}]},
+       {"id": "1016","code": "k8l6j58jl","name": "Lime Band","description": "Product Description","image": "lime-band.jpg","price": 79,"category": "Fitness","quantity": 12,"inventoryStatus": "INSTOCK","rating": 3,"orders": []},
+       {"id": "1017","code": "v435nn85n","name": "Mini Speakers","description": "Product Description","image": "mini-speakers.jpg","price": 85,"category": "Clothing","quantity": 42,"inventoryStatus": "INSTOCK","rating": 4,"orders": [{"id": "1017-0","productCode": "v435nn85n","date": "2020-07-12","amount": 85,"quantity": 1,"customer": "Minna Amigon","status": "DELIVERED"}]},
+       {"id": "1018","code": "09zx9c0zc","name": "Painted Phone Case","description": "Product Description","image": "painted-phone-case.jpg","price": 56,"category": "Accessories","quantity": 41,"inventoryStatus": "INSTOCK","rating": 5,"orders": [{"id": "1018-0","productCode": "09zx9c0zc","date": "2020-07-01","amount": 56,"quantity": 1,"customer": "Abel Maclead","status": "DELIVERED"},{"id": "1018-1","productCode": "09zx9c0zc","date": "2020-05-02","amount": 56,"quantity": 1,"customer": "Minna Amigon","status": "RETURNED"}]},
+       {"id": "1019","code": "mnb5mb2m5","name": "Pink Band","description": "Product Description","image": "pink-band.jpg","price": 79,"category": "Fitness","quantity": 63,"inventoryStatus": "INSTOCK","rating": 4,"orders": []},
+       {"id": "1020","code": "r23fwf2w3","name": "Pink Purse","description": "Product Description","image": "pink-purse.jpg","price": 110,"category": "Accessories","quantity": 0,"inventoryStatus": "OUTOFSTOCK","rating": 4,"orders": [{"id": "1020-0","productCode": "r23fwf2w3","date": "2020-05-29","amount": 110,"quantity": 1,"customer": "Kiley Caldarera","status": "DELIVERED"},{"id": "1020-1","productCode": "r23fwf2w3","date": "2020-02-11","amount": 220,"quantity": 2,"customer": "Graciela Ruta","status": "DELIVERED"}]},
+       {"id": "1021","code": "pxpzczo23","name": "Purple Band","description": "Product Description","image": "purple-band.jpg","price": 79,"category": "Fitness","quantity": 6,"inventoryStatus": "LOWSTOCK","rating": 3,"orders": [{"id": "1021-0","productCode": "pxpzczo23","date": "2020-02-02","amount": 79,"quantity": 1,"customer": "Cammy Albares","status": "DELIVERED"}]},
+       {"id": "1022","code": "2c42cb5cb","name": "Purple Gemstone Necklace","description": "Product Description","image": "purple-gemstone-necklace.jpg","price": 45,"category": "Accessories","quantity": 62,"inventoryStatus": "INSTOCK","rating": 4,"orders": [{"id": "1022-0","productCode": "2c42cb5cb","date": "2020-06-29","amount": 45,"quantity": 1,"customer": "Mattie Poquette","status": "DELIVERED"},{"id": "1022-1","productCode": "2c42cb5cb","date": "2020-02-11","amount": 135,"quantity": 3,"customer": "Meaghan Garufi","status": "DELIVERED"}]},
+       {"id": "1023","code": "5k43kkk23","name": "Purple T-Shirt","description": "Product Description","image": "purple-t-shirt.jpg","price": 49,"category": "Clothing","quantity": 2,"inventoryStatus": "LOWSTOCK","rating": 5,"orders": [{"id": "1023-0","productCode": "5k43kkk23","date": "2020-04-15","amount": 49,"quantity": 1,"customer": "Gladys Rim","status": "RETURNED"}]},
+       {"id": "1024","code": "lm2tny2k4","name": "Shoes","description": "Product Description","image": "shoes.jpg","price": 64,"category": "Clothing","quantity": 0,"inventoryStatus": "INSTOCK","rating": 4,"orders": []},
+       {"id": "1025","code": "nbm5mv45n","name": "Sneakers","description": "Product Description","image": "sneakers.jpg","price": 78,"category": "Clothing","quantity": 52,"inventoryStatus": "INSTOCK","rating": 4,"orders": [{"id": "1025-0","productCode": "nbm5mv45n","date": "2020-02-19","amount": 78,"quantity": 1,"customer": "Yuki Whobrey","status": "DELIVERED"},{"id": "1025-1","productCode": "nbm5mv45n","date": "2020-05-21","amount": 78,"quantity": 1,"customer": "Fletcher Flosi","status": "PENDING"}]},
+       {"id": "1026","code": "zx23zc42c","name": "Teal T-Shirt","description": "Product Description","image": "teal-t-shirt.jpg","price": 49,"category": "Clothing","quantity": 3,"inventoryStatus": "LOWSTOCK","rating": 3,"orders": [{"id": "1026-0","productCode": "zx23zc42c","date": "2020-04-24","amount": 98,"quantity": 2,"customer": "Bette Nicka","status": "DELIVERED"}]},
+       {"id": "1027","code": "acvx872gc","name": "Yellow Earbuds","description": "Product Description","image": "yellow-earbuds.jpg","price": 89,"category": "Electronics","quantity": 35,"inventoryStatus": "INSTOCK","rating": 3,"orders": [{"id": "1027-0","productCode": "acvx872gc","date": "2020-01-29","amount": 89,"quantity": 1,"customer": "Veronika Inouye","status": "DELIVERED"},{"id": "1027-1","productCode": "acvx872gc","date": "2020-06-11","amount": 89,"quantity": 1,"customer": "Willard Kolmetz","status": "DELIVERED"}]},
+       {"id": "1028","code": "tx125ck42","name": "Yoga Mat","description": "Product Description","image": "yoga-mat.jpg","price": 20,"category": "Fitness","quantity": 15,"inventoryStatus": "INSTOCK","rating": 5,"orders": []},
+       {"id": "1029","code": "gwuby345v","name": "Yoga Set","description": "Product Description","image": "yoga-set.jpg","price": 20,"category": "Fitness","quantity": 25,"inventoryStatus": "INSTOCK","rating": 8,"orders": [{"id": "1026-0","productCode": "gwuby345v","date": "2020-02-14","amount": 4,"quantity": 80,"customer": "Maryann Royster","status": "DELIVERED"}]}
+   ]
 }
-    `,
+   `,
     'products-orders-small': `
 {
-    "data": [
-        {"id": "1000","code": "f230fh0g3","name": "Bamboo Watch","description": "Product Description","image": "bamboo-watch.jpg","price": 65,"category": "Accessories","quantity": 24,"inventoryStatus": "INSTOCK","rating": 5,"orders": [{"id": "1000","productCode": "f230fh0g3","date": "2020-09-13","amount": 65,"quantity": 1,"customer": "David James","status": "PENDING"},{"id": "1001","productCode": "f230fh0g3","date": "2020-05-14","amount": 130,"quantity": 2,"customer": "Leon Rodrigues","status": "DELIVERED"},{"id": "1002","productCode": "f230fh0g3","date": "2019-01-04","amount": 65,"quantity": 1,"customer": "Juan Alejandro","status": "RETURNED"},{"id": "1003","productCode": "f230fh0g3","date": "2020-09-13","amount": 195,"quantity": 3,"customer": "Claire Morrow","status": "CANCELLED"}]},
-        {"id": "1001","code": "nvklal433","name": "Black Watch","description": "Product Description","image": "black-watch.jpg","price": 72,"category": "Accessories","quantity": 61,"inventoryStatus": "INSTOCK","rating": 4,"orders": [{"id": "2000","productCode": "nvklal433","date": "2020-05-14","amount": 72,"quantity": 1,"customer": "Maisha Jefferson","status": "DELIVERED"},{"id": "2001","productCode": "nvklal433","date": "2020-02-28","amount": 144,"quantity": 2,"customer": "Octavia Murillo","status": "PENDING"}]},
-        {"id": "1002","code": "zz21cz3c1","name": "Blue Band","description": "Product Description","image": "blue-band.jpg","price": 79,"category": "Fitness","quantity": 2,"inventoryStatus": "LOWSTOCK","rating": 3,"orders": [{"id": "3000","productCode": "zz21cz3c1","date": "2020-07-05","amount": 79,"quantity": 1,"customer": "Stacey Leja","status": "DELIVERED"},{"id": "3001","productCode": "zz21cz3c1","date": "2020-02-06","amount": 79,"quantity": 1,"customer": "Ashley Wickens","status": "DELIVERED"}]},
-        {"id": "1003","code": "244wgerg2","name": "Blue T-Shirt","description": "Product Description","image": "blue-t-shirt.jpg","price": 29,"category": "Clothing","quantity": 25,"inventoryStatus": "INSTOCK","rating": 5,"orders": []},
-        {"id": "1004","code": "h456wer53","name": "Bracelet","description": "Product Description","image": "bracelet.jpg","price": 15,"category": "Accessories","quantity": 73,"inventoryStatus": "INSTOCK","rating": 4,"orders": [{"id": "5000","productCode": "h456wer53","date": "2020-09-05","amount": 60,"quantity": 4,"customer": "Mayumi Misaki","status": "PENDING"},{"id": "5001","productCode": "h456wer53","date": "2019-04-16","amount": 2,"quantity": 30,"customer": "Francesco Salvatore","status": "DELIVERED"}]},
-        {"id": "1005","code": "av2231fwg","name": "Brown Purse","description": "Product Description","image": "brown-purse.jpg","price": 120,"category": "Accessories","quantity": 0,"inventoryStatus": "OUTOFSTOCK","rating": 4,"orders": [{"id": "6000","productCode": "av2231fwg","date": "2020-01-25","amount": 120,"quantity": 1,"customer": "Isabel Sinclair","status": "RETURNED"},{"id": "6001","productCode": "av2231fwg","date": "2019-03-12","amount": 240,"quantity": 2,"customer": "Lionel Clifford","status": "DELIVERED"},{"id": "6002","productCode": "av2231fwg","date": "2019-05-05","amount": 120,"quantity": 1,"customer": "Cody Chavez","status": "DELIVERED"}]},
-        {"id": "1006","code": "bib36pfvm","name": "Chakra Bracelet","description": "Product Description","image": "chakra-bracelet.jpg","price": 32,"category": "Accessories","quantity": 5,"inventoryStatus": "LOWSTOCK","rating": 3,"orders": [{"id": "7000","productCode": "bib36pfvm","date": "2020-02-24","amount": 32,"quantity": 1,"customer": "Arvin Darci","status": "DELIVERED"},{"id": "7001","productCode": "bib36pfvm","date": "2020-01-14","amount": 64,"quantity": 2,"customer": "Izzy Jones","status": "PENDING"}]},
-        {"id": "1007","code": "mbvjkgip5","name": "Galaxy Earrings","description": "Product Description","image": "galaxy-earrings.jpg","price": 34,"category": "Accessories","quantity": 23,"inventoryStatus": "INSTOCK","rating": 5,"orders": [{"id": "8000","productCode": "mbvjkgip5","date": "2020-06-19","amount": 34,"quantity": 1,"customer": "Jennifer Smith","status": "DELIVERED"}]},
-        {"id": "1008","code": "vbb124btr","name": "Game Controller","description": "Product Description","image": "game-controller.jpg","price": 99,"category": "Electronics","quantity": 2,"inventoryStatus": "LOWSTOCK","rating": 4,"orders": [{"id": "9000","productCode": "vbb124btr","date": "2020-01-05","amount": 99,"quantity": 1,"customer": "Jeanfrancois David","status": "DELIVERED"},{"id": "9001","productCode": "vbb124btr","date": "2020-01-19","amount": 198,"quantity": 2,"customer": "Ivar Greenwood","status": "RETURNED"}]},
-        {"id": "1009","code": "cm230f032","name": "Gaming Set","description": "Product Description","image": "gaming-set.jpg","price": 299,"category": "Electronics","quantity": 63,"inventoryStatus": "INSTOCK","rating": 3,"orders": [{"id": "10000","productCode": "cm230f032","date": "2020-06-24","amount": 299,"quantity": 1,"customer": "Kadeem Mujtaba","status": "PENDING"},{"id": "10001","productCode": "cm230f032","date": "2020-05-11","amount": 299,"quantity": 1,"customer": "Ashley Wickens","status": "DELIVERED"},{"id": "10002","productCode": "cm230f032","date": "2019-02-07","amount": 299,"quantity": 1,"customer": "Julie Johnson","status": "DELIVERED"},{"id": "10003","productCode": "cm230f032","date": "2020-04-26","amount": 299,"quantity": 1,"customer": "Tony Costa","status": "CANCELLED"}]}
-    ]
+   "data": [
+       {"id": "1000","code": "f230fh0g3","name": "Bamboo Watch","description": "Product Description","image": "bamboo-watch.jpg","price": 65,"category": "Accessories","quantity": 24,"inventoryStatus": "INSTOCK","rating": 5,"orders": [{"id": "1000","productCode": "f230fh0g3","date": "2020-09-13","amount": 65,"quantity": 1,"customer": "David James","status": "PENDING"},{"id": "1001","productCode": "f230fh0g3","date": "2020-05-14","amount": 130,"quantity": 2,"customer": "Leon Rodrigues","status": "DELIVERED"},{"id": "1002","productCode": "f230fh0g3","date": "2019-01-04","amount": 65,"quantity": 1,"customer": "Juan Alejandro","status": "RETURNED"},{"id": "1003","productCode": "f230fh0g3","date": "2020-09-13","amount": 195,"quantity": 3,"customer": "Claire Morrow","status": "CANCELLED"}]},
+       {"id": "1001","code": "nvklal433","name": "Black Watch","description": "Product Description","image": "black-watch.jpg","price": 72,"category": "Accessories","quantity": 61,"inventoryStatus": "INSTOCK","rating": 4,"orders": [{"id": "2000","productCode": "nvklal433","date": "2020-05-14","amount": 72,"quantity": 1,"customer": "Maisha Jefferson","status": "DELIVERED"},{"id": "2001","productCode": "nvklal433","date": "2020-02-28","amount": 144,"quantity": 2,"customer": "Octavia Murillo","status": "PENDING"}]},
+       {"id": "1002","code": "zz21cz3c1","name": "Blue Band","description": "Product Description","image": "blue-band.jpg","price": 79,"category": "Fitness","quantity": 2,"inventoryStatus": "LOWSTOCK","rating": 3,"orders": [{"id": "3000","productCode": "zz21cz3c1","date": "2020-07-05","amount": 79,"quantity": 1,"customer": "Stacey Leja","status": "DELIVERED"},{"id": "3001","productCode": "zz21cz3c1","date": "2020-02-06","amount": 79,"quantity": 1,"customer": "Ashley Wickens","status": "DELIVERED"}]},
+       {"id": "1003","code": "244wgerg2","name": "Blue T-Shirt","description": "Product Description","image": "blue-t-shirt.jpg","price": 29,"category": "Clothing","quantity": 25,"inventoryStatus": "INSTOCK","rating": 5,"orders": []},
+       {"id": "1004","code": "h456wer53","name": "Bracelet","description": "Product Description","image": "bracelet.jpg","price": 15,"category": "Accessories","quantity": 73,"inventoryStatus": "INSTOCK","rating": 4,"orders": [{"id": "5000","productCode": "h456wer53","date": "2020-09-05","amount": 60,"quantity": 4,"customer": "Mayumi Misaki","status": "PENDING"},{"id": "5001","productCode": "h456wer53","date": "2019-04-16","amount": 2,"quantity": 30,"customer": "Francesco Salvatore","status": "DELIVERED"}]},
+       {"id": "1005","code": "av2231fwg","name": "Brown Purse","description": "Product Description","image": "brown-purse.jpg","price": 120,"category": "Accessories","quantity": 0,"inventoryStatus": "OUTOFSTOCK","rating": 4,"orders": [{"id": "6000","productCode": "av2231fwg","date": "2020-01-25","amount": 120,"quantity": 1,"customer": "Isabel Sinclair","status": "RETURNED"},{"id": "6001","productCode": "av2231fwg","date": "2019-03-12","amount": 240,"quantity": 2,"customer": "Lionel Clifford","status": "DELIVERED"},{"id": "6002","productCode": "av2231fwg","date": "2019-05-05","amount": 120,"quantity": 1,"customer": "Cody Chavez","status": "DELIVERED"}]},
+       {"id": "1006","code": "bib36pfvm","name": "Chakra Bracelet","description": "Product Description","image": "chakra-bracelet.jpg","price": 32,"category": "Accessories","quantity": 5,"inventoryStatus": "LOWSTOCK","rating": 3,"orders": [{"id": "7000","productCode": "bib36pfvm","date": "2020-02-24","amount": 32,"quantity": 1,"customer": "Arvin Darci","status": "DELIVERED"},{"id": "7001","productCode": "bib36pfvm","date": "2020-01-14","amount": 64,"quantity": 2,"customer": "Izzy Jones","status": "PENDING"}]},
+       {"id": "1007","code": "mbvjkgip5","name": "Galaxy Earrings","description": "Product Description","image": "galaxy-earrings.jpg","price": 34,"category": "Accessories","quantity": 23,"inventoryStatus": "INSTOCK","rating": 5,"orders": [{"id": "8000","productCode": "mbvjkgip5","date": "2020-06-19","amount": 34,"quantity": 1,"customer": "Jennifer Smith","status": "DELIVERED"}]},
+       {"id": "1008","code": "vbb124btr","name": "Game Controller","description": "Product Description","image": "game-controller.jpg","price": 99,"category": "Electronics","quantity": 2,"inventoryStatus": "LOWSTOCK","rating": 4,"orders": [{"id": "9000","productCode": "vbb124btr","date": "2020-01-05","amount": 99,"quantity": 1,"customer": "Jeanfrancois David","status": "DELIVERED"},{"id": "9001","productCode": "vbb124btr","date": "2020-01-19","amount": 198,"quantity": 2,"customer": "Ivar Greenwood","status": "RETURNED"}]},
+       {"id": "1009","code": "cm230f032","name": "Gaming Set","description": "Product Description","image": "gaming-set.jpg","price": 299,"category": "Electronics","quantity": 63,"inventoryStatus": "INSTOCK","rating": 3,"orders": [{"id": "10000","productCode": "cm230f032","date": "2020-06-24","amount": 299,"quantity": 1,"customer": "Kadeem Mujtaba","status": "PENDING"},{"id": "10001","productCode": "cm230f032","date": "2020-05-11","amount": 299,"quantity": 1,"customer": "Ashley Wickens","status": "DELIVERED"},{"id": "10002","productCode": "cm230f032","date": "2019-02-07","amount": 299,"quantity": 1,"customer": "Julie Johnson","status": "DELIVERED"},{"id": "10003","productCode": "cm230f032","date": "2020-04-26","amount": 299,"quantity": 1,"customer": "Tony Costa","status": "CANCELLED"}]}
+   ]
 }
-    `
+   `
 };
 
 export { services, data };
diff --git a/pages/locale/index.vue b/pages/locale/index.vue
index dbc2d69d3..3412eb3d8 100644
--- a/pages/locale/index.vue
+++ b/pages/locale/index.vue
@@ -92,11 +92,13 @@ locale: {
     choose: 'Choose',
     upload: 'Upload',
     cancel: 'Cancel',
-    dayNames: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
-    dayNamesShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
-    dayNamesMin: ["Su","Mo","Tu","We","Th","Fr","Sa"],
-    monthNames: ["January","February","March","April","May","June","July","August","September","October","November","December"],
-    monthNamesShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun","Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
+    completed: 'Completed',
+    pending: 'Pending',
+    dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    dayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    dayNamesMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
+    monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+    monthNamesShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
     chooseYear: 'Choose Year',
     chooseMonth: 'Choose Month',
     chooseDate: 'Choose Date',
@@ -138,7 +140,46 @@ locale: {
         unselectAll: 'All items unselected',
         close: 'Close',
         previous: 'Previous',
-        next: 'Next'
+        next: 'Next',
+        navigation: 'Navigation',
+        scrollTop: 'Scroll Top',
+        moveTop: 'Move Top',
+        moveUp: 'Move Up',
+        moveDown: 'Move Down',
+        moveBottom: 'Move Bottom',
+        moveToTarget: 'Move to Target',
+        moveToSource: 'Move to Source',
+        moveAllToTarget: 'Move All to Target',
+        moveAllToSource: 'Move All to Source',
+        pageLabel: '{page}',
+        firstPageLabel: 'First Page',
+        lastPageLabel: 'Last Page',
+        nextPageLabel: 'Next Page',
+        prevPageLabel: 'Previous Page',
+        rowsPerPageLabel: 'Rows per page',
+        previousPageLabel: 'Previous Page',
+        jumpToPageDropdownLabel: 'Jump to Page Dropdown',
+        jumpToPageInputLabel: 'Jump to Page Input',
+        selectRow: 'Row Selected',
+        unselectRow: 'Row Unselected',
+        expandRow: 'Row Expanded',
+        collapseRow: 'Row Collapsed',
+        showFilterMenu: 'Show Filter Menu',
+        hideFilterMenu: 'Hide Filter Menu',
+        filterOperator: 'Filter Operator',
+        filterConstraint: 'Filter Constraint',
+        editRow: 'Row Edit',
+        saveEdit: 'Save Edit',
+        cancelEdit: 'Cancel Edit',
+        listView: 'List View',
+        gridView: 'Grid View',
+        slide: 'Slide',
+        slideNumber: '{slideNumber}',
+        zoomImage: 'Zoom Image',
+        zoomIn: 'Zoom In',
+        zoomOut: 'Zoom Out',
+        rotateRight: 'Rotate Right',
+        rotateLeft: 'Rotate Left'
     }
 }
 
diff --git a/pages/megamenu/MegaMenuDoc.vue b/pages/megamenu/MegaMenuDoc.vue
index 75b55ef23..56684b99b 100755
--- a/pages/megamenu/MegaMenuDoc.vue
+++ b/pages/megamenu/MegaMenuDoc.vue
@@ -1,27 +1,26 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="MegaMenuDemo" :sources="sources" github="megamenu/MegaMenuDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="MegaMenuDemo" :sources="sources" github="megamenu/MegaMenuDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import MegaMenu from 'primevue/megamenu';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/megamenu/megamenu.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>MenuModel</h5>
-            <p>MegaMenu uses the common MenuModel API to define the items of the model, visit <nuxt-link to="/menumodel">MenuModel API</nuxt-link> for details.</p>
-            <pre v-code><code>
+        <h5>MenuModel</h5>
+        <p>MegaMenu uses the common MenuModel API to define the items of the model, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p>
+        <pre v-code><code>
 &lt;MegaMenu :model="items" /&gt;
 
 </code></pre>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 export default {
     data() {
         return {
@@ -143,18 +142,16 @@ export default {
 
 </code></pre>
 
-            <h5>Orientation</h5>
-            <p>Default orientation is "horizontal" with "vertical" as the alternative.</p>
-            <pre v-code><code>
+        <h5>Orientation</h5>
+        <p>Default orientation is "horizontal" with "vertical" as the alternative.</p>
+        <pre v-code><code>
 &lt;MegaMenu :model="items" orientation="vertical" /&gt;
 
 </code></pre>
 
-            <h5>Templating</h5>
-            <p>
-                Two slots named "start" and "end" are provided to embed content before or after the items. In additon MegaMenu, offers item customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter.
-            </p>
-            <pre v-code><code><template v-pre>
+        <h5>Templating</h5>
+        <p>Two slots named "start" and "end" are provided to embed content before or after the items. In additon MegaMenu, offers item customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter.</p>
+        <pre v-code><code><template v-pre>
 &lt;MegaMenu :model="items"&gt;
     &lt;template #start&gt;
         Before
@@ -169,146 +166,297 @@ export default {
 </template>
 </code></pre>
 
-            <p><i>nuxt-link</i> with route configuration can also be used within templating for further customization.</p>
-            <pre v-code><code><template v-pre>
+        <p><i>router-link</i> with route configuration can also be used within templating for further customization.</p>
+        <pre v-code><code><template v-pre>
 &lt;MegaMenu :model="items"&gt;
     &lt;template #item="{item}"&gt;
-        &lt;nuxt-link :to="item.to" custom v-slot="{href, route, navigate, isActive, isExactActive}"&gt;
+        &lt;router-link :to="item.to" custom v-slot="{href, route, navigate, isActive, isExactActive}"&gt;
             &lt;a :href="href" @click="navigate" :class="{'active-link': isActive, 'active-link-exact': isExactActive}"&gt;{{route.fullPath}}&lt;/a&gt;
-        &lt;/nuxt-link&gt;
+        &lt;/router-link&gt;
     &lt;/template&gt;
 &lt;/MegaMenu&gt;
 </template>
 </code></pre>
 
-            <h5>Properties</h5>
-            <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>model</td>
-                            <td>array</td>
-                            <td>null</td>
-                            <td>An array of menuitems.</td>
-                        </tr>
-                        <tr>
-                            <td>orientation</td>
-                            <td>string</td>
-                            <td>horizontal</td>
-                            <td>Defines the orientation, valid values are horizontal and vertical.</td>
-                        </tr>
-                        <tr>
-                            <td>exact</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether to apply 'nuxt-link-active-exact' class if route exactly matches the item path.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>model</td>
+                        <td>array</td>
+                        <td>null</td>
+                        <td>An array of menuitems.</td>
+                    </tr>
+                    <tr>
+                        <td>orientation</td>
+                        <td>string</td>
+                        <td>horizontal</td>
+                        <td>Defines the orientation, valid values are horizontal and vertical.</td>
+                    </tr>
+                    <tr>
+                        <td>exact</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Whether to apply 'router-link-active-exact' class if route exactly matches the item path.</td>
+                    </tr>
+                    <tr>
+                        <td>disabled</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When present, it specifies that the component should be disabled.</td>
+                    </tr>
+                    <tr>
+                        <td>tabindex</td>
+                        <td>number</td>
+                        <td>0</td>
+                        <td>Index of the element in tabbing order.</td>
+                    </tr>
+                    <tr>
+                        <td>aria-label</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Defines a string value that labels an interactive element.</td>
+                    </tr>
+                    <tr>
+                        <td>aria-labelledby</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Slots</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>item</td>
-                            <td>item: Menuitem instance</td>
-                        </tr>
-                        <tr>
-                            <td>start</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>end</td>
-                            <td>-</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Events</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>focus</td>
+                        <td>event</td>
+                        <td>Callback to invoke when the component receives focus.</td>
+                    </tr>
+                    <tr>
+                        <td>blur</td>
+                        <td>event</td>
+                        <td>Callback to invoke when the component loses focus.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-megamenu</td>
-                            <td>Container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-megamenu-horizontal</td>
-                            <td>Container element in horizontal orientation.</td>
-                        </tr>
-                        <tr>
-                            <td>p-megamenu-vertical</td>
-                            <td>Container element in vertical orientation.</td>
-                        </tr>
-                        <tr>
-                            <td>p-megamenu-root-list</td>
-                            <td>Root list element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-megamenu-panel</td>
-                            <td>Submenu container.</td>
-                        </tr>
-                        <tr>
-                            <td>p-megamenu-submenu</td>
-                            <td>Submenu list element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-menuitem</td>
-                            <td>Menuitem element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-menuitem-active</td>
-                            <td>Active menuitem element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-menuitem-text</td>
-                            <td>Label of a menuitem.</td>
-                        </tr>
-                        <tr>
-                            <td>p-menuitem-icon</td>
-                            <td>Icon of a menuitem.</td>
-                        </tr>
-                        <tr>
-                            <td>p-submenu-icon</td>
-                            <td>Arrow icon of a submenu.</td>
-                        </tr>
-                        <tr>
-                            <td>p-megamenu-custom</td>
-                            <td>Container of the default slot.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Slots</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>item</td>
+                        <td>item: Menuitem instance</td>
+                    </tr>
+                    <tr>
+                        <td>start</td>
+                        <td>-</td>
+                    </tr>
+                    <tr>
+                        <td>end</td>
+                        <td>-</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc>
-    </ClientOnly>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-megamenu</td>
+                        <td>Container element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-megamenu-horizontal</td>
+                        <td>Container element in horizontal orientation.</td>
+                    </tr>
+                    <tr>
+                        <td>p-megamenu-vertical</td>
+                        <td>Container element in vertical orientation.</td>
+                    </tr>
+                    <tr>
+                        <td>p-megamenu-root-list</td>
+                        <td>Root list element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-megamenu-panel</td>
+                        <td>Submenu container.</td>
+                    </tr>
+                    <tr>
+                        <td>p-megamenu-submenu</td>
+                        <td>Submenu list element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-submenu-list</td>
+                        <td>Submenu list element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-menuitem</td>
+                        <td>Menuitem element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-menuitem-active</td>
+                        <td>Active menuitem element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-menuitem-content</td>
+                        <td>Content of menuitem.</td>
+                    </tr>
+                    <tr>
+                        <td>p-menuitem-link</td>
+                        <td>Link element of the menuitem.</td>
+                    </tr>
+                    <tr>
+                        <td>p-menuitem-text</td>
+                        <td>Label of a menuitem.</td>
+                    </tr>
+                    <tr>
+                        <td>p-menuitem-icon</td>
+                        <td>Icon of a menuitem.</td>
+                    </tr>
+                    <tr>
+                        <td>p-submenu-icon</td>
+                        <td>Arrow icon of a submenu.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>
+            MegaMenu component uses the <i>menubar</i> role along with <i>aria-orientation</i> and the value to describe the component can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. Each list item has a
+            <i>presentation</i> role whereas anchor elements have a <i>menuitem</i> role with <i>aria-label</i> referring to the label of the item and <i>aria-disabled</i> defined if the item is disabled. A submenu within a MegaMenu uses the
+            <i>menu</i> role with an <i>aria-labelledby</i> defined as the id of the submenu root menuitem label. In addition, root menuitems that open a submenu have <i>aria-haspopup</i>, <i>aria-expanded</i> and <i>aria-controls</i> to define the
+            relation between the item and the submenu.
+        </p>
+
+        <h6>Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>tab</i>
+                        </td>
+                        <td>Add focus to the first item if focus moves in to the menu. If the focus is already within the menu, focus moves to the next focusable item in the page tab sequence.</td>
+                    </tr>
+                    <tr>
+                        <td><i>shift</i> + <i>tab</i></td>
+                        <td>Add focus to the first item if focus moves in to the menu. If the focus is already within the menu, focus moves to the previous focusable item in the page tab sequence.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>If menuitem has a submenu, toggles the visibility of the submenu otherwise activates the menuitem and closes all open overlays.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>If menuitem has a submenu, toggles the visibility of the submenu otherwise activates the menuitem and closes all open overlays.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>escape</i>
+                        </td>
+                        <td>If focus is inside a popup submenu, closes the submenu and moves focus to the root item of the closed submenu.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>down arrow</i>
+                        </td>
+                        <td>If focus is on a root element, open a submenu and moves focus to the first element in the submenu otherwise moves focus to the next menuitem within the submenu.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>up arrow</i>
+                        </td>
+                        <td>If focus is on a root element, opens a submenu and moves focus to the last element in the submenu otherwise moves focus to the previous menuitem within the submenu.</td>
+                    </tr>
+                    <tr>
+                        <td><i>alt</i> + <i>up arrow</i></td>
+                        <td>If focus is inside a popup menu, moves focus to the first element in the submenu otherwise closes the submenu and moves focus to the root item of the closed submenu in horizontal mode.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>right arrow</i>
+                        </td>
+                        <td>If focus is on a root element, moves focus to the next menuitem. If the focus in inside a submenu, moves focus to the first menuitem of the next menu group.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>left arrow</i>
+                        </td>
+                        <td>If focus is on a root element, moves focus to the previous menuitem. If the focus in inside a submenu, moves focus to the first menuitem of the previous menu group.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>home</i>
+                        </td>
+                        <td>Moves focus to the first menuitem within the submenu.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>end</i>
+                        </td>
+                        <td>Moves focus to the last menuitem within the submenu.</td>
+                    </tr>
+                    <tr>
+                        <td><i>any printable character</i></td>
+                        <td>Moves focus to the menuitem whose label starts with the characters being typed.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
diff --git a/pages/menu/MenuDoc.vue b/pages/menu/MenuDoc.vue
index a35d34ca0..b03ba86fc 100755
--- a/pages/menu/MenuDoc.vue
+++ b/pages/menu/MenuDoc.vue
@@ -1,29 +1,28 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="MenuDemo" :sources="sources" github="menu/MenuDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="MenuDemo" :sources="sources" github="menu/MenuDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import Menu from 'primevue/menu';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>MenuModel</h5>
-            <p>Menu uses the common MenuModel API to define the items, visit <nuxt-link to="/menumodel">MenuModel API</nuxt-link> for details.</p>
+        <h5>MenuModel</h5>
+        <p>Menu uses the common MenuModel API to define the items, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p>
 
-            <h5>Getting Started</h5>
-            <p>Menu requires a collection of menuitems as its model.</p>
-            <pre v-code><code>
+        <h5>Getting Started</h5>
+        <p>Menu requires a collection of menuitems as its model.</p>
+        <pre v-code><code>
 &lt;Menu :model="items" /&gt;
 
 </code></pre>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 export default {
 	data() {
 		return {
@@ -59,9 +58,9 @@ export default {
 
 </code></pre>
 
-            <h5>SubMenus</h5>
-            <p>Menu supports one level of nesting via subitems of an item.</p>
-            <pre v-code.script><code>
+        <h5>SubMenus</h5>
+        <p>Menu supports one level of nesting via subitems of an item.</p>
+        <pre v-code.script><code>
 const items: [
     {
         label: 'Options',
@@ -77,25 +76,25 @@ const items: [
 
 </code></pre>
 
-            <h5>Popup Mode</h5>
-            <p>Menu is inline by default whereas popup mode is supported by enabling popup property and calling toggle method with an event of the target.</p>
+        <h5>Popup Mode</h5>
+        <p>Menu is inline by default whereas popup mode is supported by enabling popup property and calling toggle method with an event of the target.</p>
 
-            <pre v-code><code>
+        <pre v-code><code>
 &lt;Button type="button" label="Toggle" @click="toggle" /&gt;
 &lt;Menu ref="menu" :model="items" :popup="true" /&gt;
 
 </code></pre>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 toggle(event) {
     this.$refs.menu.toggle(event);
 }
 
 </code></pre>
 
-            <h5>Templating</h5>
-            <p>Menu offers content customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter.</p>
-            <pre v-code><code><template v-pre>
+        <h5>Templating</h5>
+        <p>Menu offers content customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter.</p>
+        <pre v-code><code><template v-pre>
 &lt;Menu :model="items"&gt;
     &lt;template #item="{item}"&gt;
         &lt;a :href="item.url"&gt;{{item.label}}&lt;/a&gt;
@@ -104,183 +103,305 @@ toggle(event) {
 </template>
 </code></pre>
 
-            <p><i>nuxt-link</i> with route configuration can also be used within templating for further customization.</p>
-            <pre v-code><code><template v-pre>
+        <p><i>router-link</i> with route configuration can also be used within templating for further customization.</p>
+        <pre v-code><code><template v-pre>
 &lt;Menu :model="items"&gt;
     &lt;template #item="{item}"&gt;
-        &lt;nuxt-link :to="item.to" custom v-slot="{href, route, navigate, isActive, isExactActive}"&gt;
+        &lt;router-link :to="item.to" custom v-slot="{href, route, navigate, isActive, isExactActive}"&gt;
             &lt;a :href="href" @click="navigate" :class="{'active-link': isActive, 'active-link-exact': isExactActive}"&gt;{{route.fullPath}}&lt;/a&gt;
-        &lt;/nuxt-link&gt;
+        &lt;/router-link&gt;
     &lt;/template&gt;
 &lt;/Menu&gt;
 </template>
 </code></pre>
 
-            <h5>Properties</h5>
-            <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>model</td>
-                            <td>array</td>
-                            <td>null</td>
-                            <td>An array of menuitems.</td>
-                        </tr>
-                        <tr>
-                            <td>popup</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Defines if menu would displayed as a popup.</td>
-                        </tr>
-                        <tr>
-                            <td>appendTo</td>
-                            <td>string</td>
-                            <td>body</td>
-                            <td>A valid query selector or an HTMLElement to specify where the overlay gets attached.</td>
-                        </tr>
-                        <tr>
-                            <td>baseZIndex</td>
-                            <td>number</td>
-                            <td>0</td>
-                            <td>Base zIndex value to use in layering.</td>
-                        </tr>
-                        <tr>
-                            <td>autoZIndex</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether to automatically manage layering.</td>
-                        </tr>
-                        <tr>
-                            <td>exact</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether to apply 'nuxt-link-active-exact' class if route exactly matches the item path.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>model</td>
+                        <td>array</td>
+                        <td>null</td>
+                        <td>An array of menuitems.</td>
+                    </tr>
+                    <tr>
+                        <td>popup</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Defines if menu would displayed as a popup.</td>
+                    </tr>
+                    <tr>
+                        <td>appendTo</td>
+                        <td>string</td>
+                        <td>body</td>
+                        <td>A valid query selector or an HTMLElement to specify where the overlay gets attached.</td>
+                    </tr>
+                    <tr>
+                        <td>baseZIndex</td>
+                        <td>number</td>
+                        <td>0</td>
+                        <td>Base zIndex value to use in layering.</td>
+                    </tr>
+                    <tr>
+                        <td>autoZIndex</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Whether to automatically manage layering.</td>
+                    </tr>
+                    <tr>
+                        <td>exact</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Whether to apply 'router-link-active-exact' class if route exactly matches the item path.</td>
+                    </tr>
+                    <tr>
+                        <td>tabindex</td>
+                        <td>number</td>
+                        <td>0</td>
+                        <td>Index of the element in tabbing order.</td>
+                    </tr>
+                    <tr>
+                        <td>aria-label</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Defines a string value that labels an interactive element.</td>
+                    </tr>
+                    <tr>
+                        <td>aria-labelledby</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Events</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>show</td>
-                            <td>-</td>
-                            <td>Callback to invoke when the overlay is shown.</td>
-                        </tr>
-                        <tr>
-                            <td>hide</td>
-                            <td>-</td>
-                            <td>Callback to invoke when the overlay is hidden.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Events</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>show</td>
+                        <td>-</td>
+                        <td>Callback to invoke when the overlay is shown.</td>
+                    </tr>
+                    <tr>
+                        <td>hide</td>
+                        <td>-</td>
+                        <td>Callback to invoke when the overlay is hidden.</td>
+                    </tr>
+                    <tr>
+                        <td>focus</td>
+                        <td>event</td>
+                        <td>Callback to invoke when the component receives focus.</td>
+                    </tr>
+                    <tr>
+                        <td>blur</td>
+                        <td>event</td>
+                        <td>Callback to invoke when the component loses focus.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Methods</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>toggle</td>
-                            <td>event: Browser event</td>
-                            <td>Toggles the visibility of the overlay.</td>
-                        </tr>
-                        <tr>
-                            <td>show</td>
-                            <td>event: Browser event</td>
-                            <td>Shows the overlay.</td>
-                        </tr>
-                        <tr>
-                            <td>hide</td>
-                            <td>-</td>
-                            <td>Hides the overlay.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Methods</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>toggle</td>
+                        <td>event: Browser event</td>
+                        <td>Toggles the visibility of the overlay.</td>
+                    </tr>
+                    <tr>
+                        <td>show</td>
+                        <td>event: Browser event</td>
+                        <td>Shows the overlay.</td>
+                    </tr>
+                    <tr>
+                        <td>hide</td>
+                        <td>-</td>
+                        <td>Hides the overlay.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Slots</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>item</td>
-                            <td>item: Menuitem instance</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Slots</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>item</td>
+                        <td>item: Menuitem instance</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-menu</td>
-                            <td>Container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-menu-list</td>
-                            <td>List element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-menuitem</td>
-                            <td>Menuitem element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-menuitem-text</td>
-                            <td>Label of a menuitem.</td>
-                        </tr>
-                        <tr>
-                            <td>p-menuitem-icon</td>
-                            <td>Icon of a menuitem.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-menu</td>
+                        <td>Container element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-menu-list</td>
+                        <td>List element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-submenu-header</td>
+                        <td>Header of the submenu list element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-menuitem</td>
+                        <td>Menuitem element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-menuitem-active</td>
+                        <td>Active menuitem element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-menuitem-content</td>
+                        <td>Content of menuitem.</td>
+                    </tr>
+                    <tr>
+                        <td>p-menuitem-link</td>
+                        <td>Link element of the menuitem.</td>
+                    </tr>
+                    <tr>
+                        <td>p-menuitem-text</td>
+                        <td>Label of a menuitem.</td>
+                    </tr>
+                    <tr>
+                        <td>p-menuitem-icon</td>
+                        <td>Icon of a menuitem.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc>
-    </ClientOnly>
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>
+            Menu component uses the <i>menu</i> role and the value to describe the menu can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. Each list item has a <i>menuitem</i> role with <i>aria-label</i> referring to the
+            label of the item and <i>aria-disabled</i> defined if the item is disabled.
+        </p>
+
+        <p>In popup mode, the component implicitly manages the <i>aria-expanded</i>, <i>aria-haspopup</i> and <i>aria-controls</i> attributes of the target element to define the relation between the target and the popup.</p>
+
+        <h6>Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>tab</i>
+                        </td>
+                        <td>Add focus to the first item if focus moves in to the menu. If the focus is already within the menu, focus moves to the next focusable item in the page tab sequence.</td>
+                    </tr>
+                    <tr>
+                        <td><i>shift</i> + <i>tab</i></td>
+                        <td>Add focus to the first item if focus moves in to the menu. If the focus is already within the menu, focus moves to the previous focusable item in the page tab sequence.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>Activates the focused menuitem. If menu is in overlay mode, popup gets closes and focus moves to target.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>Activates the focused menuitem. If menu is in overlay mode, popup gets closes and focus moves to target.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>escape</i>
+                        </td>
+                        <td>If menu is in overlay mode, popup gets closes and focus moves to target.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>down arrow</i>
+                        </td>
+                        <td>Moves focus to the next menuitem.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>up arrow</i>
+                        </td>
+                        <td>Moves focus to the previous menuitem.</td>
+                    </tr>
+                    <tr>
+                        <td><i>alt</i> + <i>up arrow</i></td>
+                        <td>If menu is in overlay mode, popup gets closes and focus moves to the target.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>home</i>
+                        </td>
+                        <td>Moves focus to the first menuitem.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>end</i>
+                        </td>
+                        <td>Moves focus to the last menuitem.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
diff --git a/pages/menu/index.vue b/pages/menu/index.vue
index c5ec13500..1e8c78943 100755
--- a/pages/menu/index.vue
+++ b/pages/menu/index.vue
@@ -15,7 +15,7 @@
 
                 <h5>Overlay</h5>
                 <Button type="button" label="Toggle" @click="toggle" aria-haspopup="true" aria-controls="overlay_menu" />
-                <Menu id="overlay_menu" ref="menu" :model="items" :popup="true" />
+                <Menu ref="menu" id="overlay_menu" :model="items" :popup="true" />
             </div>
         </div>
 
diff --git a/pages/menubar/MenubarDoc.vue b/pages/menubar/MenubarDoc.vue
index 417ad89d3..98f72d9fb 100755
--- a/pages/menubar/MenubarDoc.vue
+++ b/pages/menubar/MenubarDoc.vue
@@ -1,302 +1,419 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="MenubarDemo" :sources="sources" github="menubar/MenubarDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="MenubarDemo" :sources="sources" github="menubar/MenubarDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import Menubar from 'primevue/menubar';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/menubar/menubar.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>MenuModel</h5>
-            <p>Menubar uses the common MenuModel API to define the items, visit <nuxt-link to="/menumodel">MenuModel API</nuxt-link> for details.</p>
+        <h5>MenuModel</h5>
+        <p>Menubar uses the common MenuModel API to define the items, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p>
 
-            <h5>Getting Started</h5>
-            <p>Menubar requires a collection of menuitems as its model.</p>
-            <pre v-code><code>
+        <h5>Getting Started</h5>
+        <p>Menubar requires a collection of menuitems as its model.</p>
+        <pre v-code><code>
 &lt;Menubar :model="items" /&gt;
 
 </code></pre>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 export default {
-    data() {
-        return {
-            items: [
-                {
-					label:'File',
-					icon:'pi pi-fw pi-file',
-					items:[
-						{
-							label:'New',
-							icon:'pi pi-fw pi-plus',
-							items:[
-								{
-									label:'Bookmark',
-									icon:'pi pi-fw pi-bookmark'
-								},
-								{
-									label:'Video',
-									icon:'pi pi-fw pi-video'
-								}
-							]
-						},
-						{
-							label:'Delete',
-							icon:'pi pi-fw pi-trash'
-						},
-						{
-							separator:true
-						},
-						{
-							label:'Export',
-							icon:'pi pi-fw pi-external-link'
-						}
-					]
-                },
-                {
-					label:'Edit',
-					icon:'pi pi-fw pi-pencil',
-					items:[
-						{
-							label:'Left',
-							icon:'pi pi-fw pi-align-left'
-						},
-						{
-							label:'Right',
-							icon:'pi pi-fw pi-align-right'
-						},
-						{
-							label:'Center',
-							icon:'pi pi-fw pi-align-center'
-						},
-						{
-							label:'Justify',
-							icon:'pi pi-fw pi-align-justify'
-						}
-					]
-                },
-                {
-					label:'Users',
-					icon:'pi pi-fw pi-user',
-					items:[
-						{
-							label:'New',
-							icon:'pi pi-fw pi-user-plus',
+	data() {
+			return {
+					items: [
+							{
+				label:'File',
+				icon:'pi pi-fw pi-file',
+				items:[
+					{
+						label:'New',
+						icon:'pi pi-fw pi-plus',
+						items:[
+							{
+								label:'Bookmark',
+								icon:'pi pi-fw pi-bookmark'
+							},
+							{
+								label:'Video',
+								icon:'pi pi-fw pi-video'
+							}
+						]
+					},
+					{
+						label:'Delete',
+						icon:'pi pi-fw pi-trash'
+					},
+					{
+						separator:true
+					},
+					{
+						label:'Export',
+						icon:'pi pi-fw pi-external-link'
+					}
+				]
+							},
+							{
+				label:'Edit',
+				icon:'pi pi-fw pi-pencil',
+				items:[
+					{
+						label:'Left',
+						icon:'pi pi-fw pi-align-left'
+					},
+					{
+						label:'Right',
+						icon:'pi pi-fw pi-align-right'
+					},
+					{
+						label:'Center',
+						icon:'pi pi-fw pi-align-center'
+					},
+					{
+						label:'Justify',
+						icon:'pi pi-fw pi-align-justify'
+					}
+				]
+							},
+							{
+				label:'Users',
+				icon:'pi pi-fw pi-user',
+				items:[
+					{
+						label:'New',
+						icon:'pi pi-fw pi-user-plus',
 
-						},
-						{
-							label:'Delete',
-							icon:'pi pi-fw pi-user-minus',
+					},
+					{
+						label:'Delete',
+						icon:'pi pi-fw pi-user-minus',
 
-						},
-						{
-							label:'Search',
-							icon:'pi pi-fw pi-users',
-							items:[
-								{
-									label:'Filter',
-									icon:'pi pi-fw pi-filter',
-									items:[
-										{
-											label:'Print',
-											icon:'pi pi-fw pi-print'
-										}
-									]
-								},
-								{
-									icon:'pi pi-fw pi-bars',
-									label:'List'
-								}
-							]
-						}
+					},
+					{
+						label:'Search',
+						icon:'pi pi-fw pi-users',
+						items:[
+							{
+								label:'Filter',
+								icon:'pi pi-fw pi-filter',
+								items:[
+									{
+										label:'Print',
+										icon:'pi pi-fw pi-print'
+									}
+								]
+							},
+							{
+								icon:'pi pi-fw pi-bars',
+								label:'List'
+							}
+						]
+					}
+				]
+							},
+							{
+				label:'Events',
+				icon:'pi pi-fw pi-calendar',
+				items:[
+					{
+						label:'Edit',
+						icon:'pi pi-fw pi-pencil',
+						items:[
+							{
+								label:'Save',
+								icon:'pi pi-fw pi-calendar-plus'
+							},
+							{
+								label:'Delete',
+								icon:'pi pi-fw pi-calendar-minus'
+							}
+						]
+					},
+					{
+						label:'Archieve',
+						icon:'pi pi-fw pi-calendar-times',
+						items:[
+							{
+								label:'Remove',
+								icon:'pi pi-fw pi-calendar-minus'
+							}
+						]
+					}
+				]
+							},
+							{
+				label:'Quit',
+				icon:'pi pi-fw pi-power-off'
+							}
 					]
-                },
-                {
-					label:'Events',
-					icon:'pi pi-fw pi-calendar',
-					items:[
-						{
-							label:'Edit',
-							icon:'pi pi-fw pi-pencil',
-							items:[
-								{
-									label:'Save',
-									icon:'pi pi-fw pi-calendar-plus'
-								},
-								{
-									label:'Delete',
-									icon:'pi pi-fw pi-calendar-minus'
-								}
-							]
-						},
-						{
-							label:'Archieve',
-							icon:'pi pi-fw pi-calendar-times',
-							items:[
-								{
-									label:'Remove',
-									icon:'pi pi-fw pi-calendar-minus'
-								}
-							]
-						}
-					]
-                },
-                {
-					label:'Quit',
-					icon:'pi pi-fw pi-power-off'
-                }
-            ]
-        }
-    }
+			}
+	}
 }
 
 </code></pre>
 
-            <h5>Templating</h5>
-            <p>
-                Two slots named "start" and "end" are provided to embed content before or after the menubar. In additon Menubar, offers item customization with the <i>item</i> template that receives the menuitem instance from the model as a
-                parameter.
-            </p>
-            <pre v-code><code><template v-pre>
+        <h5>Templating</h5>
+        <p>Two slots named "start" and "end" are provided to embed content before or after the menubar. In additon Menubar, offers item customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter.</p>
+        <pre v-code><code><template v-pre>
 &lt;Menubar :model="items"&gt;
-    &lt;template #start&gt;
-        Before
-    &lt;/template&gt;
-    &lt;template #item="{item}"&gt;
-        &lt;a :href="item.url"&gt;{{item.label}}&lt;/a&gt;
-    &lt;/template&gt;
-    &lt;template #end&gt;
-        After
-    &lt;/template&gt;
+	&lt;template #start&gt;
+			Before
+	&lt;/template&gt;
+	&lt;template #item="{item}"&gt;
+			&lt;a :href="item.url"&gt;{{item.label}}&lt;/a&gt;
+	&lt;/template&gt;
+	&lt;template #end&gt;
+			After
+	&lt;/template&gt;
 &lt;/Menubar&gt;
 </template>
 </code></pre>
 
-            <p><i>nuxt-link</i> with route configuration can also be used within templating for further customization.</p>
-            <pre v-code><code><template v-pre>
+        <p><i>router-link</i> with route configuration can also be used within templating for further customization.</p>
+        <pre v-code><code><template v-pre>
 &lt;Menubar :model="items"&gt;
-    &lt;template #item="{item}"&gt;
-        &lt;nuxt-link :to="item.to" custom v-slot="{href, route, navigate, isActive, isExactActive}"&gt;
-            &lt;a :href="href" @click="navigate" :class="{'active-link': isActive, 'active-link-exact': isExactActive}"&gt;{{route.fullPath}}&lt;/a&gt;
-        &lt;/nuxt-link&gt;
-    &lt;/template&gt;
+	&lt;template #item="{item}"&gt;
+			&lt;router-link :to="item.to" custom v-slot="{href, route, navigate, isActive, isExactActive}"&gt;
+					&lt;a :href="href" @click="navigate" :class="{'active-link': isActive, 'active-link-exact': isExactActive}"&gt;{{route.fullPath}}&lt;/a&gt;
+			&lt;/router-link&gt;
+	&lt;/template&gt;
 &lt;/Menubar&gt;
 </template>
 </code></pre>
 
-            <h5>Properties</h5>
-            <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>model</td>
-                            <td>array</td>
-                            <td>null</td>
-                            <td>An array of menuitems.</td>
-                        </tr>
-                        <tr>
-                            <td>exact</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether to apply 'nuxt-link-active-exact' class if route exactly matches the item path.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>model</td>
+                        <td>array</td>
+                        <td>null</td>
+                        <td>An array of menuitems.</td>
+                    </tr>
+                    <tr>
+                        <td>exact</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Whether to apply 'router-link-active-exact' class if route exactly matches the item path.</td>
+                    </tr>
+                    <tr>
+                        <td>buttonProps</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Uses to pass all properties of the HTMLButtonElement to the menu button.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Slots</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>start</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>end</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>item</td>
-                            <td>item: Menuitem instance</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Slots</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>start</td>
+                        <td>-</td>
+                    </tr>
+                    <tr>
+                        <td>end</td>
+                        <td>-</td>
+                    </tr>
+                    <tr>
+                        <td>item</td>
+                        <td>item: Menuitem instance</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-menubar</td>
-                            <td>Container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-menubar-root-list</td>
-                            <td>Root list element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-submenu-list</td>
-                            <td>Submenu list element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-menuitem</td>
-                            <td>Menuitem element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-menuitem-active</td>
-                            <td>Active menuitem element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-menuitem-text</td>
-                            <td>Label of a menuitem.</td>
-                        </tr>
-                        <tr>
-                            <td>p-menuitem-icon</td>
-                            <td>Icon of a menuitem.</td>
-                        </tr>
-                        <tr>
-                            <td>p-submenu-icon</td>
-                            <td>Arrow icon of a submenu.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-menubar</td>
+                        <td>Container element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-menubar-start</td>
+                        <td>Container of the start slot.</td>
+                    </tr>
+                    <tr>
+                        <td>p-menubar-end</td>
+                        <td>Container of the end slot.</td>
+                    </tr>
+                    <tr>
+                        <td>p-menubar-button</td>
+                        <td>Mobile menubar toggle button.</td>
+                    </tr>
+                    <tr>
+                        <td>p-menubar-root-list</td>
+                        <td>Root list element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-submenu-list</td>
+                        <td>Submenu list element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-menuitem</td>
+                        <td>Menuitem element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-menuitem-active</td>
+                        <td>Active menuitem element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-menuitem-content</td>
+                        <td>Content of menuitem.</td>
+                    </tr>
+                    <tr>
+                        <td>p-menuitem-link</td>
+                        <td>Link element of the menuitem.</td>
+                    </tr>
+                    <tr>
+                        <td>p-menuitem-text</td>
+                        <td>Label of a menuitem.</td>
+                    </tr>
+                    <tr>
+                        <td>p-menuitem-icon</td>
+                        <td>Icon of a menuitem.</td>
+                    </tr>
+                    <tr>
+                        <td>p-submenu-icon</td>
+                        <td>Arrow icon of a submenu.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc>
-    </ClientOnly>
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>
+            Menubar component uses the <i>menubar</i> role and the value to describe the menu can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. Each list item has a <i>menuitem</i> role with <i>aria-label</i> referring to
+            the label of the item and <i>aria-disabled</i> defined if the item is disabled. A submenu within a MenuBar uses the <i>menu</i> role with an <i>aria-labelledby</i> defined as the id of the submenu root menuitem label. In addition,
+            menuitems that open a submenu have <i>aria-haspopup</i>, <i>aria-expanded</i> and <i>aria-controls</i> to define the relation between the item and the submenu.
+        </p>
+
+        <p>
+            In mobile viewports, a menu icon appears with a <i>button</i> role along with <i>aria-haspopup</i>, <i>aria-expanded</i> and <i>aria-controls</i> to manage the relation between the overlay menubar and the button. The value to describe the
+            button can be defined <i>aria-label</i> or <i>aria-labelledby</i> specified using <i>buttonProps</i>, by default <i>navigation</i> key of the <i>aria</i> property from the <router-link to="/locale">locale</router-link> API as the
+            <i>aria-label</i>.
+        </p>
+
+        <h6>Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>tab</i>
+                        </td>
+                        <td>Add focus to the first item if focus moves in to the menu. If the focus is already within the menu, focus moves to the next focusable item in the page tab sequence.</td>
+                    </tr>
+                    <tr>
+                        <td><i>shift</i> + <i>tab</i></td>
+                        <td>Add focus to the first item if focus moves in to the menu. If the focus is already within the menu, focus moves to the previous focusable item in the page tab sequence.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>If menuitem has a submenu, toggles the visibility of the submenu otherwise activates the menuitem and closes all open overlays.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>If menuitem has a submenu, toggles the visibility of the submenu otherwise activates the menuitem and closes all open overlays.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>escape</i>
+                        </td>
+                        <td>If focus is inside a popup submenu, closes the submenu and moves focus to the root item of the closed submenu.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>down arrow</i>
+                        </td>
+                        <td>If focus is on a root element, open a submenu and moves focus to the first element in the submenu otherwise moves focus to the next menuitem within the submenu.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>up arrow</i>
+                        </td>
+                        <td>If focus is on a root element, opens a submenu and moves focus to the last element in the submenu otherwise moves focus to the previous menuitem within the submenu.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>right arrow</i>
+                        </td>
+                        <td>If focus is on a root element, moves focus to the next menuitem otherwise opens a submenu if there is one available and moves focus to the first item.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>left arrow</i>
+                        </td>
+                        <td>If focus is on a root element, moves focus to the previous menuitem otherwise closes a submenu and moves focus to the root item of the closed submenu.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>home</i>
+                        </td>
+                        <td>Moves focus to the first menuitem within the submenu.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>end</i>
+                        </td>
+                        <td>Moves focus to the last menuitem within the submenu.</td>
+                    </tr>
+                    <tr>
+                        <td><i>any printable character</i></td>
+                        <td>Moves focus to the menuitem whose label starts with the characters being typed.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
@@ -307,326 +424,24 @@ export default {
                 'options-api': {
                     tabName: 'Options API Source',
                     content: `
-		<template>
-			<div>
-				<Menubar :model="items">
-					<template #start>
-						<img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" height="40" class="mr-2">
-					</template>
-					<template #end>
-						<InputText placeholder="Search" type="text" />
-					</template>
-				</Menubar>
-			</div>
-		</template>
-
-		<script>
-		export default {
-			data() {
-				return {
-					items: [
-						{
-							label:'File',
-							icon:'pi pi-fw pi-file',
-							items:[
-								{
-									label:'New',
-									icon:'pi pi-fw pi-plus',
-									items:[
-										{
-											label:'Bookmark',
-											icon:'pi pi-fw pi-bookmark'
-										},
-										{
-											label:'Video',
-											icon:'pi pi-fw pi-video'
-										}
-									]
-								},
-								{
-									label:'Delete',
-									icon:'pi pi-fw pi-trash'
-								},
-								{
-									separator:true
-								},
-								{
-									label:'Export',
-									icon:'pi pi-fw pi-external-link'
-								}
-							]
-						},
-						{
-							label:'Edit',
-							icon:'pi pi-fw pi-pencil',
-							items:[
-								{
-									label:'Left',
-									icon:'pi pi-fw pi-align-left'
-								},
-								{
-									label:'Right',
-									icon:'pi pi-fw pi-align-right'
-								},
-								{
-									label:'Center',
-									icon:'pi pi-fw pi-align-center'
-								},
-								{
-									label:'Justify',
-									icon:'pi pi-fw pi-align-justify'
-								}
-							]
-						},
-						{
-							label:'Users',
-							icon:'pi pi-fw pi-user',
-							items:[
-								{
-									label:'New',
-									icon:'pi pi-fw pi-user-plus',
-
-								},
-								{
-									label:'Delete',
-									icon:'pi pi-fw pi-user-minus',
-
-								},
-								{
-									label:'Search',
-									icon:'pi pi-fw pi-users',
-									items:[
-										{
-											label:'Filter',
-											icon:'pi pi-fw pi-filter',
-											items:[
-												{
-													label:'Print',
-													icon:'pi pi-fw pi-print'
-												}
-											]
-										},
-										{
-											icon:'pi pi-fw pi-bars',
-											label:'List'
-										}
-									]
-								}
-							]
-						},
-						{
-							label:'Events',
-							icon:'pi pi-fw pi-calendar',
-							items:[
-								{
-									label:'Edit',
-									icon:'pi pi-fw pi-pencil',
-									items:[
-										{
-											label:'Save',
-											icon:'pi pi-fw pi-calendar-plus'
-										},
-										{
-											label:'Delete',
-											icon:'pi pi-fw pi-calendar-minus'
-										}
-									]
-								},
-								{
-									label:'Archieve',
-									icon:'pi pi-fw pi-calendar-times',
-									items:[
-										{
-											label:'Remove',
-											icon:'pi pi-fw pi-calendar-minus'
-										}
-									]
-								}
-							]
-						},
-						{
-							label:'Quit',
-							icon:'pi pi-fw pi-power-off'
-						}
-					]
-				}
-			}
-		}
-		<\\/script>
-		`
-                },
-                'composition-api': {
-                    tabName: 'Composition API Source',
-                    content: `
-		<template>
-			<div>
-				<Menubar :model="items">
-					<template #start>
-						<img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" height="40" class="mr-2">
-					</template>
-					<template #end>
-						<InputText placeholder="Search" type="text" />
-					</template>
-				</Menubar>
-			</div>
-		</template>
-
-		<script>
-		import { ref } from 'vue';
-
-		export default {
-			setup() {
-				const items = ref([
-					{
-					label:'File',
-					icon:'pi pi-fw pi-file',
-					items:[
-							{
-								label:'New',
-								icon:'pi pi-fw pi-plus',
-								items:[
-									{
-										label:'Bookmark',
-										icon:'pi pi-fw pi-bookmark'
-									},
-									{
-										label:'Video',
-										icon:'pi pi-fw pi-video'
-									}
-								]
-							},
-							{
-								label:'Delete',
-								icon:'pi pi-fw pi-trash'
-							},
-							{
-								separator:true
-							},
-							{
-								label:'Export',
-								icon:'pi pi-fw pi-external-link'
-							}
-						]
-					},
-					{
-						label:'Edit',
-						icon:'pi pi-fw pi-pencil',
-						items:[
-							{
-								label:'Left',
-								icon:'pi pi-fw pi-align-left'
-							},
-							{
-								label:'Right',
-								icon:'pi pi-fw pi-align-right'
-							},
-							{
-								label:'Center',
-								icon:'pi pi-fw pi-align-center'
-							},
-							{
-								label:'Justify',
-								icon:'pi pi-fw pi-align-justify'
-							},
-						]
-					},
-					{
-						label:'Users',
-						icon:'pi pi-fw pi-user',
-						items:[
-							{
-								label:'New',
-								icon:'pi pi-fw pi-user-plus',
-							},
-							{
-								label:'Delete',
-								icon:'pi pi-fw pi-user-minus',
-							},
-							{
-								label:'Search',
-								icon:'pi pi-fw pi-users',
-								items:[
-									{
-										label:'Filter',
-										icon:'pi pi-fw pi-filter',
-										items:[
-											{
-												label:'Print',
-												icon:'pi pi-fw pi-print'
-											}
-										]
-									},
-									{
-										icon:'pi pi-fw pi-bars',
-										label:'List'
-									}
-								]
-							}
-						]
-					},
-					{
-						label:'Events',
-						icon:'pi pi-fw pi-calendar',
-						items:[
-							{
-								label:'Edit',
-								icon:'pi pi-fw pi-pencil',
-								items:[
-									{
-										label:'Save',
-										icon:'pi pi-fw pi-calendar-plus'
-									},
-									{
-										label:'Delete',
-										icon:'pi pi-fw pi-calendar-minus'
-									}
-								]
-							},
-							{
-								label:'Archieve',
-								icon:'pi pi-fw pi-calendar-times',
-								items:[
-									{
-										label:'Remove',
-										icon:'pi pi-fw pi-calendar-minus'
-									}
-								]
-							}
-						]
-					},
-					{
-						label:'Quit',
-						icon:'pi pi-fw pi-power-off'
-					}
-				]);
-
-				return { items }
-			}
-		}
-		<\\/script>
-		`
-                },
-                'browser-source': {
-                    tabName: 'Browser Source',
-                    imports: `<script src="https://unpkg.com/vue-router@4.0.0/dist/vue-router.global.js"><\\/script>
-		<script src="https://unpkg.com/primevue@^3/menubar/menubar.min.js"><\\/script>`,
-                    content: `<div id="app">
-			<p-menubar :model="items">
+	<template>
+		<div>
+			<Menubar :model="items">
 				<template #start>
 					<img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" height="40" class="mr-2">
 				</template>
 				<template #end>
-					<p-inputtext placeholder="Search" type="text"></p-inputtext>
+					<InputText placeholder="Search" type="text" />
 				</template>
-			</p-menubar>
+			</Menubar>
 		</div>
+	</template>
 
-		<script type="module">
-		const { createApp, ref } = Vue;
-
-		const App = {
-			setup() {
-				const items = ref([
+	<script>
+	export default {
+		data() {
+			return {
+				items: [
 					{
 						label:'File',
 						icon:'pi pi-fw pi-file',
@@ -687,10 +502,12 @@ export default {
 							{
 								label:'New',
 								icon:'pi pi-fw pi-user-plus',
+
 							},
 							{
 								label:'Delete',
 								icon:'pi pi-fw pi-user-minus',
+
 							},
 							{
 								label:'Search',
@@ -748,29 +565,329 @@ export default {
 						label:'Quit',
 						icon:'pi pi-fw pi-power-off'
 					}
-				]);
-
-				return { items }
-			},
-			components: {
-				"p-menubar": primevue.menubar,
-				"p-inputtext": primevue.inputtext
+				]
 			}
-		};
+		}
+	}
+	<\\/script>
+	`
+                },
+                'composition-api': {
+                    tabName: 'Composition API Source',
+                    content: `
+	<template>
+		<div>
+			<Menubar :model="items">
+				<template #start>
+					<img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" height="40" class="mr-2">
+				</template>
+				<template #end>
+					<InputText placeholder="Search" type="text" />
+				</template>
+			</Menubar>
+		</div>
+	</template>
 
-		const routes = [{ path: "/", component: App }];
+	<script>
+	import { ref } from 'vue';
 
-        const router = VueRouter.createRouter({
-            history: VueRouter.createWebHashHistory(),
-            routes
-        });
+	export default {
+		setup() {
+			const items = ref([
+				{
+				label:'File',
+				icon:'pi pi-fw pi-file',
+				items:[
+						{
+							label:'New',
+							icon:'pi pi-fw pi-plus',
+							items:[
+								{
+									label:'Bookmark',
+									icon:'pi pi-fw pi-bookmark'
+								},
+								{
+									label:'Video',
+									icon:'pi pi-fw pi-video'
+								}
+							]
+						},
+						{
+							label:'Delete',
+							icon:'pi pi-fw pi-trash'
+						},
+						{
+							separator:true
+						},
+						{
+							label:'Export',
+							icon:'pi pi-fw pi-external-link'
+						}
+					]
+				},
+				{
+					label:'Edit',
+					icon:'pi pi-fw pi-pencil',
+					items:[
+						{
+							label:'Left',
+							icon:'pi pi-fw pi-align-left'
+						},
+						{
+							label:'Right',
+							icon:'pi pi-fw pi-align-right'
+						},
+						{
+							label:'Center',
+							icon:'pi pi-fw pi-align-center'
+						},
+						{
+							label:'Justify',
+							icon:'pi pi-fw pi-align-justify'
+						},
+					]
+				},
+				{
+					label:'Users',
+					icon:'pi pi-fw pi-user',
+					items:[
+						{
+							label:'New',
+							icon:'pi pi-fw pi-user-plus',
+						},
+						{
+							label:'Delete',
+							icon:'pi pi-fw pi-user-minus',
+						},
+						{
+							label:'Search',
+							icon:'pi pi-fw pi-users',
+							items:[
+								{
+									label:'Filter',
+									icon:'pi pi-fw pi-filter',
+									items:[
+										{
+											label:'Print',
+											icon:'pi pi-fw pi-print'
+										}
+									]
+								},
+								{
+									icon:'pi pi-fw pi-bars',
+									label:'List'
+								}
+							]
+						}
+					]
+				},
+				{
+					label:'Events',
+					icon:'pi pi-fw pi-calendar',
+					items:[
+						{
+							label:'Edit',
+							icon:'pi pi-fw pi-pencil',
+							items:[
+								{
+									label:'Save',
+									icon:'pi pi-fw pi-calendar-plus'
+								},
+								{
+									label:'Delete',
+									icon:'pi pi-fw pi-calendar-minus'
+								}
+							]
+						},
+						{
+							label:'Archieve',
+							icon:'pi pi-fw pi-calendar-times',
+							items:[
+								{
+									label:'Remove',
+									icon:'pi pi-fw pi-calendar-minus'
+								}
+							]
+						}
+					]
+				},
+				{
+					label:'Quit',
+					icon:'pi pi-fw pi-power-off'
+				}
+			]);
 
-		createApp(App)
-			.use(router)
-            .use(primevue.config.default)
-            .mount("#app");
-		<\\/script>
-		`
+			return { items }
+		}
+	}
+	<\\/script>
+	`
+                },
+                'browser-source': {
+                    tabName: 'Browser Source',
+                    imports: `<script src="https://unpkg.com/vue-router@4.0.0/dist/vue-router.global.js"><\\/script>
+	<script src="https://unpkg.com/primevue@^3/menubar/menubar.min.js"><\\/script>`,
+                    content: `<div id="app">
+		<p-menubar :model="items">
+			<template #start>
+				<img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" height="40" class="mr-2">
+			</template>
+			<template #end>
+				<p-inputtext placeholder="Search" type="text"></p-inputtext>
+			</template>
+		</p-menubar>
+	</div>
+
+	<script type="module">
+	const { createApp, ref } = Vue;
+
+	const App = {
+		setup() {
+			const items = ref([
+				{
+					label:'File',
+					icon:'pi pi-fw pi-file',
+					items:[
+						{
+							label:'New',
+							icon:'pi pi-fw pi-plus',
+							items:[
+								{
+									label:'Bookmark',
+									icon:'pi pi-fw pi-bookmark'
+								},
+								{
+									label:'Video',
+									icon:'pi pi-fw pi-video'
+								}
+							]
+						},
+						{
+							label:'Delete',
+							icon:'pi pi-fw pi-trash'
+						},
+						{
+							separator:true
+						},
+						{
+							label:'Export',
+							icon:'pi pi-fw pi-external-link'
+						}
+					]
+				},
+				{
+					label:'Edit',
+					icon:'pi pi-fw pi-pencil',
+					items:[
+						{
+							label:'Left',
+							icon:'pi pi-fw pi-align-left'
+						},
+						{
+							label:'Right',
+							icon:'pi pi-fw pi-align-right'
+						},
+						{
+							label:'Center',
+							icon:'pi pi-fw pi-align-center'
+						},
+						{
+							label:'Justify',
+							icon:'pi pi-fw pi-align-justify'
+						}
+					]
+				},
+				{
+					label:'Users',
+					icon:'pi pi-fw pi-user',
+					items:[
+						{
+							label:'New',
+							icon:'pi pi-fw pi-user-plus',
+						},
+						{
+							label:'Delete',
+							icon:'pi pi-fw pi-user-minus',
+						},
+						{
+							label:'Search',
+							icon:'pi pi-fw pi-users',
+							items:[
+								{
+									label:'Filter',
+									icon:'pi pi-fw pi-filter',
+									items:[
+										{
+											label:'Print',
+											icon:'pi pi-fw pi-print'
+										}
+									]
+								},
+								{
+									icon:'pi pi-fw pi-bars',
+									label:'List'
+								}
+							]
+						}
+					]
+				},
+				{
+					label:'Events',
+					icon:'pi pi-fw pi-calendar',
+					items:[
+						{
+							label:'Edit',
+							icon:'pi pi-fw pi-pencil',
+							items:[
+								{
+									label:'Save',
+									icon:'pi pi-fw pi-calendar-plus'
+								},
+								{
+									label:'Delete',
+									icon:'pi pi-fw pi-calendar-minus'
+								}
+							]
+						},
+						{
+							label:'Archieve',
+							icon:'pi pi-fw pi-calendar-times',
+							items:[
+								{
+									label:'Remove',
+									icon:'pi pi-fw pi-calendar-minus'
+								}
+							]
+						}
+					]
+				},
+				{
+					label:'Quit',
+					icon:'pi pi-fw pi-power-off'
+				}
+			]);
+
+			return { items }
+		},
+		components: {
+			"p-menubar": primevue.menubar,
+			"p-inputtext": primevue.inputtext
+		}
+	};
+
+	const routes = [{ path: "/", component: App }];
+
+			const router = VueRouter.createRouter({
+					history: VueRouter.createWebHashHistory(),
+					routes
+			});
+
+	createApp(App)
+		.use(router)
+					.use(primevue.config.default)
+					.mount("#app");
+	<\\/script>
+	`
                 }
             }
         };
diff --git a/pages/message/MessageDoc.vue b/pages/message/MessageDoc.vue
index edd57cded..02cc44656 100755
--- a/pages/message/MessageDoc.vue
+++ b/pages/message/MessageDoc.vue
@@ -1,33 +1,32 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="MessageDemo" :sources="sources" github="message/MessageDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="MessageDemo" :sources="sources" github="message/MessageDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import Message from 'primevue/message';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p>Message component requires a content to display.</p>
-            <pre v-code><code>
+        <h5>Getting Started</h5>
+        <p>Message component requires a content to display.</p>
+        <pre v-code><code>
 &lt;Message&gt;Welcome to PrimeVue&lt;/Message&gt;
 
 </code></pre>
 
-            <p>Multiple messages can be displayed using the standard v-for directive.</p>
+        <p>Multiple messages can be displayed using the standard v-for directive.</p>
 
-            <pre v-code><code><template v-pre>
+        <pre v-code><code><template v-pre>
 &lt;Message v-for="msg of messages" :severity="msg.severity" :key="msg.content"&gt;{{msg.content}}&lt;/Message&gt;
 </template>
 </code></pre>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 data() {
 	return {
 		messages: [
@@ -40,229 +39,278 @@ data() {
 
 </code></pre>
 
-            <h5>Severities</h5>
-            <p>There are four possible values for the severity of a message. Default one is "info".</p>
+        <h5>Severities</h5>
+        <p>There are four possible values for the severity of a message. Default one is "info".</p>
 
-            <ul>
-                <li>success</li>
-                <li>info</li>
-                <li>warn</li>
-                <li>error</li>
-            </ul>
+        <ul>
+            <li>success</li>
+            <li>info</li>
+            <li>warn</li>
+            <li>error</li>
+        </ul>
 
-            <h5>Closable</h5>
-            <p>Messages are closable by default resulting in a close icon being displayed on top right corner. In order to disable closable messages, set <i>closable</i> to false.</p>
-            <pre v-code><code>
+        <h5>Closable</h5>
+        <p>Messages are closable by default resulting in a close icon being displayed on top right corner. In order to disable closable messages, set <i>closable</i> to false.</p>
+        <pre v-code><code>
 &lt;Message severity="success" :closable="false"&gt;Order Submitted&lt;/Message&gt;
 
 </code></pre>
 
-            <h5>Sticky</h5>
-            <p>
-                Messages are sticky by default, if you require them to be cleared automatically, disable <i>sticky</i> property and optionally configure the <i>life</i> property to specify how long the message should be displayed which is 3000 ms by
-                default.
-            </p>
-            <pre v-code><code>
+        <h5>Sticky</h5>
+        <p>
+            Messages are sticky by default, if you require them to be cleared automatically, disable <i>sticky</i> property and optionally configure the <i>life</i> property to specify how long the message should be displayed which is 3000 ms by
+            default.
+        </p>
+        <pre v-code><code>
 &lt;Message severity="warn" :life="5000" :sticky="false"&gt;This message will hide in 5 seconds.&lt;/Message&gt;
 
 </code></pre>
 
-            <h5>Inline Message Component</h5>
-            <pre v-code.script><code>
+        <h5>Inline Message Component</h5>
+        <pre v-code.script><code>
 import InlineMessage from 'primevue/inlinemessage';
 
 </code></pre>
 
-            <p>InlineMessage component is useful in cases where a single message needs to be displayed related to an element such as forms. It has one property, <i>severity</i> of the message.</p>
-            <pre v-code><code>
+        <p>InlineMessage component is useful in cases where a single message needs to be displayed related to an element such as forms. It has one property, <i>severity</i> of the message.</p>
+        <pre v-code><code>
 &lt;InputText placeholder="Username" class="p-invalid" /&gt;
 &lt;InlineMessage&gt;Field is required&lt;/InlineMessage&gt;
 
 </code></pre>
 
-            <h5>Properties of Message</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>severity</td>
-                            <td>string</td>
-                            <td>info</td>
-                            <td>Severity level of the message.</td>
-                        </tr>
-                        <tr>
-                            <td>closable</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether the message can be closed manually using the close icon.</td>
-                        </tr>
-                        <tr>
-                            <td>sticky</td>
-                            <td>boolean</td>
-                            <td>null</td>
-                            <td>When enabled, message is not removed automatically.</td>
-                        </tr>
-                        <tr>
-                            <td>life</td>
-                            <td>number</td>
-                            <td>3000</td>
-                            <td>Delay in milliseconds to close the message automatically.</td>
-                        </tr>
-                        <tr>
-                            <td>icon</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Display a custom icon for the message.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties of Message</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>severity</td>
+                        <td>string</td>
+                        <td>info</td>
+                        <td>Severity level of the message.</td>
+                    </tr>
+                    <tr>
+                        <td>closable</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Whether the message can be closed manually using the close icon.</td>
+                    </tr>
+                    <tr>
+                        <td>sticky</td>
+                        <td>boolean</td>
+                        <td>null</td>
+                        <td>When enabled, message is not removed automatically.</td>
+                    </tr>
+                    <tr>
+                        <td>life</td>
+                        <td>number</td>
+                        <td>3000</td>
+                        <td>Delay in milliseconds to close the message automatically.</td>
+                    </tr>
+                    <tr>
+                        <td>icon</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Display a custom icon for the message.</td>
+                    </tr>
+                    <tr>
+                        <td>closeIcon</td>
+                        <td>string</td>
+                        <td>pi pi-times</td>
+                        <td>Icon to display in the message close button.</td>
+                    </tr>
+                    <tr>
+                        <td>closeButtonProps</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Uses to pass all properties of the HTMLButtonElement to the close button.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Properties of InlineMessage</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>severity</td>
-                            <td>string</td>
-                            <td>error</td>
-                            <td>Severity level of the message.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties of InlineMessage</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>severity</td>
+                        <td>string</td>
+                        <td>error</td>
+                        <td>Severity level of the message.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Events of Message</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>close</td>
-                            <td>event: Browser event</td>
-                            <td>Callback to invoke when a message is closed.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Events of Message</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>close</td>
+                        <td>event: Browser event</td>
+                        <td>Callback to invoke when a message is closed.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
 
-            <strong>Message</strong>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-message</td>
-                            <td>Container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-message-info</td>
-                            <td>Container element when displaying info messages.</td>
-                        </tr>
-                        <tr>
-                            <td>p-message-warn</td>
-                            <td>Container element when displaying warning messages.</td>
-                        </tr>
-                        <tr>
-                            <td>p-message-error</td>
-                            <td>Container element when displaying error messages.</td>
-                        </tr>
-                        <tr>
-                            <td>p-message-success</td>
-                            <td>Container element when displaying success messages.</td>
-                        </tr>
-                        <tr>
-                            <td>p-message-close</td>
-                            <td>Close icon.</td>
-                        </tr>
-                        <tr>
-                            <td>p-message-icon</td>
-                            <td>Severity icon.</td>
-                        </tr>
-                        <tr>
-                            <td>p-message-text</td>
-                            <td>Content of a message.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <strong>Message</strong>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-message</td>
+                        <td>Container element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-message-info</td>
+                        <td>Container element when displaying info messages.</td>
+                    </tr>
+                    <tr>
+                        <td>p-message-warn</td>
+                        <td>Container element when displaying warning messages.</td>
+                    </tr>
+                    <tr>
+                        <td>p-message-error</td>
+                        <td>Container element when displaying error messages.</td>
+                    </tr>
+                    <tr>
+                        <td>p-message-success</td>
+                        <td>Container element when displaying success messages.</td>
+                    </tr>
+                    <tr>
+                        <td>p-message-close</td>
+                        <td>Close icon.</td>
+                    </tr>
+                    <tr>
+                        <td>p-message-icon</td>
+                        <td>Severity icon.</td>
+                    </tr>
+                    <tr>
+                        <td>p-message-text</td>
+                        <td>Content of a message.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <strong>InlineMessage</strong>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-inline-message</td>
-                            <td>Container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-inline-message-info</td>
-                            <td>Container element when displaying info messages.</td>
-                        </tr>
-                        <tr>
-                            <td>p-inline-message-warn</td>
-                            <td>Container element when displaying warning messages.</td>
-                        </tr>
-                        <tr>
-                            <td>p-inline-message-error</td>
-                            <td>Container element when displaying error messages.</td>
-                        </tr>
-                        <tr>
-                            <td>p-inline-message-success</td>
-                            <td>Container element when displaying success messages.</td>
-                        </tr>
-                        <tr>
-                            <td>p-inline-message-icon</td>
-                            <td>Severity icon.</td>
-                        </tr>
-                        <tr>
-                            <td>p-inline-message-text</td>
-                            <td>Content of a message.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <strong>InlineMessage</strong>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-inline-message</td>
+                        <td>Container element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-inline-message-info</td>
+                        <td>Container element when displaying info messages.</td>
+                    </tr>
+                    <tr>
+                        <td>p-inline-message-warn</td>
+                        <td>Container element when displaying warning messages.</td>
+                    </tr>
+                    <tr>
+                        <td>p-inline-message-error</td>
+                        <td>Container element when displaying error messages.</td>
+                    </tr>
+                    <tr>
+                        <td>p-inline-message-success</td>
+                        <td>Container element when displaying success messages.</td>
+                    </tr>
+                    <tr>
+                        <td>p-inline-message-icon</td>
+                        <td>Severity icon.</td>
+                    </tr>
+                    <tr>
+                        <td>p-inline-message-text</td>
+                        <td>Content of a message.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc>
-    </ClientOnly>
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>
+            Message components use <i>alert</i> role that implicitly defines <i>aria-live</i> as "assertive" and <i>aria-atomic</i> as "true". Since any attribute is passed to the root element, attributes like <i>aria-labelledby</i> and
+            <i>aria-label</i> can optionally be used as well.
+        </p>
+
+        <p>
+            Close element is a <i>button</i> with an <i>aria-label</i> that refers to the <i>aria.close</i> property of the <router-link to="/locale">locale</router-link> API by default, you may use <i>closeButtonProps</i> to customize the element
+            and override the default <i>aria-label</i>.
+        </p>
+
+        <h6>Close Button Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>Closes the message.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>Closes the message.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
diff --git a/pages/message/index.vue b/pages/message/index.vue
index d0d226ceb..15849a00f 100755
--- a/pages/message/index.vue
+++ b/pages/message/index.vue
@@ -22,7 +22,7 @@
                 <h5>Dynamic</h5>
                 <Button label="Show" @click="addMessages()" />
                 <transition-group name="p-message" tag="div">
-                    <Message v-for="msg of messages" :severity="msg.severity" :key="msg.id">{{ msg.content }}</Message>
+                    <Message v-for="msg of messages" :key="msg.id" :severity="msg.severity">{{ msg.content }}</Message>
                 </transition-group>
 
                 <h5>Inline Messages</h5>
diff --git a/pages/multiselect/MultiSelectDoc.vue b/pages/multiselect/MultiSelectDoc.vue
index b9854439b..b9a8e83a0 100755
--- a/pages/multiselect/MultiSelectDoc.vue
+++ b/pages/multiselect/MultiSelectDoc.vue
@@ -1,27 +1,26 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="MultiSelectDemo" :sources="sources" github="multiselect/MultiSelectDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="MultiSelectDemo" :sources="sources" github="multiselect/MultiSelectDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import MultiSelect from 'primevue/multiselect';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/multiselect/multiselect.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p>MultiSelect requires a value to bind and a collection of arbitrary objects along with the <i>optionLabel</i> property to specify the label property of the option.</p>
-            <pre v-code><code>
+        <h5>Getting Started</h5>
+        <p>MultiSelect requires a value to bind and a collection of arbitrary objects along with the <i>optionLabel</i> property to specify the label property of the option.</p>
+        <pre v-code><code>
 &lt;MultiSelect v-model="selectedCars" :options="cars" optionLabel="brand" placeholder="Select Brands" /&gt;
 
 </code></pre>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 data() {
 	return {
 		selectedCars: null,
@@ -41,16 +40,16 @@ data() {
 
 </code></pre>
 
-            <h5>Chips Display</h5>
-            <p>A comma separated list is used by default to display selected items whereas alternative chip mode is provided using the <i>display</i> property to visualize the items as tokens.</p>
-            <pre v-code><code>
+        <h5>Chips Display</h5>
+        <p>A comma separated list is used by default to display selected items whereas alternative chip mode is provided using the <i>display</i> property to visualize the items as tokens.</p>
+        <pre v-code><code>
 &lt;MultiSelect v-model="selectedCars" :options="cars" optionLabel="brand" placeholder="Select Brands" display="chip"/&gt;
 
 </code></pre>
 
-            <h5>Grouping</h5>
-            <p>Options groups are specified with the <i>optionGroupLabel</i> and <i>optionGroupChildren</i> properties.</p>
-            <pre v-code.script><code>
+        <h5>Grouping</h5>
+        <p>Options groups are specified with the <i>optionGroupLabel</i> and <i>optionGroupChildren</i> properties.</p>
+        <pre v-code.script><code>
 export default {
     data() {
         return {
@@ -87,34 +86,34 @@ export default {
 }
 </code></pre>
 
-            <pre v-code><code><template v-pre>
+        <pre v-code><code><template v-pre>
 &lt;MultiSelect v-model="selectedGroupedCities" :options="groupedCities"
         optionLabel="label" optionGroupLabel="label" optionGroupChildren="items"&gt;
 &lt;/MultiSelect&gt;
 </template>
 </code></pre>
 
-            <h5>Filtering</h5>
-            <p>
-                Filtering allows searching items in the list using an input field at the header. In order to use filtering, enable <i>filter</i> property. By default, optionLabel is used when searching and <i>filterFields</i> can be used to customize
-                the fields being utilized. Furthermore, <i>filterMatchMode</i> is available to define the search algorithm. Valid values are "contains" (default), "startsWith" and "endsWith".
-            </p>
+        <h5>Filtering</h5>
+        <p>
+            Filtering allows searching items in the list using an input field at the header. In order to use filtering, enable <i>filter</i> property. By default, optionLabel is used when searching and <i>filterFields</i> can be used to customize the
+            fields being utilized. Furthermore, <i>filterMatchMode</i> is available to define the search algorithm. Valid values are "contains" (default), "startsWith" and "endsWith".
+        </p>
 
-            <pre v-code><code>
+        <pre v-code><code>
 &lt;MultiSelect v-model="selectedCars" :options="cars" :filter="true" optionLabel="brand" placeholder="Select Brands"/&gt;
 
 </code></pre>
 
-            <h5>Templating</h5>
-            <p>
-                Label of an option is used as the display text of an item by default, for custom content support define an <i>option</i> template that gets the option instance as a parameter. In addition <i>value</i>, <i>optiongroup</i>, <i>chip</i>,
-                <i>header</i>, <i>footer</i>, <i>emptyfilter</i> and <i>empty</i> slots are provided for further customization.
-            </p>
-            <pre v-code><code><template v-pre>
+        <h5>Templating</h5>
+        <p>
+            Label of an option is used as the display text of an item by default, for custom content support define an <i>option</i> template that gets the option instance as a parameter. In addition <i>value</i>, <i>optiongroup</i>, <i>chip</i>,
+            <i>header</i>, <i>footer</i>, <i>emptyfilter</i> and <i>empty</i> slots are provided for further customization.
+        </p>
+        <pre v-code><code><template v-pre>
 &lt;MultiSelect v-model="selectedCars2" :options="cars" optionLabel="brand" placeholder="Select a Car"&gt;
 	&lt;template #value="slotProps"&gt;
 		&lt;div class="p-multiselect-car-token" v-for="option of slotProps.value" :key="option.brand"&gt;
-			&lt;img :alt="option.brand" :src="'/demo/images/car/' + option.brand + '.png'" /&gt;
+			&lt;img :alt="option.brand" :src="'demo/images/car/' + option.brand + '.png'" /&gt;
 			&lt;span&gt;{{option.brand}}&lt;/span&gt;
 		&lt;/div&gt;
 		&lt;template v-if="!slotProps.value || slotProps.value.length === 0"&gt;
@@ -123,7 +122,7 @@ export default {
 	&lt;/template&gt;
 	&lt;template #option="slotProps"&gt;
 		&lt;div class="p-multiselect-car-option"&gt;
-			&lt;img :alt="slotProps.option.brand" :src="'/demo/images/car/' + slotProps.option.brand + '.png'" /&gt;
+			&lt;img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" /&gt;
 			&lt;span&gt;{{slotProps.option.brand}}&lt;/span&gt;
 		&lt;/div&gt;
 	&lt;/template&gt;
@@ -131,532 +130,562 @@ export default {
 </template>
 </code></pre>
 
-            <h5>Properties</h5>
-            <p>Any property of HTMLDivElement are passed to the main container element. Following are the additional properties to configure the component.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>modelValue</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Value of the component.</td>
-                        </tr>
-                        <tr>
-                            <td>options</td>
-                            <td>array</td>
-                            <td>null</td>
-                            <td>An array of selectitems to display as the available options.</td>
-                        </tr>
-                        <tr>
-                            <td>optionLabel</td>
-                            <td>string | function</td>
-                            <td>null</td>
-                            <td>Property name or getter function to use as the label of an option.</td>
-                        </tr>
-                        <tr>
-                            <td>optionValue</td>
-                            <td>string | function</td>
-                            <td>null</td>
-                            <td>Property name or getter function to use as the value of an option, defaults to the option itself when not defined.</td>
-                        </tr>
-                        <tr>
-                            <td>optionDisabled</td>
-                            <td>string | function</td>
-                            <td>null</td>
-                            <td>Property name or getter function to use as the disabled flag of an option, defaults to false when not defined.</td>
-                        </tr>
-                        <tr>
-                            <td>optionGroupLabel</td>
-                            <td>string | function</td>
-                            <td>null</td>
-                            <td>Property name or getter function to use as the label of an option group.</td>
-                        </tr>
-                        <tr>
-                            <td>optionGroupChildren</td>
-                            <td>string | function</td>
-                            <td>null</td>
-                            <td>Property name or getter function that refers to the children options of option group.</td>
-                        </tr>
-                        <tr>
-                            <td>scrollHeight</td>
-                            <td>string</td>
-                            <td>200px</td>
-                            <td>Height of the viewport, a scrollbar is defined if height of list exceeds this value.</td>
-                        </tr>
-                        <tr>
-                            <td>placeholder</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Label to display when there are no selections.</td>
-                        </tr>
-                        <tr>
-                            <td>disabled</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When present, it specifies that the component should be disabled.</td>
-                        </tr>
-                        <tr>
-                            <td>inputId</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Identifier of the underlying input element.</td>
-                        </tr>
-                        <tr>
-                            <td>inputProps</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.</td>
-                        </tr>
-                        <tr>
-                            <td>panelStyle</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Inline style of the overlay panel.</td>
-                        </tr>
-                        <tr>
-                            <td>panelClass</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the overlay panel.</td>
-                        </tr>
-                        <tr>
-                            <td>panelProps</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Uses to pass all properties of the HTMLDivElement to the overlay panel.</td>
-                        </tr>
-                        <tr>
-                            <td>filterInputProps</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Uses to pass all properties of the HTMLInputElement to the filter input inside the overlay panel.</td>
-                        </tr>
-                        <tr>
-                            <td>closeButtonProps</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Uses to pass all properties of the HTMLButtonElement to the close button inside the overlay panel.</td>
-                        </tr>
-                        <tr>
-                            <td>dataKey</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>A property to uniquely identify an option.</td>
-                        </tr>
-                        <tr>
-                            <td>filter</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When specified, displays a filter input at header.</td>
-                        </tr>
-                        <tr>
-                            <td>filterPlaceholder</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Placeholder text to show when filter input is empty.</td>
-                        </tr>
-                        <tr>
-                            <td>filterLocale</td>
-                            <td>string</td>
-                            <td>undefined</td>
-                            <td>Locale to use in filtering. The default locale is the host environment's current locale.</td>
-                        </tr>
-                        <tr>
-                            <td>filterMatchMode</td>
-                            <td>string</td>
-                            <td>contains</td>
-                            <td>Defines the filtering algorithm to use when searching the options. Valid values are "contains" (default), "startsWith" and "endsWith"</td>
-                        </tr>
-                        <tr>
-                            <td>filterFields</td>
-                            <td>array</td>
-                            <td>null</td>
-                            <td>Fields used when filtering the options, defaults to optionLabel.</td>
-                        </tr>
-                        <tr>
-                            <td>appendTo</td>
-                            <td>string</td>
-                            <td>body</td>
-                            <td>A valid query selector or an HTMLElement to specify where the overlay gets attached. Special keywords are "body" for document body and "self" for the element itself.</td>
-                        </tr>
-                        <tr>
-                            <td>display</td>
-                            <td>string</td>
-                            <td>comma</td>
-                            <td>Defines how the selected items are displayed, valid values are "comma" and "chip".</td>
-                        </tr>
-                        <tr>
-                            <td>selectedItemsLabel</td>
-                            <td>string</td>
-                            <td>&#123;0&#125; items selected</td>
-                            <td>Label to display after exceeding max selected labels.</td>
-                        </tr>
-                        <tr>
-                            <td>maxSelectedLabels</td>
-                            <td>number</td>
-                            <td>null</td>
-                            <td>Decides how many selected item labels to show at most.</td>
-                        </tr>
-                        <tr>
-                            <td>selectionLimit</td>
-                            <td>number</td>
-                            <td>null</td>
-                            <td>Maximum number of selectable items.</td>
-                        </tr>
-                        <tr>
-                            <td>showToggleAll</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether to show the header checkbox to toggle the selection of all items at once.</td>
-                        </tr>
-                        <tr>
-                            <td>loading</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Whether the multiselect is in loading state.</td>
-                        </tr>
-                        <tr>
-                            <td>loadingIcon</td>
-                            <td>string</td>
-                            <td>pi pi-spinner pi-spin</td>
-                            <td>Icon to display in loading state.</td>
-                        </tr>
-                        <tr>
-                            <td>selectAll</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Whether all data is selected.</td>
-                        </tr>
-                        <tr>
-                            <td>resetFilterOnHide</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Clears the filter value when hiding the dropdown.</td>
-                        </tr>
-                        <tr>
-                            <td>virtualScrollerOptions</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Whether to use the virtualScroller feature. The properties of <nuxt-link to="/virtualscroller">VirtualScroller</nuxt-link> component can be used like an object in it.</td>
-                        </tr>
-                        <tr>
-                            <td>autoOptionFocus</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether to focus on the first visible or selected element when the overlay panel is shown.</td>
-                        </tr>
-                        <tr>
-                            <td>autoFilterFocus</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Whether to focus on the filter element when the overlay panel is shown.</td>
-                        </tr>
-                        <tr>
-                            <td>filterMessage</td>
-                            <td>string</td>
-                            <td>{0} results are available</td>
-                            <td>Text to be displayed in hidden accessible field when filtering returns any results. Defaults to value from PrimeVue locale configuration.</td>
-                        </tr>
-                        <tr>
-                            <td>selectionMessage</td>
-                            <td>string</td>
-                            <td>{0} items selected</td>
-                            <td>Text to be displayed in hidden accessible field when options are selected. Defaults to value from PrimeVue locale configuration.</td>
-                        </tr>
-                        <tr>
-                            <td>emptySelectionMessage</td>
-                            <td>string</td>
-                            <td>No selected item</td>
-                            <td>Text to be displayed in hidden accessible field when any option is not selected. Defaults to value from PrimeVue locale configuration.</td>
-                        </tr>
-                        <tr>
-                            <td>emptyFilterMessage</td>
-                            <td>string</td>
-                            <td>No results found</td>
-                            <td>Text to be displayed when filtering does not return any results. Defaults to value from PrimeVue locale configuration.</td>
-                        </tr>
-                        <tr>
-                            <td>emptyMessage</td>
-                            <td>string</td>
-                            <td>No results found</td>
-                            <td>Text to be displayed when there are no options available. Defaults to value from PrimeVue locale configuration.</td>
-                        </tr>
-                        <tr>
-                            <td>tabindex</td>
-                            <td>number</td>
-                            <td>0</td>
-                            <td>Index of the element in tabbing order.</td>
-                        </tr>
-                        <tr>
-                            <td>aria-label</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Defines a string value that labels an interactive element.</td>
-                        </tr>
-                        <tr>
-                            <td>aria-labelledby</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <p>Any property of HTMLDivElement are passed to the main container element. Following are the additional properties to configure the component.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>modelValue</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Value of the component.</td>
+                    </tr>
+                    <tr>
+                        <td>options</td>
+                        <td>array</td>
+                        <td>null</td>
+                        <td>An array of selectitems to display as the available options.</td>
+                    </tr>
+                    <tr>
+                        <td>optionLabel</td>
+                        <td>string | function</td>
+                        <td>null</td>
+                        <td>Property name or getter function to use as the label of an option.</td>
+                    </tr>
+                    <tr>
+                        <td>optionValue</td>
+                        <td>string | function</td>
+                        <td>null</td>
+                        <td>Property name or getter function to use as the value of an option, defaults to the option itself when not defined.</td>
+                    </tr>
+                    <tr>
+                        <td>optionDisabled</td>
+                        <td>string | function</td>
+                        <td>null</td>
+                        <td>Property name or getter function to use as the disabled flag of an option, defaults to false when not defined.</td>
+                    </tr>
+                    <tr>
+                        <td>optionGroupLabel</td>
+                        <td>string | function</td>
+                        <td>null</td>
+                        <td>Property name or getter function to use as the label of an option group.</td>
+                    </tr>
+                    <tr>
+                        <td>optionGroupChildren</td>
+                        <td>string | function</td>
+                        <td>null</td>
+                        <td>Property name or getter function that refers to the children options of option group.</td>
+                    </tr>
+                    <tr>
+                        <td>scrollHeight</td>
+                        <td>string</td>
+                        <td>200px</td>
+                        <td>Height of the viewport, a scrollbar is defined if height of list exceeds this value.</td>
+                    </tr>
+                    <tr>
+                        <td>placeholder</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Label to display when there are no selections.</td>
+                    </tr>
+                    <tr>
+                        <td>disabled</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When present, it specifies that the component should be disabled.</td>
+                    </tr>
+                    <tr>
+                        <td>inputId</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Identifier of the underlying input element.</td>
+                    </tr>
+                    <tr>
+                        <td>inputProps</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.</td>
+                    </tr>
+                    <tr>
+                        <td>panelStyle</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Inline style of the overlay panel.</td>
+                    </tr>
+                    <tr>
+                        <td>panelClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the overlay panel.</td>
+                    </tr>
+                    <tr>
+                        <td>panelProps</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Uses to pass all properties of the HTMLDivElement to the overlay panel.</td>
+                    </tr>
+                    <tr>
+                        <td>filterInputProps</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Uses to pass all properties of the HTMLInputElement to the filter input inside the overlay panel.</td>
+                    </tr>
+                    <tr>
+                        <td>closeButtonProps</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Uses to pass all properties of the HTMLButtonElement to the close button inside the overlay panel.</td>
+                    </tr>
+                    <tr>
+                        <td>dataKey</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>A property to uniquely identify an option.</td>
+                    </tr>
+                    <tr>
+                        <td>filter</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When specified, displays a filter input at header.</td>
+                    </tr>
+                    <tr>
+                        <td>filterPlaceholder</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Placeholder text to show when filter input is empty.</td>
+                    </tr>
+                    <tr>
+                        <td>filterLocale</td>
+                        <td>string</td>
+                        <td>undefined</td>
+                        <td>Locale to use in filtering. The default locale is the host environment's current locale.</td>
+                    </tr>
+                    <tr>
+                        <td>filterMatchMode</td>
+                        <td>string</td>
+                        <td>contains</td>
+                        <td>Defines the filtering algorithm to use when searching the options. Valid values are "contains" (default), "startsWith" and "endsWith"</td>
+                    </tr>
+                    <tr>
+                        <td>filterFields</td>
+                        <td>array</td>
+                        <td>null</td>
+                        <td>Fields used when filtering the options, defaults to optionLabel.</td>
+                    </tr>
+                    <tr>
+                        <td>appendTo</td>
+                        <td>string</td>
+                        <td>body</td>
+                        <td>A valid query selector or an HTMLElement to specify where the overlay gets attached. Special keywords are "body" for document body and "self" for the element itself.</td>
+                    </tr>
+                    <tr>
+                        <td>display</td>
+                        <td>string</td>
+                        <td>comma</td>
+                        <td>Defines how the selected items are displayed, valid values are "comma" and "chip".</td>
+                    </tr>
+                    <tr>
+                        <td>selectedItemsLabel</td>
+                        <td>string</td>
+                        <td>&#123;0&#125; items selected</td>
+                        <td>Label to display after exceeding max selected labels.</td>
+                    </tr>
+                    <tr>
+                        <td>maxSelectedLabels</td>
+                        <td>number</td>
+                        <td>null</td>
+                        <td>Decides how many selected item labels to show at most.</td>
+                    </tr>
+                    <tr>
+                        <td>selectionLimit</td>
+                        <td>number</td>
+                        <td>null</td>
+                        <td>Maximum number of selectable items.</td>
+                    </tr>
+                    <tr>
+                        <td>showToggleAll</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Whether to show the header checkbox to toggle the selection of all items at once.</td>
+                    </tr>
+                    <tr>
+                        <td>loading</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Whether the multiselect is in loading state.</td>
+                    </tr>
+                    <tr>
+                        <td>checkboxIcon</td>
+                        <td>string</td>
+                        <td>pi pi-check</td>
+                        <td>Icon to display in the checkboxes.</td>
+                    </tr>
+                    <tr>
+                        <td>closeIcon</td>
+                        <td>string</td>
+                        <td>pi pi-times</td>
+                        <td>Icon to display in the dropdown close button.</td>
+                    </tr>
+                    <tr>
+                        <td>dropdownIcon</td>
+                        <td>string</td>
+                        <td>pi pi-chevron-down</td>
+                        <td>Icon to display in dropdown.</td>
+                    </tr>
+                    <tr>
+                        <td>filterIcon</td>
+                        <td>string</td>
+                        <td>pi pi-search</td>
+                        <td>Icon to display in filter input.</td>
+                    </tr>
+                    <tr>
+                        <td>loadingIcon</td>
+                        <td>string</td>
+                        <td>pi pi-spinner pi-spin</td>
+                        <td>Icon to display in loading state.</td>
+                    </tr>
+                    <tr>
+                        <td>removeTokenIcon</td>
+                        <td>string</td>
+                        <td>pi pi-times-circle</td>
+                        <td>Icon to display in chip remove action.</td>
+                    </tr>
+                    <tr>
+                        <td>selectAll</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Whether all data is selected.</td>
+                    </tr>
+                    <tr>
+                        <td>resetFilterOnHide</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Clears the filter value when hiding the dropdown.</td>
+                    </tr>
+                    <tr>
+                        <td>virtualScrollerOptions</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Whether to use the virtualScroller feature. The properties of <router-link to="/virtualscroller">VirtualScroller</router-link> component can be used like an object in it.</td>
+                    </tr>
+                    <tr>
+                        <td>autoOptionFocus</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Whether to focus on the first visible or selected element when the overlay panel is shown.</td>
+                    </tr>
+                    <tr>
+                        <td>autoFilterFocus</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Whether to focus on the filter element when the overlay panel is shown.</td>
+                    </tr>
+                    <tr>
+                        <td>filterMessage</td>
+                        <td>string</td>
+                        <td>{0} results are available</td>
+                        <td>Text to be displayed in hidden accessible field when filtering returns any results. Defaults to value from PrimeVue locale configuration.</td>
+                    </tr>
+                    <tr>
+                        <td>selectionMessage</td>
+                        <td>string</td>
+                        <td>{0} items selected</td>
+                        <td>Text to be displayed in hidden accessible field when options are selected. Defaults to value from PrimeVue locale configuration.</td>
+                    </tr>
+                    <tr>
+                        <td>emptySelectionMessage</td>
+                        <td>string</td>
+                        <td>No selected item</td>
+                        <td>Text to be displayed in hidden accessible field when any option is not selected. Defaults to value from PrimeVue locale configuration.</td>
+                    </tr>
+                    <tr>
+                        <td>emptyFilterMessage</td>
+                        <td>string</td>
+                        <td>No results found</td>
+                        <td>Text to be displayed when filtering does not return any results. Defaults to value from PrimeVue locale configuration.</td>
+                    </tr>
+                    <tr>
+                        <td>emptyMessage</td>
+                        <td>string</td>
+                        <td>No results found</td>
+                        <td>Text to be displayed when there are no options available. Defaults to value from PrimeVue locale configuration.</td>
+                    </tr>
+                    <tr>
+                        <td>tabindex</td>
+                        <td>number</td>
+                        <td>0</td>
+                        <td>Index of the element in tabbing order.</td>
+                    </tr>
+                    <tr>
+                        <td>aria-label</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Defines a string value that labels an interactive element.</td>
+                    </tr>
+                    <tr>
+                        <td>aria-labelledby</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Events</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>change</td>
-                            <td>
-                                event.originalEvent: Original event <br />
-                                event.value: Selected option value
-                            </td>
-                            <td>Callback to invoke on value change.</td>
-                        </tr>
-                        <tr>
-                            <td>focus</td>
-                            <td>event</td>
-                            <td>Callback to invoke when the component receives focus.</td>
-                        </tr>
-                        <tr>
-                            <td>blur</td>
-                            <td>event</td>
-                            <td>Callback to invoke when the component loses focus.</td>
-                        </tr>
-                        <tr>
-                            <td>before-show</td>
-                            <td>-</td>
-                            <td>Callback to invoke before the overlay is shown.</td>
-                        </tr>
-                        <tr>
-                            <td>before-hide</td>
-                            <td>-</td>
-                            <td>Callback to invoke before the overlay is hidden.</td>
-                        </tr>
-                        <tr>
-                            <td>show</td>
-                            <td>-</td>
-                            <td>Callback to invoke when the overlay is shown.</td>
-                        </tr>
-                        <tr>
-                            <td>hide</td>
-                            <td>-</td>
-                            <td>Callback to invoke when the overlay is hidden.</td>
-                        </tr>
-                        <tr>
-                            <td>filter</td>
-                            <td>
-                                event.originalEvent: Original event <br />
-                                event.value: Filter value
-                            </td>
-                            <td>Callback to invoke on filter input.</td>
-                        </tr>
-                        <tr>
-                            <td>selectall-change</td>
-                            <td>
-                                event.originalEvent: Original event <br />
-                                event.checked: Whether all data is selected.
-                            </td>
-                            <td>Callback to invoke when all data is selected.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Events</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>change</td>
+                        <td>
+                            event.originalEvent: Original event <br />
+                            event.value: Selected option value
+                        </td>
+                        <td>Callback to invoke on value change.</td>
+                    </tr>
+                    <tr>
+                        <td>focus</td>
+                        <td>event</td>
+                        <td>Callback to invoke when the component receives focus.</td>
+                    </tr>
+                    <tr>
+                        <td>blur</td>
+                        <td>event</td>
+                        <td>Callback to invoke when the component loses focus.</td>
+                    </tr>
+                    <tr>
+                        <td>before-show</td>
+                        <td>-</td>
+                        <td>Callback to invoke before the overlay is shown.</td>
+                    </tr>
+                    <tr>
+                        <td>before-hide</td>
+                        <td>-</td>
+                        <td>Callback to invoke before the overlay is hidden.</td>
+                    </tr>
+                    <tr>
+                        <td>show</td>
+                        <td>-</td>
+                        <td>Callback to invoke when the overlay is shown.</td>
+                    </tr>
+                    <tr>
+                        <td>hide</td>
+                        <td>-</td>
+                        <td>Callback to invoke when the overlay is hidden.</td>
+                    </tr>
+                    <tr>
+                        <td>filter</td>
+                        <td>
+                            event.originalEvent: Original event <br />
+                            event.value: Filter value
+                        </td>
+                        <td>Callback to invoke on filter input.</td>
+                    </tr>
+                    <tr>
+                        <td>selectall-change</td>
+                        <td>
+                            event.originalEvent: Original event <br />
+                            event.checked: Whether all data is selected.
+                        </td>
+                        <td>Callback to invoke when all data is selected.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Methods</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>show</td>
-                            <td>isFocus: Decides whether to focus on the component. Default value is false.</td>
-                            <td>Shows the overlay.</td>
-                        </tr>
-                        <tr>
-                            <td>hide</td>
-                            <td>isFocus: Decides whether to focus on the component. Default value is false.</td>
-                            <td>Hides the overlay.</td>
-                        </tr>
-                        <tr>
-                            <td>clearFilter</td>
-                            <td>-</td>
-                            <td>Clears filter input.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Methods</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>show</td>
+                        <td>isFocus: Decides whether to focus on the component. Default value is false.</td>
+                        <td>Shows the overlay.</td>
+                    </tr>
+                    <tr>
+                        <td>hide</td>
+                        <td>isFocus: Decides whether to focus on the component. Default value is false.</td>
+                        <td>Hides the overlay.</td>
+                    </tr>
+                    <tr>
+                        <td>clearFilter</td>
+                        <td>-</td>
+                        <td>Clears filter input.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Slots</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>value</td>
-                            <td>
-                                value: Value of the component <br />
-                                placeholder: Placeholder prop value
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>chip</td>
-                            <td>value: A value in the selection</td>
-                        </tr>
-                        <tr>
-                            <td>indicator</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>header</td>
-                            <td>
-                                value: Value of the component <br />
-                                options: Displayed options
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>footer</td>
-                            <td>
-                                value: Value of the component <br />
-                                options: Displayed options
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>option</td>
-                            <td>
-                                option: Option instance <br />
-                                index: Index of the option
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>optiongroup</td>
-                            <td>
-                                option: OptionGroup instance <br />
-                                index: Index of the option group
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>emptyfilter</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>empty</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>content</td>
-                            <td>
-                                items: An array of objects to display for virtualscroller<br />
-                                styleClass: Style class of the component<br />
-                                contentRef: Referance of the content<br />
-                                getItemOptions: Options of the items
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>loader</td>
-                            <td>options: Options of the loader items for virtualscroller</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Slots</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>value</td>
+                        <td>
+                            value: Value of the component <br />
+                            placeholder: Placeholder prop value
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>chip</td>
+                        <td>value: A value in the selection</td>
+                    </tr>
+                    <tr>
+                        <td>indicator</td>
+                        <td>-</td>
+                    </tr>
+                    <tr>
+                        <td>header</td>
+                        <td>
+                            value: Value of the component <br />
+                            options: Displayed options
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>footer</td>
+                        <td>
+                            value: Value of the component <br />
+                            options: Displayed options
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>option</td>
+                        <td>
+                            option: Option instance <br />
+                            index: Index of the option
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>optiongroup</td>
+                        <td>
+                            option: OptionGroup instance <br />
+                            index: Index of the option group
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>emptyfilter</td>
+                        <td>-</td>
+                    </tr>
+                    <tr>
+                        <td>empty</td>
+                        <td>-</td>
+                    </tr>
+                    <tr>
+                        <td>content</td>
+                        <td>
+                            items: An array of objects to display for virtualscroller<br />
+                            styleClass: Style class of the component<br />
+                            contentRef: Referance of the content<br />
+                            getItemOptions: Options of the items
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>loader</td>
+                        <td>options: Options of the loader items for virtualscroller</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-multiselect</td>
-                            <td>Container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-multiselect-label-container</td>
-                            <td>Container of the label to display selected items.</td>
-                        </tr>
-                        <tr>
-                            <td>p-multiselect-label-container</td>
-                            <td>Label to display selected items.</td>
-                        </tr>
-                        <tr>
-                            <td>p-multiselect-trigger</td>
-                            <td>Dropdown button.</td>
-                        </tr>
-                        <tr>
-                            <td>p-multiselect-filter-container</td>
-                            <td>Container of filter input.</td>
-                        </tr>
-                        <tr>
-                            <td>p-multiselect-panel</td>
-                            <td>Overlay panel for items.</td>
-                        </tr>
-                        <tr>
-                            <td>p-multiselect-items</td>
-                            <td>List container of items.</td>
-                        </tr>
-                        <tr>
-                            <td>p-multiselect-item</td>
-                            <td>An item in the list.</td>
-                        </tr>
-                        <tr>
-                            <td>p-overlay-open</td>
-                            <td>Container element when overlay is visible.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-multiselect</td>
+                        <td>Container element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-multiselect-label-container</td>
+                        <td>Container of the label to display selected items.</td>
+                    </tr>
+                    <tr>
+                        <td>p-multiselect-label-container</td>
+                        <td>Label to display selected items.</td>
+                    </tr>
+                    <tr>
+                        <td>p-multiselect-trigger</td>
+                        <td>Dropdown button.</td>
+                    </tr>
+                    <tr>
+                        <td>p-multiselect-filter-container</td>
+                        <td>Container of filter input.</td>
+                    </tr>
+                    <tr>
+                        <td>p-multiselect-panel</td>
+                        <td>Overlay panel for items.</td>
+                    </tr>
+                    <tr>
+                        <td>p-multiselect-items</td>
+                        <td>List container of items.</td>
+                    </tr>
+                    <tr>
+                        <td>p-multiselect-item</td>
+                        <td>An item in the list.</td>
+                    </tr>
+                    <tr>
+                        <td>p-overlay-open</td>
+                        <td>Container element when overlay is visible.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Accessibility</h5>
-            <h6>Screen Reader</h6>
-            <p>
-                Value to describe the component can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. The multiselect component has a <i>combobox</i> role in addition to <i>aria-haspopup</i> and
-                <i>aria-expanded</i> attributes. The relation between the combobox and the popup is created with <i>aria-controls</i> attribute that refers to the id of the popup listbox.
-            </p>
-            <p>The popup listbox uses <i>listbox</i> as the role with <i>aria-multiselectable</i> enabled. Each list item has an <i>option</i> role along with <i>aria-label</i>, <i>aria-selected</i> and <i>aria-disabled</i> attributes.</p>
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>
+            Value to describe the component can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. The multiselect component has a <i>combobox</i> role in addition to <i>aria-haspopup</i> and <i>aria-expanded</i> attributes.
+            The relation between the combobox and the popup is created with <i>aria-controls</i> attribute that refers to the id of the popup listbox.
+        </p>
+        <p>The popup listbox uses <i>listbox</i> as the role with <i>aria-multiselectable</i> enabled. Each list item has an <i>option</i> role along with <i>aria-label</i>, <i>aria-selected</i> and <i>aria-disabled</i> attributes.</p>
 
-            <p>
-                Checkbox component at the header uses a hidden native checkbox element internally that is only visible to screen readers. Value to read is defined with the <i>selectAll</i> and <i>unselectAll</i> keys of the <i>aria</i> property from
-                the <nuxt-link to="/locale">locale</nuxt-link> API.
-            </p>
+        <p>
+            Checkbox component at the header uses a hidden native checkbox element internally that is only visible to screen readers. Value to read is defined with the <i>selectAll</i> and <i>unselectAll</i> keys of the <i>aria</i> property from the
+            <router-link to="/locale">locale</router-link> API.
+        </p>
 
-            <p>If filtering is enabled, <i>filterInputProps</i> can be defined to give <i>aria-*</i> props to the input element.</p>
+        <p>If filtering is enabled, <i>filterInputProps</i> can be defined to give <i>aria-*</i> props to the input element.</p>
 
-            <p>Close button uses <i>close</i> key of the <i>aria</i> property from the <nuxt-link to="/locale">locale</nuxt-link> API as the <i>aria-label</i> by default, this can be overriden with the <i>closeButtonProps</i>.</p>
-            <pre v-code><code>
+        <p>Close button uses <i>close</i> key of the <i>aria</i> property from the <router-link to="/locale">locale</router-link> API as the <i>aria-label</i> by default, this can be overriden with the <i>closeButtonProps</i>.</p>
+        <pre v-code><code>
 &lt;span id="dd1"&gt;Options&lt;/span&gt;
 &lt;MultiSelect aria-labelledby="dd1" /&gt;
 
@@ -664,236 +693,235 @@ export default {
 
 </code></pre>
 
-            <h6>Closed State Keyboard Support</h6>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Key</th>
-                            <th>Function</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td><i>tab</i></td>
-                            <td>Moves focus to the multiselect element.</td>
-                        </tr>
-                        <tr>
-                            <td><i>space</i></td>
-                            <td>Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus.</td>
-                        </tr>
-                        <tr>
-                            <td><i>enter</i></td>
-                            <td>Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus.</td>
-                        </tr>
-                        <tr>
-                            <td><i>down arrow</i></td>
-                            <td>Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus.</td>
-                        </tr>
-                        <tr>
-                            <td><i>up arrow</i></td>
-                            <td>Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus.</td>
-                        </tr>
-                        <tr>
-                            <td><i>any printable character</i></td>
-                            <td>Opens the popup and moves focus to the option whose label starts with the characters being typed, if there is none then first option receives the focus.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h6>Closed State Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>tab</i></td>
+                        <td>Moves focus to the multiselect element.</td>
+                    </tr>
+                    <tr>
+                        <td><i>space</i></td>
+                        <td>Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus.</td>
+                    </tr>
+                    <tr>
+                        <td><i>enter</i></td>
+                        <td>Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus.</td>
+                    </tr>
+                    <tr>
+                        <td><i>down arrow</i></td>
+                        <td>Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus.</td>
+                    </tr>
+                    <tr>
+                        <td><i>up arrow</i></td>
+                        <td>Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus.</td>
+                    </tr>
+                    <tr>
+                        <td><i>any printable character</i></td>
+                        <td>Opens the popup and moves focus to the option whose label starts with the characters being typed, if there is none then first option receives the focus.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h6>Popup Keyboard Support</h6>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Key</th>
-                            <th>Function</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td><i>tab</i></td>
-                            <td>Moves focus to the next focusable element in the popup, if there is none then first focusable element receives the focus.</td>
-                        </tr>
-                        <tr>
-                            <td><i>shift</i> + <i>tab</i></td>
-                            <td>Moves focus to the previous focusable element in the popup, if there is none then last focusable element receives the focus.</td>
-                        </tr>
-                        <tr>
-                            <td><i>enter</i></td>
-                            <td>Toggles the selection state of the focused option, then moves focus to the multiselect element.</td>
-                        </tr>
-                        <tr>
-                            <td><i>space</i></td>
-                            <td>Toggles the selection state of the focused option, then moves focus to the multiselect element.</td>
-                        </tr>
-                        <tr>
-                            <td><i>escape</i></td>
-                            <td>Closes the popup, moves focus to the multiselect element.</td>
-                        </tr>
-                        <tr>
-                            <td><i>down arrow</i></td>
-                            <td>Moves focus to the next option, if there is none then visual focus does not change.</td>
-                        </tr>
-                        <tr>
-                            <td><i>up arrow</i></td>
-                            <td>Moves focus to the previous option, if there is none then visual focus does not change.</td>
-                        </tr>
-                        <tr>
-                            <td><i>alt</i> + <i>up arrow</i></td>
-                            <td>Selects the focused option and closes the popup, then moves focus to the multiselect element.</td>
-                        </tr>
-                        <tr>
-                            <td><i>shift</i> + <i>down arrow</i></td>
-                            <td>Moves focus to the next option and toggles the selection state.</td>
-                        </tr>
-                        <tr>
-                            <td><i>shift</i> + <i>up arrow</i></td>
-                            <td>Moves focus to the previous option and toggles the selection state.</td>
-                        </tr>
-                        <tr>
-                            <td><i>shift</i> + <i>space</i></td>
-                            <td>Selects the items between the most recently selected option and the focused option.</td>
-                        </tr>
-                        <tr>
-                            <td><i>home</i></td>
-                            <td>Moves focus to the first option.</td>
-                        </tr>
-                        <tr>
-                            <td><i>end</i></td>
-                            <td>Moves focus to the last option.</td>
-                        </tr>
-                        <tr>
-                            <td><i>control</i> + <i>shift</i> + <i>home</i></td>
-                            <td>Selects the focused options and all the options up to the first one.</td>
-                        </tr>
-                        <tr>
-                            <td><i>control</i> + <i>shift</i> + <i>end</i></td>
-                            <td>Selects the focused options and all the options down to the last one.</td>
-                        </tr>
-                        <tr>
-                            <td><i>control</i> + <i>a</i></td>
-                            <td>Selects all options.</td>
-                        </tr>
-                        <tr>
-                            <td><i>pageUp</i></td>
-                            <td>Jumps visual focus to first option.</td>
-                        </tr>
-                        <tr>
-                            <td><i>pageDown</i></td>
-                            <td>Jumps visual focus to last option.</td>
-                        </tr>
-                        <tr>
-                            <td><i>any printable character</i></td>
-                            <td>Moves focus to the option whose label starts with the characters being typed.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h6>Popup Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>tab</i></td>
+                        <td>Moves focus to the next focusable element in the popup, if there is none then first focusable element receives the focus.</td>
+                    </tr>
+                    <tr>
+                        <td><i>shift</i> + <i>tab</i></td>
+                        <td>Moves focus to the previous focusable element in the popup, if there is none then last focusable element receives the focus.</td>
+                    </tr>
+                    <tr>
+                        <td><i>enter</i></td>
+                        <td>Toggles the selection state of the focused option, then moves focus to the multiselect element.</td>
+                    </tr>
+                    <tr>
+                        <td><i>space</i></td>
+                        <td>Toggles the selection state of the focused option, then moves focus to the multiselect element.</td>
+                    </tr>
+                    <tr>
+                        <td><i>escape</i></td>
+                        <td>Closes the popup, moves focus to the multiselect element.</td>
+                    </tr>
+                    <tr>
+                        <td><i>down arrow</i></td>
+                        <td>Moves focus to the next option, if there is none then visual focus does not change.</td>
+                    </tr>
+                    <tr>
+                        <td><i>up arrow</i></td>
+                        <td>Moves focus to the previous option, if there is none then visual focus does not change.</td>
+                    </tr>
+                    <tr>
+                        <td><i>alt</i> + <i>up arrow</i></td>
+                        <td>Selects the focused option and closes the popup, then moves focus to the multiselect element.</td>
+                    </tr>
+                    <tr>
+                        <td><i>shift</i> + <i>down arrow</i></td>
+                        <td>Moves focus to the next option and toggles the selection state.</td>
+                    </tr>
+                    <tr>
+                        <td><i>shift</i> + <i>up arrow</i></td>
+                        <td>Moves focus to the previous option and toggles the selection state.</td>
+                    </tr>
+                    <tr>
+                        <td><i>shift</i> + <i>space</i></td>
+                        <td>Selects the items between the most recently selected option and the focused option.</td>
+                    </tr>
+                    <tr>
+                        <td><i>home</i></td>
+                        <td>Moves focus to the first option.</td>
+                    </tr>
+                    <tr>
+                        <td><i>end</i></td>
+                        <td>Moves focus to the last option.</td>
+                    </tr>
+                    <tr>
+                        <td><i>control</i> + <i>shift</i> + <i>home</i></td>
+                        <td>Selects the focused options and all the options up to the first one.</td>
+                    </tr>
+                    <tr>
+                        <td><i>control</i> + <i>shift</i> + <i>end</i></td>
+                        <td>Selects the focused options and all the options down to the last one.</td>
+                    </tr>
+                    <tr>
+                        <td><i>control</i> + <i>a</i></td>
+                        <td>Selects all options.</td>
+                    </tr>
+                    <tr>
+                        <td><i>pageUp</i></td>
+                        <td>Jumps visual focus to first option.</td>
+                    </tr>
+                    <tr>
+                        <td><i>pageDown</i></td>
+                        <td>Jumps visual focus to last option.</td>
+                    </tr>
+                    <tr>
+                        <td><i>any printable character</i></td>
+                        <td>Moves focus to the option whose label starts with the characters being typed.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h6>Toggle All Checkbox Keyboard Support</h6>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Key</th>
-                            <th>Function</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td><i>space</i></td>
-                            <td>Toggles the checked state.</td>
-                        </tr>
-                        <tr>
-                            <td><i>escape</i></td>
-                            <td>Closes the popup and moves focus to the multiselect element.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h6>Toggle All Checkbox Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>space</i></td>
+                        <td>Toggles the checked state.</td>
+                    </tr>
+                    <tr>
+                        <td><i>escape</i></td>
+                        <td>Closes the popup and moves focus to the multiselect element.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h6>Filter Input Keyboard Support</h6>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Key</th>
-                            <th>Function</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td><i>down arrow</i></td>
-                            <td>Moves focus to the next option, if there is none then visual focus does not change.</td>
-                        </tr>
-                        <tr>
-                            <td><i>up arrow</i></td>
-                            <td>Moves focus to the previous option, if there is none then visual focus does not change.</td>
-                        </tr>
-                        <tr>
-                            <td><i>left arrow</i></td>
-                            <td>Removes the visual focus from the current option and moves input cursor to one character left.</td>
-                        </tr>
-                        <tr>
-                            <td><i>right arrow</i></td>
-                            <td>Removes the visual focus from the current option and moves input cursor to one character right.</td>
-                        </tr>
-                        <tr>
-                            <td><i>home</i></td>
-                            <td>Moves input cursor at the end, if not then moves focus to the first option.</td>
-                        </tr>
-                        <tr>
-                            <td><i>end</i></td>
-                            <td>Moves input cursor at the beginning, if not then moves focus to the last option.</td>
-                        </tr>
-                        <tr>
-                            <td><i>enter</i></td>
-                            <td>Closes the popup and moves focus to the multiselect element.</td>
-                        </tr>
-                        <tr>
-                            <td><i>escape</i></td>
-                            <td>Closes the popup and moves focus to the multiselect element.</td>
-                        </tr>
-                        <tr>
-                            <td><i>tab</i></td>
-                            <td>Moves focus to the next focusable element in the popup. If there is none, the focusable option is selected and the overlay is closed then moves focus to next element in page.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h6>Filter Input Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>down arrow</i></td>
+                        <td>Moves focus to the next option, if there is none then visual focus does not change.</td>
+                    </tr>
+                    <tr>
+                        <td><i>up arrow</i></td>
+                        <td>Moves focus to the previous option, if there is none then visual focus does not change.</td>
+                    </tr>
+                    <tr>
+                        <td><i>left arrow</i></td>
+                        <td>Removes the visual focus from the current option and moves input cursor to one character left.</td>
+                    </tr>
+                    <tr>
+                        <td><i>right arrow</i></td>
+                        <td>Removes the visual focus from the current option and moves input cursor to one character right.</td>
+                    </tr>
+                    <tr>
+                        <td><i>home</i></td>
+                        <td>Moves input cursor at the end, if not then moves focus to the first option.</td>
+                    </tr>
+                    <tr>
+                        <td><i>end</i></td>
+                        <td>Moves input cursor at the beginning, if not then moves focus to the last option.</td>
+                    </tr>
+                    <tr>
+                        <td><i>enter</i></td>
+                        <td>Closes the popup and moves focus to the multiselect element.</td>
+                    </tr>
+                    <tr>
+                        <td><i>escape</i></td>
+                        <td>Closes the popup and moves focus to the multiselect element.</td>
+                    </tr>
+                    <tr>
+                        <td><i>tab</i></td>
+                        <td>Moves focus to the next focusable element in the popup. If there is none, the focusable option is selected and the overlay is closed then moves focus to next element in page.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h6>Close Button Keyboard Support</h6>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Key</th>
-                            <th>Function</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td><i>enter</i></td>
-                            <td>Closes the popup and moves focus to the multiselect element.</td>
-                        </tr>
-                        <tr>
-                            <td><i>space</i></td>
-                            <td>Closes the popup and moves focus to the multiselect element.</td>
-                        </tr>
-                        <tr>
-                            <td><i>escape</i></td>
-                            <td>Closes the popup and moves focus to the multiselect element.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h6>Close Button Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>enter</i></td>
+                        <td>Closes the popup and moves focus to the multiselect element.</td>
+                    </tr>
+                    <tr>
+                        <td><i>space</i></td>
+                        <td>Closes the popup and moves focus to the multiselect element.</td>
+                    </tr>
+                    <tr>
+                        <td><i>escape</i></td>
+                        <td>Closes the popup and moves focus to the multiselect element.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc>
-    </ClientOnly>
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
diff --git a/pages/multiselect/index.vue b/pages/multiselect/index.vue
index 15244649f..7ffc859c5 100755
--- a/pages/multiselect/index.vue
+++ b/pages/multiselect/index.vue
@@ -29,7 +29,7 @@
                 <h5>Advanced with Templating and Filtering</h5>
                 <MultiSelect v-model="selectedCountries" :options="countries" optionLabel="name" placeholder="Select Countries" :filter="true" class="multiselect-custom">
                     <template #value="slotProps">
-                        <div class="country-item country-item-value" v-for="option of slotProps.value" :key="option.code">
+                        <div v-for="option of slotProps.value" :key="option.code" class="country-item country-item-value">
                             <img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + option.code.toLowerCase()" />
                             <div>{{ option.name }}</div>
                         </div>
diff --git a/pages/orderlist/OrderListDoc.vue b/pages/orderlist/OrderListDoc.vue
index 1c9b82895..c19e5f3d8 100755
--- a/pages/orderlist/OrderListDoc.vue
+++ b/pages/orderlist/OrderListDoc.vue
@@ -1,30 +1,29 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="OrderListDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="orderlist/OrderListDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="OrderListDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="orderlist/OrderListDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import OrderList from 'primevue/orderlist';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/orderlist/orderlist.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p>OrderList requires an array as its value bound with the v-model directive and a template for its content.</p>
-            <p>Header of the component is defined with the "header" template and to define the content of an item in the list a named template called "item" needs to be defined which gets the <i>item</i> and the <i>index</i> via slotProps.</p>
-            <pre v-code><code><template v-pre>
+        <h5>Getting Started</h5>
+        <p>OrderList requires an array as its value bound with the v-model directive and a template for its content.</p>
+        <p>Header of the component is defined with the "header" template and to define the content of an item in the list a named template called "item" needs to be defined which gets the <i>item</i> and the <i>index</i> via slotProps.</p>
+        <pre v-code><code><template v-pre>
 &lt;OrderList v-model="cars" listStyle="height:auto" dataKey="vin"&gt;
     &lt;template #header&gt;
         List of Cars
     &lt;/template&gt;
     &lt;template #item="slotProps"&gt;
         &lt;div class="p-caritem"&gt;
-            &lt;img :src="'/demo/images/car/' + slotProps.item.brand + '.png'"&gt;
+            &lt;img :src="'demo/images/car/' + slotProps.item.brand + '.png'"&gt;
             &lt;div&gt;
                 &lt;span class="p-caritem-vin"&gt;{{slotProps.item.vin}}&lt;/span&gt;
                 &lt;span&gt;{{slotProps.item.year}} - {{slotProps.item.color}}&lt;/span&gt;
@@ -35,22 +34,22 @@ import OrderList from 'primevue/orderlist';
 </template>
 </code></pre>
 
-            <h5>Selection</h5>
-            <p>
-                In case you'd need to access the selected items in the list, define a binding to the <i>selection</i> property with the v-model directive so that it gets updated when the user makes a selection. Since it is two-way binding enabled,
-                your changes to the selection will be reflected as well. Note that this is optional and only necessary when you need to access the selection.
-            </p>
+        <h5>Selection</h5>
+        <p>
+            In case you'd need to access the selected items in the list, define a binding to the <i>selection</i> property with the v-model directive so that it gets updated when the user makes a selection. Since it is two-way binding enabled, your
+            changes to the selection will be reflected as well. Note that this is optional and only necessary when you need to access the selection.
+        </p>
 
-            <p>Use the v-model directive to enable two-way binding.</p>
+        <p>Use the v-model directive to enable two-way binding.</p>
 
-            <pre v-code><code><template v-pre>
+        <pre v-code><code><template v-pre>
 &lt;OrderList v-model="cars" dataKey="vin" v-model:selection="selection"&gt;
     &lt;template #header&gt;
         List of Cars
     &lt;/template&gt;
     &lt;template #item="slotProps"&gt;
         &lt;div class="p-caritem"&gt;
-            &lt;img :src="'/demo/images/car/' + slotProps.item.brand + '.png'"&gt;
+            &lt;img :src="'demo/images/car/' + slotProps.item.brand + '.png'"&gt;
             &lt;div&gt;
                 &lt;span class="p-caritem-vin"&gt;{{slotProps.item.vin}}&lt;/span&gt;
                 &lt;span&gt;{{slotProps.item.year}} - {{slotProps.item.color}}&lt;/span&gt;
@@ -61,180 +60,346 @@ import OrderList from 'primevue/orderlist';
 </template>
 </code></pre>
 
-            <h5>DataKey</h5>
-            <p>It is recommended to provide the name of the field that uniquely identifies the a record in the data via the <i>dataKey</i> property for better performance.</p>
+        <h5>DataKey</h5>
+        <p>It is recommended to provide the name of the field that uniquely identifies the a record in the data via the <i>dataKey</i> property for better performance.</p>
 
-            <h5>Templating</h5>
-            <p>
-                In addition to the <i>item</i> template, <i>header</i> is provided to place custom content at the list header. Controls section can also be customized to place content before and after the buttons with <i>controlsstart</i> and
-                <i>controlsend</i> slots respectively.
-            </p>
+        <h5>Templating</h5>
+        <p>
+            In addition to the <i>item</i> template, <i>header</i> is provided to place custom content at the list header. Controls section can also be customized to place content before and after the buttons with <i>controlsstart</i> and
+            <i>controlsend</i> slots respectively.
+        </p>
 
-            <h5>Properties</h5>
-            <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>modelValue</td>
-                            <td>array</td>
-                            <td>null</td>
-                            <td>Value of the component.</td>
-                        </tr>
-                        <tr>
-                            <td>selection</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Selected items in the list.</td>
-                        </tr>
-                        <tr>
-                            <td>metaKeySelection</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>
-                                Defines whether metaKey is requred or not for the selection. <br />
-                                When true metaKey needs to be pressed to select or unselect an item and <br />
-                                when set to false selection of each item can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically.
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>dataKey</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Name of the field that uniquely identifies the a record in the data.</td>
-                        </tr>
-                        <tr>
-                            <td>listStyle</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Inline style of the the list element.</td>
-                        </tr>
-                        <tr>
-                            <td>responsive</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether the list optimizes layout based on screen size.</td>
-                        </tr>
-                        <tr>
-                            <td>breakpoint</td>
-                            <td>string</td>
-                            <td>960px</td>
-                            <td>The breakpoint to define the maximum width boundary when responsiveness is enabled.</td>
-                        </tr>
-                        <tr>
-                            <td>stripedRows</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Whether to displays rows with alternating colors.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>modelValue</td>
+                        <td>array</td>
+                        <td>null</td>
+                        <td>Value of the component.</td>
+                    </tr>
+                    <tr>
+                        <td>selection</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Selected items in the list.</td>
+                    </tr>
+                    <tr>
+                        <td>metaKeySelection</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>
+                            Defines whether metaKey is requred or not for the selection. <br />
+                            When true metaKey needs to be pressed to select or unselect an item and <br />
+                            when set to false selection of each item can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically.
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>dataKey</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Name of the field that uniquely identifies the a record in the data.</td>
+                    </tr>
+                    <tr>
+                        <td>listStyle</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Inline style of the the list element.</td>
+                    </tr>
+                    <tr>
+                        <td>responsive</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Whether the list optimizes layout based on screen size.</td>
+                    </tr>
+                    <tr>
+                        <td>breakpoint</td>
+                        <td>string</td>
+                        <td>960px</td>
+                        <td>The breakpoint to define the maximum width boundary when responsiveness is enabled.</td>
+                    </tr>
+                    <tr>
+                        <td>stripedRows</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Whether to displays rows with alternating colors.</td>
+                    </tr>
+                    <tr>
+                        <td>tabindex</td>
+                        <td>number</td>
+                        <td>0</td>
+                        <td>Index of the element in tabbing order.</td>
+                    </tr>
+                    <tr>
+                        <td>moveUpButtonProps</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Uses to pass all properties of the HTMLButtonElement to the move up button inside the component.</td>
+                    </tr>
+                    <tr>
+                        <td>moveTopButtonProps</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Uses to pass all properties of the HTMLButtonElement to the move top button inside the component.</td>
+                    </tr>
+                    <tr>
+                        <td>moveDownButtonProps</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Uses to pass all properties of the HTMLButtonElement to the move down button inside the component.</td>
+                    </tr>
+                    <tr>
+                        <td>moveBottomButtonProps</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Uses to pass all properties of the HTMLButtonElement to the move bottom button inside the component.</td>
+                    </tr>
+                    <tr>
+                        <td>aria-label</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Defines a string value that labels an interactive list element.</td>
+                    </tr>
+                    <tr>
+                        <td>aria-labelledby</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Identifier of the underlying list element.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Events</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>reorder</td>
-                            <td>
-                                event.originalEvent: browser event <br />
-                                event.value: Ordered list <br />
-                                event.direction: Direction of the change; "up", "down", "bottom", "top"
-                            </td>
-                            <td>Callback to invoke when the list is reordered.</td>
-                        </tr>
-                        <tr>
-                            <td>selection-change</td>
-                            <td>
-                                event.originalEvent: browser event <br />
-                                event.value: Ordered list
-                            </td>
-                            <td>Callback to invoke when selection changes.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Events</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>reorder</td>
+                        <td>
+                            event.originalEvent: browser event <br />
+                            event.value: Ordered list <br />
+                            event.direction: Direction of the change; "up", "down", "bottom", "top"
+                        </td>
+                        <td>Callback to invoke when the list is reordered.</td>
+                    </tr>
+                    <tr>
+                        <td>selection-change</td>
+                        <td>
+                            event.originalEvent: browser event <br />
+                            event.value: Ordered list
+                        </td>
+                        <td>Callback to invoke when selection changes.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Slots</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>header</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>item</td>
-                            <td>
-                                item: Item of the component<br />
-                                index: Index of the item
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>controlsstart</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>controlsend</td>
-                            <td>-</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Slots</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>header</td>
+                        <td>-</td>
+                    </tr>
+                    <tr>
+                        <td>item</td>
+                        <td>
+                            item: Item of the component<br />
+                            index: Index of the item
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>controlsstart</td>
+                        <td>-</td>
+                    </tr>
+                    <tr>
+                        <td>controlsend</td>
+                        <td>-</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-orderlist</td>
-                            <td>Container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-orderlist-list</td>
-                            <td>List container.</td>
-                        </tr>
-                        <tr>
-                            <td>p-orderlist-item</td>
-                            <td>An item in the list</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-orderlist</td>
+                        <td>Container element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-orderlist-list</td>
+                        <td>List container.</td>
+                    </tr>
+                    <tr>
+                        <td>p-orderlist-item</td>
+                        <td>An item in the list</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc>
-    </ClientOnly>
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>
+            Value to describe the listbox can be provided with <i>listProps</i> by passing <i>aria-labelledby</i> or <i>aria-label</i> props. The list element has a <i>listbox</i> role with the <i>aria-multiselectable</i> attribute. Each list item
+            has an <i>option</i> role with <i>aria-selected</i> and <i>aria-disabled</i> as their attributes.
+        </p>
+        <p>
+            Controls buttons are <i>button</i> elements with an <i>aria-label</i> that refers to the <i>aria.moveTop</i>, <i>aria.moveUp</i>, <i>aria.moveDown</i> and <i>aria.moveBottom</i> properties of the
+            <router-link to="/locale">locale</router-link> API by default, alternatively you may use <i>moveTopButtonProps</i>, <i>moveUpButtonProps</i>, <i>moveDownButtonProps</i> and <i>moveBottomButtonProps</i> to customize the buttons like
+            overriding the default <i>aria-label</i> attributes.
+        </p>
+        <pre v-code><code><template v-pre>
+&lt;span id="lb"&gt;Options&lt;/span&gt;
+&lt;OrderList aria-labelledby="lb" /&gt;
+
+&lt;OrderList aria-label="City" /&gt;
+
+</template></code></pre>
+
+        <h6>ListBox Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>tab</i>
+                        </td>
+                        <td>Moves focus to the first selected option, if there is none then first option receives the focus.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>up arrow</i>
+                        </td>
+                        <td>Moves focus to the previous option.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>down arrow</i>
+                        </td>
+                        <td>Moves focus to the next option.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>Toggles the selected state of the focused option.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>Toggles the selected state of the focused option.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>home</i>
+                        </td>
+                        <td>Moves focus to the first option.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>end</i>
+                        </td>
+                        <td>Moves focus to the last option.</td>
+                    </tr>
+                    <tr>
+                        <td><i>shift</i> + <i>down arrow</i></td>
+                        <td>Moves focus to the next option and toggles the selection state.</td>
+                    </tr>
+                    <tr>
+                        <td><i>shift</i> + <i>up arrow</i></td>
+                        <td>Moves focus to the previous option and toggles the selection state.</td>
+                    </tr>
+                    <tr>
+                        <td><i>shift</i> + <i>space</i></td>
+                        <td>Selects the items between the most recently selected option and the focused option.</td>
+                    </tr>
+                    <tr>
+                        <td><i>control</i> + <i>shift</i> + <i>home</i></td>
+                        <td>Selects the focused options and all the options up to the first one.</td>
+                    </tr>
+                    <tr>
+                        <td><i>control</i> + <i>shift</i> + <i>end</i></td>
+                        <td>Selects the focused options and all the options down to the first one.</td>
+                    </tr>
+                    <tr>
+                        <td><i>control</i> + <i>a</i></td>
+                        <td>Selects all options.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h6>Buttons Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>Executes button action.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>Executes button action.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
diff --git a/pages/orderlist/index.vue b/pages/orderlist/index.vue
index feb73e124..d50db61df 100755
--- a/pages/orderlist/index.vue
+++ b/pages/orderlist/index.vue
@@ -15,7 +15,7 @@
                     <template #item="slotProps">
                         <div class="product-item">
                             <div class="image-container">
-                                <img :src="'/demo/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
+                                <img :src="'demo/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
                             </div>
                             <div class="product-list-detail">
                                 <h6 class="mb-2">{{ slotProps.item.name }}</h6>
@@ -37,8 +37,8 @@
 </template>
 
 <script>
-import OrderListDoc from './OrderListDoc';
 import ProductService from '../../service/ProductService';
+import OrderListDoc from './OrderListDoc';
 
 export default {
     data() {
diff --git a/pages/organizationchart/OrganizationChartDoc.vue b/pages/organizationchart/OrganizationChartDoc.vue
index 9ca8ecd4d..09c021fca 100755
--- a/pages/organizationchart/OrganizationChartDoc.vue
+++ b/pages/organizationchart/OrganizationChartDoc.vue
@@ -1,23 +1,22 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="OrganizationChartDemo" :sources="sources" github="organizationchart/OrganizationChartDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="OrganizationChartDemo" :sources="sources" github="organizationchart/OrganizationChartDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import OrganizationChart from 'primevue/organizationchart';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/organizationchart/organizationchart.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p>OrganizationChart requires an OrganizationChartNode instance as its root value and at least one template to display node content where node instance is passed via slotProps.</p>
-            <pre v-code><code><template v-pre>
- &lt;OrganizationChart :value="data"&gt;
+        <h5>Getting Started</h5>
+        <p>OrganizationChart requires an OrganizationChartNode instance as its root value and at least one template to display node content where node instance is passed via slotProps.</p>
+        <pre v-code><code><template v-pre>
+&lt;OrganizationChart :value="data"&gt;
     &lt;template #default="slotProps"&gt;
         &lt;span&gt;&#123;&#123;slotProps.node.data.label&#125;&#125;&lt;/span&gt;
     &lt;/template&gt;
@@ -25,7 +24,7 @@ import OrganizationChart from 'primevue/organizationchart';
 </template>
 </code></pre>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 export default {
     data() {
         return {
@@ -69,73 +68,73 @@ export default {
 
 </code></pre>
 
-            <h5>OrganizationChartNode</h5>
-            <p>API of the OrganizationChartNode has the properties below.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>key</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Unique identifier of the node. (required)</td>
-                        </tr>
-                        <tr>
-                            <td>type</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Type of the node to match a template.</td>
-                        </tr>
-                        <tr>
-                            <td>styleClass</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the node content.</td>
-                        </tr>
-                        <tr>
-                            <td>data</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Data represented by the node.</td>
-                        </tr>
-                        <tr>
-                            <td>selectable</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether node is selectable when selection is enabled.</td>
-                        </tr>
-                        <tr>
-                            <td>collapsible</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether node is collapsible when node expansion is enabled.</td>
-                        </tr>
-                        <tr>
-                            <td>children</td>
-                            <td>array</td>
-                            <td>null</td>
-                            <td>Children nodes array.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>OrganizationChartNode</h5>
+        <p>API of the OrganizationChartNode has the properties below.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>key</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Unique identifier of the node. (required)</td>
+                    </tr>
+                    <tr>
+                        <td>type</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Type of the node to match a template.</td>
+                    </tr>
+                    <tr>
+                        <td>styleClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the node content.</td>
+                    </tr>
+                    <tr>
+                        <td>data</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Data represented by the node.</td>
+                    </tr>
+                    <tr>
+                        <td>selectable</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Whether node is selectable when selection is enabled.</td>
+                    </tr>
+                    <tr>
+                        <td>collapsible</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Whether node is collapsible when node expansion is enabled.</td>
+                    </tr>
+                    <tr>
+                        <td>children</td>
+                        <td>array</td>
+                        <td>null</td>
+                        <td>Children nodes array.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Collapsible Nodes</h5>
-            <p>
-                All nodes are expanded by default however they can be expanded and collapsed when <i>collapsible</i> is enabled. The optional <i>collapsedKeys</i> property defines the keys that are collapsed, this property is two-way binding enabled
-                so that user changes or programmatic changes are reflected to the UI.
-            </p>
-            <p>Example below displays the root of chart in previous example as collapsed. Notice that the collapsedKeys is a map whose key is the key of the node and value is true.</p>
-            <pre v-code><code><template v-pre>
- &lt;OrganizationChart :value="data" :collapsible="true" :collapsedKeys="collapsedKeys"&gt;
+        <h5>Collapsible Nodes</h5>
+        <p>
+            All nodes are expanded by default however they can be expanded and collapsed when <i>collapsible</i> is enabled. The optional <i>collapsedKeys</i> property defines the keys that are collapsed, this property is two-way binding enabled so
+            that user changes or programmatic changes are reflected to the UI.
+        </p>
+        <p>Example below displays the root of chart in previous example as collapsed. Notice that the collapsedKeys is a map whose key is the key of the node and value is true.</p>
+        <pre v-code><code><template v-pre>
+&lt;OrganizationChart :value="data" :collapsible="true" :collapsedKeys="collapsedKeys"&gt;
     &lt;template #default="slotProps"&gt;
         &lt;span&gt;&#123;&#123;slotProps.node.data.label&#125;&#125;&lt;/span&gt;
     &lt;/template&gt;
@@ -143,7 +142,7 @@ export default {
 </template>
 </code></pre>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 export default {
     data() {
         return {
@@ -190,13 +189,13 @@ export default {
 
 </code></pre>
 
-            <h5>Selection</h5>
-            <p>
-                Selection is enabled by defining the <i>selectionMode</i> to either "single" or "multiple" and specifying the <i>selectionKeys</i> with the v-model directive. Note that selection on a particular node can be disabled if the
-                <i>selectable</i> is false on the node instance.
-            </p>
-            <pre v-code><code><template v-pre>
- &lt;OrganizationChart :value="data" selecionMode="single" v-model:selectionKeys="selectionKeys"&gt;
+        <h5>Selection</h5>
+        <p>
+            Selection is enabled by defining the <i>selectionMode</i> to either "single" or "multiple" and specifying the <i>selectionKeys</i> with the v-model directive. Note that selection on a particular node can be disabled if the
+            <i>selectable</i> is false on the node instance.
+        </p>
+        <pre v-code><code><template v-pre>
+&lt;OrganizationChart :value="data" selecionMode="single" v-model:selectionKeys="selectionKeys"&gt;
     &lt;template #default="slotProps"&gt;
         &lt;span&gt;&#123;&#123;slotProps.node.data.label&#125;&#125;&lt;/span&gt;
     &lt;/template&gt;
@@ -204,7 +203,7 @@ export default {
 </template>
 </code></pre>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 export default {
     data() {
         return {
@@ -249,15 +248,15 @@ export default {
 
 </code></pre>
 
-            <h5>Templating</h5>
-            <p>The <i>type</i> property of an OrganizationChartNode is used to map a template to a node. If it is undefined, the default template is used.</p>
+        <h5>Templating</h5>
+        <p>The <i>type</i> property of an OrganizationChartNode is used to map a template to a node. If it is undefined, the default template is used.</p>
 
-            <pre v-code><code><template v-pre>
+        <pre v-code><code><template v-pre>
 &lt;OrganizationChart :value="data"&gt;
     &lt;template #person="slotProps"&gt;
         &lt;div class="node-header ui-corner-top"&gt;&#123;&#123;slotProps.node.data.label&#125;&#125;&lt;/div&gt;
         &lt;div class="node-content"&gt;
-            &lt;img :src="'/demo/images/organization/' + slotProps.node.data.avatar" width="32"&gt;
+            &lt;img :src="'demo/images/organization/' + slotProps.node.data.avatar" width="32"&gt;
             &lt;div&gt;&#123;&#123;slotProps.node.data.name&#125;&#125;&lt;/div&gt;
         &lt;/div&gt;
     &lt;/template&gt;
@@ -268,7 +267,7 @@ export default {
 </template>
 </code></pre>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 export default {
     data() {
         return {
@@ -358,135 +357,173 @@ export default {
 
 </code></pre>
 
-            <h5>Properties</h5>
-            <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>value</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Value of the component.</td>
-                        </tr>
-                        <tr>
-                            <td>selectionKeys</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>A map instance of key-value pairs to represented the selected nodes.</td>
-                        </tr>
-                        <tr>
-                            <td>selectionMode</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Type of the selection, valid values are "single" and "multiple".</td>
-                        </tr>
-                        <tr>
-                            <td>collapsible</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Whether the nodes can be expanded or toggled.</td>
-                        </tr>
-                        <tr>
-                            <td>collapsedKeys</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>A map instance of key-value pairs to represented the collapsed nodes.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>value</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Value of the component.</td>
+                    </tr>
+                    <tr>
+                        <td>selectionKeys</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>A map instance of key-value pairs to represented the selected nodes.</td>
+                    </tr>
+                    <tr>
+                        <td>selectionMode</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Type of the selection, valid values are "single" and "multiple".</td>
+                    </tr>
+                    <tr>
+                        <td>collapsible</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Whether the nodes can be expanded or toggled.</td>
+                    </tr>
+                    <tr>
+                        <td>collapsedKeys</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>A map instance of key-value pairs to represented the collapsed nodes.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Events</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>node-select</td>
-                            <td>node: Node instance</td>
-                            <td>Callback to invoke when a node is selected.</td>
-                        </tr>
-                        <tr>
-                            <td>node-unselect</td>
-                            <td>node: Node instance</td>
-                            <td>Callback to invoke when a node is unselected.</td>
-                        </tr>
-                        <tr>
-                            <td>node-expand</td>
-                            <td>node: Node instance</td>
-                            <td>Callback to invoke when a node is expanded.</td>
-                        </tr>
-                        <tr>
-                            <td>node-collapse</td>
-                            <td>node: Node instance</td>
-                            <td>Callback to invoke when a node is collapsed.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Events</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>node-select</td>
+                        <td>node: Node instance</td>
+                        <td>Callback to invoke when a node is selected.</td>
+                    </tr>
+                    <tr>
+                        <td>node-unselect</td>
+                        <td>node: Node instance</td>
+                        <td>Callback to invoke when a node is unselected.</td>
+                    </tr>
+                    <tr>
+                        <td>node-expand</td>
+                        <td>node: Node instance</td>
+                        <td>Callback to invoke when a node is expanded.</td>
+                    </tr>
+                    <tr>
+                        <td>node-collapse</td>
+                        <td>node: Node instance</td>
+                        <td>Callback to invoke when a node is collapsed.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-organizationchart</td>
-                            <td>Container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-organizationchart-table</td>
-                            <td>Table container of a node.</td>
-                        </tr>
-                        <tr>
-                            <td>p-organizationchart-lines</td>
-                            <td>Connector lines container.</td>
-                        </tr>
-                        <tr>
-                            <td>p-organizationchart-nodes</td>
-                            <td>Contained of node children.</td>
-                        </tr>
-                        <tr>
-                            <td>p-organizationchart-line-right</td>
-                            <td>Right side line of a node connector.</td>
-                        </tr>
-                        <tr>
-                            <td>p-organizationchart-line-left</td>
-                            <td>Left side line of a node connector.</td>
-                        </tr>
-                        <tr>
-                            <td>p-organizationchart-line-top</td>
-                            <td>Top side line of a node connector.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-organizationchart</td>
+                        <td>Container element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-organizationchart-table</td>
+                        <td>Table container of a node.</td>
+                    </tr>
+                    <tr>
+                        <td>p-organizationchart-lines</td>
+                        <td>Connector lines container.</td>
+                    </tr>
+                    <tr>
+                        <td>p-organizationchart-nodes</td>
+                        <td>Contained of node children.</td>
+                    </tr>
+                    <tr>
+                        <td>p-organizationchart-line-right</td>
+                        <td>Right side line of a node connector.</td>
+                    </tr>
+                    <tr>
+                        <td>p-organizationchart-line-left</td>
+                        <td>Left side line of a node connector.</td>
+                    </tr>
+                    <tr>
+                        <td>p-organizationchart-line-top</td>
+                        <td>Top side line of a node connector.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc>
-    </ClientOnly>
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>
+            Component currently uses a table based implementation and does not provide high level of screen reader support, a nested list implementation replacement is planned with aria roles and attributes aligned to a tree widget for high level of
+            reader support in the upcoming versions.
+        </p>
+
+        <h6>Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>tab</i>
+                        </td>
+                        <td>Moves focus through the focusable elements within the chart.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>Toggles the expanded state of a node.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>Toggles the expanded state of a node.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
@@ -713,7 +750,7 @@ export default {
                     tabName: 'Composition API Source',
                     content: `
 <template>
-   <div>
+    <div>
         <Toast />
 
         <div class="card">
diff --git a/pages/organizationchart/index.vue b/pages/organizationchart/index.vue
index 89af14840..250fde500 100755
--- a/pages/organizationchart/index.vue
+++ b/pages/organizationchart/index.vue
@@ -12,11 +12,11 @@
             <div class="card">
                 <h5>Advanced</h5>
                 <OrganizationChart
+                    v-model:selectionKeys="selection"
                     :value="data1"
                     :collapsible="true"
                     class="company"
                     selectionMode="single"
-                    v-model:selectionKeys="selection"
                     @node-select="onNodeSelect"
                     @node-unselect="onNodeUnselect"
                     @node-collapse="onNodeCollapse"
@@ -25,7 +25,7 @@
                     <template #person="slotProps">
                         <div class="node-header ui-corner-top">{{ slotProps.node.data.label }}</div>
                         <div class="node-content">
-                            <img :src="'/demo/images/organization/' + slotProps.node.data.avatar" width="32" />
+                            <img :src="'demo/images/organization/' + slotProps.node.data.avatar" width="32" />
                             <div>{{ slotProps.node.data.name }}</div>
                         </div>
                     </template>
diff --git a/pages/overlaypanel/OverlayPanelDoc.vue b/pages/overlaypanel/OverlayPanelDoc.vue
index 8cc8e14b1..809d6e73e 100755
--- a/pages/overlaypanel/OverlayPanelDoc.vue
+++ b/pages/overlaypanel/OverlayPanelDoc.vue
@@ -1,209 +1,277 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="OverlayPanelDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="overlaypanel/OverlayPanelDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="OverlayPanelDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="overlaypanel/OverlayPanelDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import OverlayPanel from 'primevue/overlaypanel';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/overlaypanel/overlaypanel.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p>OverlayPanel is accessed via its reference where visibility is controlled using toggle, show and hide methods.</p>
-            <pre v-code><code>
+        <h5>Getting Started</h5>
+        <p>OverlayPanel is accessed via its reference where visibility is controlled using toggle, show and hide methods.</p>
+        <pre v-code><code>
 &lt;Button type="button" label="Toggle" @click="toggle" /&gt;
 
 &lt;OverlayPanel ref="op"&gt;
-	&lt;img src="/demo/images/nature/nature1.jpg" alt="Nature Image"&gt;
+	&lt;img src="demo/images/nature/nature1.jpg" alt="Nature Image"&gt;
 &lt;/OverlayPanel&gt;
 
 </code></pre>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 toggle(event) {
     this.$refs.op.toggle(event);
 }
 
 </code></pre>
 
-            <h5>Dismissable and CloseIcon</h5>
-            <p>Clicking outside the overlay hides the panel, setting <i>dismissable</i> to false disables this behavior. Additionally enabling <i>showCloseIcon</i> property displays a close icon at the top right corner to close the panel.</p>
-            <pre v-code><code>
+        <h5>Dismissable and CloseIcon</h5>
+        <p>Clicking outside the overlay hides the panel, setting <i>dismissable</i> to false disables this behavior. Additionally enabling <i>showCloseIcon</i> property displays a close icon at the top right corner to close the panel.</p>
+        <pre v-code><code>
 &lt;OverlayPanel ref="op" :showCloseIcon="true" :dismissable="true"&gt;
-	&lt;img src="/demo/images/nature/nature1.jpg" alt="Nature Image"&gt;
+	&lt;img src="demo/images/nature/nature1.jpg" alt="Nature Image"&gt;
 &lt;/OverlayPanel&gt;
 
 </code></pre>
 
-            <h5>Responsive</h5>
-            <p>
-                OverlayPanel width can be adjusted per screen size with the <i>breakpoints</i> option. In example below, default width is set to 450px and below 961px, width would be 75vw and finally below 641px width becomes 100%. The value of
-                <i>breakpoints</i> should be an object literal whose keys are the maximum screen sizes and values are the widths per screen.
-            </p>
+        <h5>Responsive</h5>
+        <p>
+            OverlayPanel width can be adjusted per screen size with the <i>breakpoints</i> option. In example below, default width is set to 450px and below 961px, width would be 75vw and finally below 641px width becomes 100%. The value of
+            <i>breakpoints</i> should be an object literal whose keys are the maximum screen sizes and values are the widths per screen.
+        </p>
 
-            <pre v-code><code>
+        <pre v-code><code>
 &lt;OverlayPanel ref="op" :breakpoints="{'960px': '75vw', '640px': '100vw'}" :style="{width: '450px'}"&gt;
 	Content
 &lt;/OverlayPanel&gt;
 
 </code></pre>
 
-            <h5>Properties</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>dismissable</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Enables to hide the overlay when outside is clicked.</td>
-                        </tr>
-                        <tr>
-                            <td>showCloseIcon</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When enabled, displays a close icon at top right corner.</td>
-                        </tr>
-                        <tr>
-                            <td>appendTo</td>
-                            <td>string</td>
-                            <td>body</td>
-                            <td>A valid query selector or an HTMLElement to specify where the overlay gets attached.</td>
-                        </tr>
-                        <tr>
-                            <td>baseZIndex</td>
-                            <td>number</td>
-                            <td>0</td>
-                            <td>Base zIndex value to use in layering.</td>
-                        </tr>
-                        <tr>
-                            <td>autoZIndex</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether to automatically manage layering.</td>
-                        </tr>
-                        <tr>
-                            <td>ariaCloseLabel</td>
-                            <td>string</td>
-                            <td>close</td>
-                            <td>Aria label of the close icon.</td>
-                        </tr>
-                        <tr>
-                            <td>breakpoints</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Object literal to define widths per screen size.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>dismissable</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Enables to hide the overlay when outside is clicked.</td>
+                    </tr>
+                    <tr>
+                        <td>showCloseIcon</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When enabled, displays a close icon at top right corner.</td>
+                    </tr>
+                    <tr>
+                        <td>appendTo</td>
+                        <td>string</td>
+                        <td>body</td>
+                        <td>A valid query selector or an HTMLElement to specify where the overlay gets attached.</td>
+                    </tr>
+                    <tr>
+                        <td>baseZIndex</td>
+                        <td>number</td>
+                        <td>0</td>
+                        <td>Base zIndex value to use in layering.</td>
+                    </tr>
+                    <tr>
+                        <td>autoZIndex</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Whether to automatically manage layering.</td>
+                    </tr>
+                    <tr>
+                        <td>breakpoints</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Object literal to define widths per screen size.</td>
+                    </tr>
+                    <tr>
+                        <td style="text-decoration: line-through">ariaCloseLabel</td>
+                        <td>string</td>
+                        <td>close</td>
+                        <td>
+                            Aria label of the close icon.
+                            <br />
+                            <b> Deprecated: </b> <i>aria.close</i> can be used in defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Methods</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>toggle</td>
-                            <td>
-                                event: Browser event <br />
-                                target: Optional target if event.currentTarget should not be used
-                            </td>
-                            <td>Toggles the visibility of the overlay.</td>
-                        </tr>
-                        <tr>
-                            <td>show</td>
-                            <td>
-                                event: Browser event <br />
-                                target: Optional target if event.currentTarget should not be used
-                            </td>
-                            <td>Shows the overlay.</td>
-                        </tr>
-                        <tr>
-                            <td>hide</td>
-                            <td>-</td>
-                            <td>Hides the overlay.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Methods</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>toggle</td>
+                        <td>
+                            event: Browser event <br />
+                            target: Optional target if event.currentTarget should not be used
+                        </td>
+                        <td>Toggles the visibility of the overlay.</td>
+                    </tr>
+                    <tr>
+                        <td>show</td>
+                        <td>
+                            event: Browser event <br />
+                            target: Optional target if event.currentTarget should not be used
+                        </td>
+                        <td>Shows the overlay.</td>
+                    </tr>
+                    <tr>
+                        <td>hide</td>
+                        <td>-</td>
+                        <td>Hides the overlay.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Events</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>show</td>
-                            <td>-</td>
-                            <td>Callback to invoke when the overlay is shown.</td>
-                        </tr>
-                        <tr>
-                            <td>hide</td>
-                            <td>-</td>
-                            <td>Callback to invoke when the overlay is hidden.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Events</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>show</td>
+                        <td>-</td>
+                        <td>Callback to invoke when the overlay is shown.</td>
+                    </tr>
+                    <tr>
+                        <td>hide</td>
+                        <td>-</td>
+                        <td>Callback to invoke when the overlay is hidden.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-overlaypanel</td>
-                            <td>Container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-overlaypanel-content</td>
-                            <td>Content of the panel.</td>
-                        </tr>
-                        <tr>
-                            <td>p-overlaypanel-close</td>
-                            <td>Close icon.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-overlaypanel</td>
+                        <td>Container element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-overlaypanel-content</td>
+                        <td>Content of the panel.</td>
+                    </tr>
+                    <tr>
+                        <td>p-overlaypanel-close</td>
+                        <td>Close icon.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc>
-    </ClientOnly>
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>
+            OverlayPanel component uses <i>dialog</i> role and since any attribute is passed to the root element you may define attributes like <i>aria-label</i> or <i>aria-labelledby</i> to describe the popup contents. In addition
+            <i>aria-modal</i> is added since focus is kept within the popup.
+        </p>
+        <p>OverlayPanel adds <i>aria-expanded</i> state attribute and <i>aria-controls</i> to the trigger so that the relation between the trigger and the popup is defined.</p>
+
+        <h6>OverlayPanel Keyboard Support</h6>
+        <p>When the popup gets opened, the first focusable element receives the focus and this can be customized by adding <i>autofocus</i> to an element within the popup.</p>
+
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>tab</i>
+                        </td>
+                        <td>Moves focus to the next the focusable element within the popup.</td>
+                    </tr>
+                    <tr>
+                        <td><i>shift</i> + <i>tab</i></td>
+                        <td>Moves focus to the previous the focusable element within the popup.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>escape</i>
+                        </td>
+                        <td>Closes the popup and moves focus to the trigger.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h6>Close Button Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>Closes the popup and moves focus to the trigger.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>Closes the popup and moves focus to the trigger.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
diff --git a/pages/overlaypanel/index.vue b/pages/overlaypanel/index.vue
index bcb914673..ca47862ae 100755
--- a/pages/overlaypanel/index.vue
+++ b/pages/overlaypanel/index.vue
@@ -12,12 +12,12 @@
             <div class="card">
                 <Button type="button" icon="pi pi-search" :label="selectedProduct ? selectedProduct.name : 'Select a Product'" @click="toggle" aria-haspopup="true" aria-controls="overlay_panel" />
 
-                <OverlayPanel ref="op" appendTo="body" :showCloseIcon="true" id="overlay_panel" style="width: 450px" :breakpoints="{ '960px': '75vw' }">
-                    <DataTable :value="products" v-model:selection="selectedProduct" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect" responsiveLayout="scroll">
+                <OverlayPanel ref="op" id="overlay_panel" appendTo="body" :showCloseIcon="true" style="width: 450px" :breakpoints="{ '960px': '75vw' }">
+                    <DataTable v-model:selection="selectedProduct" :value="products" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect" responsiveLayout="scroll">
                         <Column field="name" header="Name" sortable style="width: 50%"></Column>
                         <Column header="Image" style="width: 20%">
                             <template #body="slotProps">
-                                <img :src="'/demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" />
+                                <img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" />
                             </template>
                         </Column>
                         <Column field="price" header="Price" sortable style="width: 30%">
diff --git a/pages/paginator/PaginatorDoc.vue b/pages/paginator/PaginatorDoc.vue
index daa848c6a..38b34a771 100755
--- a/pages/paginator/PaginatorDoc.vue
+++ b/pages/paginator/PaginatorDoc.vue
@@ -1,85 +1,103 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="PaginatorDemo" :sources="sources" github="paginator/PaginatorDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="PaginatorDemo" :sources="sources" github="paginator/PaginatorDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import Paginator from 'primevue/paginator';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p><i>rows</i> and <i>totalRecords</i> are the required properties of the Paginator.</p>
-            <pre v-code><code>
+        <h5>Getting Started</h5>
+        <p><i>rows</i> and <i>totalRecords</i> are the required properties of the Paginator.</p>
+        <pre v-code><code>
 &lt;Paginator :rows="10" :totalRecords="totalItemsCount"&gt;&lt;/Paginator&gt;
 
 </code></pre>
 
-            <h5>Start Index</h5>
-            <p><i>first</i> property defines the index of the first item displayed by the paginator.</p>
+        <h5>Start Index</h5>
+        <p><i>first</i> property defines the index of the first item displayed by the paginator.</p>
 
-            <pre v-code><code>
+        <pre v-code><code>
 &lt;Paginator :first="offset" :rows="10" :totalRecords="totalItemsCount"&gt;&lt;/Paginator&gt;
 
 </code></pre>
 
-            <p>Use the v-model directive to enable two-way binding, this is useful in cases where you need to programmatically control the paginator.</p>
-            <pre v-code><code>
+        <p>Use the v-model directive to enable two-way binding, this is useful in cases where you need to programmatically control the paginator.</p>
+        <pre v-code><code>
 &lt;Paginator v-model:first="offset" :rows="10" :totalRecords="totalItemsCount"&gt;&lt;/Paginator&gt;
 
 </code></pre>
 
-            <h5>Rows Per Page</h5>
-            <p>Number of items per page can be changed by the user using a dropdown with the <i>rowsPerPageOptions</i> property which accepts an array of possible values.</p>
-            <pre v-code><code>
+        <h5>Rows Per Page</h5>
+        <p>Number of items per page can be changed by the user using a dropdown with the <i>rowsPerPageOptions</i> property which accepts an array of possible values.</p>
+        <pre v-code><code>
 &lt;Paginator v-model:first="offset" :rows="rows" :totalRecords="totalItemsCount" :rowsPerPageOptions="[10,20,30]"&gt;&lt;/Paginator&gt;
 
 </code></pre>
 
-            <p>As <i>rows</i> also change when the dropdown changes, use the optional v-model directive if you need two-way binding.</p>
+        <p>As <i>rows</i> also change when the dropdown changes, use the optional v-model directive if you need two-way binding.</p>
 
-            <pre v-code><code>
+        <pre v-code><code>
 &lt;Paginator v-model:first="offset" v-model:rows="rows" :totalRecords="totalItemsCount" :rowsPerPageOptions="[10,20,30]"&gt;&lt;/Paginator&gt;
 
 </code></pre>
 
-            <h5>Template</h5>
-            <p>
-                Paginator elements can be customized using the template property using the predefined keys, default value is "FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown". Here are the available elements that
-                can be placed inside a paginator in any order.
-            </p>
+        <h5>Template</h5>
+        <p>
+            Paginator elements can be customized using the <i>template</i> property using the predefined keys, default value is "FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown". Here are the available elements that
+            can be placed inside a paginator in any order.
+        </p>
 
-            <ul>
-                <li>FirstPageLink</li>
-                <li>PrevPageLink</li>
-                <li>PageLinks</li>
-                <li>NextPageLink</li>
-                <li>LastPageLink</li>
-                <li>RowsPerPageDropdown</li>
-                <li>JumpToPageDropdown</li>
-                <li>JumpToPageInput</li>
-                <li>CurrentPageReport</li>
-            </ul>
+        <ul>
+            <li>FirstPageLink</li>
+            <li>PrevPageLink</li>
+            <li>PageLinks</li>
+            <li>NextPageLink</li>
+            <li>LastPageLink</li>
+            <li>RowsPerPageDropdown</li>
+            <li>JumpToPageDropdown</li>
+            <li>JumpToPageInput</li>
+            <li>CurrentPageReport</li>
+        </ul>
 
-            <h5>CurrentPageReport</h5>
-            <p>Current page report item in the template displays information about the pagination state. Default value is (&#123;currentPage&#125; of &#123;totalPages&#125;) whereas available placeholders are the following;</p>
-            <ul>
-                <li>&#123;currentPage&#125;</li>
-                <li>&#123;totalPages&#125;</li>
-                <li>&#123;rows&#125;</li>
-                <li>&#123;first&#125;</li>
-                <li>&#123;last&#125;</li>
-                <li>&#123;totalRecords&#125;</li>
-            </ul>
+        <h5>CurrentPageReport</h5>
+        <p>Current page report item in the template displays information about the pagination state. Default value is (&#123;currentPage&#125; of &#123;totalPages&#125;) whereas available placeholders are the following;</p>
+        <ul>
+            <li>&#123;currentPage&#125;</li>
+            <li>&#123;totalPages&#125;</li>
+            <li>&#123;rows&#125;</li>
+            <li>&#123;first&#125;</li>
+            <li>&#123;last&#125;</li>
+            <li>&#123;totalRecords&#125;</li>
+        </ul>
 
-            <h5>Custom Content</h5>
-            <p>There are two templates available named <i>start</i> and <i>end</i> to add custom content to these locations. Both templates get a state object as a slot property to provide the current page, first index and the rows.</p>
-            <pre v-code><code><template v-pre>
+        <h5>Responsive</h5>
+        <p>
+            Paginator elements can be customized per screen size by defining a template per breakpoint. Note that breakpoints are based on max-width setting, if <i>default</i> key is omitted then the default template would be used. Example below has
+            4 settings; up to 640px, between 641px-960px, between 961px-1300px and larger than 1301px which is the default.
+        </p>
+        <pre v-code><code><template v-pre>
+&lt;Paginator
+    :template="&#123;
+        '640px': 'PrevPageLink CurrentPageReport NextPageLink',
+        '960px': 'FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink',
+        '1300px': 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink',
+        default: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink JumpToPageDropdown'
+    &#125;"
+    :rows="10"
+    :totalRecords="totalRecords"&gt;
+&lt;/Paginator&gt;
+</template>
+</code></pre>
+
+        <h5>Custom Content</h5>
+        <p>There are two templates available named <i>start</i> and <i>end</i> to add custom content to these locations. Both templates get a state object as a slot property to provide the current page, first index and the rows.</p>
+        <pre v-code><code><template v-pre>
 &lt;Paginator v-model:first="offset" :rows="10" :totalRecords="totalItemsCount"&gt;
     &lt;template #start="slotProps"&gt;
         Page: &#123;&#123;slotProps.state.page&#125;&#125;
@@ -93,14 +111,14 @@ import Paginator from 'primevue/paginator';
 </template>
 </code></pre>
 
-            <h5>Page Change Event</h5>
-            <p>Paginator provides only one event called <i>page</i> that passes all the information about the change event.</p>
-            <pre v-code><code>
+        <h5>Page Change Event</h5>
+        <p>Paginator provides only one event called <i>page</i> that passes all the information about the change event.</p>
+        <pre v-code><code>
 &lt;Paginator :rows="10" :totalRecords="totalItemsCount" @page="onPage($event)"&gt;&lt;/Paginator&gt;
 
 </code></pre>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 onPage(event) {
     //event.page: New page number
     //event.first: Index of first record
@@ -110,168 +128,228 @@ onPage(event) {
 
 </code></pre>
 
-            <h5>Properties</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>totalRecords</td>
-                            <td>number</td>
-                            <td>0</td>
-                            <td>Number of total records.</td>
-                        </tr>
-                        <tr>
-                            <td>rows</td>
-                            <td>number</td>
-                            <td>0</td>
-                            <td>Data count to display per page.</td>
-                        </tr>
-                        <tr>
-                            <td>first</td>
-                            <td>number</td>
-                            <td>0</td>
-                            <td>Zero-relative number of the first row to be displayed.</td>
-                        </tr>
-                        <tr>
-                            <td>pageLinkSize</td>
-                            <td>number</td>
-                            <td>5</td>
-                            <td>Number of page links to display.</td>
-                        </tr>
-                        <tr>
-                            <td>rowsPerPageOptions</td>
-                            <td>array</td>
-                            <td>null</td>
-                            <td>Array of integer values to display inside rows per page dropdown.</td>
-                        </tr>
-                        <tr>
-                            <td>template</td>
-                            <td>string</td>
-                            <td>FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown</td>
-                            <td>Template of the paginator.</td>
-                        </tr>
-                        <tr>
-                            <td>currentPageReportTemplate</td>
-                            <td>string</td>
-                            <td>(&#123;currentPage&#125; of &#123;totalPages&#125;)</td>
-                            <td>Template of the current page report element. Available placeholders are &#123;currentPage&#125;,&#123;totalPages&#125;,&#123;rows&#125;,&#123;first&#125;,&#123;last&#125; and &#123;totalRecords&#125;</td>
-                        </tr>
-                        <tr>
-                            <td>alwaysShow</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether to show the paginator even there is only one page.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>totalRecords</td>
+                        <td>number</td>
+                        <td>0</td>
+                        <td>Number of total records.</td>
+                    </tr>
+                    <tr>
+                        <td>rows</td>
+                        <td>number</td>
+                        <td>0</td>
+                        <td>Data count to display per page.</td>
+                    </tr>
+                    <tr>
+                        <td>first</td>
+                        <td>number</td>
+                        <td>0</td>
+                        <td>Zero-relative number of the first row to be displayed.</td>
+                    </tr>
+                    <tr>
+                        <td>pageLinkSize</td>
+                        <td>number</td>
+                        <td>5</td>
+                        <td>Number of page links to display.</td>
+                    </tr>
+                    <tr>
+                        <td>rowsPerPageOptions</td>
+                        <td>array</td>
+                        <td>null</td>
+                        <td>Array of integer values to display inside rows per page dropdown.</td>
+                    </tr>
+                    <tr>
+                        <td>template</td>
+                        <td>object, string</td>
+                        <td>FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown</td>
+                        <td>Template of the paginator, can either be a string or an object with key-value pairs to define templates per breakpoint.</td>
+                    </tr>
+                    <tr>
+                        <td>currentPageReportTemplate</td>
+                        <td>string</td>
+                        <td>(&#123;currentPage&#125; of &#123;totalPages&#125;)</td>
+                        <td>Template of the current page report element. Available placeholders are &#123;currentPage&#125;,&#123;totalPages&#125;,&#123;rows&#125;,&#123;first&#125;,&#123;last&#125; and &#123;totalRecords&#125;</td>
+                    </tr>
+                    <tr>
+                        <td>alwaysShow</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Whether to show the paginator even there is only one page.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Events</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>page</td>
-                            <td>
-                                event.page: New page number <br />
-                                event.first: Index of first record <br />
-                                event.rows: Number of rows to display in new page <br />
-                                event.pageCount: Total number of pages
-                            </td>
-                            <td>Callback to invoke when page changes, the event object contains information about the new state.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Events</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>page</td>
+                        <td>
+                            event.page: New page number <br />
+                            event.first: Index of first record <br />
+                            event.rows: Number of rows to display in new page <br />
+                            event.pageCount: Total number of pages
+                        </td>
+                        <td>Callback to invoke when page changes, the event object contains information about the new state.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Slots</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>start</td>
-                            <td>state: State of the paginator</td>
-                        </tr>
-                        <tr>
-                            <td>end</td>
-                            <td>state: State of the paginator</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Slots</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>start</td>
+                        <td>state: State of the paginator</td>
+                    </tr>
+                    <tr>
+                        <td>end</td>
+                        <td>state: State of the paginator</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-paginator</td>
-                            <td>Container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-paginator-first</td>
-                            <td>First page element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-paginator-prev</td>
-                            <td>Previous page element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-paginator-pages</td>
-                            <td>Container of page links.</td>
-                        </tr>
-                        <tr>
-                            <td>p-paginator-page</td>
-                            <td>A page link.</td>
-                        </tr>
-                        <tr>
-                            <td>p-paginator-next</td>
-                            <td>Next pge element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-paginator-last</td>
-                            <td>Last page element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-paginator-rpp-options</td>
-                            <td>Rows per page dropdown.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-paginator</td>
+                        <td>Container element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-paginator-first</td>
+                        <td>First page element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-paginator-prev</td>
+                        <td>Previous page element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-paginator-pages</td>
+                        <td>Container of page links.</td>
+                    </tr>
+                    <tr>
+                        <td>p-paginator-page</td>
+                        <td>A page link.</td>
+                    </tr>
+                    <tr>
+                        <td>p-paginator-next</td>
+                        <td>Next pge element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-paginator-last</td>
+                        <td>Last page element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-paginator-rpp-options</td>
+                        <td>Rows per page dropdown.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc>
-    </ClientOnly>
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>Paginator is placed inside a <i>nav</i> element to indicate a navigation section. All of the paginator elements can be customized using templating however the default behavious is listed below.</p>
+
+        <p>
+            First, previous, next and last page navigators elements with <i>aria-label</i> attributes referring to the <i>aria.firstPageLabel</i>, <i>aria.prevPageLabel</i>, <i>aria.nextPageLabel</i> and <i>aria.lastPageLabel</i> properties of the
+            <router-link to="/locale">locale</router-link> API respectively.
+        </p>
+
+        <p>
+            Page links are also button elements with an <i>aria-label</i> attribute derived from the <i>aria.pageLabel</i> of the <router-link to="/locale">locale</router-link> API. Current page is marked with <i>aria-current</i> set to "page" as
+            well.
+        </p>
+
+        <p>Current page report uses <i>aria-live="polite"</i> to instruct screen reader about the changes to the pagination state.</p>
+
+        <p>
+            Rows per page dropdown internally uses a dropdown component, refer to the <router-link to="/dropdown">dropdown</router-link> documentation for accessibility details. Additionally, the dropdown uses an <i>aria-label</i> from the
+            <i>aria.rowsPerPageLabel</i> property of the <router-link to="/locale">locale</router-link> API.
+        </p>
+
+        <p>
+            Jump to page input is an <i>input</i> element with an <i>aria-label</i> that refers to the <i>aria.jumpToPageInputLabel</i> property and jump to page dropdown internally uses a dropdown component, with an <i>aria-label</i> that refers to
+            the <i>aria.jumpToPageDropdownLabel</i> property of the <router-link to="/locale">locale</router-link> API.
+        </p>
+
+        <h6>Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>tab</i>
+                        </td>
+                        <td>Moves focus through the paginator elements.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>Executes the paginator element action.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>Executes the paginator element action.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h6>Rows Per Page Dropdown Keyboard Support</h6>
+        <p>Refer to the <router-link to="/dropdown">dropdown</router-link> documentation for more details about keyboard support.</p>
+
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
@@ -287,6 +365,18 @@ export default {
         <h5>Basic</h5>
         <Paginator :rows="10" :totalRecords="totalRecords" :rowsPerPageOptions="[10,20,30]"></Paginator>
 
+        <h5>Responsive Breakpoints</h5>
+        <Paginator
+            :template="{
+                '640px': 'PrevPageLink CurrentPageReport NextPageLink',
+                '960px': 'FirstPageLink PrevPageLink CurrentPageReporNextPageLink LastPageLink',
+                '1300px': 'FirstPageLink PrevPageLink PageLinkNextPageLink LastPageLink',
+                default: 'FirstPageLink PrevPageLink PageLinks NextPageLinLastPageLink JumpToPageDropdown'
+            }"
+            :rows="10"
+            :totalRecords="totalRecords">
+        </Paginator>
+
         <h5>Custom</h5>
         <Paginator v-model:first="first" :rows="1" :totalRecords="totalRecords2"
             template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink">
@@ -322,10 +412,10 @@ export default {
 <\\/script>
 
 <style scoped>
-.image-gallery {
-    text-align: center;
-    padding: 1rem;
-}
+    .image-gallery {
+        text-align: center;
+        padding: 1rem;
+    }
 </style>`
                 },
                 'composition-api': {
@@ -336,6 +426,18 @@ export default {
         <h5>Basic</h5>
         <Paginator :rows="10" :totalRecords="totalRecords" :rowsPerPageOptions="[10,20,30]"></Paginator>
 
+        <h5>Responsive Breakpoints</h5>
+        <Paginator
+            :template="{
+                '640px': 'PrevPageLink CurrentPageReport NextPageLink',
+                '960px': 'FirstPageLink PrevPageLink CurrentPageReporNextPageLink LastPageLink',
+                '1300px': 'FirstPageLink PrevPageLink PageLinkNextPageLink LastPageLink',
+                default: 'FirstPageLink PrevPageLink PageLinks NextPageLinLastPageLink JumpToPageDropdown'
+            }"
+            :rows="10"
+            :totalRecords="totalRecords">
+        </Paginator>
+
         <h5>Custom</h5>
         <Paginator v-model:first="first" :rows="1" :totalRecords="totalRecords2"
             template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink">
@@ -371,10 +473,10 @@ export default {
 <\\/script>
 
 <style scoped>
-.image-gallery {
-    text-align: center;
-    padding: 1rem;
-}
+    .image-gallery {
+        text-align: center;
+        padding: 1rem;
+    }
 </style>`
                 },
                 'browser-source': {
@@ -383,6 +485,18 @@ export default {
             <h5>Basic</h5>
             <p-paginator :rows="10" :total-records="totalRecords" :rows-per-page-options="[10,20,30]"></p-paginator>
 
+            <h5>Responsive Breakpoints</h5>
+            <p-paginator
+                :template="{
+                    '640px': 'PrevPageLink CurrentPageReport NextPageLink',
+                    '960px': 'FirstPageLink PrevPageLink CurrentPageReporNextPageLink LastPageLink',
+                    '1300px': 'FirstPageLink PrevPageLink PageLinkNextPageLink LastPageLink',
+                    default: 'FirstPageLink PrevPageLink PageLinks NextPageLinLastPageLink JumpToPageDropdown'
+                }"
+                :rows="10"
+                :total-records="totalRecords">
+            </p-paginator>
+
             <h5>Custom</h5>
             <p-paginator v-model:first="first" :rows="1" :total-records="totalRecords2"
                 template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink">
@@ -425,10 +539,10 @@ export default {
         <\\/script>
 
         <style scoped>
-        .image-gallery {
-            text-align: center;
-            padding: 1rem;
-        }
+            .image-gallery {
+                text-align: center;
+                padding: 1rem;
+            }
         </style>`
                 }
             }
diff --git a/pages/paginator/index.vue b/pages/paginator/index.vue
index d48728ed7..85fd3b592 100755
--- a/pages/paginator/index.vue
+++ b/pages/paginator/index.vue
@@ -13,6 +13,18 @@
                 <h5>Basic</h5>
                 <Paginator :rows="10" :totalRecords="totalRecords" :rowsPerPageOptions="[10, 20, 30]"></Paginator>
 
+                <h5>Responsive</h5>
+                <Paginator
+                    :template="{
+                        '640px': 'PrevPageLink CurrentPageReport NextPageLink',
+                        '960px': 'FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink',
+                        '1300px': 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink',
+                        default: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink JumpToPageDropdown JumpToPageInput'
+                    }"
+                    :rows="10"
+                    :totalRecords="totalRecords"
+                ></Paginator>
+
                 <h5>Custom</h5>
                 <Paginator v-model:first="first" :rows="1" :totalRecords="totalRecords2" template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink">
                     <template #start>
@@ -24,7 +36,7 @@
                 </Paginator>
 
                 <div class="image-gallery">
-                    <img :src="'/demo/images/nature/' + image + '.jpg'" />
+                    <img :src="'demo/images/nature/' + image + '.jpg'" />
                 </div>
             </div>
         </div>
diff --git a/pages/panel/PanelDoc.vue b/pages/panel/PanelDoc.vue
index ee8e6e1a1..8e02ff511 100755
--- a/pages/panel/PanelDoc.vue
+++ b/pages/panel/PanelDoc.vue
@@ -1,22 +1,21 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="PanelDemo" :sources="sources" github="panel/PanelDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="PanelDemo" :sources="sources" github="panel/PanelDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import Panel from 'primevue/panel';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/panel/panel.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p>Panel is a container component that accepts content as its children.</p>
-            <pre v-code><code>
+        <h5>Getting Started</h5>
+        <p>Panel is a container component that accepts content as its children.</p>
+        <pre v-code><code>
 &lt;Panel header="Header"&gt;
 	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.
@@ -26,9 +25,9 @@ import Panel from 'primevue/panel';
 
 </code></pre>
 
-            <h5>Custom Header</h5>
-            <p>Header of the panel is either defined with the <i>header</i> property or the header template.</p>
-            <pre v-code><code>
+        <h5>Custom Header</h5>
+        <p>Header of the panel is either defined with the <i>header</i> property or the header template.</p>
+        <pre v-code><code>
 &lt;Panel&gt;
     &lt;template #header&gt;
         Header Content
@@ -38,9 +37,9 @@ import Panel from 'primevue/panel';
 
 </code></pre>
 
-            <h5>Toggleable</h5>
-            <p>Content of the panel can be expanded and collapsed using <i>toggleable</i> option.</p>
-            <pre v-code><code>
+        <h5>Toggleable</h5>
+        <p>Content of the panel can be expanded and collapsed using <i>toggleable</i> option.</p>
+        <pre v-code><code>
 &lt;Panel header="Header" :toggleable="true"&gt;
 	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.
@@ -50,17 +49,17 @@ import Panel from 'primevue/panel';
 
 </code></pre>
 
-            <p>To control the initial state of the toggleable panel, use the <i>collapsed</i> property.</p>
-            <pre v-code><code>
+        <p>To control the initial state of the toggleable panel, use the <i>collapsed</i> property.</p>
+        <pre v-code><code>
 &lt;Panel header="Header Text" :toggleable="true" :collapsed="true"&gt;
 	Content
 &lt;/Panel&gt;
 
 </code></pre>
 
-            <p>Use the v-model directive to enable two-way binding.</p>
+        <p>Use the v-model directive to enable two-way binding.</p>
 
-            <pre v-code><code>
+        <pre v-code><code>
 &lt;button type="button" @click="isCollapsed = !isCollapsed">Toggle Programmatically&lt;/button&gt;
 &lt;Panel header="Header Text" :toggleable="true" v-model:collapsed="isCollapsed"&gt;
 	Content
@@ -68,9 +67,9 @@ import Panel from 'primevue/panel';
 
 </code></pre>
 
-            <h5>Custom Icons</h5>
-            <p>Additional icons can be placed at the header section of the panel using the special <i>icons</i> slot. For a unified look, it is suggest to add <i>.p-panel-header-icon</i> class to your icons.</p>
-            <pre v-code><code>
+        <h5>Custom Icons</h5>
+        <p>Additional icons can be placed at the header section of the panel using the special <i>icons</i> slot. For a unified look, it is suggest to add <i>.p-panel-header-icon</i> class to your icons.</p>
+        <pre v-code><code>
 &lt;h5&gt;Advanced&lt;/h5&gt;
 &lt;Panel header="Header"&gt;
     &lt;template #icons&gt;
@@ -83,175 +82,173 @@ import Panel from 'primevue/panel';
 
 </code></pre>
 
-            <h5>Properties</h5>
-            <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>header</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Header text of the panel.</td>
-                        </tr>
-                        <tr>
-                            <td>toggleable</td>
-                            <td>boolean</td>
-                            <td>null</td>
-                            <td>Defines if content of panel can be expanded and collapsed.</td>
-                        </tr>
-                        <tr>
-                            <td>collapsed</td>
-                            <td>boolean</td>
-                            <td>null</td>
-                            <td>Defines the initial state of panel content.</td>
-                        </tr>
-                        <tr>
-                            <td>toggleButtonProps</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Uses to pass the custom value to read for the button inside the component.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>header</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Header text of the panel.</td>
+                    </tr>
+                    <tr>
+                        <td>toggleable</td>
+                        <td>boolean</td>
+                        <td>null</td>
+                        <td>Defines if content of panel can be expanded and collapsed.</td>
+                    </tr>
+                    <tr>
+                        <td>collapsed</td>
+                        <td>boolean</td>
+                        <td>null</td>
+                        <td>Defines the initial state of panel content.</td>
+                    </tr>
+                    <tr>
+                        <td>toggleButtonProps</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Uses to pass the custom value to read for the button inside the component.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Events</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>toggle</td>
-                            <td>
-                                event.originalEvent: browser event <br />
-                                event.value: collapsed state as a boolean
-                            </td>
-                            <td>Callback to invoke when a tab toggle.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Events</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>toggle</td>
+                        <td>
+                            event.originalEvent: browser event <br />
+                            event.value: collapsed state as a boolean
+                        </td>
+                        <td>Callback to invoke when a tab toggle.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Slots</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>header</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>icons</td>
-                            <td>-</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Slots</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>header</td>
+                        <td>-</td>
+                    </tr>
+                    <tr>
+                        <td>icons</td>
+                        <td>-</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-panel</td>
-                            <td>Container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-panel-header</td>
-                            <td>Header section.</td>
-                        </tr>
-                        <tr>
-                            <td>p-panel-title</td>
-                            <td>Title text of panel.</td>
-                        </tr>
-                        <tr>
-                            <td>p-panel-header-icon</td>
-                            <td>Action icons inside header.</td>
-                        </tr>
-                        <tr>
-                            <td>p-panel-toggler</td>
-                            <td>Toggle icon.</td>
-                        </tr>
-                        <tr>
-                            <td>p-panel-content</td>
-                            <td>Content of panel.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-panel</td>
+                        <td>Container element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-panel-header</td>
+                        <td>Header section.</td>
+                    </tr>
+                    <tr>
+                        <td>p-panel-title</td>
+                        <td>Title text of panel.</td>
+                    </tr>
+                    <tr>
+                        <td>p-panel-header-icon</td>
+                        <td>Action icons inside header.</td>
+                    </tr>
+                    <tr>
+                        <td>p-panel-toggler</td>
+                        <td>Toggle icon.</td>
+                    </tr>
+                    <tr>
+                        <td>p-panel-content</td>
+                        <td>Content of panel.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Accessibility</h5>
-            <DevelopmentSection>
-                <h6>Screen Reader</h6>
-                <p>
-                    Toggleable panels use a content toggle button at the header that has <i>aria-controls</i> to define the id of the content section along with <i>aria-expanded</i> for the visibility state. The value to read the button defaults to
-                    the value of the <i>header</i> property and can be customized by defining an <i>aria-label</i> or <i>aria-labelledby</i> via the <i>toggleButtonProps</i> property.
-                </p>
-                <p>The content uses <i>region</i>, defines an id that matches the <i>aria-controls</i> of the content toggle button and <i>aria-labelledby</i> referring to the id of the header.</p>
+        <h5>Accessibility</h5>
 
-                <h6>Content Toggle Button Keyboard Support</h6>
-                <div class="doc-tablewrapper">
-                    <table class="doc-table">
-                        <thead>
-                            <tr>
-                                <th>Key</th>
-                                <th>Function</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr>
-                                <td><i>tab</i></td>
-                                <td>Moves focus to the next the focusable element in the page tab sequence.</td>
-                            </tr>
-                            <tr>
-                                <td><i>shift</i> + <i>tab</i></td>
-                                <td>Moves focus to the previous the focusable element in the page tab sequence.</td>
-                            </tr>
-                            <tr>
-                                <td><i>enter</i></td>
-                                <td>Toggles the visibility of the content.</td>
-                            </tr>
-                            <tr>
-                                <td><i>space</i></td>
-                                <td>Toggles the visibility of the content.</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-            </DevelopmentSection>
+        <h6>Screen Reader</h6>
+        <p>
+            Toggleable panels use a content toggle button at the header that has <i>aria-controls</i> to define the id of the content section along with <i>aria-expanded</i> for the visibility state. The value to read the button defaults to the value
+            of the <i>header</i> property and can be customized by defining an <i>aria-label</i> or <i>aria-labelledby</i> via the <i>toggleButtonProps</i> property.
+        </p>
+        <p>The content uses <i>region</i>, defines an id that matches the <i>aria-controls</i> of the content toggle button and <i>aria-labelledby</i> referring to the id of the header.</p>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc>
-    </ClientOnly>
+        <h6>Content Toggle Button Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>tab</i></td>
+                        <td>Moves focus to the next the focusable element in the page tab sequence.</td>
+                    </tr>
+                    <tr>
+                        <td><i>shift</i> + <i>tab</i></td>
+                        <td>Moves focus to the previous the focusable element in the page tab sequence.</td>
+                    </tr>
+                    <tr>
+                        <td><i>enter</i></td>
+                        <td>Toggles the visibility of the content.</td>
+                    </tr>
+                    <tr>
+                        <td><i>space</i></td>
+                        <td>Toggles the visibility of the content.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
diff --git a/pages/panel/index.vue b/pages/panel/index.vue
index 135528455..ef4dedbb8 100755
--- a/pages/panel/index.vue
+++ b/pages/panel/index.vue
@@ -23,7 +23,7 @@
                     <button class="p-panel-header-icon p-link mr-2" @click="toggle">
                         <span class="pi pi-cog"></span>
                     </button>
-                    <Menu id="config_menu" ref="menu" :model="items" :popup="true" />
+                    <Menu ref="menu" id="config_menu" :model="items" :popup="true" />
                 </template>
                 <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
diff --git a/pages/panelmenu/PanelMenuDoc.vue b/pages/panelmenu/PanelMenuDoc.vue
index b262ae848..6e4789600 100755
--- a/pages/panelmenu/PanelMenuDoc.vue
+++ b/pages/panelmenu/PanelMenuDoc.vue
@@ -1,31 +1,30 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="PanelMenuDemo" :sources="sources" github="panelmenu/PanelMenuDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="PanelMenuDemo" :sources="sources" github="panelmenu/PanelMenuDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import PanelMenu from 'primevue/panelmenu';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/panelmenu/panelmenu.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>MenuModel</h5>
-            <p>PanelMenu uses the common MenuModel API to define the items, visit <nuxt-link to="/menumodel">MenuModel API</nuxt-link> for details.</p>
+        <h5>MenuModel</h5>
+        <p>PanelMenu uses the common MenuModel API to define the items, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p>
 
-            <h5>Getting Started</h5>
-            <p>PanelMenu requires a collection of menuitems as its model.</p>
-            <pre v-code><code>
+        <h5>Getting Started</h5>
+        <p>PanelMenu requires a collection of menuitems as its model.</p>
+        <pre v-code><code>
 &lt;PanelMenu :model="items" /&gt;
 
 </code></pre>
 
-            <div style="height: 400px; overflow: auto">
-                <pre v-code.script><code>
+        <div style="height: 400px; overflow: auto">
+            <pre v-code.script><code>
 export default {
 	data() {
 		return {
@@ -151,11 +150,11 @@ export default {
 }
 
 </code></pre>
-            </div>
+        </div>
 
-            <h5>Templating</h5>
-            <p>PanelMenu offers content customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter.</p>
-            <pre v-code><code><template v-pre>
+        <h5>Templating</h5>
+        <p>PanelMenu offers content customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter.</p>
+        <pre v-code><code><template v-pre>
 &lt;PanelMenu :model="items"&gt;
     &lt;template #item="{item}"&gt;
         &lt;a :href="item.url"&gt;{{item.label}}&lt;/a&gt;
@@ -164,26 +163,26 @@ export default {
 </template>
 </code></pre>
 
-            <p><i>nuxt-link</i> with route configuration can also be used within templating for further customization.</p>
-            <pre v-code><code><template v-pre>
+        <p><i>router-link</i> with route configuration can also be used within templating for further customization.</p>
+        <pre v-code><code><template v-pre>
 &lt;PanelMenu :model="items"&gt;
     &lt;template #item="{item}"&gt;
-        &lt;nuxt-link :to="item.to" custom v-slot="{href, route, navigate, isActive, isExactActive}"&gt;
+        &lt;router-link :to="item.to" custom v-slot="{href, route, navigate, isActive, isExactActive}"&gt;
             &lt;a :href="href" @click="navigate" :class="{'active-link': isActive, 'active-link-exact': isExactActive}"&gt;{{route.fullPath}}&lt;/a&gt;
-        &lt;/nuxt-link&gt;
+        &lt;/router-link&gt;
     &lt;/template&gt;
 &lt;/PanelMenu&gt;
 </template>
 </code></pre>
 
-            <h5>Programmatic Control</h5>
-            <p>
-                If the menuitem has a <i>key</i> defined, PanelMenu state can be controlled programmatically with the <i>expandedKeys</i> property that defines the keys that are expanded. This property is a Map instance whose key is the key of a node
-                and value is a boolean. Note that <i>expandedKeys</i> also supports two-way binding with the v-model directive.
-            </p>
+        <h5>Programmatic Control</h5>
+        <p>
+            If the menuitem has a <i>key</i> defined, PanelMenu state can be controlled programmatically with the <i>expandedKeys</i> property that defines the keys that are expanded. This property is a Map instance whose key is the key of a node and
+            value is a boolean. Note that <i>expandedKeys</i> also supports two-way binding with the v-model directive.
+        </p>
 
-            <p>Example below expands and collapses all nodes with buttons.</p>
-            <pre v-code><code><template v-pre>
+        <p>Example below expands and collapses all nodes with buttons.</p>
+        <pre v-code><code><template v-pre>
 &lt;div&gt;
     &lt;Button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll" /&gt;
     &lt;Button type="button" icon="pi pi-minus" label="Collapse All" @click="collapseAll" /&gt;
@@ -192,8 +191,8 @@ export default {
 </template>
 </code></pre>
 
-            <div style="height: 400px; overflow: auto">
-                <pre v-code.script><code>
+        <div style="height: 400px; overflow: auto">
+            <pre v-code.script><code>
 export default {
     data() {
         return {
@@ -355,10 +354,10 @@ export default {
 }
 
 </code></pre>
-            </div>
+        </div>
 
-            <p class="mt-3">In order to display some nodes as expanded by default, simply add their keys to the map.</p>
-            <pre v-code.script><code>
+        <p class="mt-3">In order to display some nodes as expanded by default, simply add their keys to the map.</p>
+        <pre v-code.script><code>
 export default {
     data() {
         return {
@@ -373,110 +372,295 @@ export default {
 
 </code></pre>
 
-            <h5>Properties</h5>
-            <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>model</td>
-                            <td>array</td>
-                            <td>null</td>
-                            <td>An array of menuitems.</td>
-                        </tr>
-                        <tr>
-                            <td>expandedKeys</td>
-                            <td>array</td>
-                            <td>null</td>
-                            <td>A map of keys to represent the expansion state in controlled mode.</td>
-                        </tr>
-                        <tr>
-                            <td>exact</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether to apply 'nuxt-link-active-exact' class if route exactly matches the item path.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>model</td>
+                        <td>array</td>
+                        <td>null</td>
+                        <td>An array of menuitems.</td>
+                    </tr>
+                    <tr>
+                        <td>expandedKeys</td>
+                        <td>array</td>
+                        <td>null</td>
+                        <td>A map of keys to represent the expansion state in controlled mode.</td>
+                    </tr>
+                    <tr>
+                        <td>exact</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Whether to apply 'router-link-active-exact' class if route exactly matches the item path.</td>
+                    </tr>
+                    <tr>
+                        <td>tabindex</td>
+                        <td>number</td>
+                        <td>0</td>
+                        <td>Index of the element in tabbing order.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Slots</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>item</td>
-                            <td>item: Menuitem instance</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Events</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>panel-open</td>
+                        <td>
+                            event.originalEvent: Browser event <br />
+                            event.item: Current item
+                        </td>
+                        <td>Callback to invoke when a panel gets expanded.</td>
+                    </tr>
+                    <tr>
+                        <td>panel-close</td>
+                        <td>
+                            event.originalEvent: Browser event <br />
+                            event.item: Current item
+                        </td>
+                        <td>Callback to invoke when an active panel is collapsed by clicking on the header.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-panelmenu</td>
-                            <td>Container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-panelmenu-header</td>
-                            <td>Accordion header of root submenu.</td>
-                        </tr>
-                        <tr>
-                            <td>p-panelmenu-content</td>
-                            <td>Accordion content of root submenu.</td>
-                        </tr>
-                        <tr>
-                            <td>p-submenu-list</td>
-                            <td>List element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-menuitem</td>
-                            <td>Menuitem element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-menuitem-text</td>
-                            <td>Label of a menuitem.</td>
-                        </tr>
-                        <tr>
-                            <td>p-menuitem-icon</td>
-                            <td>Icon of a menuitem.</td>
-                        </tr>
-                        <tr>
-                            <td>p-panelmenu-icon</td>
-                            <td>Arrow icon of an accordion header.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Slots</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>item</td>
+                        <td>item: Menuitem instance</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc>
-    </ClientOnly>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-panelmenu</td>
+                        <td>Container element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-panelmenu-panel</td>
+                        <td>Submenu container.</td>
+                    </tr>
+                    <tr>
+                        <td>p-toggleable-content</td>
+                        <td>Accordion content of root submenu.</td>
+                    </tr>
+                    <tr>
+                        <td>p-panelmenu-header</td>
+                        <td>Accordion header of root submenu.</td>
+                    </tr>
+                    <tr>
+                        <td>p-panelmenu-header-content</td>
+                        <td>Content of accordion header.</td>
+                    </tr>
+                    <tr>
+                        <td>p-panelmenu-header-action</td>
+                        <td>Action of accordion header.</td>
+                    </tr>
+                    <tr>
+                        <td>p-submenu-list</td>
+                        <td>List element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-menuitem</td>
+                        <td>Menuitem element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-menuitem-text</td>
+                        <td>Label of a menuitem.</td>
+                    </tr>
+                    <tr>
+                        <td>p-menuitem-icon</td>
+                        <td>Icon of a menuitem.</td>
+                    </tr>
+                    <tr>
+                        <td>p-submenu-icon</td>
+                        <td>Arrow icon of an accordion header.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>
+            Accordion header elements have a <i>button</i> role, an <i>aria-label</i> defined using the <i>label</i> property of the menuitem model and <i>aria-controls</i> to define the id of the content section along with <i>aria-expanded</i> for
+            the visibility state.
+        </p>
+        <p>The content of an accordion panel uses <i>region</i> role, defines an id that matches the <i>aria-controls</i> of the header and <i>aria-labelledby</i> referring to the id of the header.</p>
+
+        <p>
+            The tree elements has a <i>tree</i> as the role and each menu item has a <i>treeitem</i> role along with <i>aria-label</i>, <i>aria-selected</i> and <i>aria-expanded</i> attributes. The container element of a treenode has the
+            <i>group</i> role. The <i>aria-setsize</i>, <i>aria-posinset</i> and <i>aria-level</i> attributes are calculated implicitly and added to each treeitem.
+        </p>
+
+        <h6>Header Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>tab</i>
+                        </td>
+                        <td>Moves focus to the next the focusable element in the page tab sequence.</td>
+                    </tr>
+                    <tr>
+                        <td><i>shift</i> + <i>tab</i></td>
+                        <td>Moves focus to the previous the focusable element in the page tab sequence.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>Toggles the visibility of the content.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>Toggles the visibility of the content.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>down arrow</i>
+                        </td>
+                        <td>Moves focus to the next header. If focus is on the last header, moves focus to the first header.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>up arrow</i>
+                        </td>
+                        <td>Moves focus to the previous header. If focus is on the first header, moves focus to the last header.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>home</i>
+                        </td>
+                        <td>Moves focus to the first header.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>end</i>
+                        </td>
+                        <td>Moves focus to the last header.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h6>Tree Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>tab</i>
+                        </td>
+                        <td>Moves focus to the next focusable element in the page tab order.</td>
+                    </tr>
+                    <tr>
+                        <td><i>shift</i> + <i>tab</i></td>
+                        <td>Moves focus to the previous focusable element in the page tab order.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>Activates the focused treenode.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>Activates the focused treenode.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>down arrow</i>
+                        </td>
+                        <td>Moves focus to the next treenode.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>up arrow</i>
+                        </td>
+                        <td>Moves focus to the previous treenode.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>right arrow</i>
+                        </td>
+                        <td>If node is closed, opens the node otherwise moves focus to the first child node.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>left arrow</i>
+                        </td>
+                        <td>If node is open, closes the node otherwise moves focus to the parent node.</td>
+                    </tr>
+                    <tr>
+                        <td><i>any printable character</i></td>
+                        <td>Moves focus to the visible option whose label starts with the characters being typed.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
diff --git a/pages/panelmenu/index.vue b/pages/panelmenu/index.vue
index fe0ddd7f3..ac28ab7d1 100755
--- a/pages/panelmenu/index.vue
+++ b/pages/panelmenu/index.vue
@@ -18,7 +18,7 @@
                     <Button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll" class="mr-2" />
                     <Button type="button" icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
                 </div>
-                <PanelMenu :model="items" v-model:expandedKeys="expandedKeys" />
+                <PanelMenu v-model:expandedKeys="expandedKeys" :model="items" />
             </div>
         </div>
 
diff --git a/pages/password/PasswordDoc.vue b/pages/password/PasswordDoc.vue
index 151cbe2cd..d5260c55d 100755
--- a/pages/password/PasswordDoc.vue
+++ b/pages/password/PasswordDoc.vue
@@ -1,51 +1,50 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="PasswordDemo" :sources="sources" github="password/PasswordDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="PasswordDemo" :sources="sources" github="password/PasswordDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import Password from 'primevue/password';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/password/password.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p>A model can be bound using the standard v-model directive.</p>
-            <pre v-code><code>
+        <h5>Getting Started</h5>
+        <p>A model can be bound using the standard v-model directive.</p>
+        <pre v-code><code>
 &lt;Password v-model="value" /&gt;
 
 </code></pre>
 
-            <h5>Customization</h5>
-            <p>Password component uses regular expressions for middle and strong passwords with the following defaults.</p>
+        <h5>Customization</h5>
+        <p>Password component uses regular expressions for middle and strong passwords with the following defaults.</p>
 
-            <h6>Medium</h6>
-            <p><i>^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{6,}).</i></p>
-            <ul>
-                <li>At least one lowercase</li>
-                <li>At least one uppercase or one number</li>
-                <li>Minimum 6 characters</li>
-            </ul>
+        <h6>Medium</h6>
+        <p><i>^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{6,}).</i></p>
+        <ul>
+            <li>At least one lowercase</li>
+            <li>At least one uppercase or one number</li>
+            <li>Minimum 6 characters</li>
+        </ul>
 
-            <h6>Strong</h6>
-            <p><i>^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.{8,})</i></p>
-            <ul>
-                <li>At least one lowercase</li>
-                <li>At least one uppercase</li>
-                <li>At least one numeric</li>
-                <li>Minimum 8 characters</li>
-            </ul>
+        <h6>Strong</h6>
+        <p><i>^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.{8,})</i></p>
+        <ul>
+            <li>At least one lowercase</li>
+            <li>At least one uppercase</li>
+            <li>At least one numeric</li>
+            <li>Minimum 8 characters</li>
+        </ul>
 
-            <p>It is possible to define your own checks with the <i>mediumRegex</i> and <i>strongRegex</i> properties.</p>
+        <p>It is possible to define your own checks with the <i>mediumRegex</i> and <i>strongRegex</i> properties.</p>
 
-            <h5>Templating</h5>
-            <p>3 slots are included to customize the overlay. These are <i>header</i>, <i>content</i> and <i>footer</i>. Note that content overrides the default meter.</p>
-            <pre v-code><code>
+        <h5>Templating</h5>
+        <p>3 slots are included to customize the overlay. These are <i>header</i>, <i>content</i> and <i>footer</i>. Note that content overrides the default meter.</p>
+        <pre v-code><code>
 &lt;Password v-model="value4"&gt;
     &lt;template #header&gt;
         &lt;h6&gt;Pick a password&lt;/h6&gt;
@@ -64,231 +63,243 @@ import Password from 'primevue/password';
 
 </code></pre>
 
-            <h5>Properties</h5>
-            <p>Any property such as name and placeholder are passed to the underlying input element. Following are the additional properties to configure the component.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>modelValue</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Value of the component.</td>
-                        </tr>
-                        <tr>
-                            <td>inputId</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Identifier of the underlying input element.</td>
-                        </tr>
-                        <tr>
-                            <td>promptLabel</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Text to prompt password entry. Defaults to PrimeVue <nuxt-link to="/locale">Locale</nuxt-link> configuration.</td>
-                        </tr>
-                        <tr>
-                            <td>mediumRegex</td>
-                            <td>string</td>
-                            <td>^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{6,})</td>
-                            <td>Regex for a medium level password.</td>
-                        </tr>
-                        <tr>
-                            <td>strongRegex</td>
-                            <td>string</td>
-                            <td>^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.{8,})</td>
-                            <td>Regex for a strong level password.</td>
-                        </tr>
-                        <tr>
-                            <td>weakLabel</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Text for a weak password. Defaults to PrimeVue <nuxt-link to="/locale">Locale</nuxt-link> configuration.</td>
-                        </tr>
-                        <tr>
-                            <td>mediumLabel</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Text for a medium password. Defaults to PrimeVue <nuxt-link to="/locale">Locale</nuxt-link> configuration.</td>
-                        </tr>
-                        <tr>
-                            <td>strongLabel</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Text for a strong password. Defaults to PrimeVue <nuxt-link to="/locale">Locale</nuxt-link> configuration.</td>
-                        </tr>
-                        <tr>
-                            <td>feedback</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether to show the strength indicator or not.</td>
-                        </tr>
-                        <tr>
-                            <td>toggleMask</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Whether to show an icon to display the password as plain text.</td>
-                        </tr>
-                        <tr>
-                            <td>appendTo</td>
-                            <td>string</td>
-                            <td>body</td>
-                            <td>A valid query selector or an HTMLElement to specify where the overlay gets attached. Special keywords are "body" for document body and "self" for the element itself.</td>
-                        </tr>
-                        <tr>
-                            <td>hideIcon</td>
-                            <td>string</td>
-                            <td>pi pi-eye-slash</td>
-                            <td>Icon to hide displaying the password as plain text.</td>
-                        </tr>
-                        <tr>
-                            <td>showIcon</td>
-                            <td>string</td>
-                            <td>pi pi-eye</td>
-                            <td>Icon to show displaying the password as plain text.</td>
-                        </tr>
-                        <tr>
-                            <td>disabled</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When present, it specifies that the element should be disabled.</td>
-                        </tr>
-                        <tr>
-                            <td>placeholder</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Placeholder text for the input.</td>
-                        </tr>
-                        <tr>
-                            <td>required</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When present, it specifies that an input field must be filled out before submitting the form.</td>
-                        </tr>
-                        <tr>
-                            <td>inputId</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the component input field.</td>
-                        </tr>
-                        <tr>
-                            <td>inputClass</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Style class of the input field.</td>
-                        </tr>
-                        <tr>
-                            <td>inputStyle</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Inline style of the input field.</td>
-                        </tr>
-                        <tr>
-                            <td>inputProps</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.</td>
-                        </tr>
-                        <tr>
-                            <td>panelId</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Identifier of the underlying overlay panel element.</td>
-                        </tr>
-                        <tr>
-                            <td>panelClass</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the overlay panel.</td>
-                        </tr>
-                        <tr>
-                            <td>panelStyle</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Inline style of the overlay panel.</td>
-                        </tr>
-                        <tr>
-                            <td>panelProps</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Uses to pass all properties of the HTMLDivElement to the overlay panel inside the component.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <p>Any property such as name and placeholder are passed to the underlying input element. Following are the additional properties to configure the component.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>modelValue</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Value of the component.</td>
+                    </tr>
+                    <tr>
+                        <td>inputId</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Identifier of the underlying input element.</td>
+                    </tr>
+                    <tr>
+                        <td>promptLabel</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Text to prompt password entry. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td>
+                    </tr>
+                    <tr>
+                        <td>mediumRegex</td>
+                        <td>string</td>
+                        <td>^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{6,})</td>
+                        <td>Regex for a medium level password.</td>
+                    </tr>
+                    <tr>
+                        <td>strongRegex</td>
+                        <td>string</td>
+                        <td>^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.{8,})</td>
+                        <td>Regex for a strong level password.</td>
+                    </tr>
+                    <tr>
+                        <td>weakLabel</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Text for a weak password. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td>
+                    </tr>
+                    <tr>
+                        <td>mediumLabel</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Text for a medium password. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td>
+                    </tr>
+                    <tr>
+                        <td>strongLabel</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Text for a strong password. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td>
+                    </tr>
+                    <tr>
+                        <td>feedback</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Whether to show the strength indicator or not.</td>
+                    </tr>
+                    <tr>
+                        <td>toggleMask</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Whether to show an icon to display the password as plain text.</td>
+                    </tr>
+                    <tr>
+                        <td>appendTo</td>
+                        <td>string</td>
+                        <td>body</td>
+                        <td>A valid query selector or an HTMLElement to specify where the overlay gets attached. Special keywords are "body" for document body and "self" for the element itself.</td>
+                    </tr>
+                    <tr>
+                        <td>hideIcon</td>
+                        <td>string</td>
+                        <td>pi pi-eye-slash</td>
+                        <td>Icon to hide displaying the password as plain text.</td>
+                    </tr>
+                    <tr>
+                        <td>showIcon</td>
+                        <td>string</td>
+                        <td>pi pi-eye</td>
+                        <td>Icon to show displaying the password as plain text.</td>
+                    </tr>
+                    <tr>
+                        <td>disabled</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When present, it specifies that the element should be disabled.</td>
+                    </tr>
+                    <tr>
+                        <td>placeholder</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Placeholder text for the input.</td>
+                    </tr>
+                    <tr>
+                        <td>required</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When present, it specifies that an input field must be filled out before submitting the form.</td>
+                    </tr>
+                    <tr>
+                        <td>inputId</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the component input field.</td>
+                    </tr>
+                    <tr>
+                        <td>inputClass</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Style class of the input field.</td>
+                    </tr>
+                    <tr>
+                        <td>inputStyle</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Inline style of the input field.</td>
+                    </tr>
+                    <tr>
+                        <td>inputProps</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.</td>
+                    </tr>
+                    <tr>
+                        <td>panelId</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Identifier of the underlying overlay panel element.</td>
+                    </tr>
+                    <tr>
+                        <td>panelClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the overlay panel.</td>
+                    </tr>
+                    <tr>
+                        <td>panelStyle</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Inline style of the overlay panel.</td>
+                    </tr>
+                    <tr>
+                        <td>panelProps</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Uses to pass all properties of the HTMLDivElement to the overlay panel inside the component.</td>
+                    </tr>
+                    <tr>
+                        <td>aria-label</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Defines a string value that labels an interactive element.</td>
+                    </tr>
+                    <tr>
+                        <td>aria-labelledby</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Events</h5>
-            <p>Any valid event such as focus, blur and input are passed to the underlying input element.</p>
+        <h5>Events</h5>
+        <p>Any valid event such as focus, blur and input are passed to the underlying input element.</p>
 
-            <h5>Slots</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>header</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>content</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>footer</td>
-                            <td>-</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Slots</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>header</td>
+                        <td>-</td>
+                    </tr>
+                    <tr>
+                        <td>content</td>
+                        <td>-</td>
+                    </tr>
+                    <tr>
+                        <td>footer</td>
+                        <td>-</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-password-panel</td>
-                            <td>Container of password panel</td>
-                        </tr>
-                        <tr>
-                            <td>p-password-meter</td>
-                            <td>Meter element of password strength</td>
-                        </tr>
-                        <tr>
-                            <td>p-password-info</td>
-                            <td>Text to display strength</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-password-panel</td>
+                        <td>Container of password panel</td>
+                    </tr>
+                    <tr>
+                        <td>p-password-meter</td>
+                        <td>Meter element of password strength</td>
+                    </tr>
+                    <tr>
+                        <td>p-password-info</td>
+                        <td>Text to display strength</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Accessibility</h5>
-            <h6>Screen Reader</h6>
-            <p>
-                Value to describe the component can either be provided via <i>label</i> tag combined with <i>id</i> prop or using <i>aria-labelledby</i>, <i>aria-label</i> props. Screen reader is notified about the changes to the strength of the
-                password using a section that has <i>aria-live</i> while typing.
-            </p>
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>
+            Value to describe the component can either be provided via <i>label</i> tag combined with <i>id</i> prop or using <i>aria-labelledby</i>, <i>aria-label</i> props. Screen reader is notified about the changes to the strength of the password
+            using a section that has <i>aria-live</i> while typing.
+        </p>
 
-            <pre v-code><code>
+        <pre v-code><code>
 &lt;label for="pwd1"&gt;Password&lt;/label&gt;
 &lt;Password inputId="pwd1" /&gt;
 
@@ -299,32 +310,31 @@ import Password from 'primevue/password';
 
 </code></pre>
 
-            <h6>Keyboard Support</h6>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Key</th>
-                            <th>Function</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td><i>tab</i></td>
-                            <td>Moves focus to the input.</td>
-                        </tr>
-                        <tr>
-                            <td><i>escape</i></td>
-                            <td>Hides the strength meter if open.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h6>Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>tab</i></td>
+                        <td>Moves focus to the input.</td>
+                    </tr>
+                    <tr>
+                        <td><i>escape</i></td>
+                        <td>Hides the strength meter if open.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc>
-    </ClientOnly>
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
diff --git a/pages/picklist/PickListDoc.vue b/pages/picklist/PickListDoc.vue
index ddbb5f972..90c273f28 100755
--- a/pages/picklist/PickListDoc.vue
+++ b/pages/picklist/PickListDoc.vue
@@ -1,26 +1,25 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="PickListDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="picklist/PickListDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="PickListDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="picklist/PickListDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import PickList from 'primevue/picklist';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/picklist/picklist.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p>PickList requires a multidimensional array as its value bound with the v-model directive and a template for its content that gets the <i>item</i> instance and the <i>index</i> via slotProps.</p>
-            <pre v-code><code><template v-pre>
+        <h5>Getting Started</h5>
+        <p>PickList requires a multidimensional array as its value bound with the v-model directive and a template for its content that gets the <i>item</i> instance and the <i>index</i> via slotProps.</p>
+        <pre v-code><code><template v-pre>
 &lt;PickList v-model="cars" dataKey="vin"&gt;
     &lt;template #item="slotProps"&gt;
         &lt;div class="p-caritem"&gt;
-            &lt;img :src="'/demo/images/car/' + slotProps.item.brand + '.png'"&gt;
+            &lt;img :src="'demo/images/car/' + slotProps.item.brand + '.png'"&gt;
             &lt;div&gt;
                 &lt;span class="p-caritem-vin"&gt;{{slotProps.item.vin}}&lt;/span&gt;
                 &lt;span&gt;{{slotProps.item.year}} - {{slotProps.item.color}}&lt;/span&gt;
@@ -31,12 +30,12 @@ import PickList from 'primevue/picklist';
 </template>
 </code></pre>
 
-            <h5>Templates</h5>
-            <p>
-                In addition to the mandatory "item" template, picklist provides "sourceheader" and "targetheader" slots to define content at header sections. Similarly custom content can be placed before and after the button controls for each section
-                can be templates. View the slots section for more information.
-            </p>
-            <pre v-code><code><template v-pre>
+        <h5>Templates</h5>
+        <p>
+            In addition to the mandatory "item" template, picklist provides "sourceheader" and "targetheader" slots to define content at header sections. Similarly custom content can be placed before and after the button controls for each section can
+            be templates. View the slots section for more information.
+        </p>
+        <pre v-code><code><template v-pre>
 &lt;PickList v-model="cars" dataKey="vin"&gt;
     &lt;template #sourceheader&gt;
         Available
@@ -46,7 +45,7 @@ import PickList from 'primevue/picklist';
     &lt;/template&gt;
     &lt;template #item="slotProps"&gt;
         &lt;div class="p-caritem"&gt;
-            &lt;img :src="'/demo/images/car/' + slotProps.item.brand + '.png'"&gt;
+            &lt;img :src="'demo/images/car/' + slotProps.item.brand + '.png'"&gt;
             &lt;div&gt;
                 &lt;span class="p-caritem-vin"&gt;{{slotProps.item.vin}}&lt;/span&gt;
                 &lt;span&gt;{{slotProps.item.year}} - {{slotProps.item.color}}&lt;/span&gt;
@@ -57,17 +56,17 @@ import PickList from 'primevue/picklist';
 </template>
 </code></pre>
 
-            <h5>Selection</h5>
-            <p>
-                In case you need to access the selected items in the list, define a binding to the <i>selection</i> property with the v-model directive so that it gets updated when the user makes a selection. Since it is two-way binding enabled, your
-                changes to the selection will be reflected as well. Note that this is optional and only necessary when you need to access the selection.
-            </p>
+        <h5>Selection</h5>
+        <p>
+            In case you need to access the selected items in the list, define a binding to the <i>selection</i> property with the v-model directive so that it gets updated when the user makes a selection. Since it is two-way binding enabled, your
+            changes to the selection will be reflected as well. Note that this is optional and only necessary when you need to access the selection.
+        </p>
 
-            <pre v-code><code><template v-pre>
+        <pre v-code><code><template v-pre>
 &lt;PickList v-model="cars" dataKey="vin" v-model:selection="selection"&gt;
     &lt;template #item="slotProps"&gt;
         &lt;div class="p-caritem"&gt;
-            &lt;img :src="'/demo/images/car/' + slotProps.item.brand + '.png'"&gt;
+            &lt;img :src="'demo/images/car/' + slotProps.item.brand + '.png'"&gt;
             &lt;div&gt;
                 &lt;span class="p-caritem-vin"&gt;{{slotProps.item.vin}}&lt;/span&gt;
                 &lt;span&gt;{{slotProps.item.year}} - {{slotProps.item.color}}&lt;/span&gt;
@@ -78,259 +77,449 @@ import PickList from 'primevue/picklist';
 </template>
 </code></pre>
 
-            <h5>DataKey</h5>
-            <p>It is recommended to provide the name of the field that uniquely identifies the a record in the data via the <i>dataKey</i> property for better performance.</p>
+        <h5>DataKey</h5>
+        <p>It is recommended to provide the name of the field that uniquely identifies the a record in the data via the <i>dataKey</i> property for better performance.</p>
 
-            <h5>Properties</h5>
-            <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>modelValue</td>
-                            <td>array</td>
-                            <td>null</td>
-                            <td>Value of the component as a multidimensional array.</td>
-                        </tr>
-                        <tr>
-                            <td>selection</td>
-                            <td>array</td>
-                            <td>null</td>
-                            <td>Selected items in the list as a multidimensional array.</td>
-                        </tr>
-                        <tr>
-                            <td>metaKeySelection</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>
-                                Defines whether metaKey is requred or not for the selection. <br />
-                                When true metaKey needs to be pressed to select or unselect an item and <br />
-                                when set to false selection of each item can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically.
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>dataKey</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Name of the field that uniquely identifies the a record in the data.</td>
-                        </tr>
-                        <tr>
-                            <td>listStyle</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Inline style of the the list element.</td>
-                        </tr>
-                        <tr>
-                            <td>responsive</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether the list optimizes layout based on screen size.</td>
-                        </tr>
-                        <tr>
-                            <td>breakpoint</td>
-                            <td>string</td>
-                            <td>960px</td>
-                            <td>The breakpoint to define the maximum width boundary when responsiveness is enabled.</td>
-                        </tr>
-                        <tr>
-                            <td>stripedRows</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Whether to displays rows with alternating colors.</td>
-                        </tr>
-                        <tr>
-                            <td>showSourceControls</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether to show buttons of source list.</td>
-                        </tr>
-                        <tr>
-                            <td>showTargetControls</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether to show buttons of target list.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>modelValue</td>
+                        <td>array</td>
+                        <td>null</td>
+                        <td>Value of the component as a multidimensional array.</td>
+                    </tr>
+                    <tr>
+                        <td>selection</td>
+                        <td>array</td>
+                        <td>null</td>
+                        <td>Selected items in the list as a multidimensional array.</td>
+                    </tr>
+                    <tr>
+                        <td>metaKeySelection</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>
+                            Defines whether metaKey is requred or not for the selection. <br />
+                            When true metaKey needs to be pressed to select or unselect an item and <br />
+                            when set to false selection of each item can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically.
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>dataKey</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Name of the field that uniquely identifies the a record in the data.</td>
+                    </tr>
+                    <tr>
+                        <td>listStyle</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Inline style of the the list element.</td>
+                    </tr>
+                    <tr>
+                        <td>responsive</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Whether the list optimizes layout based on screen size.</td>
+                    </tr>
+                    <tr>
+                        <td>breakpoint</td>
+                        <td>string</td>
+                        <td>960px</td>
+                        <td>The breakpoint to define the maximum width boundary when responsiveness is enabled.</td>
+                    </tr>
+                    <tr>
+                        <td>stripedRows</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Whether to displays rows with alternating colors.</td>
+                    </tr>
+                    <tr>
+                        <td>showSourceControls</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Whether to show buttons of source list.</td>
+                    </tr>
+                    <tr>
+                        <td>showTargetControls</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Whether to show buttons of target list.</td>
+                    </tr>
+                    <tr>
+                        <td>tabindex</td>
+                        <td>number</td>
+                        <td>0</td>
+                        <td>Index of the list element in tabbing order.</td>
+                    </tr>
+                    <tr>
+                        <td>targetListProps</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Uses to pass all properties of the HTMLAttributes to the target list element.</td>
+                    </tr>
+                    <tr>
+                        <td>sourceListProps</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Uses to pass all properties of the HTMLAttributes to the source list element.</td>
+                    </tr>
+                    <tr>
+                        <td>moveUpButtonProps</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Uses to pass all properties of the HTMLButtonElement to the move up button inside the component.</td>
+                    </tr>
+                    <tr>
+                        <td>moveTopButtonProps</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Uses to pass all properties of the HTMLButtonElement to the move top button inside the component.</td>
+                    </tr>
+                    <tr>
+                        <td>moveDownButtonProps</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Uses to pass all properties of the HTMLButtonElement to the move down button inside the component.</td>
+                    </tr>
+                    <tr>
+                        <td>moveBottomButtonProps</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Uses to pass all properties of the HTMLButtonElement to the move bottom button inside the component.</td>
+                    </tr>
+                    <tr>
+                        <td>moveToTargetProps</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Uses to pass all properties of the HTMLButtonElement to the move to target button inside the component.</td>
+                    </tr>
+                    <tr>
+                        <td>moveAllToTargetProps</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Uses to pass all properties of the HTMLButtonElement to the move all to target button inside the component.</td>
+                    </tr>
+                    <tr>
+                        <td>moveToSourceProps</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Uses to pass all properties of the HTMLButtonElement to the move to source button inside the component.</td>
+                    </tr>
+                    <tr>
+                        <td>moveAllToSourceProps</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Uses to pass all properties of the HTMLButtonElement to the move all to source button inside the component.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Events</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>reorder</td>
-                            <td>
-                                event.originalEvent: browser event <br />
-                                event.value: Ordered list <br />
-                                event.direction: Direction of the change; "up", "down", "bottom", "top" <br />
-                                event.listIndex: Index of the list that is ordered, 0 represents the source and 1 represents the target list.
-                            </td>
-                            <td>Callback to invoke when the list is reordered.</td>
-                        </tr>
-                        <tr>
-                            <td>move-to-target</td>
-                            <td>
-                                event.originalEvent: browser event <br />
-                                event.items: Moved items
-                            </td>
-                            <td>Callback to invoke when one or more items are moved to the target list.</td>
-                        </tr>
-                        <tr>
-                            <td>move-all-to-target</td>
-                            <td>
-                                event.originalEvent: browser event <br />
-                                event.items: Moved items
-                            </td>
-                            <td>Callback to invoke when all items are moved to the target list.</td>
-                        </tr>
-                        <tr>
-                            <td>move-to-source</td>
-                            <td>
-                                event.originalEvent: browser event <br />
-                                event.items: Moved items
-                            </td>
-                            <td>Callback to invoke when one or more items are moved to the source list.</td>
-                        </tr>
-                        <tr>
-                            <td>move-all-to-source</td>
-                            <td>
-                                event.originalEvent: browser event <br />
-                                event.items: Moved items
-                            </td>
-                            <td>Callback to invoke when all items are moved to the source list.</td>
-                        </tr>
-                        <tr>
-                            <td>selection-change</td>
-                            <td>
-                                event.originalEvent: browser event <br />
-                                event.value: Selected item
-                            </td>
-                            <td>Callback to invoke when one or more items are moved to the other list.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Events</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>reorder</td>
+                        <td>
+                            event.originalEvent: browser event <br />
+                            event.value: Ordered list <br />
+                            event.direction: Direction of the change; "up", "down", "bottom", "top" <br />
+                            event.listIndex: Index of the list that is ordered, 0 represents the source and 1 represents the target list.
+                        </td>
+                        <td>Callback to invoke when the list is reordered.</td>
+                    </tr>
+                    <tr>
+                        <td>move-to-target</td>
+                        <td>
+                            event.originalEvent: browser event <br />
+                            event.items: Moved items
+                        </td>
+                        <td>Callback to invoke when one or more items are moved to the target list.</td>
+                    </tr>
+                    <tr>
+                        <td>move-all-to-target</td>
+                        <td>
+                            event.originalEvent: browser event <br />
+                            event.items: Moved items
+                        </td>
+                        <td>Callback to invoke when all items are moved to the target list.</td>
+                    </tr>
+                    <tr>
+                        <td>move-to-source</td>
+                        <td>
+                            event.originalEvent: browser event <br />
+                            event.items: Moved items
+                        </td>
+                        <td>Callback to invoke when one or more items are moved to the source list.</td>
+                    </tr>
+                    <tr>
+                        <td>move-all-to-source</td>
+                        <td>
+                            event.originalEvent: browser event <br />
+                            event.items: Moved items
+                        </td>
+                        <td>Callback to invoke when all items are moved to the source list.</td>
+                    </tr>
+                    <tr>
+                        <td>selection-change</td>
+                        <td>
+                            event.originalEvent: browser event <br />
+                            event.value: Selected item
+                        </td>
+                        <td>Callback to invoke when one or more items are moved to the other list.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Slots</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>header</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>item</td>
-                            <td>
-                                item: Item of the component<br />
-                                index: Index of the item
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>sourceheader</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>targetheader</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>sourcecontrolsstart</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>sourcecontrolsend</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>movecontrolsstart</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>movecontrolsend</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>targetcontrolsstart</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>targetcontrolsend</td>
-                            <td>-</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Slots</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>header</td>
+                        <td>-</td>
+                    </tr>
+                    <tr>
+                        <td>item</td>
+                        <td>
+                            item: Item of the component<br />
+                            index: Index of the item
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>sourceheader</td>
+                        <td>-</td>
+                    </tr>
+                    <tr>
+                        <td>targetheader</td>
+                        <td>-</td>
+                    </tr>
+                    <tr>
+                        <td>sourcecontrolsstart</td>
+                        <td>-</td>
+                    </tr>
+                    <tr>
+                        <td>sourcecontrolsend</td>
+                        <td>-</td>
+                    </tr>
+                    <tr>
+                        <td>movecontrolsstart</td>
+                        <td>-</td>
+                    </tr>
+                    <tr>
+                        <td>movecontrolsend</td>
+                        <td>-</td>
+                    </tr>
+                    <tr>
+                        <td>targetcontrolsstart</td>
+                        <td>-</td>
+                    </tr>
+                    <tr>
+                        <td>targetcontrolsend</td>
+                        <td>-</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-picklist</td>
-                            <td>Container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-picklist-source-controls</td>
-                            <td>Container of source list buttons.</td>
-                        </tr>
-                        <tr>
-                            <td>p-picklist-target-controls</td>
-                            <td>Container of target list buttons.</td>
-                        </tr>
-                        <tr>
-                            <td>p-picklist-buttons</td>
-                            <td>Container of buttons.</td>
-                        </tr>
-                        <tr>
-                            <td>p-picklist-listwrapper</td>
-                            <td>Parent of a list element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-picklist-list</td>
-                            <td>List element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-picklist-item</td>
-                            <td>An item in the list.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-picklist</td>
+                        <td>Container element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-picklist-source-controls</td>
+                        <td>Container of source list buttons.</td>
+                    </tr>
+                    <tr>
+                        <td>p-picklist-target-controls</td>
+                        <td>Container of target list buttons.</td>
+                    </tr>
+                    <tr>
+                        <td>p-picklist-buttons</td>
+                        <td>Container of buttons.</td>
+                    </tr>
+                    <tr>
+                        <td>p-picklist-listwrapper</td>
+                        <td>Parent of a list element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-picklist-list</td>
+                        <td>List element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-picklist-item</td>
+                        <td>An item in the list.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc>
-    </ClientOnly>
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>
+            Value to describe the source listbox and target listbox can be provided with <i>sourceListProps</i> and <i>targetListProps</i> by passing <i>aria-labelledby</i> or <i>aria-label</i> props. The list elements has a <i>listbox</i> role with
+            the <i>aria-multiselectable</i> attribute. Each list item has an <i>option</i> role with <i>aria-selected</i> as their attributes.
+        </p>
+        <p>
+            Controls buttons are <i>button</i> elements with an <i>aria-label</i> that refers to the <i>aria.moveTop</i>, <i>aria.moveUp</i>, <i>aria.moveDown</i>, <i>aria.moveBottom</i>,<i>aria.moveToTarget</i>, <i>aria.moveAllToTarget</i>,
+            <i>aria.moveToSource</i> and <i>aria.moveAllToSource</i> properties of the <router-link to="/locale">locale</router-link> API by default, alternatively you may use <i>moveTopButtonProps</i>, <i>moveUpButtonProps</i>,
+            <i>moveDownButtonProps</i>, <i>moveToButtonProps</i>, <i>moveAllToButtonProps</i>, <i>moveFromButtonProps</i>, <i>moveFromButtonProps</i> <i>moveAllFromButtonProps</i> <i>moveToTargetProps</i>, <i>moveAllToTargetProps</i>,
+            <i>moveToSourceProps</i> and <i>moveAllToSourceProps</i> to customize the buttons like overriding the default <i>aria-label</i> attributes.
+        </p>
+        <pre v-code><code><template v-pre>
+&lt;span id="lb"&gt;Options&lt;/span&gt;
+&lt;PickList aria-labelledby="lb" /&gt;
+
+&lt;PickList aria-label="City" /&gt;
+
+</template></code></pre>
+        <h6>ListBox Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>tab</i>
+                        </td>
+                        <td>Moves focus to the first selected option, if there is none then first option receives the focus.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>up arrow</i>
+                        </td>
+                        <td>Moves focus to the previous option.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>down arrow</i>
+                        </td>
+                        <td>Moves focus to the next option.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>Toggles the selected state of the focused option.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>Toggles the selected state of the focused option.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>home</i>
+                        </td>
+                        <td>Moves focus to the first option.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>end</i>
+                        </td>
+                        <td>Moves focus to the last option.</td>
+                    </tr>
+                    <tr>
+                        <td><i>shift</i> + <i>down arrow</i></td>
+                        <td>Moves focus to the next option and toggles the selection state.</td>
+                    </tr>
+                    <tr>
+                        <td><i>shift</i> + <i>up arrow</i></td>
+                        <td>Moves focus to the previous option and toggles the selection state.</td>
+                    </tr>
+                    <tr>
+                        <td><i>shift</i> + <i>space</i></td>
+                        <td>Selects the items between the most recently selected option and the focused option.</td>
+                    </tr>
+                    <tr>
+                        <td><i>control</i> + <i>shift</i> + <i>home</i></td>
+                        <td>Selects the focused options and all the options up to the first one.</td>
+                    </tr>
+                    <tr>
+                        <td><i>control</i> + <i>shift</i> + <i>end</i></td>
+                        <td>Selects the focused options and all the options down to the first one.</td>
+                    </tr>
+                    <tr>
+                        <td><i>control</i> + <i>a</i></td>
+                        <td>Selects all options.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h6>Buttons Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>Executes button action.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>Executes button action.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
diff --git a/pages/picklist/index.vue b/pages/picklist/index.vue
index f1c7e684c..0a221eca1 100755
--- a/pages/picklist/index.vue
+++ b/pages/picklist/index.vue
@@ -16,7 +16,7 @@
                     <template #item="slotProps">
                         <div class="product-item">
                             <div class="image-container">
-                                <img :src="'/demo/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
+                                <img :src="'demo/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
                             </div>
                             <div class="product-list-detail">
                                 <h6 class="mb-2">{{ slotProps.item.name }}</h6>
@@ -38,8 +38,8 @@
 </template>
 
 <script>
-import PickListDoc from './PickListDoc';
 import ProductService from '../../service/ProductService';
+import PickListDoc from './PickListDoc';
 
 export default {
     data() {
diff --git a/pages/progressbar/ProgressBarDoc.vue b/pages/progressbar/ProgressBarDoc.vue
index 95d9df1eb..3a66a0b83 100755
--- a/pages/progressbar/ProgressBarDoc.vue
+++ b/pages/progressbar/ProgressBarDoc.vue
@@ -1,25 +1,24 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="ProgressBarDemo" :sources="sources" github="progressbar/ProgressBarDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="ProgressBarDemo" :sources="sources" github="progressbar/ProgressBarDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import ProgressBar from 'primevue/progressbar';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p>ProgressBar has two modes; "determinate" (default) and "indeterminate". In determinate mode, a value between 0 and 100 is required to display the progress.</p>
-            <pre v-code><code>
+        <h5>Getting Started</h5>
+        <p>ProgressBar has two modes; "determinate" (default) and "indeterminate". In determinate mode, a value between 0 and 100 is required to display the progress.</p>
+        <pre v-code><code>
 &lt;ProgressBar :value="value" /&gt;
 
 </code></pre>
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 data() {
 	return {
 		value: 0
@@ -28,95 +27,112 @@ data() {
 
 </code></pre>
 
-            <p>Indeterminate is simplly enabled using <i>mode</i> property.</p>
-            <pre v-code><code>
+        <p>Indeterminate is simplly enabled using <i>mode</i> property.</p>
+        <pre v-code><code>
 &lt;ProgressBar mode="indeterminate"/&gt;
 
 </code></pre>
 
-            <h5>Slot</h5>
-            <p>A custom label can be placed inside the progress bar via the default slot.</p>
-            <pre v-code><code><template v-pre>
+        <h5>Slot</h5>
+        <p>A custom label can be placed inside the progress bar via the default slot.</p>
+        <pre v-code><code><template v-pre>
 &lt;ProgressBar :value="value"&gt;
     Percent Complete: &#123;&#123;value&#125;&#125;%
 &lt;/ProgressBar&gt;
 </template>
 </code></pre>
 
-            <h5>Properties</h5>
-            <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>value</td>
-                            <td>number</td>
-                            <td>null</td>
-                            <td>Current value of the progress.</td>
-                        </tr>
-                        <tr>
-                            <td>mode</td>
-                            <td>string</td>
-                            <td>determinate</td>
-                            <td>Defines the mode of the progress, valid values are "determinate" and "indeterminate".</td>
-                        </tr>
-                        <tr>
-                            <td>showValue</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether to display the progress bar value.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>value</td>
+                        <td>number</td>
+                        <td>null</td>
+                        <td>Current value of the progress.</td>
+                    </tr>
+                    <tr>
+                        <td>mode</td>
+                        <td>string</td>
+                        <td>determinate</td>
+                        <td>Defines the mode of the progress, valid values are "determinate" and "indeterminate".</td>
+                    </tr>
+                    <tr>
+                        <td>showValue</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Whether to display the progress bar value.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-progressbar</td>
-                            <td>Container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-progressbar-determinate</td>
-                            <td>Container element of a determinate progressbar.</td>
-                        </tr>
-                        <tr>
-                            <td>p-progressbar-indeterminate</td>
-                            <td>Container element of an indeterminate progressbar.</td>
-                        </tr>
-                        <tr>
-                            <td>p-progressbar-value</td>
-                            <td>Element whose width changes according to value.</td>
-                        </tr>
-                        <tr>
-                            <td>p-progressbar-label</td>
-                            <td>Label element that displays the current value.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-progressbar</td>
+                        <td>Container element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-progressbar-determinate</td>
+                        <td>Container element of a determinate progressbar.</td>
+                    </tr>
+                    <tr>
+                        <td>p-progressbar-indeterminate</td>
+                        <td>Container element of an indeterminate progressbar.</td>
+                    </tr>
+                    <tr>
+                        <td>p-progressbar-value</td>
+                        <td>Element whose width changes according to value.</td>
+                    </tr>
+                    <tr>
+                        <td>p-progressbar-label</td>
+                        <td>Label element that displays the current value.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc>
-    </ClientOnly>
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>
+            ProgressBar components uses <i>progressbar</i> role along with <i>aria-valuemin</i>, <i>aria-valuemax</i> and <i>aria-valuenow</i> attributes. Value to describe the component can be defined using <i>aria-labelledby</i> and
+            <i>aria-label</i> props.
+        </p>
+
+        <pre v-code><code><template v-pre>
+&lt;span id="label_status /"&gt;
+&lt;ProgressBar aria-labelledby="label_status /"&gt;
+
+&lt;ProgressBar aria-label="Status /"&gt;
+</template>
+</code></pre>
+
+        <h6>Keyboard Support</h6>
+        <p>Not applicable.</p>
+
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
@@ -202,7 +218,7 @@ export default {
         onBeforeUnmount(() => {
             endProgress();
         })
-        
+
         const value1 = ref(0);
         const value2 = ref(50);
         const interval = ref(null);
@@ -250,7 +266,7 @@ export default {
                 onBeforeUnmount(() => {
                     endProgress();
                 })
-                
+
                 const value1 = ref(0);
                 const value2 = ref(50);
                 const interval = ref(null);
diff --git a/pages/progressbar/index.vue b/pages/progressbar/index.vue
index 70366877c..99ef03745 100755
--- a/pages/progressbar/index.vue
+++ b/pages/progressbar/index.vue
@@ -36,13 +36,21 @@ export default {
         };
     },
     interval: null,
+    mounted() {
+        this.startProgress();
+    },
+    beforeUnmount() {
+        this.endProgress();
+    },
     methods: {
         startProgress() {
             this.interval = setInterval(() => {
                 let newValue = this.value1 + Math.floor(Math.random() * 10) + 1;
+
                 if (newValue >= 100) {
                     newValue = 100;
                 }
+
                 this.value1 = newValue;
             }, 2000);
         },
@@ -51,12 +59,6 @@ export default {
             this.interval = null;
         }
     },
-    mounted() {
-        this.startProgress();
-    },
-    beforeUnmount() {
-        this.endProgress();
-    },
     components: {
         ProgressBarDoc: ProgressBarDoc
     }
diff --git a/pages/progressspinner/ProgressSpinnerDoc.vue b/pages/progressspinner/ProgressSpinnerDoc.vue
index bb3265e90..4dc85b1f3 100755
--- a/pages/progressspinner/ProgressSpinnerDoc.vue
+++ b/pages/progressspinner/ProgressSpinnerDoc.vue
@@ -1,29 +1,28 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="ProgressSpinnerDemo" :sources="sources" github="progressspinner/ProgressSpinnerDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="ProgressSpinnerDemo" :sources="sources" github="progressspinner/ProgressSpinnerDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import ProgressSpinner from 'primevue/progressspinner';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/progressspinner/progressspinner.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p>ProgressSpinner is defined using ProgressSpinner element.</p>
-            <pre v-code><code><template v-pre>
+        <h5>Getting Started</h5>
+        <p>ProgressSpinner is defined using ProgressSpinner element.</p>
+        <pre v-code><code><template v-pre>
 &lt;ProgressSpinner /&gt;
 </template>
 </code></pre>
 
-            <h5>Colors</h5>
-            <p>Colors of the spinner can be changed by overriding the keyframes animation.</p>
-            <pre v-code.css><code>
+        <h5>Colors</h5>
+        <p>Colors of the spinner can be changed by overriding the keyframes animation.</p>
+        <pre v-code.css><code>
 @keyframes p-progress-spinner-color {
     100%,
     0% {
@@ -43,72 +42,82 @@ import ProgressSpinner from 'primevue/progressspinner';
 
 </code></pre>
 
-            <h5>Properties</h5>
-            <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>strokeWidth</td>
-                            <td>string</td>
-                            <td>2</td>
-                            <td>Width of the circle stroke.</td>
-                        </tr>
-                        <tr>
-                            <td>fill</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Color for the background of the circle.</td>
-                        </tr>
-                        <tr>
-                            <td>animationDuration</td>
-                            <td>string</td>
-                            <td>2s</td>
-                            <td>Duration of the rotate animation.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>strokeWidth</td>
+                        <td>string</td>
+                        <td>2</td>
+                        <td>Width of the circle stroke.</td>
+                    </tr>
+                    <tr>
+                        <td>fill</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Color for the background of the circle.</td>
+                    </tr>
+                    <tr>
+                        <td>animationDuration</td>
+                        <td>string</td>
+                        <td>2s</td>
+                        <td>Duration of the rotate animation.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-progress-spinner</td>
-                            <td>Container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-progress-circle</td>
-                            <td>SVG element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-progress-path</td>
-                            <td>Circle element.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-progress-spinner</td>
+                        <td>Container element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-progress-circle</td>
+                        <td>SVG element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-progress-path</td>
+                        <td>Circle element.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc>
-    </ClientOnly>
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>ProgressSpinner components uses <i>progressbar</i> role. Value to describe the component can be defined using <i>aria-labelledby</i> and <i>aria-label</i> props.</p>
+        <pre v-code><code><template v-pre>
+&lt;ProgressSpinner aria-label="Loading" /&gt;
+
+</template></code></pre>
+
+        <h6>Keyboard Support</h6>
+        <p>Component does not include any interactive elements.</p>
+
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
@@ -122,17 +131,13 @@ export default {
 <template>
     <div>
         <h5>Basic</h5>
-        <ProgressSpinner />
+        <ProgressSpinner aria-label="Basic ProgressSpinner" />
 
         <h5>Custom</h5>
-        <ProgressSpinner style="width:50px;height:50px" strokeWidth="8" fill="var(--surface-ground)" animationDuration=".5s"/>
+        <ProgressSpinner style="width:50px;height:50px" strokeWidth="8" fill="var(--surface-ground)" animationDuration=".5s" aria-label="Custom ProgressSpinner"/>
     </div>
 </template>
 
-<script>
-export default {
-}
-<\\/script>
 `
                 },
                 'composition-api': {
@@ -141,27 +146,24 @@ export default {
 <template>
     <div>
         <h5>Basic</h5>
-        <ProgressSpinner />
+        <ProgressSpinner aria-label="Basic ProgressSpinner" />
 
         <h5>Custom</h5>
-        <ProgressSpinner style="width:50px;height:50px" strokeWidth="8" fill="var(--surface-ground)" animationDuration=".5s"/>
+        <ProgressSpinner style="width:50px;height:50px" strokeWidth="8" fill="var(--surface-ground)" animationDuration=".5s" aria-label="Custom ProgressSpinner"/>
     </div>
 </template>
 
-<script>
-export default {
-}
-<\\/script>`
+`
                 },
                 'browser-source': {
                     tabName: 'Browser Source',
                     imports: `<script src="https://unpkg.com/primevue@^3/progressspinner/progressspinner.min.js"><\\/script>`,
                     content: `<div id="app">
             <h5>Basic</h5>
-            <p-progressspinner></p-progressspinner>
+            <p-progressspinner aria-label="Basic ProgressSpinner"></p-progressspinner>
 
             <h5>Custom</h5>
-            <p-progressspinner style="width:50px;height:50px" stroke-width="8" fill="var(--surface-ground)" animation-duration=".5s"></p-progressspinner>
+            <p-progressspinner style="width:50px;height:50px" stroke-width="8" fill="var(--surface-ground)" animation-duration=".5s" aria-label="Custom ProgressSpinner"></p-progressspinner>
         </div>
 
         <script type="module">
diff --git a/pages/progressspinner/index.vue b/pages/progressspinner/index.vue
index 001c9eb70..8db65a2a5 100755
--- a/pages/progressspinner/index.vue
+++ b/pages/progressspinner/index.vue
@@ -11,10 +11,10 @@
         <div class="content-section implementation">
             <div class="card">
                 <h5>Basic</h5>
-                <ProgressSpinner />
+                <ProgressSpinner aria-label="Basic ProgressSpinner" />
 
                 <h5>Custom</h5>
-                <ProgressSpinner style="width: 50px; height: 50px" strokeWidth="8" fill="var(--surface-ground)" animationDuration=".5s" />
+                <ProgressSpinner style="width: 50px; height: 50px" strokeWidth="8" fill="var(--surface-ground)" animationDuration=".5s" aria-label="Custom ProgressSpinner" />
             </div>
         </div>
 
diff --git a/pages/radiobutton/RadioButtonDoc.vue b/pages/radiobutton/RadioButtonDoc.vue
index fee397558..7ca0e347f 100755
--- a/pages/radiobutton/RadioButtonDoc.vue
+++ b/pages/radiobutton/RadioButtonDoc.vue
@@ -1,27 +1,26 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="RadioButtonDemo" :sources="sources" github="radiobutton/RadioButtonDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="RadioButtonDemo" :sources="sources" github="radiobutton/RadioButtonDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import RadioButton from 'primevue/radiobutton';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/radiobutton/radiobutton.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p>Two-way value binding is defined using the standard v-model directive.</p>
-            <pre v-code><code>
+        <h5>Getting Started</h5>
+        <p>Two-way value binding is defined using the standard v-model directive.</p>
+        <pre v-code><code>
 &lt;RadioButton name="city" value="Chicago" v-model="city" /&gt;
 &lt;RadioButton name="city" value="Los Angeles" v-model="city" /&gt;
 
 </code></pre>
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 export default {
 	data() {
 		return {
@@ -31,8 +30,8 @@ export default {
 }
 
 </code></pre>
-            <p>As model is two-way binding enabled, giving a default value to the model is enough to display a radio button as checked by default.</p>
-            <pre v-code.script><code>
+        <p>As model is two-way binding enabled, giving a default value to the model is enough to display a radio button as checked by default.</p>
+        <pre v-code.script><code>
 export default {
 	data() {
 		return {
@@ -43,132 +42,144 @@ export default {
 
 </code></pre>
 
-            <h5>Properties</h5>
-            <p>Any valid attribute is passed to the root element implicitly, extended properties are as follows;</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>value</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Value of the checkbox.</td>
-                        </tr>
-                        <tr>
-                            <td>modelValue</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Value binding of the checkbox.</td>
-                        </tr>
-                        <tr>
-                            <td>name</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Name of the input element.</td>
-                        </tr>
-                        <tr>
-                            <td>disabled</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When present, it specifies that the element should be disabled.</td>
-                        </tr>
-                        <tr>
-                            <td>inputId</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the component input field.</td>
-                        </tr>
-                        <tr>
-                            <td>inputClass</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the input field.</td>
-                        </tr>
-                        <tr>
-                            <td>inputStyle</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Inline style of the input field.</td>
-                        </tr>
-                        <tr>
-                            <td>inputProps</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <p>Any valid attribute is passed to the root element implicitly, extended properties are as follows;</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>value</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Value of the checkbox.</td>
+                    </tr>
+                    <tr>
+                        <td>modelValue</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Value binding of the checkbox.</td>
+                    </tr>
+                    <tr>
+                        <td>name</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Name of the input element.</td>
+                    </tr>
+                    <tr>
+                        <td>disabled</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When present, it specifies that the element should be disabled.</td>
+                    </tr>
+                    <tr>
+                        <td>inputId</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the component input field.</td>
+                    </tr>
+                    <tr>
+                        <td>inputClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the input field.</td>
+                    </tr>
+                    <tr>
+                        <td>inputStyle</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Inline style of the input field.</td>
+                    </tr>
+                    <tr>
+                        <td>inputProps</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.</td>
+                    </tr>
+                    <tr>
+                        <td>aria-label</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Defines a string value that labels an interactive element.</td>
+                    </tr>
+                    <tr>
+                        <td>aria-labelledby</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Events</h5>
-            <p>Any valid event such as focus and blur.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>click</td>
-                            <td>-</td>
-                            <td>Callback to invoke on radio button click.</td>
-                        </tr>
-                        <tr>
-                            <td>change</td>
-                            <td>-</td>
-                            <td>Callback to invoke on radio button value change.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Events</h5>
+        <p>Any valid event such as focus and blur.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>click</td>
+                        <td>-</td>
+                        <td>Callback to invoke on radio button click.</td>
+                    </tr>
+                    <tr>
+                        <td>change</td>
+                        <td>-</td>
+                        <td>Callback to invoke on radio button value change.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-radiobutton</td>
-                            <td>Container element</td>
-                        </tr>
-                        <tr>
-                            <td>p-radiobutton-box</td>
-                            <td>Container of icon.</td>
-                        </tr>
-                        <tr>
-                            <td>p-radiobutton-icon</td>
-                            <td>Icon element.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-radiobutton</td>
+                        <td>Container element</td>
+                    </tr>
+                    <tr>
+                        <td>p-radiobutton-box</td>
+                        <td>Container of icon.</td>
+                    </tr>
+                    <tr>
+                        <td>p-radiobutton-icon</td>
+                        <td>Icon element.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Accessibility</h5>
-            <h6>Screen Reader</h6>
-            <p>
-                RadioButton component uses a hidden native radio button element internally that is only visible to screen readers. Value to describe the component can either be provided via <i>label</i> tag combined with <i>id</i> prop or using
-                <i>aria-labelledby</i>, <i>aria-label</i> props.
-            </p>
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>
+            RadioButton component uses a hidden native radio button element internally that is only visible to screen readers. Value to describe the component can either be provided via <i>label</i> tag combined with <i>id</i> prop or using
+            <i>aria-labelledby</i>, <i>aria-label</i> props.
+        </p>
 
-            <pre v-code><code>
+        <pre v-code><code>
 &lt;label for="rb1"&gt;One&lt;/label&gt;
 &lt;RadioButton inputId="rb1" /&gt;
 
@@ -179,50 +190,49 @@ export default {
 
 </code></pre>
 
-            <h6>Keyboard Support</h6>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Key</th>
-                            <th>Function</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td><i>tab</i></td>
-                            <td>Moves focus to the checked radio button, if there is none within the group then first radio button receives the focus.</td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <span class="inline-flex flex-column">
-                                    <i class="mb-1">left arrow</i>
-                                    <i>up arrow</i>
-                                </span>
-                            </td>
-                            <td>Moves focus to the previous radio button, if there is none then last radio button receives the focus.</td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <span class="inline-flex flex-column">
-                                    <i class="mb-1">right arrow</i>
-                                    <i>down arrow</i>
-                                </span>
-                            </td>
-                            <td>Moves focus to the next radio button, if there is none then first radio button receives the focus.</td>
-                        </tr>
-                        <tr>
-                            <td><i>space</i></td>
-                            <td>If the focused radio button is unchecked, changes the state to checked.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h6>Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>tab</i></td>
+                        <td>Moves focus to the checked radio button, if there is none within the group then first radio button receives the focus.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <span class="inline-flex flex-column">
+                                <i class="mb-1">left arrow</i>
+                                <i>up arrow</i>
+                            </span>
+                        </td>
+                        <td>Moves focus to the previous radio button, if there is none then last radio button receives the focus.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <span class="inline-flex flex-column">
+                                <i class="mb-1">right arrow</i>
+                                <i>down arrow</i>
+                            </span>
+                        </td>
+                        <td>Moves focus to the next radio button, if there is none then first radio button receives the focus.</td>
+                    </tr>
+                    <tr>
+                        <td><i>space</i></td>
+                        <td>If the focused radio button is unchecked, changes the state to checked.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc>
-    </ClientOnly>
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
diff --git a/pages/radiobutton/index.vue b/pages/radiobutton/index.vue
index 036d2566b..4f6530ed7 100755
--- a/pages/radiobutton/index.vue
+++ b/pages/radiobutton/index.vue
@@ -12,25 +12,25 @@
             <div class="card">
                 <h5>Basic</h5>
                 <div class="field-radiobutton">
-                    <RadioButton inputId="city1" name="city" value="Chicago" v-model="city" />
+                    <RadioButton v-model="city" inputId="city1" name="city" value="Chicago" />
                     <label for="city1">Chicago</label>
                 </div>
                 <div class="field-radiobutton">
-                    <RadioButton inputId="city2" name="city" value="Los Angeles" v-model="city" />
+                    <RadioButton v-model="city" inputId="city2" name="city" value="Los Angeles" />
                     <label for="city2">Los Angeles</label>
                 </div>
                 <div class="field-radiobutton">
-                    <RadioButton inputId="city3" name="city" value="New York" v-model="city" />
+                    <RadioButton v-model="city" inputId="city3" name="city" value="New York" />
                     <label for="city3">New York</label>
                 </div>
                 <div class="field-radiobutton">
-                    <RadioButton inputId="city4" name="city" value="San Francisco" v-model="city" />
+                    <RadioButton v-model="city" inputId="city4" name="city" value="San Francisco" />
                     <label for="city4">San Francisco</label>
                 </div>
 
                 <h5>Dynamic Values, Preselection, Value Binding and Disabled Option</h5>
                 <div v-for="category of categories" :key="category.key" class="field-radiobutton">
-                    <RadioButton :inputId="category.key" name="category" :value="category.name" v-model="selectedCategory" :disabled="category.key === 'R'" />
+                    <RadioButton v-model="selectedCategory" :inputId="category.key" name="category" :value="category.name" :disabled="category.key === 'R'" />
                     <label :for="category.key">{{ category.name }}</label>
                 </div>
             </div>
diff --git a/pages/rating/RatingDoc.vue b/pages/rating/RatingDoc.vue
index 1bbb707c3..bd8a67421 100755
--- a/pages/rating/RatingDoc.vue
+++ b/pages/rating/RatingDoc.vue
@@ -1,199 +1,263 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="RatingDemo" :sources="sources" github="rating/RatingDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="RatingDemo" :sources="sources" github="rating/RatingDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import Rating from 'primevue/rating';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/rating/rating.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p>Two-way value binding is defined using v-model.</p>
-            <pre v-code><code>
+        <h5>Getting Started</h5>
+        <p>Two-way value binding is defined using v-model.</p>
+        <pre v-code><code>
 &lt;Rating v-model="val" /&gt;
 
 </code></pre>
 
-            <h5>Number of Stars</h5>
-            <p>Number of stars to display is defined with <i>stars</i> property, default is 5.</p>
-            <pre v-code><code>
+        <h5>Number of Stars</h5>
+        <p>Number of stars to display is defined with <i>stars</i> property, default is 5.</p>
+        <pre v-code><code>
 &lt;Rating v-model="val" :stars="7"/&gt;
 
 </code></pre>
 
-            <h5>Cancel</h5>
-            <p>A cancel icon is displayed to reset the value by default, set <i>cancel</i> as false to remove this option.</p>
-            <pre v-code><code>
+        <h5>Cancel</h5>
+        <p>A cancel icon is displayed to reset the value by default, set <i>cancel</i> as false to remove this option.</p>
+        <pre v-code><code>
 &lt;Rating v-model="val" :cancel="false" /&gt;
 
 </code></pre>
 
-            <h5>Properties</h5>
-            <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>modelValue</td>
-                            <td>number</td>
-                            <td>null</td>
-                            <td>Value of the rating.</td>
-                        </tr>
-                        <tr>
-                            <td>name</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Name of the element.</td>
-                        </tr>
-                        <tr>
-                            <td>disabled</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When present, it specifies that the element should be disabled.</td>
-                        </tr>
-                        <tr>
-                            <td>readonly</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When present, it specifies that component is read-only.</td>
-                        </tr>
-                        <tr>
-                            <td>stars</td>
-                            <td>number</td>
-                            <td>5</td>
-                            <td>Number of stars.</td>
-                        </tr>
-                        <tr>
-                            <td>cancel</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>When specified a cancel icon is displayed to allow clearing the value.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Templating</h5>
+        <p>Templating allows customizing the content where the icon instance is available as the implicit variable.</p>
+        <pre v-code><code><template v-pre>
+&lt;Rating :modelValue="3">
+    &lt;template #cancelicon&gt;
+        &lt;img src="demo/images/rating/cancel.png" height="24" width="24"&gt;
+    &lt;/template&gt;
+    &lt;template #onicon&gt;
+        &lt;img src="demo/images/rating/custom-onicon.png" height="24" width="24"&gt;
+    &lt;/template&gt;
+    &lt;template #officon&gt;
+        &lt;img src="demo/images/rating/custom-officon.png" height="24" width="24"&gt;
+    &lt;/template&gt;
+&lt;/Rating&gt;
 
-            <h5>Events</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>change</td>
-                            <td>
-                                event.originalEvent: Original event <br />
-                                event.value: Selected option value
-                            </td>
-                            <td>Callback to invoke on value change.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+</template>
+</code></pre>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-rating</td>
-                            <td>Container element</td>
-                        </tr>
-                        <tr>
-                            <td>p-rating-star</td>
-                            <td>Star element</td>
-                        </tr>
-                        <tr>
-                            <td>p-rating-star-on</td>
-                            <td>Selected star element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-rating-cancel</td>
-                            <td>Cancel icon.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>modelValue</td>
+                        <td>number</td>
+                        <td>null</td>
+                        <td>Value of the rating.</td>
+                    </tr>
+                    <tr>
+                        <td>disabled</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When present, it specifies that the element should be disabled.</td>
+                    </tr>
+                    <tr>
+                        <td>readonly</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When present, it specifies that component is read-only.</td>
+                    </tr>
+                    <tr>
+                        <td>stars</td>
+                        <td>number</td>
+                        <td>5</td>
+                        <td>Number of stars.</td>
+                    </tr>
+                    <tr>
+                        <td>cancel</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>When specified a cancel icon is displayed to allow clearing the value.</td>
+                    </tr>
+                    <tr>
+                        <td>onIcon</td>
+                        <td>string</td>
+                        <td>pi pi-star</td>
+                        <td>Icon for the on state.</td>
+                    </tr>
+                    <tr>
+                        <td>offIcon</td>
+                        <td>string</td>
+                        <td>pi pi-star-fill</td>
+                        <td>Icon for the off state.</td>
+                    </tr>
+                    <tr>
+                        <td>cancelIcon</td>
+                        <td>string</td>
+                        <td>pi pi-ban</td>
+                        <td>Icon for the cancelable state.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Accessibility</h5>
-            <h6>Screen Reader</h6>
-            <p>
-                Rating component internally uses radio buttons that are only visible to screen readers. The value to read for item is retrieved from the <nuxt-link to="/locale">locale</nuxt-link> API via <i>star</i> and <i>stars</i> of the
-                <i>aria</i> property.
-            </p>
+        <h5>Events</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>change</td>
+                        <td>
+                            event.originalEvent: Original event <br />
+                            event.value: Selected option value
+                        </td>
+                        <td>Callback to invoke on value change.</td>
+                    </tr>
+                    <tr>
+                        <td>focus</td>
+                        <td>event</td>
+                        <td>Callback to invoke when the component receives focus.</td>
+                    </tr>
+                    <tr>
+                        <td>blur</td>
+                        <td>event</td>
+                        <td>Callback to invoke when the component loses focus.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h6>Keyboard Support</h6>
-            <p>Keyboard interaction is derived from the native browser handling of radio buttons in a group.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Key</th>
-                            <th>Function</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td><i>tab</i></td>
-                            <td>Moves focus to the star representing the value, if there is none then first star receives the focus.</td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <span class="inline-flex flex-column">
-                                    <i class="mb-1">left arrow</i>
-                                    <i>up arrow</i>
-                                </span>
-                            </td>
-                            <td>Moves focus to the previous star, if there is none then last radio button receives the focus.</td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <span class="inline-flex flex-column">
-                                    <i class="mb-1">right arrow</i>
-                                    <i>down arrow</i>
-                                </span>
-                            </td>
-                            <td>Moves focus to the next star, if there is none then first star receives the focus.</td>
-                        </tr>
-                        <tr>
-                            <td><i>space</i></td>
-                            <td>If the focused star does not represent the value, changes the value to the star value.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Slots</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>cancelicon</td>
+                        <td>-</td>
+                    </tr>
+                    <tr>
+                        <td>onicon</td>
+                        <td>value: Item value</td>
+                    </tr>
+                    <tr>
+                        <td>officon</td>
+                        <td>value: Item value</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc>
-    </ClientOnly>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-rating</td>
+                        <td>Container element</td>
+                    </tr>
+                    <tr>
+                        <td>p-rating-item</td>
+                        <td>Each item element</td>
+                    </tr>
+                    <tr>
+                        <td>p-rating-item-active</td>
+                        <td>Selected item elements.</td>
+                    </tr>
+                    <tr>
+                        <td>p-rating-cancel-item</td>
+                        <td>Cancel item element.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>
+            Rating component internally uses radio buttons that are only visible to screen readers. The value to read for item is retrieved from the <router-link to="/locale">locale</router-link> API via <i>star</i> and <i>stars</i> of the
+            <i>aria</i> property.
+        </p>
+
+        <h6>Keyboard Support</h6>
+        <p>Keyboard interaction is derived from the native browser handling of radio buttons in a group.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>tab</i></td>
+                        <td>Moves focus to the star representing the value, if there is none then first star receives the focus.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <span class="inline-flex flex-column">
+                                <i class="mb-1">left arrow</i>
+                                <i>up arrow</i>
+                            </span>
+                        </td>
+                        <td>Moves focus to the previous star, if there is none then last radio button receives the focus.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <span class="inline-flex flex-column">
+                                <i class="mb-1">right arrow</i>
+                                <i>down arrow</i>
+                            </span>
+                        </td>
+                        <td>Moves focus to the next star, if there is none then first star receives the focus.</td>
+                    </tr>
+                    <tr>
+                        <td><i>space</i></td>
+                        <td>If the focused star does not represent the value, changes the value to the star value.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
@@ -207,16 +271,32 @@ export default {
 <template>
     <div>
         <h5>Basic {{val1}}</h5>
-        <Rating v-model="val1" name="basic" />
+        <Rating v-model="val1" />
 
         <h5>Without Cancel</h5>
-        <Rating v-model="val2" :cancel="false" name="cancel" />
+        <Rating v-model="val2" :cancel="false" />
 
         <h5>ReadOnly</h5>
-        <Rating :modelValue="5" :readonly="true" :stars="10" :cancel="false" name="readonly" />
+        <Rating :modelValue="5" :readonly="true" :stars="10" :cancel="false" />
 
         <h5>Disabled</h5>
-        <Rating :modelValue="8" :disabled="true" :stars="10" name="disabled" />
+        <Rating :modelValue="8" :disabled="true" :stars="10" />
+
+        <h5>Custom Icons</h5>
+        <Rating v-model="val3" :stars="5" onIcon="pi pi-heart-fill" offIcon="pi pi-heart" cancelIcon="pi pi-times" />
+
+        <h5>Templating</h5>
+        <Rating v-model="val4">
+            <template #cancelicon>
+                <img src="demo/images/rating/cancel.png" @error="(e) => e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'" height="24" width="24"/>
+            </template>
+            <template #onicon>
+                <img src="demo/images/rating/custom-onicon.png" @error="(e) => e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'" height="24" width="24"  />
+            </template>
+            <template #officon>
+                <img src="demo/images/rating/custom-officon.png" @error="(e) => e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'" height="24" width="24"  />
+            </template>
+        </Rating>
     </div>
 </template>
 
@@ -226,10 +306,13 @@ export default {
         return {
             val1: null,
             val2: 3,
+            val3: 2,
+            val4: 2
         }
     }
 }
 <\\/script>
+
 `
                 },
                 'composition-api': {
@@ -238,16 +321,32 @@ export default {
 <template>
     <div>
         <h5>Basic {{val1}}</h5>
-        <Rating v-model="val1" name="basic" />
+        <Rating v-model="val1" />
 
         <h5>Without Cancel</h5>
-        <Rating v-model="val2" :cancel="false" name="cancel" />
+        <Rating v-model="val2" :cancel="false" />
 
         <h5>ReadOnly</h5>
-        <Rating :modelValue="5" :readonly="true" :stars="10" :cancel="false" name="readonly" />
+        <Rating :modelValue="5" :readonly="true" :stars="10" :cancel="false" />
 
         <h5>Disabled</h5>
-        <Rating :modelValue="8" :disabled="true" :stars="10" name="disabled" />
+        <Rating :modelValue="8" :disabled="true" :stars="10" />
+
+        <h5>Custom Icons</h5>
+        <Rating v-model="val3" :stars="5" onIcon="pi pi-heart-fill" offIcon="pi pi-heart" cancelIcon="pi pi-times" />
+
+        <h5>Templating</h5>
+        <Rating v-model="val4">
+            <template #cancelicon>
+                <img src="demo/images/rating/cancel.png" @error="(e) => e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'" height="24" width="24"/>
+            </template>
+            <template #onicon>
+                <img src="demo/images/rating/custom-onicon.png" @error="(e) => e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'" height="24" width="24"  />
+            </template>
+            <template #officon>
+                <img src="demo/images/rating/custom-officon.png" @error="(e) => e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'" height="24" width="24"  />
+            </template>
+        </Rating>
     </div>
 </template>
 
@@ -258,11 +357,14 @@ export default {
     setup() {
         const val1 = ref();
         const val2 = ref(3);
+        const val3 = ref(2);
+        const val4 = ref(2);
 
         return { val1, val2 }
     }
 }
 <\\/script>
+
 `
                 },
                 'browser-source': {
@@ -270,16 +372,32 @@ export default {
                     imports: `<script src="https://unpkg.com/primevue@^3/rating/rating.min.js"><\\/script>`,
                     content: `<div id="app">
             <h5>Basic {{val1}}</h5>
-            <p-rating v-model="val1" name="basic"></p-rating>
+            <p-rating v-model="val1"></p-rating>
 
             <h5>Without Cancel</h5>
-            <p-rating v-model="val2" :cancel="false" name="cancel"></p-rating>
+            <p-rating v-model="val2" :cancel="false"></p-rating>
 
             <h5>ReadOnly</h5>
-            <p-rating :modelValue="5" :readonly="true" :stars="10" :cancel="false" name="readonly"></p-rating>
+            <p-rating :modelValue="5" :readonly="true" :stars="10" :cancel="false"></p-rating>
 
             <h5>Disabled</h5>
-            <p-rating :modelValue="8" :disabled="true" :stars="10" name="disabled"></p-rating>
+            <p-rating :modelValue="8" :disabled="true" :stars="10"></p-rating>
+
+            <h5>Custom Icons</h5>
+            <p-rating v-model="val3" :stars="5" on-icon="pi pi-heart-fill" off-icon="pi pi-heart" cancel-icon="pi pi-times"></p-rating>
+
+            <h5>Templating</h5>
+            <p-rating v-model="val4">
+                <template #cancelicon>
+                    <img src="demo/images/rating/cancel.png" @error="(e) => e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'" height="24" width="24"/>
+                </template>
+                <template #onicon>
+                    <img src="demo/images/rating/custom-onicon.png" @error="(e) => e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'" height="24" width="24"  />
+                </template>
+                <template #officon>
+                    <img src="demo/images/rating/custom-officon.png" @error="(e) => e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'" height="24" width="24"  />
+                </template>
+            </p-rating>
         </div>
 
         <script type="module">
@@ -289,6 +407,8 @@ export default {
             setup() {
                 const val1 = ref();
                 const val2 = ref(3);
+                const val3 = ref(2);
+                const val4 = ref(2);
 
                 return { val1, val2 }
             },
@@ -301,6 +421,7 @@ export default {
             .use(primevue.config.default)
             .mount("#app");
         <\\/script>
+
 `
                 }
             }
diff --git a/pages/rating/index.vue b/pages/rating/index.vue
index 44337194b..fcf58f8f7 100755
--- a/pages/rating/index.vue
+++ b/pages/rating/index.vue
@@ -11,16 +11,32 @@
         <div class="content-section implementation">
             <div class="card">
                 <h5>Basic {{ val1 }}</h5>
-                <Rating v-model="val1" name="basic" />
+                <Rating v-model="val1" />
 
                 <h5>Without Cancel</h5>
-                <Rating v-model="val2" :cancel="false" name="cancel" />
+                <Rating v-model="val2" :cancel="false" />
 
                 <h5>ReadOnly</h5>
-                <Rating :modelValue="5" :readonly="true" :stars="10" :cancel="false" name="readonly" />
+                <Rating :modelValue="5" :readonly="true" :stars="10" :cancel="false" />
 
                 <h5>Disabled</h5>
-                <Rating :modelValue="8" :disabled="true" :stars="10" name="disabled" />
+                <Rating :modelValue="8" :disabled="true" :stars="10" />
+
+                <h5>Custom Icons</h5>
+                <Rating v-model="val3" :stars="5" onIcon="pi pi-heart-fill" offIcon="pi pi-heart" cancelIcon="pi pi-times" />
+
+                <h5>Templating</h5>
+                <Rating v-model="val4">
+                    <template #cancelicon>
+                        <img src="demo/images/rating/cancel.png" height="24" width="24" />
+                    </template>
+                    <template #onicon>
+                        <img src="demo/images/rating/custom-onicon.png" height="24" width="24" />
+                    </template>
+                    <template #officon>
+                        <img src="demo/images/rating/custom-officon.png" height="24" width="24" />
+                    </template>
+                </Rating>
             </div>
         </div>
 
@@ -35,7 +51,9 @@ export default {
     data() {
         return {
             val1: null,
-            val2: 3
+            val2: 3,
+            val3: 2,
+            val4: 2
         };
     },
     components: {
diff --git a/pages/ripple/RippleDoc.vue b/pages/ripple/RippleDoc.vue
index c4f2b8ead..d579ca2aa 100644
--- a/pages/ripple/RippleDoc.vue
+++ b/pages/ripple/RippleDoc.vue
@@ -1,10 +1,9 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="RippleDemo" :sources="sources" github="ripple/RippleDemo.vue">
-            <h5>Getting Started</h5>
-            <h5>Ripple</h5>
-            <p>Ripple is an optional animation for the supported components such as buttons. It is disabled by default and needs to be enabled at your app's entry file (e.g. main.js) during the PrimeVue setup.</p>
-            <pre v-code.script><code>
+    <AppDoc name="RippleDemo" :sources="sources" github="ripple/RippleDemo.vue">
+        <h5>Getting Started</h5>
+        <h5>Ripple</h5>
+        <p>Ripple is an optional animation for the supported components such as buttons. It is disabled by default and needs to be enabled at your app's entry file (e.g. main.js) during the PrimeVue setup.</p>
+        <pre v-code.script><code>
 import {createApp} from 'vue';
 import PrimeVue from 'primevue/config';
 const app = createApp(App);
@@ -13,75 +12,81 @@ app.use(PrimeVue, {ripple: true});
 
 </code></pre>
 
-            <p><span class="font-bold">Note</span>: That would be it to enable ripple on PrimeVue components, next section describes how to use it with your own components and standard elements.</p>
+        <p><span class="font-bold">Note</span>: That would be it to enable ripple on PrimeVue components, next section describes how to use it with your own components and standard elements.</p>
 
-            <h5>Directive</h5>
-            <p>Ripple is a directive that needs to be imported and configured with a name of your choice. Global configuration is done with the <i>app.directive</i> function.</p>
-            <pre v-code.script><code>
+        <h5>Directive</h5>
+        <p>Ripple is a directive that needs to be imported and configured with a name of your choice. Global configuration is done with the <i>app.directive</i> function.</p>
+        <pre v-code.script><code>
 import Ripple from 'primevue/ripple';
 
 app.directive('ripple', Ripple);
 
 </code></pre>
 
-            <p>Ripple can also be configured locally using the directives property of your component.</p>
-            <pre v-code.script><code>
+        <p>Ripple can also be configured locally using the directives property of your component.</p>
+        <pre v-code.script><code>
 directives: {
     'ripple': Ripple
 }
 
 </code></pre>
 
-            <p>Once the ripple is configured, add <i>.p-ripple</i> class to the target and attach the directive with the v- prefix.</p>
-            <pre v-code><code><template v-pre>
+        <p>Once the ripple is configured, add <i>.p-ripple</i> class to the target and attach the directive with the v- prefix.</p>
+        <pre v-code><code><template v-pre>
 &lt;div class="p-ripple" v-ripple&gt;&lt;/div&gt;
 </template>
 </code></pre>
 
-            <h5>Styling</h5>
-            <p>Default styling of the animation adds a shade of white. This can easily be customized using css that changes the color of <i>.p-ink</i> element.</p>
-            <pre v-code><code><template v-pre>
+        <h5>Styling</h5>
+        <p>Default styling of the animation adds a shade of white. This can easily be customized using css that changes the color of <i>.p-ink</i> element.</p>
+        <pre v-code><code><template v-pre>
 &lt;div class="p-ripple purple" v-ripple&gt;&lt;/div&gt;
 </template>
 </code></pre>
 
-            <pre v-code.css><code>
+        <pre v-code.css><code>
 .p-ripple.purple .p-ink {
     background: rgba(256,39,176,.3);
 }
 
 </code></pre>
 
-            <h5>Styling</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-ripple</td>
-                            <td>Host element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-ink</td>
-                            <td>Ripple element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-ink-active</td>
-                            <td>Ripple element during animating.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-ripple</td>
+                        <td>Host element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-ink</td>
+                        <td>Ripple element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-ink-active</td>
+                        <td>Ripple element during animating.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc>
-    </ClientOnly>
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>Ripple element has the <i>aria-hidden</i> attribute as true so that it gets ignored by the screen readers.</p>
+
+        <h6>Keyboard Support</h6>
+        <p>Component does not include any interactive elements.</p>
+
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
diff --git a/pages/ripple/index.vue b/pages/ripple/index.vue
index b4adced94..da391f7d2 100644
--- a/pages/ripple/index.vue
+++ b/pages/ripple/index.vue
@@ -10,10 +10,10 @@
 
         <div class="content-section implementation">
             <div class="card-container flex">
-                <div class="card primary-box p-ripple" v-ripple>Default</div>
-                <div class="card styled-box-green p-ripple" v-ripple>Green</div>
-                <div class="card styled-box-orange p-ripple" v-ripple>Orange</div>
-                <div class="card styled-box-purple p-ripple" v-ripple>Purple</div>
+                <div v-ripple class="card primary-box p-ripple">Default</div>
+                <div v-ripple class="card styled-box-green p-ripple">Green</div>
+                <div v-ripple class="card styled-box-orange p-ripple">Orange</div>
+                <div v-ripple class="card styled-box-purple p-ripple">Purple</div>
             </div>
         </div>
 
diff --git a/pages/roadmap/index.vue b/pages/roadmap/index.vue
new file mode 100644
index 000000000..c1d243f4b
--- /dev/null
+++ b/pages/roadmap/index.vue
@@ -0,0 +1,225 @@
+<template>
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>Roadmap</h1>
+                <p>
+                    At <a href="https://www.primetek.com.tr/">PrimeTek</a>, we are passionate about improving PrimeVue and would like to share our ideas for 2023 with the community. These are planned to be implemented in parellel to the regular
+                    maintenance work of the library involving review of issue tickets, PRs and PrimeVue PRO support. This page is updated on changes so please visit it to learn more about what is coming up next.
+                </p>
+            </div>
+        </div>
+
+        <div class="content-section">
+            <div class="overflow-auto">
+                <div style="min-width: 1200px">
+                    <div class="flex gap-3 mb-3">
+                        <div class="flex-shrink-0 w-14rem"></div>
+                        <div class="flex-1 bg-bluegray-500 text-white font-bold text-center p-3 text-xl border-round">Q1</div>
+                        <div class="flex-1 bg-bluegray-500 text-white font-bold text-center p-3 text-xl border-round">Q2</div>
+                        <div class="flex-1 bg-bluegray-500 text-white font-bold text-center p-3 text-xl border-round">Q3</div>
+                        <div class="flex-1 bg-bluegray-500 text-white font-bold text-center p-3 text-xl border-round">Q4</div>
+                    </div>
+                    <div class="flex flex-column gap-3">
+                        <div class="flex gap-3 border-bottom-1 surface-border pb-3">
+                            <div class="flex-shrink-0 p-3 bg-blue-500 text-white border-round font-bold text-lg flex align-items-center justify-content-center w-14rem">COMPONENTS</div>
+                            <div class="flex-1 flex gap-3 flex-column">
+                                <div class="p-3 surface-card border-round border-blue-500" style="border-left: 6px solid">
+                                    <h2 class="text-lg font-bold mt-0 mb-2">Accessibility</h2>
+                                    <p class="mt-0 mb-3 line-height-3">Finalize WCAG Level AA compliance for all components with screen reader and keyboard support.</p>
+                                    <div class="surface-200 border-round">
+                                        <div class="bg-blue-500 border-round" style="width: 90%; height: 4px"></div>
+                                    </div>
+                                </div>
+                                <div class="p-3 surface-card border-round border-blue-500" style="border-left: 6px solid">
+                                    <h2 class="text-lg font-bold mt-0 mb-2">Headless Mode</h2>
+                                    <p class="mt-0 mb-3 line-height-3">Design the implementation of Headless Mode to support libraries like Tailwind.</p>
+                                    <div class="surface-200 border-round">
+                                        <div class="bg-blue-500 border-round" style="width: 0%; height: 4px"></div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="flex-1 flex gap-3 flex-column">
+                                <div class="p-3 surface-card border-round border-blue-500" style="border-left: 6px solid">
+                                    <h2 class="text-lg font-bold mt-0 mb-2">Testing</h2>
+                                    <p class="mt-0 mb-3 line-height-3">Increase unit test coverage.</p>
+                                    <div class="surface-200 border-round">
+                                        <div class="bg-blue-500 border-round" style="width: 0%; height: 4px"></div>
+                                    </div>
+                                </div>
+                                <div class="p-3 surface-card border-round border-blue-500" style="border-left: 6px solid">
+                                    <h2 class="text-lg font-bold mt-0 mb-2">Headless Mode</h2>
+                                    <p class="mt-0 mb-3 line-height-3">Initate headless mode implementation for commonly used components.</p>
+                                    <div class="surface-200 border-round">
+                                        <div class="bg-blue-500 border-round" style="width: 0%; height: 4px"></div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="flex-1 flex gap-3 flex-column">
+                                <div class="p-3 surface-card border-round border-blue-500" style="border-left: 6px solid">
+                                    <h2 class="text-lg font-bold mt-0 mb-2">DragDrop Utils</h2>
+                                    <p class="mt-0 mb-3 line-height-3">Standalone Drag and Drop utilities that are also integrated within certain components e.g. Tree.</p>
+                                    <div class="surface-200 border-round">
+                                        <div class="bg-blue-500 border-round" style="width: 0%; height: 4px"></div>
+                                    </div>
+                                </div>
+                                <div class="p-3 surface-card border-round border-blue-500" style="border-left: 6px solid">
+                                    <h2 class="text-lg font-bold mt-0 mb-2">Full Calendar</h2>
+                                    <p class="mt-0 mb-3 line-height-3">New Full Calendar / Scheduler component.</p>
+                                    <div class="surface-200 border-round">
+                                        <div class="bg-blue-500 border-round" style="width: 0%; height: 4px"></div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="flex-1 flex gap-3 flex-column"></div>
+                        </div>
+                        <div class="flex gap-3 border-bottom-1 surface-border pb-3">
+                            <div class="flex-shrink-0 p-3 bg-indigo-500 text-white border-round font-bold text-lg flex align-items-center justify-content-center w-14rem">Figma UI Kit</div>
+                            <div class="flex-1 flex gap-3 flex-column">
+                                <div class="p-3 surface-card border-round border-indigo-500" style="border-left: 6px solid">
+                                    <h2 class="text-lg font-bold mt-0 mb-2">Tokens</h2>
+                                    <p class="mt-0 mb-3 line-height-3">Add support for Figma Tokens.</p>
+                                    <div class="surface-200 border-round">
+                                        <div class="bg-indigo-500 border-round" style="width: 0%; height: 4px"></div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="flex-1 flex gap-3 flex-column">
+                                <div class="p-3 surface-card border-round border-bluegray-500" style="border-left: 6px solid">
+                                    <h2 class="text-lg font-bold mt-0 mb-2">Theme Generator</h2>
+                                    <p class="mt-0 mb-3 line-height-3">Create a Figma Plugin to generate themes from Figma.</p>
+                                    <div class="surface-200 border-round">
+                                        <div class="bg-bluegray-500 border-round" style="width: 0%; height: 4px"></div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="flex-1 flex gap-3 flex-column"></div>
+                            <div class="flex-1 flex gap-3 flex-column"></div>
+                        </div>
+                        <div class="flex gap-3 border-bottom-1 surface-border pb-3">
+                            <div class="flex-shrink-0 p-3 bg-teal-500 text-white border-round font-bold text-lg flex align-items-center justify-content-center w-14rem">SHOWCASE</div>
+                            <div class="flex-1 flex gap-3 flex-column">
+                                <div class="p-3 surface-card border-round border-teal-500" style="border-left: 6px solid">
+                                    <h2 class="text-lg font-bold mt-0 mb-2">Nuxt</h2>
+                                    <p class="mt-0 mb-3 line-height-3">Migrate showcase application to Nuxt for SSR.</p>
+                                    <div class="surface-200 border-round">
+                                        <div class="bg-teal-500 border-round" style="width: 0%; height: 4px"></div>
+                                    </div>
+                                </div>
+                                <div class="p-3 surface-card border-round border-teal-500" style="border-left: 6px solid">
+                                    <h2 class="text-lg font-bold mt-0 mb-2">Demos</h2>
+                                    <p class="mt-0 mb-3 line-height-3">Standalone demos for each component feature instead of one demo page that demonstrates multiple features.</p>
+                                    <div class="surface-200 border-round">
+                                        <div class="bg-teal-500 border-round" style="width: 0%; height: 4px"></div>
+                                    </div>
+                                </div>
+                                <div class="p-3 surface-card border-round border-teal-500" style="border-left: 6px solid">
+                                    <h2 class="text-lg font-bold mt-0 mb-2">Documentation</h2>
+                                    <p class="mt-0 mb-3 line-height-3">New component API docs generated by TSDoc.</p>
+                                    <div class="surface-200 border-round">
+                                        <div class="bg-teal-500 border-round" style="width: 0%; height: 4px"></div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="flex-1 flex gap-3 flex-column"></div>
+                            <div class="flex-1 flex gap-3 flex-column"></div>
+                            <div class="flex-1 flex gap-3 flex-column"></div>
+                        </div>
+                        <div class="flex gap-3 border-bottom-1 surface-border pb-3">
+                            <div class="flex-shrink-0 p-3 bg-orange-500 text-white border-round font-bold text-lg flex align-items-center justify-content-center w-14rem">PrimeBlocks</div>
+                            <div class="flex-1 flex gap-3 flex-column">
+                                <div class="p-3 surface-card border-round border-orange-500" style="border-left: 6px solid">
+                                    <h2 class="text-lg font-bold mt-0 mb-2">New Blocks</h2>
+                                    <p class="mt-0 mb-3 line-height-3">30+ new UI Blocks.</p>
+                                    <div class="surface-200 border-round">
+                                        <div class="bg-orange-500 border-round" style="width: 0%; height: 4px"></div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="flex-1 flex gap-3 flex-column">
+                                <div class="p-3 surface-card border-round border-orange-500" style="border-left: 6px solid">
+                                    <h2 class="text-lg font-bold mt-0 mb-2">Blocks Update</h2>
+                                    <p class="mt-0 mb-3 line-height-3">More UI Blocks.</p>
+                                    <div class="surface-200 border-round">
+                                        <div class="bg-orange-500 border-round" style="width: 0%; height: 4px"></div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="flex-1 flex gap-3 flex-column">
+                                <div class="p-3 surface-card border-round border-orange-500" style="border-left: 6px solid">
+                                    <h2 class="text-lg font-bold mt-0 mb-2">Blocks Update</h2>
+                                    <p class="mt-0 mb-3 line-height-3">More UI Blocks.</p>
+                                    <div class="surface-200 border-round">
+                                        <div class="bg-orange-500 border-round" style="width: 0%; height: 4px"></div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="flex-1 flex gap-3 flex-column">
+                                <div class="p-3 surface-card border-round border-orange-500" style="border-left: 6px solid">
+                                    <h2 class="text-lg font-bold mt-0 mb-2">Blocks Update</h2>
+                                    <p class="mt-0 mb-3 line-height-3">More UI Blocks.</p>
+                                    <div class="surface-200 border-round">
+                                        <div class="bg-orange-500 border-round" style="width: 0%; height: 4px"></div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="flex gap-3 border-bottom-1 surface-border pb-3">
+                            <div class="flex-shrink-0 p-3 bg-pink-500 text-white border-round font-bold text-lg flex align-items-center justify-content-center w-14rem">Designer</div>
+                            <div class="flex-1 flex gap-3 flex-column">
+                                <div class="p-3 surface-card border-round border-pink-500" style="border-left: 6px solid">
+                                    <h2 class="text-lg font-bold mt-0 mb-2">New Free Theme</h2>
+                                    <p class="mt-0 mb-3 line-height-3">A brand new theme with dark mode alternative.</p>
+                                    <div class="surface-200 border-round">
+                                        <div class="bg-pink-500 border-round" style="width: 0%; height: 4px"></div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="flex-1 flex gap-3 flex-column">
+                                <div class="p-3 surface-card border-round border-pink-500" style="border-left: 6px solid">
+                                    <h2 class="text-lg font-bold mt-0 mb-2">Figma Plugin Compatibility</h2>
+                                    <p class="mt-0 mb-3 line-height-3">Online service to the Figma UI Kit to generate themes from Figma.</p>
+                                    <div class="surface-200 border-round">
+                                        <div class="bg-pink-500 border-round" style="width: 0%; height: 4px"></div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="flex-1 flex gap-3 flex-column"></div>
+                            <div class="flex-1 flex gap-3 flex-column"></div>
+                        </div>
+                        <div class="flex gap-3 border-bottom-1 surface-border pb-3">
+                            <div class="flex-shrink-0 p-3 bg-purple-500 text-white border-round font-bold text-lg flex align-items-center justify-content-center w-14rem">Templates</div>
+                            <div class="flex-1 flex gap-3 flex-column">
+                                <div class="p-3 surface-card border-round border-purple-500" style="border-left: 6px solid">
+                                    <h2 class="text-lg font-bold mt-0 mb-2">Apollo</h2>
+                                    <p class="mt-0 mb-3 line-height-3">Port Apollo from PrimeNG using Vite.</p>
+                                    <div class="surface-200 border-round">
+                                        <div class="bg-purple-500 border-round" style="width: 0%; height: 4px"></div>
+                                    </div>
+                                </div>
+                                <div class="p-3 surface-card border-round border-purple-500" style="border-left: 6px solid">
+                                    <h2 class="text-lg font-bold mt-0 mb-2">Migrate to Vite</h2>
+                                    <p class="mt-0 mb-3 line-height-3">Initiate migration of templates to Vite.</p>
+                                    <div class="surface-200 border-round">
+                                        <div class="bg-purple-500 border-round" style="width: 0%; height: 4px"></div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="flex-1 flex gap-3 flex-column">
+                                <div class="p-3 surface-card border-round border-purple-500" style="border-left: 6px solid">
+                                    <h2 class="text-lg font-bold mt-0 mb-2">Migrate to Vite</h2>
+                                    <p class="mt-0 mb-3 line-height-3">Continue migration of templates to Vite.</p>
+                                    <div class="surface-200 border-round">
+                                        <div class="bg-purple-500 border-round" style="width: 0%; height: 4px"></div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="flex-1 flex gap-3 flex-column"></div>
+                            <div class="flex-1 flex gap-3 flex-column"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/pages/scrollpanel/ScrollPanelDoc.vue b/pages/scrollpanel/ScrollPanelDoc.vue
index ebc691377..2a83e1772 100644
--- a/pages/scrollpanel/ScrollPanelDoc.vue
+++ b/pages/scrollpanel/ScrollPanelDoc.vue
@@ -1,38 +1,37 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="ScrollPanelDemo" :sources="sources" github="scrollpanel/ScrollPanelDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="ScrollPanelDemo" :sources="sources" github="scrollpanel/ScrollPanelDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import ScrollPanel from 'primevue/scrollpanel';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/scrollpanel/scrollpanel.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p>ScrollPanel usage is similar to any container element.</p>
-            <pre v-code><code>
+        <h5>Getting Started</h5>
+        <p>ScrollPanel usage is similar to any container element.</p>
+        <pre v-code><code>
 &lt;ScrollPanel style="width: 100%; height: 200px"&gt;
     content
 &lt;/ScrollPanel&gt;
 
 </code></pre>
 
-            <h5>Customization</h5>
-            <p>Look and feel can easily be customized, here is an example with custom scrollbars.</p>
-            <pre v-code><code>
+        <h5>Customization</h5>
+        <p>Look and feel can easily be customized, here is an example with custom scrollbars.</p>
+        <pre v-code><code>
 &lt;ScrollPanel style="width: 100%; height: 200px" class="custom"&gt;
     content
 &lt;/ScrollPanel&gt;
 
 </code></pre>
 
-            <pre v-code.css><code>
+        <pre v-code.css><code>
 .custom .p-scrollpanel-wrapper {
     border-right: 9px solid #f4f4f4;
 }
@@ -49,120 +48,114 @@ import ScrollPanel from 'primevue/scrollpanel';
 
 </code></pre>
 
-            <h5>Steps</h5>
-            <p>Step factor is 5px by default and can be customized with <i>step</i> option.</p>
-            <pre v-code><code>
+        <h5>Steps</h5>
+        <p>Step factor is 5px by default and can be customized with <i>step</i> option.</p>
+        <pre v-code><code>
 &lt;ScrollPanel style="width: 100%; height: 200px" :step="10"3&gt;
     content
 &lt;/ScrollPanel&gt;
 
 </code></pre>
 
-            <h5>Properties</h5>
-            <p>Any property such as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>step</td>
-                            <td>number</td>
-                            <td>5</td>
-                            <td>Step factor to scroll the content while pressing the arrow keys.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <p>Any property such as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>step</td>
+                        <td>number</td>
+                        <td>5</td>
+                        <td>Step factor to scroll the content while pressing the arrow keys.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-scrollpanel</td>
-                            <td>Container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-scrollpanel-wrapper</td>
-                            <td>Wrapper of content section.</td>
-                        </tr>
-                        <tr>
-                            <td>p-scrollpanel-content</td>
-                            <td>Content section.</td>
-                        </tr>
-                        <tr>
-                            <td>p-scrollpanel-bar</td>
-                            <td>Scrollbar handle.</td>
-                        </tr>
-                        <tr>
-                            <td>p-scrollpanel-bar-x</td>
-                            <td>Scrollbar handle of a horizontal bar.</td>
-                        </tr>
-                        <tr>
-                            <td>p-scrollpanel-bar-y</td>
-                            <td>Scrollbar handle of a vertical bar</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-scrollpanel</td>
+                        <td>Container element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-scrollpanel-wrapper</td>
+                        <td>Wrapper of content section.</td>
+                    </tr>
+                    <tr>
+                        <td>p-scrollpanel-content</td>
+                        <td>Content section.</td>
+                    </tr>
+                    <tr>
+                        <td>p-scrollpanel-bar</td>
+                        <td>Scrollbar handle.</td>
+                    </tr>
+                    <tr>
+                        <td>p-scrollpanel-bar-x</td>
+                        <td>Scrollbar handle of a horizontal bar.</td>
+                    </tr>
+                    <tr>
+                        <td>p-scrollpanel-bar-y</td>
+                        <td>Scrollbar handle of a vertical bar</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Accessibility</h5>
-            <DevelopmentSection>
-                <h6>Screen Reader</h6>
-                <p>
-                    Scrollbars of the ScrollPanel has a <i>scrollbar</i> role along with the <i>aria-controls</i> attribute that refers to the id of the scrollable content container and the <i>aria-orientation</i> to indicate the orientation of
-                    scrolling.
-                </p>
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>Scrollbars of the ScrollPanel has a <i>scrollbar</i> role along with the <i>aria-controls</i> attribute that refers to the id of the scrollable content container and the <i>aria-orientation</i> to indicate the orientation of scrolling.</p>
 
-                <h6>Header Keyboard Support</h6>
-                <div class="doc-tablewrapper">
-                    <table class="doc-table">
-                        <thead>
-                            <tr>
-                                <th>Key</th>
-                                <th>Function</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr>
-                                <td><i>down arrow</i></td>
-                                <td>Scrolls content down when vertical scrolling is available.</td>
-                            </tr>
-                            <tr>
-                                <td><i>up arrow</i></td>
-                                <td>Scrolls content up when vertical scrolling is available.</td>
-                            </tr>
-                            <tr>
-                                <td><i>left</i></td>
-                                <td>Scrolls content left when horizontal scrolling is available.</td>
-                            </tr>
-                            <tr>
-                                <td><i>right</i></td>
-                                <td>Scrolls content right when horizontal scrolling is available.</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-            </DevelopmentSection>
+        <h6>Header Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>down arrow</i></td>
+                        <td>Scrolls content down when vertical scrolling is available.</td>
+                    </tr>
+                    <tr>
+                        <td><i>up arrow</i></td>
+                        <td>Scrolls content up when vertical scrolling is available.</td>
+                    </tr>
+                    <tr>
+                        <td><i>left</i></td>
+                        <td>Scrolls content left when horizontal scrolling is available.</td>
+                    </tr>
+                    <tr>
+                        <td><i>right</i></td>
+                        <td>Scrolls content right when horizontal scrolling is available.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc>
-    </ClientOnly>
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
diff --git a/pages/scrolltop/ScrollTopDoc.vue b/pages/scrolltop/ScrollTopDoc.vue
index 248f86de7..35bb44721 100644
--- a/pages/scrolltop/ScrollTopDoc.vue
+++ b/pages/scrolltop/ScrollTopDoc.vue
@@ -1,36 +1,35 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="ScrollTopDemo" :sources="sources" github="scrolltop/ScrollTopDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="ScrollTopDemo" :sources="sources" github="scrolltop/ScrollTopDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import ScrollTop from 'primevue/scrolltop';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/scrolltop/scrolltop.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p>Without any configuration, ScrollTop listens window scroll.</p>
-            <pre v-code><code>
+        <h5>Getting Started</h5>
+        <p>Without any configuration, ScrollTop listens window scroll.</p>
+        <pre v-code><code>
 &lt;ScrollTop /&gt;
 
 </code></pre>
 
-            <h5>Threshold</h5>
-            <p>When the vertical scroll position reaches a certain value, ScrollTop gets displayed. This value is defined with the <i>threshold</i> property that defaults to 400.</p>
-            <pre v-code><code>
+        <h5>Threshold</h5>
+        <p>When the vertical scroll position reaches a certain value, ScrollTop gets displayed. This value is defined with the <i>threshold</i> property that defaults to 400.</p>
+        <pre v-code><code>
 &lt;ScrollTop :threshold="200" /&gt;
 
 </code></pre>
 
-            <h5>Target Element</h5>
-            <p>ScrollTop can also be assigned to its parent element by setting <i>target</i> as "parent".</p>
-            <pre v-code><code>
+        <h5>Target Element</h5>
+        <p>ScrollTop can also be assigned to its parent element by setting <i>target</i> as "parent".</p>
+        <pre v-code><code>
 &lt;div style="height: 400px; overflow: auto"&gt;
 	Content that overflows to container
 	&lt;ScrollTop /&gt;
@@ -38,74 +37,106 @@ import ScrollTop from 'primevue/scrolltop';
 
 </code></pre>
 
-            <h5>Properties</h5>
-            <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>target</td>
-                            <td>string</td>
-                            <td>window</td>
-                            <td>Target of the ScrollTop, valid values are "window" and "parent".</td>
-                        </tr>
-                        <tr>
-                            <td>threshold</td>
-                            <td>number</td>
-                            <td>400</td>
-                            <td>Defines the threshold value of the vertical scroll position of the target to toggle the visibility.</td>
-                        </tr>
-                        <tr>
-                            <td>icon</td>
-                            <td>string</td>
-                            <td>pi pi-chevron-up</td>
-                            <td>Icon to display.</td>
-                        </tr>
-                        <tr>
-                            <td>behavior</td>
-                            <td>string</td>
-                            <td>smooth</td>
-                            <td>Defines the scrolling behavi, "smooth" adds an animation and "auto" scrolls with a jump.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>target</td>
+                        <td>string</td>
+                        <td>window</td>
+                        <td>Target of the ScrollTop, valid values are "window" and "parent".</td>
+                    </tr>
+                    <tr>
+                        <td>threshold</td>
+                        <td>number</td>
+                        <td>400</td>
+                        <td>Defines the threshold value of the vertical scroll position of the target to toggle the visibility.</td>
+                    </tr>
+                    <tr>
+                        <td>icon</td>
+                        <td>string</td>
+                        <td>pi pi-chevron-up</td>
+                        <td>Icon to display.</td>
+                    </tr>
+                    <tr>
+                        <td>behavior</td>
+                        <td>string</td>
+                        <td>smooth</td>
+                        <td>Defines the scrolling behavi, "smooth" adds an animation and "auto" scrolls with a jump.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-scrolltop</td>
-                            <td>Container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-scrolltop-sticky</td>
-                            <td>Container element when attached to its parent.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-scrolltop</td>
+                        <td>Container element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-scrolltop-sticky</td>
+                        <td>Container element when attached to its parent.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc>
-    </ClientOnly>
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>
+            ScrollTop uses a button element with an <i>aria-label</i> that refers to the <i>aria.scrollTop</i> property of the <router-link to="/locale">locale</router-link> API by default, you may use your own aria roles and attributes as any valid
+            attribute is passed to the button element implicitly.
+        </p>
+
+        <h6>Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>Scrolls to top.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>Scrolls to top.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
diff --git a/pages/selectbutton/SelectButtonDoc.vue b/pages/selectbutton/SelectButtonDoc.vue
index 41ef77e34..2b4b1b33c 100755
--- a/pages/selectbutton/SelectButtonDoc.vue
+++ b/pages/selectbutton/SelectButtonDoc.vue
@@ -1,27 +1,26 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="SelectButtonDemo" :sources="sources" github="selectbutton/SelectButtonDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="SelectButtonDemo" :sources="sources" github="selectbutton/SelectButtonDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import SelectButton from 'primevue/selectbutton';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/selectbutton/selectbutton.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p>SelectButton requires a value to bind and a collection of arbitrary objects along with the <i>optionLabel</i> property to specify the label property of the option.</p>
-            <pre v-code><code>
+        <h5>Getting Started</h5>
+        <p>SelectButton requires a value to bind and a collection of arbitrary objects along with the <i>optionLabel</i> property to specify the label property of the option.</p>
+        <pre v-code><code>
 &lt;SelectButton v-model="selectedCity" :options="cities" optionLabel="name" /&gt;
 
 </code></pre>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 export default {
 	data() {
 		return {
@@ -37,20 +36,20 @@ export default {
 
 </code></pre>
 
-            <h5>Multiple</h5>
-            <p>SelectButton allows selecting only one item by default and setting <i>multiple</i> option enables choosing more than one item. In multiple case, model property should be an array.</p>
-            <pre v-code><code>
+        <h5>Multiple</h5>
+        <p>SelectButton allows selecting only one item by default and setting <i>multiple</i> option enables choosing more than one item. In multiple case, model property should be an array.</p>
+        <pre v-code><code>
 &lt;SelectButton v-model="selectedCity" :options="cities" optionLabel="brand" :multiple="true" /&gt;
 
 </code></pre>
 
-            <h5>Templating</h5>
-            <p>Label of an option is used as the display text of an item by default, for custom content support define an <i>option</i> template that gets the option instance as a parameter.</p>
-            <pre v-code><code><template v-pre>
+        <h5>Templating</h5>
+        <p>Label of an option is used as the display text of an item by default, for custom content support define an <i>option</i> template that gets the option instance as a parameter.</p>
+        <pre v-code><code><template v-pre>
 &lt;SelectButton v-model="selectedCar" :options="cars" optionLabel="brand"&gt;
 	&lt;template #option="slotProps"&gt;
         &lt;div class="car-option"&gt;
-            &lt;img :alt="slotProps.option.brand" :src="'/demo/images/car/' + slotProps.option.brand + '.png'" /&gt;
+            &lt;img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" /&gt;
             &lt;div&gt;{{slotProps.option.brand}}&lt;/div&gt;
         &lt;/div&gt;
 	&lt;/template&gt;
@@ -58,183 +57,182 @@ export default {
 </template>
 </code></pre>
 
-            <h5>Properties</h5>
-            <p>Any valid attribute is passed to the root element implicitly, extended properties are as follows;</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>modelValue</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Value of the component.</td>
-                        </tr>
-                        <tr>
-                            <td>options</td>
-                            <td>array</td>
-                            <td>null</td>
-                            <td>An array of selectitems to display as the available options.</td>
-                        </tr>
-                        <tr>
-                            <td>optionLabel</td>
-                            <td>string | function</td>
-                            <td>null</td>
-                            <td>Property name or getter function to use as the label of an option.</td>
-                        </tr>
-                        <tr>
-                            <td>optionValue</td>
-                            <td>string | function</td>
-                            <td>null</td>
-                            <td>Property name or getter function to use as the value of an option, defaults to the option itself when not defined.</td>
-                        </tr>
-                        <tr>
-                            <td>optionDisabled</td>
-                            <td>string | function</td>
-                            <td>null</td>
-                            <td>Property name or getter function to use as the disabled flag of an option, defaults to false when not defined.</td>
-                        </tr>
-                        <tr>
-                            <td>multiple</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When specified, allows selecting multiple values.</td>
-                        </tr>
-                        <tr>
-                            <td>unselectable</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether selection can be cleared.</td>
-                        </tr>
-                        <tr>
-                            <td>disabled</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When present, it specifies that the element should be disabled.</td>
-                        </tr>
-                        <tr>
-                            <td>dataKey</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>A property to uniquely identify an option.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <p>Any valid attribute is passed to the root element implicitly, extended properties are as follows;</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>modelValue</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Value of the component.</td>
+                    </tr>
+                    <tr>
+                        <td>options</td>
+                        <td>array</td>
+                        <td>null</td>
+                        <td>An array of selectitems to display as the available options.</td>
+                    </tr>
+                    <tr>
+                        <td>optionLabel</td>
+                        <td>string | function</td>
+                        <td>null</td>
+                        <td>Property name or getter function to use as the label of an option.</td>
+                    </tr>
+                    <tr>
+                        <td>optionValue</td>
+                        <td>string | function</td>
+                        <td>null</td>
+                        <td>Property name or getter function to use as the value of an option, defaults to the option itself when not defined.</td>
+                    </tr>
+                    <tr>
+                        <td>optionDisabled</td>
+                        <td>string | function</td>
+                        <td>null</td>
+                        <td>Property name or getter function to use as the disabled flag of an option, defaults to false when not defined.</td>
+                    </tr>
+                    <tr>
+                        <td>multiple</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When specified, allows selecting multiple values.</td>
+                    </tr>
+                    <tr>
+                        <td>unselectable</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Whether selection can be cleared.</td>
+                    </tr>
+                    <tr>
+                        <td>disabled</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When present, it specifies that the element should be disabled.</td>
+                    </tr>
+                    <tr>
+                        <td>dataKey</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>A property to uniquely identify an option.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Events</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>change</td>
-                            <td>
-                                event.originalEvent: browser event <br />
-                                event.value: Single value or an array of values that are selected.
-                            </td>
-                            <td>Callback to invoke on value change.</td>
-                        </tr>
-                        <tr>
-                            <td>focus</td>
-                            <td>event: Browser event</td>
-                            <td>Callback to invoke on focus.</td>
-                        </tr>
-                        <tr>
-                            <td>blur</td>
-                            <td>event: Browser event</td>
-                            <td>Callback to invoke on blur.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Events</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>change</td>
+                        <td>
+                            event.originalEvent: browser event <br />
+                            event.value: Single value or an array of values that are selected.
+                        </td>
+                        <td>Callback to invoke on value change.</td>
+                    </tr>
+                    <tr>
+                        <td>focus</td>
+                        <td>event: Browser event</td>
+                        <td>Callback to invoke on focus.</td>
+                    </tr>
+                    <tr>
+                        <td>blur</td>
+                        <td>event: Browser event</td>
+                        <td>Callback to invoke on blur.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Slots</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>option</td>
-                            <td>
-                                option: Option instance<br />
-                                index: Index of the option
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Slots</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>option</td>
+                        <td>
+                            option: Option instance<br />
+                            index: Index of the option
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Accessibility</h5>
-            <h6>Screen Reader</h6>
-            <p>
-                SelectButton component uses hidden native checkbox role for multiple selection and hidden radio role for single selection that is only visible to screen readers. Value to describe the component can be provided via
-                <i>aria-labelledby</i> property.
-            </p>
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>
+            SelectButton component uses hidden native checkbox role for multiple selection and hidden radio role for single selection that is only visible to screen readers. Value to describe the component can be provided via
+            <i>aria-labelledby</i> property.
+        </p>
 
-            <h6>Keyboard Support</h6>
-            <p>Keyboard interaction is derived from the native browser handling of checkboxs in a group.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Key</th>
-                            <th>Function</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td><i>tab</i></td>
-                            <td>Moves focus to the first selected option, if there is none then first option receives the focus.</td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <span class="inline-flex flex-column">
-                                    <i class="mb-1">right arrow</i>
-                                    <i>up arrow</i>
-                                </span>
-                            </td>
-                            <td>Moves focus to the previous option.</td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <span class="inline-flex flex-column">
-                                    <i class="mb-1">left arrow</i>
-                                    <i>down arrow</i>
-                                </span>
-                            </td>
-                            <td>Moves focus to the next option.</td>
-                        </tr>
-                        <tr>
-                            <td><i>space</i></td>
-                            <td>Toggles the checked state of a button.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h6>Keyboard Support</h6>
+        <p>Keyboard interaction is derived from the native browser handling of checkboxs in a group.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>tab</i></td>
+                        <td>Moves focus to the first selected option, if there is none then first option receives the focus.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <span class="inline-flex flex-column">
+                                <i class="mb-1">right arrow</i>
+                                <i>up arrow</i>
+                            </span>
+                        </td>
+                        <td>Moves focus to the previous option.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <span class="inline-flex flex-column">
+                                <i class="mb-1">left arrow</i>
+                                <i>down arrow</i>
+                            </span>
+                        </td>
+                        <td>Moves focus to the next option.</td>
+                    </tr>
+                    <tr>
+                        <td><i>space</i></td>
+                        <td>Toggles the checked state of a button.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc>
-    </ClientOnly>
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
diff --git a/pages/setup/index.vue b/pages/setup/index.vue
index a27e2bd68..9d06cba59 100755
--- a/pages/setup/index.vue
+++ b/pages/setup/index.vue
@@ -1,29 +1,28 @@
 <template>
     <div>
-        <ClientOnly>
-            <div class="content-section introduction">
-                <div class="feature-intro">
-                    <h1>Setup</h1>
-                    <p>PrimeVue is a rich set of open source native components for Vue.</p>
-                </div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>Setup</h1>
+                <p>PrimeVue is a rich set of open source native components for Vue.</p>
             </div>
-            <div class="content-section documentation">
-                <h3>Module Loader</h3>
-                <p>
-                    This is the recommended way if your application uses <a href="https://cli.vuejs.org">Vue CLI</a>, <a href="https://vitejs.dev">Vite</a> or has a webpack based build with
-                    <a href="https://github.com/vuejs/vue-loader">vue-loader</a> configured.
-                </p>
+        </div>
+        <div class="content-section documentation">
+            <h3>Module Loader</h3>
+            <p>
+                This is the recommended way if your application uses <a href="https://cli.vuejs.org">Vue CLI</a>, <a href="https://vitejs.dev">Vite</a> or has a webpack based build with
+                <a href="https://github.com/vuejs/vue-loader">vue-loader</a> configured.
+            </p>
 
-                <p>PrimeVue is available at <a href="https://www.npmjs.com/package/primevue">npm</a>, if you have an existing application run the following commands to download PrimeVue and PrimeIcons to your project.</p>
+            <p>PrimeVue is available at <a href="https://www.npmjs.com/package/primevue">npm</a>, if you have an existing application run the following commands to download PrimeVue and PrimeIcons to your project.</p>
 
-                <pre v-code.script><code>
-npm install primevue@^3.17.0-SNAPSHOT --save
+            <pre v-code.script><code>
+npm install primevue@^3 --save
 npm install primeicons --save
 
 </code></pre>
 
-                <p>Next step is setting up PrimeVue configuration.</p>
-                <pre v-code.script><code>
+            <p>Next step is setting up PrimeVue configuration.</p>
+            <pre v-code.script><code>
 import {createApp} from 'vue';
 import App from './App.vue';
 import PrimeVue from 'primevue/config';
@@ -33,8 +32,8 @@ app.use(PrimeVue);
 
 </code></pre>
 
-                <p>Then import and register a component from the library. Import path is available in the documentation of the corresponding component.</p>
-                <pre v-code.script><code>
+            <p>Then import and register a component from the library. Import path is available in the documentation of the corresponding component.</p>
+            <pre v-code.script><code>
 import {createApp} from 'vue';
 import App from './App.vue';
 import PrimeVue from 'primevue/config';
@@ -47,31 +46,31 @@ app.component('Dialog', Dialog);
 
 </code></pre>
 
-                <p>Finally you'll be able to utilize the component in your application. See the <b>Styles</b> section to apply styling.</p>
-                <pre v-code><code>
+            <p>Finally you'll be able to utilize the component in your application. See the <b>Styles</b> section to apply styling.</p>
+            <pre v-code><code>
 &lt;Dialog&gt;&lt;/Dialog&gt;
 
 </code></pre>
 
-                <p>Watch the video tutorial that goes through these steps.</p>
-                <div class="video-container">
-                    <iframe width="560" height="315" src="https://www.youtube.com/embed/cGTXuyqIwMA" frameborder="0" allowfullscreen></iframe>
-                </div>
+            <p>Watch the video tutorial that goes through these steps.</p>
+            <div class="video-container">
+                <iframe width="560" height="315" src="https://www.youtube.com/embed/FjYesOz95MM" frameborder="0" allowfullscreen></iframe>
+            </div>
 
-                <h5>Single File Components</h5>
-                <p>
-                    SFC files are available in the npm distribution and if you'd like to use SFCs directly, add <i>/sfc</i> as a suffix when referencing an import path. This will instruct your bundler to process the *.vue files in your local build
-                    instead of using the compiled output. One use case for this approach is optimizing for SSR by removing whitespaces.
-                </p>
+            <h5>Single File Components</h5>
+            <p>
+                SFC files are available in the npm distribution and if you'd like to use SFCs directly, add <i>/sfc</i> as a suffix when referencing an import path. This will instruct your bundler to process the *.vue files in your local build
+                instead of using the compiled output. One use case for this approach is optimizing for SSR by removing whitespaces.
+            </p>
 
-                <pre v-code.script><code>
+            <pre v-code.script><code>
 import Dialog from 'primevue/dialog/sfc';
 
 </code></pre>
 
-                <h3>Script Tag</h3>
-                <p>Other alternative is utilizing the components directly within the browser with the <i>iife</i> build. Note that PrimeVue does not provide a <i>umd</i> build.</p>
-                <pre v-code><code><template v-pre>
+            <h3>Script Tag</h3>
+            <p>Other alternative is utilizing the components directly within the browser with the <i>iife</i> build. Note that PrimeVue does not provide a <i>umd</i> build.</p>
+            <pre v-code><code><template v-pre>
 &lt;html&gt;
     &lt;head&gt;
         &lt;meta charset="utf-8"&gt;
@@ -114,19 +113,19 @@ import Dialog from 'primevue/dialog/sfc';
 </template>
 </code></pre>
 
-                <h3>Styles</h3>
-                <p>The css dependencies are as follows, note that you may change the theme with another one of your choice. If you are using a bundler such as webpack with a css loader you may import them to your main application component.</p>
+            <h3>Styles</h3>
+            <p>The css dependencies are as follows, note that you may change the theme with another one of your choice. If you are using a bundler such as webpack with a css loader you may import them to your main application component.</p>
 
-                <pre v-code.script><code>
+            <pre v-code.script><code>
 primevue/resources/themes/saga-blue/theme.css       //theme
 primevue/resources/primevue.min.css                 //core css
 primeicons/primeicons.css                           //icons
 
 </code></pre>
 
-                <h5>Free Themes</h5>
-                <p>PrimeVue ships with various free themes to choose from.</p>
-                <pre v-code.css><code>
+            <h5>Free Themes</h5>
+            <p>PrimeVue ships with various free themes to choose from.</p>
+            <pre v-code.css><code>
 primevue/resources/themes/bootstrap4-light-blue/theme.css
 primevue/resources/themes/bootstrap4-light-purple/theme.css
 primevue/resources/themes/bootstrap4-dark-blue/theme.css
@@ -173,18 +172,18 @@ primevue/resources/themes/rhea/theme.css
 
 </code></pre>
 
-                <h5>PrimeFlex</h5>
-                <p>
-                    PrimeFlex is a CSS utility library featuring various helpers such as a grid system, flexbox, spacing, elevation and more. Although it is not required, it is highly recommended to add PrimeFlex as it is likely to need such
-                    utilities when developing applications. View the <a href="https://www.primefaces.org/primeflex">PrimeFlex</a> homepage for the more information.
-                </p>
+            <h5>PrimeFlex</h5>
+            <p>
+                PrimeFlex is a CSS utility library featuring various helpers such as a grid system, flexbox, spacing, elevation and more. Although it is not required, it is highly recommended to add PrimeFlex as it is likely to need such utilities
+                when developing applications. View the <a href="https://www.primefaces.org/primeflex">PrimeFlex</a> homepage for the more information.
+            </p>
 
-                <h3>Nuxt Integration</h3>
-                <p>Nuxt 3 is currently in beta and an official module is planned after the final release. At the moment, PrimeVue can easily be used with Nuxt 3 using a custom plugin.</p>
+            <h3>Nuxt Integration</h3>
+            <p>Nuxt 3 is currently in beta and an official module is planned after the final release. At the moment, PrimeVue can easily be used with Nuxt 3 using a custom plugin.</p>
 
-                <h6>nuxt.config.js</h6>
-                <p>Open the nuxt configuration file and add the css dependencies.</p>
-                <pre v-code.script><code>
+            <h6>nuxt.config.js</h6>
+            <p>Open the nuxt configuration file and add the css dependencies.</p>
+            <pre v-code.script><code>
 import { defineNuxtConfig } from 'nuxt3'
 
 export default defineNuxtConfig({
@@ -192,15 +191,18 @@ export default defineNuxtConfig({
         'primevue/resources/themes/saga-blue/theme.css',
         'primevue/resources/primevue.css',
         'primeicons/primeicons.css'
-    ]
+    ],
+	build: {
+		transpile: ['primevue']
+	}
 })
 
 </code></pre>
 
-                <h6>primevue.js</h6>
-                <p>Create a file like <i>primevue.js</i> under the plugins directory for the configuration.</p>
+            <h6>primevue.js</h6>
+            <p>Create a file like <i>primevue.js</i> under the plugins directory for the configuration.</p>
 
-                <pre v-code.script><code>
+            <pre v-code.script><code>
 import { defineNuxtPlugin } from "#app";
 import PrimeVue from "primevue/config";
 import Button from "primevue/button";
@@ -213,50 +215,50 @@ export default defineNuxtPlugin((nuxtApp) => {
 
 </code></pre>
 
-                <h3>Configuration</h3>
-                <h5>Dependencies</h5>
-                <p>PrimeVue components are not wrappers and implemented natively with the Vue APIs. There are some exceptions having 3rd party dependencies such as Quill for Editor.</p>
-                <p>In addition, components require PrimeIcons library for icons.</p>
+            <h3>Configuration</h3>
+            <h5>Dependencies</h5>
+            <p>PrimeVue components are not wrappers and implemented natively with the Vue APIs. There are some exceptions having 3rd party dependencies such as Quill for Editor.</p>
+            <p>In addition, components require PrimeIcons library for icons.</p>
 
-                <h6>Mandatory</h6>
-                <pre v-code.script><code>
+            <h6>Mandatory</h6>
+            <pre v-code.script><code>
 dependencies: {
     "vue": "^3.0.0",
-    "primeicons": "^5.0.0"
+    "primeicons": "^6.0.0"
 }
 
 </code></pre>
 
-                <h6>Optional</h6>
-                <p>Here is the list of components with 3rd party dependencies. Documentation of each component has a dependencies section as well.</p>
-                <div class="doc-tablewrapper">
-                    <table class="doc-table">
-                        <thead>
-                            <tr>
-                                <th>Component</th>
-                                <th>Dependency</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr>
-                                <td>Charts</td>
-                                <td>Charts.js 3.3.2+</td>
-                            </tr>
-                            <tr>
-                                <td>Editor</td>
-                                <td>Quill.js 1.3.3+</td>
-                            </tr>
-                            <tr>
-                                <td>PrimeFlex</td>
-                                <td>DataView</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
+            <h6>Optional</h6>
+            <p>Here is the list of components with 3rd party dependencies. Documentation of each component has a dependencies section as well.</p>
+            <div class="doc-tablewrapper">
+                <table class="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Component</th>
+                            <th>Dependency</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>Charts</td>
+                            <td>Charts.js 3.3.2+</td>
+                        </tr>
+                        <tr>
+                            <td>Editor</td>
+                            <td>Quill.js 1.3.3+</td>
+                        </tr>
+                        <tr>
+                            <td>PrimeFlex</td>
+                            <td>DataView</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
 
-                <h5>Prop Cases</h5>
-                <p>Component prop names are described as camel case throughout the documentation however camel-case is also fully supported. Events on the other hand should always be camel-case.</p>
-                <pre v-code><code>
+            <h5>Prop Cases</h5>
+            <p>Component prop names are described as camel case throughout the documentation however camel-case is also fully supported. Events on the other hand should always be camel-case.</p>
+            <pre v-code><code>
 &lt;Dialog :showHeader="false"&gt;&lt;/Dialog&gt;
 
 &lt;!-- can be written as --&gt;
@@ -265,9 +267,9 @@ dependencies: {
 
 </code></pre>
 
-                <h5>Ripple</h5>
-                <p>Ripple is an optional animation for the supported components such as buttons. It is disabled by default and needs to be enabled at your app's entry file (e.g. main.js) during the PrimeVue setup.</p>
-                <pre v-code.script><code>
+            <h5>Ripple</h5>
+            <p>Ripple is an optional animation for the supported components such as buttons. It is disabled by default and needs to be enabled at your app's entry file (e.g. main.js) during the PrimeVue setup.</p>
+            <pre v-code.script><code>
 import {createApp} from 'vue';
 import PrimeVue from 'primevue/config';
 const app = createApp(App);
@@ -276,15 +278,15 @@ app.use(PrimeVue, {ripple: true});
 
 </code></pre>
 
-                <h5>Outlined vs Filled Input Styles</h5>
-                <p>
-                    Input fields come in two styles, default is <i>outlined</i> with borders around the field whereas <i>filled</i> alternative adds a background color to the field. Applying <i>p-input-filled</i> to an ancestor of an input enables
-                    the filled style. If you prefer to use filled inputs in the entire application, use a global container such as the document body or the application element to apply the style class. Note that in case you add it to the application
-                    element, components that are teleported to the document body such as Dialog will not be able to display filled inputs as they are not a descendant of the application root element in the DOM tree, to resolve this case set
-                    inputStyle to 'filled' at PrimeVue configuration as well.
-                </p>
+            <h5>Outlined vs Filled Input Styles</h5>
+            <p>
+                Input fields come in two styles, default is <i>outlined</i> with borders around the field whereas <i>filled</i> alternative adds a background color to the field. Applying <i>p-input-filled</i> to an ancestor of an input enables the
+                filled style. If you prefer to use filled inputs in the entire application, use a global container such as the document body or the application element to apply the style class. Note that in case you add it to the application element,
+                components that are teleported to the document body such as Dialog will not be able to display filled inputs as they are not a descendant of the application root element in the DOM tree, to resolve this case set inputStyle to 'filled'
+                at PrimeVue configuration as well.
+            </p>
 
-                <pre v-code.script><code>
+            <pre v-code.script><code>
 import {createApp} from 'vue';
 import PrimeVue from 'primevue/config';
 const app = createApp(App);
@@ -293,13 +295,13 @@ app.use(PrimeVue, {inputStyle: 'filled'});
 
 </code></pre>
 
-                <h5>ZIndex Layering</h5>
-                <p>
-                    ZIndexes are managed automatically to make sure layering of overlay components work seamlessly when combining multiple components. Still there may be cases where you'd like to configure the configure default values such as a
-                    custom layout where header section is fixed. In a case like this, dropdown needs to be displayed below the application header but a modal dialog should be displayed above. PrimeVue configuration offers the <i>zIndex</i> property
-                    to customize the default values for components categories. Default values are described below and can be customized when setting up PrimeVue.
-                </p>
-                <pre v-code.script><code>
+            <h5>ZIndex Layering</h5>
+            <p>
+                ZIndexes are managed automatically to make sure layering of overlay components work seamlessly when combining multiple components. Still there may be cases where you'd like to configure the configure default values such as a custom
+                layout where header section is fixed. In a case like this, dropdown needs to be displayed below the application header but a modal dialog should be displayed above. PrimeVue configuration offers the <i>zIndex</i> property to customize
+                the default values for components categories. Default values are described below and can be customized when setting up PrimeVue.
+            </p>
+            <pre v-code.script><code>
 import {createApp} from 'vue';
 import PrimeVue from 'primevue/config';
 const app = createApp(App);
@@ -314,74 +316,79 @@ app.use(PrimeVue, {
 });
 
 </code></pre>
-                <h5>Locale</h5>
-                <p>PrimeVue provides a Locale API to support i18n and l7n, visit the <nuxt-link to="/locale">Locale</nuxt-link> documentation for more information.</p>
+            <h5>Locale</h5>
+            <p>PrimeVue provides a Locale API to support i18n and l7n, visit the <router-link to="/locale">Locale</router-link> documentation for more information.</p>
 
-                <h5>Browser Support</h5>
-                <div class="doc-tablewrapper">
-                    <table class="doc-table browsers">
-                        <thead>
-                            <tr>
-                                <th>
-                                    <div class="flex align-items-center">
-                                        <img src="../../assets/images//browsers/edge.svg" alt="edge" style="width: 1.5rem" class="mr-2" />
-                                        Edge
-                                    </div>
-                                </th>
-                                <th>
-                                    <div class="flex align-items-center">
-                                        <img src="../../assets/images/browsers/firefox.svg" alt="firefox" style="width: 1.5rem" class="mr-2" />
-                                        Firefox
-                                    </div>
-                                </th>
-                                <th>
-                                    <div class="flex align-items-center">
-                                        <img src="../../assets/images/browsers/chrome.svg" alt="chrome" style="width: 1.5rem" class="mr-2" />
-                                        Chrome
-                                    </div>
-                                </th>
-                                <th>
-                                    <div class="flex align-items-center">
-                                        <img src="../../assets/images/browsers/safari.svg" alt="safari" style="width: 1.5rem" class="mr-2" />
-                                        Safari
-                                    </div>
-                                </th>
-                                <th>
-                                    <div class="flex align-items-center">
-                                        <img src="../../assets/images/browsers/opera.svg" alt="opera" style="width: 1.5rem" class="mr-2" />
-                                        Opera
-                                    </div>
-                                </th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr>
-                                <td>Edge</td>
-                                <td>Last 2 versions</td>
-                                <td>Last 2 versions</td>
-                                <td>Last 2 versions</td>
-                                <td>Last 2 versions</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-
-                <h3>Samples</h3>
-                <h5>Typescript</h5>
-                <p>
-                    Typescript is fully supported as type definition files are provided in the npm package of PrimeVue. A sample <a href="https://github.com/primefaces/primevue-typescript-quickstart">typescript-primevue</a> application with Vue CLI
-                    is available as at github.
-                </p>
-
-                <h5>Quickstart with Vue CLI</h5>
-                <p>An <a href="https://github.com/primefaces/primevue-quickstart">example application</a> based on Vue CLI is available at github.</p>
-
-                <h5>Quickstart with Vite</h5>
-                <p>A <a href="https://github.com/primefaces/primevue-quickstart-vite">starter application</a> is also provided for Vite users.</p>
-
-                <h5>Quickstart with Nuxt</h5>
-                <p>A <a href="https://github.com/primefaces/primevue-quickstart-nuxt3">sample application</a> is created for Nuxt 3 users.</p>
+            <h5>Browser Support</h5>
+            <div class="doc-tablewrapper">
+                <table class="doc-table browsers">
+                    <thead>
+                        <tr>
+                            <th>
+                                <div class="flex align-items-center">
+                                    <img src="../../assets/images//browsers/edge.svg" alt="edge" style="width: 1.5rem" class="mr-2" />
+                                    Edge
+                                </div>
+                            </th>
+                            <th>
+                                <div class="flex align-items-center">
+                                    <img src="../../assets/images/browsers/firefox.svg" alt="firefox" style="width: 1.5rem" class="mr-2" />
+                                    Firefox
+                                </div>
+                            </th>
+                            <th>
+                                <div class="flex align-items-center">
+                                    <img src="../../assets/images/browsers/chrome.svg" alt="chrome" style="width: 1.5rem" class="mr-2" />
+                                    Chrome
+                                </div>
+                            </th>
+                            <th>
+                                <div class="flex align-items-center">
+                                    <img src="../../assets/images/browsers/safari.svg" alt="safari" style="width: 1.5rem" class="mr-2" />
+                                    Safari
+                                </div>
+                            </th>
+                            <th>
+                                <div class="flex align-items-center">
+                                    <img src="../../assets/images/browsers/opera.svg" alt="opera" style="width: 1.5rem" class="mr-2" />
+                                    Opera
+                                </div>
+                            </th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>Edge</td>
+                            <td>Last 2 versions</td>
+                            <td>Last 2 versions</td>
+                            <td>Last 2 versions</td>
+                            <td>Last 2 versions</td>
+                        </tr>
+                    </tbody>
+                </table>
             </div>
-        </ClientOnly>
+
+            <h3>Samples</h3>
+            <h5>Quickstart with Create Vue</h5>
+            <p>An <a href="https://github.com/primefaces/primevue-quickstart-create-vue">example application</a> based on Create Vue is available at github.</p>
+
+            <h5>Quickstart with Create Vue TypeScript</h5>
+            <p>An <a href="https://github.com/primefaces/primevue-quickstart-create-vue-ts">sample application</a> based on Create Vue is available at github.</p>
+
+            <h5>Typescript</h5>
+            <p>
+                Typescript is fully supported as type definition files are provided in the npm package of PrimeVue. A sample <a href="https://github.com/primefaces/primevue-typescript-quickstart">typescript-primevue</a> application with Vue CLI is
+                available as at github.
+            </p>
+
+            <h5>Quickstart with Vite</h5>
+            <p>A <a href="https://github.com/primefaces/primevue-quickstart-vite">starter application</a> is also provided for Vite users.</p>
+
+            <h5>Quickstart with Nuxt</h5>
+            <p>A <a href="https://github.com/primefaces/primevue-quickstart-nuxt3">sample application</a> is created for Nuxt 3 users.</p>
+
+            <h5>Quickstart with Vue CLI</h5>
+            <p>An <a href="https://github.com/primefaces/primevue-quickstart">example application</a> based on Vue CLI is available at github.</p>
+        </div>
     </div>
 </template>
diff --git a/pages/sidebar/SidebarDoc.vue b/pages/sidebar/SidebarDoc.vue
index 9a53837f1..d9c1b1b13 100755
--- a/pages/sidebar/SidebarDoc.vue
+++ b/pages/sidebar/SidebarDoc.vue
@@ -1,22 +1,21 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="SidebarDemo" :sources="sources" github="sidebar/SidebarDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="SidebarDemo" :sources="sources" github="sidebar/SidebarDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import Sidebar from 'primevue/sidebar';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/sidebar/sidebar.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p>Sidebar is used as a container and visibility is controlled with the <i>visible</i> property that requires a v-model two-way binding.</p>
-            <pre v-code><code>
+        <h5>Getting Started</h5>
+        <p>Sidebar is used as a container and visibility is controlled with the <i>visible</i> property that requires a v-model two-way binding.</p>
+        <pre v-code><code>
 &lt;Sidebar v-model:visible="visibleLeft"&gt;
 	Content
 &lt;/Sidebar&gt;
@@ -25,207 +24,290 @@ import Sidebar from 'primevue/sidebar';
 
 </code></pre>
 
-            <h5>Position</h5>
-            <p>Sidebar can either be located on the left (default), right, top or bottom of the screen depending on the <i>position</i> property.</p>
-            <pre v-code><code>
+        <h5>Position</h5>
+        <p>Sidebar can either be located on the left (default), right, top or bottom of the screen depending on the <i>position</i> property.</p>
+        <pre v-code><code>
 &lt;Sidebar v-model:visible="visibleRight" position="right"&gt;
 	Content
 &lt;/Sidebar&gt;
 
 </code></pre>
 
-            <h5>Size</h5>
-            <p>Sidebar size can be changed using a fixed value or using one of the three predefined ones.</p>
-            <pre v-code><code>
+        <h5>Size</h5>
+        <p>Sidebar size can be changed using a fixed value or using one of the three predefined ones.</p>
+        <pre v-code><code>
 &lt;Sidebar v-model:visible="visibleLeft" class="p-sidebar-sm"&gt;&lt;/Sidebar&gt;
 &lt;Sidebar v-model:visible="visibleLeft" class="p-sidebar-md"&gt;&lt;/Sidebar&gt;
 &lt;Sidebar v-model:visible="visibleLeft" class="p-sidebar-lg"&gt;&lt;/Sidebar&gt;
 
 </code></pre>
 
-            <h5>Full Screen</h5>
-            <p>Full screen mode allows the sidebar to cover whole screen.</p>
-            <pre v-code><code>
+        <h5>Full Screen</h5>
+        <p>Full screen mode allows the sidebar to cover whole screen.</p>
+        <pre v-code><code>
 &lt;Sidebar v-model:visible="visibleFull" position="full"&gt;
 	Content
 &lt;/Sidebar&gt;
 
 </code></pre>
 
-            <h5>Properties</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>visible</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Specifies the visibility of the dialog.</td>
-                        </tr>
-                        <tr>
-                            <td>position</td>
-                            <td>string</td>
-                            <td>left</td>
-                            <td>Specifies the position of the sidebar, valid values are "left", "right", "top", "bottom" and "full".</td>
-                        </tr>
-                        <tr>
-                            <td>baseZIndex</td>
-                            <td>number</td>
-                            <td>0</td>
-                            <td>Base zIndex value to use in layering.</td>
-                        </tr>
-                        <tr>
-                            <td>autoZIndex</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether to automatically manage layering.</td>
-                        </tr>
-                        <tr>
-                            <td>dismissable</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether clicking outside closes the panel.</td>
-                        </tr>
-                        <tr>
-                            <td>showCloseIcon</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether to display a close icon inside the panel.</td>
-                        </tr>
-                        <tr>
-                            <td>modal</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether to a modal layer behind the sidebar.</td>
-                        </tr>
-                        <tr>
-                            <td>ariaCloseLabel</td>
-                            <td>string</td>
-                            <td>close</td>
-                            <td>Aria label of the close icon.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>visible</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Specifies the visibility of the dialog.</td>
+                    </tr>
+                    <tr>
+                        <td>position</td>
+                        <td>string</td>
+                        <td>left</td>
+                        <td>Specifies the position of the sidebar, valid values are "left", "right", "top", "bottom" and "full".</td>
+                    </tr>
+                    <tr>
+                        <td>baseZIndex</td>
+                        <td>number</td>
+                        <td>0</td>
+                        <td>Base zIndex value to use in layering.</td>
+                    </tr>
+                    <tr>
+                        <td>autoZIndex</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Whether to automatically manage layering.</td>
+                    </tr>
+                    <tr>
+                        <td>dismissable</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Whether clicking outside closes the panel.</td>
+                    </tr>
+                    <tr>
+                        <td>showCloseIcon</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Whether to display a close icon inside the panel.</td>
+                    </tr>
+                    <tr>
+                        <td>closeIcon</td>
+                        <td>string</td>
+                        <td>pi pi-times</td>
+                        <td>Icon to display in the sidebar close button.</td>
+                    </tr>
+                    <tr>
+                        <td>modal</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Whether to a modal layer behind the sidebar.</td>
+                    </tr>
+                    <tr>
+                        <td style="text-decoration: line-through">ariaCloseLabel</td>
+                        <td>string</td>
+                        <td>close</td>
+                        <td>
+                            Aria label of the close icon.
+                            <br />
+                            <b> Deprecated: </b> <i>aria.close</i> can be used in defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Events</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>hide</td>
-                            <td>-</td>
-                            <td>Callback to invoke when sidebar gets hidden.</td>
-                        </tr>
-                        <tr>
-                            <td>show</td>
-                            <td>-</td>
-                            <td>Callback to invoke when sidebar gets shown.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Events</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>hide</td>
+                        <td>-</td>
+                        <td>Callback to invoke when sidebar gets hidden.</td>
+                    </tr>
+                    <tr>
+                        <td>show</td>
+                        <td>-</td>
+                        <td>Callback to invoke when sidebar gets shown.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Slots</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>header</td>
-                            <td>-</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Slots</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>header</td>
+                        <td>-</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-sidebar</td>
-                            <td>Container element</td>
-                        </tr>
-                        <tr>
-                            <td>p-sidebar-left</td>
-                            <td>Container element of left sidebar.</td>
-                        </tr>
-                        <tr>
-                            <td>p-sidebar-right</td>
-                            <td>Container element of right sidebar.</td>
-                        </tr>
-                        <tr>
-                            <td>p-sidebar-top</td>
-                            <td>Container element of top sidebar.</td>
-                        </tr>
-                        <tr>
-                            <td>p-sidebar-bottom</td>
-                            <td>Container element of bottom sidebar.</td>
-                        </tr>
-                        <tr>
-                            <td>p-sidebar-full</td>
-                            <td>Container element of a full screen sidebar.</td>
-                        </tr>
-                        <tr>
-                            <td>p-sidebar-active</td>
-                            <td>Container element when sidebar is visible.</td>
-                        </tr>
-                        <tr>
-                            <td>p-sidebar-close</td>
-                            <td>Close anchor element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-sidebar-sm</td>
-                            <td>Small sized sidebar.</td>
-                        </tr>
-                        <tr>
-                            <td>p-sidebar-md</td>
-                            <td>Medium sized sidebar.</td>
-                        </tr>
-                        <tr>
-                            <td>p-sidebar-lg</td>
-                            <td>Large sized sidebar.</td>
-                        </tr>
-                        <tr>
-                            <td>p-sidebar-mask</td>
-                            <td>Modal layer of the sidebar.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-sidebar</td>
+                        <td>Container element</td>
+                    </tr>
+                    <tr>
+                        <td>p-sidebar-left</td>
+                        <td>Container element of left sidebar.</td>
+                    </tr>
+                    <tr>
+                        <td>p-sidebar-right</td>
+                        <td>Container element of right sidebar.</td>
+                    </tr>
+                    <tr>
+                        <td>p-sidebar-top</td>
+                        <td>Container element of top sidebar.</td>
+                    </tr>
+                    <tr>
+                        <td>p-sidebar-bottom</td>
+                        <td>Container element of bottom sidebar.</td>
+                    </tr>
+                    <tr>
+                        <td>p-sidebar-full</td>
+                        <td>Container element of a full screen sidebar.</td>
+                    </tr>
+                    <tr>
+                        <td>p-sidebar-active</td>
+                        <td>Container element when sidebar is visible.</td>
+                    </tr>
+                    <tr>
+                        <td>p-sidebar-close</td>
+                        <td>Close anchor element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-sidebar-sm</td>
+                        <td>Small sized sidebar.</td>
+                    </tr>
+                    <tr>
+                        <td>p-sidebar-md</td>
+                        <td>Medium sized sidebar.</td>
+                    </tr>
+                    <tr>
+                        <td>p-sidebar-lg</td>
+                        <td>Large sized sidebar.</td>
+                    </tr>
+                    <tr>
+                        <td>p-sidebar-mask</td>
+                        <td>Modal layer of the sidebar.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc>
-    </ClientOnly>
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>
+            Sidebar component uses <i>complementary</i> role by default, since any attribute is passed to the root element aria role can be changed depending on your use case and additional attributes like <i>aria-labelledby</i> can be added. In
+            addition <i>aria-modal</i> is added since focus is kept within the sidebar when opened.
+        </p>
+
+        <p>Trigger element also requires <i>aria-expanded</i> and <i>aria-controls</i> to be handled explicitly.</p>
+
+        <pre v-code><code>
+&lt;Button label="Show" icon="pi pi-external-link" @click="visible = true" :aria-controls="visible ? 'sbar' : null" :aria-expanded="visible"/&gt;
+
+&lt;Sidebar id="sbar" v-model:visible="visible" role="region" &gt;
+    &lt;p&gt;Content&lt;/p&gt;
+&lt;/Sidebar&gt;
+
+</code></pre>
+
+        <h6>Overlay Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>tab</i>
+                        </td>
+                        <td>Moves focus to the next the focusable element within the sidebar.</td>
+                    </tr>
+                    <tr>
+                        <td><i>shift</i> + <i>tab</i></td>
+                        <td>Moves focus to the previous the focusable element within the sidebar.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>escape</i>
+                        </td>
+                        <td>Closes the dialog.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h6>Close Button Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>Closes the sidebar.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>Closes the sidebar.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
diff --git a/pages/skeleton/SkeletonDoc.vue b/pages/skeleton/SkeletonDoc.vue
index 4906647c7..588b05c94 100644
--- a/pages/skeleton/SkeletonDoc.vue
+++ b/pages/skeleton/SkeletonDoc.vue
@@ -1,139 +1,147 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="SkeletonDemo" :sources="sources" github="skeleton/SkeletonDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="SkeletonDemo" :sources="sources" github="skeleton/SkeletonDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import Skeleton from 'primevue/skeleton';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/skeleton/skeleton.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p>Skeleton displays a rectangle in its simplest form.</p>
-            <pre v-code><code>
+        <h5>Getting Started</h5>
+        <p>Skeleton displays a rectangle in its simplest form.</p>
+        <pre v-code><code>
 &lt;Skeleton /&gt;
 
 </code></pre>
 
-            <h5>Circle</h5>
-            <p>The other option is the circle by setting <i>shape</i> property as "circle".</p>
-            <pre v-code><code>
+        <h5>Circle</h5>
+        <p>The other option is the circle by setting <i>shape</i> property as "circle".</p>
+        <pre v-code><code>
 &lt;Skeleton shape="circle"/&gt;
 
 </code></pre>
 
-            <h5>Size</h5>
-            <p>In order to customize the size, use <i>width</i> and <i>height</i> properties for rectangles and <i>size</i> for Circle and Square shapes.</p>
-            <pre v-code><code>
+        <h5>Size</h5>
+        <p>In order to customize the size, use <i>width</i> and <i>height</i> properties for rectangles and <i>size</i> for Circle and Square shapes.</p>
+        <pre v-code><code>
 &lt;Skeleton width="100%" height="2rem" /&gt;
 &lt;Skeleton shape="circle" size="50px" /&gt;
 
 </code></pre>
 
-            <h5>Border Radius</h5>
-            <p>The default border radius of a rectangle is specified by the theme and can be overriden using the <i>borderRadius</i> property.</p>
-            <pre v-code><code>
+        <h5>Border Radius</h5>
+        <p>The default border radius of a rectangle is specified by the theme and can be overriden using the <i>borderRadius</i> property.</p>
+        <pre v-code><code>
 &lt;Skeleton borderRadius="16px" /&gt;
 
 </code></pre>
 
-            <h5>Animation</h5>
-            <p>Animation can be turned of by setting <i>animation</i> to "none".</p>
-            <pre v-code><code>
+        <h5>Animation</h5>
+        <p>Animation can be turned of by setting <i>animation</i> to "none".</p>
+        <pre v-code><code>
 &lt;Skeleton animation="none" /&gt;
 
 </code></pre>
 
-            <h5>Properties</h5>
-            <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>shape</td>
-                            <td>string</td>
-                            <td>rectangle</td>
-                            <td>Shape of the element, options are "rectangle" and "circle".</td>
-                        </tr>
-                        <tr>
-                            <td>size</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Size of the Circle or Square.</td>
-                        </tr>
-                        <tr>
-                            <td>width</td>
-                            <td>string</td>
-                            <td>100%</td>
-                            <td>Width of the element.</td>
-                        </tr>
-                        <tr>
-                            <td>height</td>
-                            <td>string</td>
-                            <td>1rem</td>
-                            <td>Height of the element.</td>
-                        </tr>
-                        <tr>
-                            <td>borderRadius</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Border radius of the element, defaults to value from theme.</td>
-                        </tr>
-                        <tr>
-                            <td>animation</td>
-                            <td>string</td>
-                            <td>wave</td>
-                            <td>Type of the animation, valid options are "wave" and "none".</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>shape</td>
+                        <td>string</td>
+                        <td>rectangle</td>
+                        <td>Shape of the element, options are "rectangle" and "circle".</td>
+                    </tr>
+                    <tr>
+                        <td>size</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Size of the Circle or Square.</td>
+                    </tr>
+                    <tr>
+                        <td>width</td>
+                        <td>string</td>
+                        <td>100%</td>
+                        <td>Width of the element.</td>
+                    </tr>
+                    <tr>
+                        <td>height</td>
+                        <td>string</td>
+                        <td>1rem</td>
+                        <td>Height of the element.</td>
+                    </tr>
+                    <tr>
+                        <td>borderRadius</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Border radius of the element, defaults to value from theme.</td>
+                    </tr>
+                    <tr>
+                        <td>animation</td>
+                        <td>string</td>
+                        <td>wave</td>
+                        <td>Type of the animation, valid options are "wave" and "none".</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-skeleton</td>
-                            <td>Container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-skeleton-circle</td>
-                            <td>Container element of a determinate progressbar.</td>
-                        </tr>
-                        <tr>
-                            <td>p-skeleton-animation-none</td>
-                            <td>Container element of an indeterminate progressbar.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-skeleton</td>
+                        <td>Container element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-skeleton-circle</td>
+                        <td>Container element of a determinate progressbar.</td>
+                    </tr>
+                    <tr>
+                        <td>p-skeleton-animation-none</td>
+                        <td>Container element of an indeterminate progressbar.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc>
-    </ClientOnly>
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>
+            Skeleton uses <i>aria-hidden</i> as "true" so that it gets ignored by screen readers, any valid attribute is passed to the root element so you may customize it further if required. If multiple skeletons are grouped inside a container, you
+            may use <i>aria-busy</i> on the container element as well to indicate the loading process.
+        </p>
+
+        <h6>Keyboard Support</h6>
+        <p>Component does not include any interactive elements.</p>
+
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
diff --git a/pages/slider/SliderDoc.vue b/pages/slider/SliderDoc.vue
index d6fe852a3..f5dcbd135 100755
--- a/pages/slider/SliderDoc.vue
+++ b/pages/slider/SliderDoc.vue
@@ -1,35 +1,34 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="SliderDemo" :sources="sources" github="slider/SliderDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="SliderDemo" :sources="sources" github="slider/SliderDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import Slider from 'primevue/slider';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/slider/slider.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p>Two-way binding is defined using the standard v-model directive.</p>
-            <pre v-code><code>
+        <h5>Getting Started</h5>
+        <p>Two-way binding is defined using the standard v-model directive.</p>
+        <pre v-code><code>
 &lt;Slider v-model="value" /&gt;
 
 </code></pre>
 
-            <h5>Range</h5>
-            <p>Range slider provides two handles to define two values. Enable <i>range</i> property and bind an array to implement a range slider.</p>
+        <h5>Range</h5>
+        <p>Range slider provides two handles to define two values. Enable <i>range</i> property and bind an array to implement a range slider.</p>
 
-            <pre v-code><code>
+        <pre v-code><code>
 &lt;Slider v-model="value" :range="true" /&gt;
 
 </code></pre>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 export default {
 	data() {
 		return {
@@ -40,151 +39,163 @@ export default {
 
 </code></pre>
 
-            <h5>Orientation</h5>
-            <p>Default layout of slider is horizontal, use <i>orientation</i> property for the alternative vertical mode.</p>
-            <pre v-code><code>
+        <h5>Orientation</h5>
+        <p>Default layout of slider is horizontal, use <i>orientation</i> property for the alternative vertical mode.</p>
+        <pre v-code><code>
 &lt;Slider v-model="value" orientation="vertical" /&gt;
 
 </code></pre>
 
-            <h5>Step</h5>
-            <p>Step factor is 1 by default and can be customized with <i>step</i> option.</p>
-            <pre v-code><code>
+        <h5>Step</h5>
+        <p>Step factor is 1 by default and can be customized with <i>step</i> option.</p>
+        <pre v-code><code>
 &lt;Slider v-model="value" :step="20" /&gt;
 
 </code></pre>
 
-            <h5>Min-Max</h5>
-            <p>Boundaries are specified with min and max attributes.</p>
-            <pre v-code><code>
+        <h5>Min-Max</h5>
+        <p>Boundaries are specified with min and max attributes.</p>
+        <pre v-code><code>
 &lt;Slider v-model="value" :step="20" :min="50" :max="200" /&gt;
 
 </code></pre>
 
-            <h5>Properties</h5>
-            <p>Any valid attribute is passed to the root element implicitly, extended properties are as follows;</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>modelValue</td>
-                            <td>number</td>
-                            <td>0</td>
-                            <td>Value of the component.</td>
-                        </tr>
-                        <tr>
-                            <td>min</td>
-                            <td>number</td>
-                            <td>0</td>
-                            <td>Mininum boundary value.</td>
-                        </tr>
-                        <tr>
-                            <td>max</td>
-                            <td>number</td>
-                            <td>100</td>
-                            <td>Maximum boundary value.</td>
-                        </tr>
-                        <tr>
-                            <td>orientation</td>
-                            <td>string</td>
-                            <td>horizontal</td>
-                            <td>Orientation of the slider, valid values are horizontal and vertical.</td>
-                        </tr>
-                        <tr>
-                            <td>step</td>
-                            <td>number</td>
-                            <td>1</td>
-                            <td>Step factor to increment/decrement the value.</td>
-                        </tr>
-                        <tr>
-                            <td>range</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When speficed, allows two boundary values to be picked.</td>
-                        </tr>
-                        <tr>
-                            <td>disabled</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When present, it specifies that the component should be disabled.</td>
-                        </tr>
-                        <tr>
-                            <td>tabindex</td>
-                            <td>number</td>
-                            <td>null</td>
-                            <td>Index of the element in tabbing order.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <p>Any valid attribute is passed to the root element implicitly, extended properties are as follows;</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>modelValue</td>
+                        <td>number</td>
+                        <td>0</td>
+                        <td>Value of the component.</td>
+                    </tr>
+                    <tr>
+                        <td>min</td>
+                        <td>number</td>
+                        <td>0</td>
+                        <td>Mininum boundary value.</td>
+                    </tr>
+                    <tr>
+                        <td>max</td>
+                        <td>number</td>
+                        <td>100</td>
+                        <td>Maximum boundary value.</td>
+                    </tr>
+                    <tr>
+                        <td>orientation</td>
+                        <td>string</td>
+                        <td>horizontal</td>
+                        <td>Orientation of the slider, valid values are horizontal and vertical.</td>
+                    </tr>
+                    <tr>
+                        <td>step</td>
+                        <td>number</td>
+                        <td>1</td>
+                        <td>Step factor to increment/decrement the value.</td>
+                    </tr>
+                    <tr>
+                        <td>range</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When speficed, allows two boundary values to be picked.</td>
+                    </tr>
+                    <tr>
+                        <td>disabled</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When present, it specifies that the component should be disabled.</td>
+                    </tr>
+                    <tr>
+                        <td>tabindex</td>
+                        <td>number</td>
+                        <td>null</td>
+                        <td>Index of the element in tabbing order.</td>
+                    </tr>
+                    <tr>
+                        <td>aria-label</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Defines a string value that labels an interactive element.</td>
+                    </tr>
+                    <tr>
+                        <td>aria-labelledby</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Events</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>change</td>
-                            <td>value: Selected option value</td>
-                            <td>Callback to invoke on value change.</td>
-                        </tr>
-                        <tr>
-                            <td>slideend</td>
-                            <td>
-                                event.originalEvent: Original event <br />
-                                event.value: New value.
-                            </td>
-                            <td>Callback to invoke when slide ends.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Events</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>change</td>
+                        <td>value: Selected option value</td>
+                        <td>Callback to invoke on value change.</td>
+                    </tr>
+                    <tr>
+                        <td>slideend</td>
+                        <td>
+                            event.originalEvent: Original event <br />
+                            event.value: New value.
+                        </td>
+                        <td>Callback to invoke when slide ends.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-slider</td>
-                            <td>Container element</td>
-                        </tr>
-                        <tr>
-                            <td>p-slider-handle</td>
-                            <td>Handle element.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-slider</td>
+                        <td>Container element</td>
+                    </tr>
+                    <tr>
+                        <td>p-slider-handle</td>
+                        <td>Handle element.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Accessibility</h5>
-            <h6>Screen Reader</h6>
-            <p>
-                Slider element component uses <i>slider</i> role on the handle in addition to the <i>aria-orientation</i>, <i>aria-valuemin</i>, <i>aria-valuemax</i> and <i>aria-valuenow</i> attributes. Value to describe the component can be defined
-                using <i>aria-labelledby</i> and <i>aria-label</i> props.
-            </p>
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>
+            Slider element component uses <i>slider</i> role on the handle in addition to the <i>aria-orientation</i>, <i>aria-valuemin</i>, <i>aria-valuemax</i> and <i>aria-valuenow</i> attributes. Value to describe the component can be defined
+            using <i>aria-labelledby</i> and <i>aria-label</i> props.
+        </p>
 
-            <pre v-code><code>
+        <pre v-code><code>
 &lt;span id="label_number"&gt;Number&lt;/span&gt;
 &lt;Slider aria-labelledby="label_number" /&gt;
 
@@ -192,62 +203,61 @@ export default {
 
 </code></pre>
 
-            <h6>Keyboard Support</h6>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Key</th>
-                            <th>Function</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td><i>tab</i></td>
-                            <td>Moves focus to the slider.</td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <span class="inline-flex flex-column">
-                                    <i class="mb-1">left arrow</i>
-                                    <i>up arrow</i>
-                                </span>
-                            </td>
-                            <td>Decrements the value.</td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <span class="inline-flex flex-column">
-                                    <i class="mb-1">right arrow</i>
-                                    <i>down arrow</i>
-                                </span>
-                            </td>
-                            <td>Increments the value.</td>
-                        </tr>
-                        <tr>
-                            <td><i>home</i></td>
-                            <td>Set the minimum value.</td>
-                        </tr>
-                        <tr>
-                            <td><i>end</i></td>
-                            <td>Set the maximum value.</td>
-                        </tr>
-                        <tr>
-                            <td><i>page up</i></td>
-                            <td>Increments the value by 10 steps.</td>
-                        </tr>
-                        <tr>
-                            <td><i>page down</i></td>
-                            <td>Decrements the value by 10 steps.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h6>Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>tab</i></td>
+                        <td>Moves focus to the slider.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <span class="inline-flex flex-column">
+                                <i class="mb-1">left arrow</i>
+                                <i>up arrow</i>
+                            </span>
+                        </td>
+                        <td>Decrements the value.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <span class="inline-flex flex-column">
+                                <i class="mb-1">right arrow</i>
+                                <i>down arrow</i>
+                            </span>
+                        </td>
+                        <td>Increments the value.</td>
+                    </tr>
+                    <tr>
+                        <td><i>home</i></td>
+                        <td>Set the minimum value.</td>
+                    </tr>
+                    <tr>
+                        <td><i>end</i></td>
+                        <td>Set the maximum value.</td>
+                    </tr>
+                    <tr>
+                        <td><i>page up</i></td>
+                        <td>Increments the value by 10 steps.</td>
+                    </tr>
+                    <tr>
+                        <td><i>page down</i></td>
+                        <td>Decrements the value by 10 steps.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc>
-    </ClientOnly>
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
diff --git a/pages/speeddial/SpeedDialDoc.vue b/pages/speeddial/SpeedDialDoc.vue
index ad5ce6d65..bb2ceccfd 100644
--- a/pages/speeddial/SpeedDialDoc.vue
+++ b/pages/speeddial/SpeedDialDoc.vue
@@ -1,31 +1,30 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="SpeedDialDemo" :sources="sources" github="speeddial/SpeedDialDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="SpeedDialDemo" :sources="sources" github="speeddial/SpeedDialDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import SpeedDial from 'primevue/speeddial';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/speeddial/speeddial.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p>
-                When pressed, a floating action button can display multiple primary actions that can be performed on a page. It has a collection of additional options defined by the <i>model</i> property. SpeedDial's position is calculated according
-                to the container element with the position type style.
-            </p>
+        <h5>Getting Started</h5>
+        <p>
+            When pressed, a floating action button can display multiple primary actions that can be performed on a page. It has a collection of additional options defined by the <i>model</i> property. SpeedDial's position is calculated according to
+            the container element with the position type style.
+        </p>
 
-            <pre v-code><code>
+        <pre v-code><code>
 &lt;SpeedDial :model="items" /&gt;
 
 </code></pre>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 items: [
     {
         label: 'Add',
@@ -66,234 +65,375 @@ items: [
 
 </code></pre>
 
-            <h5>MenuModel API</h5>
-            <p>SpeedDial uses the common MenuModel API to define the items, visit <nuxt-link to="/menumodel">MenuModel API</nuxt-link> for details.</p>
+        <h5>MenuModel API</h5>
+        <p>SpeedDial uses the common MenuModel API to define the items, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p>
 
-            <h5>Type</h5>
-            <p>SpeedDial has 4 types; <i>linear</i>, <i>circle</i>, <i>semi-circle</i> and <i>quarter-circle</i>.</p>
+        <h5>Type</h5>
+        <p>SpeedDial has 4 types; <i>linear</i>, <i>circle</i>, <i>semi-circle</i> and <i>quarter-circle</i>.</p>
 
-            <h5>Direction</h5>
-            <p>
-                Specifies the opening direction of actions. For the <strong>linear</strong> and <strong>semi-circle</strong> types; <i>up</i>, <i>down</i>, <i>left</i> and <i>right</i>. For the <strong>quarter-circle</strong> type; <i>up-left</i>,
-                <i>up-right</i>, <i>down-left</i> and <i>down-right</i>.
-            </p>
+        <h5>Direction</h5>
+        <p>
+            Specifies the opening direction of actions. For the <strong>linear</strong> and <strong>semi-circle</strong> types; <i>up</i>, <i>down</i>, <i>left</i> and <i>right</i>. For the <strong>quarter-circle</strong> type; <i>up-left</i>,
+            <i>up-right</i>, <i>down-left</i> and <i>down-right</i>.
+        </p>
 
-            <h5>Properties</h5>
-            <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>model</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>MenuModel instance to define the action items.</td>
-                        </tr>
-                        <tr>
-                            <td>visible</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Specifies the visibility of the overlay.</td>
-                        </tr>
-                        <tr>
-                            <td>direction</td>
-                            <td>string</td>
-                            <td>up</td>
-                            <td>Specifies the opening direction of actions. Valid values are 'up', 'down', 'left', 'right', 'up-left', 'up-right', 'down-left' and 'down-right'</td>
-                        </tr>
-                        <tr>
-                            <td>transitionDelay</td>
-                            <td>number</td>
-                            <td>30</td>
-                            <td>Transition delay step for each action item.</td>
-                        </tr>
-                        <tr>
-                            <td>type</td>
-                            <td>string</td>
-                            <td>linear</td>
-                            <td>Specifies the opening type of actions.</td>
-                        </tr>
-                        <tr>
-                            <td>radius</td>
-                            <td>number</td>
-                            <td>0</td>
-                            <td>Radius for *circle types.</td>
-                        </tr>
-                        <tr>
-                            <td>mask</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Whether to show a mask element behind the speeddial</td>
-                        </tr>
-                        <tr>
-                            <td>disabled</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Whether the component is disabled.</td>
-                        </tr>
-                        <tr>
-                            <td>hideOnClickOutside</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether the actions close when clicked outside.</td>
-                        </tr>
-                        <tr>
-                            <td>buttonClass</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the button element.</td>
-                        </tr>
-                        <tr>
-                            <td>maskClass</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the mask element.</td>
-                        </tr>
-                        <tr>
-                            <td>maskStyle</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Inline style of the mask element.</td>
-                        </tr>
-                        <tr>
-                            <td>showIcon</td>
-                            <td>string</td>
-                            <td>pi pi-plus</td>
-                            <td>Show icon of the button element.</td>
-                        </tr>
-                        <tr>
-                            <td>hideIcon</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Hide icon of the button element.</td>
-                        </tr>
-                        <tr>
-                            <td>rotateAnimation</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Defined to rotate showIcon when hideIcon is not present.</td>
-                        </tr>
-                        <tr>
-                            <td>class</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the element.</td>
-                        </tr>
-                        <tr>
-                            <td>style</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Inline style of the element.</td>
-                        </tr>
-                        <tr>
-                            <td>tooltipOptions</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Whether to display the tooltip on items. The modifiers of <nuxt-link to="/tooltip">Tooltip</nuxt-link> can be used like an object in it. Valid keys are 'event' and 'position'.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>model</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>MenuModel instance to define the action items.</td>
+                    </tr>
+                    <tr>
+                        <td>visible</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Specifies the visibility of the overlay.</td>
+                    </tr>
+                    <tr>
+                        <td>direction</td>
+                        <td>string</td>
+                        <td>up</td>
+                        <td>Specifies the opening direction of actions. Valid values are 'up', 'down', 'left', 'right', 'up-left', 'up-right', 'down-left' and 'down-right'</td>
+                    </tr>
+                    <tr>
+                        <td>transitionDelay</td>
+                        <td>number</td>
+                        <td>30</td>
+                        <td>Transition delay step for each action item.</td>
+                    </tr>
+                    <tr>
+                        <td>type</td>
+                        <td>string</td>
+                        <td>linear</td>
+                        <td>Specifies the opening type of actions.</td>
+                    </tr>
+                    <tr>
+                        <td>radius</td>
+                        <td>number</td>
+                        <td>0</td>
+                        <td>Radius for *circle types.</td>
+                    </tr>
+                    <tr>
+                        <td>mask</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Whether to show a mask element behind the speeddial</td>
+                    </tr>
+                    <tr>
+                        <td>disabled</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Whether the component is disabled.</td>
+                    </tr>
+                    <tr>
+                        <td>hideOnClickOutside</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Whether the actions close when clicked outside.</td>
+                    </tr>
+                    <tr>
+                        <td>buttonClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the button element.</td>
+                    </tr>
+                    <tr>
+                        <td>maskClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the mask element.</td>
+                    </tr>
+                    <tr>
+                        <td>maskStyle</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Inline style of the mask element.</td>
+                    </tr>
+                    <tr>
+                        <td>showIcon</td>
+                        <td>string</td>
+                        <td>pi pi-plus</td>
+                        <td>Show icon of the button element.</td>
+                    </tr>
+                    <tr>
+                        <td>hideIcon</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Hide icon of the button element.</td>
+                    </tr>
+                    <tr>
+                        <td>rotateAnimation</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Defined to rotate showIcon when hideIcon is not present.</td>
+                    </tr>
+                    <tr>
+                        <td>class</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the element.</td>
+                    </tr>
+                    <tr>
+                        <td>style</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Inline style of the element.</td>
+                    </tr>
+                    <tr>
+                        <td>tooltipOptions</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Whether to display the tooltip on items. The modifiers of <router-link to="/tooltip">Tooltip</router-link> can be used like an object in it. Valid keys are 'event' and 'position'.</td>
+                    </tr>
+                    <tr>
+                        <td>aria-label</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Defines a string value that labels an interactive list element.</td>
+                    </tr>
+                    <tr>
+                        <td>aria-labelledby</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Identifier of the underlying list element.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Events</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>click</td>
-                            <td>event: Browser event.</td>
-                            <td>Fired when the button element clicked.</td>
-                        </tr>
-                        <tr>
-                            <td>show</td>
-                            <td>-</td>
-                            <td>Fired when the actions are visible.</td>
-                        </tr>
-                        <tr>
-                            <td>hide</td>
-                            <td>-</td>
-                            <td>Fired when the actions are hidden.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Events</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>click</td>
+                        <td>event: Browser event.</td>
+                        <td>Fired when the button element clicked.</td>
+                    </tr>
+                    <tr>
+                        <td>show</td>
+                        <td>-</td>
+                        <td>Fired when the actions are visible.</td>
+                    </tr>
+                    <tr>
+                        <td>hide</td>
+                        <td>-</td>
+                        <td>Fired when the actions are hidden.</td>
+                    </tr>
+                    <tr>
+                        <td>focus</td>
+                        <td>event</td>
+                        <td>Callback to invoke when the component receives focus.</td>
+                    </tr>
+                    <tr>
+                        <td>blur</td>
+                        <td>event</td>
+                        <td>Callback to invoke when the component loses focus.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Slots</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>item</td>
-                            <td>item: Custom template for item</td>
-                        </tr>
-                        <tr>
-                            <td>button</td>
-                            <td>toggle: toggle metadata</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Slots</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>item</td>
+                        <td>item: Custom template for item</td>
+                    </tr>
+                    <tr>
+                        <td>button</td>
+                        <td>toggle: toggle metadata</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-speeddial</td>
-                            <td>Container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-speeddial-button</td>
-                            <td>Button element of speeddial.</td>
-                        </tr>
-                        <tr>
-                            <td>p-speeddial-mask</td>
-                            <td>Mask element of speeddial.</td>
-                        </tr>
-                        <tr>
-                            <td>p-speeddial-list</td>
-                            <td>List of the actions.</td>
-                        </tr>
-                        <tr>
-                            <td>p-speeddial-item</td>
-                            <td>Each action item of list.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-speeddial</td>
+                        <td>Container element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-speeddial-button</td>
+                        <td>Button element of speeddial.</td>
+                    </tr>
+                    <tr>
+                        <td>p-speeddial-mask</td>
+                        <td>Mask element of speeddial.</td>
+                    </tr>
+                    <tr>
+                        <td>p-speeddial-list</td>
+                        <td>List of the actions.</td>
+                    </tr>
+                    <tr>
+                        <td>p-speeddial-item</td>
+                        <td>Each action item of list.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc>
-    </ClientOnly>
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>
+            SpeedDial component renders a native button element that implicitly includes any passed prop. Text to describe the button can be defined with the <i>aria-labelledby</i> or <i>aria-label</i> props. Addititonally the button includes
+            includes <i>aria-haspopup</i>, <i>aria-expanded</i> for states along with <i>aria-controls</i> to define the relation between the popup and the button.
+        </p>
+
+        <p>The popup overlay uses <i>menu</i> role on the list and each action item has a <i>menuitem</i> role with an <i>aria-label</i> as the menuitem label. The id of the menu refers to the <i>aria-controls</i> of the button.</p>
+
+        <pre v-code><code><template v-pre>
+&lt;SpeedDial aria-label="Options" /&gt;
+
+</template></code></pre>
+
+        <h6>Menu Button Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>Toggles the visibility of the menu.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>Toggles the visibility of the menu.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>down arrow</i>
+                        </td>
+                        <td>Opens the menu and moves focus to the first item.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>up arrow</i>
+                        </td>
+                        <td>Opens the menu and moves focus to the last item.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>right arrow</i>
+                        </td>
+                        <td>Opens the menu and moves focus to the last item.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>left arrow</i>
+                        </td>
+                        <td>Opens the menu and moves focus to the first item.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>escape</i>
+                        </td>
+                        <td>Closes the menu.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h6>Menu Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>Actives the menuitem, closes the menu and sets focus on the menu button.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>Actives the menuitem, closes the menu and sets focus on the menu button.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>escape</i>
+                        </td>
+                        <td>Closes the menu and sets focus on the menu button.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>arrow keys</i>
+                        </td>
+                        <td>Navigates between the menu items.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>home</i>
+                        </td>
+                        <td>Moves focus to the first item.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>end</i>
+                        </td>
+                        <td>Moves focus to the last item.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
@@ -914,7 +1054,7 @@ export default {
                 bottom: 0;
             }
 
-        
+
             .speeddial-delay-demo .p-speeddial-direction-up {
                 left: calc(50% - 2rem);
                 bottom: 0;
diff --git a/pages/speeddial/index.vue b/pages/speeddial/index.vue
index 238ace591..351b36ffe 100644
--- a/pages/speeddial/index.vue
+++ b/pages/speeddial/index.vue
@@ -12,34 +12,33 @@
             <div class="card">
                 <h5>Linear</h5>
                 <div class="speeddial-linear-demo" :style="{ position: 'relative', height: '500px' }">
-                    <SpeedDial :model="items" direction="up" />
                     <SpeedDial :model="items" direction="down" />
-                    <SpeedDial :model="items" direction="left" />
                     <SpeedDial :model="items" direction="right" />
+                    <SpeedDial :model="items" direction="left" />
+                    <SpeedDial :model="items" direction="up" />
                 </div>
             </div>
 
             <div class="card">
                 <h5>Circle, Semi-Circle and Quarter-Circle</h5>
                 <div class="speeddial-circle-demo" :style="{ position: 'relative', height: '500px' }">
-                    <SpeedDial :model="items" :radius="80" type="circle" buttonClass="p-button-warning" />
-                    <SpeedDial :model="items" :radius="80" direction="up" type="semi-circle" />
-                    <SpeedDial :model="items" :radius="80" direction="down" type="semi-circle" />
-                    <SpeedDial :model="items" :radius="80" direction="left" type="semi-circle" />
-                    <SpeedDial :model="items" :radius="80" direction="right" type="semi-circle" />
-                    <SpeedDial :model="items" :radius="120" direction="up-left" type="quarter-circle" buttonClass="p-button-success" />
-                    <SpeedDial :model="items" :radius="120" direction="up-right" type="quarter-circle" buttonClass="p-button-success" />
-                    <SpeedDial :model="items" :radius="120" direction="down-left" type="quarter-circle" buttonClass="p-button-success" />
                     <SpeedDial :model="items" :radius="120" direction="down-right" type="quarter-circle" buttonClass="p-button-success" />
+                    <SpeedDial :model="items" :radius="80" direction="down" type="semi-circle" />
+                    <SpeedDial :model="items" :radius="120" direction="down-left" type="quarter-circle" buttonClass="p-button-success" />
+                    <SpeedDial :model="items" :radius="80" direction="right" type="semi-circle" />
+                    <SpeedDial :model="items" :radius="80" type="circle" buttonClass="p-button-warning" />
+                    <SpeedDial :model="items" :radius="80" direction="left" type="semi-circle" />
+                    <SpeedDial :model="items" :radius="120" direction="up-right" type="quarter-circle" buttonClass="p-button-success" />
+                    <SpeedDial :model="items" :radius="80" direction="up" type="semi-circle" />
+                    <SpeedDial :model="items" :radius="120" direction="up-left" type="quarter-circle" buttonClass="p-button-success" />
                 </div>
             </div>
 
             <div class="card">
                 <h5>Tooltip</h5>
                 <div class="speeddial-tooltip-demo" :style="{ position: 'relative', height: '350px' }">
-                    <SpeedDial :model="items" direction="up" class="speeddial-right" buttonClass="p-button-danger" :tooltipOptions="{ position: 'left' }" />
-
                     <SpeedDial :model="items" direction="up" class="speeddial-left" buttonClass="p-button-help" :tooltipOptions="{ position: 'right' }" />
+                    <SpeedDial :model="items" direction="up" class="speeddial-right" buttonClass="p-button-danger" :tooltipOptions="{ position: 'left' }" />
                 </div>
             </div>
 
diff --git a/pages/splitbutton/SplitButtonDoc.vue b/pages/splitbutton/SplitButtonDoc.vue
index b70eef228..f9b25c800 100755
--- a/pages/splitbutton/SplitButtonDoc.vue
+++ b/pages/splitbutton/SplitButtonDoc.vue
@@ -1,27 +1,26 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="SplitButtonDemo" :sources="sources" github="splitbutton/SplitButtonDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="SplitButtonDemo" :sources="sources" github="splitbutton/SplitButtonDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import SplitButton from 'primevue/splitbutton';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/splitbutton/splitbutton.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p>SplitButton has a default command button and a collection of additional options defined by the <i>model</i> property.</p>
-            <pre v-code><code>
+        <h5>Getting Started</h5>
+        <p>SplitButton has a default command button and a collection of additional options defined by the <i>model</i> property.</p>
+        <pre v-code><code>
 &lt;SplitButton label="Save" icon="pi pi-plus" :model="items"&gt;&lt;/SplitButton&gt;
 
 </code></pre>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 export default {
 	data() {
 		return {
@@ -59,22 +58,22 @@ export default {
 
 </code></pre>
 
-            <h5>MenuModel</h5>
-            <p>SplitButton uses the common MenuModel API to define the items, visit <nuxt-link to="/menumodel">MenuModel API</nuxt-link> for details.</p>
+        <h5>MenuModel</h5>
+        <p>SplitButton uses the common MenuModel API to define the items, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p>
 
-            <h5>Severity</h5>
-            <p>Different color options are available as severity levels.</p>
+        <h5>Severity</h5>
+        <p>Different color options are available as severity levels.</p>
 
-            <ul>
-                <li>.p-button-secondary</li>
-                <li>.p-button-success</li>
-                <li>.p-button-info</li>
-                <li>.p-button-warning</li>
-                <li>.p-button-help</li>
-                <li>.p-button-danger</li>
-            </ul>
+        <ul>
+            <li>.p-button-secondary</li>
+            <li>.p-button-success</li>
+            <li>.p-button-info</li>
+            <li>.p-button-warning</li>
+            <li>.p-button-help</li>
+            <li>.p-button-danger</li>
+        </ul>
 
-            <pre v-code><code>
+        <pre v-code><code>
 &lt;SplitButton label="Primary" :model="items"&gt;&lt;/SplitButton&gt;
 &lt;SplitButton label="Secondary" :model="items" class="p-button-secondary"&gt;&lt;/SplitButton&gt;
 &lt;SplitButton label="Success" :model="items" class="p-button-success"&gt;&lt;/SplitButton&gt;
@@ -85,16 +84,16 @@ export default {
 
 </code></pre>
 
-            <h5>Raised and Rounded Buttons</h5>
-            <p>SplitButton can be raised by having "p-button-raised" style class and similarly borders can be made rounded using "p-button-rounded" class.</p>
-            <pre v-code><code>
+        <h5>Raised and Rounded Buttons</h5>
+        <p>SplitButton can be raised by having "p-button-raised" style class and similarly borders can be made rounded using "p-button-rounded" class.</p>
+        <pre v-code><code>
 &lt;SplitButton label="Proceed" :model="items" class="p-button-raised p-button-rounded"&gt;&lt;/SplitButton&gt;
 
 </code></pre>
 
-            <h5>Templating</h5>
-            <p>Button part of the content can easily be customized with the default slot instead of using the built-in modes.</p>
-            <pre v-code><code>
+        <h5>Templating</h5>
+        <p>Button part of the content can easily be customized with the default slot instead of using the built-in modes.</p>
+        <pre v-code><code>
 &lt;SplitButton :model="items" class="bg-primary border-round"&gt;
     &lt;Button @click="save"&gt;
         &lt;img alt="logo" src="../../assets/images/logo.svg" style="width: 1rem" /&gt;
@@ -104,123 +103,280 @@ export default {
 
 </code></pre>
 
-            <h5>Properties</h5>
-            <p>Any property such as tabindex are passed to the underlying input element. Following are the additional properties to configure the component.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>label</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Text of the button.</td>
-                        </tr>
-                        <tr>
-                            <td>icon</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Name of the icon.</td>
-                        </tr>
-                        <tr>
-                            <td>model</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>MenuModel instance to define the overlay items.</td>
-                        </tr>
-                        <tr>
-                            <td>autoZIndex</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether to automatically manage layering.</td>
-                        </tr>
-                        <tr>
-                            <td>baseZIndex</td>
-                            <td>number</td>
-                            <td>0</td>
-                            <td>Base zIndex value to use in layering.</td>
-                        </tr>
-                        <tr>
-                            <td>appendTo</td>
-                            <td>string</td>
-                            <td>body</td>
-                            <td>A valid query selector or an HTMLElement to specify where the overlay gets attached.</td>
-                        </tr>
-                        <tr>
-                            <td>style</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Style class of the component.</td>
-                        </tr>
-                        <tr>
-                            <td>class</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Inline style of the component.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <p>Any property such as tabindex are passed to the underlying input element. Following are the additional properties to configure the component.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>label</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Text of the button.</td>
+                    </tr>
+                    <tr>
+                        <td>icon</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Name of the icon.</td>
+                    </tr>
+                    <tr>
+                        <td>model</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>MenuModel instance to define the overlay items.</td>
+                    </tr>
+                    <tr>
+                        <td>autoZIndex</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Whether to automatically manage layering.</td>
+                    </tr>
+                    <tr>
+                        <td>baseZIndex</td>
+                        <td>number</td>
+                        <td>0</td>
+                        <td>Base zIndex value to use in layering.</td>
+                    </tr>
+                    <tr>
+                        <td>appendTo</td>
+                        <td>string</td>
+                        <td>body</td>
+                        <td>A valid query selector or an HTMLElement to specify where the overlay gets attached.</td>
+                    </tr>
+                    <tr>
+                        <td>disabled</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When present, it specifies that the element should be disabled.</td>
+                    </tr>
+                    <tr>
+                        <td>style</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Style class of the component.</td>
+                    </tr>
+                    <tr>
+                        <td>class</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Inline style of the component.</td>
+                    </tr>
+                    <tr>
+                        <td>buttonProps</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Uses to pass all properties of the HTMLButtonElement to the default button.</td>
+                    </tr>
+                    <tr>
+                        <td>menuButtonProps</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Uses to pass all properties of the HTMLButtonElement to the menu button.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Events</h5>
-            <p>Any valid event such as focus, blur and input are passed to the underlying button element. Following are the additional events to configure the component.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>click</td>
-                            <td>event: Browser event</td>
-                            <td>Callback to invoke when main button is clicked.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Events</h5>
+        <p>Any valid event such as focus, blur and input are passed to the underlying button element. Following are the additional events to configure the component.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>click</td>
+                        <td>event: Browser event</td>
+                        <td>Callback to invoke when main button is clicked.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-splitbutton</td>
-                            <td>Container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-splitbutton-button</td>
-                            <td>Dropdown button.</td>
-                        </tr>
-                        <tr>
-                            <td>p-menu</td>
-                            <td>Overlay menu.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-splitbutton</td>
+                        <td>Container element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-splitbutton-defaultbutton</td>
+                        <td>Default button.</td>
+                    </tr>
+                    <tr>
+                        <td>p-splitbutton-menubutton</td>
+                        <td>Dropdown button.</td>
+                    </tr>
+                    <tr>
+                        <td>p-tieredmenu</td>
+                        <td>Overlay menu.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc>
-    </ClientOnly>
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>
+            SplitButton component renders two native button elements, main button uses the label property to define <i>aria-label</i> by default which can be customized with <i>buttonProps</i>. Dropdown button requires an explicit definition to
+            describe it using <i>menuButtonProps</i> option and also includes <i>aria-haspopup</i>, <i>aria-expanded</i> for states along with <i>aria-controls</i> to define the relation between the popup and the button.
+        </p>
+
+        <p>The popup overlay uses <i>menu</i> role on the list and each action item has a <i>menuitem</i> role with an <i>aria-label</i> as the menuitem label. The id of the menu refers to the <i>aria-controls</i> of the dropdown button.</p>
+        <pre v-code><code>
+&lt;SplitButton :buttonProps="{'aria-label': 'Default Action'}" :menuButtonProps="{'aria-label': 'More Options'}" /&gt;
+
+</code></pre>
+
+        <h6>Main Button Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>Activates the button.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>Activates the button.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h6>Menu Button Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <span class="inline-flex flex-column">
+                                <i class="mb-1">enter</i>
+                                <i class="mb-1">space</i>
+                                <i class="mb-1">down arrow</i>
+                                <i>up arrow</i>
+                            </span>
+                        </td>
+                        <td>Opens the menu and moves focus to the first item.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h6>Menu Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>If menuitem has a submenu, opens the submenu otherwise activates the menuitem and closes all open overlays.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>If menuitem has a submenu, opens the submenu otherwise activates the menuitem and closes all open overlays.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>escape</i>
+                        </td>
+                        <td>If focus is inside a popup submenu, closes the submenu and moves focus to the root item of the closed submenu.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>down arrow</i>
+                        </td>
+                        <td>Moves focus to the next menuitem within the submenu.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>up arrow</i>
+                        </td>
+                        <td>Moves focus to the previous menuitem within the submenu.</td>
+                    </tr>
+                    <tr>
+                        <td><i>alt</i> + <i>up arrow</i></td>
+                        <td>Closes the popup, then moves focus to the target element.</td>
+                    </tr>
+                    <tr>
+                        <td><i>right arrow</i></td>
+                        <td>In nested mode if option is closed, opens the option otherwise moves focus to the first child option.</td>
+                    </tr>
+                    <tr>
+                        <td><i>left arrow</i></td>
+                        <td>In nested mode if option is open, closes the option otherwise moves focus to the parent option.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>home</i>
+                        </td>
+                        <td>Moves focus to the first menuitem within the submenu.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>end</i>
+                        </td>
+                        <td>Moves focus to the last menuitem within the submenu.</td>
+                    </tr>
+                    <tr>
+                        <td><i>any printable character</i></td>
+                        <td>Moves focus to the menuitem whose label starts with the characters being typed.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
diff --git a/pages/splitbutton/index.vue b/pages/splitbutton/index.vue
index 3f4ffe74c..da343b832 100755
--- a/pages/splitbutton/index.vue
+++ b/pages/splitbutton/index.vue
@@ -11,7 +11,7 @@
         <div class="content-section implementation">
             <div class="card">
                 <h5>Basic</h5>
-                <SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items"></SplitButton>
+                <SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items" :buttonProps="{ 'aria-label': 'Default Action' }" :menuButtonProps="{ 'aria-label': 'More Options' }"></SplitButton>
 
                 <h5>Nested</h5>
                 <SplitButton label="Save" icon="pi pi-plus" @click="save" :model="nestedItems"></SplitButton>
diff --git a/pages/splitter/SplitterDoc.vue b/pages/splitter/SplitterDoc.vue
index ccd7c6f35..8aa2d6ea6 100644
--- a/pages/splitter/SplitterDoc.vue
+++ b/pages/splitter/SplitterDoc.vue
@@ -1,24 +1,23 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="SplitterDemo" :sources="sources" github="splitter/SplitterDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="SplitterDemo" :sources="sources" github="splitter/SplitterDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import Splitter from 'primevue/splitter';
 import SplitterPanel from 'primevue/splitterpanel';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/splitter/splitter.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/splitterpanel/splitterpanel.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p>Splitter requires two SplitterPanel components to wrap.</p>
-            <pre v-code><code>
+        <h5>Getting Started</h5>
+        <p>Splitter requires two SplitterPanel components to wrap.</p>
+        <pre v-code><code>
 &lt;Splitter style="height: 300px"&gt;
 	&lt;SplitterPanel&gt;
 		Panel 1
@@ -30,9 +29,9 @@ import SplitterPanel from 'primevue/splitterpanel';
 
 </code></pre>
 
-            <h5>Multiple Panels</h5>
-            <p>Any number of panels can be nested inside a Splitter.</p>
-            <pre v-code><code><template v-pre>
+        <h5>Multiple Panels</h5>
+        <p>Any number of panels can be nested inside a Splitter.</p>
+        <pre v-code><code><template v-pre>
 &lt;Splitter style="height: 300px"&gt;
 	&lt;SplitterPanel v-for="item of items" :key="item.key"&gt;
 		{{item.content}}
@@ -41,9 +40,9 @@ import SplitterPanel from 'primevue/splitterpanel';
 </template>
 </code></pre>
 
-            <h5>Layout</h5>
-            <p>Default orientation is configured with the <i>layout</i> property and default is the "horizontal" whereas other alternative is the "vertical".</p>
-            <pre v-code><code>
+        <h5>Layout</h5>
+        <p>Default orientation is configured with the <i>layout</i> property and default is the "horizontal" whereas other alternative is the "vertical".</p>
+        <pre v-code><code>
 &lt;Splitter style="height: 300px" layout="vertical"&gt;
 	&lt;SplitterPanel&gt;
 		Panel 1
@@ -55,9 +54,9 @@ import SplitterPanel from 'primevue/splitterpanel';
 
 </code></pre>
 
-            <h5>Initial Sizes</h5>
-            <p>When no size is defined, panels are split 50/50, use the <i>size</i> property to give relative widths e.g. 20/80.</p>
-            <pre v-code><code>
+        <h5>Initial Sizes</h5>
+        <p>When no size is defined, panels are split 50/50, use the <i>size</i> property to give relative widths e.g. 20/80.</p>
+        <pre v-code><code>
 &lt;Splitter style="height: 300px"&gt;
 	&lt;SplitterPanel :size="20" &gt;
 		Panel 1
@@ -69,9 +68,9 @@ import SplitterPanel from 'primevue/splitterpanel';
 
 </code></pre>
 
-            <h5>Minimum Size</h5>
-            <p>Minimum size defines the lowest boundary for the size of a panel.</p>
-            <pre v-code><code>
+        <h5>Minimum Size</h5>
+        <p>Minimum size defines the lowest boundary for the size of a panel.</p>
+        <pre v-code><code>
 &lt;Splitter style="height: 300px"&gt;
 	&lt;SplitterPanel :size="20" :minSize="10"&gt;
 		Panel 1
@@ -83,9 +82,9 @@ import SplitterPanel from 'primevue/splitterpanel';
 
 </code></pre>
 
-            <h5>Nested Panels</h5>
-            <p>Splitters can be combined to create advanced layouts.</p>
-            <pre v-code><code>
+        <h5>Nested Panels</h5>
+        <p>Splitters can be combined to create advanced layouts.</p>
+        <pre v-code><code>
 &lt;Splitter style="height: 300px"&gt;
 	&lt;SplitterPanel class="flex align-items-center justify-content-center" :size="20" :minSize="10"&gt;
 		Panel 1
@@ -111,12 +110,12 @@ import SplitterPanel from 'primevue/splitterpanel';
 
 </code></pre>
 
-            <h5>Stateful</h5>
-            <p>
-                Splitters can be configured as stateful so that when the user visits the page again, the adjusts sizes can be restored. Define a <i>stateKey</i> to enable this feature. Default location of the state is session storage and other option
-                is the local storage which can be configured using the <i>stateStorage</i> property.
-            </p>
-            <pre v-code><code>
+        <h5>Stateful</h5>
+        <p>
+            Splitters can be configured as stateful so that when the user visits the page again, the adjusts sizes can be restored. Define a <i>stateKey</i> to enable this feature. Default location of the state is session storage and other option is
+            the local storage which can be configured using the <i>stateStorage</i> property.
+        </p>
+        <pre v-code><code>
 &lt;Splitter stateKey="mykey" stateStorage="local"&gt;
 	&lt;SplitterPanel&gt;
 		Panel 1
@@ -128,9 +127,9 @@ import SplitterPanel from 'primevue/splitterpanel';
 
 </code></pre>
 
-            <h5>Steps</h5>
-            <p>Step factor is 5px by default and can be customized with <i>step</i> option.</p>
-            <pre v-code><code>
+        <h5>Steps</h5>
+        <p>Step factor is 5px by default and can be customized with <i>step</i> option.</p>
+        <pre v-code><code>
 &lt;Splitter :step="10"&gt;
 	&lt;SplitterPanel&gt;
 		Panel 1
@@ -142,192 +141,197 @@ import SplitterPanel from 'primevue/splitterpanel';
 
 </code></pre>
 
-            <h5>Properties of SplitterPanel</h5>
-            <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>size</td>
-                            <td>number</td>
-                            <td>null</td>
-                            <td>Size of the element relative to 100%.</td>
-                        </tr>
-                        <tr>
-                            <td>minSize</td>
-                            <td>number</td>
-                            <td>null</td>
-                            <td>Minimum size of the element relative to 100%.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties of SplitterPanel</h5>
+        <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>size</td>
+                        <td>number</td>
+                        <td>null</td>
+                        <td>Size of the element relative to 100%.</td>
+                    </tr>
+                    <tr>
+                        <td>minSize</td>
+                        <td>number</td>
+                        <td>null</td>
+                        <td>Minimum size of the element relative to 100%.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Properties of Splitter</h5>
-            <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>layout</td>
-                            <td>string</td>
-                            <td>horizontal</td>
-                            <td>Orientation of the panels, valid values are "horizontal" and "vertical".</td>
-                        </tr>
-                        <tr>
-                            <td>gutterSize</td>
-                            <td>number</td>
-                            <td>4</td>
-                            <td>Size of the divider in pixels.</td>
-                        </tr>
-                        <tr>
-                            <td>stateKey</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Storage identifier of a stateful Splitter.</td>
-                        </tr>
-                        <tr>
-                            <td>stateStorage</td>
-                            <td>string</td>
-                            <td>session</td>
-                            <td>Defines where a stateful splitter keeps its state, valid values are "session" for sessionStorage and "local" for localStorage.</td>
-                        </tr>
-                        <tr>
-                            <td>step</td>
-                            <td>number</td>
-                            <td>5</td>
-                            <td>Step factor to increment/decrement the size of the panels while pressing the arrow keys.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties of Splitter</h5>
+        <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>layout</td>
+                        <td>string</td>
+                        <td>horizontal</td>
+                        <td>Orientation of the panels, valid values are "horizontal" and "vertical".</td>
+                    </tr>
+                    <tr>
+                        <td>gutterSize</td>
+                        <td>number</td>
+                        <td>4</td>
+                        <td>Size of the divider in pixels.</td>
+                    </tr>
+                    <tr>
+                        <td>stateKey</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Storage identifier of a stateful Splitter.</td>
+                    </tr>
+                    <tr>
+                        <td>stateStorage</td>
+                        <td>string</td>
+                        <td>session</td>
+                        <td>Defines where a stateful splitter keeps its state, valid values are "session" for sessionStorage and "local" for localStorage.</td>
+                    </tr>
+                    <tr>
+                        <td>step</td>
+                        <td>number</td>
+                        <td>5</td>
+                        <td>Step factor to increment/decrement the size of the panels while pressing the arrow keys.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Events of Splitter</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>resizeend</td>
-                            <td>
-                                event.originalEvent: Original event <br />
-                                event.sizes: Sizes of the panels as an array
-                            </td>
-                            <td>Callback to invoke when resize ends.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Events of Splitter</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>resizestart</td>
+                        <td>
+                            event.originalEvent: Original event <br />
+                            event.sizes: Sizes of the panels as an array
+                        </td>
+                        <td>Callback to invoke when resize starts.</td>
+                    </tr>
+                    <tr>
+                        <td>resizeend</td>
+                        <td>
+                            event.originalEvent: Original event <br />
+                            event.sizes: Sizes of the panels as an array
+                        </td>
+                        <td>Callback to invoke when resize ends.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-splitter</td>
-                            <td>Container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-splitter</td>
-                            <td>Container element during resize.</td>
-                        </tr>
-                        <tr>
-                            <td>p-splitter-horizontal</td>
-                            <td>Container element with horizontal layout.</td>
-                        </tr>
-                        <tr>
-                            <td>p-splitter-vertical</td>
-                            <td>Container element with vertical layout.</td>
-                        </tr>
-                        <tr>
-                            <td>p-splitter-panel</td>
-                            <td>Splitter panel element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-splitter-gutter</td>
-                            <td>Gutter element to use when resizing the panels.</td>
-                        </tr>
-                        <tr>
-                            <td>p-splitter-gutter-handle</td>
-                            <td>Handl element of the gutter.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-splitter</td>
+                        <td>Container element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-splitter</td>
+                        <td>Container element during resize.</td>
+                    </tr>
+                    <tr>
+                        <td>p-splitter-horizontal</td>
+                        <td>Container element with horizontal layout.</td>
+                    </tr>
+                    <tr>
+                        <td>p-splitter-vertical</td>
+                        <td>Container element with vertical layout.</td>
+                    </tr>
+                    <tr>
+                        <td>p-splitter-panel</td>
+                        <td>Splitter panel element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-splitter-gutter</td>
+                        <td>Gutter element to use when resizing the panels.</td>
+                    </tr>
+                    <tr>
+                        <td>p-splitter-gutter-handle</td>
+                        <td>Handle element of the gutter.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Accessibility</h5>
-            <DevelopmentSection>
-                <h6>Screen Reader</h6>
-                <p>Splitter bar defines <i>separator</i> as the role with <i>aria-orientation</i> set to either horizontal or vertical.</p>
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>Splitter bar defines <i>separator</i> as the role with <i>aria-orientation</i> set to either horizontal or vertical.</p>
 
-                <h6>Keyboard Support</h6>
-                <div class="doc-tablewrapper">
-                    <table class="doc-table">
-                        <thead>
-                            <tr>
-                                <th>Key</th>
-                                <th>Function</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr>
-                                <td><i>tab</i></td>
-                                <td>Moves focus through the splitter bar.</td>
-                            </tr>
-                            <tr>
-                                <td><i>down arrow</i></td>
-                                <td>Moves a vertical splitter down.</td>
-                            </tr>
-                            <tr>
-                                <td><i>up arrow</i></td>
-                                <td>Moves a vertical splitter up.</td>
-                            </tr>
-                            <tr>
-                                <td><i>left arrow</i></td>
-                                <td>Moves a horizontal splitter to the left.</td>
-                            </tr>
-                            <tr>
-                                <td><i>right arrow</i></td>
-                                <td>Moves a horizontal splitter to the right.</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-            </DevelopmentSection>
+        <h6>Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>tab</i></td>
+                        <td>Moves focus through the splitter bar.</td>
+                    </tr>
+                    <tr>
+                        <td><i>down arrow</i></td>
+                        <td>Moves a vertical splitter down.</td>
+                    </tr>
+                    <tr>
+                        <td><i>up arrow</i></td>
+                        <td>Moves a vertical splitter up.</td>
+                    </tr>
+                    <tr>
+                        <td><i>left arrow</i></td>
+                        <td>Moves a horizontal splitter to the left.</td>
+                    </tr>
+                    <tr>
+                        <td><i>right arrow</i></td>
+                        <td>Moves a horizontal splitter to the right.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc>
-    </ClientOnly>
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
diff --git a/pages/steps/Confirmation.vue b/pages/steps/Confirmation.vue
deleted file mode 100755
index 86b7546e4..000000000
--- a/pages/steps/Confirmation.vue
+++ /dev/null
@@ -1,69 +0,0 @@
-<template>
-    <div class="stepsdemo-content">
-        <ClientOnly>
-            <Card>
-                <template v-slot:title> Confirmation </template>
-                <template v-slot:content>
-                    <div class="field col-12">
-                        <label for="class">Name</label>
-                        <b>{{ formData.firstname ? formData.firstname : '-' }} {{ formData.lastname ? formData.lastname : '-' }}</b>
-                    </div>
-                    <div class="field col-12">
-                        <label for="Age">Age</label>
-                        <b>{{ formData.age ? formData.age : '-' }}</b>
-                    </div>
-                    <div class="field col-12">
-                        <label for="Age">Seat Class</label>
-                        <b>{{ formData.class ? formData.class : '-' }}</b>
-                    </div>
-                    <div class="field col-12">
-                        <label for="Age">Wagon Number</label>
-                        <b>{{ formData.vagon ? formData.vagon : '-' }}</b>
-                    </div>
-                    <div class="field col-12">
-                        <label for="Age">Seat</label>
-                        <b>{{ formData.seat ? formData.seat : '-' }}</b>
-                    </div>
-                    <div class="field col-12">
-                        <label for="Age">Cardholder Name</label>
-                        <b>{{ formData.cardholderName ? formData.cardholderName : '-' }}</b>
-                    </div>
-                    <div class="field col-12">
-                        <label for="Age">Card Number</label>
-                        <b>{{ formData.cardholderNumber ? formData.cardholderNumber : '-' }}</b>
-                    </div>
-                    <div class="field col-12">
-                        <label for="Age">Date</label>
-                        <b>{{ formData.date ? formData.date : '-' }}</b>
-                    </div>
-                    <div class="field col-12">
-                        <label for="Age">CVV</label>
-                        <b>{{ formData.cvv && formData.cvv.length === 3 ? '**' + formData.cvv[2] : '-' }}</b>
-                    </div>
-                </template>
-                <template v-slot:footer>
-                    <div class="grid grid-nogutter justify-content-between">
-                        <Button label="Back" @click="prevPage()" icon="pi pi-angle-left" />
-                        <Button label="Complete" @click="complete()" icon="pi pi-check" iconPos="right" class="p-button-success" />
-                    </div>
-                </template>
-            </Card>
-        </ClientOnly>
-    </div>
-</template>
-
-<script>
-export default {
-    props: {
-        formData: Object
-    },
-    methods: {
-        prevPage() {
-            this.$emit('prev-page', { pageIndex: 3 });
-        },
-        complete() {
-            this.$emit('complete');
-        }
-    }
-};
-</script>
diff --git a/pages/steps/ConfirmationDemo.vue b/pages/steps/ConfirmationDemo.vue
new file mode 100755
index 000000000..487cb18a0
--- /dev/null
+++ b/pages/steps/ConfirmationDemo.vue
@@ -0,0 +1,68 @@
+<template>
+    <div class="stepsdemo-content">
+        <Card>
+            <template v-slot:title> Confirmation </template>
+            <template v-slot:content>
+                <div class="field col-12">
+                    <label for="class">Name</label>
+                    <b>{{ formData.firstname ? formData.firstname : '-' }} {{ formData.lastname ? formData.lastname : '-' }}</b>
+                </div>
+                <div class="field col-12">
+                    <label for="Age">Age</label>
+                    <b>{{ formData.age ? formData.age : '-' }}</b>
+                </div>
+                <div class="field col-12">
+                    <label for="Age">Seat Class</label>
+                    <b>{{ formData.class ? formData.class : '-' }}</b>
+                </div>
+                <div class="field col-12">
+                    <label for="Age">Wagon Number</label>
+                    <b>{{ formData.vagon ? formData.vagon : '-' }}</b>
+                </div>
+                <div class="field col-12">
+                    <label for="Age">Seat</label>
+                    <b>{{ formData.seat ? formData.seat : '-' }}</b>
+                </div>
+                <div class="field col-12">
+                    <label for="Age">Cardholder Name</label>
+                    <b>{{ formData.cardholderName ? formData.cardholderName : '-' }}</b>
+                </div>
+                <div class="field col-12">
+                    <label for="Age">Card Number</label>
+                    <b>{{ formData.cardholderNumber ? formData.cardholderNumber : '-' }}</b>
+                </div>
+                <div class="field col-12">
+                    <label for="Age">Date</label>
+                    <b>{{ formData.date ? formData.date : '-' }}</b>
+                </div>
+                <div class="field col-12">
+                    <label for="Age">CVV</label>
+                    <b>{{ formData.cvv && formData.cvv.length === 3 ? '**' + formData.cvv[2] : '-' }}</b>
+                </div>
+            </template>
+            <template v-slot:footer>
+                <div class="grid grid-nogutter justify-content-between">
+                    <Button label="Back" @click="prevPage()" icon="pi pi-angle-left" />
+                    <Button label="Complete" @click="complete()" icon="pi pi-check" iconPos="right" class="p-button-success" />
+                </div>
+            </template>
+        </Card>
+    </div>
+</template>
+
+<script>
+export default {
+    emits: ['prev-page', 'complete'],
+    props: {
+        formData: Object
+    },
+    methods: {
+        prevPage() {
+            this.$emit('prev-page', { pageIndex: 3 });
+        },
+        complete() {
+            this.$emit('complete');
+        }
+    }
+};
+</script>
diff --git a/pages/steps/Payment.vue b/pages/steps/PaymentDemo.vue
similarity index 85%
rename from pages/steps/Payment.vue
rename to pages/steps/PaymentDemo.vue
index 80d064bb9..4174abb3a 100755
--- a/pages/steps/Payment.vue
+++ b/pages/steps/PaymentDemo.vue
@@ -7,19 +7,19 @@
                 <div class="p-fluid formgrid grid">
                     <div class="field col-12">
                         <label for="class">Card Holder Name</label>
-                        <InputText type="text" v-model="cardholderName" />
+                        <InputText v-model="cardholderName" type="text" />
                     </div>
                     <div class="field col-8">
                         <label id="number" for="lastname">Number</label>
-                        <InputMask id="number" mask="9999-9999-9999-9999" v-model="cardholderNumber" />
+                        <InputMask id="number" v-model="cardholderNumber" mask="9999-9999-9999-9999" />
                     </div>
                     <div class="field col-2">
                         <label id="date" for="date">Date</label>
-                        <InputMask id="date" mask="99/99" v-model="date" />
+                        <InputMask id="date" v-model="date" mask="99/99" />
                     </div>
                     <div class="field col-2">
                         <label for="cvv">CVV</label>
-                        <InputMask id="cvv" mask="999" v-model="cvv" />
+                        <InputMask id="cvv" v-model="cvv" mask="999" />
                     </div>
                     <div class="field-checkbox col-12">
                         <Checkbox id="remember" v-model="remember" :binary="true" />
@@ -39,6 +39,7 @@
 
 <script>
 export default {
+    emits: ['next-page', 'prev-page'],
     data() {
         return {
             cardholderName: '',
diff --git a/pages/steps/Personal.vue b/pages/steps/PersonalDemo.vue
similarity index 98%
rename from pages/steps/Personal.vue
rename to pages/steps/PersonalDemo.vue
index 6bd4edd46..bc8d2bdc8 100755
--- a/pages/steps/Personal.vue
+++ b/pages/steps/PersonalDemo.vue
@@ -33,6 +33,7 @@
 
 <script>
 export default {
+    emits: ['next-page'],
     data() {
         return {
             firstname: '',
@@ -45,6 +46,7 @@ export default {
     methods: {
         nextPage() {
             this.submitted = true;
+
             if (this.validateForm()) {
                 this.$emit('next-page', { formData: { firstname: this.firstname, lastname: this.lastname, age: this.age }, pageIndex: 0 });
             }
diff --git a/pages/steps/Seat.vue b/pages/steps/SeatDemo.vue
similarity index 86%
rename from pages/steps/Seat.vue
rename to pages/steps/SeatDemo.vue
index eee18b133..b122c968f 100755
--- a/pages/steps/Seat.vue
+++ b/pages/steps/SeatDemo.vue
@@ -7,15 +7,15 @@
                 <div class="p-fluid formgrid grid">
                     <div class="field col-12 md:col-6">
                         <label for="class">Class</label>
-                        <Dropdown inputId="class" v-model="selectedClass" :options="classes" @change="setWagons($event)" optionLabel="name" placeholder="Select a Class" />
+                        <Dropdown v-model="selectedClass" inputId="class" :options="classes" @change="setWagons($event)" optionLabel="name" placeholder="Select a Class" />
                     </div>
                     <div class="field col-12 md:col-6">
                         <label for="lastname">Wagon</label>
-                        <Dropdown inputId="wagon" v-model="selectedWagon" :options="wagons" @change="setSeats($event)" optionLabel="wagon" placeholder="Select a Wagon" />
+                        <Dropdown v-model="selectedWagon" inputId="wagon" :options="wagons" @change="setSeats($event)" optionLabel="wagon" placeholder="Select a Wagon" />
                     </div>
                     <div class="field col-12">
                         <label for="seat">Seat</label>
-                        <Dropdown inputId="seat" v-model="selectedSeat" :options="seats" optionLabel="seat" placeholder="Select a Seat" />
+                        <Dropdown v-model="selectedSeat" inputId="seat" :options="seats" optionLabel="seat" placeholder="Select a Seat" />
                     </div>
                 </div>
             </template>
@@ -31,6 +31,7 @@
 
 <script>
 export default {
+    emits: ['next-page', 'prev-page'],
     data() {
         return {
             selectedClass: '',
@@ -50,6 +51,7 @@ export default {
             if (this.selectedClass && event.value) {
                 this.wagons = [];
                 this.seats = [];
+
                 for (let i = 1; i < 3 * event.value.factor; i++) {
                     this.wagons.push({ wagon: i + event.value.code, type: event.value.name, factor: event.value.factor });
                 }
@@ -58,6 +60,7 @@ export default {
         setSeats(event) {
             if (this.selectedWagon && event.value) {
                 this.seats = [];
+
                 for (let i = 1; i < 10 * event.value.factor; i++) {
                     this.seats.push({ seat: i, type: event.value.type });
                 }
diff --git a/pages/steps/StepsDoc.vue b/pages/steps/StepsDoc.vue
index aeace2b63..dfe622bae 100755
--- a/pages/steps/StepsDoc.vue
+++ b/pages/steps/StepsDoc.vue
@@ -1,31 +1,30 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="StepsDemo" :sources="sources" :extPages="pages" github="steps/StepsDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="StepsDemo" :sources="sources" :extPages="pages" github="steps/StepsDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import Steps from 'primevue/steps';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/steps/steps.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>MenuModel</h5>
-            <p>Steps uses the common MenuModel API to define the items, visit <nuxt-link to="/menumodel">MenuModel API</nuxt-link> for details.</p>
+        <h5>MenuModel</h5>
+        <p>Steps uses the common MenuModel API to define the items, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p>
 
-            <h5>Getting Started</h5>
-            <p>Steps is integrated with Vue Router and requires a collection of menuitems as its model.</p>
-            <pre v-code><code>
+        <h5>Getting Started</h5>
+        <p>Steps is integrated with Vue Router and requires a collection of menuitems as its model.</p>
+        <pre v-code><code>
 &lt;Steps :model="items" /&gt;
 &lt;router-view /&gt;
 
 </code></pre>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 export default {
 	data() {
 		return {
@@ -51,17 +50,17 @@ export default {
 
 </code></pre>
 
-            <h5>Interactive</h5>
-            <p>Items are readonly by default, if you'd like to make them interactive then disable <i>readonly</i> property.</p>
-            <pre v-code><code>
+        <h5>Interactive</h5>
+        <p>Items are readonly by default, if you'd like to make them interactive then disable <i>readonly</i> property.</p>
+        <pre v-code><code>
 &lt;Steps :model="items" :readonly="false" /&gt;
 &lt;router-view /&gt;
 
 </code></pre>
 
-            <h5>Templating</h5>
-            <p>Steps offers content customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter.</p>
-            <pre v-code><code><template v-pre>
+        <h5>Templating</h5>
+        <p>Steps offers content customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter.</p>
+        <pre v-code><code><template v-pre>
 &lt;Steps :model="items"&gt;
     &lt;template #item="{item}"&gt;
         &lt;a :href="item.url"&gt;{{item.label}}&lt;/a&gt;
@@ -70,112 +69,186 @@ export default {
 </template>
 </code></pre>
 
-            <p><i>nuxt-link</i> with route configuration can also be used within templating for further customization.</p>
-            <pre v-code><code><template v-pre>
+        <p><i>router-link</i> with route configuration can also be used within templating for further customization.</p>
+        <pre v-code><code><template v-pre>
 &lt;Steps :model="items"&gt;
     &lt;template #item="{item}"&gt;
-        &lt;nuxt-link :to="item.to" custom v-slot="{href, route, navigate, isActive, isExactActive}"&gt;
+        &lt;router-link :to="item.to" custom v-slot="{href, route, navigate, isActive, isExactActive}"&gt;
             &lt;a :href="href" @click="navigate" :class="{'active-link': isActive, 'active-link-exact": isExactActive}&gt;{{route.fullPath}}&lt;/a&gt;
-        &lt;/nuxt-link&gt;
+        &lt;/router-link&gt;
     &lt;/template&gt;
 &lt;/Steps&gt;
 </template>
 </code></pre>
 
-            <h5>Properties</h5>
-            <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>id</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Unique identifier of the element.</td>
-                        </tr>
-                        <tr>
-                            <td>model</td>
-                            <td>array</td>
-                            <td>null</td>
-                            <td>An array of menuitems.</td>
-                        </tr>
-                        <tr>
-                            <td>readonly</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether the items are clickable or not.</td>
-                        </tr>
-                        <tr>
-                            <td>exact</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether to apply 'nuxt-link-active-exact' class if route exactly matches the item path.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>id</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Unique identifier of the element.</td>
+                    </tr>
+                    <tr>
+                        <td>model</td>
+                        <td>array</td>
+                        <td>null</td>
+                        <td>An array of menuitems.</td>
+                    </tr>
+                    <tr>
+                        <td>readonly</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Whether the items are clickable or not.</td>
+                    </tr>
+                    <tr>
+                        <td>exact</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Whether to apply 'router-link-active-exact' class if route exactly matches the item path.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Slots</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>item</td>
-                            <td>item: Menuitem instance</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Slots</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>item</td>
+                        <td>item: Menuitem instance</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-steps</td>
-                            <td>Container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-steps-item</td>
-                            <td>Menuitem element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-steps-number</td>
-                            <td>Number of menuitem.</td>
-                        </tr>
-                        <tr>
-                            <td>p-steps-title</td>
-                            <td>Label of menuitem.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-steps</td>
+                        <td>Container element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-steps-list</td>
+                        <td>Root list element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-steps-current</td>
+                        <td>Current menuitem element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-menuitem-link</td>
+                        <td>Link element of the menuitem.</td>
+                    </tr>
+                    <tr>
+                        <td>p-steps-item</td>
+                        <td>Menuitem element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-steps-number</td>
+                        <td>Number of menuitem.</td>
+                    </tr>
+                    <tr>
+                        <td>p-steps-title</td>
+                        <td>Label of menuitem.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc>
-    </ClientOnly>
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>
+            Steps component uses the <i>nav</i> element and since any attribute is passed to the root implicitly <i>aria-labelledby</i> or <i>aria-label</i> can be used to describe the component. Inside an ordered list is used where the current step
+            item defines <i>aria-current</i> as "step".
+        </p>
+
+        <h6>Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>tab</i>
+                        </td>
+                        <td>Adds focus to the active step when focus moves in to the component, if there is already a focused tab header then moves the focus out of the component based on the page tab sequence.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>Activates the focused step if readonly is not enabled.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>Activates the focused step if readonly is not enabled.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>right arrow</i>
+                        </td>
+                        <td>Moves focus to the next step if readonly is not enabled.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>left arrow</i>
+                        </td>
+                        <td>Moves focus to the previous step if readonly is not enabled.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>home</i>
+                        </td>
+                        <td>Moves focus to the first step if readonly is not enabled.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>end</i>
+                        </td>
+                        <td>Moves focus to the last step if readonly is not enabled.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
@@ -191,7 +264,7 @@ export default {
         <Toast />
         
         <div class="card">
-            <Steps :model="items" :readonly="true" />
+            <Steps :model="items" :readonly="true" aria-label="Form Steps" />
         </div>
 
         <router-view v-slot="{Component}" :formData="formObject" @prevPage="prevPage($event)" @nextPage="nextPage($event)" @complete="complete">
@@ -261,7 +334,7 @@ export default {
         <Toast />
 
         <div class="card">
-            <Steps :model="items" :readonly="true" />
+            <Steps :model="items" :readonly="true" aria-label="Form Steps" />
         </div>
 
         <router-view v-slot="{Component}" :formData="formObject" @prevPage="prevPage($event)" @nextPage="nextPage($event)" @complete="complete">
@@ -345,7 +418,7 @@ export default {
             <p-toast></p-toast>
 
             <div class="card">
-                <p-steps :model="items" :readonly="true"></p-steps>
+                <p-steps :model="items" :readonly="true" aria-label="Form Steps"></p-steps>
             </div>
 
             <router-view v-slot="{Component}" :form-data="formObject" @prev-page="prevPage($event)" @next-page="nextPage($event)" @complete="complete">
diff --git a/pages/steps/index.vue b/pages/steps/index.vue
index ca64778a9..45df20732 100755
--- a/pages/steps/index.vue
+++ b/pages/steps/index.vue
@@ -10,7 +10,7 @@
 
         <div class="content-section implementation">
             <div class="card">
-                <Steps :model="items" :readonly="true" />
+                <Steps :model="items" aria-label="Form Steps" />
             </div>
 
             <router-view v-slot="{ Component }" :formData="formObject" @prev-page="prevPage($event)" @next-page="nextPage($event)" @complete="complete">
@@ -51,9 +51,6 @@ export default {
             formObject: {}
         };
     },
-    components: {
-        StepsDoc: StepsDoc
-    },
     methods: {
         nextPage(event) {
             for (let field in event.formData) {
@@ -68,6 +65,9 @@ export default {
         complete() {
             this.$toast.add({ severity: 'success', summary: 'Order submitted', detail: 'Dear, ' + this.formObject.firstname + ' ' + this.formObject.lastname + ' your order completed.' });
         }
+    },
+    components: {
+        StepsDoc: StepsDoc
     }
 };
 </script>
diff --git a/pages/styleclass/StyleClassDoc.vue b/pages/styleclass/StyleClassDoc.vue
index 234467bf9..f5d9ced2e 100644
--- a/pages/styleclass/StyleClassDoc.vue
+++ b/pages/styleclass/StyleClassDoc.vue
@@ -1,149 +1,145 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="StyleClassDemo" :sources="sources" github="styleclass/StyleClassDemo.vue">
-            <div>
-                <h5>Import via Module</h5>
-                <pre v-code.script><code>
+    <AppDoc name="StyleClassDemo" :sources="sources" github="styleclass/StyleClassDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import StyleClass from 'primevue/styleclass';
 
 app.directive('styleclass', StyleClass);
 
 </code></pre>
 
-                <h5>Import via CDN</h5>
-                <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/styleclass/styleclass.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-                <h5>Getting Started</h5>
-                <p>StyleClass has two modes, <i>toggleClass</i> to simply add-remove a class and enter/leave animations.</p>
+        <h5>Getting Started</h5>
+        <p>StyleClass has two modes, <i>toggleClass</i> to simply add-remove a class and enter/leave animations.</p>
 
-                <p><b>ToggleClass</b></p>
-                <pre v-code><code>
+        <p><b>ToggleClass</b></p>
+        <pre v-code><code>
 &lt;Button label="Toggle p-disabled" v-styleclass="{ selector: '@next', toggleClass: 'p-disabled' }" /&gt;
 &lt;InputText class="block mt-3" /&gt;
 
 </code></pre>
 
-                <p><b>Enter/Leave Animation</b></p>
-                <pre v-code><code>
+        <p><b>Enter/Leave Animation</b></p>
+        <pre v-code><code>
 &lt;Button label="Show" class="mr-2" v-styleclass="{ selector: '.box', enterClass: 'hidden', enterActiveClass: 'my-fadein' }" /&gt;
 &lt;Button label="Hide" v-styleclass="{ selector: '.box', leaveActiveClass: 'my-fadeout', leaveToClass: 'hidden' }" /&gt;
 &lt;div class="box hidden"&gt;Content&lt;/div&gt;
 
 </code></pre>
 
-                <h5>Target</h5>
-                <p>Target element is defined with the <i>v-styleclass</i> attribute that can either be a valid css query or one of the keywords below.</p>
-                <div class="doc-tablewrapper">
-                    <table class="doc-table">
-                        <thead>
-                            <tr>
-                                <th>Name</th>
-                                <th>Description</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr>
-                                <td>@next</td>
-                                <td>Next element.</td>
-                            </tr>
-                            <tr>
-                                <td>@prev</td>
-                                <td>Previous element.</td>
-                            </tr>
-                            <tr>
-                                <td>@parent</td>
-                                <td>Parent element.</td>
-                            </tr>
-                            <tr>
-                                <td>@grandparent</td>
-                                <td>Parent element of the parent.</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
+        <h5>Target</h5>
+        <p>Target element is defined with the <i>v-styleclass</i> attribute that can either be a valid css query or one of the keywords below.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>@next</td>
+                        <td>Next element.</td>
+                    </tr>
+                    <tr>
+                        <td>@prev</td>
+                        <td>Previous element.</td>
+                    </tr>
+                    <tr>
+                        <td>@parent</td>
+                        <td>Parent element.</td>
+                    </tr>
+                    <tr>
+                        <td>@grandparent</td>
+                        <td>Parent element of the parent.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-                <h5>Properties</h5>
-                <div class="doc-tablewrapper">
-                    <table class="doc-table">
-                        <thead>
-                            <tr>
-                                <th>Name</th>
-                                <th>Type</th>
-                                <th>Default</th>
-                                <th>Description</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr>
-                                <td>selector</td>
-                                <td>string</td>
-                                <td>selector</td>
-                                <td>Selector to define the target element.</td>
-                            </tr>
-                            <tr>
-                                <td>enterClass</td>
-                                <td>string</td>
-                                <td>null</td>
-                                <td>Class to add when item begins to get displayed.</td>
-                            </tr>
-                            <tr>
-                                <td>enterActiveClass</td>
-                                <td>string</td>
-                                <td>null</td>
-                                <td>Class to add during enter animation.</td>
-                            </tr>
-                            <tr>
-                                <td>enterToClass</td>
-                                <td>string</td>
-                                <td>null</td>
-                                <td>Class to add when enter animation is completed.</td>
-                            </tr>
-                            <tr>
-                                <td>leaveClass</td>
-                                <td>string</td>
-                                <td>null</td>
-                                <td>Class to add when item begins to get hidden.</td>
-                            </tr>
-                            <tr>
-                                <td>leaveActiveClass</td>
-                                <td>string</td>
-                                <td>null</td>
-                                <td>Class to add during leave animation</td>
-                            </tr>
-                            <tr>
-                                <td>leaveToClass</td>
-                                <td>string</td>
-                                <td>null</td>
-                                <td>Class to add when leave animation is completed.</td>
-                            </tr>
-                            <tr>
-                                <td>hideOnOutsideClick</td>
-                                <td>string</td>
-                                <td>null</td>
-                                <td>Whether to trigger leave animation when outside of the element is clicked.</td>
-                            </tr>
-                            <tr>
-                                <td>toggleClass</td>
-                                <td>string</td>
-                                <td>null</td>
-                                <td>Adds or removes a class when no enter-leave animation is required.</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
+        <h5>Properties</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>selector</td>
+                        <td>string</td>
+                        <td>selector</td>
+                        <td>Selector to define the target element.</td>
+                    </tr>
+                    <tr>
+                        <td>enterClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Class to add when item begins to get displayed.</td>
+                    </tr>
+                    <tr>
+                        <td>enterActiveClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Class to add during enter animation.</td>
+                    </tr>
+                    <tr>
+                        <td>enterToClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Class to add when enter animation is completed.</td>
+                    </tr>
+                    <tr>
+                        <td>leaveClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Class to add when item begins to get hidden.</td>
+                    </tr>
+                    <tr>
+                        <td>leaveActiveClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Class to add during leave animation</td>
+                    </tr>
+                    <tr>
+                        <td>leaveToClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Class to add when leave animation is completed.</td>
+                    </tr>
+                    <tr>
+                        <td>hideOnOutsideClick</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Whether to trigger leave animation when outside of the element is clicked.</td>
+                    </tr>
+                    <tr>
+                        <td>toggleClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Adds or removes a class when no enter-leave animation is required.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-                <h5>Events</h5>
-                <p>Directive has no events.</p>
+        <h5>Events</h5>
+        <p>Directive has no events.</p>
 
-                <h5>Dependencies</h5>
-                <p>None.</p>
-            </div>
-        </AppDoc>
-    </ClientOnly>
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
diff --git a/pages/styleclass/index.vue b/pages/styleclass/index.vue
index b101ce3c5..79f5cdca9 100644
--- a/pages/styleclass/index.vue
+++ b/pages/styleclass/index.vue
@@ -1,30 +1,28 @@
 <template>
     <div>
-        <div>
-            <div class="content-section introduction">
-                <div class="feature-intro">
-                    <h1>StyleClass</h1>
-                    <p>StyleClass manages css classes declaratively to during enter/leave animations or just to toggle classes on an element.</p>
-                </div>
-                <AppDemoActions />
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>StyleClass</h1>
+                <p>StyleClass manages css classes declaratively to during enter/leave animations or just to toggle classes on an element.</p>
             </div>
+            <AppDemoActions />
         </div>
-
-        <div class="content-section implementation">
-            <div class="card">
-                <h5>Toggle Class</h5>
-                <Button label="Toggle p-disabled" v-styleclass="{ selector: '@next', toggleClass: 'p-disabled' }" />
-                <InputText class="block mt-3" />
-
-                <h5>Animations</h5>
-                <Button label="Show" class="mr-2" v-styleclass="{ selector: '.box', enterClass: 'hidden', enterActiveClass: 'my-fadein' }" />
-                <Button label="Hide" v-styleclass="{ selector: '.box', leaveActiveClass: 'my-fadeout', leaveToClass: 'hidden' }" />
-                <div class="box hidden">Content</div>
-            </div>
-        </div>
-
-        <StyleClassDoc />
     </div>
+
+    <div class="content-section implementation">
+        <div class="card">
+            <h5>Toggle Class</h5>
+            <Button v-styleclass="{ selector: '@next', toggleClass: 'p-disabled' }" label="Toggle p-disabled" />
+            <InputText class="block mt-3" />
+
+            <h5>Animations</h5>
+            <Button v-styleclass="{ selector: '.box', enterClass: 'hidden', enterActiveClass: 'my-fadein' }" label="Show" class="mr-2" />
+            <Button v-styleclass="{ selector: '.box', leaveActiveClass: 'my-fadeout', leaveToClass: 'hidden' }" label="Hide" />
+            <div class="box hidden">Content</div>
+        </div>
+    </div>
+
+    <StyleClassDoc />
 </template>
 
 <script>
diff --git a/pages/support/index.vue b/pages/support/index.vue
index d0ec7cc27..48554e32d 100755
--- a/pages/support/index.vue
+++ b/pages/support/index.vue
@@ -1,330 +1,217 @@
 <template>
     <div>
-        <div class="content-section header-support">
-            <div class="feature-intro">
-                <h1>Support</h1>
-                <p>Professional support for the open source innovation.</p>
-            </div>
-        </div>
+        <div class="content-section">
+            <img alt="PRO Support" src="demo/images/support/support-header.png" class="w-full block mb-5" style="border-radius: 20px" />
 
-        <div class="content-section options grid">
-            <div class="col-12 md:col-6 lg:col-6">
-                <div class="card support-box">
-                    <h5>Community Support</h5>
-                    <p>
-                        <a href="https://forum.primefaces.org/viewforum.php?f=35">Forum</a> and <a href="https://discord.gg/gzKFYnpmCY">Discord</a> are where the community users gather to seek support, post topics and discuss the technology. PrimeTek
-                        does not guarantee response at forum and discord although they are monitored and maintained by our staff. If you need to secure our response within 1 business day, you may consider PrimeVue PRO support.
+            <div class="flex flex-column xl:flex-row mb-5 gap-5">
+                <div class="card xl:w-3 m-0 relative overflow-hidden">
+                    <i class="pi pi-github absolute text-200" style="bottom: -50px; right: -50px; font-size: 200px; transform: rotateX(45deg) rotateY(0deg) rotateZ(-45deg)"></i>
+                    <div class="text-xl text-900 font-semibold mb-3 relative">Community Support</div>
+                    <p class="m-0 line-height-3 relative">
+                        <a href="https://forum.primefaces.org/viewforum.php?f=110" class="font-bold hover:underline text-primary">Forum</a> and <a href="https://discord.gg/gzKFYnpmCY" class="font-bold hover:underline text-primary">Discord</a> are
+                        where the community users gather to seek support, post topics and discuss the technology. GitHub issue tracker is the channel where community users can create tickets however PrimeTek does not guarantee a response time
+                        although they are monitored and maintained by our staff. If you need to secure our response within 1 business day, you may consider PRO support instead.
+                    </p>
+                </div>
+                <div class="card m-0 xl:w-9 text-white bg-cover" style="background-image: url('demo/images/support/card-pro.jpg')">
+                    <div class="text-xl font-semibold mb-3">PRO Support</div>
+                    <p class="m-0 line-height-3">
+                        With PRO support, it's easy to support, tune and add features to PrimeVue as if it were an in- house library. PRO is a term based commercial support service. With the exclusive services of PRO account, it is no longer needed
+                        to post questions in community forum and issue reports to community issue tracker at GitHub. A JIRA account will be created to the customer by PrimeTek, this account can be shared between any number of users within your
+                        organization.
                     </p>
                 </div>
             </div>
 
-            <div class="col-12 md:col-6 lg:col-6">
-                <div class="flex flex-column justify-content-center card support-box pro">
-                    <div>
-                        <h5>PrimeVue PRO Support</h5>
-                        <p>
-                            PrimeVue PRO is a term based commercial support service. With the exclusive services of Pro account, you no longer need to post your questions in the community forum and your issues to community issue tracker. With
-                            PrimeVue PRO, it's easy to support, tune and add features to PrimeVue as if it were an in-house framework.
-                        </p>
+            <div class="grid mb-5">
+                <div class="col-12 md:col-6 xl:col-3">
+                    <div class="card m-0 flex-1 h-full">
+                        <div class="text-xl text-900 font-semibold mb-3">Free</div>
+                        <p class="m-0 line-height-3 mb-3 text-secondary">Community Support</p>
+                        <a href="https://discord.com/invite/gzKFYnpmCY" class="flex align-items-center justify-content-center border-1 border-indigo-500 border-round block p-3 mb-4 text-indigo-500 font-medium hover:surface-hover">Join Now</a>
+                        <ul class="list-none p-0 m-0">
+                            <li class="flex align-items-center mb-3">
+                                <i class="pi pi-check-circle mr-2 text-green-500"></i>
+                                <span>GitHub Issue Tracker</span>
+                            </li>
+                            <li class="flex align-items-center mb-3">
+                                <i class="pi pi-check-circle mr-2 text-green-500"></i>
+                                <span>Community Forum</span>
+                            </li>
+                            <li class="flex align-items-center">
+                                <i class="pi pi-check-circle mr-2 text-green-500"></i>
+                                <span>PrimeLand Discord Server</span>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+                <div class="col-12 md:col-6 xl:col-3">
+                    <div class="card m-0 flex-1 h-full">
+                        <div class="text-xl text-900 font-semibold mb-3">Standard</div>
+                        <p class="m-0 line-height-3 mb-3 text-secondary">1 Year Subscription</p>
+                        <a
+                            href="mailto:primevue@primetek.com.tr"
+                            class="flex align-items-center justify-content-center border-1 bg-indigo-500 border-round block p-3 mb-4 hover:bg-indigo-600 transition-all transition-duration-300 text-white font-medium"
+                            >Get a Quote</a
+                        >
+                        <ul class="list-none p-0 m-0">
+                            <li class="flex align-items-center mb-3">
+                                <i class="pi pi-check-circle mr-2 text-green-500"></i>
+                                <span>Access to Private JIRA</span>
+                            </li>
+                            <li class="flex align-items-center mb-3">
+                                <i class="pi pi-check-circle mr-2 text-green-500"></i>
+                                <span>Response within 1 business day</span>
+                            </li>
+                            <li class="flex align-items-center mb-3">
+                                <i class="pi pi-check-circle mr-2 text-green-500"></i>
+                                <span><strong>10</strong> Issue Tickets</span>
+                            </li>
+                            <li class="flex align-items-center">
+                                <i class="pi pi-check-circle mr-2 text-green-500"></i>
+                                <span>Access to LTS Releases</span>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+                <div class="col-12 md:col-6 xl:col-3">
+                    <div class="card m-0 flex-1 h-full">
+                        <div class="text-xl text-900 font-semibold mb-3">Premium</div>
+                        <p class="m-0 line-height-3 mb-3 text-secondary">1 Year Subscription</p>
+                        <a
+                            href="mailto:primevue@primetek.com.tr"
+                            class="flex align-items-center justify-content-center border-1 bg-indigo-500 border-round block p-3 mb-4 hover:bg-indigo-600 transition-all transition-duration-300 text-white font-medium"
+                            >Get a Quote</a
+                        >
+                        <ul class="list-none p-0 m-0">
+                            <li class="flex align-items-center mb-3">
+                                <i class="pi pi-check-circle mr-2 text-green-500"></i>
+                                <span>Access to Private JIRA</span>
+                            </li>
+                            <li class="flex align-items-center mb-3">
+                                <i class="pi pi-check-circle mr-2 text-green-500"></i>
+                                <span>Response within 1 business day</span>
+                            </li>
+                            <li class="flex align-items-center mb-3">
+                                <i class="pi pi-check-circle mr-2 text-green-500"></i>
+                                <span><strong>30</strong> Issue Tickets</span>
+                            </li>
+                            <li class="flex align-items-center mb-3">
+                                <i class="pi pi-check-circle mr-2 text-green-500"></i>
+                                <span>Access to LTS Releases</span>
+                            </li>
+                            <li class="flex align-items-center">
+                                <i class="pi pi-check-circle mr-2 text-green-500"></i>
+                                <span>Theme Designer - Extended License</span>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+                <div class="col-12 md:col-6 xl:col-3">
+                    <div class="card m-0 flex-1 border-2 border-indigo-500 h-full">
+                        <div class="text-xl text-900 font-semibold mb-3">Enterprise</div>
+                        <p class="m-0 line-height-3 mb-3 text-secondary">1 Year Subscription</p>
+                        <a
+                            href="mailto:primevue@primetek.com.tr"
+                            class="flex align-items-center justify-content-center border-1 bg-indigo-500 border-round block p-3 mb-4 hover:bg-indigo-600 transition-all transition-duration-300 text-white font-medium"
+                            >Get a Quote</a
+                        >
+                        <ul class="list-none p-0 m-0">
+                            <li class="flex align-items-center mb-3">
+                                <i class="pi pi-check-circle mr-2 text-green-500"></i>
+                                <span>Access to Private JIRA</span>
+                            </li>
+                            <li class="flex align-items-center mb-3">
+                                <i class="pi pi-check-circle mr-2 text-green-500"></i>
+                                <span>Response within 1 business day</span>
+                            </li>
+                            <li class="flex align-items-center mb-3">
+                                <i class="pi pi-check-circle mr-2 text-green-500"></i>
+                                <span><strong>Unlimited</strong> Issue Tickets</span>
+                            </li>
+                            <li class="flex align-items-center mb-3">
+                                <i class="pi pi-check-circle mr-2 text-green-500"></i>
+                                <span>Access to LTS Releases</span>
+                            </li>
+                            <li class="flex align-items-center mb-3">
+                                <i class="pi pi-check-circle mr-2 text-green-500"></i>
+                                <span>Theme Designer - Extended License</span>
+                            </li>
+                            <li class="flex align-items-center mb-3">
+                                <i class="pi pi-check-circle mr-2 text-green-500"></i>
+                                <span>PrimeBlocks - Enterprise License</span>
+                            </li>
+                            <li class="flex align-items-center mb-3">
+                                <i class="pi pi-check-circle mr-2 text-green-500"></i>
+                                <span>PrimeBlocks - Enterprise License</span>
+                            </li>
+                            <li class="flex align-items-center">
+                                <i class="pi pi-check-circle mr-2 text-green-500"></i>
+                                <span>Figma UI Kit - Enterprise License</span>
+                            </li>
+                        </ul>
                     </div>
-                    <a class="action-button" href="mailto:PrimeVue@primetek.com.tr">GET A QUOTE</a>
                 </div>
             </div>
-        </div>
 
-        <div class="content-section section-moreaboutpro">
-            <h5 class="section-header">Included in PRO</h5>
-            <div class="grid">
-                <div class="col-6 lg:col-3">
-                    <div class="flex">
-                        <div class="dot">&nbsp;</div>
-                        <div class="flex flex-column pl-3">
-                            <h6>Access to pro.primefaces.org</h6>
-                            <p>PRO means high-touch support. Contact us directly from a private JIRA with unlimited support tickets!</p>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-6 lg:col-3">
-                    <div class="flex">
-                        <div class="dot color-1">&nbsp;</div>
-                        <div class="flex flex-column pl-3">
-                            <h6>Response within 1 Business Day</h6>
-                            <p>Once you create a case, your request will be routed to our PRO team and they will get in touch within 1 business day.</p>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-6 lg:col-3">
-                    <div class="flex">
-                        <div class="dot color-7">&nbsp;</div>
-                        <div class="flex flex-column pl-3">
-                            <h6>Unlimited Number of Cases</h6>
-                            <p>Take advantage of the unlimited number of cases. Our PRO team is at your side to solve all the problems you are experiencing.</p>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-6 lg:col-3">
-                    <div class="flex">
-                        <div class="dot color-4">&nbsp;</div>
-                        <div class="flex flex-column pl-3">
-                            <h6>Defect patches</h6>
-                            <p>We identify, prioritize, fix your defects and provide fix patches.</p>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-6 lg:col-3">
-                    <div class="flex">
-                        <div class="dot color-3">&nbsp;</div>
-                        <div class="flex flex-column pl-3">
-                            <h6>Theme Designer</h6>
-                            <p><a href="https://www.primefaces.org/designer-vue">Designer</a> is the ultimate tool to create your own PrimeVue experience powered by a SASS based theme engine with 500+ variables and a Visual Designer.</p>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-6 lg:col-3">
-                    <div class="flex">
-                        <div class="dot color-5">&nbsp;</div>
-                        <div class="flex flex-column pl-3">
-                            <h6>Premium Template</h6>
-                            <p>Choose one premium template of your choice with an extended license.</p>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-6 lg:col-3">
-                    <div class="flex">
-                        <div class="dot color-6">&nbsp;</div>
-                        <div class="flex flex-column pl-3">
-                            <h6>PrimeBlocks</h6>
-                            <p>An enterprise license for all of the ready to use <a href="https://www.primefaces.org/primeblocks-vue">UI blocks</a> to build spectacular applications in no time.</p>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-6 lg:col-3">
-                    <div class="flex">
-                        <div class="dot color-8">&nbsp;</div>
-                        <div class="flex flex-column pl-3">
-                            <h6>Remote Desktop Connection</h6>
-                            <p>Direct Access to your issues! Your problems are resolved faster with our instant remote connection.</p>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-6 lg:col-3">
-                    <div class="flex">
-                        <div class="dot color-9">&nbsp;</div>
-                        <div class="flex flex-column pl-3">
-                            <h6>Conference Calls</h6>
-                            <p>Our PRO Team helps resolve critical issues in conference calls and ensure high-value collaboration with your team.</p>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-6 lg:col-3">
-                    <div class="flex">
-                        <div class="dot color-10">&nbsp;</div>
-                        <div class="flex flex-column pl-3">
-                            <h6>High Priority to Your Issues</h6>
-                            <p>PRO delivers the premium support and expertise you need. Resources are prioritized for an optimized response to critical issues.</p>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-6 lg:col-3">
-                    <div class="flex">
-                        <div class="dot">&nbsp;</div>
-                        <div class="flex flex-column pl-3">
-                            <h6>Notifications About Security Updates</h6>
-                            <p>Be the first to be informed about critical security updates.</p>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
+            <div class="card mb-5">
+                <div class="text-xl text-900 font-semibold mb-3">Enhancement Credits</div>
+                <p class="m-0 line-height-3 mb-5 text-secondary">
+                    New features and enhancement requests are not available in core services and provided via a credit based model instead named PrimeCredit. When you have a feature request, we offer an initial estimate in terms of credits and once
+                    this estimate is confirmed by you then implementation will be delivered by our team within an estimated timeframe.
+                </p>
 
-        <div class="content-section section-newfeatures">
-            <h5>Enhancement Credits</h5>
-            <div class="flex mb-4">
-                <p>
-                    New feature and enhancement requests are not available in core services and provided via a credit model instead. When you have a feature request we provide an estimate, if you confirm we deliver your request within an estimated
-                    timeframe and deduct the amount of work from your credits.
-                </p>
-            </div>
-            <div class="grid">
-                <div class="col-6 lg:col-3">
-                    <div class="flex">
-                        <div class="dot color-1">&nbsp;</div>
-                        <div class="flex flex-column pl-3">
-                            <h6>New Components</h6>
-                            <p>User needs are frequently changing. To meet your needs, we create new components.</p>
-                        </div>
+                <div class="flex flex-column md:flex-row gap-5">
+                    <div class="flex-1">
+                        <div class="text-900 font-semibold mb-2">New Components</div>
+                        <p class="m-0 line-height-3 mb-3 text-secondary">Brand new components you need that are not already available in the existing UI suite.</p>
                     </div>
-                </div>
-                <div class="col-6 lg:col-3">
-                    <div class="flex">
-                        <div class="dot color-5">&nbsp;</div>
-                        <div class="flex flex-column pl-3">
-                            <h6>New Functionality to Existing Components</h6>
-                            <p>We add and configure new features to existing components to enhance the capabilities of your application.</p>
-                        </div>
+                    <div class="flex-1">
+                        <div class="text-900 font-semibold mb-2">New Features</div>
+                        <p class="m-0 line-height-3 mb-3 text-secondary">Enhancements to the components you need such as new properties, events and templating.</p>
                     </div>
-                </div>
-                <div class="col-6 lg:col-3">
-                    <div class="flex">
-                        <div class="dot color-2">&nbsp;</div>
-                        <div class="flex flex-column pl-3">
-                            <h6>Changing the Way a Certain Functionality is Implemented</h6>
-                            <p>A problem might have several different solutions. We offer alternative ways for existing implementations.</p>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-6 lg:col-3">
-                    <div class="flex">
-                        <div class="dot color-7">&nbsp;</div>
-                        <div class="flex flex-column pl-3">
-                            <h6>Accessibility Improvements</h6>
-                            <p>Our team makes accessibility improvements that allow your developers to create more accessible applications.</p>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-6 lg:col-3">
-                    <div class="flex">
-                        <div class="dot color-4">&nbsp;</div>
-                        <div class="flex flex-column pl-3">
-                            <h6>Proof of Concept Implementations of a Use Case</h6>
-                            <p>Your projects can move forward faster with our effort to create PoC.</p>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-6 lg:col-3">
-                    <div class="flex">
-                        <div class="dot color-6">&nbsp;</div>
-                        <div class="flex flex-column pl-3">
-                            <h6>Code Reviews to Offer Best Practices</h6>
-                            <p>Our experienced team reviews your entire project and improves your code quality.</p>
-                        </div>
+                    <div class="flex-1">
+                        <div class="text-900 font-semibold mb-2">UX Customization</div>
+                        <p class="m-0 line-height-3 mb-3 text-secondary">Behavioral changes to the existing components.</p>
                     </div>
                 </div>
             </div>
-            <div class="flex mt-4">
-                <p>
-                    You can purchase additional credits along with the subscription and also anytime during your subscription period. If your subscription term ends with unused credits, they will be added to your new subscription term in case you
-                    extend.
-                </p>
+
+            <div class="card m-0">
+                <div class="text-xl text-900 font-semibold mb-3">Frequently Asked Questions</div>
+                <div class="grid">
+                    <div class="col-12 lg:col-4">
+                        <div class="text-900 line-height-3 mb-2 font-medium">What are the conditions for support service to end?</div>
+                        <p class="mt-0 mb-6 p-0 line-height-3 text-secondary">Support service ends either after 1 year end for all plans or when all tickets are used in Standard or Premium plans.</p>
+
+                        <div class="text-900 line-height-3 mb-2 font-medium">Is there a plan with no ticket limit?</div>
+                        <p class="mt-0 mb-6 p-0 line-height-3 text-secondary">Yes, Enterprise plan has no limitation on the number tickets.</p>
+
+                        <div class="text-900 line-height-3 mb-2 font-medium">What happens if we extend after 1 year and we have unused tickets?</div>
+                        <p class="mt-0 mb-6 p-0 line-height-3 text-secondary">Unused tickets expire and cannot be transferred to the new subscription.</p>
+                    </div>
+                    <div class="col-12 lg:col-4">
+                        <div class="text-900 line-height-3 mb-2 font-medium">When can we purchase PrimeCredits for feature development?</div>
+                        <p class="mt-0 mb-6 p-0 line-height-3 text-secondary">PrimeCredits can be purchased anytime during an active subscription.</p>
+
+                        <div class="text-900 line-height-3 mb-2 font-medium">Are all of our requests guaranteed to be implemented with PrimeCredits?</div>
+                        <p class="mt-0 mb-6 p-0 line-height-3 text-secondary">No, PrimeTek does not guarantee the implementation so it is suggested to confirm with us before purchasing credits.</p>
+
+                        <div class="text-900 line-height-3 mb-2 font-medium">Can we get PrimeCredits without PRO support?</div>
+                        <p class="mt-0 mb-6 p-0 line-height-3 text-secondary">No, feature development is exclusive to PRO members.</p>
+                    </div>
+                    <div class="col-12 lg:col-4">
+                        <div class="text-900 line-height-3 mb-2 font-medium">Is there a limit on developers in our organization who can use the service?</div>
+                        <p class="mt-0 mb-6 p-0 line-height-3 text-secondary">PRO is per organization so there is no limit on the number of developers.</p>
+
+                        <div class="text-900 line-height-3 mb-2 font-medium">How many JIRA accounts do we get?</div>
+                        <p class="mt-0 mb-6 p-0 line-height-3 text-secondary">We provide one shared account per organization that any number of members in your organization can use it.</p>
+
+                        <div class="text-900 line-height-3 mb-2 font-medium">What is not covered by PRO?</div>
+                        <p class="mt-0 mb-6 p-0 line-height-3 text-secondary">As PRO support focuses on the library, application consulting and code reviews out of scope.</p>
+                    </div>
+                </div>
             </div>
         </div>
     </div>
 </template>
-
-<style lang="scss" scoped>
-.header-support {
-    display: flex;
-    background-image: url('../../assets/images/support/header-pro.jpg');
-    background-size: cover;
-    height: 10rem;
-    color: white;
-}
-
-.options {
-    background-color: var(--surface-ground);
-}
-
-.support-box {
-    height: 20rem;
-
-    &.pro {
-        background-color: #303132;
-        background-image: url('../../assets/images/support/pro-effect.png');
-        background-size: cover;
-        color: white;
-    }
-
-    a {
-        color: #2196f3;
-        font-weight: 600;
-
-        &:hover {
-            text-decoration: underline;
-        }
-    }
-}
-
-.action-button {
-    background-color: #d8692b;
-}
-
-.section-moreaboutpro {
-    background-color: #303132;
-    color: white;
-    margin-top: 1rem;
-
-    p {
-        color: #aaaaaa;
-    }
-
-    h6 {
-        margin-top: 0;
-    }
-
-    .section-header {
-        position: relative;
-        bottom: 3.5rem;
-        background-color: #303132;
-        padding: 1rem;
-        display: inline;
-        border-radius: 4px 4px 0 0;
-    }
-
-    a {
-        color: #2196f3;
-        font-weight: 600;
-
-        &:hover {
-            text-decoration: underline;
-        }
-    }
-}
-
-.section-newfeatures {
-    margin-top: 2rem;
-
-    p {
-        color: var(--text-color-secondary);
-    }
-}
-
-.dot {
-    height: 1rem;
-    width: 1rem;
-    min-height: 1rem;
-    min-width: 1rem;
-    border-radius: 2px;
-    background-color: #da2f4f;
-
-    &.color-1 {
-        background-color: #2b76d8;
-    }
-    &.color-2 {
-        background-color: #d8692b;
-    }
-    &.color-3 {
-        background-color: #6ece65;
-    }
-    &.color-4 {
-        background-color: #e9dc68;
-    }
-    &.color-5 {
-        background-color: #c159a4;
-    }
-    &.color-6 {
-        background-color: #2bd8c3;
-    }
-    &.color-7 {
-        background-color: #2baed8;
-    }
-    &.color-8 {
-        background-color: #d8a82b;
-    }
-    &.color-9 {
-        background-color: #a7c553;
-    }
-    &.color-10 {
-        background-color: #a06fc7;
-    }
-}
-</style>
diff --git a/pages/tabmenu/Calendar.vue b/pages/tabmenu/CalendarDemo.vue
similarity index 100%
rename from pages/tabmenu/Calendar.vue
rename to pages/tabmenu/CalendarDemo.vue
diff --git a/pages/tabmenu/Documentation.vue b/pages/tabmenu/DocumentationDemo.vue
similarity index 100%
rename from pages/tabmenu/Documentation.vue
rename to pages/tabmenu/DocumentationDemo.vue
diff --git a/pages/tabmenu/Edit.vue b/pages/tabmenu/EditDemo.vue
similarity index 100%
rename from pages/tabmenu/Edit.vue
rename to pages/tabmenu/EditDemo.vue
diff --git a/pages/tabmenu/Home.vue b/pages/tabmenu/HomeDemo.vue
similarity index 100%
rename from pages/tabmenu/Home.vue
rename to pages/tabmenu/HomeDemo.vue
diff --git a/pages/tabmenu/Settings.vue b/pages/tabmenu/SettingsDemo.vue
similarity index 100%
rename from pages/tabmenu/Settings.vue
rename to pages/tabmenu/SettingsDemo.vue
diff --git a/pages/tabmenu/TabMenuDoc.vue b/pages/tabmenu/TabMenuDoc.vue
index 851775394..48849be21 100755
--- a/pages/tabmenu/TabMenuDoc.vue
+++ b/pages/tabmenu/TabMenuDoc.vue
@@ -1,30 +1,29 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="TabMenuDemo" :sources="sources" :extPages="pages" github="tabmenu/TabMenuDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="TabMenuDemo" :sources="sources" :extPages="pages" github="tabmenu/TabMenuDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import TabMenu from 'primevue/tabmenu';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/tabmenu/tabmenu.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>MenuModel</h5>
-            <p>TabMenu uses the common MenuModel API to define the items, visit <nuxt-link to="/menumodel">MenuModel API</nuxt-link> for details.</p>
+        <h5>MenuModel</h5>
+        <p>TabMenu uses the common MenuModel API to define the items, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p>
 
-            <h5>Getting Started</h5>
-            <p>TabMenu requires a collection of menuitems as its model.</p>
-            <pre v-code><code>
+        <h5>Getting Started</h5>
+        <p>TabMenu requires a collection of menuitems as its model.</p>
+        <pre v-code><code>
 &lt;TabMenu :model="items" /&gt;
 
 </code></pre>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 export default {
 	data() {
 		return {
@@ -41,14 +40,14 @@ export default {
 
 </code></pre>
 
-            <p>TabMenu can be also integrated with Vue Router.</p>
-            <pre v-code><code>
+        <p>TabMenu can be also integrated with Vue Router.</p>
+        <pre v-code><code>
 &lt;TabMenu :model="items" /&gt;
 &lt;router-view /&gt;
 
 </code></pre>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 export default {
 	data() {
 		return {
@@ -65,23 +64,23 @@ export default {
 
 </code></pre>
 
-            <h5>Active</h5>
-            <p>Visibility of the content is specified with the activeIndex property that supports one or two-way binding.</p>
+        <h5>Active</h5>
+        <p>Visibility of the content is specified with the activeIndex property that supports one or two-way binding.</p>
 
-            <pre v-code><code>
+        <pre v-code><code>
 &lt;TabMenu :model="items" :activeIndex="activeIndex" /&gt;
 
 </code></pre>
 
-            <p>Two-way binding requires v-model.</p>
-            <pre v-code><code>
+        <p>Two-way binding requires v-model.</p>
+        <pre v-code><code>
 &lt;TabMenu :model="items" v-model:activeIndex="activeIndex" /&gt;
 
 </code></pre>
 
-            <h5>Templating</h5>
-            <p>TabMenu offers content customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter.</p>
-            <pre v-code><code><template v-pre>
+        <h5>Templating</h5>
+        <p>TabMenu offers content customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter.</p>
+        <pre v-code><code><template v-pre>
 &lt;TabMenu :model="items"&gt;
     &lt;template #item="{item}"&gt;
         &lt;a :href="item.url"&gt;{{item.label}}&lt;/a&gt;
@@ -90,125 +89,188 @@ export default {
 </template>
 </code></pre>
 
-            <h5>Properties</h5>
-            <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>model</td>
-                            <td>array</td>
-                            <td>null</td>
-                            <td>An array of menuitems.</td>
-                        </tr>
-                        <tr>
-                            <td>exact</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Defines if active route highlight should match the exact route path.</td>
-                        </tr>
-                        <tr>
-                            <td>activeIndex</td>
-                            <td>number</td>
-                            <td>0</td>
-                            <td>Active index of menuitem.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>model</td>
+                        <td>array</td>
+                        <td>null</td>
+                        <td>An array of menuitems.</td>
+                    </tr>
+                    <tr>
+                        <td>exact</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Defines if active route highlight should match the exact route path.</td>
+                    </tr>
+                    <tr>
+                        <td>activeIndex</td>
+                        <td>number</td>
+                        <td>0</td>
+                        <td>Active index of menuitem.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Events</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>tab-change</td>
-                            <td>
-                                event.originalEvent: Browser event <br />
-                                event.index: Index of the selected tab
-                            </td>
-                            <td>Callback to invoke when an active tab is changed.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Events</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>tab-change</td>
+                        <td>
+                            event.originalEvent: Browser event <br />
+                            event.index: Index of the selected tab
+                        </td>
+                        <td>Callback to invoke when an active tab is changed.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Slots</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>item</td>
-                            <td>item: Menuitem instance</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Slots</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>item</td>
+                        <td>item: Menuitem instance</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-tabmenu</td>
-                            <td>Container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-tabmenu-nav</td>
-                            <td>List element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-tabmenuitem</td>
-                            <td>Menuitem element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-highlight</td>
-                            <td>Active menuitem element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-menuitem-icon</td>
-                            <td>Icon of a menuitem.</td>
-                        </tr>
-                        <tr>
-                            <td>p-menuitem-text</td>
-                            <td>Text of a menuitem.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-tabmenu</td>
+                        <td>Container element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-tabmenu-nav</td>
+                        <td>List element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-tabmenuitem</td>
+                        <td>Menuitem element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-menuitem-link</td>
+                        <td>Link element of the menuitem.</td>
+                    </tr>
+                    <tr>
+                        <td>p-menuitem-icon</td>
+                        <td>Icon of a menuitem.</td>
+                    </tr>
+                    <tr>
+                        <td>p-menuitem-text</td>
+                        <td>Text of a menuitem.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc>
-    </ClientOnly>
+        <h5>Accessibility</h5>
+
+        <h6>Screen Reader</h6>
+        <p>
+            TabMenu component uses the <i>menubar</i> role and the value to describe the menu can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. Each list item has a <i>presentation</i> role whereas anchor elements have a
+            <i>menuitem</i> role with <i>aria-label</i> referring to the label of the item and <i>aria-disabled</i> defined if the item is disabled.
+        </p>
+
+        <h6>Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>tab</i>
+                        </td>
+                        <td>Adds focus to the active tab header when focus moves in to the component, if there is already a focused tab header moves the focus out of the component based on the page tab sequence.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>Activates the focused tab header.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>Activates the focused tab header.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>right arrow</i>
+                        </td>
+                        <td>Moves focus to the next header.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>left arrow</i>
+                        </td>
+                        <td>Moves focus to the previous header.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>home</i>
+                        </td>
+                        <td>Moves focus to the first header.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>end</i>
+                        </td>
+                        <td>Moves focus to the last header.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
@@ -226,7 +288,7 @@ export default {
             <TabMenu :model="items" />
             <router-view/>
         </div>
-            
+
         <div class="card">
             <h5>Programmatic</h5>
             <div class="py-2">
@@ -315,7 +377,7 @@ export default {
             <TabMenu :model="items" />
             <router-view/>
         </div>
-            
+
         <div class="card">
             <h5>Programmatic</h5>
             <div class="py-2">
@@ -384,7 +446,7 @@ export default {
                 icon: 'pi pi-fw pi-cog'
             }
         ]);
-        
+
         return { active, items, items2 }
     }
 }
@@ -406,7 +468,7 @@ export default {
                 <p-tabmenu :model="items"></p-tabmenu>
                 <router-view></router-view>
             </div>
-                
+
             <div class="card">
                 <h5>Programmatic</h5>
                 <div class="py-2">
@@ -474,7 +536,7 @@ export default {
                         icon: 'pi pi-fw pi-cog'
                     }
                 ]);
-                
+
                 return { active, items, items2 }
             },
             components: {
diff --git a/pages/tabmenu/index.vue b/pages/tabmenu/index.vue
index eae883e0f..9b5c5eb8c 100755
--- a/pages/tabmenu/index.vue
+++ b/pages/tabmenu/index.vue
@@ -23,7 +23,7 @@
                     <Button @click="active = 2" class="p-button-text mr-2" label="Activate 3rd" />
                 </div>
 
-                <TabMenu :model="items2" v-model:activeIndex="active" />
+                <TabMenu v-model:activeIndex="active" :model="items2" />
             </div>
         </div>
 
diff --git a/pages/tabview/TabViewDoc.vue b/pages/tabview/TabViewDoc.vue
index a5945155d..18064c915 100755
--- a/pages/tabview/TabViewDoc.vue
+++ b/pages/tabview/TabViewDoc.vue
@@ -1,24 +1,23 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="TabViewDemo" :sources="sources" github="tabview/TabViewDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="TabViewDemo" :sources="sources" github="tabview/TabViewDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import TabView from 'primevue/tabview';
 import TabPanel from 'primevue/tabpanel';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/tabview/tabview.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/tabpanel/tabpanel.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p>Tabview element consists of one or more TabPanel elements. Header of the tab is defined using header attribute.</p>
-            <pre v-code><code>
+        <h5>Getting Started</h5>
+        <p>Tabview element consists of one or more TabPanel elements. Header of the tab is defined using header attribute.</p>
+        <pre v-code><code>
 &lt;TabView&gt;
 	&lt;TabPanel header="Header I"&gt;
 		Content I
@@ -33,9 +32,9 @@ import TabPanel from 'primevue/tabpanel';
 
 </code></pre>
 
-            <h5>Active</h5>
-            <p>Visibility of the content is specified with the <i>activeIndex</i> property that supports one or two-way binding.</p>
-            <pre v-code><code>
+        <h5>Active</h5>
+        <p>Visibility of the content is specified with the <i>activeIndex</i> property that supports one or two-way binding.</p>
+        <pre v-code><code>
 &lt;TabView :activeIndex="activeIndex"&gt;
 	&lt;TabPanel header="Header I"&gt;
 		Content I
@@ -50,8 +49,8 @@ import TabPanel from 'primevue/tabpanel';
 
 </code></pre>
 
-            <p>Two-way binding requires v-model.</p>
-            <pre v-code><code>
+        <p>Two-way binding requires v-model.</p>
+        <pre v-code><code>
 &lt;TabView v-model:activeIndex="activeIndex"&gt;
 	&lt;TabPanel header="Header I"&gt;
 		Content I
@@ -66,9 +65,9 @@ import TabPanel from 'primevue/tabpanel';
 
 </code></pre>
 
-            <h5>Disabled</h5>
-            <p>A tab can be disabled to prevent the content to be displayed by setting the disabled property on a panel.</p>
-            <pre v-code><code>
+        <h5>Disabled</h5>
+        <p>A tab can be disabled to prevent the content to be displayed by setting the disabled property on a panel.</p>
+        <pre v-code><code>
 &lt;TabView&gt;
 	&lt;TabPanel header="Header I"&gt;
 		Content I
@@ -83,9 +82,9 @@ import TabPanel from 'primevue/tabpanel';
 
 </code></pre>
 
-            <h5>Header Template</h5>
-            <p>Custom content for the title section of a panel is defined using the header template.</p>
-            <pre v-code><code>
+        <h5>Header Template</h5>
+        <p>Custom content for the title section of a panel is defined using the header template.</p>
+        <pre v-code><code>
 &lt;TabView&gt;
 	&lt;TabPanel&gt;
 		&lt;template #header&gt;
@@ -105,9 +104,9 @@ import TabPanel from 'primevue/tabpanel';
 
 </code></pre>
 
-            <h5>Programmatic Control</h5>
-            <p>Tabs can be controlled programmatically using <i>activeIndex</i> property.</p>
-            <pre v-code><code>
+        <h5>Programmatic Control</h5>
+        <p>Tabs can be controlled programmatically using <i>activeIndex</i> property.</p>
+        <pre v-code><code>
 &lt;Button @click="active = 0" class="p-button-text" label="Activate 1st" /&gt;
 &lt;Button @click="active = 1" class="p-button-text" label="Activate 2nd" /&gt;
 &lt;Button @click="active = 2" class="p-button-text" label="Activate 3rd" /&gt;
@@ -126,7 +125,7 @@ import TabPanel from 'primevue/tabpanel';
 
 </code></pre>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 export default {
     data() {
         return {
@@ -137,9 +136,9 @@ export default {
 
 </code></pre>
 
-            <h5>Dynamic Tabs</h5>
-            <p>Tabs can be generated dynamically using the standard <i>v-for</i> directive.</p>
-            <pre v-code><code><template v-pre>
+        <h5>Dynamic Tabs</h5>
+        <p>Tabs can be generated dynamically using the standard <i>v-for</i> directive.</p>
+        <pre v-code><code><template v-pre>
 &lt;TabView&gt;
 	&lt;TabPanel v-for="tab in tabs" :key="tab.title" :header="tab.title"&gt;
 		&lt;p&gt;{{tab.content}}&lt;/p&gt;
@@ -148,7 +147,7 @@ export default {
 </template>
 </code></pre>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 export default {
 	data() {
 		return {
@@ -163,13 +162,13 @@ export default {
 
 </code></pre>
 
-            <h5>Lazy Rendering</h5>
-            <p>
-                All tabs are rendered when mounted and inactive tabs are hidden with CSS. Enabling <i>lazy</i> option activates the dynamic mode where a tab is only rendered at DOM when it is active. This option is useful to speed up the initial
-                rendering performance if there are many tabs.
-            </p>
+        <h5>Lazy Rendering</h5>
+        <p>
+            All tabs are rendered when mounted and inactive tabs are hidden with CSS. Enabling <i>lazy</i> option activates the dynamic mode where a tab is only rendered at DOM when it is active. This option is useful to speed up the initial
+            rendering performance if there are many tabs.
+        </p>
 
-            <pre v-code><code>
+        <pre v-code><code>
 &lt;TabView lazy&gt;
 	&lt;TabPanel header="Header I"&gt;
 		Content I
@@ -184,9 +183,9 @@ export default {
 
 </code></pre>
 
-            <h5>Scrollable</h5>
-            <p>Enable <i>scrollable</i> property to display buttons at each side of the tab headers that scrolls the tab list.</p>
-            <pre v-code><code>
+        <h5>Scrollable</h5>
+        <p>Enable <i>scrollable</i> property to display buttons at each side of the tab headers that scrolls the tab list.</p>
+        <pre v-code><code>
 &lt;TabView scrollable&gt;
 	&lt;TabPanel header="Header I"&gt;
 		Content I
@@ -201,277 +200,276 @@ export default {
 
 </code></pre>
 
-            <h5>Properties of TabPanel</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>header</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Orientation of tab headers.</td>
-                        </tr>
-                        <tr>
-                            <td>headerStyle</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Inline style of the tab header.</td>
-                        </tr>
-                        <tr>
-                            <td>headerClass</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the tab header.</td>
-                        </tr>
-                        <tr>
-                            <td>headerProps</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Uses to pass all properties of the HTMLLiElement to the tab header.</td>
-                        </tr>
-                        <tr>
-                            <td>headerActionProps</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Uses to pass all properties of the HTMLAnchorElement to the focusable anchor element inside the tab header.</td>
-                        </tr>
-                        <tr>
-                            <td>contentStyle</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Inline style of the tab content.</td>
-                        </tr>
-                        <tr>
-                            <td>contentClass</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the tab content.</td>
-                        </tr>
-                        <tr>
-                            <td>contentProps</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Uses to pass all properties of the HTMLDivElement to the tab content.</td>
-                        </tr>
-                        <tr>
-                            <td>disabled</td>
-                            <td>boolean</td>
-                            <td>null</td>
-                            <td>Whether the tab is disabled.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties of TabPanel</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>header</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Orientation of tab headers.</td>
+                    </tr>
+                    <tr>
+                        <td>headerStyle</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Inline style of the tab header.</td>
+                    </tr>
+                    <tr>
+                        <td>headerClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the tab header.</td>
+                    </tr>
+                    <tr>
+                        <td>headerProps</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Uses to pass all properties of the HTMLLiElement to the tab header.</td>
+                    </tr>
+                    <tr>
+                        <td>headerActionProps</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Uses to pass all properties of the HTMLAnchorElement to the focusable anchor element inside the tab header.</td>
+                    </tr>
+                    <tr>
+                        <td>contentStyle</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Inline style of the tab content.</td>
+                    </tr>
+                    <tr>
+                        <td>contentClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the tab content.</td>
+                    </tr>
+                    <tr>
+                        <td>contentProps</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Uses to pass all properties of the HTMLDivElement to the tab content.</td>
+                    </tr>
+                    <tr>
+                        <td>disabled</td>
+                        <td>boolean</td>
+                        <td>null</td>
+                        <td>Whether the tab is disabled.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Properties of TabView</h5>
-            <p>Any additional properties like style and class are passed to the main container element.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>activeIndex</td>
-                            <td>number</td>
-                            <td>0</td>
-                            <td>Index of the active tab.</td>
-                        </tr>
-                        <tr>
-                            <td>lazy</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When enabled, hidden tabs are not rendered at all. Defaults to false that hides tabs with css.</td>
-                        </tr>
-                        <tr>
-                            <td>scrollable</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When enabled displays buttons at each side of the tab headers to scroll the tab list.</td>
-                        </tr>
-                        <tr>
-                            <td>tabindex</td>
-                            <td>number</td>
-                            <td>0</td>
-                            <td>Index of the element in tabbing order.</td>
-                        </tr>
-                        <tr>
-                            <td>selectOnFocus</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When enabled, the focused tab is activated.</td>
-                        </tr>
-                        <tr>
-                            <td>previousButtonProps</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Uses to pass all properties of the HTMLButtonElement to the previous button.</td>
-                        </tr>
-                        <tr>
-                            <td>nextButtonProps</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Uses to pass all properties of the HTMLButtonElement to the next button.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties of TabView</h5>
+        <p>Any additional properties like style and class are passed to the main container element.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>activeIndex</td>
+                        <td>number</td>
+                        <td>0</td>
+                        <td>Index of the active tab.</td>
+                    </tr>
+                    <tr>
+                        <td>lazy</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When enabled, hidden tabs are not rendered at all. Defaults to false that hides tabs with css.</td>
+                    </tr>
+                    <tr>
+                        <td>scrollable</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When enabled displays buttons at each side of the tab headers to scroll the tab list.</td>
+                    </tr>
+                    <tr>
+                        <td>tabindex</td>
+                        <td>number</td>
+                        <td>0</td>
+                        <td>Index of the element in tabbing order.</td>
+                    </tr>
+                    <tr>
+                        <td>selectOnFocus</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When enabled, the focused tab is activated.</td>
+                    </tr>
+                    <tr>
+                        <td>previousButtonProps</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Uses to pass all properties of the HTMLButtonElement to the previous button.</td>
+                    </tr>
+                    <tr>
+                        <td>nextButtonProps</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Uses to pass all properties of the HTMLButtonElement to the next button.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Events</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>tab-change</td>
-                            <td>
-                                event.originalEvent: Browser event <br />
-                                event.index: Index of the selected tab
-                            </td>
-                            <td>Callback to invoke when an active tab is changed.</td>
-                        </tr>
-                        <tr>
-                            <td>tab-click</td>
-                            <td>
-                                event.originalEvent: Browser event <br />
-                                event.index: Index of the clicked tab
-                            </td>
-                            <td>Callback to invoke when an active tab is clicked.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Events</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>tab-change</td>
+                        <td>
+                            event.originalEvent: Browser event <br />
+                            event.index: Index of the selected tab
+                        </td>
+                        <td>Callback to invoke when an active tab is changed.</td>
+                    </tr>
+                    <tr>
+                        <td>tab-click</td>
+                        <td>
+                            event.originalEvent: Browser event <br />
+                            event.index: Index of the clicked tab
+                        </td>
+                        <td>Callback to invoke when an active tab is clicked.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-tabview</td>
-                            <td>Container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-tabview-nav</td>
-                            <td>Container of headers.</td>
-                        </tr>
-                        <tr>
-                            <td>p-tabview-selected</td>
-                            <td>Selected tab header.</td>
-                        </tr>
-                        <tr>
-                            <td>p-tabview-panels</td>
-                            <td>Container panels.</td>
-                        </tr>
-                        <tr>
-                            <td>p-tabview-panel</td>
-                            <td>Content of a tab.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-tabview</td>
+                        <td>Container element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-tabview-nav</td>
+                        <td>Container of headers.</td>
+                    </tr>
+                    <tr>
+                        <td>p-tabview-selected</td>
+                        <td>Selected tab header.</td>
+                    </tr>
+                    <tr>
+                        <td>p-tabview-panels</td>
+                        <td>Container panels.</td>
+                    </tr>
+                    <tr>
+                        <td>p-tabview-panel</td>
+                        <td>Content of a tab.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Accessibility</h5>
-            <h6>Screen Reader</h6>
-            <p>
-                TabView container is defined with the <i>tablist</i> role, as any attribute is passed to the container element <i>aria-labelledby</i> can be optionally used to specify an element to describe the TabView. Each tab header has a
-                <i>tab</i> role along with <i>aria-selected</i> state attribute and <i>aria-controls</i> to refer to the corresponding tab content element. The content element of each tab has <i>tabpanel</i> role, an id to match the
-                <i>aria-controls</i> of the header and <i>aria-labelledby</i> reference to the header as the accessible name.
-            </p>
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>
+            TabView container is defined with the <i>tablist</i> role, as any attribute is passed to the container element <i>aria-labelledby</i> can be optionally used to specify an element to describe the TabView. Each tab header has a
+            <i>tab</i> role along with <i>aria-selected</i> state attribute and <i>aria-controls</i> to refer to the corresponding tab content element. The content element of each tab has <i>tabpanel</i> role, an id to match the
+            <i>aria-controls</i> of the header and <i>aria-labelledby</i> reference to the header as the accessible name.
+        </p>
 
-            <h6>Tab Header Keyboard Support</h6>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Key</th>
-                            <th>Function</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>
-                                <i>tab</i>
-                            </td>
-                            <td>Moves focus through the header.</td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <i>enter</i>
-                            </td>
-                            <td>Activates the focused tab header.</td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <i>space</i>
-                            </td>
-                            <td>Activates the focused tab header.</td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <i>right arrow</i>
-                            </td>
-                            <td>Moves focus to the next header. If focus is on the last header, moves focus to the first header.</td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <i>left arrow</i>
-                            </td>
-                            <td>Moves focus to the previous header. If focus is on the first header, moves focus to the last header.</td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <i>home</i>
-                            </td>
-                            <td>Moves focus to the last header.</td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <i>end</i>
-                            </td>
-                            <td>Moves focus to the first header.</td>
-                        </tr>
-                        <tr>
-                            <td><i>pageUp</i></td>
-                            <td>Moves scroll position to first header.</td>
-                        </tr>
-                        <tr>
-                            <td><i>pageDown</i></td>
-                            <td>Moves scroll position to last header.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h6>Tab Header Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>tab</i>
+                        </td>
+                        <td>Moves focus through the header.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>Activates the focused tab header.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>Activates the focused tab header.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>right arrow</i>
+                        </td>
+                        <td>Moves focus to the next header. If focus is on the last header, moves focus to the first header.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>left arrow</i>
+                        </td>
+                        <td>Moves focus to the previous header. If focus is on the first header, moves focus to the last header.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>home</i>
+                        </td>
+                        <td>Moves focus to the last header.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>end</i>
+                        </td>
+                        <td>Moves focus to the first header.</td>
+                    </tr>
+                    <tr>
+                        <td><i>pageUp</i></td>
+                        <td>Moves scroll position to first header.</td>
+                    </tr>
+                    <tr>
+                        <td><i>pageDown</i></td>
+                        <td>Moves scroll position to last header.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc>
-    </ClientOnly>
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
diff --git a/pages/tabview/index.vue b/pages/tabview/index.vue
index f4cdf0590..29f2037ac 100755
--- a/pages/tabview/index.vue
+++ b/pages/tabview/index.vue
@@ -93,7 +93,7 @@
 
             <div class="card">
                 <h5>Custom Headers</h5>
-                <TabView class="tabview-custom" ref="tabview4">
+                <TabView ref="tabview4" class="tabview-custom">
                     <TabPanel>
                         <template #header>
                             <i class="pi pi-calendar"></i>
@@ -159,8 +159,8 @@
 </template>
 
 <script>
-import TabViewDoc from './TabViewDoc';
 import EventBus from '@/layouts/AppEventBus';
+import TabViewDoc from './TabViewDoc';
 
 export default {
     data() {
@@ -203,6 +203,7 @@ export default {
                 }
             }, 50);
         };
+
         EventBus.on('theme-change', this.themeChangeListener);
     },
     beforeUnmount() {
diff --git a/pages/tag/TagDoc.vue b/pages/tag/TagDoc.vue
index e1e7393e7..c3012a6a5 100644
--- a/pages/tag/TagDoc.vue
+++ b/pages/tag/TagDoc.vue
@@ -1,128 +1,136 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="TagDemo" :sources="sources" github="tag/TagDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="TagDemo" :sources="sources" github="tag/TagDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import Tag from 'primevue/tag';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/tag/tag.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p>Content of the tag is specified using the <i>value</i> property.</p>
-            <pre v-code><code>
+        <h5>Getting Started</h5>
+        <p>Content of the tag is specified using the <i>value</i> property.</p>
+        <pre v-code><code>
 &lt;Tag value="New"&gt;&lt;/Tag&gt;
 
 </code></pre>
 
-            <h5>Icon</h5>
-            <p>An icon can also be configured to be displayed next to the value with the <i>icon</i> property.</p>
-            <pre v-code><code>
+        <h5>Icon</h5>
+        <p>An icon can also be configured to be displayed next to the value with the <i>icon</i> property.</p>
+        <pre v-code><code>
 &lt;Tag value="New" icon="pi pi-plus"&gt;&lt;/Tag&gt;
 
 </code></pre>
 
-            <h5>Severities</h5>
-            <p>Different color options are available as severity levels.</p>
+        <h5>Severities</h5>
+        <p>Different color options are available as severity levels.</p>
 
-            <ul>
-                <li>success</li>
-                <li>info</li>
-                <li>warning</li>
-                <li>danger</li>
-            </ul>
+        <ul>
+            <li>success</li>
+            <li>info</li>
+            <li>warning</li>
+            <li>danger</li>
+        </ul>
 
-            <h5>Templating</h5>
-            <p>Content can easily be customized with the default slot instead of using the built-in display.</p>
-            <pre v-code><code>
+        <h5>Templating</h5>
+        <p>Content can easily be customized with the default slot instead of using the built-in display.</p>
+        <pre v-code><code>
 &lt;Tag&gt;
-   Content
+    Content
 &lt;/Tag&gt;
 
 </code></pre>
 
-            <h5>Properties</h5>
-            <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>value</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Value to display inside the tag.</td>
-                        </tr>
-                        <tr>
-                            <td>severity</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Severity type of the tag.</td>
-                        </tr>
-                        <tr>
-                            <td>rounded</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Whether the corners of the tag are rounded.</td>
-                        </tr>
-                        <tr>
-                            <td>icon</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Icon of the tag to display next to the value.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>value</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Value to display inside the tag.</td>
+                    </tr>
+                    <tr>
+                        <td>severity</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Severity type of the tag.</td>
+                    </tr>
+                    <tr>
+                        <td>rounded</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Whether the corners of the tag are rounded.</td>
+                    </tr>
+                    <tr>
+                        <td>icon</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Icon of the tag to display next to the value.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-tag</td>
-                            <td>Tag element</td>
-                        </tr>
-                        <tr>
-                            <td>p-tag-rounded</td>
-                            <td>Rounded element</td>
-                        </tr>
-                        <tr>
-                            <td>p-tag-icon</td>
-                            <td>Icon of the tag</td>
-                        </tr>
-                        <tr>
-                            <td>p-tag-value</td>
-                            <td>Value of the tag</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-tag</td>
+                        <td>Tag element</td>
+                    </tr>
+                    <tr>
+                        <td>p-tag-rounded</td>
+                        <td>Rounded element</td>
+                    </tr>
+                    <tr>
+                        <td>p-tag-icon</td>
+                        <td>Icon of the tag</td>
+                    </tr>
+                    <tr>
+                        <td>p-tag-value</td>
+                        <td>Value of the tag</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc>
-    </ClientOnly>
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>
+            Tag does not include any roles and attributes by default, any attribute is passed to the root element so aria roles and attributes can be added if required. If the tags are dynamic,
+            <i>aria-live</i> may be utilized as well. In case badges need to be tabbable, <i>tabindex</i> can be added to implement custom key handlers.
+        </p>
+
+        <h5>Keyboard Support</h5>
+        <p>Component does not include any interactive elements.</p>
+
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
@@ -136,7 +144,7 @@ export default {
 <template>
     <div>
         <h5>Tags</h5>
-        <Tag class="mr-2" value="Primary"></Tag>
+        <Tag class="mr-2" value="Primary" aria-label="Tabable Primary Tag" tabindex="0"></Tag>
         <Tag class="mr-2" severity="success" value="Success"></Tag>
         <Tag class="mr-2" severity="info" value="Info"></Tag>
         <Tag class="mr-2" severity="warning" value="Warning"></Tag>
@@ -170,7 +178,7 @@ export default {
 <template>
     <div>
         <h5>Tags</h5>
-        <Tag class="mr-2" value="Primary"></Tag>
+        <Tag class="mr-2" value="Primary" aria-label="Tabable Primary Tag" tabindex="0"></Tag>
         <Tag class="mr-2" severity="success" value="Success"></Tag>
         <Tag class="mr-2" severity="info" value="Info"></Tag>
         <Tag class="mr-2" severity="warning" value="Warning"></Tag>
@@ -203,7 +211,7 @@ export default {
                     imports: `<script src="https://unpkg.com/primevue@^3/tag/tag.min.js"><\\/script>`,
                     content: `<div id="app">
             <h5>Tags</h5>
-            <p-tag class="mr-2" value="Primary"></p-tag>
+            <p-tag class="mr-2" value="Primary" aria-label="Tabable Primary Tag" tabindex="0"></p-tag>
             <p-tag class="mr-2" severity="success" value="Success"></p-tag>
             <p-tag class="mr-2" severity="info" value="Info"></p-tag>
             <p-tag class="mr-2" severity="warning" value="Warning"></p-tag>
diff --git a/pages/tag/index.vue b/pages/tag/index.vue
index 5449faabb..42cebef08 100644
--- a/pages/tag/index.vue
+++ b/pages/tag/index.vue
@@ -11,7 +11,7 @@
         <div class="content-section implementation">
             <div class="card">
                 <h5>Tags</h5>
-                <Tag class="mr-2" value="Primary"></Tag>
+                <Tag class="mr-2" value="Primary" aria-label="Tabable Primary Tag" tabindex="0"></Tag>
                 <Tag class="mr-2" severity="success" value="Success"></Tag>
                 <Tag class="mr-2" severity="info" value="Info"></Tag>
                 <Tag class="mr-2" severity="warning" value="Warning"></Tag>
diff --git a/pages/terminal/TerminalDoc.vue b/pages/terminal/TerminalDoc.vue
index 14a96414a..fac211d80 100755
--- a/pages/terminal/TerminalDoc.vue
+++ b/pages/terminal/TerminalDoc.vue
@@ -1,35 +1,33 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="TerminalDemo" :sources="sources" github="terminal/TerminalDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="TerminalDemo" :sources="sources" github="terminal/TerminalDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import Terminal from 'primevue/terminal';
 import TerminalService from 'primevue/terminalservice';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/terminal/terminal.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p>
-                Commands are processed using an EventBus implementation called TerminalService. Import this service into your component and subscribe to the <i>command</i> event to process the commands by sending replies with the
-                <i>response</i> event.
-            </p>
-            <pre v-code><code>
+        <h5>Getting Started</h5>
+        <p>
+            Commands are processed using an EventBus implementation called TerminalService. Import this service into your component and subscribe to the <i>command</i> event to process the commands by sending replies with the <i>response</i> event.
+        </p>
+        <pre v-code><code>
 &lt;Terminal welcomeMessage="Welcome to PrimeVue" prompt="primevue $" /&gt;
 
 </code></pre>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 import TerminalService from 'primevue/terminalservice';
 
 export default {
-     methods: {
+    methods: {
         commandHandler(text) {
             let response;
             let argsIndex = text.indexOf(' ');
@@ -65,74 +63,103 @@ export default {
 
 </code></pre>
 
-            <h5>Properties</h5>
-            <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>welcomeMessage</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Initial text to display on terminal.</td>
-                        </tr>
-                        <tr>
-                            <td>prompt</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Prompt text for each command.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>welcomeMessage</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Initial text to display on terminal.</td>
+                    </tr>
+                    <tr>
+                        <td>prompt</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Prompt text for each command.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-terminal</td>
-                            <td>Container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-terminal-content</td>
-                            <td>Content of terminal.</td>
-                        </tr>
-                        <tr>
-                            <td>p-terminal-prompt</td>
-                            <td>Prompt text.</td>
-                        </tr>
-                        <tr>
-                            <td>p-terminal-response</td>
-                            <td>Command response.</td>
-                        </tr>
-                        <tr>
-                            <td>p-terminal-input</td>
-                            <td>Input element to enter commands.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-terminal</td>
+                        <td>Container element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-terminal-content</td>
+                        <td>Content of terminal.</td>
+                    </tr>
+                    <tr>
+                        <td>p-terminal-prompt</td>
+                        <td>Prompt text.</td>
+                    </tr>
+                    <tr>
+                        <td>p-terminal-response</td>
+                        <td>Command response.</td>
+                    </tr>
+                    <tr>
+                        <td>p-terminal-input</td>
+                        <td>Input element to enter commands.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc>
-    </ClientOnly>
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>Terminal component has an input element that can be described with <i>aria-label</i> or <i>aria-labelledby</i> props. The element that lists the previous commands has <i>aria-live</i> so that changes are received by the screen reader.</p>
+
+        <h6>Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>tab</i>
+                        </td>
+                        <td>Moves focus through the input element.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>Executes the command when focus in on the input element.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
@@ -146,7 +173,7 @@ export default {
 <template>
     <div>
         <p>Enter "date" to display the current date, "greet {0}" for a message and "random" to get a random number.</p>
-        <Terminal welcomeMessage="Welcome to PrimeVue" prompt="primevue $" class="dark-demo-terminal" />
+        <Terminal welcomeMessage="Welcome to PrimeVue" prompt="primevue $" class="dark-demo-terminal" aria-label="PrimeVue Terminal Service" />
     </div>
 </template>
 
@@ -218,7 +245,7 @@ p {
 <template>
     <div>
         <p>Enter "date" to display the current date, "greet {0}" for a message and "random" to get a random number.</p>
-        <Terminal welcomeMessage="Welcome to PrimeVue" prompt="primevue $" class="dark-demo-terminal" />
+        <Terminal welcomeMessage="Welcome to PrimeVue" prompt="primevue $" class="dark-demo-terminal" aria-label="PrimeVue Terminal Service" />
     </div>
 </template>
 
@@ -294,7 +321,7 @@ p {
                     imports: `<script src="https://unpkg.com/primevue@^3/terminal/terminal.min.js"><\\/script>`,
                     content: `<div id="app">
             <p>Enter "date" to display the current date, "greet {0}" for a message and "random" to get a random number.</p>
-            <p-terminal welcome-message="Welcome to PrimeVue" prompt="primevue $" class="dark-demo-terminal"></p-terminal>
+            <p-terminal welcome-message="Welcome to PrimeVue" prompt="primevue $" class="dark-demo-terminal" aria-label="PrimeVue Terminal Service"></p-terminal>
         </div>
 
         <script type="module">
diff --git a/pages/terminal/index.vue b/pages/terminal/index.vue
index 865e40614..0eee3df05 100755
--- a/pages/terminal/index.vue
+++ b/pages/terminal/index.vue
@@ -11,7 +11,7 @@
         <div class="content-section implementation">
             <div class="card">
                 <p>Enter "date" to display the current date, "greet {0}" for a message and "random" to get a random number.</p>
-                <Terminal welcomeMessage="Welcome to PrimeVue" prompt="primevue $" class="dark-demo-terminal" />
+                <Terminal welcomeMessage="Welcome to PrimeVue" prompt="primevue $" class="dark-demo-terminal" aria-label="PrimeVue Terminal Service" />
             </div>
         </div>
 
@@ -20,10 +20,16 @@
 </template>
 
 <script>
-import TerminalDoc from './TerminalDoc';
 import TerminalService from 'primevue/terminalservice';
+import TerminalDoc from './TerminalDoc';
 
 export default {
+    mounted() {
+        TerminalService.on('command', this.commandHandler);
+    },
+    beforeUnmount() {
+        TerminalService.off('command', this.commandHandler);
+    },
     methods: {
         commandHandler(text) {
             let response;
@@ -50,12 +56,6 @@ export default {
             TerminalService.emit('response', response);
         }
     },
-    mounted() {
-        TerminalService.on('command', this.commandHandler);
-    },
-    beforeUnmount() {
-        TerminalService.off('command', this.commandHandler);
-    },
     components: {
         TerminalDoc: TerminalDoc
     }
diff --git a/pages/textarea/TextareaDoc.vue b/pages/textarea/TextareaDoc.vue
index f46e5c687..18a289178 100755
--- a/pages/textarea/TextareaDoc.vue
+++ b/pages/textarea/TextareaDoc.vue
@@ -1,92 +1,91 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="TextareaDemo" :sources="sources" github="textarea/TextareaDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="TextareaDemo" :sources="sources" github="textarea/TextareaDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import Textarea from 'primevue/textarea';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/textarea/textarea.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p>A model can be bound using the standard v-model directive.</p>
-            <pre v-code><code>
+        <h5>Getting Started</h5>
+        <p>A model can be bound using the standard v-model directive.</p>
+        <pre v-code><code>
 &lt;Textarea v-model="value" rows="5" cols="30" /&gt;
 
 </code></pre>
 
-            <h5>AutoResize</h5>
-            <p>In auto resize mode, textarea grows instead of displaying a scrollbar.</p>
-            <pre v-code><code>
+        <h5>AutoResize</h5>
+        <p>In auto resize mode, textarea grows instead of displaying a scrollbar.</p>
+        <pre v-code><code>
 &lt;Textarea v-model="value" :autoResize="true" rows="5" cols="30" /&gt;
 
 </code></pre>
 
-            <h5>Properties</h5>
-            <p>Textarea passes any attribute to the underlying textarea element, additional attributes are the following.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>modelValue</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Value of the component.</td>
-                        </tr>
-                        <tr>
-                            <td>autoResize</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When present, height of textarea changes as being typed.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <p>Textarea passes any attribute to the underlying textarea element, additional attributes are the following.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>modelValue</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Value of the component.</td>
+                    </tr>
+                    <tr>
+                        <td>autoResize</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When present, height of textarea changes as being typed.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Events</h5>
-            <p>Any valid event such as focus, blur and input are passed to the underlying input element.</p>
+        <h5>Events</h5>
+        <p>Any valid event such as focus, blur and input are passed to the underlying input element.</p>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-inputtextarea</td>
-                            <td>Textarea element</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-inputtextarea</td>
+                        <td>Textarea element</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Accessibility</h5>
-            <h6>Screen Reader</h6>
-            <p>
-                Textarea component renders a native textarea element that implicitly includes any passed prop. Value to describe the component can either be provided via <i>label</i> tag combined with <i>id</i> prop or using <i>aria-labelledby</i>,
-                <i>aria-label</i> props.
-            </p>
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>
+            Textarea component renders a native textarea element that implicitly includes any passed prop. Value to describe the component can either be provided via <i>label</i> tag combined with <i>id</i> prop or using <i>aria-labelledby</i>,
+            <i>aria-label</i> props.
+        </p>
 
-            <pre v-code><code>
+        <pre v-code><code>
 &lt;label for="address1"&gt;Address 1&lt;/label&gt;
 &lt;Textarea id="address1" /&gt;
 
@@ -97,28 +96,27 @@ import Textarea from 'primevue/textarea';
 
 </code></pre>
 
-            <h6>Keyboard Support</h6>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Key</th>
-                            <th>Function</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td><i>tab</i></td>
-                            <td>Moves focus to the input.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h6>Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>tab</i></td>
+                        <td>Moves focus to the input.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc>
-    </ClientOnly>
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
diff --git a/pages/tieredmenu/TieredMenuDoc.vue b/pages/tieredmenu/TieredMenuDoc.vue
index a077b148f..149f74d2b 100755
--- a/pages/tieredmenu/TieredMenuDoc.vue
+++ b/pages/tieredmenu/TieredMenuDoc.vue
@@ -1,29 +1,28 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="TieredMenuDemo" :sources="sources" github="tieredmenu/TieredMenuDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="TieredMenuDemo" :sources="sources" github="tieredmenu/TieredMenuDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import TieredMenu from 'primevue/tieredmenu';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>MenuModel</h5>
-            <p>TieredMenu uses the common MenuModel API to define the items, visit <nuxt-link to="/menumodel">MenuModel API</nuxt-link> for details.</p>
+        <h5>MenuModel</h5>
+        <p>TieredMenu uses the common MenuModel API to define the items, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p>
 
-            <h5>Getting Started</h5>
-            <p>TieredMenu requires a collection of menuitems as its model.</p>
-            <pre v-code><code>
+        <h5>Getting Started</h5>
+        <p>TieredMenu requires a collection of menuitems as its model.</p>
+        <pre v-code><code>
 &lt;TieredMenu :model="items" /&gt;
 
 </code></pre>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 export default {
     data() {
         return {
@@ -161,25 +160,25 @@ export default {
 
 </code></pre>
 
-            <h5>Popup Mode</h5>
-            <p>TieredMenu is inline by default whereas popup mode is supported by enabling popup property and calling toggle method with an event of the target.</p>
+        <h5>Popup Mode</h5>
+        <p>TieredMenu is inline by default whereas popup mode is supported by enabling popup property and calling toggle method with an event of the target.</p>
 
-            <pre v-code><code>
+        <pre v-code><code>
 &lt;Button type="button" label="Toggle" @click="toggle" /&gt;
 &lt;TieredMenu ref="menu" :model="items" :popup="true" /&gt;
 
 </code></pre>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 toggle(event) {
     this.$refs.menu.toggle(event);
 }
 
 </code></pre>
 
-            <h5>Templating</h5>
-            <p>TieredMenu offers content customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter.</p>
-            <pre v-code><code><template v-pre>
+        <h5>Templating</h5>
+        <p>TieredMenu offers content customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter.</p>
+        <pre v-code><code><template v-pre>
 &lt;TieredMenu :model="items"&gt;
     &lt;template #item="{item}"&gt;
         &lt;a :href="item.url"&gt;{{item.label}}&lt;/a&gt;
@@ -188,166 +187,338 @@ toggle(event) {
 </template>
 </code></pre>
 
-            <p><i>nuxt-link</i> with route configuration can also be used within templating for further customization.</p>
-            <pre v-code><code><template v-pre>
+        <p><i>router-link</i> with route configuration can also be used within templating for further customization.</p>
+        <pre v-code><code><template v-pre>
 &lt;TieredMenu :model="items"&gt;
     &lt;template #item="{item}"&gt;
-        &lt;nuxt-link :to="item.to" custom v-slot="{href, route, navigate, isActive, isExactActive}"&gt;
-            &lt;a :href="href" @click="navigate" :class="{'active-link': isActive, 'active-link-exact": isExactActive}&gt;{{route.fullPath}}&lt;/a&gt;
-        &lt;/nuxt-link&gt;
+        &lt;router-link :to="item.to" custom v-slot="{href, route, navigate, isActive, isExactActive}"&gt;
+            &lt;a :href="href" @click="navigate" :class="{'active-link': isActive, 'active-link-exact': isExactActive}"&gt;{{route.fullPath}}&lt;/a&gt;
+        &lt;/router-link&gt;
     &lt;/template&gt;
 &lt;/TieredMenu&gt;
 </template>
 </code></pre>
 
-            <h5>Properties</h5>
-            <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>model</td>
-                            <td>array</td>
-                            <td>null</td>
-                            <td>An array of menuitems.</td>
-                        </tr>
-                        <tr>
-                            <td>popup</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Defines if menu would displayed as a popup.</td>
-                        </tr>
-                        <tr>
-                            <td>appendTo</td>
-                            <td>string</td>
-                            <td>body</td>
-                            <td>A valid query selector or an HTMLElement to specify where the overlay gets attached.</td>
-                        </tr>
-                        <tr>
-                            <td>baseZIndex</td>
-                            <td>number</td>
-                            <td>0</td>
-                            <td>Base zIndex value to use in layering.</td>
-                        </tr>
-                        <tr>
-                            <td>autoZIndex</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether to automatically manage layering.</td>
-                        </tr>
-                        <tr>
-                            <td>exact</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether to apply 'nuxt-link-active-exact' class if route exactly matches the item path.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>model</td>
+                        <td>array</td>
+                        <td>null</td>
+                        <td>An array of menuitems.</td>
+                    </tr>
+                    <tr>
+                        <td>popup</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Defines if menu would displayed as a popup.</td>
+                    </tr>
+                    <tr>
+                        <td>appendTo</td>
+                        <td>string</td>
+                        <td>body</td>
+                        <td>A valid query selector or an HTMLElement to specify where the overlay gets attached.</td>
+                    </tr>
+                    <tr>
+                        <td>baseZIndex</td>
+                        <td>number</td>
+                        <td>0</td>
+                        <td>Base zIndex value to use in layering.</td>
+                    </tr>
+                    <tr>
+                        <td>autoZIndex</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Whether to automatically manage layering.</td>
+                    </tr>
+                    <tr>
+                        <td>exact</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Whether to apply 'router-link-active-exact' class if route exactly matches the item path.</td>
+                    </tr>
+                    <tr>
+                        <td>disabled</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When present, it specifies that the component should be disabled.</td>
+                    </tr>
+                    <tr>
+                        <td>tabindex</td>
+                        <td>number</td>
+                        <td>0</td>
+                        <td>Index of the element in tabbing order.</td>
+                    </tr>
+                    <tr>
+                        <td>aria-label</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Defines a string value that labels an interactive element.</td>
+                    </tr>
+                    <tr>
+                        <td>aria-labelledby</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Methods</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>toggle</td>
-                            <td>event: Browser event</td>
-                            <td>Toggles the visibility of the overlay.</td>
-                        </tr>
-                        <tr>
-                            <td>show</td>
-                            <td>event: Browser event</td>
-                            <td>Shows the overlay.</td>
-                        </tr>
-                        <tr>
-                            <td>hide</td>
-                            <td>-</td>
-                            <td>Hides the overlay.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Methods</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>toggle</td>
+                        <td>event: Browser event</td>
+                        <td>Toggles the visibility of the overlay.</td>
+                    </tr>
+                    <tr>
+                        <td>show</td>
+                        <td>event: Browser event</td>
+                        <td>Shows the overlay.</td>
+                    </tr>
+                    <tr>
+                        <td>hide</td>
+                        <td>-</td>
+                        <td>Hides the overlay.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Slots</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>item</td>
-                            <td>item: Menuitem instance</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Events</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>focus</td>
+                        <td>event</td>
+                        <td>Callback to invoke when the component receives focus.</td>
+                    </tr>
+                    <tr>
+                        <td>blur</td>
+                        <td>event</td>
+                        <td>Callback to invoke when the component loses focus.</td>
+                    </tr>
+                    <tr>
+                        <td>before-show</td>
+                        <td>-</td>
+                        <td>Callback to invoke before the popup is shown.</td>
+                    </tr>
+                    <tr>
+                        <td>before-hide</td>
+                        <td>-</td>
+                        <td>Callback to invoke before the popup is hidden.</td>
+                    </tr>
+                    <tr>
+                        <td>show</td>
+                        <td>-</td>
+                        <td>Callback to invoke when the popup is shown.</td>
+                    </tr>
+                    <tr>
+                        <td>hide</td>
+                        <td>-</td>
+                        <td>Callback to invoke when the popup is hidden.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-tieredmenu</td>
-                            <td>Container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-submenu-list</td>
-                            <td>Submenu list element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-menuitem</td>
-                            <td>Menuitem element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-menuitem-active</td>
-                            <td>Active menuitem element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-menuitem-text</td>
-                            <td>Label of a menuitem.</td>
-                        </tr>
-                        <tr>
-                            <td>p-menuitem-icon</td>
-                            <td>Icon of a menuitem.</td>
-                        </tr>
-                        <tr>
-                            <td>p-submenu-icon</td>
-                            <td>Arrow icon of a submenu.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Slots</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>item</td>
+                        <td>item: Menuitem instance</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc>
-    </ClientOnly>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-tieredmenu</td>
+                        <td>Container element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-tieredmenu-root-list</td>
+                        <td>Root list element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-submenu-list</td>
+                        <td>Submenu list element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-menuitem</td>
+                        <td>Menuitem element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-menuitem-active</td>
+                        <td>Active menuitem element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-menuitem-content</td>
+                        <td>Content of menuitem.</td>
+                    </tr>
+                    <tr>
+                        <td>p-menuitem-link</td>
+                        <td>Link element of the menuitem.</td>
+                    </tr>
+                    <tr>
+                        <td>p-menuitem-text</td>
+                        <td>Label of a menuitem.</td>
+                    </tr>
+                    <tr>
+                        <td>p-menuitem-icon</td>
+                        <td>Icon of a menuitem.</td>
+                    </tr>
+                    <tr>
+                        <td>p-submenu-icon</td>
+                        <td>Arrow icon of a submenu.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>
+            TieredMenu component uses the <i>menubar</i> role with <i>aria-orientation</i> set to "vertical" and the value to describe the menu can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. Each list item has a
+            <i>menuitem</i> role with <i>aria-label</i> referring to the label of the item and <i>aria-disabled</i> defined if the item is disabled. A submenu within a TieredMenu uses the <i>menu</i> role with an <i>aria-labelledby</i> defined as the
+            id of the submenu root menuitem label. In addition, menuitems that open a submenu have <i>aria-haspopup</i> and <i>aria-expanded</i> to define the relation between the item and the submenu.
+        </p>
+
+        <p>In popup mode, the component implicitly manages the <i>aria-expanded</i>, <i>aria-haspopup</i> and <i>aria-controls</i> attributes of the target element to define the relation between the target and the popup.</p>
+
+        <h6>Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>tab</i>
+                        </td>
+                        <td>Add focus to the first item if focus moves in to the menu. If the focus is already within the menu, focus moves to the next focusable item in the page tab sequence.</td>
+                    </tr>
+                    <tr>
+                        <td><i>shift</i> + <i>tab</i></td>
+                        <td>Add focus to the first item if focus moves in to the menu. If the focus is already within the menu, focus moves to the previous focusable item in the page tab sequence.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>If menuitem has a submenu, opens the submenu otherwise activates the menuitem and closes all open overlays.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>If menuitem has a submenu, opens the submenu otherwise activates the menuitem and closes all open overlays.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>escape</i>
+                        </td>
+                        <td>If focus is inside a popup submenu, closes the submenu and moves focus to the root item of the closed submenu.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>down arrow</i>
+                        </td>
+                        <td>Moves focus to the next menuitem within the submenu.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>up arrow</i>
+                        </td>
+                        <td>Moves focus to the previous menuitem within the submenu.</td>
+                    </tr>
+                    <tr>
+                        <td><i>alt</i> + <i>up arrow</i></td>
+                        <td>Closes the popup, then moves focus to the target element.</td>
+                    </tr>
+                    <tr>
+                        <td><i>right arrow</i></td>
+                        <td>If option is closed, opens the option otherwise moves focus to the first child option.</td>
+                    </tr>
+                    <tr>
+                        <td><i>left arrow</i></td>
+                        <td>If option is open, closes the option otherwise moves focus to the parent option.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>home</i>
+                        </td>
+                        <td>Moves focus to the first menuitem within the submenu.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>end</i>
+                        </td>
+                        <td>Moves focus to the last menuitem within the submenu.</td>
+                    </tr>
+                    <tr>
+                        <td><i>any printable character</i></td>
+                        <td>Moves focus to the menuitem whose label starts with the characters being typed.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
diff --git a/pages/tieredmenu/index.vue b/pages/tieredmenu/index.vue
index 28eb562e8..a417a8448 100755
--- a/pages/tieredmenu/index.vue
+++ b/pages/tieredmenu/index.vue
@@ -15,7 +15,7 @@
 
                 <h5>Overlay</h5>
                 <Button type="button" label="Toggle" @click="toggle" aria-haspopup="true" aria-controls="overlay_tmenu" />
-                <TieredMenu id="overlay_tmenu" ref="menu" :model="items" :popup="true" />
+                <TieredMenu ref="menu" id="overlay_tmenu" :model="items" :popup="true" />
             </div>
         </div>
 
diff --git a/pages/timeline/TimelineDoc.vue b/pages/timeline/TimelineDoc.vue
index 9cb193251..98f0ed7dc 100644
--- a/pages/timeline/TimelineDoc.vue
+++ b/pages/timeline/TimelineDoc.vue
@@ -1,25 +1,24 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="TimelineDemo" :sources="sources" github="timeline/TimelineDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="TimelineDemo" :sources="sources" github="timeline/TimelineDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import Timeline from 'primevue/timeline';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/timeline/timeline.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p>
-                Timeline receives the events with the <i>value</i> property as a collection of arbitrary objects. In addition, <i>content</i> template is required to display the representation of an event. Example below is a sample events array that
-                is used throughout the documentation.
-            </p>
-            <pre v-code.script><code>
+        <h5>Getting Started</h5>
+        <p>
+            Timeline receives the events with the <i>value</i> property as a collection of arbitrary objects. In addition, <i>content</i> template is required to display the representation of an event. Example below is a sample events array that is
+            used throughout the documentation.
+        </p>
+        <pre v-code.script><code>
 export default {
     data() {
         return {
@@ -38,7 +37,7 @@ export default {
 
 </code></pre>
 
-            <pre v-code><code><template v-pre>
+        <pre v-code><code><template v-pre>
 &lt;Timeline :value="events"&gt;
 	&lt;template #content="slotProps"&gt;
 		&#123;&#123;slotProps.item.status&#125;&#125;
@@ -47,9 +46,9 @@ export default {
 </template>
 </code></pre>
 
-            <h5>Layout</h5>
-            <p>Default layout of the timeline is vertical, setting <i>layout</i> to "horizontal" displays the items horizontally.</p>
-            <pre v-code><code><template v-pre>
+        <h5>Layout</h5>
+        <p>Default layout of the timeline is vertical, setting <i>layout</i> to "horizontal" displays the items horizontally.</p>
+        <pre v-code><code><template v-pre>
 &lt;Timeline :value="events" layout="horizontal&gt;
 	&lt;template #content="slotProps"&gt;
 		&#123;&#123;slotProps.item.status&#125;&#125;
@@ -58,9 +57,9 @@ export default {
 </template>
 </code></pre>
 
-            <h5>Alignment</h5>
-            <p>Location of the timeline bar is defined using the <i>align</i> property.</p>
-            <pre v-code><code><template v-pre>
+        <h5>Alignment</h5>
+        <p>Location of the timeline bar is defined using the <i>align</i> property.</p>
+        <pre v-code><code><template v-pre>
 &lt;Timeline :value="events" align="right"&gt;
 	&lt;template #content="slotProps"&gt;
 		&#123;&#123;slotProps.item.status&#125;&#125;
@@ -69,8 +68,8 @@ export default {
 </template>
 </code></pre>
 
-            <p>In addition, the "alternate" alignment option make the contents take turns around the timeline bar.</p>
-            <pre v-code><code><template v-pre>
+        <p>In addition, the "alternate" alignment option make the contents take turns around the timeline bar.</p>
+        <pre v-code><code><template v-pre>
 &lt;Timeline :value="events" align="alternate"&gt;
 	&lt;template #content="slotProps"&gt;
 		&#123;&#123;slotProps.item.status&#125;&#125;
@@ -79,9 +78,9 @@ export default {
 </template>
 </code></pre>
 
-            <h5>Opposite</h5>
-            <p>Content to be placed at the other side of the bar is defined with the <i>opposite</i> template.</p>
-            <pre v-code><code><template v-pre>
+        <h5>Opposite</h5>
+        <p>Content to be placed at the other side of the bar is defined with the <i>opposite</i> template.</p>
+        <pre v-code><code><template v-pre>
 &lt;Timeline :value="events"&gt;
 	&lt;template #opposite="slotProps"&gt;
 		&lt;small class="p-text-secondary"&gt;&#123;&#123;slotProps.item.date&#125;&#125;&lt;/small&gt;
@@ -93,9 +92,9 @@ export default {
 </template>
 </code></pre>
 
-            <h5>Custom Markers</h5>
-            <p><i>marker</i> template allows placing a custom event marker instead of the default one. Below is an example with custom markers and content.</p>
-            <pre v-code><code><template v-pre>
+        <h5>Custom Markers</h5>
+        <p><i>marker</i> template allows placing a custom event marker instead of the default one. Below is an example with custom markers and content.</p>
+        <pre v-code><code><template v-pre>
 &lt;Timeline :value="events" align="alternate" class="customized-timeline"&gt;
 	&lt;template #marker="slotProps"&gt;
 		&lt;span class="custom-marker shadow-2" :style="&#123;backgroundColor: slotProps.item.color&#125;"&gt;
@@ -111,7 +110,7 @@ export default {
 				&#123;&#123;slotProps.item.date&#125;&#125;
 			&lt;/template&gt;
 			&lt;template #content&gt;
-				&lt;img v-if="slotProps.item.image" :src="'/demo/images/product/' + slotProps.item.image" :alt="slotProps.item.name" width="200" class="shadow-2" /&gt;
+				&lt;img v-if="slotProps.item.image" :src="'demo/images/product/' + slotProps.item.image" :alt="slotProps.item.name" width="200" class="shadow-2" /&gt;
 				&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
 					quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!&lt;/p&gt;
 				&lt;Button label="Read more" class="p-button-text"&gt;&lt;/Button&gt;
@@ -122,12 +121,12 @@ export default {
 </template>
 </code></pre>
 
-            <h5>Custom Connectors</h5>
-            <p>
-                Connector is an element that binds two events together, use the <i>connector</i> slot to use your own element instead of the default one. If you just require to customize simple properties like the color and width, apply the
-                "p-timeline-event-connector" class to your element to use the built-in positioning.
-            </p>
-            <pre v-code><code><template v-pre>
+        <h5>Custom Connectors</h5>
+        <p>
+            Connector is an element that binds two events together, use the <i>connector</i> slot to use your own element instead of the default one. If you just require to customize simple properties like the color and width, apply the
+            "p-timeline-event-connector" class to your element to use the built-in positioning.
+        </p>
+        <pre v-code><code><template v-pre>
 &lt;Timeline :value="events"&gt;
 	&lt;template #content="slotProps"&gt;
 		&#123;&#123;slotProps.item.status&#125;&#125;
@@ -139,163 +138,169 @@ export default {
 </template>
 </code></pre>
 
-            <h5>Properties</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>value</td>
-                            <td>array</td>
-                            <td>null</td>
-                            <td>An array of events to display.</td>
-                        </tr>
-                        <tr>
-                            <td>align</td>
-                            <td>string</td>
-                            <td>left</td>
-                            <td>Position of the timeline bar relative to the content. Valid values are "left", "right" and "alternate" for vertical layout and "top", "bottom" for horizontal layout.</td>
-                        </tr>
-                        <tr>
-                            <td>layout</td>
-                            <td>string</td>
-                            <td>vertical</td>
-                            <td>Orientation of the timeline, valid values are "vertical" and "horizontal".</td>
-                        </tr>
-                        <tr>
-                            <td>dataKey</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Name of the field that uniquely identifies the a record in the data.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>value</td>
+                        <td>array</td>
+                        <td>null</td>
+                        <td>An array of events to display.</td>
+                    </tr>
+                    <tr>
+                        <td>align</td>
+                        <td>string</td>
+                        <td>left</td>
+                        <td>Position of the timeline bar relative to the content. Valid values are "left", "right" and "alternate" for vertical layout and "top", "bottom" for horizontal layout.</td>
+                    </tr>
+                    <tr>
+                        <td>layout</td>
+                        <td>string</td>
+                        <td>vertical</td>
+                        <td>Orientation of the timeline, valid values are "vertical" and "horizontal".</td>
+                    </tr>
+                    <tr>
+                        <td>dataKey</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Name of the field that uniquely identifies the a record in the data.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Slots</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>opposite</td>
-                            <td>
-                                item: Position of the event<br />
-                                index: Index of the event
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>marker</td>
-                            <td>
-                                item: Custom marker of the event<br />
-                                index: Index of the event
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>content</td>
-                            <td>
-                                item: Content of the event<br />
-                                index: Index of the event
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>connector</td>
-                            <td>
-                                item: Connector of the event<br />
-                                index: Index of the event
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Slots</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>opposite</td>
+                        <td>
+                            item: Position of the event<br />
+                            index: Index of the event
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>marker</td>
+                        <td>
+                            item: Custom marker of the event<br />
+                            index: Index of the event
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>content</td>
+                        <td>
+                            item: Content of the event<br />
+                            index: Index of the event
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>connector</td>
+                        <td>
+                            item: Connector of the event<br />
+                            index: Index of the event
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-timeline</td>
-                            <td>Container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-timeline-left</td>
-                            <td>Container element when alignment is left.</td>
-                        </tr>
-                        <tr>
-                            <td>p-timeline-right</td>
-                            <td>Container element when alignment is right.</td>
-                        </tr>
-                        <tr>
-                            <td>p-timeline-top</td>
-                            <td>Container element when alignment is top.</td>
-                        </tr>
-                        <tr>
-                            <td>p-timeline-bottom</td>
-                            <td>Container element when alignment is bottom.</td>
-                        </tr>
-                        <tr>
-                            <td>p-timeline-alternate</td>
-                            <td>Container element when alignment is alternating.</td>
-                        </tr>
-                        <tr>
-                            <td>p-timeline-vertical</td>
-                            <td>Container element of a vertical timeline.</td>
-                        </tr>
-                        <tr>
-                            <td>p-timeline-horizontal</td>
-                            <td>Container element of a horizontal timeline.</td>
-                        </tr>
-                        <tr>
-                            <td>p-timeline-event</td>
-                            <td>Event element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-timeline-event-opposite</td>
-                            <td>Opposite of an event content.</td>
-                        </tr>
-                        <tr>
-                            <td>p-timeline-event-content</td>
-                            <td>Event content.</td>
-                        </tr>
-                        <tr>
-                            <td>p-timeline-event-separator</td>
-                            <td>Separator element of an event.</td>
-                        </tr>
-                        <tr>
-                            <td>p-timeline-event-marker</td>
-                            <td>Marker element of an event.</td>
-                        </tr>
-                        <tr>
-                            <td>p-timeline-event-connector</td>
-                            <td>Connector element of an event.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-timeline</td>
+                        <td>Container element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-timeline-left</td>
+                        <td>Container element when alignment is left.</td>
+                    </tr>
+                    <tr>
+                        <td>p-timeline-right</td>
+                        <td>Container element when alignment is right.</td>
+                    </tr>
+                    <tr>
+                        <td>p-timeline-top</td>
+                        <td>Container element when alignment is top.</td>
+                    </tr>
+                    <tr>
+                        <td>p-timeline-bottom</td>
+                        <td>Container element when alignment is bottom.</td>
+                    </tr>
+                    <tr>
+                        <td>p-timeline-alternate</td>
+                        <td>Container element when alignment is alternating.</td>
+                    </tr>
+                    <tr>
+                        <td>p-timeline-vertical</td>
+                        <td>Container element of a vertical timeline.</td>
+                    </tr>
+                    <tr>
+                        <td>p-timeline-horizontal</td>
+                        <td>Container element of a horizontal timeline.</td>
+                    </tr>
+                    <tr>
+                        <td>p-timeline-event</td>
+                        <td>Event element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-timeline-event-opposite</td>
+                        <td>Opposite of an event content.</td>
+                    </tr>
+                    <tr>
+                        <td>p-timeline-event-content</td>
+                        <td>Event content.</td>
+                    </tr>
+                    <tr>
+                        <td>p-timeline-event-separator</td>
+                        <td>Separator element of an event.</td>
+                    </tr>
+                    <tr>
+                        <td>p-timeline-event-marker</td>
+                        <td>Marker element of an event.</td>
+                    </tr>
+                    <tr>
+                        <td>p-timeline-event-connector</td>
+                        <td>Connector element of an event.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc>
-    </ClientOnly>
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>Timeline uses a semantic ordered list element to list the events. No specific role is enforced, still you may use any aria role and attributes as any valid attribute is passed to the list element.</p>
+
+        <h6>Keyboard Support</h6>
+        <p>Component does not include any interactive elements.</p>
+
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
@@ -442,7 +447,7 @@ export default {
     ::v-deep(.customized-timeline) {
             .p-timeline-event:nth-child(even) {
                 flex-direction: row !important;
-                
+
                 .p-timeline-event-content {
                     text-align: left !important;
                 }
@@ -600,7 +605,7 @@ export default {
     ::v-deep(.customized-timeline) {
             .p-timeline-event:nth-child(even) {
                 flex-direction: row !important;
-                
+
                 .p-timeline-event-content {
                     text-align: left !important;
                 }
@@ -766,7 +771,7 @@ export default {
             .customized-timeline .p-timeline-event:nth-child(even) {
                 flex-direction: row !important;
             }
-                    
+
             .customized-timeline .p-timeline-event:nth-child(even) .p-timeline-event-content {
                 text-align: left !important;
             }
diff --git a/pages/timeline/index.vue b/pages/timeline/index.vue
index ce51321b0..541bfa9c8 100644
--- a/pages/timeline/index.vue
+++ b/pages/timeline/index.vue
@@ -65,7 +65,7 @@
                                 {{ slotProps.item.date }}
                             </template>
                             <template #content>
-                                <img v-if="slotProps.item.image" :src="'/demo/images/product/' + slotProps.item.image" :alt="slotProps.item.name" width="200" class="shadow-2" />
+                                <img v-if="slotProps.item.image" :src="'demo/images/product/' + slotProps.item.image" :alt="slotProps.item.name" width="200" class="shadow-2" />
                                 <p>
                                     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse,
                                     cupiditate neque quas!
diff --git a/pages/toast/ToastDoc.vue b/pages/toast/ToastDoc.vue
index 58d8f1efc..50c325b78 100755
--- a/pages/toast/ToastDoc.vue
+++ b/pages/toast/ToastDoc.vue
@@ -1,9 +1,8 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="ToastDemo" :sources="sources" github="toast/ToastDemo.vue">
-            <h5>ToastService</h5>
-            <p>Toast messages are dynamically created using a <i>ToastService</i> that needs to be installed globally before the application instance is created.</p>
-            <pre v-code.script><code>
+    <AppDoc name="ToastDemo" :sources="sources" github="toast/ToastDemo.vue">
+        <h5>ToastService</h5>
+        <p>Toast messages are dynamically created using a <i>ToastService</i> that needs to be installed globally before the application instance is created.</p>
+        <pre v-code.script><code>
 import {createApp} from 'vue';
 import ToastService from 'primevue/toastservice';
 
@@ -12,35 +11,35 @@ app.use(ToastService);
 
 </code></pre>
 
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import Toast from 'primevue/toast';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/toast/toast.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p>
-                Ideal location of a Toast is the main application template so that it can be used by any component within the application. A single message is represented by the Message interface in PrimeVue that defines various properties such as
-                severity, summary and detail.
-            </p>
+        <h5>Getting Started</h5>
+        <p>
+            Ideal location of a Toast is the main application template so that it can be used by any component within the application. A single message is represented by the Message interface in PrimeVue that defines various properties such as
+            severity, summary and detail.
+        </p>
 
-            <pre v-code><code>
+        <pre v-code><code>
 &lt;template&gt;
     &lt;Toast /&gt;
 &lt;template&gt;
 
 </code></pre>
 
-            <h5>Options API</h5>
-            <p><i>$toast</i> is available as a property in the application instance.</p>
-            <pre v-code.script><code>
+        <h5>Options API</h5>
+        <p><i>$toast</i> is available as a property in the application instance.</p>
+        <pre v-code.script><code>
 export default {
     mounted() {
         this.$toast.add({severity:'success', summary: 'Success Message', detail:'Order submitted', life: 3000});
@@ -49,9 +48,9 @@ export default {
 
 </code></pre>
 
-            <h5>Composition API</h5>
-            <p>The toast instance can be injected with the <i>useToast</i> function.</p>
-            <pre v-code.script><code>
+        <h5>Composition API</h5>
+        <p>The toast instance can be injected with the <i>useToast</i> function.</p>
+        <pre v-code.script><code>
 import { defineComponent } from "vue";
 import { useToast } from "primevue/usetoast";
 
@@ -64,116 +63,115 @@ export default defineComponent({
 
 </code></pre>
 
-            <h5>Message API</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>severity</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Severity of the message.</td>
-                        </tr>
-                        <tr>
-                            <td>summary</td>
-                            <td>element</td>
-                            <td>null</td>
-                            <td>Summary content of the message.</td>
-                        </tr>
-                        <tr>
-                            <td>detail</td>
-                            <td>element</td>
-                            <td>null</td>
-                            <td>Detail content of the message.</td>
-                        </tr>
-                        <tr>
-                            <td>closable</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether the message can be closed manually using the close icon.</td>
-                        </tr>
-                        <tr>
-                            <td>life</td>
-                            <td>number</td>
-                            <td>null</td>
-                            <td>Delay in milliseconds to close the message automatically. Messages with no life defined becomes sticky.</td>
-                        </tr>
-                        <tr>
-                            <td>group</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Key of the Toast to display the message.</td>
-                        </tr>
-                        <tr>
-                            <td>styleClass</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the message.</td>
-                        </tr>
-                        <tr>
-                            <td>contentStyleClass</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the content.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Message API</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>severity</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Severity of the message.</td>
+                    </tr>
+                    <tr>
+                        <td>summary</td>
+                        <td>element</td>
+                        <td>null</td>
+                        <td>Summary content of the message.</td>
+                    </tr>
+                    <tr>
+                        <td>detail</td>
+                        <td>element</td>
+                        <td>null</td>
+                        <td>Detail content of the message.</td>
+                    </tr>
+                    <tr>
+                        <td>closable</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Whether the message can be closed manually using the close icon.</td>
+                    </tr>
+                    <tr>
+                        <td>life</td>
+                        <td>number</td>
+                        <td>null</td>
+                        <td>Delay in milliseconds to close the message automatically. Messages with no life defined becomes sticky.</td>
+                    </tr>
+                    <tr>
+                        <td>group</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Key of the Toast to display the message.</td>
+                    </tr>
+                    <tr>
+                        <td>styleClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the message.</td>
+                    </tr>
+                    <tr>
+                        <td>contentStyleClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the content.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>MessageService API</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>add</td>
-                            <td>message: Message instance</td>
-                            <td>Displays the message in a suitable Toast component.</td>
-                        </tr>
-                        <tr>
-                            <td>removeGroup</td>
-                            <td>group: Name of the message group</td>
-                            <td>Clears the messages that belongs to the group.</td>
-                        </tr>
-                        <tr>
-                            <td>removeAllGroup</td>
-                            <td>-</td>
-                            <td>Clears all the messages.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>MessageService API</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>add</td>
+                        <td>message: Message instance</td>
+                        <td>Displays the message in a suitable Toast component.</td>
+                    </tr>
+                    <tr>
+                        <td>removeGroup</td>
+                        <td>group: Name of the message group</td>
+                        <td>Clears the messages that belongs to the group.</td>
+                    </tr>
+                    <tr>
+                        <td>removeAllGroup</td>
+                        <td>-</td>
+                        <td>Clears all the messages.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Severities</h5>
-            <p>There are four possible values for the severity of a message. Info is the default.</p>
+        <h5>Severities</h5>
+        <p>There are four possible values for the severity of a message. Info is the default.</p>
 
-            <ul>
-                <li>success</li>
-                <li>info</li>
-                <li>warn</li>
-                <li>error</li>
-            </ul>
+        <ul>
+            <li>success</li>
+            <li>info</li>
+            <li>warn</li>
+            <li>error</li>
+        </ul>
 
-            <h5>Position</h5>
-            <p>
-                There are four positions available for the toast container defined by the <i>position</i> property that defaults to "top-right". Other valid values are "top-left", "top-center", "bottom-left", "bottom-center", "bottom-right" and
-                "center".
-            </p>
-            <pre v-code><code>
+        <h5>Position</h5>
+        <p>
+            There are four positions available for the toast container defined by the <i>position</i> property that defaults to "top-right". Other valid values are "top-left", "top-center", "bottom-left", "bottom-center", "bottom-right" and "center".
+        </p>
+        <pre v-code><code>
 &lt;Toast /&gt;
 &lt;Toast position="top-left" /&gt;
 &lt;Toast position="top-center" /&gt;
@@ -185,27 +183,27 @@ export default defineComponent({
 
 </code></pre>
 
-            <h5>Groups</h5>
-            <p>A message can be targeted to a specific Toast component if their group properties match. Messages without a group are forwarded to the default Toast component that does not have a group defined.</p>
+        <h5>Groups</h5>
+        <p>A message can be targeted to a specific Toast component if their group properties match. Messages without a group are forwarded to the default Toast component that does not have a group defined.</p>
 
-            <pre v-code><code>
+        <pre v-code><code>
 &lt;Toast /&gt;
 &lt;Toast position="mykey" /&gt;
 
 </code></pre>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 this.$toast.add({severity:'success', summary: 'Default Message'});
 this.$toast.add({severity:'success', summary: 'Specific Message', group: 'mykey'});
 
 </code></pre>
 
-            <h5>Clearing Messages</h5>
-            <p><i>removeGroup(group)</i> clears the messages for a specific Toast whereas <i>removeAllGroups()</i> method clears all messages.</p>
+        <h5>Clearing Messages</h5>
+        <p><i>removeGroup(group)</i> clears the messages for a specific Toast whereas <i>removeAllGroups()</i> method clears all messages.</p>
 
-            <h5>Templating</h5>
-            <p>Templating allows customizing the content where the message instance is available as the implicit variable.</p>
-            <pre v-code><code><template v-pre>
+        <h5>Templating</h5>
+        <p>Templating allows customizing the content where the message instance is available as the implicit variable.</p>
+        <pre v-code><code><template v-pre>
 &lt;Toast position="bottom-center" group="bc"&gt;
     &lt;template #message="slotProps"&gt;
         &lt;div class="flex flex-column"&gt;
@@ -229,19 +227,19 @@ this.$toast.add({severity:'success', summary: 'Specific Message', group: 'mykey'
 </template>
 </code></pre>
 
-            <h5>Responsive</h5>
-            <p>
-                Toast styling can be adjusted per screen size with the <i>breakpoints</i> option. The value of <i>breakpoints</i> should be an object literal whose keys are the maximum screen sizes and values are the styles per screen. In example
-                below, width of the toast messages cover the whole page on screens whose widths is smaller than 921px.
-            </p>
-            <pre v-code><code>
+        <h5>Responsive</h5>
+        <p>
+            Toast styling can be adjusted per screen size with the <i>breakpoints</i> option. The value of <i>breakpoints</i> should be an object literal whose keys are the maximum screen sizes and values are the styles per screen. In example below,
+            width of the toast messages cover the whole page on screens whose widths is smaller than 921px.
+        </p>
+        <pre v-code><code>
 &lt;Toast :breakpoints="&#123;'920px': &#123;width: '100%', right: '0', left: '0'&#125;&#125;"&gt;&lt;/Toast&gt;
 
 </code></pre>
 
-            <h5>Constants</h5>
-            <p>ToastSeverity constants API is provided to easily choose a severity of the message with typescript.</p>
-            <pre v-code.script><code>
+        <h5>Constants</h5>
+        <p>ToastSeverity constants API is provided to easily choose a severity of the message with typescript.</p>
+        <pre v-code.script><code>
 import {ToastSeverity} from 'primevue/api';
 
 export default {
@@ -254,117 +252,187 @@ export default {
 
 </code></pre>
 
-            <h5>Properties</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>group</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Unique identifier of a message group.</td>
-                        </tr>
-                        <tr>
-                            <td>position</td>
-                            <td>string</td>
-                            <td>top-right</td>
-                            <td>Position of the toast in viewport.</td>
-                        </tr>
-                        <tr>
-                            <td>autoZIndex</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether to automatically manage layering.</td>
-                        </tr>
-                        <tr>
-                            <td>baseZIndex</td>
-                            <td>number</td>
-                            <td>0</td>
-                            <td>Base zIndex value to use in layering.</td>
-                        </tr>
-                        <tr>
-                            <td>breakpoints</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Object literal to define styles per screen size.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>group</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Unique identifier of a message group.</td>
+                    </tr>
+                    <tr>
+                        <td>position</td>
+                        <td>string</td>
+                        <td>top-right</td>
+                        <td>Position of the toast in viewport.</td>
+                    </tr>
+                    <tr>
+                        <td>autoZIndex</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Whether to automatically manage layering.</td>
+                    </tr>
+                    <tr>
+                        <td>baseZIndex</td>
+                        <td>number</td>
+                        <td>0</td>
+                        <td>Base zIndex value to use in layering.</td>
+                    </tr>
+                    <tr>
+                        <td>breakpoints</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Object literal to define styles per screen size.</td>
+                    </tr>
+                    <tr>
+                        <td>closeIcon</td>
+                        <td>string</td>
+                        <td>pi pi-times</td>
+                        <td>Icon to display in the toast close button.</td>
+                    </tr>
+                    <tr>
+                        <td>infoIcon</td>
+                        <td>string</td>
+                        <td>pi pi-info-circle</td>
+                        <td>Icon to display in the toast with info severity.</td>
+                    </tr>
+                    <tr>
+                        <td>warnIcon</td>
+                        <td>string</td>
+                        <td>pi pi-exclamation-triangle</td>
+                        <td>Icon to display in the toast with warn severity.</td>
+                    </tr>
+                    <tr>
+                        <td>errorIcon</td>
+                        <td>string</td>
+                        <td>pi pi-times</td>
+                        <td>Icon to display in the toast with error severity.</td>
+                    </tr>
+                    <tr>
+                        <td>successIcon</td>
+                        <td>string</td>
+                        <td>pi pi-check</td>
+                        <td>Icon to display in the toast with success severity.</td>
+                    </tr>
+                    <tr>
+                        <td>closeButtonProps</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Uses to pass all properties of the HTMLButtonElement to the close button.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Slots</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>message</td>
-                            <td>-</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Slots</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>message</td>
+                        <td>-</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-toast</td>
-                            <td>Main container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-toast-message</td>
-                            <td>Container of a message item.</td>
-                        </tr>
-                        <tr>
-                            <td>p-toast-icon-close</td>
-                            <td>Close icon of a message.</td>
-                        </tr>
-                        <tr>
-                            <td>p-toast-icon</td>
-                            <td>Severity icon.</td>
-                        </tr>
-                        <tr>
-                            <td>p-toast-message-content</td>
-                            <td>Container of message texts.</td>
-                        </tr>
-                        <tr>
-                            <td>p-toast-summary</td>
-                            <td>Summary of the message.</td>
-                        </tr>
-                        <tr>
-                            <td>p-toast-detail</td>
-                            <td>Detail of the message.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-toast</td>
+                        <td>Main container element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-toast-message</td>
+                        <td>Container of a message item.</td>
+                    </tr>
+                    <tr>
+                        <td>p-toast-icon-close</td>
+                        <td>Close icon of a message.</td>
+                    </tr>
+                    <tr>
+                        <td>p-toast-icon</td>
+                        <td>Severity icon.</td>
+                    </tr>
+                    <tr>
+                        <td>p-toast-message-content</td>
+                        <td>Container of message texts.</td>
+                    </tr>
+                    <tr>
+                        <td>p-toast-summary</td>
+                        <td>Summary of the message.</td>
+                    </tr>
+                    <tr>
+                        <td>p-toast-detail</td>
+                        <td>Detail of the message.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc>
-    </ClientOnly>
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>Toast component use <i>alert</i> role that implicitly defines <i>aria-live</i> as "assertive" and <i>aria-atomic</i> as "true".</p>
+
+        <p>
+            Close element is a <i>button</i> with an <i>aria-label</i> that refers to the <i>aria.close</i> property of the <router-link to="/locale">locale</router-link> API by default, you may use <i>closeButtonProps</i> to customize the element
+            and override the default <i>aria-label</i>.
+        </p>
+
+        <h6>Close Button Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>Closes the message.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>Closes the message.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
@@ -556,7 +624,7 @@ import { useToast } from "primevue/usetoast";
 export default defineComponent({
     setup() {
         const toast = useToast();
-       
+
         const showSuccess = () => {
             toast.add({severity:'success', summary: 'Success Message', detail:'Message Content', life: 3000});
         }
@@ -599,7 +667,7 @@ export default defineComponent({
             toast.removeAllGroups();
         }
 
-        return { showSuccess, showInfo, showWarn, showError, showTopLeft, showBottomLeft, 
+        return { showSuccess, showInfo, showWarn, showError, showTopLeft, showBottomLeft,
             showBottomRight, showSticky, showMultiple, showTemplate, onConfirm, onReject, clear };
     }
 });
@@ -680,7 +748,7 @@ button {
         const App = {
             setup() {
                 const toast = useToast();
-            
+
                 const showSuccess = () => {
                     toast.add({severity:'success', summary: 'Success Message', detail:'Message Content', life: 3000});
                 }
@@ -723,7 +791,7 @@ button {
                     toast.removeAllGroups();
                 }
 
-                return { showSuccess, showInfo, showWarn, showError, showTopLeft, showBottomLeft, 
+                return { showSuccess, showInfo, showWarn, showError, showTopLeft, showBottomLeft,
                     showBottomRight, showSticky, showMultiple, showTemplate, onConfirm, onReject, clear };
             },
             components: {
diff --git a/pages/togglebutton/ToggleButtonDoc.vue b/pages/togglebutton/ToggleButtonDoc.vue
index 87f014275..1d4fc3941 100755
--- a/pages/togglebutton/ToggleButtonDoc.vue
+++ b/pages/togglebutton/ToggleButtonDoc.vue
@@ -1,28 +1,27 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="ToggleButtonDemo" :sources="sources" github="togglebutton/ToggleButtonDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="ToggleButtonDemo" :sources="sources" github="togglebutton/ToggleButtonDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import ToggleButton from 'primevue/togglebutton';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/togglebutton/togglebutton.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p>Two-way binding to a boolean property is defined using the standard v-model directive.</p>
-            <pre v-code><code>
+        <h5>Getting Started</h5>
+        <p>Two-way binding to a boolean property is defined using the standard v-model directive.</p>
+        <pre v-code><code>
 &lt;ToggleButton v-model="checked" /&gt;
 
 </code></pre>
 
-            <p>As model is two-way binding enabled, setting the bound value as true displays the state as checked.</p>
-            <pre v-code.script><code>
+        <p>As model is two-way binding enabled, setting the bound value as true displays the state as checked.</p>
+        <pre v-code.script><code>
 export default {
 	data() {
 		return {
@@ -33,168 +32,180 @@ export default {
 
 </code></pre>
 
-            <h5>Labels and Icons</h5>
-            <p>Icons and Labels can be customized using <i>onLabel</i>, <i>offLabel</i>, <i>onIcon</i> and <i>offIcon</i> properties.</p>
-            <pre v-code><code>
+        <h5>Labels and Icons</h5>
+        <p>Icons and Labels can be customized using <i>onLabel</i>, <i>offLabel</i>, <i>onIcon</i> and <i>offIcon</i> properties.</p>
+        <pre v-code><code>
 &lt;ToggleButton v-model="checked" onLabel="I confirm" offLabel="I reject" onIcon="pi pi-check" offIcon="pi pi-times" /&gt;
 
 </code></pre>
 
-            <h5>Properties</h5>
-            <p>Any valid attribute is passed to the root element implicitly, extended properties are as follows;</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>modelValue</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Value of the component.</td>
-                        </tr>
-                        <tr>
-                            <td>onIcon</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Icon for the on state.</td>
-                        </tr>
-                        <tr>
-                            <td>offIcon</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Icon for the off state.</td>
-                        </tr>
-                        <tr>
-                            <td>onLabel</td>
-                            <td>string</td>
-                            <td>yes</td>
-                            <td>Label for the on state.</td>
-                        </tr>
-                        <tr>
-                            <td>offLabel</td>
-                            <td>string</td>
-                            <td>no</td>
-                            <td>Label for the off state.</td>
-                        </tr>
-                        <tr>
-                            <td>iconPos</td>
-                            <td>string</td>
-                            <td>left</td>
-                            <td>Position of the icon, valid values are "left" and "right".</td>
-                        </tr>
-                        <tr>
-                            <td>disabled</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When present, it specifies that the component should be disabled.</td>
-                        </tr>
-                        <tr>
-                            <td>tabindex</td>
-                            <td>number</td>
-                            <td>null</td>
-                            <td>Index of the element in tabbing order.</td>
-                        </tr>
-                        <tr>
-                            <td>inputId</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the component input field.</td>
-                        </tr>
-                        <tr>
-                            <td>inputClass</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the input field.</td>
-                        </tr>
-                        <tr>
-                            <td>inputStyle</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Inline style of the input field.</td>
-                        </tr>
-                        <tr>
-                            <td>inputProps</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <p>Any valid attribute is passed to the root element implicitly, extended properties are as follows;</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>modelValue</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Value of the component.</td>
+                    </tr>
+                    <tr>
+                        <td>onIcon</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Icon for the on state.</td>
+                    </tr>
+                    <tr>
+                        <td>offIcon</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Icon for the off state.</td>
+                    </tr>
+                    <tr>
+                        <td>onLabel</td>
+                        <td>string</td>
+                        <td>yes</td>
+                        <td>Label for the on state.</td>
+                    </tr>
+                    <tr>
+                        <td>offLabel</td>
+                        <td>string</td>
+                        <td>no</td>
+                        <td>Label for the off state.</td>
+                    </tr>
+                    <tr>
+                        <td>iconPos</td>
+                        <td>string</td>
+                        <td>left</td>
+                        <td>Position of the icon, valid values are "left" and "right".</td>
+                    </tr>
+                    <tr>
+                        <td>disabled</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When present, it specifies that the component should be disabled.</td>
+                    </tr>
+                    <tr>
+                        <td>tabindex</td>
+                        <td>number</td>
+                        <td>null</td>
+                        <td>Index of the element in tabbing order.</td>
+                    </tr>
+                    <tr>
+                        <td>inputId</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the component input field.</td>
+                    </tr>
+                    <tr>
+                        <td>inputClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the input field.</td>
+                    </tr>
+                    <tr>
+                        <td>inputStyle</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Inline style of the input field.</td>
+                    </tr>
+                    <tr>
+                        <td>inputProps</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.</td>
+                    </tr>
+                    <tr>
+                        <td>aria-label</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Defines a string value that labels an interactive element.</td>
+                    </tr>
+                    <tr>
+                        <td>aria-labelledby</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Events</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>change</td>
-                            <td>event: Browser event</td>
-                            <td>Callback to invoke on value change.</td>
-                        </tr>
-                        <tr>
-                            <td>focus</td>
-                            <td>event: Browser event</td>
-                            <td>Callback to invoke when the component receives focus.</td>
-                        </tr>
-                        <tr>
-                            <td>blur</td>
-                            <td>event: Browser event</td>
-                            <td>Callback to invoke when the component loses focus.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Events</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>change</td>
+                        <td>event: Browser event</td>
+                        <td>Callback to invoke on value change.</td>
+                    </tr>
+                    <tr>
+                        <td>focus</td>
+                        <td>event: Browser event</td>
+                        <td>Callback to invoke when the component receives focus.</td>
+                    </tr>
+                    <tr>
+                        <td>blur</td>
+                        <td>event: Browser event</td>
+                        <td>Callback to invoke when the component loses focus.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-togglebutton</td>
-                            <td>Container element</td>
-                        </tr>
-                        <tr>
-                            <td>p-button-icon</td>
-                            <td>Icon element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-button-text</td>
-                            <td>Label element.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-togglebutton</td>
+                        <td>Container element</td>
+                    </tr>
+                    <tr>
+                        <td>p-button-icon</td>
+                        <td>Icon element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-button-text</td>
+                        <td>Label element.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Accessibility</h5>
-            <h6>Screen Reader</h6>
-            <p>
-                ToggleButton component uses an element with <i>button</i> role and updates <i>aria-pressed</i> state for screen readers. Value to describe the component can be defined with <i>aria-labelledby</i> or <i>aria-label</i> props, it is
-                highly suggested to use either of these props as the component changes the label displayed which will result in screen readers to read different labels when the component receives focus. To prevent this, always provide an aria label
-                that does not change related to state.
-            </p>
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>
+            ToggleButton component uses a hidden native checkbox element as the switch element internally that is only visible to screen readers. Value to describe the component can be defined with <i>aria-labelledby</i> or <i>aria-label</i> props,
+            it is highly suggested to use either of these props as the component changes the label displayed which will result in screen readers to read different labels when the component receives focus. To prevent this, always provide an aria label
+            that does not change related to state.
+        </p>
 
-            <pre v-code><code>
+        <pre v-code><code>
 &lt;span id="rememberme"&gt;Remember Me&lt;/span&gt;
 &lt;ToggleButton aria-labelledby="rememberme" /&gt;
 
@@ -202,33 +213,32 @@ export default {
 
 </code></pre>
 
-            <h6>Keyboard Support</h6>
-            <p>Keyboard interaction is derived from the native browser handling of checkboxs in a group.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Key</th>
-                            <th>Function</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td><i>tab</i></td>
-                            <td>Moves focus to the button.</td>
-                        </tr>
-                        <tr>
-                            <td><i>space</i></td>
-                            <td>Toggles the checked state.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h6>Keyboard Support</h6>
+        <p>Keyboard interaction is derived from the native browser handling of checkboxs in a group.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>tab</i></td>
+                        <td>Moves focus to the button.</td>
+                    </tr>
+                    <tr>
+                        <td><i>space</i></td>
+                        <td>Toggles the checked state.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc>
-    </ClientOnly>
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
diff --git a/pages/toolbar/ToolbarDoc.vue b/pages/toolbar/ToolbarDoc.vue
index 90c94e91f..ffa1c359d 100755
--- a/pages/toolbar/ToolbarDoc.vue
+++ b/pages/toolbar/ToolbarDoc.vue
@@ -1,22 +1,21 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="ToolbarDemo" :sources="sources" github="toolbar/ToolbarDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="ToolbarDemo" :sources="sources" github="toolbar/ToolbarDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import Toolbar from 'primevue/toolbar';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/toolbar/toolbar.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p>Toolbar provides <i>start</i> and <i>end</i> templates to place content at these sections.</p>
-            <pre v-code><code>
+        <h5>Getting Started</h5>
+        <p>Toolbar provides <i>start</i>, <i>center</i> and <i>end</i> templates to place content at these sections.</p>
+        <pre v-code><code>
 &lt;Toolbar&gt;
     &lt;template #start&gt;
         &lt;Button label="New" icon="pi pi-plus" class="mr-2" /&gt;
@@ -34,71 +33,72 @@ import Toolbar from 'primevue/toolbar';
 
 </code></pre>
 
-            <h5>Slots</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>start</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>end</td>
-                            <td>-</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Slots</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>start</td>
+                        <td>-</td>
+                    </tr>
+                    <tr>
+                        <td>end</td>
+                        <td>-</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-toolbar</td>
-                            <td>Main container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-toolbar-group-left</td>
-                            <td>Left content container.</td>
-                        </tr>
-                        <tr>
-                            <td>p-toolbar-group-right</td>
-                            <td>Right content container.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-toolbar</td>
+                        <td>Main container element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-toolbar-group-start</td>
+                        <td>Start content container.</td>
+                    </tr>
+                    <tr>
+                        <td>p-toolbar-group-center</td>
+                        <td>Center content container.</td>
+                    </tr>
+                    <tr>
+                        <td>p-toolbar-group-end</td>
+                        <td>End content container.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Accessibility</h5>
-            <DevelopmentSection>
-                <h6>Screen Reader</h6>
-                <p>
-                    Toolbar uses <i>toolbar</i> role to the root element, <i>aria-orientation</i> is not included as it defaults to "horizontal". Any valid attribute is passed to the root element so you may add additional properties like
-                    <i>aria-labelledby</i> to define the element if required.
-                </p>
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>
+            Toolbar uses <i>toolbar</i> role to the root element, <i>aria-orientation</i> is not included as it defaults to "horizontal". Any valid attribute is passed to the root element so you may add additional properties like
+            <i>aria-labelledby</i> to define the element if required.
+        </p>
 
-                <h5>Keyboard Support</h5>
-                <p>Component does not include any interactive elements. Arbitrary content can be placed with templating and elements like buttons inside should follow the page tab sequence.</p>
-            </DevelopmentSection>
+        <h5>Keyboard Support</h5>
+        <p>Component does not include any interactive elements. Arbitrary content can be placed with templating and elements like buttons inside should follow the page tab sequence.</p>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc>
-    </ClientOnly>
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
diff --git a/pages/tooltip/TooltipDoc.vue b/pages/tooltip/TooltipDoc.vue
index 3a705a5ca..ebae22a98 100755
--- a/pages/tooltip/TooltipDoc.vue
+++ b/pages/tooltip/TooltipDoc.vue
@@ -1,44 +1,43 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="TooltipDemo" :sources="sources" github="tooltip/TooltipDemo.vue">
-            <h5>Getting Started</h5>
-            <p>Tooltip is a directive that needs to be imported and configured with a name of your choice. Global configuration is done with the <i>app.directive</i> function.</p>
-            <pre v-code.script><code>
+    <AppDoc name="TooltipDemo" :sources="sources" github="tooltip/TooltipDemo.vue">
+        <h5>Getting Started</h5>
+        <p>Tooltip is a directive that needs to be imported and configured with a name of your choice. Global configuration is done with the <i>app.directive</i> function.</p>
+        <pre v-code.script><code>
 import Tooltip from 'primevue/tooltip';
 
 app.directive('tooltip', Tooltip);
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <p>Tooltip can also be configured locally using the directives property of your component.</p>
-            <pre v-code.script><code>
+        <p>Tooltip can also be configured locally using the directives property of your component.</p>
+        <pre v-code.script><code>
 directives: {
     'tooltip': Tooltip
 }
 
 </code></pre>
 
-            <p>Once the tooltip is configured, it can be attached to a target using the v- prefix.</p>
-            <pre v-code><code><template v-pre>
+        <p>Once the tooltip is configured, it can be attached to a target using the v- prefix.</p>
+        <pre v-code><code><template v-pre>
 &lt;InputText type="text" v-tooltip="'Enter your username'" /&gt;
 </template>
 </code></pre>
 
-            <p>Also, more than one value can be used.</p>
-            <pre v-code><code><template v-pre>
+        <p>Also, more than one value can be used.</p>
+        <pre v-code><code><template v-pre>
 &lt;InputText type="text" v-tooltip="{ value: 'Enter your username', disabled: true }" /&gt;
 </template>
 </code></pre>
 
-            <h5>Positions</h5>
-            <p>There are four choices to position the tooltip, default value is "right" and alternatives are "top", "bottom", "left". Position is specified using a modifier.</p>
-            <pre v-code><code><template v-pre>
+        <h5>Positions</h5>
+        <p>There are four choices to position the tooltip, default value is "right" and alternatives are "top", "bottom", "left". Position is specified using a modifier.</p>
+        <pre v-code><code><template v-pre>
 &lt;InputText type="text" v-tooltip.right="'Enter your username'" /&gt;
 &lt;InputText type="text" v-tooltip.top="'Enter your username'" /&gt;
 &lt;InputText type="text" v-tooltip.bottom="'Enter your username'" /&gt;
@@ -46,97 +45,126 @@ directives: {
 </template>
 </code></pre>
 
-            <h5>Events</h5>
-            <p>Tooltip gets displayed on hover event of its target by default, other option is the focus event to display and blur to hide.</p>
-            <pre v-code><code><template v-pre>
+        <h5>Events</h5>
+        <p>Tooltip gets displayed on hover event of its target by default, other option is the focus event to display and blur to hide.</p>
+        <pre v-code><code><template v-pre>
 &lt;InputText type="text" v-tooltip.focus="'Enter your username'" /&gt;
 </template>
 </code></pre>
 
-            <h5>Modifiers</h5>
-            <p>As seen in positions and event sections, tooltip is configured via modifiers that can be chained. Tooltip below, gets displayed at the top of the input at focus event.</p>
-            <pre v-code><code><template v-pre>
+        <h5>Modifiers</h5>
+        <p>As seen in positions and event sections, tooltip is configured via modifiers that can be chained. Tooltip below, gets displayed at the top of the input at focus event.</p>
+        <pre v-code><code><template v-pre>
 &lt;InputText type="text" v-tooltip.top.focus="'Enter your username'" /&gt;
 </template>
 </code></pre>
 
-            <h5>Properties</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>value</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Text of the tooltip</td>
-                        </tr>
-                        <tr>
-                            <td>disabled</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When present, it specifies that the component should be disabled.</td>
-                        </tr>
-                        <tr>
-                            <td>class</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>When present, it adds a custom class to the tooltip.</td>
-                        </tr>
-                        <tr>
-                            <td>escape</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>By default the tooltip contents are not rendered as text. Set to true to support html tags in the content.</td>
-                        </tr>
-                        <tr>
-                            <td>fitContent</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Automatically adjusts the element position when there is not enough space on the selected position.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>value</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Text of the tooltip</td>
+                    </tr>
+                    <tr>
+                        <td>disabled</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When present, it specifies that the component should be disabled.</td>
+                    </tr>
+                    <tr>
+                        <td>id</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>When present, it adds a custom id to the tooltip.</td>
+                    </tr>
+                    <tr>
+                        <td>class</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>When present, it adds a custom class to the tooltip.</td>
+                    </tr>
+                    <tr>
+                        <td>escape</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>By default the tooltip contents are not rendered as text. Set to true to support html tags in the content.</td>
+                    </tr>
+                    <tr>
+                        <td>fitContent</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Automatically adjusts the element position when there is not enough space on the selected position.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-tooltip</td>
-                            <td>Input element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-tooltip-arrow</td>
-                            <td>Arrow of the tooltip.</td>
-                        </tr>
-                        <tr>
-                            <td>p-tooltip-text</td>
-                            <td>Text of the tooltip</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-tooltip</td>
+                        <td>Input element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-tooltip-arrow</td>
+                        <td>Arrow of the tooltip.</td>
+                    </tr>
+                    <tr>
+                        <td>p-tooltip-text</td>
+                        <td>Text of the tooltip</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc>
-    </ClientOnly>
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>Tooltip component uses <i>tooltip</i> role and when it becomes visible the generated id of the tooltip is defined as the <i>aria-describedby</i> of the target.</p>
+
+        <h6>Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>escape</i>
+                        </td>
+                        <td>Closes the tooltip when focus is on the target.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
diff --git a/pages/tooltip/index.vue b/pages/tooltip/index.vue
index 809d8d336..03d426ed6 100755
--- a/pages/tooltip/index.vue
+++ b/pages/tooltip/index.vue
@@ -13,27 +13,27 @@
                 <h5>Positions</h5>
                 <div class="grid p-fluid">
                     <div class="col-12 md:col-3">
-                        <InputText type="text" placeholder="Right" v-tooltip.right="'Enter your username'" />
+                        <InputText v-tooltip.right="'Enter your username'" type="text" placeholder="Right" />
                     </div>
                     <div class="col-12 md:col-3">
-                        <InputText type="text" placeholder="Top" v-tooltip.top="'Enter your username'" />
+                        <InputText v-tooltip.top="'Enter your username'" type="text" placeholder="Top" />
                     </div>
                     <div class="col-12 md:col-3">
-                        <InputText type="text" placeholder="Bottom" v-tooltip.bottom="'Enter your username'" />
+                        <InputText v-tooltip.bottom="'Enter your username'" type="text" placeholder="Bottom" />
                     </div>
                     <div class="col-12 md:col-3">
-                        <InputText type="text" placeholder="Left" v-tooltip.left="'Enter your username'" />
+                        <InputText v-tooltip.left="'Enter your username'" type="text" placeholder="Left" />
                     </div>
                 </div>
 
                 <h5>Focus and Blur</h5>
-                <InputText type="text" placeholder="Focus" v-tooltip.bottom.focus="'Enter your username'" />
+                <InputText v-tooltip.bottom.focus="'Enter your username'" type="text" placeholder="Focus" />
 
                 <h5>Button</h5>
-                <Button type="button" label="Save" icon="pi pi-check" v-tooltip="'Click to proceed'" />
+                <Button v-tooltip="'Click to proceed'" type="button" label="Save" icon="pi pi-check" />
 
                 <h5>Custom Class</h5>
-                <InputText type="text" placeholder="Custom Class" v-tooltip.right="{ value: 'Invalid username', class: 'custom-error' }" />
+                <InputText v-tooltip.right="{ value: 'Invalid username', class: 'custom-error' }" type="text" placeholder="Custom Class" />
             </div>
         </div>
 
diff --git a/pages/tree/Filter.vue b/pages/tree/Filter.vue
index 9db2454fa..c0a724c07 100755
--- a/pages/tree/Filter.vue
+++ b/pages/tree/Filter.vue
@@ -18,9 +18,7 @@
             </div>
         </div>
 
-        <ClientOnly>
-            <AppDoc name="TreeFilterDemo" :sources="sources" :service="['NodeService']" :data="['treenodes']" github="tree/TreeFilterDemo.vue" />
-        </ClientOnly>
+        <AppDoc name="TreeFilterDemo" :sources="sources" :service="['NodeService']" :data="['treenodes']" github="tree/TreeFilterDemo.vue" />
     </div>
 </template>
 
@@ -216,6 +214,7 @@ export default {
         },
         expandNode(node) {
             this.expandedKeys[node.key] = true;
+
             if (node.children && node.children.length) {
                 for (let child of node.children) {
                     this.expandNode(child);
diff --git a/pages/tree/Lazy.vue b/pages/tree/Lazy.vue
index 8e5090105..3a9069434 100755
--- a/pages/tree/Lazy.vue
+++ b/pages/tree/Lazy.vue
@@ -14,9 +14,7 @@
             </div>
         </div>
 
-        <ClientOnly>
-            <AppDoc name="TreeLazyDemo" :sources="sources" :service="['NodeService']" :data="['treenodes']" github="tree/TreeLazyDemo.vue" />
-        </ClientOnly>
+        <AppDoc name="TreeLazyDemo" :sources="sources" :service="['NodeService']" :data="['treenodes']" github="tree/TreeLazyDemo.vue" />
     </div>
 </template>
 
@@ -282,6 +280,7 @@ export default {
 
                 setTimeout(() => {
                     let _node = { ...node };
+
                     _node.children = [];
 
                     for (let i = 0; i < 3; i++) {
@@ -292,6 +291,7 @@ export default {
                     }
 
                     let _nodes = { ...this.nodes };
+
                     _nodes[parseInt(node.key, 10)] = _node;
 
                     this.nodes = _nodes;
diff --git a/pages/tree/Scroll.vue b/pages/tree/Scroll.vue
index 310c4892d..45d617849 100644
--- a/pages/tree/Scroll.vue
+++ b/pages/tree/Scroll.vue
@@ -21,7 +21,7 @@
                 </p>
                 <Button type="button" icon="pi pi-external-link" label="View" @click="dialogVisible = true"></Button>
 
-                <Dialog header="Flex Scroll" v-model:visible="dialogVisible" :style="{ width: '50vw' }" maximizable :contentStyle="{ height: '300px' }" class="p-fluid">
+                <Dialog v-model:visible="dialogVisible" header="Flex Scroll" :style="{ width: '50vw' }" maximizable :contentStyle="{ height: '300px' }" class="p-fluid">
                     <Tree :value="nodes2" scrollHeight="flex"></Tree>
                     <template #footer>
                         <Button type="button" icon="pi pi-check" @click="dialogVisible = false" class="p-button-text"></Button>
@@ -30,9 +30,7 @@
             </div>
         </div>
 
-        <ClientOnly>
-            <AppDoc name="TreeScrollDemo" :sources="sources" :service="['NodeService']" :data="['treenodes']" github="tree/TreeScrollDemo.vue" />
-        </ClientOnly>
+        <AppDoc name="TreeScrollDemo" :sources="sources" :service="['NodeService']" :data="['treenodes']" github="tree/TreeScrollDemo.vue" />
     </div>
 </template>
 
diff --git a/pages/tree/Selection.vue b/pages/tree/Selection.vue
index 143a7d797..00f26df16 100755
--- a/pages/tree/Selection.vue
+++ b/pages/tree/Selection.vue
@@ -11,25 +11,23 @@
         <div class="content-section implementation">
             <div class="card">
                 <h5>Single Selection</h5>
-                <Tree :value="nodes" selectionMode="single" v-model:selectionKeys="selectedKey1"></Tree>
+                <Tree v-model:selectionKeys="selectedKey1" :value="nodes" selectionMode="single"></Tree>
 
                 <h5>Multiple Selection with MetaKey</h5>
-                <Tree :value="nodes" selectionMode="multiple" v-model:selectionKeys="selectedKeys1"></Tree>
+                <Tree v-model:selectionKeys="selectedKeys1" :value="nodes" selectionMode="multiple"></Tree>
 
                 <h5>Multiple Selection without MetaKey</h5>
-                <Tree :value="nodes" selectionMode="multiple" v-model:selectionKeys="selectedKeys2" :metaKeySelection="false"></Tree>
+                <Tree v-model:selectionKeys="selectedKeys2" :value="nodes" selectionMode="multiple" :metaKeySelection="false"></Tree>
 
                 <h5>Checkbox Selection</h5>
-                <Tree :value="nodes" selectionMode="checkbox" v-model:selectionKeys="selectedKeys3"></Tree>
+                <Tree v-model:selectionKeys="selectedKeys3" :value="nodes" selectionMode="checkbox"></Tree>
 
                 <h5>Events</h5>
-                <Tree :value="nodes" selectionMode="single" v-model:selectionKeys="selectedKey2" :metaKeySelection="false" @node-select="onNodeSelect" @node-unselect="onNodeUnselect"></Tree>
+                <Tree v-model:selectionKeys="selectedKey2" :value="nodes" selectionMode="single" :metaKeySelection="false" @node-select="onNodeSelect" @node-unselect="onNodeUnselect"></Tree>
             </div>
         </div>
 
-        <ClientOnly>
-            <AppDoc name="TreeSelectionDemo" :sources="sources" :service="['NodeService']" :data="['treenodes']" github="tree/TreeSelectionDemo.vue" />
-        </ClientOnly>
+        <AppDoc name="TreeSelectionDemo" :sources="sources" :service="['NodeService']" :data="['treenodes']" github="tree/TreeSelectionDemo.vue" />
     </div>
 </template>
 
diff --git a/pages/tree/Templating.vue b/pages/tree/Templating.vue
index 5f14f86b7..be610f5e7 100755
--- a/pages/tree/Templating.vue
+++ b/pages/tree/Templating.vue
@@ -21,9 +21,7 @@
             </div>
         </div>
 
-        <ClientOnly>
-            <AppDoc name="TreeTemplatingDemo" :sources="sources" :service="['NodeService']" :data="['treenodes']" github="tree/TreeTemplatingDemo.vue" />
-        </ClientOnly>
+        <AppDoc name="TreeTemplatingDemo" :sources="sources" :service="['NodeService']" :data="['treenodes']" github="tree/TreeTemplatingDemo.vue" />
     </div>
 </template>
 
diff --git a/pages/tree/TreeDoc.vue b/pages/tree/TreeDoc.vue
index 533977f0c..4609bed32 100755
--- a/pages/tree/TreeDoc.vue
+++ b/pages/tree/TreeDoc.vue
@@ -1,116 +1,115 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="TreeDemo" :sources="sources" :service="['NodeService']" :data="['treenodes']" github="tree/TreeDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="TreeDemo" :sources="sources" :service="['NodeService']" :data="['treenodes']" github="tree/TreeDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import Tree from 'primevue/tree';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p>Tree component requires an array of TreeNode objects as its <i>value</i>.</p>
+        <h5>Getting Started</h5>
+        <p>Tree component requires an array of TreeNode objects as its <i>value</i>.</p>
 
-            <h5>TreeNode API utilized by the Tree</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>key</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Mandatory unique key of the node.</td>
-                        </tr>
-                        <tr>
-                            <td>label</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Label of the node.</td>
-                        </tr>
-                        <tr>
-                            <td>data</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Data represented by the node.</td>
-                        </tr>
-                        <tr>
-                            <td>type</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Type of the node to match a template.</td>
-                        </tr>
-                        <tr>
-                            <td>icon</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Icon of the node to display next to content.</td>
-                        </tr>
-                        <tr>
-                            <td>expandedIcon</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Icon to use in expanded state.</td>
-                        </tr>
-                        <tr>
-                            <td>collapsedIcon</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Icon to use in collapsed state.</td>
-                        </tr>
-                        <tr>
-                            <td>children</td>
-                            <td>TreeNode[]</td>
-                            <td>null</td>
-                            <td>An array of treenodes as children.</td>
-                        </tr>
-                        <tr>
-                            <td>style</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Inline style of the node.</td>
-                        </tr>
-                        <tr>
-                            <td>styleClass</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the node.</td>
-                        </tr>
-                        <tr>
-                            <td>selectable</td>
-                            <td>boolean</td>
-                            <td>null</td>
-                            <td>Whether the node is selectable when selection mode is enabled.</td>
-                        </tr>
-                        <tr>
-                            <td>leaf</td>
-                            <td>boolean</td>
-                            <td>null</td>
-                            <td>Specifies if the node has children. Used in lazy loading.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>TreeNode API utilized by the Tree</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>key</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Mandatory unique key of the node.</td>
+                    </tr>
+                    <tr>
+                        <td>label</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Label of the node.</td>
+                    </tr>
+                    <tr>
+                        <td>data</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Data represented by the node.</td>
+                    </tr>
+                    <tr>
+                        <td>type</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Type of the node to match a template.</td>
+                    </tr>
+                    <tr>
+                        <td>icon</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Icon of the node to display next to content.</td>
+                    </tr>
+                    <tr>
+                        <td>expandedIcon</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Icon to use in expanded state.</td>
+                    </tr>
+                    <tr>
+                        <td>collapsedIcon</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Icon to use in collapsed state.</td>
+                    </tr>
+                    <tr>
+                        <td>children</td>
+                        <td>TreeNode[]</td>
+                        <td>null</td>
+                        <td>An array of treenodes as children.</td>
+                    </tr>
+                    <tr>
+                        <td>style</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Inline style of the node.</td>
+                    </tr>
+                    <tr>
+                        <td>styleClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the node.</td>
+                    </tr>
+                    <tr>
+                        <td>selectable</td>
+                        <td>boolean</td>
+                        <td>null</td>
+                        <td>Whether the node is selectable when selection mode is enabled.</td>
+                    </tr>
+                    <tr>
+                        <td>leaf</td>
+                        <td>boolean</td>
+                        <td>null</td>
+                        <td>Specifies if the node has children. Used in lazy loading.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <p>Example below loads the tree nodes from a remote datasource via a service called NodeService.</p>
-            <pre v-code><code><template v-pre>
+        <p>Example below loads the tree nodes from a remote datasource via a service called NodeService.</p>
+        <pre v-code><code><template v-pre>
 &lt;Tree :value="nodes"&gt;&lt;/Tree&gt;
 </template>
 </code></pre>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 import NodeService from '../../service/NodeService';
 
 export default {
@@ -130,7 +129,7 @@ export default {
 
 </code></pre>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 export default class NodeService {
 
     getTreeNodes() {
@@ -142,8 +141,8 @@ export default class NodeService {
 
 </code></pre>
 
-            <p>The json response sample would be as following.</p>
-            <pre v-code.script><code>
+        <p>The json response sample would be as following.</p>
+        <pre v-code.script><code>
 {
     "root": [
         {
@@ -201,14 +200,14 @@ export default class NodeService {
 
 </code></pre>
 
-            <h5>Programmatic Control</h5>
-            <p>
-                Tree state can be controlled programmatically with the <i>expandedKeys</i> property that defines the keys that are expanded. This property is a Map instance whose key is the key of a node and value is a boolean. Note that
-                <i>expandedKeys</i> also supports two-way binding with the v-model directive.
-            </p>
+        <h5>Programmatic Control</h5>
+        <p>
+            Tree state can be controlled programmatically with the <i>expandedKeys</i> property that defines the keys that are expanded. This property is a Map instance whose key is the key of a node and value is a boolean. Note that
+            <i>expandedKeys</i> also supports two-way binding with the v-model directive.
+        </p>
 
-            <p>Example below expands and collapses all nodes with buttons.</p>
-            <pre v-code><code><template v-pre>
+        <p>Example below expands and collapses all nodes with buttons.</p>
+        <pre v-code><code><template v-pre>
 &lt;div&gt;
     &lt;Button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll" /&gt;
     &lt;Button type="button" icon="pi pi-minus" label="Collapse All" @click="collapseAll" /&gt;
@@ -217,7 +216,7 @@ export default class NodeService {
 </template>
 </code></pre>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 import NodeService from '../../service/NodeService';
 
 export default {
@@ -258,8 +257,8 @@ export default {
 
 </code></pre>
 
-            <p>To display some nodes as expanded by default, simply add their keys to the map.</p>
-            <pre v-code.script><code>
+        <p>To display some nodes as expanded by default, simply add their keys to the map.</p>
+        <pre v-code.script><code>
 import NodeService from '../../service/NodeService';
 
 export default {
@@ -284,18 +283,18 @@ export default {
 
 </code></pre>
 
-            <h5>Selection</h5>
-            <p>
-                Tree supports <b>single</b>, <b>multiple</b> and <b>checkbox</b> selection modes. Define the <i>selectionKeys</i> with the v-model directive and the <i>selectionMode</i> properties to enable the selection. By default in multiple
-                selection mode, metaKey is necessary to add to existing selections however this can be configured with <i>metaKeySelection</i> property. Note that in touch enabled devices, Tree does not require metaKey. In addition selection on a
-                particular node can be disabled if the <i>selectable</i> is false on the node instance.
-            </p>
+        <h5>Selection</h5>
+        <p>
+            Tree supports <b>single</b>, <b>multiple</b> and <b>checkbox</b> selection modes. Define the <i>selectionKeys</i> with the v-model directive and the <i>selectionMode</i> properties to enable the selection. By default in multiple selection
+            mode, metaKey is necessary to add to existing selections however this can be configured with <i>metaKeySelection</i> property. Note that in touch enabled devices, Tree does not require metaKey. In addition selection on a particular node
+            can be disabled if the <i>selectable</i> is false on the node instance.
+        </p>
 
-            <p>
-                Similarly to the <i>expandedKeys</i>, <i>selectionKeys</i> is a Map instance whose key is the key of a node and value is a boolean in "single" and "multiple" cases. On the other hand in "checkbox" mode, instead of a boolean, value
-                should be an object that has "checked" and "partialChecked" properties to represent the checked state of a node.
-            </p>
-            <pre v-code><code><template v-pre>
+        <p>
+            Similarly to the <i>expandedKeys</i>, <i>selectionKeys</i> is a Map instance whose key is the key of a node and value is a boolean in "single" and "multiple" cases. On the other hand in "checkbox" mode, instead of a boolean, value should
+            be an object that has "checked" and "partialChecked" properties to represent the checked state of a node.
+        </p>
+        <pre v-code><code><template v-pre>
 &lt;h3&gt;Single Selection&lt;/h3&gt;
 &lt;Tree :value="nodes" selectionMode="single" v-model:selectionKeys="selectedKey1"&gt;&lt;/Tree&gt;
 
@@ -314,7 +313,7 @@ export default {
 </template>
 </code></pre>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 import NodeService from '../../service/NodeService';
 
 export default {
@@ -347,8 +346,8 @@ export default {
 
 </code></pre>
 
-            <p>To display some nodes as selected by default, simply add their keys to the map.</p>
-            <pre v-code.script><code>
+        <p>To display some nodes as selected by default, simply add their keys to the map.</p>
+        <pre v-code.script><code>
 import NodeService from '../../service/NodeService';
 
 export default {
@@ -385,18 +384,18 @@ export default {
 
 </code></pre>
 
-            <h5>Lazy</h5>
-            <p>
-                Lazy Loading is handy to deal with huge datasets. Idea is instead of loading the whole tree, load child nodes on demand using expand expand. The important part is setting <i>leaf</i> to true on a node instance so that even without
-                children, tree would render an expand icon. Example below uses an in memory collection to mimic a lazy loading scenario with timeouts.
-            </p>
+        <h5>Lazy</h5>
+        <p>
+            Lazy Loading is handy to deal with huge datasets. Idea is instead of loading the whole tree, load child nodes on demand using expand expand. The important part is setting <i>leaf</i> to true on a node instance so that even without
+            children, tree would render an expand icon. Example below uses an in memory collection to mimic a lazy loading scenario with timeouts.
+        </p>
 
-            <pre v-code><code><template v-pre>
+        <pre v-code><code><template v-pre>
 &lt;Tree :value="nodes" @node-expand="onNodeExpand" :loading="loading"&gt;&lt;/Tree&gt;
 </template>
 </code></pre>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 import NodeService from '../../service/NodeService';
 
 export default {
@@ -464,9 +463,9 @@ export default {
 
 </code></pre>
 
-            <h5>Templating</h5>
-            <p>The <i>type</i> property of a TreeNode is used to map a template to a node to create the node label. If it is undefined and no default template is available, label of the node is used.</p>
-            <pre v-code><code><template v-pre>
+        <h5>Templating</h5>
+        <p>The <i>type</i> property of a TreeNode is used to map a template to a node to create the node label. If it is undefined and no default template is available, label of the node is used.</p>
+        <pre v-code><code><template v-pre>
 &lt;Tree :value="nodes"&gt;
     &lt;template #default="slotProps"&gt;
         &lt;b&gt;&#123;&#123;slotProps.node.label&#125;&#125;&lt;/b&gt;
@@ -478,7 +477,7 @@ export default {
 </template>
 </code></pre>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 export default {
     data() {
         return {
@@ -510,20 +509,20 @@ export default {
 
 </code></pre>
 
-            <h5>Scrolling</h5>
-            <p>Scrolling is used to preserve space as content of the tree is dynamic and enabled by <i>scrollHeight</i> property.</p>
-            <pre v-code><code><template v-pre>
+        <h5>Scrolling</h5>
+        <p>Scrolling is used to preserve space as content of the tree is dynamic and enabled by <i>scrollHeight</i> property.</p>
+        <pre v-code><code><template v-pre>
 &lt;Tree :value="nodes1" scrollHeight="200px"&gt;&lt;/Tree&gt;
 </template>
 </code></pre>
 
-            <h5>Flex Scroll</h5>
-            <p>
-                In cases where viewport should adjust itself according to the table parent's height instead of a fixed viewport height, set <i>scrollHeight</i> option as <b>flex</b>. In example below, table is inside a Dialog where viewport size
-                dynamically responds to the dialog size changes such as maximizing.
-            </p>
+        <h5>Flex Scroll</h5>
+        <p>
+            In cases where viewport should adjust itself according to the table parent's height instead of a fixed viewport height, set <i>scrollHeight</i> option as <b>flex</b>. In example below, table is inside a Dialog where viewport size
+            dynamically responds to the dialog size changes such as maximizing.
+        </p>
 
-            <pre v-code><code><template v-pre>
+        <pre v-code><code><template v-pre>
 &lt;Button type="button" icon="pi pi-external-link" label="View" @click="dialogVisible = true"&gt;&lt;/Button&gt;
 
 &lt;Dialog header="Flex Scroll" v-model:visible="dialogVisible" :style="{width: '50vw'}" maximizable
@@ -536,18 +535,18 @@ export default {
 </template>
 </code></pre>
 
-            <h5>Filtering</h5>
-            <p>
-                Filtering is enabled by setting the <i>filter</i> property to true, by default label property of a node is used to compare against the value in the text field, in order to customize which field(s) should be used during search, define
-                the <i>filterBy</i> property as a comma separated list.
-            </p>
+        <h5>Filtering</h5>
+        <p>
+            Filtering is enabled by setting the <i>filter</i> property to true, by default label property of a node is used to compare against the value in the text field, in order to customize which field(s) should be used during search, define the
+            <i>filterBy</i> property as a comma separated list.
+        </p>
 
-            <p>
-                In addition <i>filterMode</i> specifies the filtering strategy. In <b>lenient</b> mode when the query matches a node, children of the node are not searched further as all descendants of the node are included. On the other hand, in
-                <b>strict</b> mode when the query matches a node, filtering continues on all descendants.
-            </p>
+        <p>
+            In addition <i>filterMode</i> specifies the filtering strategy. In <b>lenient</b> mode when the query matches a node, children of the node are not searched further as all descendants of the node are included. On the other hand, in
+            <b>strict</b> mode when the query matches a node, filtering continues on all descendants.
+        </p>
 
-            <pre v-code><code><template v-pre>
+        <pre v-code><code><template v-pre>
 &lt;h3&gt;Lenient Filter&lt;/h3&gt;
 &lt;Tree :value="nodes" :filter="true" filterMode="lenient"&gt;&lt;/Tree&gt;
 
@@ -556,7 +555,7 @@ export default {
 </template>
 </code></pre>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 import NodeService from '../../service/NodeService';
 
 export default {
@@ -598,198 +597,283 @@ export default {
 
 </code></pre>
 
-            <h5>Properties</h5>
-            <p>Any property such as style and class are passed to the underlying root element. Following is the additional property to configure the component.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>value</td>
-                            <td>array</td>
-                            <td>null</td>
-                            <td>An array of treenodes.</td>
-                        </tr>
-                        <tr>
-                            <td>expandedKeys</td>
-                            <td>array</td>
-                            <td>null</td>
-                            <td>A map of keys to represent the expansion state in controlled mode.</td>
-                        </tr>
-                        <tr>
-                            <td>selectionMode</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Defines the selection mode, valid values "single", "multiple", and "checkbox".</td>
-                        </tr>
-                        <tr>
-                            <td>selectionKeys</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>A map of keys to control the selection state.</td>
-                        </tr>
-                        <tr>
-                            <td>metaKeySelection</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>
-                                Defines how multiple items can be selected, when true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item can be toggled individually. On touch enabled devices,
-                                metaKeySelection is turned off automatically.
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>loading</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Whether to display loading indicator.</td>
-                        </tr>
-                        <tr>
-                            <td>loadingIcon</td>
-                            <td>string</td>
-                            <td>pi pi-spin</td>
-                            <td>Icon to display when tree is loading.</td>
-                        </tr>
-                        <tr>
-                            <td>filter</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When specified, displays an input field to filter the items.</td>
-                        </tr>
-                        <tr>
-                            <td>filterBy</td>
-                            <td>string</td>
-                            <td>label</td>
-                            <td>When filtering is enabled, filterBy decides which field or fields (comma separated) to search against.</td>
-                        </tr>
-                        <tr>
-                            <td>filterMode</td>
-                            <td>string</td>
-                            <td>lenient</td>
-                            <td>Mode for filtering valid values are "lenient" and "strict". Default is lenient.</td>
-                        </tr>
-                        <tr>
-                            <td>filterPlaceholder</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Placeholder text to show when filter input is empty.</td>
-                        </tr>
-                        <tr>
-                            <td>filterLocale</td>
-                            <td>string</td>
-                            <td>undefined</td>
-                            <td>Locale to use in filtering. The default locale is the host environment's current locale.</td>
-                        </tr>
-                        <tr>
-                            <td>scrollHeight</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Height of the scroll viewport in fixed units or the "flex" keyword for a dynamic size.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <p>Any property such as style and class are passed to the underlying root element. Following is the additional property to configure the component.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>value</td>
+                        <td>array</td>
+                        <td>null</td>
+                        <td>An array of treenodes.</td>
+                    </tr>
+                    <tr>
+                        <td>expandedKeys</td>
+                        <td>array</td>
+                        <td>null</td>
+                        <td>A map of keys to represent the expansion state in controlled mode.</td>
+                    </tr>
+                    <tr>
+                        <td>selectionMode</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Defines the selection mode, valid values "single", "multiple", and "checkbox".</td>
+                    </tr>
+                    <tr>
+                        <td>selectionKeys</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>A map of keys to control the selection state.</td>
+                    </tr>
+                    <tr>
+                        <td>metaKeySelection</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>
+                            Defines how multiple items can be selected, when true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item can be toggled individually. On touch enabled devices,
+                            metaKeySelection is turned off automatically.
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>loading</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Whether to display loading indicator.</td>
+                    </tr>
+                    <tr>
+                        <td>loadingIcon</td>
+                        <td>string</td>
+                        <td>pi pi-spin</td>
+                        <td>Icon to display when tree is loading.</td>
+                    </tr>
+                    <tr>
+                        <td>filter</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When specified, displays an input field to filter the items.</td>
+                    </tr>
+                    <tr>
+                        <td>filterBy</td>
+                        <td>string</td>
+                        <td>label</td>
+                        <td>When filtering is enabled, filterBy decides which field or fields (comma separated) to search against.</td>
+                    </tr>
+                    <tr>
+                        <td>filterMode</td>
+                        <td>string</td>
+                        <td>lenient</td>
+                        <td>Mode for filtering valid values are "lenient" and "strict". Default is lenient.</td>
+                    </tr>
+                    <tr>
+                        <td>filterPlaceholder</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Placeholder text to show when filter input is empty.</td>
+                    </tr>
+                    <tr>
+                        <td>filterLocale</td>
+                        <td>string</td>
+                        <td>undefined</td>
+                        <td>Locale to use in filtering. The default locale is the host environment's current locale.</td>
+                    </tr>
+                    <tr>
+                        <td>scrollHeight</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Height of the scroll viewport in fixed units or the "flex" keyword for a dynamic size.</td>
+                    </tr>
+                    <tr>
+                        <td>aria-label</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Defines a string value that labels an interactive element.</td>
+                    </tr>
+                    <tr>
+                        <td>aria-labelledby</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Events</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>node-select</td>
-                            <td>node: Node instance</td>
-                            <td>Callback to invoke when a node is selected.</td>
-                        </tr>
-                        <tr>
-                            <td>node-unselect</td>
-                            <td>node: Node instance</td>
-                            <td>Callback to invoke when a node is unselected.</td>
-                        </tr>
-                        <tr>
-                            <td>node-expand</td>
-                            <td>node: Node instance</td>
-                            <td>Callback to invoke when a node is expanded.</td>
-                        </tr>
-                        <tr>
-                            <td>node-collapse</td>
-                            <td>node: Node instance</td>
-                            <td>Callback to invoke when a node is collapsed.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Events</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>node-select</td>
+                        <td>node: Node instance</td>
+                        <td>Callback to invoke when a node is selected.</td>
+                    </tr>
+                    <tr>
+                        <td>node-unselect</td>
+                        <td>node: Node instance</td>
+                        <td>Callback to invoke when a node is unselected.</td>
+                    </tr>
+                    <tr>
+                        <td>node-expand</td>
+                        <td>node: Node instance</td>
+                        <td>Callback to invoke when a node is expanded.</td>
+                    </tr>
+                    <tr>
+                        <td>node-collapse</td>
+                        <td>node: Node instance</td>
+                        <td>Callback to invoke when a node is collapsed.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-tree</td>
-                            <td>Main container element</td>
-                        </tr>
-                        <tr>
-                            <td>p-tree-horizontal</td>
-                            <td>Main container element in horizontal mode</td>
-                        </tr>
-                        <tr>
-                            <td>p-tree-container</td>
-                            <td>Container of nodes</td>
-                        </tr>
-                        <tr>
-                            <td>p-treenode</td>
-                            <td>A treenode element</td>
-                        </tr>
-                        <tr>
-                            <td>p-treenode-content</td>
-                            <td>Content of a treenode</td>
-                        </tr>
-                        <tr>
-                            <td>p-treenode-toggler</td>
-                            <td>Toggle element</td>
-                        </tr>
-                        <tr>
-                            <td>p-treenode-toggler-icon</td>
-                            <td>Toggle icon</td>
-                        </tr>
-                        <tr>
-                            <td>p-treenode-icon</td>
-                            <td>Icon of a treenode</td>
-                        </tr>
-                        <tr>
-                            <td>p-treenode-label</td>
-                            <td>Label of a treenode</td>
-                        </tr>
-                        <tr>
-                            <td>p-treenode-children</td>
-                            <td>Container element for node children</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-tree</td>
+                        <td>Main container element</td>
+                    </tr>
+                    <tr>
+                        <td>p-tree-horizontal</td>
+                        <td>Main container element in horizontal mode</td>
+                    </tr>
+                    <tr>
+                        <td>p-tree-container</td>
+                        <td>Container of nodes</td>
+                    </tr>
+                    <tr>
+                        <td>p-treenode</td>
+                        <td>A treenode element</td>
+                    </tr>
+                    <tr>
+                        <td>p-treenode-content</td>
+                        <td>Content of a treenode</td>
+                    </tr>
+                    <tr>
+                        <td>p-treenode-toggler</td>
+                        <td>Toggle element</td>
+                    </tr>
+                    <tr>
+                        <td>p-treenode-toggler-icon</td>
+                        <td>Toggle icon</td>
+                    </tr>
+                    <tr>
+                        <td>p-treenode-icon</td>
+                        <td>Icon of a treenode</td>
+                    </tr>
+                    <tr>
+                        <td>p-treenode-label</td>
+                        <td>Label of a treenode</td>
+                    </tr>
+                    <tr>
+                        <td>p-treenode-children</td>
+                        <td>Container element for node children</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>
+            Value to describe the component can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. The root list element has a <i>tree</i> role whereas each list item has a <i>treeitem</i> role along with <i>aria-label</i>,
+            <i>aria-selected</i> and <i>aria-expanded</i> attributes. In checkbox selection, <i>aria-checked</i> is used instead of <i>aria-selected</i>. The container element of a treenode has the <i>group</i> role. Checkbox and toggle icons are
+            hidden from screen readers as their parent element with <i>treeitem</i> role and attributes are used instead for readers and keyboard support. The <i>aria-setsize</i>, <i>aria-posinset</i> and <i>aria-level</i> attributes are calculated
+            implicitly and added to each treeitem.
+        </p>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc>
-    </ClientOnly>
+        <h6>Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>tab</i>
+                        </td>
+                        <td>
+                            Moves focus to the first selected node when focus enters the component, if there is none then first element receives the focus. If focus is already inside the component, moves focus to the next focusable element in the
+                            page tab sequence.
+                        </td>
+                    </tr>
+                    <tr>
+                        <td><i>shift</i> + <i>tab</i></td>
+                        <td>
+                            Moves focus to the last selected node when focus enters the component, if there is none then first element receives the focus. If focus is already inside the component, moves focus to the previous focusable element in the
+                            page tab sequence.
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>Selects the focused treenode.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>Selects the focused treenode.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>down arrow</i>
+                        </td>
+                        <td>Moves focus to the next treenode.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>up arrow</i>
+                        </td>
+                        <td>Moves focus to the previous treenode.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>right arrow</i>
+                        </td>
+                        <td>If node is closed, opens the node otherwise moves focus to the first child node.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>left arrow</i>
+                        </td>
+                        <td>If node is open, closes the node otherwise moves focus to the parent node.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
diff --git a/pages/treeselect/TreeSelectDoc.vue b/pages/treeselect/TreeSelectDoc.vue
index 1193cfd64..1af70da8b 100644
--- a/pages/treeselect/TreeSelectDoc.vue
+++ b/pages/treeselect/TreeSelectDoc.vue
@@ -1,30 +1,29 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="TreeSelectDemo" :sources="sources" github="treeselect/TreeSelectDemo.vue" :service="['NodeService']" :data="['treenodes']">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="TreeSelectDemo" :sources="sources" github="treeselect/TreeSelectDemo.vue" :service="['NodeService']" :data="['treenodes']">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import TreeSelect from 'primevue/treeselect';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/treeselect/treeselect.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p>TreeSelect component requires an array of TreeNode objects as its <i>options</i> and keys of the nodes as its value.</p>
+        <h5>Getting Started</h5>
+        <p>TreeSelect component requires an array of TreeNode objects as its <i>options</i> and keys of the nodes as its value.</p>
 
-            <pre v-code><code>
+        <pre v-code><code>
 &lt;TreeSelect v-model="selectedNodeKey" :options="nodes" placeholder="Select Item" /&gt;
 
 </code></pre>
 
-            <p>In example below, nodes are retrieved from a remote data source.</p>
+        <p>In example below, nodes are retrieved from a remote data source.</p>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 import NodeService from '../../service/NodeService';
 
 export default {
@@ -45,7 +44,7 @@ export default {
 
 </code></pre>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 export default class NodeService {
 
     getTreeNodes() {
@@ -57,8 +56,8 @@ export default class NodeService {
 
 </code></pre>
 
-            <p>The json response sample would be as following.</p>
-            <pre v-code.script><code>
+        <p>The json response sample would be as following.</p>
+        <pre v-code.script><code>
 {
     "root": [
         {
@@ -116,85 +115,85 @@ export default class NodeService {
 
 </code></pre>
 
-            <h5>TreeNode API utilized by the TreeSelect</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>key</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Mandatory unique key of the node.</td>
-                        </tr>
-                        <tr>
-                            <td>label</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Label of the node.</td>
-                        </tr>
-                        <tr>
-                            <td>data</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Data represented by the node.</td>
-                        </tr>
-                        <tr>
-                            <td>type</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Type of the node to match a template.</td>
-                        </tr>
-                        <tr>
-                            <td>icon</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Icon of the node to display next to content.</td>
-                        </tr>
-                        <tr>
-                            <td>children</td>
-                            <td>TreeNode[]</td>
-                            <td>null</td>
-                            <td>An array of treenodes as children.</td>
-                        </tr>
-                        <tr>
-                            <td>style</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Inline style of the node.</td>
-                        </tr>
-                        <tr>
-                            <td>styleClass</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the node.</td>
-                        </tr>
-                        <tr>
-                            <td>selectable</td>
-                            <td>boolean</td>
-                            <td>null</td>
-                            <td>Whether the node is selectable when selection mode is enabled.</td>
-                        </tr>
-                        <tr>
-                            <td>leaf</td>
-                            <td>boolean</td>
-                            <td>null</td>
-                            <td>Specifies if the node has children. Used in lazy loading.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>TreeNode API utilized by the TreeSelect</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>key</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Mandatory unique key of the node.</td>
+                    </tr>
+                    <tr>
+                        <td>label</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Label of the node.</td>
+                    </tr>
+                    <tr>
+                        <td>data</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Data represented by the node.</td>
+                    </tr>
+                    <tr>
+                        <td>type</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Type of the node to match a template.</td>
+                    </tr>
+                    <tr>
+                        <td>icon</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Icon of the node to display next to content.</td>
+                    </tr>
+                    <tr>
+                        <td>children</td>
+                        <td>TreeNode[]</td>
+                        <td>null</td>
+                        <td>An array of treenodes as children.</td>
+                    </tr>
+                    <tr>
+                        <td>style</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Inline style of the node.</td>
+                    </tr>
+                    <tr>
+                        <td>styleClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the node.</td>
+                    </tr>
+                    <tr>
+                        <td>selectable</td>
+                        <td>boolean</td>
+                        <td>null</td>
+                        <td>Whether the node is selectable when selection mode is enabled.</td>
+                    </tr>
+                    <tr>
+                        <td>leaf</td>
+                        <td>boolean</td>
+                        <td>null</td>
+                        <td>Specifies if the node has children. Used in lazy loading.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Selection Mode</h5>
-            <p>TreeSelects offers "single", "multiple" and "checkbox" alternatives for the selection behavior that is defined by the <i>selectionMode</i> option.</p>
-            <pre v-code><code>
+        <h5>Selection Mode</h5>
+        <p>TreeSelects offers "single", "multiple" and "checkbox" alternatives for the selection behavior that is defined by the <i>selectionMode</i> option.</p>
+        <pre v-code><code>
 &lt;TreeSelect v-model="selectedValue1" :options="nodes" selectionMode="single" placeholder="Select Item" /&gt;
 
 &lt;TreeSelect v-model="selectedValue2" :options="nodes" selectionMode="multiple" placeholder="Select Items" /&gt;
@@ -203,13 +202,13 @@ export default class NodeService {
 
 </code></pre>
 
-            <h5>Value Format</h5>
-            <p>
-                Value passed to and from the TreeSelect via the v-model directive should be a an object with key-value pairs where key is the node key and value is a boolean to indicate selection. On the other hand in "checkbox" mode, instead of a
-                boolean, value should be an object that has "checked" and "partialChecked" properties to represent the checked state of a node. Best way to clarify it is prepopulating a TreeSelect with an existing value.
-            </p>
+        <h5>Value Format</h5>
+        <p>
+            Value passed to and from the TreeSelect via the v-model directive should be a an object with key-value pairs where key is the node key and value is a boolean to indicate selection. On the other hand in "checkbox" mode, instead of a
+            boolean, value should be an object that has "checked" and "partialChecked" properties to represent the checked state of a node. Best way to clarify it is prepopulating a TreeSelect with an existing value.
+        </p>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 data() {
     return {
         selectedValue1: {'2-1': true},
@@ -220,19 +219,19 @@ data() {
 },
 </code></pre>
 
-            <h5>Chips Display</h5>
-            <p>A comma separated list is used by default to display selected items whereas alternative chip mode is provided using the <i>display</i> property to visualize the items as tokens.</p>
-            <pre v-code><code>
+        <h5>Chips Display</h5>
+        <p>A comma separated list is used by default to display selected items whereas alternative chip mode is provided using the <i>display</i> property to visualize the items as tokens.</p>
+        <pre v-code><code>
 &lt;TreeSelect v-model="selectedValue" display="chip" :options="nodes" selectionMode="multiple" placeholder="Select Items" /&gt;
 
 </code></pre>
 
-            <h5>Templating</h5>
-            <p>
-                Label of an option is used as the display text of an item by default, for custom content support define a <i>value</i> template that gets the selected nodes as a parameter. In addition <i>header</i>, <i>footer</i> and
-                <i>empty</i> slots are provided for further customization.
-            </p>
-            <pre v-code><code><template v-pre>
+        <h5>Templating</h5>
+        <p>
+            Label of an option is used as the display text of an item by default, for custom content support define a <i>value</i> template that gets the selected nodes as a parameter. In addition <i>header</i>, <i>footer</i> and <i>empty</i> slots
+            are provided for further customization.
+        </p>
+        <pre v-code><code><template v-pre>
 &lt;TreeSelect v-model="selectedNodes" :options="nodes" placeholder="Select Items"&gt;
 	&lt;template #value="{value}"&gt;
 		Custom Content
@@ -241,298 +240,297 @@ data() {
 </template>
 </code></pre>
 
-            <h5>Properties</h5>
-            <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>modelValue</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Value of the component.</td>
-                        </tr>
-                        <tr>
-                            <td>options</td>
-                            <td>array</td>
-                            <td>null</td>
-                            <td>An array of treenodes.</td>
-                        </tr>
-                        <tr>
-                            <td>scrollHeight</td>
-                            <td>string</td>
-                            <td>200px</td>
-                            <td>Height of the viewport, a scrollbar is defined if height of list exceeds this value.</td>
-                        </tr>
-                        <tr>
-                            <td>placeholder</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Label to display when there are no selections.</td>
-                        </tr>
-                        <tr>
-                            <td>disabled</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When present, it specifies that the component should be disabled.</td>
-                        </tr>
-                        <tr>
-                            <td>tabindex</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Index of the element in tabbing order.</td>
-                        </tr>
-                        <tr>
-                            <td>selectionMode</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Defines the selection mode, valid values "single", "multiple", and "checkbox".</td>
-                        </tr>
-                        <tr>
-                            <td>appendTo</td>
-                            <td>string</td>
-                            <td>body</td>
-                            <td>A valid query selector or an HTMLElement to specify where the overlay gets attached. Special keywords are "body" for document body and "self" for the element itself.</td>
-                        </tr>
-                        <tr>
-                            <td>emptyMessage</td>
-                            <td>string</td>
-                            <td>No results found</td>
-                            <td>Text to display when there are no options available. Defaults to value from PrimeVue locale configuration.</td>
-                        </tr>
-                        <tr>
-                            <td>display</td>
-                            <td>string</td>
-                            <td>comma</td>
-                            <td>Defines how the selected items are displayed, valid values are "comma" and "chip".</td>
-                        </tr>
-                        <tr>
-                            <td>metaKeySelection</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>
-                                Defines how multiple items can be selected, when true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item can be toggled individually. On touch enabled devices,
-                                metaKeySelection is turned off automatically.
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>inputId</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Identifier of the underlying input element.</td>
-                        </tr>
-                        <tr>
-                            <td>inputClass</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the input field.</td>
-                        </tr>
-                        <tr>
-                            <td>inputStyle</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Inline style of the input field.</td>
-                        </tr>
-                        <tr>
-                            <td>panelClass</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the overlay panel.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>modelValue</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Value of the component.</td>
+                    </tr>
+                    <tr>
+                        <td>options</td>
+                        <td>array</td>
+                        <td>null</td>
+                        <td>An array of treenodes.</td>
+                    </tr>
+                    <tr>
+                        <td>scrollHeight</td>
+                        <td>string</td>
+                        <td>200px</td>
+                        <td>Height of the viewport, a scrollbar is defined if height of list exceeds this value.</td>
+                    </tr>
+                    <tr>
+                        <td>placeholder</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Label to display when there are no selections.</td>
+                    </tr>
+                    <tr>
+                        <td>disabled</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When present, it specifies that the component should be disabled.</td>
+                    </tr>
+                    <tr>
+                        <td>tabindex</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Index of the element in tabbing order.</td>
+                    </tr>
+                    <tr>
+                        <td>selectionMode</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Defines the selection mode, valid values "single", "multiple", and "checkbox".</td>
+                    </tr>
+                    <tr>
+                        <td>appendTo</td>
+                        <td>string</td>
+                        <td>body</td>
+                        <td>A valid query selector or an HTMLElement to specify where the overlay gets attached. Special keywords are "body" for document body and "self" for the element itself.</td>
+                    </tr>
+                    <tr>
+                        <td>emptyMessage</td>
+                        <td>string</td>
+                        <td>No results found</td>
+                        <td>Text to display when there are no options available. Defaults to value from PrimeVue locale configuration.</td>
+                    </tr>
+                    <tr>
+                        <td>display</td>
+                        <td>string</td>
+                        <td>comma</td>
+                        <td>Defines how the selected items are displayed, valid values are "comma" and "chip".</td>
+                    </tr>
+                    <tr>
+                        <td>metaKeySelection</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>
+                            Defines how multiple items can be selected, when true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item can be toggled individually. On touch enabled devices,
+                            metaKeySelection is turned off automatically.
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>inputId</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Identifier of the underlying input element.</td>
+                    </tr>
+                    <tr>
+                        <td>inputClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the input field.</td>
+                    </tr>
+                    <tr>
+                        <td>inputStyle</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Inline style of the input field.</td>
+                    </tr>
+                    <tr>
+                        <td>panelClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the overlay panel.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Events</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>change</td>
-                            <td>event: Selected node keys</td>
-                            <td>Callback to invoke on value change.</td>
-                        </tr>
-                        <tr>
-                            <td>before-show</td>
-                            <td>-</td>
-                            <td>Callback to invoke before the overlay is shown.</td>
-                        </tr>
-                        <tr>
-                            <td>before-hide</td>
-                            <td>-</td>
-                            <td>Callback to invoke before the overlay is hidden.</td>
-                        </tr>
-                        <tr>
-                            <td>show</td>
-                            <td>-</td>
-                            <td>Callback to invoke when the overlay is shown.</td>
-                        </tr>
-                        <tr>
-                            <td>hide</td>
-                            <td>-</td>
-                            <td>Callback to invoke when the overlay is hidden.</td>
-                        </tr>
-                        <tr>
-                            <td>node-select</td>
-                            <td>node: Node instance</td>
-                            <td>Callback to invoke when a node is selected.</td>
-                        </tr>
-                        <tr>
-                            <td>node-unselect</td>
-                            <td>node: Node instance</td>
-                            <td>Callback to invoke when a node is unselected.</td>
-                        </tr>
-                        <tr>
-                            <td>node-expand</td>
-                            <td>node: Node instance</td>
-                            <td>Callback to invoke when a node is expanded.</td>
-                        </tr>
-                        <tr>
-                            <td>node-collapse</td>
-                            <td>node: Node instance</td>
-                            <td>Callback to invoke when a node is collapsed.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Events</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>change</td>
+                        <td>event: Selected node keys</td>
+                        <td>Callback to invoke on value change.</td>
+                    </tr>
+                    <tr>
+                        <td>before-show</td>
+                        <td>-</td>
+                        <td>Callback to invoke before the overlay is shown.</td>
+                    </tr>
+                    <tr>
+                        <td>before-hide</td>
+                        <td>-</td>
+                        <td>Callback to invoke before the overlay is hidden.</td>
+                    </tr>
+                    <tr>
+                        <td>show</td>
+                        <td>-</td>
+                        <td>Callback to invoke when the overlay is shown.</td>
+                    </tr>
+                    <tr>
+                        <td>hide</td>
+                        <td>-</td>
+                        <td>Callback to invoke when the overlay is hidden.</td>
+                    </tr>
+                    <tr>
+                        <td>node-select</td>
+                        <td>node: Node instance</td>
+                        <td>Callback to invoke when a node is selected.</td>
+                    </tr>
+                    <tr>
+                        <td>node-unselect</td>
+                        <td>node: Node instance</td>
+                        <td>Callback to invoke when a node is unselected.</td>
+                    </tr>
+                    <tr>
+                        <td>node-expand</td>
+                        <td>node: Node instance</td>
+                        <td>Callback to invoke when a node is expanded.</td>
+                    </tr>
+                    <tr>
+                        <td>node-collapse</td>
+                        <td>node: Node instance</td>
+                        <td>Callback to invoke when a node is collapsed.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Methods</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>show</td>
-                            <td>-</td>
-                            <td>Shows the overlay.</td>
-                        </tr>
-                        <tr>
-                            <td>hide</td>
-                            <td>-</td>
-                            <td>Hides the overlay.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Methods</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>show</td>
+                        <td>-</td>
+                        <td>Shows the overlay.</td>
+                    </tr>
+                    <tr>
+                        <td>hide</td>
+                        <td>-</td>
+                        <td>Hides the overlay.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Slots</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>value</td>
-                            <td>
-                                value: Selected nodes <br />
-                                placeholder: Placeholder value
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>header</td>
-                            <td>
-                                value: Value of the component <br />
-                                options: TreeNode options
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>footer</td>
-                            <td>
-                                value: Value of the component <br />
-                                options: TreeNode options
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>empty</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>indicator</td>
-                            <td>-</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Slots</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>value</td>
+                        <td>
+                            value: Selected nodes <br />
+                            placeholder: Placeholder value
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>header</td>
+                        <td>
+                            value: Value of the component <br />
+                            options: TreeNode options
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>footer</td>
+                        <td>
+                            value: Value of the component <br />
+                            options: TreeNode options
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>empty</td>
+                        <td>-</td>
+                    </tr>
+                    <tr>
+                        <td>indicator</td>
+                        <td>-</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-treeselect</td>
-                            <td>Container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-treeselect-label-container</td>
-                            <td>Container of the label to display selected items.</td>
-                        </tr>
-                        <tr>
-                            <td>p-treeselect-label</td>
-                            <td>Label to display selected items.</td>
-                        </tr>
-                        <tr>
-                            <td>p-treeselect-trigger</td>
-                            <td>Dropdown button.</td>
-                        </tr>
-                        <tr>
-                            <td>p-treeselect-panel</td>
-                            <td>Overlay panel for items.</td>
-                        </tr>
-                        <tr>
-                            <td>p-treeselect-items-wrapper</td>
-                            <td>List container of items.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-treeselect</td>
+                        <td>Container element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-treeselect-label-container</td>
+                        <td>Container of the label to display selected items.</td>
+                    </tr>
+                    <tr>
+                        <td>p-treeselect-label</td>
+                        <td>Label to display selected items.</td>
+                    </tr>
+                    <tr>
+                        <td>p-treeselect-trigger</td>
+                        <td>Dropdown button.</td>
+                    </tr>
+                    <tr>
+                        <td>p-treeselect-panel</td>
+                        <td>Overlay panel for items.</td>
+                    </tr>
+                    <tr>
+                        <td>p-treeselect-items-wrapper</td>
+                        <td>List container of items.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Accessibility</h5>
-            <DevelopmentSection>
-                <h6>Screen Reader</h6>
-                <p>
-                    Value to describe the component can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. The treeselect element has a <i>combobox</i> role in addition to <i>aria-haspopup</i> and
-                    <i>aria-expanded</i> attributes. The relation between the combobox and the popup is created with <i>aria-controls</i> that refers to the id of the popup.
-                </p>
-                <p>
-                    The popup list has an id that refers to the <i>aria-controls</i> attribute of the <i>combobox</i> element and uses <i>tree</i> as the role. Each list item has a <i>treeitem</i> role along with <i>aria-label</i>,
-                    <i>aria-selected</i> and <i>aria-expanded</i> attributes. In checkbox selection, <i>aria-checked</i> is used instead of <i>aria-selected</i>. Checkbox and toggle icons are hidden from screen readers as their parent element with
-                    <i>treeitem</i> role and attributes are used instead for readers and keyboard support. The container element of a treenode has the <i>group</i> role. The <i>aria-setsize</i>, <i>aria-posinset</i> and <i>aria-level</i> attributes
-                    are calculated implicitly and added to each treeitem.
-                </p>
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>
+            Value to describe the component can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. The treeselect element has a <i>combobox</i> role in addition to <i>aria-haspopup</i> and <i>aria-expanded</i> attributes. The
+            relation between the combobox and the popup is created with <i>aria-controls</i> that refers to the id of the popup.
+        </p>
+        <p>
+            The popup list has an id that refers to the <i>aria-controls</i> attribute of the <i>combobox</i> element and uses <i>tree</i> as the role. Each list item has a <i>treeitem</i> role along with <i>aria-label</i>, <i>aria-selected</i> and
+            <i>aria-expanded</i> attributes. In checkbox selection, <i>aria-checked</i> is used instead of <i>aria-selected</i>. Checkbox and toggle icons are hidden from screen readers as their parent element with <i>treeitem</i> role and attributes
+            are used instead for readers and keyboard support. The container element of a treenode has the <i>group</i> role. The <i>aria-setsize</i>, <i>aria-posinset</i> and <i>aria-level</i> attributes are calculated implicitly and added to each
+            treeitem.
+        </p>
 
-                <pre v-code><code>
+        <pre v-code><code>
 &lt;span id="dd1"&gt;Options&lt;/span&gt;
 &lt;TreeSelect aria-labelledby="dd1" /&gt;
 
@@ -540,87 +538,85 @@ data() {
 
 </code></pre>
 
-                <h6>Closed State Keyboard Support</h6>
-                <div class="doc-tablewrapper">
-                    <table class="doc-table">
-                        <thead>
-                            <tr>
-                                <th>Key</th>
-                                <th>Function</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr>
-                                <td><i>tab</i></td>
-                                <td>Moves focus to the treeselect element.</td>
-                            </tr>
-                            <tr>
-                                <td><i>space</i></td>
-                                <td>Opens the popup and moves visual focus to the selected treenode, if there is none then first treenode receives the focus.</td>
-                            </tr>
-                            <tr>
-                                <td><i>down arrow</i></td>
-                                <td>Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus.</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
+        <h6>Closed State Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>tab</i></td>
+                        <td>Moves focus to the treeselect element.</td>
+                    </tr>
+                    <tr>
+                        <td><i>space</i></td>
+                        <td>Opens the popup and moves visual focus to the selected treenode, if there is none then first treenode receives the focus.</td>
+                    </tr>
+                    <tr>
+                        <td><i>down arrow</i></td>
+                        <td>Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-                <h6>Popup Keyboard Support</h6>
-                <div class="doc-tablewrapper">
-                    <table class="doc-table">
-                        <thead>
-                            <tr>
-                                <th>Key</th>
-                                <th>Function</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr>
-                                <td><i>tab</i></td>
-                                <td>Moves focus to the next focusable element in the popup, if there is none then first focusable element receives the focus.</td>
-                            </tr>
-                            <tr>
-                                <td><i>shift</i> + <i>tab</i></td>
-                                <td>Moves focus to the previous focusable element in the popup, if there is none then last focusable element receives the focus.</td>
-                            </tr>
-                            <tr>
-                                <td><i>enter</i></td>
-                                <td>Selects the focused option, closes the popup if selection mode is single.</td>
-                            </tr>
-                            <tr>
-                                <td><i>space</i></td>
-                                <td>Selects the focused option, closes the popup if selection mode is single.</td>
-                            </tr>
-                            <tr>
-                                <td><i>escape</i></td>
-                                <td>Closes the popup, moves focus to the treeselect element.</td>
-                            </tr>
-                            <tr>
-                                <td><i>down arrow</i></td>
-                                <td>Moves focus to the next treenode.</td>
-                            </tr>
-                            <tr>
-                                <td><i>up arrow</i></td>
-                                <td>Moves focus to the previous treenode.</td>
-                            </tr>
-                            <tr>
-                                <td><i>right arrow</i></td>
-                                <td>If node is closed, opens the node otherwise moves focus to the first child node.</td>
-                            </tr>
-                            <tr>
-                                <td><i>left arrow</i></td>
-                                <td>If node is open, closes the node otherwise moves focus to the parent node.</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-            </DevelopmentSection>
+        <h6>Popup Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>tab</i></td>
+                        <td>Moves focus to the next focusable element in the page tab sequence.</td>
+                    </tr>
+                    <tr>
+                        <td><i>shift</i> + <i>tab</i></td>
+                        <td>Moves focus to the previous focusable element in the page tab sequence.</td>
+                    </tr>
+                    <tr>
+                        <td><i>enter</i></td>
+                        <td>Selects the focused option, closes the popup if selection mode is single.</td>
+                    </tr>
+                    <tr>
+                        <td><i>space</i></td>
+                        <td>Selects the focused option, closes the popup if selection mode is single.</td>
+                    </tr>
+                    <tr>
+                        <td><i>escape</i></td>
+                        <td>Closes the popup, moves focus to the treeselect element.</td>
+                    </tr>
+                    <tr>
+                        <td><i>down arrow</i></td>
+                        <td>Moves focus to the next treenode.</td>
+                    </tr>
+                    <tr>
+                        <td><i>up arrow</i></td>
+                        <td>Moves focus to the previous treenode.</td>
+                    </tr>
+                    <tr>
+                        <td><i>right arrow</i></td>
+                        <td>If node is closed, opens the node otherwise moves focus to the first child node.</td>
+                    </tr>
+                    <tr>
+                        <td><i>left arrow</i></td>
+                        <td>If node is open, closes the node otherwise moves focus to the parent node.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc>
-    </ClientOnly>
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
diff --git a/pages/treetable/ColResize.vue b/pages/treetable/ColResize.vue
index 6fd31f831..88e766ee2 100755
--- a/pages/treetable/ColResize.vue
+++ b/pages/treetable/ColResize.vue
@@ -31,9 +31,7 @@
             </div>
         </div>
 
-        <ClientOnly>
-            <AppDoc name="TreeTableColResizeDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" github="treetable/TreeTableColResizeDemo.vue" />
-        </ClientOnly>
+        <AppDoc name="TreeTableColResizeDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" github="treetable/TreeTableColResizeDemo.vue" />
     </div>
 </template>
 
diff --git a/pages/treetable/ColToggle.vue b/pages/treetable/ColToggle.vue
index 8f55fd887..640fc3e38 100755
--- a/pages/treetable/ColToggle.vue
+++ b/pages/treetable/ColToggle.vue
@@ -17,14 +17,12 @@
                         </div>
                     </template>
                     <Column field="name" header="Name" :expander="true"></Column>
-                    <Column v-for="col of selectedColumns" :field="col.field" :header="col.header" :key="col.field"></Column>
+                    <Column v-for="col of selectedColumns" :key="col.field" :field="col.field" :header="col.header"></Column>
                 </TreeTable>
             </div>
         </div>
 
-        <ClientOnly>
-            <AppDoc name="TreeTableColToggleDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" github="treetable/TreeTableColToggleDemo.vue" />
-        </ClientOnly>
+        <AppDoc name="TreeTableColToggleDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" github="treetable/TreeTableColToggleDemo.vue" />
     </div>
 </template>
 
diff --git a/pages/treetable/Filter.vue b/pages/treetable/Filter.vue
index 05e976f0f..c04b8ed16 100755
--- a/pages/treetable/Filter.vue
+++ b/pages/treetable/Filter.vue
@@ -22,17 +22,17 @@
                     </template>
                     <Column field="name" header="Name" :expander="true">
                         <template #filter>
-                            <InputText type="text" v-model="filters1['name']" class="p-column-filter" placeholder="Filter by name" />
+                            <InputText v-model="filters1['name']" type="text" class="p-column-filter" placeholder="Filter by name" />
                         </template>
                     </Column>
                     <Column field="size" header="Size">
                         <template #filter>
-                            <InputText type="text" v-model="filters1['size']" class="p-column-filter" placeholder="Filter by size" />
+                            <InputText v-model="filters1['size']" type="text" class="p-column-filter" placeholder="Filter by size" />
                         </template>
                     </Column>
                     <Column field="type" header="Type">
                         <template #filter>
-                            <InputText type="text" v-model="filters1['type']" class="p-column-filter" placeholder="Filter by type" />
+                            <InputText v-model="filters1['type']" type="text" class="p-column-filter" placeholder="Filter by type" />
                         </template>
                     </Column>
                 </TreeTable>
@@ -51,26 +51,24 @@
                     </template>
                     <Column field="name" header="Name" :expander="true">
                         <template #filter>
-                            <InputText type="text" v-model="filters2['name']" class="p-column-filter" placeholder="Filter by name" />
+                            <InputText v-model="filters2['name']" type="text" class="p-column-filter" placeholder="Filter by name" />
                         </template>
                     </Column>
                     <Column field="size" header="Size">
                         <template #filter>
-                            <InputText type="text" v-model="filters2['size']" class="p-column-filter" placeholder="Filter by size" />
+                            <InputText v-model="filters2['size']" type="text" class="p-column-filter" placeholder="Filter by size" />
                         </template>
                     </Column>
                     <Column field="type" header="Type">
                         <template #filter>
-                            <InputText type="text" v-model="filters2['type']" class="p-column-filter" placeholder="Filter by type" />
+                            <InputText v-model="filters2['type']" type="text" class="p-column-filter" placeholder="Filter by type" />
                         </template>
                     </Column>
                 </TreeTable>
             </div>
         </div>
 
-        <ClientOnly>
-            <AppDoc name="TreeTableFilterDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" github="treetable/TreeTableFilterDemo.vue" />
-        </ClientOnly>
+        <AppDoc name="TreeTableFilterDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" github="treetable/TreeTableFilterDemo.vue" />
     </div>
 </template>
 
diff --git a/pages/treetable/Lazy.vue b/pages/treetable/Lazy.vue
index 00ba56c8e..a9c0b34b7 100755
--- a/pages/treetable/Lazy.vue
+++ b/pages/treetable/Lazy.vue
@@ -21,9 +21,7 @@
             </div>
         </div>
 
-        <ClientOnly>
-            <AppDoc name="TreeTableLazyDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" github="treetable/TreeTableLazyDemo.vue" />
-        </ClientOnly>
+        <AppDoc name="TreeTableLazyDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" github="treetable/TreeTableLazyDemo.vue" />
     </div>
 </template>
 
diff --git a/pages/treetable/Paginator.vue b/pages/treetable/Paginator.vue
index a5cb8258d..193bb5b48 100755
--- a/pages/treetable/Paginator.vue
+++ b/pages/treetable/Paginator.vue
@@ -18,9 +18,7 @@
             </div>
         </div>
 
-        <ClientOnly>
-            <AppDoc name="TreeTablePaginatorDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" github="treetable/TreeTablePaginatorDemo.vue" />
-        </ClientOnly>
+        <AppDoc name="TreeTablePaginatorDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" github="treetable/TreeTablePaginatorDemo.vue" />
     </div>
 </template>
 
@@ -194,6 +192,7 @@ export default {
     },
     created() {
         let files = [];
+
         for (let i = 0; i < 50; i++) {
             let node = {
                 key: i,
diff --git a/pages/treetable/Responsive.vue b/pages/treetable/Responsive.vue
index 658e3c0f2..affc31b89 100755
--- a/pages/treetable/Responsive.vue
+++ b/pages/treetable/Responsive.vue
@@ -36,9 +36,7 @@
             </div>
         </div>
 
-        <ClientOnly>
-            <AppDoc name="TreeTableResponsiveDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" github="treetable/TreeTableResponsiveDemo.vue" />
-        </ClientOnly>
+        <AppDoc name="TreeTableResponsiveDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" github="treetable/TreeTableResponsiveDemo.vue" />
     </div>
 </template>
 
diff --git a/pages/treetable/Scroll.vue b/pages/treetable/Scroll.vue
index 053b35904..8bb8e8862 100644
--- a/pages/treetable/Scroll.vue
+++ b/pages/treetable/Scroll.vue
@@ -28,7 +28,7 @@
                 <Button label="Show" icon="pi pi-external-link" @click="openDialog" />
             </div>
 
-            <Dialog header="Flex Scroll" v-model:visible="dialogVisible" :style="{ width: '75vw' }" :maximizable="true" :modal="true" :contentStyle="{ height: '300px' }">
+            <Dialog v-model:visible="dialogVisible" header="Flex Scroll" :style="{ width: '75vw' }" :maximizable="true" :modal="true" :contentStyle="{ height: '300px' }">
                 <TreeTable :value="nodes" :scrollable="true" scrollHeight="flex">
                     <Column field="name" header="Name" :expander="true" style="min-width: 200px"></Column>
                     <Column field="size" header="Size" style="min-width: 200px"></Column>
@@ -91,9 +91,7 @@
             </div>
         </div>
 
-        <ClientOnly>
-            <AppDoc name="TreeTableScrollDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" github="treetable/TreeTableSizeDemo.vue" />
-        </ClientOnly>
+        <AppDoc name="TreeTableScrollDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" github="treetable/TreeTableSizeDemo.vue" />
     </div>
 </template>
 
diff --git a/pages/treetable/Selection.vue b/pages/treetable/Selection.vue
index a18696e10..f48e3e3fb 100755
--- a/pages/treetable/Selection.vue
+++ b/pages/treetable/Selection.vue
@@ -11,7 +11,7 @@
         <div class="content-section implementation">
             <div class="card">
                 <h5>Single Selection</h5>
-                <TreeTable :value="nodes" selectionMode="single" v-model:selectionKeys="selectedKey1">
+                <TreeTable v-model:selectionKeys="selectedKey1" :value="nodes" selectionMode="single">
                     <Column field="name" header="Name" :expander="true"></Column>
                     <Column field="size" header="Size"></Column>
                     <Column field="type" header="Type"></Column>
@@ -20,7 +20,7 @@
 
             <div class="card">
                 <h5>Multiple Selection with MetaKey</h5>
-                <TreeTable :value="nodes" selectionMode="multiple" v-model:selectionKeys="selectedKeys1">
+                <TreeTable v-model:selectionKeys="selectedKeys1" :value="nodes" selectionMode="multiple">
                     <Column field="name" header="Name" :expander="true"></Column>
                     <Column field="size" header="Size"></Column>
                     <Column field="type" header="Type"></Column>
@@ -29,7 +29,7 @@
 
             <div class="card">
                 <h5>Multiple Selection without MetaKey</h5>
-                <TreeTable :value="nodes" selectionMode="multiple" v-model:selectionKeys="selectedKeys2" :metaKeySelection="false">
+                <TreeTable v-model:selectionKeys="selectedKeys2" :value="nodes" selectionMode="multiple" :metaKeySelection="false">
                     <Column field="name" header="Name" :expander="true"></Column>
                     <Column field="size" header="Size"></Column>
                     <Column field="type" header="Type"></Column>
@@ -38,7 +38,7 @@
 
             <div class="card">
                 <h5>Checkbox Selection</h5>
-                <TreeTable :value="nodes" selectionMode="checkbox" v-model:selectionKeys="selectedKeys3">
+                <TreeTable v-model:selectionKeys="selectedKeys3" :value="nodes" selectionMode="checkbox">
                     <Column field="name" header="Name" :expander="true"></Column>
                     <Column field="size" header="Size"></Column>
                     <Column field="type" header="Type"></Column>
@@ -47,7 +47,7 @@
 
             <div class="card">
                 <h5>Events</h5>
-                <TreeTable :value="nodes" selectionMode="single" v-model:selectionKeys="selectedKey2" @node-select="onNodeSelect" @node-unselect="onNodeUnselect">
+                <TreeTable v-model:selectionKeys="selectedKey2" :value="nodes" selectionMode="single" @node-select="onNodeSelect" @node-unselect="onNodeUnselect">
                     <Column field="name" header="Name" :expander="true"></Column>
                     <Column field="size" header="Size"></Column>
                     <Column field="type" header="Type"></Column>
@@ -55,9 +55,7 @@
             </div>
         </div>
 
-        <ClientOnly>
-            <AppDoc name="TreeTableSelectionDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" github="treetable/TreeTableSelectionDemo.vue" />
-        </ClientOnly>
+        <AppDoc name="TreeTableSelectionDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" github="treetable/TreeTableSelectionDemo.vue" />
     </div>
 </template>
 
diff --git a/pages/treetable/Size.vue b/pages/treetable/Size.vue
index 01ac62cc5..e07a98867 100644
--- a/pages/treetable/Size.vue
+++ b/pages/treetable/Size.vue
@@ -37,9 +37,7 @@
             </div>
         </div>
 
-        <ClientOnly>
-            <AppDoc name="TreeTableSizeDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" github="treetable/TreeTableSizeDemo.vue" />
-        </ClientOnly>
+        <AppDoc name="TreeTableSizeDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" github="treetable/TreeTableSizeDemo.vue" />
     </div>
 </template>
 
diff --git a/pages/treetable/Sort.vue b/pages/treetable/Sort.vue
index ae1268398..6500cd2ac 100755
--- a/pages/treetable/Sort.vue
+++ b/pages/treetable/Sort.vue
@@ -37,9 +37,7 @@
             </div>
         </div>
 
-        <ClientOnly>
-            <AppDoc name="TreeTableSortDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" github="treetable/TreeTableSortDemo.vue" />
-        </ClientOnly>
+        <AppDoc name="TreeTableSortDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" github="treetable/TreeTableSortDemo.vue" />
     </div>
 </template>
 
diff --git a/pages/treetable/Templating.vue b/pages/treetable/Templating.vue
index 4d01a0c96..b359e75f4 100755
--- a/pages/treetable/Templating.vue
+++ b/pages/treetable/Templating.vue
@@ -33,9 +33,7 @@
             </div>
         </div>
 
-        <ClientOnly>
-            <AppDoc name="TreeTableTemplatingDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" github="treetable/TreeTableTemplatingDemo.vue" />
-        </ClientOnly>
+        <AppDoc name="TreeTableTemplatingDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" github="treetable/TreeTableTemplatingDemo.vue" />
     </div>
 </template>
 
diff --git a/pages/treetable/TreeTableDoc.vue b/pages/treetable/TreeTableDoc.vue
index 397112ed5..cacba3468 100755
--- a/pages/treetable/TreeTableDoc.vue
+++ b/pages/treetable/TreeTableDoc.vue
@@ -1,78 +1,77 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="TreeTableDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" github="treetable/TreeTableDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="TreeTableDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" github="treetable/TreeTableDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import TreeTable from 'primevue/treetable';
 import Column from 'primevue/column';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/treetable/treetable.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/column/column.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p>Tree component requires an array of TreeNode objects as its <i>value</i> and columns defined with Column component.</p>
+        <h5>Getting Started</h5>
+        <p>Tree component requires an array of TreeNode objects as its <i>value</i> and columns defined with Column component.</p>
 
-            <h5>TreeNode API utilized by the TreeTable</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>key</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Mandatory unique key of the node.</td>
-                        </tr>
-                        <tr>
-                            <td>data</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Data represented by the node.</td>
-                        </tr>
-                        <tr>
-                            <td>children</td>
-                            <td>TreeNode[]</td>
-                            <td>null</td>
-                            <td>An array of treenodes as children.</td>
-                        </tr>
-                        <tr>
-                            <td>style</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Inline style of the node.</td>
-                        </tr>
-                        <tr>
-                            <td>styleClass</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the node.</td>
-                        </tr>
-                        <tr>
-                            <td>leaf</td>
-                            <td>boolean</td>
-                            <td>null</td>
-                            <td>Specifies if the node has children. Used in lazy loading.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>TreeNode API utilized by the TreeTable</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>key</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Mandatory unique key of the node.</td>
+                    </tr>
+                    <tr>
+                        <td>data</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Data represented by the node.</td>
+                    </tr>
+                    <tr>
+                        <td>children</td>
+                        <td>TreeNode[]</td>
+                        <td>null</td>
+                        <td>An array of treenodes as children.</td>
+                    </tr>
+                    <tr>
+                        <td>style</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Inline style of the node.</td>
+                    </tr>
+                    <tr>
+                        <td>styleClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the node.</td>
+                    </tr>
+                    <tr>
+                        <td>leaf</td>
+                        <td>boolean</td>
+                        <td>null</td>
+                        <td>Specifies if the node has children. Used in lazy loading.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <p>Example below loads the nodes from a remote datasource via a service called NodeService.</p>
-            <pre v-code><code><template v-pre>
+        <p>Example below loads the nodes from a remote datasource via a service called NodeService.</p>
+        <pre v-code><code><template v-pre>
 &lt;TreeTable :value="nodes"&gt;
     &lt;Column field="name" header="Name" :expander="true"&gt;&lt;/Column&gt;
     &lt;Column field="size" header="Size"&gt;&lt;/Column&gt;
@@ -81,7 +80,7 @@ import Column from 'primevue/column';
 </template>
 </code></pre>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 import NodeService from '../../service/NodeService';
 
 export default {
@@ -101,7 +100,7 @@ export default {
 
 </code></pre>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 export default class NodeService {
 
     getTreeTableNodes() {
@@ -113,10 +112,10 @@ export default class NodeService {
 
 </code></pre>
 
-            <p>The json response sample would be as following.</p>
+        <p>The json response sample would be as following.</p>
 
-            <div style="height: 400px; overflow: auto">
-                <pre v-code.script><code>
+        <div style="height: 400px; overflow: auto">
+            <pre v-code.script><code>
 {
     "root":
     [
@@ -472,12 +471,12 @@ export default class NodeService {
 }
 
 </code></pre>
-            </div>
+        </div>
 
-            <h5>Dynamic Columns</h5>
-            <p>Column components can be dynamically generated using a v-for as well.</p>
+        <h5>Dynamic Columns</h5>
+        <p>Column components can be dynamically generated using a v-for as well.</p>
 
-            <pre v-code><code><template v-pre>
+        <pre v-code><code><template v-pre>
 &lt;TreeTable :value="nodes"&gt;
     &lt;Column v-for="col of columns" :key="col.field"
         :field="col.field" :header="col.header" :expander="col.expander"&gt;&lt;/Column&gt;
@@ -485,7 +484,7 @@ export default class NodeService {
 </template>
 </code></pre>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 import NodeService from '../../service/NodeService';
 
 export default {
@@ -512,138 +511,138 @@ export default {
 
 </code></pre>
 
-            <h5>Column Component Properties utilized by the TreeTable</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>columnKey</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Identifier of a column if field property is not defined.</td>
-                        </tr>
-                        <tr>
-                            <td>expander</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Whether the column would display a toggle icon.</td>
-                        </tr>
-                        <tr>
-                            <td>field</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Property name or a getter function of a row data.</td>
-                        </tr>
-                        <tr>
-                            <td>sortField</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Property name or a getter function of a row data used for sorting, defaults to field.</td>
-                        </tr>
-                        <tr>
-                            <td>sortable</td>
-                            <td>any</td>
-                            <td>false</td>
-                            <td>Defines if a column is sortable.</td>
-                        </tr>
-                        <tr>
-                            <td>header</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Header content of the column.</td>
-                        </tr>
-                        <tr>
-                            <td>footer</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Footer content of the column.</td>
-                        </tr>
-                        <tr>
-                            <td>headerStyle</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Inline style of the column.</td>
-                        </tr>
-                        <tr>
-                            <td>headerClass</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the column.</td>
-                        </tr>
-                        <tr>
-                            <td>bodyStyle</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Inline style of the column.</td>
-                        </tr>
-                        <tr>
-                            <td>bodyClass</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the column.</td>
-                        </tr>
-                        <tr>
-                            <td>footerStyle</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Inline style of the column.</td>
-                        </tr>
-                        <tr>
-                            <td>footerClass</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the column.</td>
-                        </tr>
-                        <tr>
-                            <td>filterHeaderStyle</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Inline style of the column filter header.</td>
-                        </tr>
-                        <tr>
-                            <td>filterHeaderClass</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the column filter header.</td>
-                        </tr>
-                        <tr>
-                            <td>filterMatchMode</td>
-                            <td>string</td>
-                            <td>startsWith</td>
-                            <td>Defines filterMatchMode; "startsWith", "contains", "endsWidth", "equals", "notEquals", "in" and "custom".</td>
-                        </tr>
-                        <tr>
-                            <td>excludeGlobalFilter</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Whether to exclude from global filtering or not.</td>
-                        </tr>
-                        <tr>
-                            <td>hidden</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Whether the column is rendered.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Column Component Properties utilized by the TreeTable</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>columnKey</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Identifier of a column if field property is not defined.</td>
+                    </tr>
+                    <tr>
+                        <td>expander</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Whether the column would display a toggle icon.</td>
+                    </tr>
+                    <tr>
+                        <td>field</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Property name or a getter function of a row data.</td>
+                    </tr>
+                    <tr>
+                        <td>sortField</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Property name or a getter function of a row data used for sorting, defaults to field.</td>
+                    </tr>
+                    <tr>
+                        <td>sortable</td>
+                        <td>any</td>
+                        <td>false</td>
+                        <td>Defines if a column is sortable.</td>
+                    </tr>
+                    <tr>
+                        <td>header</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Header content of the column.</td>
+                    </tr>
+                    <tr>
+                        <td>footer</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Footer content of the column.</td>
+                    </tr>
+                    <tr>
+                        <td>headerStyle</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Inline style of the column.</td>
+                    </tr>
+                    <tr>
+                        <td>headerClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the column.</td>
+                    </tr>
+                    <tr>
+                        <td>bodyStyle</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Inline style of the column.</td>
+                    </tr>
+                    <tr>
+                        <td>bodyClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the column.</td>
+                    </tr>
+                    <tr>
+                        <td>footerStyle</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Inline style of the column.</td>
+                    </tr>
+                    <tr>
+                        <td>footerClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the column.</td>
+                    </tr>
+                    <tr>
+                        <td>filterHeaderStyle</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Inline style of the column filter header.</td>
+                    </tr>
+                    <tr>
+                        <td>filterHeaderClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the column filter header.</td>
+                    </tr>
+                    <tr>
+                        <td>filterMatchMode</td>
+                        <td>string</td>
+                        <td>startsWith</td>
+                        <td>Defines filterMatchMode; "startsWith", "contains", "endsWidth", "equals", "notEquals", "in" and "custom".</td>
+                    </tr>
+                    <tr>
+                        <td>excludeGlobalFilter</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Whether to exclude from global filtering or not.</td>
+                    </tr>
+                    <tr>
+                        <td>hidden</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Whether the column is rendered.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Programmatic Control</h5>
-            <p>
-                Tree state can be controlled programmatically with the <i>expandedKeys</i> property that defines the keys that are expanded. This property is a Map instance whose key is the key of a node and value is a boolean. Note that
-                <i>expandedKeys</i> also supports two-way binding with the v-model directive.
-            </p>
+        <h5>Programmatic Control</h5>
+        <p>
+            Tree state can be controlled programmatically with the <i>expandedKeys</i> property that defines the keys that are expanded. This property is a Map instance whose key is the key of a node and value is a boolean. Note that
+            <i>expandedKeys</i> also supports two-way binding with the v-model directive.
+        </p>
 
-            <p>Example below expands and collapses all nodes with buttons.</p>
-            <pre v-code><code><template v-pre>
+        <p>Example below expands and collapses all nodes with buttons.</p>
+        <pre v-code><code><template v-pre>
 &lt;div style="margin-bottom: 1em"&gt;
     &lt;Button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll" /&gt;
     &lt;Button type="button" icon="pi pi-minus" label="Collapse All" @click="collapseAll" /&gt;
@@ -656,7 +655,7 @@ export default {
 </template>
 </code></pre>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 import NodeService from '../../service/NodeService';
 
 export default {
@@ -698,8 +697,8 @@ export default {
 
 </code></pre>
 
-            <p>To display some nodes as expanded by default, simply add their keys to the map.</p>
-            <pre v-code.script><code>
+        <p>To display some nodes as expanded by default, simply add their keys to the map.</p>
+        <pre v-code.script><code>
 import NodeService from '../../service/NodeService';
 
 export default {
@@ -724,14 +723,14 @@ export default {
 
 </code></pre>
 
-            <h5>Templating</h5>
-            <p>
-                Field data of a corresponding node is displayed as the cell content by default, this can be customized using a <i>body</i> template where current node data and column properties are passed via the slot props. On the other hand,
-                <i>header</i> and <i>footer</i> sections of a column can either be defined with the properties or the templates. Similarly TreeTable itself also provides header and footer properties along with the templates for the main header and
-                footer of the table.
-            </p>
+        <h5>Templating</h5>
+        <p>
+            Field data of a corresponding node is displayed as the cell content by default, this can be customized using a <i>body</i> template where current node data and column properties are passed via the slot props. On the other hand,
+            <i>header</i> and <i>footer</i> sections of a column can either be defined with the properties or the templates. Similarly TreeTable itself also provides header and footer properties along with the templates for the main header and footer
+            of the table.
+        </p>
 
-            <pre v-code><code><template v-pre>
+        <pre v-code><code><template v-pre>
 &lt;TreeTable :value="nodes"&gt;
     &lt;template #header&gt;
         FileSystem
@@ -757,10 +756,10 @@ export default {
 </template>
 </code></pre>
 
-            <h5>Sizes</h5>
-            <p>In addition to the regular table, a smal and a large version are available with different paddings. For a table with smaller paddings use <i>p-treetable-sm</i> class and for a larger one use <i>p-treetable-lg</i>.</p>
+        <h5>Sizes</h5>
+        <p>In addition to the regular table, a smal and a large version are available with different paddings. For a table with smaller paddings use <i>p-treetable-sm</i> class and for a larger one use <i>p-treetable-lg</i>.</p>
 
-            <pre v-code><code><template v-pre>
+        <pre v-code><code><template v-pre>
 &lt;TreeTable :value="nodes" class="p-treetable-sm"&gt;
     &lt;template #header&gt;
         Small Table
@@ -790,13 +789,13 @@ export default {
 </template>
 </code></pre>
 
-            <h5>Pagination</h5>
-            <p>
-                Pagination is enabled by setting <i>paginator</i> property to true and defining the <i>rows</i> property defines the number of rows per page. See the <nuxt-link to="/paginator">Paginator</nuxt-link> for the available customization
-                options such as paginator templates, page links, rows per page options and more which can be passed through the TreeTable.
-            </p>
+        <h5>Pagination</h5>
+        <p>
+            Pagination is enabled by setting <i>paginator</i> property to true and defining the <i>rows</i> property defines the number of rows per page. See the <router-link to="/paginator">Paginator</router-link> for the available customization
+            options such as paginator templates, page links, rows per page options and more which can be passed through the TreeTable.
+        </p>
 
-            <pre v-code><code><template v-pre>
+        <pre v-code><code><template v-pre>
 &lt;TreeTable :value="nodes" :paginator="true" :rows="10"&gt;
     &lt;Column field="name" header="Name" :expander="true"&gt;&lt;/Column&gt;
     &lt;Column field="size" header="Size"&gt;&lt;/Column&gt;
@@ -805,8 +804,8 @@ export default {
 </template>
 </code></pre>
 
-            <p><i>paginatorstart</i> and <i>paginatorend</i> templates are available to specify custom content at the left and right side.</p>
-            <pre v-code><code><template v-pre>
+        <p><i>paginatorstart</i> and <i>paginatorend</i> templates are available to specify custom content at the left and right side.</p>
+        <pre v-code><code><template v-pre>
 &lt;TreeTable :value="nodes" :paginator="true" :rows="10"&gt;
     &lt;Column field="name" header="Name" :expander="true"&gt;&lt;/Column&gt;
     &lt;Column field="size" header="Size"&gt;&lt;/Column&gt;
@@ -821,11 +820,11 @@ export default {
 </template>
 </code></pre>
 
-            <p>
-                Paginator can also be programmed programmatically using a binding to the <i>first</i> property that defines the index of the first element to display. For example setting first to zero will reset the paginator to the very first page.
-                This property also supports the v-model directive in case you'd like your binding to be updated whenever the user changes the page.
-            </p>
-            <pre v-code><code><template v-pre>
+        <p>
+            Paginator can also be programmed programmatically using a binding to the <i>first</i> property that defines the index of the first element to display. For example setting first to zero will reset the paginator to the very first page. This
+            property also supports the v-model directive in case you'd like your binding to be updated whenever the user changes the page.
+        </p>
+        <pre v-code><code><template v-pre>
 &lt;TreeTable :value="nodes" :paginator="true" :rows="10" :first="firstRecordIndex"&gt;
     &lt;Column field="name" header="Name" :expander="true"&gt;&lt;/Column&gt;
     &lt;Column field="size" header="Size"&gt;&lt;/Column&gt;
@@ -834,10 +833,10 @@ export default {
 </template>
 </code></pre>
 
-            <h5>Sorting</h5>
-            <p>Enabling <i>sortable</i> property at column component would be enough to make a column sortable. The property to use when sorting is the <i>field</i> by default and can be customized using the <i>sortField</i>.</p>
+        <h5>Sorting</h5>
+        <p>Enabling <i>sortable</i> property at column component would be enough to make a column sortable. The property to use when sorting is the <i>field</i> by default and can be customized using the <i>sortField</i>.</p>
 
-            <pre v-code><code><template v-pre>
+        <pre v-code><code><template v-pre>
 &lt;TreeTable :value="nodes" sortMode="single"&gt;
     &lt;Column field="name" header="Name" :expander="true" :sortable="true"&gt;&lt;/Column&gt;
     &lt;Column field="size" header="Size" :sortable="true"&gt;&lt;/Column&gt;
@@ -846,8 +845,8 @@ export default {
 </template>
 </code></pre>
 
-            <p>By default sorting is executed on the clicked column only. To enable multiple field sorting, set <i>sortMode</i> property to "multiple" and use metakey when clicking on another column.</p>
-            <pre v-code><code><template v-pre>
+        <p>By default sorting is executed on the clicked column only. To enable multiple field sorting, set <i>sortMode</i> property to "multiple" and use metakey when clicking on another column.</p>
+        <pre v-code><code><template v-pre>
 &lt;TreeTable :value="nodes" sortMode="multiple"&gt;
     &lt;Column field="name" header="Name" :expander="true" :sortable="true"&gt;&lt;/Column&gt;
     &lt;Column field="size" header="Size" :sortable="true"&gt;&lt;/Column&gt;
@@ -856,11 +855,11 @@ export default {
 </template>
 </code></pre>
 
-            <p>
-                In case you'd like to display the table as sorted per a single column by default on mount or programmatically apply sort, use <i>sortField</i> and <i>sortOrder</i> properties. These two properties also support the v-model directive to
-                get updated when the user applies sort a column.
-            </p>
-            <pre v-code><code><template v-pre>
+        <p>
+            In case you'd like to display the table as sorted per a single column by default on mount or programmatically apply sort, use <i>sortField</i> and <i>sortOrder</i> properties. These two properties also support the v-model directive to get
+            updated when the user applies sort a column.
+        </p>
+        <pre v-code><code><template v-pre>
 &lt;TreeTable :value="nodes" sortField="size" :sortOrder="1""&gt;
     &lt;Column field="name" header="Name" :expander="true" :sortable="true"&gt;&lt;/Column&gt;
     &lt;Column field="size" header="Size" :sortable="true"&gt;&lt;/Column&gt;
@@ -875,8 +874,8 @@ export default {
 </template>
 </code></pre>
 
-            <p>In multiple mode, use the <i>multiSortMeta</i> property and bind an array of SortMeta objects instead.</p>
-            <pre v-code><code><template v-pre>
+        <p>In multiple mode, use the <i>multiSortMeta</i> property and bind an array of SortMeta objects instead.</p>
+        <pre v-code><code><template v-pre>
 &lt;TreeTable :value="nodes" sortMode="multiple" :multiSortMeta="multiSortMeta"&gt;
     &lt;Column field="name" header="Name" :expander="true" :sortable="true"&gt;&lt;/Column&gt;
     &lt;Column field="size" header="Size" :sortable="true"&gt;&lt;/Column&gt;
@@ -885,7 +884,7 @@ export default {
 </template>
 </code></pre>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 data() {
     return {
         multiSortMeta: [
@@ -897,19 +896,19 @@ data() {
 
 </code></pre>
 
-            <h5>Filtering</h5>
-            <p>
-                Filtering is enabled by defining a filter template per column to populate the <i>filters</i> property of the TreeTable. The <i>filters</i> property should be an key-value object where keys are the field name and the value is the
-                filter value. The filter template receives the column properties via the slotProps and accepts any form element as the filter element. Default match mode is "startsWith" and this can be configured per column using the
-                <i>filterMatchMode</i> property that also accepts "contains", "endsWith", "equals", "notEquals" and "in" as available modes.
-            </p>
-            <p>Optionally a global filter is available to search against all the fields, in this case the special <i>global</i> keyword should be the property to be populated.</p>
+        <h5>Filtering</h5>
+        <p>
+            Filtering is enabled by defining a filter template per column to populate the <i>filters</i> property of the TreeTable. The <i>filters</i> property should be an key-value object where keys are the field name and the value is the filter
+            value. The filter template receives the column properties via the slotProps and accepts any form element as the filter element. Default match mode is "startsWith" and this can be configured per column using the
+            <i>filterMatchMode</i> property that also accepts "contains", "endsWith", "equals", "notEquals" and "in" as available modes.
+        </p>
+        <p>Optionally a global filter is available to search against all the fields, in this case the special <i>global</i> keyword should be the property to be populated.</p>
 
-            <p>
-                In addition <i>filterMode</i> specifies the filtering strategy. In <b>lenient</b> mode when the query matches a node, children of the node are not searched further as all descendants of the node are included. On the other hand, in
-                <b>strict</b> mode when the query matches a node, filtering continues on all descendants.
-            </p>
-            <pre v-code><code><template v-pre>
+        <p>
+            In addition <i>filterMode</i> specifies the filtering strategy. In <b>lenient</b> mode when the query matches a node, children of the node are not searched further as all descendants of the node are included. On the other hand, in
+            <b>strict</b> mode when the query matches a node, filtering continues on all descendants.
+        </p>
+        <pre v-code><code><template v-pre>
 &lt;TreeTable :value="nodes" :filters="filters" filterMode="lenient"&gt;
     &lt;template #header&gt;
         &lt;div style="text-align: right"&gt;
@@ -936,7 +935,7 @@ data() {
 </template>
 </code></pre>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 import NodeService from '../../service/NodeService';
 
 export default {
@@ -957,18 +956,18 @@ export default {
 
 </code></pre>
 
-            <h5>Selection</h5>
-            <p>
-                Tree supports <b>single</b>, <b>multiple</b> and <b>checkbox</b> selection modes. Define the <i>selectionKeys</i> with the v-model operator and the <i>selectionMode</i> properties to enable the selection. By default in multiple
-                selection mode, metaKey is necessary to add to existing selections however this can be configured with <i>metaKeySelection</i> property. Note that in touch enabled devices, Tree does not require metaKey. In addition selection on a
-                particular node can be disabled if the <i>selectable</i> is false on the node instance.
-            </p>
+        <h5>Selection</h5>
+        <p>
+            Tree supports <b>single</b>, <b>multiple</b> and <b>checkbox</b> selection modes. Define the <i>selectionKeys</i> with the v-model operator and the <i>selectionMode</i> properties to enable the selection. By default in multiple selection
+            mode, metaKey is necessary to add to existing selections however this can be configured with <i>metaKeySelection</i> property. Note that in touch enabled devices, Tree does not require metaKey. In addition selection on a particular node
+            can be disabled if the <i>selectable</i> is false on the node instance.
+        </p>
 
-            <p>
-                Similarly to the <i>expandedKeys</i>, <i>selectionKeys</i> is a Map instance whose key is the key of a node and value is a boolean in "single" and "multiple" cases. On the other hand in "checkbox" mode, instead of a boolean, value
-                should be an object that has "checked" and "partialChecked" properties to represent the checked state of a node.
-            </p>
-            <pre v-code><code><template v-pre>
+        <p>
+            Similarly to the <i>expandedKeys</i>, <i>selectionKeys</i> is a Map instance whose key is the key of a node and value is a boolean in "single" and "multiple" cases. On the other hand in "checkbox" mode, instead of a boolean, value should
+            be an object that has "checked" and "partialChecked" properties to represent the checked state of a node.
+        </p>
+        <pre v-code><code><template v-pre>
 &lt;TreeTable :value="nodes" selectionMode="multiple" v-model:selectionKeys="selectedKeys1"&gt;
     &lt;Column field="name" header="Name" :expander="true"&gt;&lt;/Column&gt;
     &lt;Column field="size" header="Size"&gt;&lt;/Column&gt;
@@ -999,7 +998,7 @@ export default {
 </template>
 </code></pre>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 import NodeService from '../../service/NodeService';
 
 export default {
@@ -1032,8 +1031,8 @@ export default {
 
 </code></pre>
 
-            <p>To display some nodes as selected by default, simply add their keys to the map.</p>
-            <pre v-code.script><code>
+        <p>To display some nodes as selected by default, simply add their keys to the map.</p>
+        <pre v-code.script><code>
 import NodeService from '../../service/NodeService';
 
 export default {
@@ -1070,9 +1069,9 @@ export default {
 
 </code></pre>
 
-            <h5>Scrolling</h5>
-            <p>TreeTable supports both horizontal and vertical scrolling with support for frozen columns. Scrollable TreeTable is enabled using <i>scrollable</i> property and <i>scrollHeight</i> to define the viewport height.</p>
-            <pre v-code><code><template v-pre>
+        <h5>Scrolling</h5>
+        <p>TreeTable supports both horizontal and vertical scrolling with support for frozen columns. Scrollable TreeTable is enabled using <i>scrollable</i> property and <i>scrollHeight</i> to define the viewport height.</p>
+        <pre v-code><code><template v-pre>
 &lt;TreeTable :value="nodes" style="margin-bottom: 2rem" :scrollable="true" scrollHeight="400px"&gt;
     &lt;Column field="name" header="Name" :expander="true" style="min-width:200px"&gt;&lt;/Column&gt;
     &lt;Column field="size" header="Size" style="min-width:200px"&gt;&lt;/Column&gt;
@@ -1081,25 +1080,25 @@ export default {
 </template>
 </code></pre>
 
-            <h5>Column Widths of a Scrollable TreeTable</h5>
-            <p>Scrollable treetable uses flex layout so there are a couple of rules to consider when adjusting the widths of columns.</p>
-            <ul>
-                <li>Use <i>min-width</i> in vertical scrolling only so that when there is enough space columns may grow and for smaller screens a horizontal scrollbar is displayed to provide responsive design.</li>
-                <li>When horizontal scrolling is enabled, prefer <i>width</i> instead of <i>min-width</i>.</li>
-                <li>In vertical scrolling only, use <i>flex</i> to disable grow and shrink while defining a initial width. When horizontal scrolling is enabled, this is not required as columns do not grow or shrink in horizontal scrolling.</li>
-            </ul>
+        <h5>Column Widths of a Scrollable TreeTable</h5>
+        <p>Scrollable treetable uses flex layout so there are a couple of rules to consider when adjusting the widths of columns.</p>
+        <ul>
+            <li>Use <i>min-width</i> in vertical scrolling only so that when there is enough space columns may grow and for smaller screens a horizontal scrollbar is displayed to provide responsive design.</li>
+            <li>When horizontal scrolling is enabled, prefer <i>width</i> instead of <i>min-width</i>.</li>
+            <li>In vertical scrolling only, use <i>flex</i> to disable grow and shrink while defining a initial width. When horizontal scrolling is enabled, this is not required as columns do not grow or shrink in horizontal scrolling.</li>
+        </ul>
 
-            <pre v-code><code><template v-pre>
+        <pre v-code><code><template v-pre>
 &lt;Column field="vin" header="Vin" style="flex: 0 0 4rem"&gt;&lt;/Column&gt;
 </template>
 </code></pre>
 
-            <h6>Flex Scroll</h6>
-            <p>
-                In cases where viewport should adjust itself according to the table parent's height instead of a fixed viewport height, set scrollHeight option as flex. In example below, table is inside a Dialog where viewport size dynamically
-                responds to the dialog size changes such as maximizing. FlexScroll can also be used for cases where scrollable viewport should be responsive with respect to the window size for full page scroll.
-            </p>
-            <pre v-code><code><template v-pre>
+        <h6>Flex Scroll</h6>
+        <p>
+            In cases where viewport should adjust itself according to the table parent's height instead of a fixed viewport height, set scrollHeight option as flex. In example below, table is inside a Dialog where viewport size dynamically responds
+            to the dialog size changes such as maximizing. FlexScroll can also be used for cases where scrollable viewport should be responsive with respect to the window size for full page scroll.
+        </p>
+        <pre v-code><code><template v-pre>
 &lt;Button label="Show" icon="pi pi-external-link" @click="openDialog" /&gt;
 &lt;Dialog header="Flex Scroll" v-model:visible="dialogVisible" :style="{width: '50vw'}" :maximizable="true" :modal="true" :contentStyle="{height: '300px'}"&gt;
     &lt;TreeTable :value="nodes" :scrollable="true" scrollHeight="flex"&gt;
@@ -1115,9 +1114,9 @@ export default {
 </template>
 </code></pre>
 
-            <h6>Horizontal Scrolling</h6>
-            <p>For horizontal scrolling, it is required to set <i>scrollDirection</i> to "horizontal" and give fixed widths to columns.</p>
-            <pre v-code><code><template v-pre>
+        <h6>Horizontal Scrolling</h6>
+        <p>For horizontal scrolling, it is required to set <i>scrollDirection</i> to "horizontal" and give fixed widths to columns.</p>
+        <pre v-code><code><template v-pre>
 &lt;TreeTable :value="nodes" :scrollable="true" scrollDirection="horizontal"&gt;
     &lt;Column field="name" header="Name" :expander="true" style="width:200px"&gt;&lt;/Column&gt;
     &lt;Column field="size" header="Size" style="width:200px"&gt;&lt;/Column&gt;
@@ -1126,9 +1125,9 @@ export default {
 </template>
 </code></pre>
 
-            <h6>Horizontal and Vertical Scrolling</h6>
-            <p>Set <i>scrollDirection</i> to "both" and give fixed widths to columns to scroll both ways.</p>
-            <pre v-code><code><template v-pre>
+        <h6>Horizontal and Vertical Scrolling</h6>
+        <p>Set <i>scrollDirection</i> to "both" and give fixed widths to columns to scroll both ways.</p>
+        <pre v-code><code><template v-pre>
 &lt;TreeTable :value="customers" :scrollable="true" scrollHeight="400px" scrollDirection="both"&gt;
     &lt;Column field="name" header="Name" :expander="true" style="width:200px"&gt;&lt;/Column&gt;
     &lt;Column field="size" header="Size" style="width:200px"&gt;&lt;/Column&gt;
@@ -1137,10 +1136,10 @@ export default {
 </template>
 </code></pre>
 
-            <h6>Frozen Columns</h6>
-            <p>Certain columns can be frozen by using the <i>frozen</i> property of the column component. In addition <i>alignFrozen</i> is available to define whether the column should be fixed on the left or right.</p>
+        <h6>Frozen Columns</h6>
+        <p>Certain columns can be frozen by using the <i>frozen</i> property of the column component. In addition <i>alignFrozen</i> is available to define whether the column should be fixed on the left or right.</p>
 
-            <pre v-code><code><template v-pre>
+        <pre v-code><code><template v-pre>
 &lt;TreeTable :value="customers" :scrollable="true" scrollHeight="400px" scrollDirection="both"&gt;
     &lt;Column field="name" header="Name" :expander="true" style="width:200px" frozen&gt;&lt;/Column&gt;
     &lt;Column field="size" header="Size" style="width:200px"&gt;&lt;/Column&gt;
@@ -1149,22 +1148,22 @@ export default {
 </template>
 </code></pre>
 
-            <h5>Lazy</h5>
-            <p>
-                Lazy Loading is handy to deal with huge datasets. Idea is instead of loading the whole tree, load nodes on demand when necessary. The important part when lazy loading nodes is setting <i>leaf</i> to true on a node instance so that
-                even without children, tree would render an expand icon. Example below uses an in memory collection to mimic a lazy loading scenario with timeouts.
-            </p>
+        <h5>Lazy</h5>
+        <p>
+            Lazy Loading is handy to deal with huge datasets. Idea is instead of loading the whole tree, load nodes on demand when necessary. The important part when lazy loading nodes is setting <i>leaf</i> to true on a node instance so that even
+            without children, tree would render an expand icon. Example below uses an in memory collection to mimic a lazy loading scenario with timeouts.
+        </p>
 
-            <p>
-                In addition lazy loading of root level nodes is implemented by handling pagination and sorting using <i>page</i> and <i>sort</i> events by making a remote query using the information passed to the events such as first offset, number
-                of rows and sort field for ordering. Filtering is handled differently as filter elements are defined using templates, use the event you prefer on your form elements such as input, change, blur to make a remote call by passing the
-                filters property to update the displayed data. Note that, in lazy filtering, totalRecords should also be updated to align the data with the paginator.
-            </p>
-            .
+        <p>
+            In addition lazy loading of root level nodes is implemented by handling pagination and sorting using <i>page</i> and <i>sort</i> events by making a remote query using the information passed to the events such as first offset, number of
+            rows and sort field for ordering. Filtering is handled differently as filter elements are defined using templates, use the event you prefer on your form elements such as input, change, blur to make a remote call by passing the filters
+            property to update the displayed data. Note that, in lazy filtering, totalRecords should also be updated to align the data with the paginator.
+        </p>
+        .
 
-            <p>Example below uses an in memory collection to mimic a lazy loading scenario with timeouts.</p>
+        <p>Example below uses an in memory collection to mimic a lazy loading scenario with timeouts.</p>
 
-            <pre v-code><code><template v-pre>
+        <pre v-code><code><template v-pre>
 &lt;TreeTable :value="nodes" :lazy="true" :paginator="true" :rows="rows" :loading="loading"
     @node-expand="onExpand" @page="onPage" :totalRecords="totalRecords"&gt;
     &lt;Column field="name" header="Name" :expander="true"&gt;&lt;/Column&gt;
@@ -1174,7 +1173,7 @@ export default {
 </template>
 </code></pre>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 export default {
     data() {
         return {
@@ -1264,12 +1263,12 @@ export default {
 
 </code></pre>
 
-            <h5>Column Resize</h5>
-            <p>
-                Columns can be resized using drag drop by setting the <i>resizableColumns</i> to true. There are two resize modes; "fit" and "expand". Fit is the default one and the overall table width does not change when a column is resized. In
-                "expand" mode, table width also changes along with the column width. <i>column-resize-end</i> is a callback that passes the resized column header and delta change as a parameter.
-            </p>
-            <pre v-code><code><template v-pre>
+        <h5>Column Resize</h5>
+        <p>
+            Columns can be resized using drag drop by setting the <i>resizableColumns</i> to true. There are two resize modes; "fit" and "expand". Fit is the default one and the overall table width does not change when a column is resized. In
+            "expand" mode, table width also changes along with the column width. <i>column-resize-end</i> is a callback that passes the resized column header and delta change as a parameter.
+        </p>
+        <pre v-code><code><template v-pre>
 &lt;h3&gt;Fit Mode&lt;/h3&gt;
 &lt;TreeTable :value="nodes" :resizableColumns="true" columnResizeMode="fit"&gt;
     &lt;Column field="name" header="Name" :expander="true"&gt;&lt;/Column&gt;
@@ -1286,8 +1285,8 @@ export default {
 </template>
 </code></pre>
 
-            <p>It is important to note that when you need to change column widths, since table width is 100%, giving fixed pixel widths does not work well as browsers scale them, instead give percentage widths.</p>
-            <pre v-code><code><template v-pre>
+        <p>It is important to note that when you need to change column widths, since table width is 100%, giving fixed pixel widths does not work well as browsers scale them, instead give percentage widths.</p>
+        <pre v-code><code><template v-pre>
 &lt;TreeTable :value="nodes" :resizableColumns="true"&gt;
     &lt;Column field="name" header="Name" :expander="true"&gt;&lt;/Column headerStyle="width: 20%"&gt;
     &lt;Column field="size" header="Size" headerStyle="width: 40%"&gt;&lt;/Column&gt;
@@ -1296,9 +1295,9 @@ export default {
 </template>
 </code></pre>
 
-            <h5>Responsive</h5>
-            <p>TreeTable display can be optimized according to screen sizes using the built-in <i>responsiveLayout</i> property. Currently only available option is "scroll" that displays a horizontal scrollbar for small devices.</p>
-            <pre v-code><code><template v-pre>
+        <h5>Responsive</h5>
+        <p>TreeTable display can be optimized according to screen sizes using the built-in <i>responsiveLayout</i> property. Currently only available option is "scroll" that displays a horizontal scrollbar for small devices.</p>
+        <pre v-code><code><template v-pre>
 &lt;TreeTable :value="nodes" responsiveLayout="scroll"&gt;
     &lt;Column field="name" header="Name" :expander="true" style="min-width:200px"&gt;&lt;/Column&gt;
     &lt;Column field="size" header="Size" style="min-width:200px"&gt;&lt;/Column&gt;
@@ -1307,451 +1306,582 @@ export default {
 </template>
 </code></pre>
 
-            <h5>Properties</h5>
-            <p>Any property such as style and class are passed to the underlying root element. Following is the additional property to configure the component.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>value</td>
-                            <td>array</td>
-                            <td>null</td>
-                            <td>An array of treenodes.</td>
-                        </tr>
-                        <tr>
-                            <td>expandedKeys</td>
-                            <td>array</td>
-                            <td>null</td>
-                            <td>A map of keys to represent the state of the tree expansion state in controlled mode.</td>
-                        </tr>
-                        <tr>
-                            <td>selectionKeys</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>A map of keys to control the selection state.</td>
-                        </tr>
-                        <tr>
-                            <td>selectionMode</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Defines the selection mode, valid values "single", "multiple", and "checkbox".</td>
-                        </tr>
-                        <tr>
-                            <td>metaKeySelection</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>
-                                Defines how multiple items can be selected, when true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item can be toggled individually. On touch enabled devices,
-                                metaKeySelection is turned off automatically.
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>rows</td>
-                            <td>number</td>
-                            <td>null</td>
-                            <td>Number of rows to display per page.</td>
-                        </tr>
-                        <tr>
-                            <td>first</td>
-                            <td>number</td>
-                            <td>0</td>
-                            <td>Index of the first row to be displayed.</td>
-                        </tr>
-                        <tr>
-                            <td>totalRecords</td>
-                            <td>number</td>
-                            <td>null</td>
-                            <td>Number of total records, defaults to length of value when not defined.</td>
-                        </tr>
-                        <tr>
-                            <td>paginator</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When specified as true, enables the pagination.</td>
-                        </tr>
-                        <tr>
-                            <td>paginatorPosition</td>
-                            <td>string</td>
-                            <td>bottom</td>
-                            <td>Position of the paginator, options are "top","bottom" or "both".</td>
-                        </tr>
-                        <tr>
-                            <td>alwaysShowPaginator</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether to show it even there is only one page.</td>
-                        </tr>
-                        <tr>
-                            <td>paginatorTemplate</td>
-                            <td>string</td>
-                            <td>
-                                FirstPageLink PrevPageLink PageLinks <br />
-                                NextPageLink LastPageLink RowsPerPageDropdown
-                            </td>
-                            <td>Template of the paginator. See the <nuxt-link to="/paginator">Paginator</nuxt-link> for all available options.</td>
-                        </tr>
-                        <tr>
-                            <td>pageLinkSize</td>
-                            <td>number</td>
-                            <td>5</td>
-                            <td>Number of page links to display.</td>
-                        </tr>
-                        <tr>
-                            <td>rowsPerPageOptions</td>
-                            <td>array</td>
-                            <td>null</td>
-                            <td>Array of integer values to display inside rows per page dropdown.</td>
-                        </tr>
-                        <tr>
-                            <td>currentPageReportTemplate</td>
-                            <td>string</td>
-                            <td>(&#123;currentPage&#125; of &#123;totalPages&#125;)</td>
-                            <td>Template of the current page report element.</td>
-                        </tr>
-                        <tr>
-                            <td>lazy</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Defines if data is loaded and interacted with in lazy manner.</td>
-                        </tr>
-                        <tr>
-                            <td>loading</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Displays a loader to indicate data load is in progress.</td>
-                        </tr>
-                        <tr>
-                            <td>loadingIcon</td>
-                            <td>string</td>
-                            <td>pi pi-spinner</td>
-                            <td>The icon to show while indicating data load is in progress.</td>
-                        </tr>
-                        <tr>
-                            <td>rowHover</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When enabled, background of the rows change on hover.</td>
-                        </tr>
-                        <tr>
-                            <td>autoLayout</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Whether the cell widths scale according to their content or not.</td>
-                        </tr>
-                        <tr>
-                            <td>sortField</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Property name or a getter function of a row data used for sorting by default.</td>
-                        </tr>
-                        <tr>
-                            <td>sortOrder</td>
-                            <td>number</td>
-                            <td>null</td>
-                            <td>Order to sort the data by default.</td>
-                        </tr>
-                        <tr>
-                            <td>defaultSortOrder</td>
-                            <td>number</td>
-                            <td>1</td>
-                            <td>Default sort order of an unsorted column.</td>
-                        </tr>
-                        <tr>
-                            <td>multiSortMeta</td>
-                            <td>array</td>
-                            <td>null</td>
-                            <td>An array of SortMeta objects to sort the data by default in multiple sort mode.</td>
-                        </tr>
-                        <tr>
-                            <td>sortMode</td>
-                            <td>string</td>
-                            <td>single</td>
-                            <td>Defines whether sorting works on single column or on multiple columns.</td>
-                        </tr>
-                        <tr>
-                            <td>removableSort</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When enabled, columns can have an un-sorted state.</td>
-                        </tr>
-                        <tr>
-                            <td>filters</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Filters object with key-value pairs to define the filters.</td>
-                        </tr>
-                        <tr>
-                            <td>filterMode</td>
-                            <td>string</td>
-                            <td>lenient</td>
-                            <td>Mode for filtering valid values are "lenient" and "strict". Default is lenient.</td>
-                        </tr>
-                        <tr>
-                            <td>filterLocale</td>
-                            <td>string</td>
-                            <td>undefined</td>
-                            <td>Locale to use in filtering. The default locale is the host environment's current locale.</td>
-                        </tr>
-                        <tr>
-                            <td>resizableColumns</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When enabled, columns can be resized using drag and drop.</td>
-                        </tr>
-                        <tr>
-                            <td>columnResizeMode</td>
-                            <td>string</td>
-                            <td>fit</td>
-                            <td>
-                                Defines whether the overall table width should change on column resize, <br />
-                                valid values are "fit" and "expand".
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>indentation</td>
-                            <td>number</td>
-                            <td>1</td>
-                            <td>Indentation factor as rem value for children nodes. Defaults to 1rem.</td>
-                        </tr>
-                        <tr>
-                            <td>showGridlines</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Whether to show grid lines between cells.</td>
-                        </tr>
-                        <tr>
-                            <td>scrollable</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When specified, enables horizontal and/or vertical scrolling.</td>
-                        </tr>
-                        <tr>
-                            <td>scrollDirection</td>
-                            <td>string</td>
-                            <td>vertical</td>
-                            <td>Orientation of the scrolling, options are "vertical", "horizontal" and "both".</td>
-                        </tr>
-                        <tr>
-                            <td>scrollHeight</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Height of the scroll viewport in fixed pixels or the "flex" keyword for a dynamic size.</td>
-                        </tr>
-                        <tr>
-                            <td>responsiveLayout</td>
-                            <td>string</td>
-                            <td>stack</td>
-                            <td>Defines the responsive mode, currently only option is scroll..</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <p>Any property such as style and class are passed to the underlying root element. Following is the additional property to configure the component.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>value</td>
+                        <td>array</td>
+                        <td>null</td>
+                        <td>An array of treenodes.</td>
+                    </tr>
+                    <tr>
+                        <td>expandedKeys</td>
+                        <td>array</td>
+                        <td>null</td>
+                        <td>A map of keys to represent the state of the tree expansion state in controlled mode.</td>
+                    </tr>
+                    <tr>
+                        <td>selectionKeys</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>A map of keys to control the selection state.</td>
+                    </tr>
+                    <tr>
+                        <td>selectionMode</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Defines the selection mode, valid values "single", "multiple", and "checkbox".</td>
+                    </tr>
+                    <tr>
+                        <td>metaKeySelection</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>
+                            Defines how multiple items can be selected, when true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item can be toggled individually. On touch enabled devices,
+                            metaKeySelection is turned off automatically.
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>rows</td>
+                        <td>number</td>
+                        <td>null</td>
+                        <td>Number of rows to display per page.</td>
+                    </tr>
+                    <tr>
+                        <td>first</td>
+                        <td>number</td>
+                        <td>0</td>
+                        <td>Index of the first row to be displayed.</td>
+                    </tr>
+                    <tr>
+                        <td>totalRecords</td>
+                        <td>number</td>
+                        <td>null</td>
+                        <td>Number of total records, defaults to length of value when not defined.</td>
+                    </tr>
+                    <tr>
+                        <td>paginator</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When specified as true, enables the pagination.</td>
+                    </tr>
+                    <tr>
+                        <td>paginatorPosition</td>
+                        <td>string</td>
+                        <td>bottom</td>
+                        <td>Position of the paginator, options are "top","bottom" or "both".</td>
+                    </tr>
+                    <tr>
+                        <td>alwaysShowPaginator</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Whether to show it even there is only one page.</td>
+                    </tr>
+                    <tr>
+                        <td>paginatorTemplate</td>
+                        <td>string</td>
+                        <td>
+                            FirstPageLink PrevPageLink PageLinks <br />
+                            NextPageLink LastPageLink RowsPerPageDropdown
+                        </td>
+                        <td>Template of the paginator. See the <router-link to="/paginator">Paginator</router-link> for all available options.</td>
+                    </tr>
+                    <tr>
+                        <td>pageLinkSize</td>
+                        <td>number</td>
+                        <td>5</td>
+                        <td>Number of page links to display.</td>
+                    </tr>
+                    <tr>
+                        <td>rowsPerPageOptions</td>
+                        <td>array</td>
+                        <td>null</td>
+                        <td>Array of integer values to display inside rows per page dropdown.</td>
+                    </tr>
+                    <tr>
+                        <td>currentPageReportTemplate</td>
+                        <td>string</td>
+                        <td>(&#123;currentPage&#125; of &#123;totalPages&#125;)</td>
+                        <td>Template of the current page report element.</td>
+                    </tr>
+                    <tr>
+                        <td>lazy</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Defines if data is loaded and interacted with in lazy manner.</td>
+                    </tr>
+                    <tr>
+                        <td>loading</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Displays a loader to indicate data load is in progress.</td>
+                    </tr>
+                    <tr>
+                        <td>loadingIcon</td>
+                        <td>string</td>
+                        <td>pi pi-spinner</td>
+                        <td>The icon to show while indicating data load is in progress.</td>
+                    </tr>
+                    <tr>
+                        <td>rowHover</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When enabled, background of the rows change on hover.</td>
+                    </tr>
+                    <tr>
+                        <td>autoLayout</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Whether the cell widths scale according to their content or not.</td>
+                    </tr>
+                    <tr>
+                        <td>sortField</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Property name or a getter function of a row data used for sorting by default.</td>
+                    </tr>
+                    <tr>
+                        <td>sortOrder</td>
+                        <td>number</td>
+                        <td>null</td>
+                        <td>Order to sort the data by default.</td>
+                    </tr>
+                    <tr>
+                        <td>defaultSortOrder</td>
+                        <td>number</td>
+                        <td>1</td>
+                        <td>Default sort order of an unsorted column.</td>
+                    </tr>
+                    <tr>
+                        <td>multiSortMeta</td>
+                        <td>array</td>
+                        <td>null</td>
+                        <td>An array of SortMeta objects to sort the data by default in multiple sort mode.</td>
+                    </tr>
+                    <tr>
+                        <td>sortMode</td>
+                        <td>string</td>
+                        <td>single</td>
+                        <td>Defines whether sorting works on single column or on multiple columns.</td>
+                    </tr>
+                    <tr>
+                        <td>removableSort</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When enabled, columns can have an un-sorted state.</td>
+                    </tr>
+                    <tr>
+                        <td>filters</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Filters object with key-value pairs to define the filters.</td>
+                    </tr>
+                    <tr>
+                        <td>filterMode</td>
+                        <td>string</td>
+                        <td>lenient</td>
+                        <td>Mode for filtering valid values are "lenient" and "strict". Default is lenient.</td>
+                    </tr>
+                    <tr>
+                        <td>filterLocale</td>
+                        <td>string</td>
+                        <td>undefined</td>
+                        <td>Locale to use in filtering. The default locale is the host environment's current locale.</td>
+                    </tr>
+                    <tr>
+                        <td>resizableColumns</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When enabled, columns can be resized using drag and drop.</td>
+                    </tr>
+                    <tr>
+                        <td>columnResizeMode</td>
+                        <td>string</td>
+                        <td>fit</td>
+                        <td>
+                            Defines whether the overall table width should change on column resize, <br />
+                            valid values are "fit" and "expand".
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>indentation</td>
+                        <td>number</td>
+                        <td>1</td>
+                        <td>Indentation factor as rem value for children nodes. Defaults to 1rem.</td>
+                    </tr>
+                    <tr>
+                        <td>showGridlines</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Whether to show grid lines between cells.</td>
+                    </tr>
+                    <tr>
+                        <td>scrollable</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When specified, enables horizontal and/or vertical scrolling.</td>
+                    </tr>
+                    <tr>
+                        <td>scrollDirection</td>
+                        <td>string</td>
+                        <td>vertical</td>
+                        <td>Orientation of the scrolling, options are "vertical", "horizontal" and "both".</td>
+                    </tr>
+                    <tr>
+                        <td>scrollHeight</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Height of the scroll viewport in fixed pixels or the "flex" keyword for a dynamic size.</td>
+                    </tr>
+                    <tr>
+                        <td>responsiveLayout</td>
+                        <td>string</td>
+                        <td>stack</td>
+                        <td>Defines the responsive mode, currently only option is scroll..</td>
+                    </tr>
+                    <tr>
+                        <td>tableProps</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Props to pass to the table element.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Events</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>page</td>
-                            <td>
-                                event.originalEvent: Browser event <br />
-                                event.page: New page number <br />
-                                event.pageCount: Total page count <br />
-                                event.first: Index of first record <br />
-                                event.rows: Number of rows to display in new page <br />
-                                event.sortField: Field to sort against <br />
-                                event.sortOrder: Sort order as integer <br />
-                                event.multiSortMeta: MultiSort metadata <br />
-                                event.filters: Collection of active filters <br />
-                                event.filterMatchModes: Match modes per field
-                            </td>
-                            <td>Callback to invoke on pagination. Sort and Filter information is also available for lazy loading implementation.</td>
-                        </tr>
-                        <tr>
-                            <td>sort</td>
-                            <td>
-                                event.originalEvent: Browser event <br />
-                                event.first: Index of first record <br />
-                                event.rows: Number of rows to display in new page <br />
-                                event.sortField: Field to sort against <br />
-                                event.sortOrder: Sort order as integer <br />
-                                event.multiSortMeta: MultiSort metadata <br />
-                                event.filters: Collection of active filters <br />
-                                event.filterMatchModes: Match modes per field
-                            </td>
-                            <td>Callback to invoke on sort. Page and Filter information is also available for lazy loading implementation.</td>
-                        </tr>
-                        <tr>
-                            <td>filter</td>
-                            <td>
-                                event.originalEvent: Browser event <br />
-                                event.first: Index of first record <br />
-                                event.rows: Number of rows to display in new page <br />
-                                event.sortField: Field to sort against <br />
-                                event.sortOrder: Sort order as integer <br />
-                                event.multiSortMeta: MultiSort metadata <br />
-                                event.filters: Collection of active filters <br />
-                                event.filteredValue: Filtered collection <br />
-                                event.filterMatchModes: Match modes per field
-                            </td>
-                            <td>Event to emit after filtering, not triggered in lazy mode.</td>
-                        </tr>
-                        <tr>
-                            <td>node-select</td>
-                            <td>node: Node instance</td>
-                            <td>Callback to invoke when a node is selected.</td>
-                        </tr>
-                        <tr>
-                            <td>node-unselect</td>
-                            <td>node: Node instance</td>
-                            <td>Callback to invoke when a node is unselected.</td>
-                        </tr>
-                        <tr>
-                            <td>node-expand</td>
-                            <td>node: Node instance</td>
-                            <td>Callback to invoke when a node is expanded.</td>
-                        </tr>
-                        <tr>
-                            <td>node-collapse</td>
-                            <td>node: Node instance</td>
-                            <td>Callback to invoke when a node is collapsed.</td>
-                        </tr>
-                        <tr>
-                            <td>column-resize-end</td>
-                            <td>
-                                event.element: DOM element of the resized column.<br />
-                                event.delta: Change in column width
-                            </td>
-                            <td>Callback to invoke when a column is resized.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Events</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>page</td>
+                        <td>
+                            event.originalEvent: Browser event <br />
+                            event.page: New page number <br />
+                            event.pageCount: Total page count <br />
+                            event.first: Index of first record <br />
+                            event.rows: Number of rows to display in new page <br />
+                            event.sortField: Field to sort against <br />
+                            event.sortOrder: Sort order as integer <br />
+                            event.multiSortMeta: MultiSort metadata <br />
+                            event.filters: Collection of active filters <br />
+                            event.filterMatchModes: Match modes per field
+                        </td>
+                        <td>Callback to invoke on pagination. Sort and Filter information is also available for lazy loading implementation.</td>
+                    </tr>
+                    <tr>
+                        <td>sort</td>
+                        <td>
+                            event.originalEvent: Browser event <br />
+                            event.first: Index of first record <br />
+                            event.rows: Number of rows to display in new page <br />
+                            event.sortField: Field to sort against <br />
+                            event.sortOrder: Sort order as integer <br />
+                            event.multiSortMeta: MultiSort metadata <br />
+                            event.filters: Collection of active filters <br />
+                            event.filterMatchModes: Match modes per field
+                        </td>
+                        <td>Callback to invoke on sort. Page and Filter information is also available for lazy loading implementation.</td>
+                    </tr>
+                    <tr>
+                        <td>filter</td>
+                        <td>
+                            event.originalEvent: Browser event <br />
+                            event.first: Index of first record <br />
+                            event.rows: Number of rows to display in new page <br />
+                            event.sortField: Field to sort against <br />
+                            event.sortOrder: Sort order as integer <br />
+                            event.multiSortMeta: MultiSort metadata <br />
+                            event.filters: Collection of active filters <br />
+                            event.filteredValue: Filtered collection <br />
+                            event.filterMatchModes: Match modes per field
+                        </td>
+                        <td>Event to emit after filtering, not triggered in lazy mode.</td>
+                    </tr>
+                    <tr>
+                        <td>node-select</td>
+                        <td>node: Node instance</td>
+                        <td>Callback to invoke when a node is selected.</td>
+                    </tr>
+                    <tr>
+                        <td>node-unselect</td>
+                        <td>node: Node instance</td>
+                        <td>Callback to invoke when a node is unselected.</td>
+                    </tr>
+                    <tr>
+                        <td>node-expand</td>
+                        <td>node: Node instance</td>
+                        <td>Callback to invoke when a node is expanded.</td>
+                    </tr>
+                    <tr>
+                        <td>node-collapse</td>
+                        <td>node: Node instance</td>
+                        <td>Callback to invoke when a node is collapsed.</td>
+                    </tr>
+                    <tr>
+                        <td>column-resize-end</td>
+                        <td>
+                            event.element: DOM element of the resized column.<br />
+                            event.delta: Change in column width
+                        </td>
+                        <td>Callback to invoke when a column is resized.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Slots</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>header</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>paginatorstart</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>paginatorend</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>empty</td>
-                            <td>-</td>
-                        </tr>
-                        <tr>
-                            <td>footer</td>
-                            <td>-</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Slots</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>header</td>
+                        <td>-</td>
+                    </tr>
+                    <tr>
+                        <td>paginatorstart</td>
+                        <td>-</td>
+                    </tr>
+                    <tr>
+                        <td>paginatorend</td>
+                        <td>-</td>
+                    </tr>
+                    <tr>
+                        <td>empty</td>
+                        <td>-</td>
+                    </tr>
+                    <tr>
+                        <td>footer</td>
+                        <td>-</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-treetable</td>
-                            <td>Container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-treetable-scrollable</td>
-                            <td>Container element when table is scrollable.</td>
-                        </tr>
-                        <tr>
-                            <td>p-treetable-header</td>
-                            <td>Header section.</td>
-                        </tr>
-                        <tr>
-                            <td>p-treetable-footer</td>
-                            <td>Footer section.</td>
-                        </tr>
-                        <tr>
-                            <td>p-treetable-wrapper</td>
-                            <td>Wrapper of table element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-treetable-table</td>
-                            <td>Table element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-treetable-thead</td>
-                            <td>Table thead element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-treetable-tbody</td>
-                            <td>Table tbody element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-treetable-tfoot</td>
-                            <td>Table tfoot element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-column-title</td>
-                            <td>Title of a column.</td>
-                        </tr>
-                        <tr>
-                            <td>p-sortable-column</td>
-                            <td>Sortable column header.</td>
-                        </tr>
-                        <tr>
-                            <td>p-frozen-column</td>
-                            <td>Frozen column header.</td>
-                        </tr>
-                        <tr>
-                            <td>p-treetable-toggler</td>
-                            <td>Toggle element for a row.</td>
-                        </tr>
-                        <tr>
-                            <td>p-treetable-emptymessage</td>
-                            <td>Cell containing the empty message.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-treetable</td>
+                        <td>Container element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-treetable-scrollable</td>
+                        <td>Container element when table is scrollable.</td>
+                    </tr>
+                    <tr>
+                        <td>p-treetable-header</td>
+                        <td>Header section.</td>
+                    </tr>
+                    <tr>
+                        <td>p-treetable-footer</td>
+                        <td>Footer section.</td>
+                    </tr>
+                    <tr>
+                        <td>p-treetable-wrapper</td>
+                        <td>Wrapper of table element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-treetable-table</td>
+                        <td>Table element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-treetable-thead</td>
+                        <td>Table thead element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-treetable-tbody</td>
+                        <td>Table tbody element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-treetable-tfoot</td>
+                        <td>Table tfoot element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-column-title</td>
+                        <td>Title of a column.</td>
+                    </tr>
+                    <tr>
+                        <td>p-sortable-column</td>
+                        <td>Sortable column header.</td>
+                    </tr>
+                    <tr>
+                        <td>p-frozen-column</td>
+                        <td>Frozen column header.</td>
+                    </tr>
+                    <tr>
+                        <td>p-treetable-toggler</td>
+                        <td>Toggle element for a row.</td>
+                    </tr>
+                    <tr>
+                        <td>p-treetable-emptymessage</td>
+                        <td>Cell containing the empty message.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc>
-    </ClientOnly>
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>
+            DataTable uses a <i>treegrid</i> element whose attributes can be extended with the <i>tableProps</i> option. This property allows passing aria roles and attributes like <i>aria-label</i> and <i>aria-describedby</i> to define the table for
+            readers. Default role of the table is <i>table</i>. Header, body and footer elements use <i>rowgroup</i>, rows use <i>row</i> role, header cells have <i>columnheader</i> and body cells use <i>cell</i>{' '} roles. Sortable headers utilizer
+            <i>aria-sort</i> attribute either set to "ascending" or "descending".
+        </p>
+
+        <p>Row elements manage <i>aria-expanded</i> for state along with <i>aria-posinset</i>, <i>aria-setsize</i> and <i>aria-level</i> attribute to define the hierachy.</p>
+
+        <p>When selection is enabled, <i>aria-selected</i> is set to true on a row. In checkbox mode, TreeTable component uses a hidden native checkbox element.</p>
+
+        <p>Editable cells use custom templating so you need to manage aria roles and attributes manually if required.</p>
+
+        <p>Paginator is a standalone component used inside the DataTable, refer to the <router-link to="/paginator">paginator</router-link> for more information about the accessibility features.</p>
+
+        <h6>Sortable Headers Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>tab</i>
+                        </td>
+                        <td>Moves through the headers.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>Sorts the column.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>Sorts the column.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h6>Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>tab</i>
+                        </td>
+                        <td>
+                            Moves focus to the first selected node when focus enters the component, if there is none then first element receives the focus. If focus is already inside the component, moves focus to the next focusable element in the
+                            page tab sequence.
+                        </td>
+                    </tr>
+                    <tr>
+                        <td><i>shift</i> + <i>tab</i></td>
+                        <td>
+                            Moves focus to the last selected node when focus enters the component, if there is none then first element receives the focus. If focus is already inside the component, moves focus to the previous focusable element in the
+                            page tab sequence.
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>Selects the focused treenode.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>Selects the focused treenode.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>down arrow</i>
+                        </td>
+                        <td>Moves focus to the next treenode.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>up arrow</i>
+                        </td>
+                        <td>Moves focus to the previous treenode.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>right arrow</i>
+                        </td>
+                        <td>If node is closed, opens the node otherwise moves focus to the first child node.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>left arrow</i>
+                        </td>
+                        <td>If node is open, closes the node otherwise moves focus to the parent node.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>home</i>
+                        </td>
+                        <td>Moves focus to the first same-level node.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>end</i>
+                        </td>
+                        <td>Moves focus to the last same-level node.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
diff --git a/pages/tristatecheckbox/TriStateCheckboxDoc.vue b/pages/tristatecheckbox/TriStateCheckboxDoc.vue
index 97e866801..e99ce95a4 100755
--- a/pages/tristatecheckbox/TriStateCheckboxDoc.vue
+++ b/pages/tristatecheckbox/TriStateCheckboxDoc.vue
@@ -1,116 +1,127 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="TriStateCheckboxDemo" :sources="sources" github="tristatecheckbox/TriStateCheckboxDemo.vue">
-            <h5>Import via Module</h5>
-            <pre v-code.script><code>
+    <AppDoc name="TriStateCheckboxDemo" :sources="sources" github="tristatecheckbox/TriStateCheckboxDemo.vue">
+        <h5>Import via Module</h5>
+        <pre v-code.script><code>
 import TriStateCheckbox from 'primevue/tristatecheckbox';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://unpkg.com/primevue@^3/tristatecheckbox/tristatecheckbox.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p>A model can be bound using the standard v-model directive.</p>
-            <pre v-code><code>
+        <h5>Getting Started</h5>
+        <p>A model can be bound using the standard v-model directive.</p>
+        <pre v-code><code>
 &lt;TriStateCheckbox v-model="value" /&gt;
 
 </code></pre>
 
-            <h5>Properties</h5>
-            <p>Any property such as name and autofocus are passed to the underlying input element. Following is the additional property to configure the component.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>modelValue</td>
-                            <td>boolean</td>
-                            <td>null</td>
-                            <td>Value of the component.</td>
-                        </tr>
-                        <tr>
-                            <td>disabled</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When specified, disables the component.</td>
-                        </tr>
-                        <tr>
-                            <td>tabindex</td>
-                            <td>number</td>
-                            <td>0</td>
-                            <td>Index of the element in tabbing order.</td>
-                        </tr>
-                        <tr>
-                            <td>inputId</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the component input field.</td>
-                        </tr>
-                        <tr>
-                            <td>inputProps</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <p>Any property such as name and autofocus are passed to the underlying input element. Following is the additional property to configure the component.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>modelValue</td>
+                        <td>boolean</td>
+                        <td>null</td>
+                        <td>Value of the component.</td>
+                    </tr>
+                    <tr>
+                        <td>disabled</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When specified, disables the component.</td>
+                    </tr>
+                    <tr>
+                        <td>tabindex</td>
+                        <td>number</td>
+                        <td>0</td>
+                        <td>Index of the element in tabbing order.</td>
+                    </tr>
+                    <tr>
+                        <td>inputId</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the component input field.</td>
+                    </tr>
+                    <tr>
+                        <td>inputProps</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.</td>
+                    </tr>
+                    <tr>
+                        <td>aria-label</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Defines a string value that labels an interactive element.</td>
+                    </tr>
+                    <tr>
+                        <td>aria-labelledby</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Events</h5>
-            <p>Any valid event such as focus and blur.</p>
+        <h5>Events</h5>
+        <p>Any valid event such as focus and blur.</p>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-chkbox</td>
-                            <td>Container element</td>
-                        </tr>
-                        <tr>
-                            <td>p-tristatechkbox</td>
-                            <td>Container element</td>
-                        </tr>
-                        <tr>
-                            <td>p-chkbox-box</td>
-                            <td>Container of icon.</td>
-                        </tr>
-                        <tr>
-                            <td>p-chkbox-icon</td>
-                            <td>Icon element.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-chkbox</td>
+                        <td>Container element</td>
+                    </tr>
+                    <tr>
+                        <td>p-tristatechkbox</td>
+                        <td>Container element</td>
+                    </tr>
+                    <tr>
+                        <td>p-chkbox-box</td>
+                        <td>Container of icon.</td>
+                    </tr>
+                    <tr>
+                        <td>p-chkbox-icon</td>
+                        <td>Icon element.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Accessibility</h5>
-            <h6>Screen Reader</h6>
-            <p>
-                TriStateCheckbox component uses an element with <i>checkbox</i> role. Value to describe the component can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. Component adds an element with
-                <i>aria-live</i> attribute that is only visible to screen readers to read the value displayed. Values to read are defined with the <i>trueLabel</i>, <i>falseLabel</i> and <i>nullLabel</i> keys of the <i>aria</i> property from the
-                <nuxt-link to="/locale">locale</nuxt-link> API. This is an example of a custom accessibility implementation as there is no one to one mapping between the component design and the WCAG specification.
-            </p>
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>
+            TriStateCheckbox component uses an element with <i>checkbox</i> role. Value to describe the component can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. Component adds an element with <i>aria-live</i> attribute
+            that is only visible to screen readers to read the value displayed. Values to read are defined with the <i>trueLabel</i>, <i>falseLabel</i> and <i>nullLabel</i> keys of the <i>aria</i> property from the
+            <router-link to="/locale">locale</router-link> API. This is an example of a custom accessibility implementation as there is no one to one mapping between the component design and the WCAG specification.
+        </p>
 
-            <pre v-code><code>
+        <pre v-code><code>
 &lt;span id="chkbox1"&gt;Remember Me&lt;/span&gt;
 &lt;TriStateCheckbox aria-labelledby="chkbox1" /&gt;
 
@@ -118,36 +129,35 @@ import TriStateCheckbox from 'primevue/tristatecheckbox';
 
 </code></pre>
 
-            <h6>Keyboard Support</h6>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Key</th>
-                            <th>Function</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td><i>tab</i></td>
-                            <td>Moves focus to the checkbox.</td>
-                        </tr>
-                        <tr>
-                            <td><i>space</i></td>
-                            <td>Toggles between the values.</td>
-                        </tr>
-                        <tr>
-                            <td><i>enter</i></td>
-                            <td>Toggles between the values.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h6>Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>tab</i></td>
+                        <td>Moves focus to the checkbox.</td>
+                    </tr>
+                    <tr>
+                        <td><i>space</i></td>
+                        <td>Toggles between the values.</td>
+                    </tr>
+                    <tr>
+                        <td><i>enter</i></td>
+                        <td>Toggles between the values.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc>
-    </ClientOnly>
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
diff --git a/pages/tristatecheckbox/index.vue b/pages/tristatecheckbox/index.vue
index f1d8d41f8..b5a9abf1b 100755
--- a/pages/tristatecheckbox/index.vue
+++ b/pages/tristatecheckbox/index.vue
@@ -11,7 +11,7 @@
         <div class="content-section implementation">
             <div class="card">
                 <div class="field-checkbox m-0">
-                    <TriStateCheckbox inputId="checkbox" v-model="value" />
+                    <TriStateCheckbox v-model="value" inputId="checkbox" />
                     <label for="checkbox">{{ value == null ? 'null' : value }}</label>
                 </div>
             </div>
diff --git a/pages/uikit/index.vue b/pages/uikit/index.vue
index ccbeaf57f..098a383dd 100644
--- a/pages/uikit/index.vue
+++ b/pages/uikit/index.vue
@@ -1,291 +1,306 @@
 <template>
     <div>
-        <ClientOnly>
-            <div class="content-section">
-                <div style="border-radius: 50px; max-height: 500px" class="overflow-hidden mb-5 flex align-items-center">
-                    <img alt="PrimeVue Designer" :src="coverImage" class="w-full" />
-                </div>
+        <div class="content-section">
+            <div style="border-radius: 50px; max-height: 500px" class="overflow-hidden mb-5 flex align-items-center">
+                <img alt="PrimeVue Designer" :src="coverImage" class="w-full" />
+            </div>
 
-                <div class="card mb-5" style="border-radius: 50px">
-                    <div class="flex flex-column md:flex-row align-items-center gap-4 md:gap-8 mb-8">
-                        <div class="w-full md:w-6">
-                            <img alt="PrimeVue Designer" src="/images/uikit/uikit-figma.png" class="w-full" />
-                        </div>
-                        <div class="w-full md:w-6">
-                            <div class="text-primary font-bold mb-2">UP-TO-DATE</div>
-                            <div class="text-900 text-5xl font-bold mb-3">Best Features of Figma</div>
-                            <p class="mb-3">PrimeOne for Figma uses the latest powerful features like components, variants, auto layout, styles and interactive components. It'll always follow the best practices.</p>
-
-                            <ul class="flex flex-wrap m-0 p-0">
-                                <li class="flex align-items-center w-6 p-3">
-                                    <i class="pi pi-check-circle text-green-600 mr-2"></i>
-                                    <span class="font-bold">Auto Layout</span>
-                                </li>
-                                <li class="flex align-items-center w-6 p-3">
-                                    <i class="pi pi-check-circle text-green-600 mr-2"></i>
-                                    <span class="font-bold">Variants</span>
-                                </li>
-                                <li class="flex align-items-center w-6 p-3">
-                                    <i class="pi pi-check-circle text-green-600 mr-2"></i>
-                                    <span class="font-bold">Styles</span>
-                                </li>
-                                <li class="flex align-items-center w-6 p-3">
-                                    <i class="pi pi-check-circle text-green-600 mr-2"></i>
-                                    <span class="font-bold">Interactive Components</span>
-                                </li>
-                            </ul>
-                        </div>
+            <div class="card mb-5" style="border-radius: 50px">
+                <div class="flex flex-column md:flex-row align-items-center gap-4 md:gap-8 mb-8">
+                    <div class="w-full md:w-6">
+                        <img alt="PrimeVue Designer" src="images/uikit/uikit-figma.png" class="w-full" />
                     </div>
-                    <div class="flex flex-column md:flex-row align-items-center gap-4 md:gap-8 mb-8">
-                        <div class="w-full md:w-6">
-                            <div class="text-primary font-bold mb-2">ENTERPRISE GRADE</div>
-                            <div class="text-900 text-5xl font-bold mb-3">Powerful System</div>
-                            <p class="mb-3">Save countless hours on every project with a carefully designed system that uses Prime UI Suite components. Start producing design results in no time.</p>
+                    <div class="w-full md:w-6">
+                        <div class="text-primary font-bold mb-2">UP-TO-DATE</div>
+                        <div class="text-900 text-5xl font-bold mb-3">Best Features of Figma</div>
+                        <p class="mb-3">PrimeOne for Figma uses the latest powerful features like components, variants, auto layout, styles and interactive components. It'll always follow the best practices.</p>
 
-                            <ul class="flex flex-wrap m-0 p-0">
-                                <li class="flex align-items-center w-6 p-3">
-                                    <i class="pi pi-check-circle text-green-600 mr-2"></i>
-                                    <span class="font-bold">Numerous Components</span>
-                                </li>
-                                <li class="flex align-items-center w-6 p-3">
-                                    <i class="pi pi-check-circle text-green-600 mr-2"></i>
-                                    <span class="font-bold">Icon Library</span>
-                                </li>
-                                <li class="flex align-items-center w-6 p-3">
-                                    <i class="pi pi-check-circle text-green-600 mr-2"></i>
-                                    <span class="font-bold">Easy Customization</span>
-                                </li>
-                                <li class="flex align-items-center w-6 p-3">
-                                    <i class="pi pi-check-circle text-green-600 mr-2"></i>
-                                    <span class="font-bold">Atomic Approach</span>
-                                </li>
-                            </ul>
-                        </div>
-                        <div class="w-full md:w-6">
-                            <img alt="PrimeVue Designer" src="/images/uikit/uikit-system.png" class="w-full" />
-                        </div>
-                    </div>
-                    <div class="flex flex-column md:flex-row align-items-center gap-4 md:gap-8">
-                        <div class="w-full md:w-6">
-                            <img alt="PrimeVue Designer" src="/images/uikit/uikit-themes.png" class="w-full" />
-                        </div>
-                        <div class="w-full md:w-6">
-                            <div class="text-primary font-bold mb-2">DARK MODE</div>
-                            <div class="text-900 text-5xl font-bold mb-3">Two Themes</div>
-                            <p class="mb-3">PrimeOne is designed based on Lara Blue Light and Lara Blue Dark themes. Easily change the themes of your designs using Figma's Swap Library feature.</p>
-
-                            <ul class="flex flex-wrap m-0 p-0">
-                                <li class="flex align-items-center w-6 p-3">
-                                    <i class="pi pi-check-circle text-green-600 mr-2"></i>
-                                    <span class="font-bold">Lara Light</span>
-                                </li>
-                                <li class="flex align-items-center w-6 p-3">
-                                    <i class="pi pi-check-circle text-green-600 mr-2"></i>
-                                    <span class="font-bold">Lara Dark</span>
-                                </li>
-                            </ul>
-                        </div>
+                        <ul class="flex flex-wrap m-0 p-0">
+                            <li class="flex align-items-center w-6 p-3">
+                                <i class="pi pi-check-circle text-green-600 mr-2"></i>
+                                <span class="font-bold">Auto Layout</span>
+                            </li>
+                            <li class="flex align-items-center w-6 p-3">
+                                <i class="pi pi-check-circle text-green-600 mr-2"></i>
+                                <span class="font-bold">Variants</span>
+                            </li>
+                            <li class="flex align-items-center w-6 p-3">
+                                <i class="pi pi-check-circle text-green-600 mr-2"></i>
+                                <span class="font-bold">Styles</span>
+                            </li>
+                            <li class="flex align-items-center w-6 p-3">
+                                <i class="pi pi-check-circle text-green-600 mr-2"></i>
+                                <span class="font-bold">Interactive Components</span>
+                            </li>
+                        </ul>
                     </div>
                 </div>
+                <div class="flex flex-column md:flex-row align-items-center gap-4 md:gap-8 mb-8">
+                    <div class="w-full md:w-6">
+                        <div class="text-primary font-bold mb-2">ENTERPRISE GRADE</div>
+                        <div class="text-900 text-5xl font-bold mb-3">Powerful System</div>
+                        <p class="mb-3">Save countless hours on every project with a carefully designed system that uses Prime UI Suite components. Start producing design results in no time.</p>
 
-                <div class="flex flex-column md:flex-row gap-4 md:gap-8 mb-5">
-                    <a
-                        href="https://www.figma.com/file/c3BuENd8nGcyPmn7ADieee/Preview-%7C-PrimeOne-2022-%7C-1.0.0?node-id=806%3A36648"
-                        class="p-5 w-full md:w-6 bg-white flex flex-column align-items-center border-2 border-transparent hover:border-primary transition-colors transition-duration-300"
-                        style="border-radius: 50px"
-                    >
-                        <span class="text-gray-900 text-4xl font-bold mb-5">Preview Light</span>
-                        <img alt="PrimeVue Designer" src="/images/uikit/logo-figma-light.svg" class="w-4rem" />
-                    </a>
-                    <a
-                        href="https://www.figma.com/file/LJBqVfMpK8xY6KR2KIc8RK/Preview-%7C-Dark-%7C-PrimeOne-2022-%7C-1.0.0?node-id=806%3A36648"
-                        class="p-5 w-6 bg-gray-900 flex flex-column align-items-center border-2 border-transparent hover:border-primary transition-colors transition-duration-300"
-                        style="border-radius: 50px"
-                    >
-                        <span class="text-white text-4xl font-bold mb-5">Preview Dark</span>
-                        <img alt="PrimeVue Designer" src="/images/uikit/logo-figma-dark.svg" class="w-4rem" />
-                    </a>
+                        <ul class="flex flex-wrap m-0 p-0">
+                            <li class="flex align-items-center w-6 p-3">
+                                <i class="pi pi-check-circle text-green-600 mr-2"></i>
+                                <span class="font-bold">Numerous Components</span>
+                            </li>
+                            <li class="flex align-items-center w-6 p-3">
+                                <i class="pi pi-check-circle text-green-600 mr-2"></i>
+                                <span class="font-bold">Icon Library</span>
+                            </li>
+                            <li class="flex align-items-center w-6 p-3">
+                                <i class="pi pi-check-circle text-green-600 mr-2"></i>
+                                <span class="font-bold">Easy Customization</span>
+                            </li>
+                            <li class="flex align-items-center w-6 p-3">
+                                <i class="pi pi-check-circle text-green-600 mr-2"></i>
+                                <span class="font-bold">Atomic Approach</span>
+                            </li>
+                        </ul>
+                    </div>
+                    <div class="w-full md:w-6">
+                        <img alt="PrimeVue Designer" src="images/uikit/uikit-system.png" class="w-full" />
+                    </div>
                 </div>
+                <div class="flex flex-column md:flex-row align-items-center gap-4 md:gap-8">
+                    <div class="w-full md:w-6">
+                        <img alt="PrimeVue Designer" src="images/uikit/uikit-themes.png" class="w-full" />
+                    </div>
+                    <div class="w-full md:w-6">
+                        <div class="text-primary font-bold mb-2">DARK MODE</div>
+                        <div class="text-900 text-5xl font-bold mb-3">Two Themes</div>
+                        <p class="mb-3">PrimeOne is designed based on Lara Blue Light and Lara Blue Dark themes. Easily change the themes of your designs using Figma's Swap Library feature.</p>
 
-                <div class="card mb-5" style="border-radius: 50px">
-                    <div class="text-900 font-bold text-5xl mb-4 text-center">Pricing</div>
-                    <div class="mb-6 text-center line-height-3">Choose the right plan for your business. Whether you are an individual or a member of a team, UI Kit is available for affordable prices.</div>
+                        <ul class="flex flex-wrap m-0 p-0">
+                            <li class="flex align-items-center w-6 p-3">
+                                <i class="pi pi-check-circle text-green-600 mr-2"></i>
+                                <span class="font-bold">Lara Light</span>
+                            </li>
+                            <li class="flex align-items-center w-6 p-3">
+                                <i class="pi pi-check-circle text-green-600 mr-2"></i>
+                                <span class="font-bold">Lara Dark</span>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
 
-                    <div class="grid">
-                        <div class="col-12 lg:col-4">
-                            <div class="p-3 h-full">
-                                <div class="shadow-2 p-5 h-full flex flex-column surface-card" style="border-radius: 6px">
-                                    <div class="text-900 font-medium text-xl mb-2">Single Designer</div>
-                                    <div class="text-600 font-medium">For individual designers</div>
-                                    <hr class="my-3 mx-0 border-top-1 border-none surface-border" />
-                                    <div>
-                                        <span class="font-bold text-2xl text-900">$99</span>
-                                    </div>
-                                    <hr class="my-3 mx-0 border-top-1 border-none surface-border" />
-                                    <ul class="list-none p-0 m-0 flex-grow-1">
-                                        <li class="flex align-items-center mb-3">
-                                            <i class="pi pi-check-circle text-green-500 mr-2"></i>
-                                            <span class="font-bold">1 Designer</span>
-                                        </li>
-                                        <li class="flex align-items-center mb-3">
-                                            <i class="pi pi-check-circle text-green-500 mr-2"></i>
-                                            <span>Auto Layout & Variants</span>
-                                        </li>
-                                        <li class="flex align-items-center mb-3">
-                                            <i class="pi pi-check-circle text-green-500 mr-2"></i>
-                                            <span>Interactive Components</span>
-                                        </li>
-                                        <li class="flex align-items-center mb-3">
-                                            <i class="pi pi-check-circle text-green-500 mr-2"></i>
-                                            <span>Lifetime Support</span>
-                                        </li>
-                                        <li class="flex align-items-center mb-3">
-                                            <i class="pi pi-check-circle text-green-500 mr-2"></i>
-                                            <span>Use on Unlimited Projects</span>
-                                        </li>
-                                    </ul>
-                                    <hr class="mb-3 mx-0 border-top-1 border-none surface-border mt-auto" />
-                                    <a href="https://www.primefaces.org/store/uikit.xhtml" v-ripple class="bg-blue-500 text-white hover:bg-blue-400 p-3 w-full border-round text-center transition-colors transition-duration-300 font-bold p-ripple"
-                                        >Buy Now</a
-                                    >
-                                </div>
-                            </div>
-                        </div>
-
-                        <div class="col-12 lg:col-4">
-                            <div class="p-3 h-full">
-                                <div class="shadow-2 p-5 h-full flex flex-column surface-card" style="border-radius: 6px">
-                                    <div class="text-900 font-medium text-xl mb-2">Team</div>
-                                    <div class="text-600 font-medium">For small teams</div>
-                                    <hr class="my-3 mx-0 border-top-1 border-none surface-border" />
-                                    <div>
-                                        <span class="font-bold text-2xl text-900">$249</span>
-                                    </div>
-                                    <hr class="my-3 mx-0 border-top-1 border-none surface-border" />
-                                    <ul class="list-none p-0 m-0 flex-grow-1">
-                                        <li class="flex align-items-center mb-3">
-                                            <i class="pi pi-check-circle text-green-500 mr-2"></i>
-                                            <span class="font-bold">Up to 5 Designers</span>
-                                        </li>
-                                        <li class="flex align-items-center mb-3">
-                                            <i class="pi pi-check-circle text-green-500 mr-2"></i>
-                                            <span>Auto Layout & Variants</span>
-                                        </li>
-                                        <li class="flex align-items-center mb-3">
-                                            <i class="pi pi-check-circle text-green-500 mr-2"></i>
-                                            <span>Interactive Components</span>
-                                        </li>
-                                        <li class="flex align-items-center mb-3">
-                                            <i class="pi pi-check-circle text-green-500 mr-2"></i>
-                                            <span>Lifetime Support</span>
-                                        </li>
-                                        <li class="flex align-items-center mb-3">
-                                            <i class="pi pi-check-circle text-green-500 mr-2"></i>
-                                            <span>Use on Unlimited Projects</span>
-                                        </li>
-                                    </ul>
-                                    <hr class="mb-3 mx-0 border-top-1 border-none surface-border" />
-                                    <a href="https://www.primefaces.org/store/uikit.xhtml" v-ripple class="bg-purple-500 text-white hover:bg-purple-400 p-3 w-full border-round text-center transition-colors transition-duration-300 font-bold p-ripple"
-                                        >Buy Now</a
-                                    >
-                                </div>
-                            </div>
-                        </div>
-
-                        <div class="col-12 lg:col-4">
-                            <div class="p-3 h-full">
-                                <div class="shadow-2 p-5 flex flex-column surface-card" style="border-radius: 6px">
-                                    <div class="text-900 font-medium text-xl mb-2">Enterprise</div>
-                                    <div class="text-600 font-medium">For large teams</div>
-                                    <hr class="my-3 mx-0 border-top-1 border-none surface-border" />
-                                    <div>
-                                        <span class="font-bold text-2xl text-900">Exclusive Deals</span>
-                                    </div>
-                                    <hr class="my-3 mx-0 border-top-1 border-none surface-border" />
-                                    <ul class="list-none p-0 m-0 flex-grow-1">
-                                        <li class="flex align-items-center mb-3">
-                                            <i class="pi pi-check-circle text-green-500 mr-2"></i>
-                                            <span class="font-bold">Unlimited Designers</span>
-                                        </li>
-                                        <li class="flex align-items-center mb-3">
-                                            <i class="pi pi-check-circle text-green-500 mr-2"></i>
-                                            <span>Auto Layout & Variants</span>
-                                        </li>
-                                        <li class="flex align-items-center mb-3">
-                                            <i class="pi pi-check-circle text-green-500 mr-2"></i>
-                                            <span>Interactive Components</span>
-                                        </li>
-                                        <li class="flex align-items-center mb-3">
-                                            <i class="pi pi-check-circle text-green-500 mr-2"></i>
-                                            <span>Lifetime Support</span>
-                                        </li>
-                                        <li class="flex align-items-center mb-3">
-                                            <i class="pi pi-check-circle text-green-500 mr-2"></i>
-                                            <span>Use on Unlimited Projects</span>
-                                        </li>
-                                    </ul>
-                                    <hr class="mb-3 mx-0 border-top-1 border-none surface-border" />
-                                    <a href="mailto:contact@primetek.com.tr" v-ripple class="bg-bluegray-500 text-white hover:bg-bluegray-400 p-3 w-full border-round text-center transition-colors transition-duration-300 font-bold p-ripple"
-                                        >Contact Us</a
-                                    >
+            <div class="flex flex-column md:flex-row gap-4 md:gap-8 mb-5">
+                <a
+                    href="https://www.figma.com/file/c3BuENd8nGcyPmn7ADieee/Preview-%7C-PrimeOne-2022-%7C-1.0.0?node-id=806%3A36648"
+                    class="p-5 w-full md:w-6 bg-white flex flex-column align-items-center border-2 border-transparent hover:border-primary transition-colors transition-duration-300"
+                    style="border-radius: 50px"
+                >
+                    <span class="text-gray-900 text-4xl font-bold mb-5">Preview Light</span>
+                    <img alt="PrimeVue Designer" src="images/uikit/logo-figma-light.svg" class="w-4rem" />
+                </a>
+                <a
+                    href="https://www.figma.com/file/LJBqVfMpK8xY6KR2KIc8RK/Preview-%7C-Dark-%7C-PrimeOne-2022-%7C-1.0.0?node-id=806%3A36648"
+                    class="p-5 w-6 bg-gray-900 flex flex-column align-items-center border-2 border-transparent hover:border-primary transition-colors transition-duration-300"
+                    style="border-radius: 50px"
+                >
+                    <span class="text-white text-4xl font-bold mb-5">Preview Dark</span>
+                    <img alt="PrimeVue Designer" src="images/uikit/logo-figma-dark.svg" class="w-4rem" />
+                </a>
+            </div>
+
+            <div class="card mb-5" style="border-radius: 50px">
+                <div class="text-900 font-bold text-5xl mb-4 text-center">Pricing</div>
+                <div class="mb-2 text-center line-height-3">Choose the right plan for your business. Whether you are an individual or a member of a team, UI Kit is available for affordable prices.</div>
+                <a href="https://www.primefaces.org/uikit/licenses" class="mb-6 text-primary-500 no-underline hover:underline text-center block">View Licence Details</a>
+
+                <div class="grid">
+                    <div class="col-12 lg:col-4">
+                        <div class="p-3 h-full">
+                            <div class="shadow-2 p-5 h-full flex flex-column surface-card" style="border-radius: 6px">
+                                <div class="text-900 font-medium text-xl mb-2">Single Designer</div>
+                                <div class="text-600 font-medium">For individual designers</div>
+                                <hr class="my-3 mx-0 border-top-1 border-none surface-border" />
+                                <div v-if="pricing && pricing.single" class="flex flex-wrap gap-3">
+                                    <span v-if="pricing.single.old" :class="pricing.single.old.class ? pricing.single.old.class : ''">{{ pricing.single.old.value || '' }}</span>
+                                    <span v-if="pricing.single.new" :class="pricing.single.new.class ? pricing.single.new.class : ''">{{ pricing.single.new.value || '' }}</span>
                                 </div>
+                                <hr class="my-3 mx-0 border-top-1 border-none surface-border" />
+                                <ul class="list-none p-0 m-0 flex-grow-1">
+                                    <li class="flex align-items-center mb-3">
+                                        <i class="pi pi-check-circle text-green-500 mr-2"></i>
+                                        <span class="font-bold">1 Designer</span>
+                                    </li>
+                                    <li class="flex align-items-center mb-3">
+                                        <i class="pi pi-check-circle text-green-500 mr-2"></i>
+                                        <span>Auto Layout & Variants</span>
+                                    </li>
+                                    <li class="flex align-items-center mb-3">
+                                        <i class="pi pi-check-circle text-green-500 mr-2"></i>
+                                        <span>Interactive Components</span>
+                                    </li>
+                                    <li class="flex align-items-center mb-3">
+                                        <i class="pi pi-check-circle text-green-500 mr-2"></i>
+                                        <span>Lifetime Support</span>
+                                    </li>
+                                    <li class="flex align-items-center mb-3">
+                                        <i class="pi pi-check-circle text-green-500 mr-2"></i>
+                                        <span>Use on Unlimited Projects</span>
+                                    </li>
+                                </ul>
+                                <hr class="mb-3 mx-0 border-top-1 border-none surface-border mt-auto" />
+                                <a v-ripple href="https://www.primefaces.org/store/uikit.xhtml" class="bg-blue-500 text-white hover:bg-blue-400 p-3 w-full border-round text-center transition-colors transition-duration-300 font-bold p-ripple"
+                                    >Buy Now</a
+                                >
                             </div>
                         </div>
                     </div>
-                </div>
 
-                <div class="card" style="border-radius: 50px">
-                    <span class="block font-bold text-5xl mb-5 text-center text-900">Frequently Asked Questions</span>
-                    <div class="grid">
-                        <div class="col-12 lg:col-4 px-2 lg:px-5">
-                            <div class="text-xl text-900 line-height-3 mb-2 text-900">What do I get when I purchase a license?</div>
-                            <p class="mt-0 mb-6 p-0 line-height-3">You'll be able to download two Figma files for light and dark themes.</p>
-
-                            <div class="text-xl text-900 line-height-3 mb-2 text-900">Is there a recurring fee or is the license perpetual?</div>
-                            <p class="mt-0 mb-6 p-0 line-height-3">UI Kit license is perpetual so requires one time payment, not subscription based.</p>
-
-                            <div class="text-xl text-900 line-height-3 mb-2 text-900">Can I use UI Kit license for commercial projects?</div>
-                            <p class="mt-0 mb-6 p-0 line-height-3">Yes, your license allows you to sell your projects that utilize the UI Kit implementations.</p>
-
-                            <div class="text-xl text-900 line-height-3 mb-2 text-900">Can I create multiple projects for multiple clients?</div>
-                            <p class="mt-0 mb-6 p-0 line-height-3">There is no limit, you are able to use UI Kit in multiple projects for multiple clients.</p>
+                    <div class="col-12 lg:col-4">
+                        <div class="p-3 h-full">
+                            <div class="shadow-2 p-5 h-full flex flex-column surface-card" style="border-radius: 6px">
+                                <div class="text-900 font-medium text-xl mb-2">Team</div>
+                                <div class="text-600 font-medium">For small teams</div>
+                                <hr class="my-3 mx-0 border-top-1 border-none surface-border" />
+                                <div v-if="pricing && pricing.team" class="flex flex-wrap gap-3">
+                                    <span v-if="pricing.team.old" :class="pricing.team.old.class ? pricing.team.old.class : ''">{{ pricing.team.old.value || '' }}</span>
+                                    <span v-if="pricing.team.new" :class="pricing.team.new.class ? pricing.team.new.class : ''">{{ pricing.team.new.value || '' }}</span>
+                                </div>
+                                <hr class="my-3 mx-0 border-top-1 border-none surface-border" />
+                                <ul class="list-none p-0 m-0 flex-grow-1">
+                                    <li class="flex align-items-center mb-3">
+                                        <i class="pi pi-check-circle text-green-500 mr-2"></i>
+                                        <span class="font-bold">Up to 5 Designers</span>
+                                    </li>
+                                    <li class="flex align-items-center mb-3">
+                                        <i class="pi pi-check-circle text-green-500 mr-2"></i>
+                                        <span>Auto Layout & Variants</span>
+                                    </li>
+                                    <li class="flex align-items-center mb-3">
+                                        <i class="pi pi-check-circle text-green-500 mr-2"></i>
+                                        <span>Interactive Components</span>
+                                    </li>
+                                    <li class="flex align-items-center mb-3">
+                                        <i class="pi pi-check-circle text-green-500 mr-2"></i>
+                                        <span>Lifetime Support</span>
+                                    </li>
+                                    <li class="flex align-items-center mb-3">
+                                        <i class="pi pi-check-circle text-green-500 mr-2"></i>
+                                        <span>Use on Unlimited Projects</span>
+                                    </li>
+                                </ul>
+                                <hr class="mb-3 mx-0 border-top-1 border-none surface-border" />
+                                <a v-ripple href="https://www.primefaces.org/store/uikit.xhtml" class="bg-purple-500 text-white hover:bg-purple-400 p-3 w-full border-round text-center transition-colors transition-duration-300 font-bold p-ripple"
+                                    >Buy Now</a
+                                >
+                            </div>
                         </div>
-                        <div class="col-12 lg:col-4 px-2 lg:px-5">
-                            <div class="text-xl text-900 line-height-3 mb-2 text-900">We're a reseller, are we able to purchase a license on behalf of our client?</div>
-                            <p class="mt-0 mb-6 p-0 line-height-3">
-                                Yes, after the purchase, please <a href="mailto:contact@primetek.com.tr" class="text-primary-500 no-underline hover:underline">contact us</a> so we can transfer the license to your client.
-                            </p>
+                    </div>
 
-                            <div class="text-xl text-900 line-height-3 mb-2 text-900">Does the enterprise license include contractors within the organization?</div>
-                            <p class="mt-0 mb-6 p-0 line-height-3">Yes, contractors are also able to use the UI Kit within your company.</p>
-
-                            <div class="text-xl text-900 line-height-3 mb-2 text-900">Can subsidiary company of a larger organization share the enterprise license?</div>
-                            <p class="mt-0 mb-6 p-0 line-height-3">No, enterprise license is per company so each subsidiary company needs to purchase a separate license.</p>
-
-                            <div class="text-xl text-900 line-height-3 mb-2 text-900">What does "free updates" mean?</div>
-                            <p class="mt-0 mb-6 p-0 line-height-3">All updates will be totally free of charge for existing customers for an unlimited period.</p>
-                        </div>
-                        <div class="col-12 lg:col-4 px-2 lg:px-5">
-                            <div class="text-xl text-900 line-height-3 mb-2 text-900">How can I get support?</div>
-                            <p class="mt-0 mb-6 p-0 line-height-3">
-                                Support is provided by PrimeTek via <a href="https://forum.primefaces.org/viewforum.php?f=159" class="text-primary-500 no-underline hover:underline">a dedicated forum channel monitored</a> by PrimeTek support staff.
-                            </p>
-
-                            <div class="text-xl text-900 line-height-3 mb-2 text-900">What does lifetime support mean?</div>
-                            <p class="mt-0 mb-6 p-0 line-height-3">Support service at the forum does not have a time limit.</p>
-
-                            <div class="text-xl text-900 line-height-3 mb-2 text-900">Can I include UI Kit in an open source project?</div>
-                            <p class="mt-0 mb-6 p-0 line-height-3">Due to the license, it is not possible to use the UI Kit in an open source project where the design files are publicly available.</p>
+                    <div class="col-12 lg:col-4">
+                        <div class="p-3 h-full">
+                            <div class="shadow-2 p-5 flex flex-column surface-card" style="border-radius: 6px">
+                                <div class="text-900 font-medium text-xl mb-2">Enterprise</div>
+                                <div class="text-600 font-medium">For large teams</div>
+                                <hr class="my-3 mx-0 border-top-1 border-none surface-border" />
+                                <div v-if="pricing && pricing.enterprise" class="flex flex-wrap gap-3">
+                                    <span v-if="pricing.enterprise.new" :class="pricing.enterprise.new.class ? pricing.enterprise.new.class : ''">{{ pricing.enterprise.new.value || '' }}</span>
+                                </div>
+                                <hr class="my-3 mx-0 border-top-1 border-none surface-border" />
+                                <ul class="list-none p-0 m-0 flex-grow-1">
+                                    <li class="flex align-items-center mb-3">
+                                        <i class="pi pi-check-circle text-green-500 mr-2"></i>
+                                        <span class="font-bold">Unlimited Designers</span>
+                                    </li>
+                                    <li class="flex align-items-center mb-3">
+                                        <i class="pi pi-check-circle text-green-500 mr-2"></i>
+                                        <span>Auto Layout & Variants</span>
+                                    </li>
+                                    <li class="flex align-items-center mb-3">
+                                        <i class="pi pi-check-circle text-green-500 mr-2"></i>
+                                        <span>Interactive Components</span>
+                                    </li>
+                                    <li class="flex align-items-center mb-3">
+                                        <i class="pi pi-check-circle text-green-500 mr-2"></i>
+                                        <span>Lifetime Support</span>
+                                    </li>
+                                    <li class="flex align-items-center mb-3">
+                                        <i class="pi pi-check-circle text-green-500 mr-2"></i>
+                                        <span>Use on Unlimited Projects</span>
+                                    </li>
+                                </ul>
+                                <hr class="mb-3 mx-0 border-top-1 border-none surface-border" />
+                                <a v-ripple href="mailto:contact@primetek.com.tr" class="bg-bluegray-500 text-white hover:bg-bluegray-400 p-3 w-full border-round text-center transition-colors transition-duration-300 font-bold p-ripple">Contact Us</a>
+                            </div>
                         </div>
                     </div>
                 </div>
             </div>
-        </ClientOnly>
+
+            <div class="card" style="border-radius: 50px">
+                <span class="block font-bold text-5xl mb-5 text-center text-900">Frequently Asked Questions</span>
+                <div class="grid">
+                    <div class="col-12 lg:col-4 px-2 lg:px-5">
+                        <div class="text-xl text-900 line-height-3 mb-2 text-900">What do I get when I purchase a license?</div>
+                        <p class="mt-0 mb-6 p-0 line-height-3">You'll be able to download two Figma files for light and dark themes.</p>
+
+                        <div class="text-xl text-900 line-height-3 mb-2 text-900">Is there a recurring fee or is the license perpetual?</div>
+                        <p class="mt-0 mb-6 p-0 line-height-3">UI Kit license is perpetual so requires one time payment, not subscription based.</p>
+
+                        <div class="text-xl text-900 line-height-3 mb-2 text-900">Can I use UI Kit license for commercial projects?</div>
+                        <p class="mt-0 mb-6 p-0 line-height-3">Yes, your license allows you to sell your projects that utilize the UI Kit implementations.</p>
+
+                        <div class="text-xl text-900 line-height-3 mb-2 text-900">Can I create multiple projects for multiple clients?</div>
+                        <p class="mt-0 mb-6 p-0 line-height-3">There is no limit, you are able to use UI Kit in multiple projects for multiple clients.</p>
+                    </div>
+                    <div class="col-12 lg:col-4 px-2 lg:px-5">
+                        <div class="text-xl text-900 line-height-3 mb-2 text-900">We're a reseller, are we able to purchase a license on behalf of our client?</div>
+                        <p class="mt-0 mb-6 p-0 line-height-3">
+                            Yes, after the purchase, please <a href="mailto:contact@primetek.com.tr" class="text-primary-500 no-underline hover:underline">contact us</a> so we can transfer the license to your client.
+                        </p>
+
+                        <div class="text-xl text-900 line-height-3 mb-2 text-900">Does the enterprise license include contractors within the organization?</div>
+                        <p class="mt-0 mb-6 p-0 line-height-3">Yes, contractors are also able to use the UI Kit within your company.</p>
+
+                        <div class="text-xl text-900 line-height-3 mb-2 text-900">Can subsidiary company of a larger organization share the enterprise license?</div>
+                        <p class="mt-0 mb-6 p-0 line-height-3">No, enterprise license is per company so each subsidiary company needs to purchase a separate license.</p>
+
+                        <div class="text-xl text-900 line-height-3 mb-2 text-900">What does "free updates" mean?</div>
+                        <p class="mt-0 mb-6 p-0 line-height-3">All updates will be totally free of charge for existing customers for an unlimited period.</p>
+                    </div>
+                    <div class="col-12 lg:col-4 px-2 lg:px-5">
+                        <div class="text-xl text-900 line-height-3 mb-2 text-900">How can I get support?</div>
+                        <p class="mt-0 mb-6 p-0 line-height-3">
+                            Support is provided by PrimeTek via <a href="https://forum.primefaces.org/viewforum.php?f=159" class="text-primary-500 no-underline hover:underline">a dedicated forum channel monitored</a> by PrimeTek support staff.
+                        </p>
+
+                        <div class="text-xl text-900 line-height-3 mb-2 text-900">What does lifetime support mean?</div>
+                        <p class="mt-0 mb-6 p-0 line-height-3">Support service at the forum does not have a time limit.</p>
+
+                        <div class="text-xl text-900 line-height-3 mb-2 text-900">Can I include UI Kit in an open source project?</div>
+                        <p class="mt-0 mb-6 p-0 line-height-3">Due to the license, it is not possible to use the UI Kit in an open source project where the design files are publicly available.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
 </template>
 
 <script>
+import PricingService from '@/service/PricingService';
+
 export default {
+    data() {
+        return {
+            pricing: null
+        };
+    },
+    pricingService: null,
+    created() {
+        this.pricingService = new PricingService();
+    },
+    mounted() {
+        this.pricingService.fetchPricing().then((data) => {
+            this.pricing = data;
+        });
+    },
     methods: {
         isDarkTheme() {
             return this.$appState.darkTheme === true;
@@ -293,7 +308,7 @@ export default {
     },
     computed: {
         coverImage() {
-            return this.$appState.darkTheme ? '/images/uikit/primeone-cover-dark.jpeg' : '/images/uikit/primeone-cover-light.jpeg';
+            return this.$appState.darkTheme ? 'images/uikit/primeone-cover-dark.jpeg' : 'images/uikit/primeone-cover-light.jpeg';
         }
     }
 };
diff --git a/pages/validation/index.vue b/pages/validation/index.vue
index ec999febe..8c8ed6316 100644
--- a/pages/validation/index.vue
+++ b/pages/validation/index.vue
@@ -42,7 +42,7 @@
                                 <label for="email" :class="{ 'p-error': v$.email.$invalid && submitted }">Email*</label>
                             </div>
                             <span v-if="v$.email.$error && submitted">
-                                <span id="email-error" v-for="(error, index) of v$.email.$errors" :key="index">
+                                <span v-for="(error, index) of v$.email.$errors" :key="index" id="email-error">
                                     <small class="p-error">{{ error.$message }}</small>
                                 </span>
                             </span>
@@ -83,7 +83,7 @@
                             </div>
                         </div>
                         <div class="field-checkbox">
-                            <Checkbox id="accept" name="accept" value="Accept" v-model="v$.accept.$model" :class="{ 'p-invalid': v$.accept.$invalid && submitted }" />
+                            <Checkbox id="accept" v-model="v$.accept.$model" name="accept" value="Accept" :class="{ 'p-invalid': v$.accept.$invalid && submitted }" />
                             <label for="accept" :class="{ 'p-error': v$.accept.$invalid && submitted }">I agree to the terms and conditions*</label>
                         </div>
                         <Button type="submit" label="Submit" class="mt-2" />
@@ -92,22 +92,20 @@
             </div>
         </div>
 
-        <ClientOnly>
-            <AppDoc
-                name="VuelidateFormDemo"
-                :sources="sources"
-                :service="['CountryService']"
-                :data="['countries']"
-                github="validation/VuelidateFormDemo.vue"
-                :dependencies="{ '@vuelidate/core': '^2.0.0-alpha.14', '@vuelidate/validators': '^2.0.0-alpha.12' }"
-            />
-        </ClientOnly>
+        <AppDoc
+            name="VuelidateFormDemo"
+            :sources="sources"
+            :service="['CountryService']"
+            :data="['countries']"
+            github="validation/VuelidateFormDemo.vue"
+            :dependencies="{ '@vuelidate/core': '^2.0.0-alpha.14', '@vuelidate/validators': '^2.0.0-alpha.12' }"
+        />
     </div>
 </template>
 
 <script>
-import { email, required } from '@vuelidate/validators';
 import { useVuelidate } from '@vuelidate/core';
+import { email, required } from '@vuelidate/validators';
 import CountryService from '../../service/CountryService';
 
 export default {
diff --git a/pages/virtualscroller/VirtualScrollerDoc.vue b/pages/virtualscroller/VirtualScrollerDoc.vue
index 514c86f8e..3b672d953 100644
--- a/pages/virtualscroller/VirtualScrollerDoc.vue
+++ b/pages/virtualscroller/VirtualScrollerDoc.vue
@@ -1,27 +1,26 @@
 <template>
-    <ClientOnly>
-        <AppDoc name="VirtualScrollerDemo" :sources="sources" github="virtualscroller/VirtualScrollerDemo.vue">
-            <h5>Imports</h5>
-            <pre v-code.script><code>
+    <AppDoc name="VirtualScrollerDemo" :sources="sources" github="virtualscroller/VirtualScrollerDemo.vue">
+        <h5>Imports</h5>
+        <pre v-code.script><code>
 import VirtualScroller from 'primevue/virtualscroller';
 
 </code></pre>
 
-            <h5>Import via CDN</h5>
-            <pre v-code><code>
+        <h5>Import via CDN</h5>
+        <pre v-code><code>
 &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
 
 </code></pre>
 
-            <h5>Getting Started</h5>
-            <p>
-                VirtualScroller is used to display huge data. It periodically adds special elements defined according to the scroll's position to the DOM. The <i>item</i> and <i>itemSize</i> properties and <i>item</i> template are required on
-                component. In addition, an initial array is required based on the total number of items to display.<br />
-                VirtualScroller automatically calculates how many items will be displayed in the view according to <i>itemSize</i> using a specified scroll height. Its scroll height can be adjusted with <i>scrollHeight</i> property or height property
-                of CSS.
-            </p>
+        <h5>Getting Started</h5>
+        <p>
+            VirtualScroller is used to display huge data. It periodically adds special elements defined according to the scroll's position to the DOM. The <i>item</i> and <i>itemSize</i> properties and <i>item</i> template are required on component.
+            In addition, an initial array is required based on the total number of items to display.<br />
+            VirtualScroller automatically calculates how many items will be displayed in the view according to <i>itemSize</i> using a specified scroll height. Its scroll height can be adjusted with <i>scrollHeight</i> property or height property of
+            CSS.
+        </p>
 
-            <pre v-code><code><template v-pre>
+        <pre v-code><code><template v-pre>
 &lt;VirtualScroller :items="basicItems" :itemSize="50"&gt;
     &lt;template v-slot:item="{ item, options }"&gt;
         &lt;div :class="['scroll-item p-2', {'odd': options.odd}]" style="height: 50px"&gt;{{ item }}&lt;/div&gt;
@@ -30,7 +29,7 @@ import VirtualScroller from 'primevue/virtualscroller';
 </template>
 </code></pre>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 export default {
     data() {
         return {
@@ -44,10 +43,10 @@ export default {
 
 </code></pre>
 
-            <h5>Loader</h5>
-            <p>VirtualScroller has a special loader. It can be activated with the <i>showLoader</i> property. In addition, <i>loader</i> template can be used to add custom loaders to item elements.</p>
+        <h5>Loader</h5>
+        <p>VirtualScroller has a special loader. It can be activated with the <i>showLoader</i> property. In addition, <i>loader</i> template can be used to add custom loaders to item elements.</p>
 
-            <pre v-code><code><template v-pre>
+        <pre v-code><code><template v-pre>
 &lt;VirtualScroller :items="basicItems" :itemSize="50" showLoader :delay="250"&gt;
     &lt;template v-slot:item="{ item, options }"&gt;
         &lt;div :class="['scroll-item p-2', {'odd': options.odd}]" style="height: 50px"&gt;{{ item }}&lt;/div&gt;
@@ -61,10 +60,10 @@ export default {
 </template>
 </code></pre>
 
-            <h5>Lazy</h5>
-            <p>Lazy mode is handy to deal with large datasets, instead of loading the entire data, small chunks of data is loaded by invoking <i>lazy-load</i> event.</p>
+        <h5>Lazy</h5>
+        <p>Lazy mode is handy to deal with large datasets, instead of loading the entire data, small chunks of data is loaded by invoking <i>lazy-load</i> event.</p>
 
-            <pre v-code><code><template v-pre>
+        <pre v-code><code><template v-pre>
 &lt;VirtualScroller :items="lazyItems" :itemSize="50" showLoader :delay="250" :loading="lazyLoading" :lazy=true @lazy-load="onLazyLoad"&gt;
     &lt;template v-slot:item="{ item, options }"&gt;
         &lt;div :class="['scroll-item p-2', {'odd': options.odd}]" style="height: 50px"&gt;{{ item }}&lt;/div&gt;
@@ -73,7 +72,7 @@ export default {
 </template>
 </code></pre>
 
-            <pre v-code.script><code>
+        <pre v-code.script><code>
 export default {
     data() {
         return {
@@ -112,285 +111,291 @@ export default {
 
 </code></pre>
 
-            <h5>Properties</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>id</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Unique identifier of the element.</td>
-                        </tr>
-                        <tr>
-                            <td>style</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Inline style of the component.</td>
-                        </tr>
-                        <tr>
-                            <td>class</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the component.</td>
-                        </tr>
-                        <tr>
-                            <td>items</td>
-                            <td>array</td>
-                            <td>null</td>
-                            <td>An array of objects to display.</td>
-                        </tr>
-                        <tr>
-                            <td>itemSize</td>
-                            <td>number / [number, number]</td>
-                            <td>null</td>
-                            <td>The height/width of item according to orientation.</td>
-                        </tr>
-                        <tr>
-                            <td>scrollHeight</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Height of the scroll viewport.</td>
-                        </tr>
-                        <tr>
-                            <td>scrollWidth</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Width of the scroll viewport.</td>
-                        </tr>
-                        <tr>
-                            <td>orientation</td>
-                            <td>string</td>
-                            <td>'vertical'</td>
-                            <td>The orientation of scrollbar, valid values are 'vertical', 'horizontal' and 'both'.</td>
-                        </tr>
-                        <tr>
-                            <td>numToleratedItems</td>
-                            <td>number</td>
-                            <td>null</td>
-                            <td>
-                                Determines how many additional elements to add to the DOM outside of the view. <br />
-                                According to the scrolls made up and down, extra items are added in a certain algorithm in the form of multiples of this number. <br />
-                                Default value is half the number of items shown in the view.
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>delay</td>
-                            <td>number</td>
-                            <td>0</td>
-                            <td>Delay in scroll before new data is loaded.</td>
-                        </tr>
-                        <tr>
-                            <td>lazy</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Defines if data is loaded and interacted with in lazy manner.</td>
-                        </tr>
-                        <tr>
-                            <td>disabled</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>If disabled, the VirtualScroller feature is eliminated and the content is displayed directly.</td>
-                        </tr>
-                        <tr>
-                            <td>loaderDisabled</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Used to implement a custom loader instead of using the loader feature in the VirtualScroller.</td>
-                        </tr>
-                        <tr>
-                            <td>loading</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Whether the data is loaded.</td>
-                        </tr>
-                        <tr>
-                            <td>showSpacer</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Used to implement a custom spacer instead of using the spacer feature in the VirtualScroller.</td>
-                        </tr>
-                        <tr>
-                            <td>showLoader</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Whether to show loader.</td>
-                        </tr>
-                        <tr>
-                            <td>tabindex</td>
-                            <td>number</td>
-                            <td>0</td>
-                            <td>Index of the element in tabbing order.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Properties</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>id</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Unique identifier of the element.</td>
+                    </tr>
+                    <tr>
+                        <td>style</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Inline style of the component.</td>
+                    </tr>
+                    <tr>
+                        <td>class</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the component.</td>
+                    </tr>
+                    <tr>
+                        <td>items</td>
+                        <td>array</td>
+                        <td>null</td>
+                        <td>An array of objects to display.</td>
+                    </tr>
+                    <tr>
+                        <td>itemSize</td>
+                        <td>number / [number, number]</td>
+                        <td>null</td>
+                        <td>The height/width of item according to orientation.</td>
+                    </tr>
+                    <tr>
+                        <td>scrollHeight</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Height of the scroll viewport.</td>
+                    </tr>
+                    <tr>
+                        <td>scrollWidth</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Width of the scroll viewport.</td>
+                    </tr>
+                    <tr>
+                        <td>orientation</td>
+                        <td>string</td>
+                        <td>'vertical'</td>
+                        <td>The orientation of scrollbar, valid values are 'vertical', 'horizontal' and 'both'.</td>
+                    </tr>
+                    <tr>
+                        <td>numToleratedItems</td>
+                        <td>number</td>
+                        <td>null</td>
+                        <td>
+                            Determines how many additional elements to add to the DOM outside of the view. <br />
+                            According to the scrolls made up and down, extra items are added in a certain algorithm in the form of multiples of this number. <br />
+                            Default value is half the number of items shown in the view.
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>delay</td>
+                        <td>number</td>
+                        <td>0</td>
+                        <td>Delay in scroll before new data is loaded.</td>
+                    </tr>
+                    <tr>
+                        <td>lazy</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Defines if data is loaded and interacted with in lazy manner.</td>
+                    </tr>
+                    <tr>
+                        <td>disabled</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>If disabled, the VirtualScroller feature is eliminated and the content is displayed directly.</td>
+                    </tr>
+                    <tr>
+                        <td>loaderDisabled</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Used to implement a custom loader instead of using the loader feature in the VirtualScroller.</td>
+                    </tr>
+                    <tr>
+                        <td>loading</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Whether the data is loaded.</td>
+                    </tr>
+                    <tr>
+                        <td>showSpacer</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Used to implement a custom spacer instead of using the spacer feature in the VirtualScroller.</td>
+                    </tr>
+                    <tr>
+                        <td>showLoader</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Whether to show loader.</td>
+                    </tr>
+                    <tr>
+                        <td>tabindex</td>
+                        <td>number</td>
+                        <td>0</td>
+                        <td>Index of the element in tabbing order.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Events</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>scroll</td>
-                            <td>event: Browser event</td>
-                            <td>Callback to invoke when scroll position changes.</td>
-                        </tr>
-                        <tr>
-                            <td>scroll-index-change</td>
-                            <td>
-                                event.first: First index of the new data range to be loaded.<br />
-                                event.last: Last index of the new data range to be loaded.
-                            </td>
-                            <td>Callback to invoke when scroll position and item's range in view changes.</td>
-                        </tr>
-                        <tr>
-                            <td>lazy-load</td>
-                            <td>
-                                event.first: First index of the new data range to be loaded.<br />
-                                event.last: Last index of the new data range to be loaded.
-                            </td>
-                            <td>Callback to invoke in lazy mode to load new data.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Events</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>scroll</td>
+                        <td>event: Browser event</td>
+                        <td>Callback to invoke when scroll position changes.</td>
+                    </tr>
+                    <tr>
+                        <td>scroll-index-change</td>
+                        <td>
+                            event.first: First index of the new data range to be loaded.<br />
+                            event.last: Last index of the new data range to be loaded.
+                        </td>
+                        <td>Callback to invoke when scroll position and item's range in view changes.</td>
+                    </tr>
+                    <tr>
+                        <td>lazy-load</td>
+                        <td>
+                            event.first: First index of the new data range to be loaded.<br />
+                            event.last: Last index of the new data range to be loaded.
+                        </td>
+                        <td>Callback to invoke in lazy mode to load new data.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Methods</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>scrollTo</td>
-                            <td>
-                                left: Left position of scroll. <br />
-                                top: Top position of scroll <br />
-                                behavior: Behavior of scroll, valid values are 'auto' and 'smooth'
-                            </td>
-                            <td>Scroll to move to a specific position.</td>
-                        </tr>
-                        <tr>
-                            <td>scrollToIndex</td>
-                            <td>
-                                index: Index of item according to orientation mode. <br />
-                                behavior: Behavior of scroll, valid values are 'auto' and 'smooth'
-                            </td>
-                            <td>Scroll to move to a specific item.</td>
-                        </tr>
-                        <tr>
-                            <td>scrollInView</td>
-                            <td>
-                                index: Index of item according to orientation mode. <br />
-                                to: Defines the location of the item in view, valid values are 'to-start' and 'to-end'. <br />
-                                behavior: Behavior of scroll, valid values are 'auto' and 'smooth'
-                            </td>
-                            <td>It is used to move the specified index into the view. It is a method that will usually be needed when keyboard support is added to the virtualScroller component.</td>
-                        </tr>
-                        <tr>
-                            <td>getRenderedRange</td>
-                            <td>-</td>
-                            <td>Returns the range of items added to the DOM.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Methods</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>scrollTo</td>
+                        <td>
+                            left: Left position of scroll. <br />
+                            top: Top position of scroll <br />
+                            behavior: Behavior of scroll, valid values are 'auto' and 'smooth'
+                        </td>
+                        <td>Scroll to move to a specific position.</td>
+                    </tr>
+                    <tr>
+                        <td>scrollToIndex</td>
+                        <td>
+                            index: Index of item according to orientation mode. <br />
+                            behavior: Behavior of scroll, valid values are 'auto' and 'smooth'
+                        </td>
+                        <td>Scroll to move to a specific item.</td>
+                    </tr>
+                    <tr>
+                        <td>scrollInView</td>
+                        <td>
+                            index: Index of item according to orientation mode. <br />
+                            to: Defines the location of the item in view, valid values are 'to-start' and 'to-end'. <br />
+                            behavior: Behavior of scroll, valid values are 'auto' and 'smooth'
+                        </td>
+                        <td>It is used to move the specified index into the view. It is a method that will usually be needed when keyboard support is added to the virtualScroller component.</td>
+                    </tr>
+                    <tr>
+                        <td>getRenderedRange</td>
+                        <td>-</td>
+                        <td>Returns the range of items added to the DOM.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Slots</h5>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>content</td>
-                            <td>
-                                items: An array of objects to display.<br />
-                                styleClass: Style class of the component<br />
-                                contentRef: Referance of the content<br />
-                                getItemOptions: Options of the items<br />
-                                loading: Whether the data is loaded<br />
-                                getLoaderOptions: Loader options of the items while the data is loading.<br />
-                                itemSize: The height/width of item according to orientation.<br />
-                                rows: The number of the rendered rows.<br />
-                                columns: The number of the rendered columns.<br />
-                                spacerStyle: The style of spacer element.<br />
-                                contentStyle: The style of content element.<br />
-                                vertical: Whether the orientation is vertical.<br />
-                                horizontal: Whether the orientation is horizontal.<br />
-                                both: Whether the orientation is both.<br />
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>item</td>
-                            <td>
-                                item: Item instance<br />
-                                options: Options of the item instance
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>loader</td>
-                            <td>options: Options of the loader items</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Slots</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>content</td>
+                        <td>
+                            items: An array of objects to display.<br />
+                            styleClass: Style class of the component<br />
+                            contentRef: Referance of the content<br />
+                            getItemOptions: Options of the items<br />
+                            loading: Whether the data is loaded<br />
+                            getLoaderOptions: Loader options of the items while the data is loading.<br />
+                            itemSize: The height/width of item according to orientation.<br />
+                            rows: The number of the rendered rows.<br />
+                            columns: The number of the rendered columns.<br />
+                            spacerStyle: The style of spacer element.<br />
+                            contentStyle: The style of content element.<br />
+                            vertical: Whether the orientation is vertical.<br />
+                            horizontal: Whether the orientation is horizontal.<br />
+                            both: Whether the orientation is both.<br />
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>item</td>
+                        <td>
+                            item: Item instance<br />
+                            options: Options of the item instance
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>loader</td>
+                        <td>options: Options of the loader items</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Styling</h5>
-            <p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
-            <div class="doc-tablewrapper">
-                <table class="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-virtualscroller</td>
-                            <td>Container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-virtualscroller-content</td>
-                            <td>Content element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-virtualscroller-loader</td>
-                            <td>Loader element.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <h5>Styling</h5>
+        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-virtualscroller</td>
+                        <td>Container element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-virtualscroller-content</td>
+                        <td>Content element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-virtualscroller-loader</td>
+                        <td>Loader element.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
-            <h5>Dependencies</h5>
-            <p>None.</p>
-        </AppDoc>
-    </ClientOnly>
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>VirtualScroller has no specific role is enforced, still you may use any aria role and attributes as any valid attribute is passed to the container element.</p>
+
+        <h6>Keyboard Support</h6>
+        <p>Component does not include any built-in interactive elements.</p>
+
+        <h5>Dependencies</h5>
+        <p>None.</p>
+    </AppDoc>
 </template>
 
 <script>
diff --git a/service/NewsService.js b/service/NewsService.js
index 7190ffbe4..8495f6855 100644
--- a/service/NewsService.js
+++ b/service/NewsService.js
@@ -1,5 +1,5 @@
 export default class NewsService {
     fetchNews() {
-        return fetch('https://www.primefaces.org/cdn/news/primevue.json', { cache: 'no-store' }).then((res) => res.json());
+        return fetch('https://www.primefaces.org/cdn/news/primevue.json', { cache: 'no-store', mode: 'no-cors' }).then((res) => res.json());
     }
 }
diff --git a/service/PricingService.js b/service/PricingService.js
new file mode 100644
index 000000000..32220c031
--- /dev/null
+++ b/service/PricingService.js
@@ -0,0 +1,5 @@
+export default class PricingService {
+    fetchPricing() {
+        return fetch('https://www.primefaces.org/cdn/pricing/uikit.json', { cache: 'no-store' }).then((res) => res.json());
+    }
+}