diff --git a/assets/menu/menu.json b/assets/menu/menu.json
index ac281d134..aae0ce6c8 100644
--- a/assets/menu/menu.json
+++ b/assets/menu/menu.json
@@ -12,14 +12,6 @@
                     "name": "Configuration",
                     "to": "/configuration"
                 },
-                {
-                    "name": "FilterService",
-                    "to": "/filterservice"
-                },
-                {
-                    "name": "Locale",
-                    "to": "/locale"
-                },
                 {
                     "name": "Accessibility",
                     "to": "/accessibility"
@@ -443,10 +435,6 @@
                     "name": "Overview",
                     "to": "/theming"
                 },
-                {
-                    "name": "Theme Designer",
-                    "href": "https://www.primefaces.org/designer/primevue"
-                },
                 {
                     "name": "Visual Editor",
                     "href": "https://designer.primevue.org"
@@ -486,10 +474,32 @@
             "icon": "pi pi-table",
             "href": "https://www.primefaces.org/primeflex"
         },
+        {
+            "name": "Support",
+            "icon": "pi pi-question",
+            "children": [
+                {
+                    "name": "Discord Server",
+                    "href": "https://discord.gg/gzKFYnpmCY"
+                },
+                {
+                    "name": "Forum",
+                    "href": "https://forum.primefaces.org/viewforum.php?f=57"
+                },
+                {
+                    "name": "PRO Support",
+                    "to": "/support"
+                }
+            ]
+        },
         {
             "name": "Discover",
             "icon": "pi pi-search",
             "children": [
+                {
+                    "name": "About Us",
+                    "to": "/team"
+                },
                 {
                     "name": "Roadmap",
                     "to": "/roadmap"
@@ -523,24 +533,6 @@
                     "href": "https://gear.primefaces.org"
                 }
             ]
-        },
-        {
-            "name": "Support",
-            "icon": "pi pi-question",
-            "children": [
-                {
-                    "name": "Discord Server",
-                    "href": "https://discord.gg/gzKFYnpmCY"
-                },
-                {
-                    "name": "Forum",
-                    "href": "https://forum.primefaces.org/viewforum.php?f=57"
-                },
-                {
-                    "name": "PRO Support",
-                    "to": "/support"
-                }
-            ]
         }
     ]
 }
diff --git a/doc/accessibility/IntroductionDoc.vue b/doc/accessibility/IntroductionDoc.vue
index 70ab0dee3..f2f862914 100644
--- a/doc/accessibility/IntroductionDoc.vue
+++ b/doc/accessibility/IntroductionDoc.vue
@@ -1,4 +1,5 @@
 <template>
+    <p class="line-height-3 bg-indigo-600 text-white p-3 text-lg" style="border-radius: 10px">PrimeVue has WCAG 2.1 AA level compliancy. Refer to the accessibility documentation of each component for detailed information.</p>
     <DocSectionText v-bind="$attrs">
         <p>
             According to the World Health Organization, 15% of the world population has a disability to some degree. As a result, accessibility features in any context such as a ramp for wheelchair users or a multimedia with captions are crucial to
diff --git a/doc/locale/ImportDoc.vue b/doc/configuration/locale/ImportDoc.vue
similarity index 100%
rename from doc/locale/ImportDoc.vue
rename to doc/configuration/locale/ImportDoc.vue
diff --git a/doc/locale/ApiDoc.vue b/doc/configuration/locale/LocaleApiDoc.vue
similarity index 100%
rename from doc/locale/ApiDoc.vue
rename to doc/configuration/locale/LocaleApiDoc.vue
diff --git a/doc/locale/RepositoryDoc.vue b/doc/configuration/locale/RepositoryDoc.vue
similarity index 100%
rename from doc/locale/RepositoryDoc.vue
rename to doc/configuration/locale/RepositoryDoc.vue
diff --git a/doc/locale/SetLocaleDoc.vue b/doc/configuration/locale/SetLocaleDoc.vue
similarity index 100%
rename from doc/locale/SetLocaleDoc.vue
rename to doc/configuration/locale/SetLocaleDoc.vue
diff --git a/doc/confirmdialog/BasicDoc.vue b/doc/confirmdialog/BasicDoc.vue
index 918035c27..73c2c6111 100644
--- a/doc/confirmdialog/BasicDoc.vue
+++ b/doc/confirmdialog/BasicDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>ConfirmPopup is displayed by calling the <i>require</i> method of the <i>$confirm</i> instance by passing the options to customize the Dialog. <i>target</i> attribute is mandatory to align the popup to its caller.</p>
+        <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. <i>target</i> attribute is mandatory to align the popup to its caller.</p>
     </DocSectionText>
     <ConfirmDialog></ConfirmDialog>
     <div class="card flex flex-wrap gap-2 justify-content-center">
diff --git a/doc/confirmdialog/ConfirmationServiceDoc.vue b/doc/confirmdialog/ConfirmationServiceDoc.vue
index 0e9427449..86b1858b4 100644
--- a/doc/confirmdialog/ConfirmationServiceDoc.vue
+++ b/doc/confirmdialog/ConfirmationServiceDoc.vue
@@ -1,7 +1,6 @@
-//TODO:
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>ConfirmDialog is controlled via the <i>ConfirmationService</i> that needs to be installed globally before the application instance is created.</p>
+        <p>ConfirmDialog is controlled via the <i>ConfirmationService</i> that needs to be installed as an application plugin.</p>
     </DocSectionText>
     <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
diff --git a/doc/confirmpopup/BasicDoc.vue b/doc/confirmpopup/BasicDoc.vue
index 111be2061..a5d68aab1 100644
--- a/doc/confirmpopup/BasicDoc.vue
+++ b/doc/confirmpopup/BasicDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <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>
+        <p>ConfirmDialog 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>
     </DocSectionText>
     <ConfirmPopup></ConfirmPopup>
     <div class="card flex flex-wrap gap-2 justify-content-center">
diff --git a/doc/confirmpopup/ConfirmationServiceDoc.vue b/doc/confirmpopup/ConfirmationServiceDoc.vue
index 0e9427449..af619b0c3 100644
--- a/doc/confirmpopup/ConfirmationServiceDoc.vue
+++ b/doc/confirmpopup/ConfirmationServiceDoc.vue
@@ -1,7 +1,6 @@
-//TODO:
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>ConfirmDialog is controlled via the <i>ConfirmationService</i> that needs to be installed globally before the application instance is created.</p>
+        <p>ConfirmPopup is controlled via the <i>ConfirmationService</i> that needs to be installed as an application plugin.</p>
     </DocSectionText>
     <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
diff --git a/doc/dynamicdialog/BasicDoc.vue b/doc/dynamicdialog/BasicDoc.vue
deleted file mode 100644
index 1fe7d326d..000000000
--- a/doc/dynamicdialog/BasicDoc.vue
+++ /dev/null
@@ -1,370 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Dialogs can be created dynamically with any component as the content using a DialogService. Ideal location of a DynamicDialog is the main application template so that it can be used by any component within the application.</p>
-    </DocSectionText>
-    <div class="card flex justify-content-center">
-        <Button label="Select a Product" icon="pi pi-search" @click="showProducts" />
-
-        <DynamicDialog />
-    </div>
-    <DocSectionCode :code="code" :extFiles="extFiles" :service="['ProductService']" />
-</template>
-
-<script>
-import Button from 'primevue/button';
-import { h } from 'vue';
-import ProductListDemo from './demo/ProductListDemo';
-
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Button label="Select a Product" icon="pi pi-search" @click="showProducts" />
-
-<DynamicDialog />`,
-                options: `
-<template>
-    <div class="card flex justify-content-center">
-        <Button label="Select a Product" icon="pi pi-search" @click="showProducts" />
-        <Toast />
-        <DynamicDialog />
-    </div>
-</template>
-
-<script>
-import Button from 'primevue/button';
-import { h, defineAsyncComponent } from 'vue';
-const ProductListDemo = defineAsyncComponent(() => import('./components/ProductListDemo.vue'));
-
-export default {
-    methods: {
-        showProducts() {
-            const dialogRef = this.$dialog.open(ProductListDemo, {
-                props: {
-                    header: 'Product List',
-                    style: {
-                        width: '50vw'
-                    },
-                    breakpoints: {
-                        '960px': '75vw',
-                        '640px': '90vw'
-                    },
-                    modal: true
-                },
-                templates: {
-                    footer: () => {
-                        return [
-                            h(Button, { label: 'No', icon: 'pi pi-times', onClick: () => dialogRef.close({ buttonType: 'No' }), class: 'p-button-text' }),
-                            h(Button, { label: 'Yes', icon: 'pi pi-check', onClick: () => dialogRef.close({ buttonType: 'Yes' }), autofocus: true })
-                        ];
-                    }
-                },
-                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 };
-
-                        this.$toast.add({ severity: 'info', ...summary_and_detail, life: 3000 });
-                    }
-                }
-            });
-        }
-    }
-}
-<\/script>`,
-                composition: `
-<template>
-    <div class="card flex justify-content-center">
-        <Button label="Select a Product" icon="pi pi-search" @click="showProducts" />
-        <Toast />
-        <DynamicDialog />
-    </div>
-</template>
-
-<script setup>
-import { h, defineAsyncComponent } from 'vue';
-import { useDialog } from 'primevue/usedialog';
-import { useToast } from 'primevue/usetoast';
-import Button from 'primevue/button';
-const ProductListDemo = defineAsyncComponent(() => import('./components/ProductListDemo.vue'));
-
-const dialog = useDialog();
-const toast = useToast();
-
-const showProducts = () => {
-    const dialogRef = dialog.open(ProductListDemo, {
-        props: {
-            header: 'Product List',
-            style: {
-                width: '50vw',
-            },
-            breakpoints:{
-                '960px': '75vw',
-                '640px': '90vw'
-            },
-            modal: true
-        },
-        templates: {
-            footer: () => {
-                return [
-                    h(Button, { label: "No", icon: "pi pi-times", onClick: () => dialogRef.close({ buttonType: 'No' }), class: "p-button-text" }),
-                    h(Button, { label: "Yes", icon: "pi pi-check", onClick: () => dialogRef.close({ buttonType: 'Yes' }), autofocus: true})
-                ]
-            }
-        },
-        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 };
-
-                toast.add({ severity:'info', ...summary_and_detail, life: 3000 });
-            }
-        }
-    });
-}
-<\/script>`,
-                data: `
-/* ProductService */        
-{
-    id: '1000',
-    code: 'f230fh0g3',
-    name: 'Bamboo Watch',
-    description: 'Product Description',
-    image: 'bamboo-watch.jpg',
-    price: 65,
-    category: 'Accessories',
-    quantity: 24,
-    inventoryStatus: 'INSTOCK',
-    rating: 5
-},
-...`
-            },
-            extFiles: {
-                options: {
-                    'src/components/ProductListDemo.vue': {
-                        content: `
-<template>
-	<div>
-        <div class="flex justify-content-end mt-1 mb-3">
-            <Button icon="pi pi-external-link" label="Nested Dialog" outlined severity="success" @click="showInfo" />
-        </div>
-        <DataTable :value="products">
-			<Column field="code" header="Code"></Column>
-			<Column field="name" header="Name"></Column>
-            <Column header="Image">
-                <template #body="slotProps">
-                    <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="shadow-2 w-4rem" />
-                </template>
-            </Column>
-			<Column field="category" header="Category"></Column>
-			<Column field="quantity" header="Quantity"></Column>
-            <Column style="width:5rem">
-                <template #body="slotProps">
-                    <Button type="button" icon="pi pi-plus" text rounded @click="selectProduct(slotProps.data)"></Button>
-                </template>
-            </Column>
-		</DataTable>
-
-	</div>
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-import InfoDemo from './InfoDemo.vue';
-
-export default {
-    inject: ['dialogRef'],
-    data() {
-        return {
-            products: null
-        }
-    },
-    mounted() {
-        ProductService.getProductsSmall().then(data => this.products = data.slice(0,5));
-    },
-    methods: {
-        selectProduct(data) {
-            this.dialogRef.close(data);
-        },
-        showInfo() {
-            this.$dialog.open(InfoDemo, {
-                props: {
-                    header: 'Information',
-                    modal: true,
-                    dismissableMask: true
-                },
-                data: {
-                    totalProducts: this.products ? this.products.length : 0
-                }
-            });
-        }
-    }
-}
-<\/script>`
-                    },
-                    'src/components/InfoDemo.vue': {
-                        content: `
-<template>
-    <div>
-        <p>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>
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    inject: ['dialogRef'],
-    data() {
-        return {
-            totalProducts: 0
-        }
-    },
-    mounted() {
-        this.totalProducts = this.dialogRef.data.totalProducts;
-    },
-    methods: {
-        closeDialog() {
-            this.dialogRef.close();
-        }
-    }
-}
-<\/script>
-                            `
-                    }
-                },
-                composition: {
-                    'src/components/ProductListDemo.vue': {
-                        content: `
-<template>
-	<div>
-        <div class="flex justify-content-end mt-1 mb-3">
-            <Button icon="pi pi-external-link" label="Nested Dialog" outlined severity="success" @click="showInfo" />
-        </div>
-        <DataTable :value="products">
-			<Column field="code" header="Code"></Column>
-			<Column field="name" header="Name"></Column>
-            <Column header="Image">
-                <template #body="slotProps">
-                    <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="shadow-2 w-4rem" />
-                </template>
-            </Column>
-			<Column field="category" header="Category"></Column>
-			<Column field="quantity" header="Quantity"></Column>
-            <Column style="width:5rem">
-                <template #body="slotProps">
-                    <Button type="button" icon="pi pi-plus" text rounded @click="selectProduct(slotProps.data)"></Button>
-                </template>
-            </Column>
-		</DataTable>
-
-	</div>
-</template>
-
-<script setup>
-import { ref, onMounted, inject } from "vue";
-import { useDialog } from "primevue/usedialog";
-import { ProductService } from "@/service/ProductService";
-import InfoDemo from "./InfoDemo.vue";
-
-const dialogRef = inject("dialogRef");
-const dialog = useDialog();
-const products = ref(null);
-
-onMounted(() => {
-    ProductService
-        .getProductsSmall()
-        .then((data) => (products.value = data.slice(0, 5)));
-});
-
-const selectProduct = (data) => {
-    dialogRef.value.close(data);
-};
-
-const showInfo = () => {
-    dialog.open(InfoDemo, {
-        props: {
-            header: "Information",
-            modal: true,
-            dismissableMask: true,
-        },
-        data: {
-            totalProducts: products.value ? products.value.length : 0,
-        }
-    });
-};
-<\/script>`
-                    },
-                    'src/components/InfoDemo.vue': {
-                        content: `
-<template>
-    <div>
-        <p>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>
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted, inject } from "vue";
-
-const totalProducts = ref(0);
-const dialogRef = inject("dialogRef");
-
-onMounted(() => {
-    totalProducts.value = dialogRef.value.data.totalProducts;
-});
-
-const closeDialog = () => {
-    dialogRef.value.close();
-};
-<\/script>
-                            `
-                    }
-                }
-            }
-        };
-    },
-    methods: {
-        showProducts() {
-            const dialogRef = this.$dialog.open(ProductListDemo, {
-                props: {
-                    header: 'Product List',
-                    style: {
-                        width: '50vw'
-                    },
-                    breakpoints: {
-                        '960px': '75vw',
-                        '640px': '90vw'
-                    },
-                    modal: true
-                },
-                templates: {
-                    footer: () => {
-                        return [
-                            h(Button, { label: 'No', icon: 'pi pi-times', onClick: () => dialogRef.close({ buttonType: 'No' }), class: 'p-button-text' }),
-                            h(Button, { label: 'Yes', icon: 'pi pi-check', onClick: () => dialogRef.close({ buttonType: 'Yes' }), autofocus: true })
-                        ];
-                    }
-                },
-                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 };
-
-                        this.$toast.add({ severity: 'info', ...summary_and_detail, life: 3000 });
-                    }
-                }
-            });
-        }
-    }
-};
-</script>
diff --git a/doc/dynamicdialog/CustomizingDialogDoc.vue b/doc/dynamicdialog/CustomizationDoc.vue
similarity index 100%
rename from doc/dynamicdialog/CustomizingDialogDoc.vue
rename to doc/dynamicdialog/CustomizationDoc.vue
diff --git a/doc/dynamicdialog/DialogServiceDoc.vue b/doc/dynamicdialog/DialogServiceDoc.vue
index 5ca6bd8a7..fb7c2a477 100644
--- a/doc/dynamicdialog/DialogServiceDoc.vue
+++ b/doc/dynamicdialog/DialogServiceDoc.vue
@@ -1,22 +1,36 @@
-//TODO:
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Dynamic dialogs require the <i>DialogService</i> to be configured globally.</p>
+        <p>Dynamic dialogs are controlled via the <i>DialogService</i> that needs to be installed as an application plugin.</p>
     </DocSectionText>
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <div class="doc-section-description">
+        <p><i>$dialog</i> is available as a property in the application instance for Options API. The service can be injected with the <i>useDialog</i> function for Composition API.</p>
+    </div>
+    <DocSectionCode :code="code2" import hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
 export default {
     data() {
         return {
-            code: {
+            code1: {
                 basic: `
 import {createApp} from 'vue';
 import DialogService from 'primevue/dialogservice';
 
 const app = createApp(App);
 app.use(DialogService);`
+            },
+            code2: {
+                basic: `
+import { useDialog } from 'primevue/usedialog';
+
+const dialog = useDialog();`,
+                options: `const dialogRef = this.$dialog;`,
+                composition: `
+import { useDialog } from 'primevue/usedialog';
+
+const dialog = useDialog();`
             }
         };
     }
diff --git a/doc/dynamicdialog/UsageDoc.vue b/doc/dynamicdialog/UsageDoc.vue
index 5643129e0..6c5898c0c 100644
--- a/doc/dynamicdialog/UsageDoc.vue
+++ b/doc/dynamicdialog/UsageDoc.vue
@@ -1,23 +1,373 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p><i>$dialog</i> is available as a property in the application instance for Options API. The service can be injected with the <i>useDialog</i> function for Composition API.</p>
+        <p>
+            Dialogs can be created dynamically with any component as the content using a DialogService along with a <i>DynamicDialog</i> component. Ideal location of a DynamicDialog is the main template so that it can be used by any component within
+            the application.
+        </p>
     </DocSectionText>
-    <DocSectionCode :code="code" import hideCodeSandbox hideStackBlitz />
+    <div class="card flex justify-content-center">
+        <Button label="Select a Product" icon="pi pi-search" @click="showProducts" />
+
+        <DynamicDialog />
+    </div>
+    <DocSectionCode :code="code" :extFiles="extFiles" :service="['ProductService']" />
 </template>
 
 <script>
+import Button from 'primevue/button';
+import { h } from 'vue';
+import ProductListDemo from './demo/ProductListDemo';
+
 export default {
     data() {
         return {
             code: {
-                basic: `const dialogRef = this.$dialog;`,
-                options: `const dialogRef = this.$dialog;`,
-                composition: `
-import { useDialog } from 'primevue/usedialog';
+                basic: `
+<Button label="Select a Product" icon="pi pi-search" @click="showProducts" />
 
-const dialog = useDialog();`
+<DynamicDialog />`,
+                options: `
+<template>
+    <div class="card flex justify-content-center">
+        <Button label="Select a Product" icon="pi pi-search" @click="showProducts" />
+        <Toast />
+        <DynamicDialog />
+    </div>
+</template>
+
+<script>
+import Button from 'primevue/button';
+import { h, defineAsyncComponent } from 'vue';
+const ProductListDemo = defineAsyncComponent(() => import('./components/ProductListDemo.vue'));
+
+export default {
+    methods: {
+        showProducts() {
+            const dialogRef = this.$dialog.open(ProductListDemo, {
+                props: {
+                    header: 'Product List',
+                    style: {
+                        width: '50vw'
+                    },
+                    breakpoints: {
+                        '960px': '75vw',
+                        '640px': '90vw'
+                    },
+                    modal: true
+                },
+                templates: {
+                    footer: () => {
+                        return [
+                            h(Button, { label: 'No', icon: 'pi pi-times', onClick: () => dialogRef.close({ buttonType: 'No' }), class: 'p-button-text' }),
+                            h(Button, { label: 'Yes', icon: 'pi pi-check', onClick: () => dialogRef.close({ buttonType: 'Yes' }), autofocus: true })
+                        ];
+                    }
+                },
+                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 };
+
+                        this.$toast.add({ severity: 'info', ...summary_and_detail, life: 3000 });
+                    }
+                }
+            });
+        }
+    }
+}
+<\/script>`,
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <Button label="Select a Product" icon="pi pi-search" @click="showProducts" />
+        <Toast />
+        <DynamicDialog />
+    </div>
+</template>
+
+<script setup>
+import { h, defineAsyncComponent } from 'vue';
+import { useDialog } from 'primevue/usedialog';
+import { useToast } from 'primevue/usetoast';
+import Button from 'primevue/button';
+const ProductListDemo = defineAsyncComponent(() => import('./components/ProductListDemo.vue'));
+
+const dialog = useDialog();
+const toast = useToast();
+
+const showProducts = () => {
+    const dialogRef = dialog.open(ProductListDemo, {
+        props: {
+            header: 'Product List',
+            style: {
+                width: '50vw',
+            },
+            breakpoints:{
+                '960px': '75vw',
+                '640px': '90vw'
+            },
+            modal: true
+        },
+        templates: {
+            footer: () => {
+                return [
+                    h(Button, { label: "No", icon: "pi pi-times", onClick: () => dialogRef.close({ buttonType: 'No' }), class: "p-button-text" }),
+                    h(Button, { label: "Yes", icon: "pi pi-check", onClick: () => dialogRef.close({ buttonType: 'Yes' }), autofocus: true})
+                ]
+            }
+        },
+        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 };
+
+                toast.add({ severity:'info', ...summary_and_detail, life: 3000 });
+            }
+        }
+    });
+}
+<\/script>`,
+                data: `
+/* ProductService */        
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...`
+            },
+            extFiles: {
+                options: {
+                    'src/components/ProductListDemo.vue': {
+                        content: `
+<template>
+	<div>
+        <div class="flex justify-content-end mt-1 mb-3">
+            <Button icon="pi pi-external-link" label="Nested Dialog" outlined severity="success" @click="showInfo" />
+        </div>
+        <DataTable :value="products">
+			<Column field="code" header="Code"></Column>
+			<Column field="name" header="Name"></Column>
+            <Column header="Image">
+                <template #body="slotProps">
+                    <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="shadow-2 w-4rem" />
+                </template>
+            </Column>
+			<Column field="category" header="Category"></Column>
+			<Column field="quantity" header="Quantity"></Column>
+            <Column style="width:5rem">
+                <template #body="slotProps">
+                    <Button type="button" icon="pi pi-plus" text rounded @click="selectProduct(slotProps.data)"></Button>
+                </template>
+            </Column>
+		</DataTable>
+
+	</div>
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+import InfoDemo from './InfoDemo.vue';
+
+export default {
+    inject: ['dialogRef'],
+    data() {
+        return {
+            products: null
+        }
+    },
+    mounted() {
+        ProductService.getProductsSmall().then(data => this.products = data.slice(0,5));
+    },
+    methods: {
+        selectProduct(data) {
+            this.dialogRef.close(data);
+        },
+        showInfo() {
+            this.$dialog.open(InfoDemo, {
+                props: {
+                    header: 'Information',
+                    modal: true,
+                    dismissableMask: true
+                },
+                data: {
+                    totalProducts: this.products ? this.products.length : 0
+                }
+            });
+        }
+    }
+}
+<\/script>`
+                    },
+                    'src/components/InfoDemo.vue': {
+                        content: `
+<template>
+    <div>
+        <p>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>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    inject: ['dialogRef'],
+    data() {
+        return {
+            totalProducts: 0
+        }
+    },
+    mounted() {
+        this.totalProducts = this.dialogRef.data.totalProducts;
+    },
+    methods: {
+        closeDialog() {
+            this.dialogRef.close();
+        }
+    }
+}
+<\/script>
+                            `
+                    }
+                },
+                composition: {
+                    'src/components/ProductListDemo.vue': {
+                        content: `
+<template>
+	<div>
+        <div class="flex justify-content-end mt-1 mb-3">
+            <Button icon="pi pi-external-link" label="Nested Dialog" outlined severity="success" @click="showInfo" />
+        </div>
+        <DataTable :value="products">
+			<Column field="code" header="Code"></Column>
+			<Column field="name" header="Name"></Column>
+            <Column header="Image">
+                <template #body="slotProps">
+                    <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="shadow-2 w-4rem" />
+                </template>
+            </Column>
+			<Column field="category" header="Category"></Column>
+			<Column field="quantity" header="Quantity"></Column>
+            <Column style="width:5rem">
+                <template #body="slotProps">
+                    <Button type="button" icon="pi pi-plus" text rounded @click="selectProduct(slotProps.data)"></Button>
+                </template>
+            </Column>
+		</DataTable>
+
+	</div>
+</template>
+
+<script setup>
+import { ref, onMounted, inject } from "vue";
+import { useDialog } from "primevue/usedialog";
+import { ProductService } from "@/service/ProductService";
+import InfoDemo from "./InfoDemo.vue";
+
+const dialogRef = inject("dialogRef");
+const dialog = useDialog();
+const products = ref(null);
+
+onMounted(() => {
+    ProductService
+        .getProductsSmall()
+        .then((data) => (products.value = data.slice(0, 5)));
+});
+
+const selectProduct = (data) => {
+    dialogRef.value.close(data);
+};
+
+const showInfo = () => {
+    dialog.open(InfoDemo, {
+        props: {
+            header: "Information",
+            modal: true,
+            dismissableMask: true,
+        },
+        data: {
+            totalProducts: products.value ? products.value.length : 0,
+        }
+    });
+};
+<\/script>`
+                    },
+                    'src/components/InfoDemo.vue': {
+                        content: `
+<template>
+    <div>
+        <p>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>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted, inject } from "vue";
+
+const totalProducts = ref(0);
+const dialogRef = inject("dialogRef");
+
+onMounted(() => {
+    totalProducts.value = dialogRef.value.data.totalProducts;
+});
+
+const closeDialog = () => {
+    dialogRef.value.close();
+};
+<\/script>
+                            `
+                    }
+                }
             }
         };
+    },
+    methods: {
+        showProducts() {
+            const dialogRef = this.$dialog.open(ProductListDemo, {
+                props: {
+                    header: 'Product List',
+                    style: {
+                        width: '50vw'
+                    },
+                    breakpoints: {
+                        '960px': '75vw',
+                        '640px': '90vw'
+                    },
+                    modal: true
+                },
+                templates: {
+                    footer: () => {
+                        return [
+                            h(Button, { label: 'No', icon: 'pi pi-times', onClick: () => dialogRef.close({ buttonType: 'No' }), class: 'p-button-text' }),
+                            h(Button, { label: 'Yes', icon: 'pi pi-check', onClick: () => dialogRef.close({ buttonType: 'Yes' }), autofocus: true })
+                        ];
+                    }
+                },
+                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 };
+
+                        this.$toast.add({ severity: 'info', ...summary_and_detail, life: 3000 });
+                    }
+                }
+            });
+        }
     }
 };
 </script>
diff --git a/doc/installation/ExamplesDoc.vue b/doc/installation/ExamplesDoc.vue
new file mode 100644
index 000000000..bde488525
--- /dev/null
+++ b/doc/installation/ExamplesDoc.vue
@@ -0,0 +1,19 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>We've created various samples for the popular options in the Vue ecosystem.</p>
+    </DocSectionText>
+    <div class="flex flex-wrap card justify-content-between align-items-center gap-3">
+        <a href="https://github.com/primefaces/primevue-quickstart-create-vue" class="flex flex-column align-items-center">
+            <img src="https://primefaces.org/cdn/primevue/images/logos/vite.svg" alt="Vite" class="w-8rem h-8rem mb-3" />
+            <span class="font-bold text-xl text-900">Vite</span>
+        </a>
+        <a href="https://github.com/primefaces/primevue-quickstart-nuxt3" class="flex flex-column align-items-center">
+            <img src="https://primefaces.org/cdn/primevue/images/logos/nuxt.svg" alt="Nuxt.JS" class="w-8rem h-8rem mb-3" />
+            <span class="font-bold text-xl text-900">Nuxt</span>
+        </a>
+        <a href="https://github.com/primefaces/primevue-quickstart" class="flex flex-column align-items-center">
+            <img src="https://primefaces.org/cdn/primevue/images/logos/vue.svg" alt="Vue CLI" class="w-8rem h-8rem mb-3" />
+            <span class="font-bold text-xl text-900">Vue-CLI</span>
+        </a>
+    </div>
+</template>
diff --git a/doc/configuration/NuxtIntegrationDoc.vue b/doc/installation/NuxtIntegrationDoc.vue
similarity index 95%
rename from doc/configuration/NuxtIntegrationDoc.vue
rename to doc/installation/NuxtIntegrationDoc.vue
index b29455146..2bc5f7e15 100644
--- a/doc/configuration/NuxtIntegrationDoc.vue
+++ b/doc/installation/NuxtIntegrationDoc.vue
@@ -2,12 +2,12 @@
     <DocSectionText v-bind="$attrs">
         <p>PrimeVue can easily be used with Nuxt 3 using a custom plugin.</p>
 
-        <h6>nuxt.config.js</h6>
+        <h3>nuxt.config.js</h3>
         <p>Open the nuxt configuration file and add the css dependencies.</p>
 
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 
-        <h6>primevue.js</h6>
+        <h3>primevue.js</h3>
         <p>Create a file like <i>primevue.js</i> under the plugins directory for the configuration.</p>
 
         <DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
diff --git a/doc/configuration/PropCasesDoc.vue b/doc/installation/PropCasesDoc.vue
similarity index 100%
rename from doc/configuration/PropCasesDoc.vue
rename to doc/installation/PropCasesDoc.vue
diff --git a/doc/installation/videos/CreateVueDoc.vue b/doc/installation/videos/CreateVueDoc.vue
index 6d64da20f..cd2836e41 100644
--- a/doc/installation/videos/CreateVueDoc.vue
+++ b/doc/installation/videos/CreateVueDoc.vue
@@ -1,7 +1,7 @@
 <template>
     <DocSectionText v-bind="$attrs">
         <p>
-            <a alt="Create Vue App" href="https://github.com/vuejs/create-vue"> Create-Vue </a>
+            <a alt="Create Vue App" href="https://github.com/vuejs/create-vue">Create-Vue</a>
             is the recommended way to start a Vite-powered Vue project.
         </p>
     </DocSectionText>
diff --git a/doc/installation/videos/NuxtDoc.vue b/doc/installation/videos/NuxtDoc.vue
new file mode 100644
index 000000000..b21be3f46
--- /dev/null
+++ b/doc/installation/videos/NuxtDoc.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p><a alt="Nuxt" href="https://nuxtjs.org">Nuxt</a> is an intuitive and extendable way to create type-safe, performant and production-grade full-stack web apps and websites with Vue.</p>
+    </DocSectionText>
+    <div class="video-container">
+        <iframe width="560" height="315" src="https://www.youtube.com/embed/sYGMrRUz9N0" frameborder="0" allowfullscreen></iframe>
+    </div>
+</template>
diff --git a/doc/theming/CustomThemeDoc.vue b/doc/theming/CustomThemeDoc.vue
index 9db4cf05b..50dc601ea 100644
--- a/doc/theming/CustomThemeDoc.vue
+++ b/doc/theming/CustomThemeDoc.vue
@@ -6,9 +6,13 @@
         </p>
         <p>
             There are 3 alternatives to create your own theme. First option is using the Visual Editor, second one is compiling a theme with command line sass and final alternative is embedding scss files within your project to let your build
-            environment do the compilation. In all cases, the generated theme file should be imported to your project.
+            environment do the compilation. In all cases, the generated theme file should be imported to your project. We've created a video tutorial that demonstrates all three options.
         </p>
 
+        <div class="video-container">
+            <iframe width="560" height="315" src="https://www.youtube.com/embed/iZp_l0Yl3Zw" frameborder="0" allowfullscreen></iframe>
+        </div>
+
         <h3>Visual Editor</h3>
         <p>
             <a href="https://designer.primevue.org">Visual Editor</a> is an easy way to quickly customize an existing theme without dealing with the details of the SASS API. The editor allows changing common settings like primary color for built-in
diff --git a/doc/toast/ToastServiceDoc.vue b/doc/toast/ToastServiceDoc.vue
index b3f37590a..8353b0704 100644
--- a/doc/toast/ToastServiceDoc.vue
+++ b/doc/toast/ToastServiceDoc.vue
@@ -1,7 +1,6 @@
-//TODO:
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Toast messages are dynamically created using a <i>ToastService</i> that needs to be installed globally before the application instance is created.</p>
+        <p>Toast component is controlled via the <i>ToastService</i> that needs to be installed as an application plugin.</p>
     </DocSectionText>
     <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
diff --git a/layouts/AppConfigurator.vue b/layouts/AppConfigurator.vue
index deb96b218..7cfdbe53c 100755
--- a/layouts/AppConfigurator.vue
+++ b/layouts/AppConfigurator.vue
@@ -31,13 +31,7 @@
             </section>
 
             <section>
-                <h3>Free Themes</h3>
-                <p>
-                    Built-in component themes created by the
-                    <a href="https://www.primefaces.org/designer/primevue" class="text-primary hover:underline font-medium"> primevue Theme Designer </a>
-                    .
-                </p>
-
+                <h3>Themes</h3>
                 <h4>Bootstrap</h4>
                 <div class="grid free-themes">
                     <div class="col-3 flex flex-column align-items-center gap-2">
diff --git a/pages/configuration/index.vue b/pages/configuration/index.vue
index ea873b51b..fa43e5952 100644
--- a/pages/configuration/index.vue
+++ b/pages/configuration/index.vue
@@ -18,8 +18,9 @@
 <script>
 import ImportDoc from '@/doc/configuration/ImportDoc';
 import InputStyleDoc from '@/doc/configuration/InputStyleDoc';
-import NuxtIntegrationDoc from '@/doc/configuration/NuxtIntegrationDoc';
-import PropCasesDoc from '@/doc/configuration/PropCasesDoc';
+import LocaleApiDoc from '@/doc/configuration/locale/LocaleApiDoc';
+import RepositoryDoc from '@/doc/configuration/locale/RepositoryDoc';
+import SetLocaleDoc from '@/doc/configuration/locale/SetLocaleDoc';
 import RippleDoc from '@/doc/configuration/RippleDoc';
 
 export default {
@@ -31,16 +32,6 @@ export default {
                     label: 'Import',
                     component: ImportDoc
                 },
-                {
-                    id: 'nuxtintegration',
-                    label: 'Nuxt Integration',
-                    component: NuxtIntegrationDoc
-                },
-                {
-                    id: 'propcases',
-                    label: 'Prop Cases',
-                    component: PropCasesDoc
-                },
                 {
                     id: 'ripple',
                     label: 'Ripple',
@@ -50,6 +41,27 @@ export default {
                     id: 'inputstyle',
                     label: 'InputStyle',
                     component: InputStyleDoc
+                },
+                {
+                    id: 'locale',
+                    label: 'Locale',
+                    children: [
+                        {
+                            id: 'setlocale',
+                            label: 'Set Locale',
+                            component: SetLocaleDoc
+                        },
+                        {
+                            id: 'repository',
+                            label: 'Repository',
+                            component: RepositoryDoc
+                        },
+                        {
+                            id: 'localeapi',
+                            label: 'API',
+                            component: LocaleApiDoc
+                        }
+                    ]
                 }
             ]
         };
diff --git a/pages/dynamicdialog/index.vue b/pages/dynamicdialog/index.vue
index 5e121f150..78ae1e5f8 100644
--- a/pages/dynamicdialog/index.vue
+++ b/pages/dynamicdialog/index.vue
@@ -2,7 +2,7 @@
     <DocComponent
         title="Vue Dynamic Dialog Component"
         header="Dynamic Dialog"
-        description="Dynamic Dialog is a Dialog container to display content in an overlay window."
+        description="Dialogs can be created dynamically with any component as the content using a DialogService."
         :componentDocs="docs"
         :apiDocs="['DynamicDialog', 'Dialog', 'DialogService-UseDialog', 'DynamicDialogOptions']"
     />
@@ -10,9 +10,8 @@
 
 <script>
 import AccessibilityDoc from '@/doc/dynamicdialog/AccessibilityDoc';
-import BasicDoc from '@/doc/dynamicdialog/BasicDoc';
 import CloseDialogDoc from '@/doc/dynamicdialog/CloseDialogDoc';
-import CustomizingDialogDoc from '@/doc/dynamicdialog/CustomizingDialogDoc';
+import CustomizationDoc from '@/doc/dynamicdialog/CustomizationDoc';
 import DialogServiceDoc from '@/doc/dynamicdialog/DialogServiceDoc';
 import ImportDoc from '@/doc/dynamicdialog/ImportDoc';
 import OpenDialogDoc from '@/doc/dynamicdialog/OpenDialogDoc';
@@ -39,18 +38,13 @@ export default {
                     component: UsageDoc
                 },
                 {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'opendialog',
-                    label: 'Opening a Dialog',
+                    id: 'open',
+                    label: 'Open',
                     component: OpenDialogDoc
                 },
                 {
-                    id: 'closedialog',
-                    label: 'Closing a Dialog',
+                    id: 'close',
+                    label: 'Close',
                     component: CloseDialogDoc
                 },
                 {
@@ -59,9 +53,9 @@ export default {
                     component: PassingDataDoc
                 },
                 {
-                    id: 'customizingdata',
-                    label: 'Customizing Dialog',
-                    component: CustomizingDialogDoc
+                    id: 'customization',
+                    label: 'Customization',
+                    component: CustomizationDoc
                 },
                 {
                     id: 'accessibility',
diff --git a/pages/installation/index.vue b/pages/installation/index.vue
index 6769ce6ba..fcbe19233 100644
--- a/pages/installation/index.vue
+++ b/pages/installation/index.vue
@@ -17,9 +17,13 @@
 
 <script>
 import DownloadDoc from '@/doc/installation/DownloadDoc';
+import ExamplesDoc from '@/doc/installation/ExamplesDoc';
+import NuxtIntegrationDoc from '@/doc/installation/NuxtIntegrationDoc';
+import PropCasesDoc from '@/doc/installation/PropCasesDoc';
 import StylesDoc from '@/doc/installation/StylesDoc';
 import UsageDoc from '@/doc/installation/UsageDoc';
 import CreateVueDoc from '@/doc/installation/videos/CreateVueDoc';
+import NuxtDoc from '@/doc/installation/videos/NuxtDoc';
 
 export default {
     data() {
@@ -40,6 +44,21 @@ export default {
                     label: 'Usage',
                     component: UsageDoc
                 },
+                {
+                    id: 'propcases',
+                    label: 'Prop Cases',
+                    component: PropCasesDoc
+                },
+                {
+                    id: 'nuxtintegration',
+                    label: 'Nuxt Integration',
+                    component: NuxtIntegrationDoc
+                },
+                {
+                    id: 'examples',
+                    label: 'Examples',
+                    component: ExamplesDoc
+                },
                 {
                     id: 'videos',
                     label: 'Videos',
@@ -49,6 +68,11 @@ export default {
                             id: 'createvue',
                             label: 'CreateVue',
                             component: CreateVueDoc
+                        },
+                        {
+                            id: 'nuxt',
+                            label: 'Nuxt',
+                            component: NuxtDoc
                         }
                     ]
                 }
diff --git a/pages/landing/DesignerSection.vue b/pages/landing/DesignerSection.vue
index 51d266d26..923ebb7f5 100644
--- a/pages/landing/DesignerSection.vue
+++ b/pages/landing/DesignerSection.vue
@@ -48,7 +48,7 @@
                             </div>
                         </div>
 
-                        <a href="https://www.primefaces.org/designer-vue" class="font-semibold p-3 border-round flex align-items-center linkbox active">
+                        <a href="https://designer.primevue.org" 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>
                         </a>
@@ -123,7 +123,7 @@ export default {
             fonts: [
                 { label: 'Arial', value: 'Arial,Helvetica Neue,Helvetica,sans-serif' },
                 { label: 'System', value: '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol' },
-                { label: 'Trebuches MS', value: 'Trebuchet MS,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Tahoma,sans-serif' },
+                { label: 'Trebuchet MS', value: 'Trebuchet MS,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Tahoma,sans-serif' },
                 { label: 'Verdana', value: 'Verdana,Geneva,sans-serif' }
             ],
             selectedCity: null,
diff --git a/pages/landing/FooterSection.vue b/pages/landing/FooterSection.vue
index dc7b69377..ab8bc8e35 100644
--- a/pages/landing/FooterSection.vue
+++ b/pages/landing/FooterSection.vue
@@ -56,7 +56,7 @@
                         <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">
-                        <a href="https://www.primefaces.org/designer/primevue" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Designer</a>
+                        <a href="https://designer.primevue.org" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Designer</a>
                     </li>
                     <li class="mb-4">
                         <router-link to="/colors" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Colors</router-link>
diff --git a/pages/landing/HeaderSection.vue b/pages/landing/HeaderSection.vue
index c8550afd2..a14a993f1 100644
--- a/pages/landing/HeaderSection.vue
+++ b/pages/landing/HeaderSection.vue
@@ -16,16 +16,22 @@
                         </li>
                         <li class="mr-0 lg:mr-2">
                             <a href="https://www.primefaces.org/primeblocks-vue">
-                                <img src="https://primefaces.org/cdn/primevue/images/landing/blocks-icon.svg" alt="primevue templates" />
+                                <img src="https://primefaces.org/cdn/primevue/images/landing/blocks-icon.svg" alt="primevue blocks" />
                                 <span>Blocks</span>
                             </a>
                         </li>
                         <li class="mr-0 lg:mr-2">
-                            <a href="https://www.primefaces.org/designer-vue">
-                                <img src="https://primefaces.org/cdn/primevue/images/landing/designer-icon.svg" alt="primevue templates" />
+                            <a href="https://designer.primevue.org">
+                                <img src="https://primefaces.org/cdn/primevue/images/landing/designer-icon.svg" alt="primevue designer" />
                                 <span>Designer</span>
                             </a>
                         </li>
+                        <li class="mr-0 lg:mr-2">
+                            <router-link to="/uikit">
+                                <img src="/images/landing/uikit-icon.svg" alt="primevue designer" width="30" />
+                                <span>UI Kit</span>
+                            </router-link>
+                        </li>
                         <li class="mr-0 lg:mr-2">
                             <a href="https://www.primefaces.org/store/templates.xhtml">
                                 <img src="https://primefaces.org/cdn/primevue/images/landing/templates-icon.svg" alt="primevue templates" />
diff --git a/pages/landing/HeroSection.vue b/pages/landing/HeroSection.vue
index 480726a83..e553c14c1 100644
--- a/pages/landing/HeroSection.vue
+++ b/pages/landing/HeroSection.vue
@@ -12,7 +12,7 @@
                             </div>
                         </div>
                     </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="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://designer.primevue.org')">
                         <div class="flex flex-column align-items-center">
                             <img src="https://primefaces.org/cdn/primevue/images/landing/designer-icon.svg" alt="primevue templates" />
                             <div class="name">
diff --git a/pages/landing/ThemeSection.vue b/pages/landing/ThemeSection.vue
index 80b10fe00..1f4b2c526 100644
--- a/pages/landing/ThemeSection.vue
+++ b/pages/landing/ThemeSection.vue
@@ -6,7 +6,7 @@
             <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>
-            <a type="button" class="font-medium p-link linkbox mt-4" href="https://www.primefaces.org/designer-vue">more...</a>
+            <a type="button" class="font-medium p-link linkbox mt-4" href="https://designer.primevue.org">more...</a>
         </div>
         <div
             class="themes-main flex mt-7 justify-content-center px-5 lg:px-8"
@@ -52,8 +52,10 @@
                     </Column>
                     <Column header="Agent" sortable sortField="representative.name" style="min-width: 14rem">
                         <template #body="{ data }">
-                            <img :alt="data.representative.name" :src="'https://primefaces.org/cdn/primevue/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
-                            <span>{{ data.representative.name }}</span>
+                            <div class="flex align-items-center gap-2">
+                                <img :alt="data.representative.name" :src="'https://primefaces.org/cdn/primevue/images/avatar/' + data.representative.image" width="32" />
+                                <span>{{ data.representative.name }}</span>
+                            </div>
                         </template>
                     </Column>
                     <Column field="date" header="Date" sortable dataType="date" style="min-width: 8rem">
diff --git a/pages/team/index.vue b/pages/team/index.vue
new file mode 100644
index 000000000..53ae4c69f
--- /dev/null
+++ b/pages/team/index.vue
@@ -0,0 +1,84 @@
+<template>
+    <div>
+        <div class="doc-intro">
+            <h1>Meet the Team</h1>
+            <p>
+                <a href="https://www.primetek.com.tr" class="text-primary hover:underline font-semibold"> PrimeTek </a> is a world renowned vendor of popular UI Component suites including
+                <a href="https://primefaces.org" class="text-primary hover:underline font-semibold"> PrimeFaces </a>, <a href="https://primeng.org" class="text-primary hover:underline font-semibold"> PrimeNG </a>,
+                <a href="https://primereact.org" class="text-primary hover:underline font-semibold"> PrimeReact </a> and
+                <a href="https://primevue.org" class="text-primary hover:underline font-semibold"> PrimeVue </a>
+                . All the members in our team are full time employees of PrimeTek who share the same passion and vision for open source to create awesome UI libraries.
+            </p>
+        </div>
+
+        <div class="card p-8">
+            <div class="flex flex-wrap gap-8">
+                <div class="flex flex-column align-items-center flex-auto">
+                    <img src="https://primefaces.org/cdn/primevue/images/team/cagatay.jpg" class="border-circle mb-4" alt="Cagatay Civici" />
+                    <span class="mb-2 text-xl font-bold">Çağatay Çivici</span>
+                    <span>Founder</span>
+                </div>
+                <div class="flex flex-column align-items-center flex-auto">
+                    <img src="https://primefaces.org/cdn/primevue/images/team/mert.jpg" class="border-circle mb-4" alt="Mert Sincan" />
+                    <span class="mb-2 text-xl font-bold">Mert Sincan</span>
+                    <span>CTO</span>
+                </div>
+                <div class="flex flex-column align-items-center flex-auto">
+                    <img src="https://primefaces.org/cdn/primevue/images/team/onur.jpg" class="border-circle mb-4" alt="Onur Şentüre" />
+                    <span class="mb-2 text-xl font-bold">Onur Şentüre</span>
+                    <span>Design Lead</span>
+                </div>
+                <div class="flex flex-column align-items-center flex-auto">
+                    <img src="https://primefaces.org/cdn/primevue/images/team/dilara.jpg" class="border-circle mb-4" alt="Dilara Can" />
+                    <span class="mb-2 text-xl font-bold">Dilara Güngenci</span>
+                    <span>Business Administration</span>
+                </div>
+                <div class="flex flex-column align-items-center flex-auto">
+                    <img src="https://primefaces.org/cdn/primevue/images/team/cetin.jpg" class="border-circle mb-4" alt="Çetin Çakıroğlu" />
+                    <span class="mb-2 text-xl font-bold">Çetin Çakıroğlu</span>
+                    <span>Front-End Developer</span>
+                </div>
+                <div class="flex flex-column align-items-center flex-auto">
+                    <img src="https://primefaces.org/cdn/primevue/images/team/tugce.jpg" class="border-circle mb-4" alt="Tuğçe Küçükoğlu" />
+                    <span class="mb-2 text-xl font-bold">Tuğçe Küçükoğlu</span>
+                    <span>Front-End Developer</span>
+                </div>
+                <div class="flex flex-column align-items-center flex-auto">
+                    <img src="https://primefaces.org/cdn/primevue/images/team/atakan.jpg" class="border-circle mb-4" alt="Atakan Tepe" />
+                    <span class="mb-2 text-xl font-bold">Atakan Tepe</span>
+                    <span>Front-End Developer</span>
+                </div>
+                <div class="flex flex-column align-items-center flex-auto">
+                    <img src="https://primefaces.org/cdn/primevue/images/team/kerem.jpg" class="border-circle mb-4" alt="Kerem Yıldan" />
+                    <span class="mb-2 text-xl font-bold">Kerem Yıldan</span>
+                    <span>UI/UX Designer</span>
+                </div>
+                <div class="flex flex-column align-items-center flex-auto">
+                    <img src="https://primefaces.org/cdn/primevue/images/team/ulas.jpg" class="border-circle mb-4" alt="Ulaş Turan" />
+                    <span class="mb-2 text-xl font-bold">Ulaş Turan</span>
+                    <span>Front-End Developer</span>
+                </div>
+                <div class="flex flex-column align-items-center flex-auto">
+                    <img src="https://primefaces.org/cdn/primevue/images/team/bugra.jpg" class="border-circle mb-4" alt="Buğra Beydüz" />
+                    <span class="mb-2 text-xl font-bold">Buğra Beydüz</span>
+                    <span>Front-End Developer</span>
+                </div>
+                <div class="flex flex-column align-items-center flex-auto">
+                    <img src="https://primefaces.org/cdn/primevue/images/team/bahadir.jpg" class="border-circle mb-4" alt="Bahadır Sofuoğlu" />
+                    <span class="mb-2 text-xl font-bold">Bahadır Sofuoğlu</span>
+                    <span>Front-End Developer</span>
+                </div>
+                <div class="flex flex-column align-items-center flex-auto">
+                    <img src="https://primefaces.org/cdn/primevue/images/team/aliriza.jpg" class="border-circle mb-4" alt="Alirıza Gücal" />
+                    <span class="mb-2 text-xl font-bold">Ali Rıza Gücal</span>
+                    <span>Front-End Developer</span>
+                </div>
+                <div class="flex flex-column align-items-center flex-auto">
+                    <img src="https://primefaces.org/cdn/primevue/images/team/olgu.jpg" class="border-circle mb-4" alt="Olgu Başak" />
+                    <span class="mb-2 text-xl font-bold">Olgu Başak</span>
+                    <span>Java Web Developer</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/pages/theming/index.vue b/pages/theming/index.vue
index 4d3e8a2e3..498531491 100755
--- a/pages/theming/index.vue
+++ b/pages/theming/index.vue
@@ -40,7 +40,7 @@ export default {
                 },
                 {
                     id: 'builtinthemes',
-                    label: 'Buit-in Themes',
+                    label: 'Built-in Themes',
                     component: BuiltInThemesDoc
                 },
                 {
diff --git a/public/images/landing/uikit-icon.svg b/public/images/landing/uikit-icon.svg
new file mode 100644
index 000000000..71fbe3db5
--- /dev/null
+++ b/public/images/landing/uikit-icon.svg
@@ -0,0 +1,3 @@
+<svg id="Flat" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
+  <path d="M186.61523,94.00049A41.97934,41.97934,0,0,0,162,18.001H94A41.97934,41.97934,0,0,0,69.38477,94.00049a41.93894,41.93894,0,0,0,.00048,67.99939A41.9892,41.9892,0,1,0,136,195.99951V160.948a41.97356,41.97356,0,1,0,50.61523-66.94751ZM188,60.001a26.02916,26.02916,0,0,1-25.98047,25.99951L162,86l-.03857.001L136,86V34.001h26A26.02947,26.02947,0,0,1,188,60.001Zm-120,0a26.02947,26.02947,0,0,1,26-26h26V86H94l-.019.00049A26.02934,26.02934,0,0,1,68,60.001ZM68,128a26.02926,26.02926,0,0,1,25.981-25.99951L94,102.001l26-.00074V153.999L94,154A26.02947,26.02947,0,0,1,68,128Zm26,93.999A25.99951,25.99951,0,1,1,94,170l26-.00073v26.00024A26.02937,26.02937,0,0,1,94,221.999ZM162,154a25.99952,25.99952,0,0,1-.03857-51.999H162l.019-.00049A25.99976,25.99976,0,0,1,162,154Z" fill="#4f8ff7"/>
+</svg>
diff --git a/public/images/logos/nuxt.svg b/public/images/logos/nuxt.svg
new file mode 100644
index 000000000..1cc014898
--- /dev/null
+++ b/public/images/logos/nuxt.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 298"><g fill="none" fill-rule="nonzero"><path fill="#00C58E" d="M227.92099 82.07407l-13.6889 23.7037-46.8148-81.08641L23.7037 273.58025h97.3037c0 13.0912 10.61252 23.7037 23.70371 23.7037H23.70371c-8.46771 0-16.29145-4.52017-20.5246-11.85382-4.23315-7.33366-4.23272-16.36849.00114-23.70174L146.89383 12.83951c4.23415-7.33433 12.0596-11.85252 20.5284-11.85252 8.46878 0 16.29423 4.51819 20.52839 11.85252l39.97037 69.23456z"/><path fill="#2F495E" d="M331.6642 261.7284l-90.05432-155.95062-13.6889-23.7037-13.68888 23.7037-90.04445 155.95061c-4.23385 7.33325-4.23428 16.36808-.00113 23.70174 4.23314 7.33365 12.05689 11.85382 20.5246 11.85382h166.4c8.46946 0 16.29644-4.51525 20.532-11.84955 4.23555-7.3343 4.23606-16.37123.00132-23.706h.01976zM144.7111 273.58024L227.921 129.48148l83.19012 144.09877h-166.4z"/><path fill="#108775" d="M396.04938 285.4321c-4.23344 7.33254-12.05656 11.85185-20.52345 11.85185H311.1111c13.0912 0 23.7037-10.6125 23.7037-23.7037h40.66173L260.09877 73.74815l-18.4889 32.02963-13.68888-23.7037L239.5753 61.8963c4.23416-7.33433 12.0596-11.85252 20.5284-11.85252 8.46879 0 16.29423 4.51819 20.52839 11.85252l115.41728 199.8321c4.23426 7.33395 4.23426 16.36975 0 23.7037z"/></g></svg>
\ No newline at end of file
diff --git a/public/images/logos/vite.svg b/public/images/logos/vite.svg
new file mode 100644
index 000000000..de4aeddc1
--- /dev/null
+++ b/public/images/logos/vite.svg
@@ -0,0 +1,15 @@
+<svg width="410" height="404" viewBox="0 0 410 404" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M399.641 59.5246L215.643 388.545C211.844 395.338 202.084 395.378 198.228 388.618L10.5817 59.5563C6.38087 52.1896 12.6802 43.2665 21.0281 44.7586L205.223 77.6824C206.398 77.8924 207.601 77.8904 208.776 77.6763L389.119 44.8058C397.439 43.2894 403.768 52.1434 399.641 59.5246Z" fill="url(#paint0_linear)"/>
+<path d="M292.965 1.5744L156.801 28.2552C154.563 28.6937 152.906 30.5903 152.771 32.8664L144.395 174.33C144.198 177.662 147.258 180.248 150.51 179.498L188.42 170.749C191.967 169.931 195.172 173.055 194.443 176.622L183.18 231.775C182.422 235.487 185.907 238.661 189.532 237.56L212.947 230.446C216.577 229.344 220.065 232.527 219.297 236.242L201.398 322.875C200.278 328.294 207.486 331.249 210.492 326.603L212.5 323.5L323.454 102.072C325.312 98.3645 322.108 94.137 318.036 94.9228L279.014 102.454C275.347 103.161 272.227 99.746 273.262 96.1583L298.731 7.86689C299.767 4.27314 296.636 0.855181 292.965 1.5744Z" fill="url(#paint1_linear)"/>
+<defs>
+<linearGradient id="paint0_linear" x1="6.00017" y1="32.9999" x2="235" y2="344" gradientUnits="userSpaceOnUse">
+<stop stop-color="#41D1FF"/>
+<stop offset="1" stop-color="#BD34FE"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="194.651" y1="8.81818" x2="236.076" y2="292.989" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFEA83"/>
+<stop offset="0.0833333" stop-color="#FFDD35"/>
+<stop offset="1" stop-color="#FFA800"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/public/images/logos/vue.svg b/public/images/logos/vue.svg
new file mode 100644
index 000000000..a1d285eb2
--- /dev/null
+++ b/public/images/logos/vue.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg version="1.1" viewBox="0 0 261.76 226.69" xmlns="http://www.w3.org/2000/svg"><g transform="matrix(1.3333 0 0 -1.3333 -76.311 313.34)"><g transform="translate(178.06 235.01)"><path d="m0 0-22.669-39.264-22.669 39.264h-75.491l98.16-170.02 98.16 170.02z" fill="#41b883"/></g><g transform="translate(178.06 235.01)"><path d="m0 0-22.669-39.264-22.669 39.264h-36.227l58.896-102.01 58.896 102.01z" fill="#34495e"/></g></g></svg>
diff --git a/public/images/team/aliriza.jpg b/public/images/team/aliriza.jpg
new file mode 100644
index 000000000..7d9f858cd
Binary files /dev/null and b/public/images/team/aliriza.jpg differ
diff --git a/public/images/team/atakan.jpg b/public/images/team/atakan.jpg
new file mode 100644
index 000000000..656dbcc02
Binary files /dev/null and b/public/images/team/atakan.jpg differ
diff --git a/public/images/team/bahadir.jpg b/public/images/team/bahadir.jpg
new file mode 100644
index 000000000..3b35c5879
Binary files /dev/null and b/public/images/team/bahadir.jpg differ
diff --git a/public/images/team/bugra.jpg b/public/images/team/bugra.jpg
new file mode 100644
index 000000000..7ec2140e5
Binary files /dev/null and b/public/images/team/bugra.jpg differ
diff --git a/public/images/team/cagatay.jpg b/public/images/team/cagatay.jpg
new file mode 100644
index 000000000..fb71c7971
Binary files /dev/null and b/public/images/team/cagatay.jpg differ
diff --git a/public/images/team/cetin.jpg b/public/images/team/cetin.jpg
new file mode 100644
index 000000000..024884ff9
Binary files /dev/null and b/public/images/team/cetin.jpg differ
diff --git a/public/images/team/dilara.jpg b/public/images/team/dilara.jpg
new file mode 100644
index 000000000..a79cc7297
Binary files /dev/null and b/public/images/team/dilara.jpg differ
diff --git a/public/images/team/kerem.jpg b/public/images/team/kerem.jpg
new file mode 100644
index 000000000..3a3d6ea29
Binary files /dev/null and b/public/images/team/kerem.jpg differ
diff --git a/public/images/team/mert.jpg b/public/images/team/mert.jpg
new file mode 100644
index 000000000..172c6edbc
Binary files /dev/null and b/public/images/team/mert.jpg differ
diff --git a/public/images/team/olgu.jpg b/public/images/team/olgu.jpg
new file mode 100644
index 000000000..c6b92bf90
Binary files /dev/null and b/public/images/team/olgu.jpg differ
diff --git a/public/images/team/onur.jpg b/public/images/team/onur.jpg
new file mode 100644
index 000000000..215aff55c
Binary files /dev/null and b/public/images/team/onur.jpg differ
diff --git a/public/images/team/tugce.jpg b/public/images/team/tugce.jpg
new file mode 100644
index 000000000..eee66283d
Binary files /dev/null and b/public/images/team/tugce.jpg differ
diff --git a/public/images/team/ulas.jpg b/public/images/team/ulas.jpg
new file mode 100644
index 000000000..14d3efc2f
Binary files /dev/null and b/public/images/team/ulas.jpg differ