diff --git a/doc/migration/v4/breakingchanges/PluginDoc.vue b/doc/migration/v4/breakingchanges/PluginDoc.vue
new file mode 100644
index 000000000..84c203133
--- /dev/null
+++ b/doc/migration/v4/breakingchanges/PluginDoc.vue
@@ -0,0 +1,48 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>The <i>PrimeVue</i> plugin is replaced with <i>PrimeVueStyled</i> and <i>PrimeVueUnstyled</i> plugins depending on the theming mode.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
+    <DocSectionCode :code="code2" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+//v3 styled mode
+import PrimeVue from 'primevue/config';
+
+const app = createApp(App);
+app.use(PrimeVue);
+
+//v4 styled mode
+import PrimeVueStyled from 'primevue/styled';
+
+const app = createApp(App);
+app.use(PrimeVueStyled);
+`
+            },
+            code2: {
+                basic: `
+///v3 unstyled mode
+import PrimeVue from 'primevue/config';
+
+const app = createApp(App);
+app.use(PrimeVue, {
+    unstyled: true
+});
+
+///v4 unstyled mode
+import PrimeVueUnstyled from 'primevue/styled';
+
+const app = createApp(App);
+app.use(PrimeVueUnstyled);
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/nuxt/StyledModeDoc.vue b/doc/nuxt/StyledModeDoc.vue
deleted file mode 100644
index d27d5ef1f..000000000
--- a/doc/nuxt/StyledModeDoc.vue
+++ /dev/null
@@ -1,81 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            Styled mode is based on pre-skinned components with opinionated themes like Material, Bootstrap or PrimeOne themes. Theme is the required css file to be imported, visit the
-            <NuxtLink to="/theming/#themes">Themes</NuxtLink> section for the complete list of available themes to choose from.
-        </p>
-        <p>You may use the <i>app.vue</i> file to import a theme using a script.</p>
-        <DocSectionCode :code="code1" hideToggleCode hideStackBlitz />
-        <p>The style section may also be used with <i>@import</i>.</p>
-        <DocSectionCode :code="code2" hideToggleCode hideStackBlitz />
-        <p>Another alternative would be the <i>css</i> option in <i>nuxt.config</i>.</p>
-        <DocSectionCode :code="code3" hideToggleCode importCode hideStackBlitz />
-        <p>
-            The style classes of PrimeVue are defined under the <i>primevue</i> CSS layer to be easier to customize by having low specificity. If you are using a CSS library that styles default HTML elements such as Tailwind Preflight, Bootstrap,
-            Normalize, or similar, a custom CSS layer configuration might be necessary with the <i>cssLayerOrder</i> option to make sure primevue layer is defined afterward. This only applies to Styled Mode as Unstyled Mode does not use any default
-            styles or layers. View the <NuxtLink to="/csslayer">CSS Layer</NuxtLink> guide for more information.
-        </p>
-        <DocSectionCode :code="code4" hideToggleCode importCode hideStackBlitz />
-        <DocSectionCode :code="code5" hideToggleCode importCode hideStackBlitz />
-    </DocSectionText>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code1: {
-                basic: `
-<script>
-import 'primevue/resources/themes/aura-light-green/theme.css'
-<\/script>
-`
-            },
-            code2: {
-                basic: `
-<style>
-@import url("primevue/resources/themes/aura-light-green/theme.css");
-<\/style>
-`
-            },
-            code3: {
-                basic: `
-export default defineNuxtConfig({
-    modules: [
-        'nuxt-primevue'
-    ],
-    primevue: {
-        /* Options */
-    },
-    css: ['primevue/resources/themes/aura-light-green/theme.css']
-})
-`
-            },
-            code4: {
-                basic: `
-/* Reset CSS */
-@layer reset {
-    button,
-    input {
-        /* CSS to Reset */
-    }
-}
-`
-            },
-            code5: {
-                basic: `
-export default defineNuxtConfig({
-    modules: [
-        'nuxt-primevue'
-    ],
-    primevue: {
-        cssLayerOrder: 'reset,primevue'
-    },
-    css: ['primevue/resources/themes/aura-light-green/theme.css']
-})
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/nuxt/UnstyledModeDoc.vue b/doc/nuxt/UnstyledModeDoc.vue
deleted file mode 100644
index aac6d8d13..000000000
--- a/doc/nuxt/UnstyledModeDoc.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            Unstyled mode is disabled by default for all components. Set <i>unstyled</i> as true to enable it globally using a module configuration. Visit the <NuxtLink to="/unstyled">Unstyled mode</NuxtLink> documentation for more information and
-            examples.
-        </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
-        <p>In unstyled mode, you'd need to style the components on your end. If you are using Tailwind CSS, see the <a href="https://tailwind.primevue.org/nuxt/">Tailwind CSS Presets</a> project to get you started.</p>
-        <DocSectionCode :code="code2" hideToggleCode importCode hideStackBlitz />
-    </DocSectionText>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code1: {
-                basic: `
-export default defineNuxtConfig({
-    modules: [
-        'nuxt-primevue'
-    ],
-    primevue: {
-        options: {
-            unstyled: true
-        }
-    }
-})
-`
-            },
-            code2: {
-                basic: `
-import path from 'path';
-
-export default defineNuxtConfig({
-    modules: [
-        'nuxt-primevue'
-    ],
-    primevue: {
-        unstyled: true,
-        importPT: { from: path.resolve(__dirname, './presets/lara/') }      //import and apply preset
-    }
-})
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/nuxt/configuration/ImportThemeDoc.vue b/doc/nuxt/configuration/ImportThemeDoc.vue
new file mode 100644
index 000000000..345f742be
--- /dev/null
+++ b/doc/nuxt/configuration/ImportThemeDoc.vue
@@ -0,0 +1,57 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Configures the theme configuration path for the customizations of a theme in styled mode.</p>
+        <DocSectionCode :code="code1" importCode hideToggleCode hideStackBlitz />
+        <DocSectionCode :code="code2" importCode hideToggleCode hideStackBlitz />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+primevue: {
+    importTheme: { from: '@/themes/mytheme.js' },
+}
+`
+            },
+            code2: {
+                basic: `
+import { definePreset } from 'primevue/themes';
+import PrimeOne from 'primevue/themes/primeone';
+import Aura from 'primevue/themes/primeone/aura';
+
+const MyPreset = definePreset(Aura, {
+    semantic: {
+        primary: {
+            50: '{indigo.50}',
+            100: '{indigo.100}',
+            200: '{indigo.200}',
+            300: '{indigo.300}',
+            400: '{indigo.400}',
+            500: '{indigo.500}',
+            600: '{indigo.600}',
+            700: '{indigo.700}',
+            800: '{indigo.800}',
+            900: '{indigo.900}',
+            950: '{indigo.950}'
+        }
+    }
+});
+
+export default {
+    base: PrimeOne,
+    preset: MyPreset,
+    options: {
+        darkModeSelector: '.p-dark'
+    }
+};
+
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/nuxt/configuration/UnstyledDoc.vue b/doc/nuxt/configuration/UnstyledDoc.vue
new file mode 100644
index 000000000..b3ea0b416
--- /dev/null
+++ b/doc/nuxt/configuration/UnstyledDoc.vue
@@ -0,0 +1,22 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Defines the theming mode, defaults to false.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" importCode hideToggleCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+primevue: {
+    unstyled: true
+}
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/vite/StyledModeDoc.vue b/doc/vite/StyledModeDoc.vue
index 19e9a5943..ee862c7cb 100644
--- a/doc/vite/StyledModeDoc.vue
+++ b/doc/vite/StyledModeDoc.vue
@@ -1,16 +1,7 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>
-            Styled mode is based on pre-skinned components with opinionated themes like Material, Bootstrap or PrimeOne themes. Theme is the required css file to be imported, visit the
-            <NuxtLink to="/theming/#themes">Themes</NuxtLink> section for the complete list of available themes to choose from.
-        </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
-        <p>
-            The style classes of PrimeVue are defined under the <i>primevue</i> CSS layer to be easier to customize by having low specificity. If you are using a CSS library that styles default HTML elements such as Tailwind Preflight, Bootstrap,
-            Normalize, or similar, a custom CSS layer configuration might be necessary. This only applies to Styled Mode as Unstyled Mode does not use any default styles or layers. View the <NuxtLink to="/csslayer">CSS Layer</NuxtLink> guide for more
-            information.
-        </p>
-        <DocSectionCode :code="code2" hideToggleCode importCode hideStackBlitz />
+        <p>Styled mode is based on pre-skinned components with opinionated themes, default theme Aura with emerald as the primary color. See the <NuxtLink to="/theming/styled">styled mode</NuxtLink> documentation to for customization.</p>
+        <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
     </DocSectionText>
 </template>
 
@@ -18,24 +9,13 @@
 export default {
     data() {
         return {
-            code1: {
+            code: {
                 basic: `
-//in main.js
-import 'primevue/resources/themes/aura-light-green/theme.css'
-`
-            },
-            code2: {
-                basic: `
-/* Order */
-@layer reset, primevue;
+import { createApp } from 'vue';
+import PrimeVueStyled from 'primevue/styled';
 
-/* Reset CSS */
-@layer reset {
-    button,
-    input {
-        /* CSS to Reset */
-    }
-}
+const app = createApp(App);
+app.use(PrimeVueStyled);
 `
             }
         };
diff --git a/doc/vite/UnstyledModeDoc.vue b/doc/vite/UnstyledModeDoc.vue
index c82feb73b..efc01a442 100644
--- a/doc/vite/UnstyledModeDoc.vue
+++ b/doc/vite/UnstyledModeDoc.vue
@@ -1,11 +1,8 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>
-            Unstyled mode is disabled by default for all components. Using the PrimeVue plugin during installation, set <i>unstyled</i> as true to enable it globally. Visit the <NuxtLink to="/unstyled">Unstyled mode</NuxtLink> documentation for more
-            information and examples.
-        </p>
+        <p>In unstyled mode, the components do not include any CSS so you'd need to style the components on your end. Visit the <NuxtLink to="/unstyled">Unstyled mode</NuxtLink> documentation for more information and examples.</p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
-        <p>In unstyled mode, you'd need to style the components on your end. If you are using Tailwind CSS, see the <a href="https://tailwind.primevue.org/vite/">Tailwind CSS Presets</a> project to get you started.</p>
+        <p>If you are using Tailwind CSS, see the <a href="https://tailwind.primevue.org/vite/">Tailwind CSS Presets</a> project to get you started with styling the components with Tailwind utility classes.</p>
         <DocSectionCode :code="code2" hideToggleCode importCode hideStackBlitz />
     </DocSectionText>
 </template>
@@ -17,23 +14,20 @@ export default {
             code1: {
                 basic: `
 import { createApp } from "vue";
-import PrimeVue from "primevue/config";
+import PrimeVueUnstyled from "primevue/config";
 const app = createApp(App);
 
-app.use(PrimeVue, {
-    unstyled: true
-});
+app.use(PrimeVueUnstyled);
 `
             },
             code2: {
                 basic: `
 import { createApp } from 'vue';
-import PrimeVue from 'primevue/config';
+import PrimeVueUnstyled from 'primevue/config';
 import Lara from '@/presets/lara';      //import preset
 
 const app = createApp(App);
-app.use(PrimeVue, {
-    unstyled: true,
+app.use(PrimeVueUnstyled, {
     pt: Lara                            //apply preset
 });
 `
diff --git a/doc/vite/UsageDoc.vue b/doc/vite/UsageDoc.vue
index 0683096eb..689d913ff 100644
--- a/doc/vite/UsageDoc.vue
+++ b/doc/vite/UsageDoc.vue
@@ -1,6 +1,9 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Each component can be imported and registered individually so that you only bundle what you use. Import path is available in the documentation of the corresponding component.</p>
+        <p>
+            Each component can be imported and registered individually so that you only bundle what you use. Import path is available in the documentation of the corresponding component. You may also use
+            <NuxtLink to="/autoimport">auto imports</NuxtLink> via the unplugin-vue-components plugin.
+        </p>
     </DocSectionText>
     <div class="card flex justify-content-center">
         <Button label="Check" icon="pi pi-check" />
diff --git a/pages/migration/v4/index.vue b/pages/migration/v4/index.vue
index 1a76404f6..9c2ece647 100644
--- a/pages/migration/v4/index.vue
+++ b/pages/migration/v4/index.vue
@@ -19,6 +19,7 @@
 import NewFeaturesDoc from '@/doc/migration/v4/NewFeaturesDoc.vue';
 import OverviewDoc from '@/doc/migration/v4/OverviewDoc.vue';
 import ComponentsDoc from '@/doc/migration/v4/breakingchanges/ComponentsDoc.vue';
+import PluginDoc from '@/doc/migration/v4/breakingchanges/PluginDoc.vue';
 import StyledModeDoc from '@/doc/migration/v4/breakingchanges/StyledModeDoc.vue';
 
 export default {
@@ -39,6 +40,11 @@ export default {
                     id: 'breakingchanges',
                     label: 'Breaking Changes',
                     children: [
+                        {
+                            id: 'pluging',
+                            label: 'Plugin',
+                            component: PluginDoc
+                        },
                         {
                             id: 'styledmode',
                             label: 'Styled Mode',
diff --git a/pages/nuxt/index.vue b/pages/nuxt/index.vue
index 4ca835172..8e2bfdf69 100644
--- a/pages/nuxt/index.vue
+++ b/pages/nuxt/index.vue
@@ -21,16 +21,15 @@
 import DownloadDoc from '@/doc/nuxt/DownloadDoc.vue';
 import ExamplesDoc from '@/doc/nuxt/ExamplesDoc.vue';
 import ModuleSetupDoc from '@/doc/nuxt/ModuleSetupDoc.vue';
-import StyledModeDoc from '@/doc/nuxt/StyledModeDoc.vue';
-import UnstyledModeDoc from '@/doc/nuxt/UnstyledModeDoc.vue';
 import UsageDoc from '@/doc/nuxt/UsageDoc.vue';
-import VideoDoc from '@/doc/nuxt/VideoDoc.vue';
 import CSSLayerOrderDoc from '@/doc/nuxt/configuration/CSSLayerOrderDoc.vue';
 import ComponentsDoc from '@/doc/nuxt/configuration/ComponentsDoc.vue';
 import ComposablesDoc from '@/doc/nuxt/configuration/ComposablesDoc.vue';
 import DirectivesDoc from '@/doc/nuxt/configuration/DirectivesDoc.vue';
 import ImportPTDoc from '@/doc/nuxt/configuration/ImportPTDoc.vue';
+import ImportThemeDoc from '@/doc/nuxt/configuration/ImportThemeDoc.vue';
 import OptionsDoc from '@/doc/nuxt/configuration/OptionsDoc.vue';
+import UnstyledDoc from '@/doc/nuxt/configuration/UnstyledDoc.vue';
 import UsePrimeVueDoc from '@/doc/nuxt/configuration/UsePrimeVueDoc.vue';
 
 export default {
@@ -47,23 +46,6 @@ export default {
                     label: 'Module Setup',
                     component: ModuleSetupDoc
                 },
-                {
-                    id: 'theming',
-                    label: 'Theming',
-                    description: 'PrimeVue has two theming modes; styled or unstyled.',
-                    children: [
-                        {
-                            id: 'styled',
-                            label: 'Styled Mode',
-                            component: StyledModeDoc
-                        },
-                        {
-                            id: 'unstyled',
-                            label: 'Unstyled Mode',
-                            component: UnstyledModeDoc
-                        }
-                    ]
-                },
                 {
                     id: 'usage',
                     label: 'Usage',
@@ -78,6 +60,11 @@ export default {
                             label: 'usePrimeVue',
                             component: UsePrimeVueDoc
                         },
+                        {
+                            id: 'unstyled',
+                            label: 'unstyled',
+                            component: UnstyledDoc
+                        },
                         {
                             id: 'options',
                             label: 'options',
@@ -103,6 +90,11 @@ export default {
                             label: 'importPT',
                             component: ImportPTDoc
                         },
+                        {
+                            id: 'importtheme',
+                            label: 'importTheme',
+                            component: ImportThemeDoc
+                        },
                         {
                             id: 'layerorder',
                             label: 'cssLayerOrder',
@@ -114,11 +106,6 @@ export default {
                     id: 'examples',
                     label: 'Examples',
                     component: ExamplesDoc
-                },
-                {
-                    id: 'video',
-                    label: 'Video Tutorial',
-                    component: VideoDoc
                 }
             ]
         };
diff --git a/pages/vite/index.vue b/pages/vite/index.vue
index f3d9baad7..7a6ac2cb5 100644
--- a/pages/vite/index.vue
+++ b/pages/vite/index.vue
@@ -22,7 +22,6 @@ import PluginDoc from '@/doc/vite/PluginDoc.vue';
 import StyledModeDoc from '@/doc/vite/StyledModeDoc.vue';
 import UnstyledModeDoc from '@/doc/vite/UnstyledModeDoc.vue';
 import UsageDoc from '@/doc/vite/UsageDoc.vue';
-import CreateVueDoc from '@/doc/vite/videos/CreateVueDoc.vue';
 
 export default {
     data() {
@@ -36,12 +35,9 @@ export default {
                 {
                     id: 'plugin',
                     label: 'Plugin',
-                    component: PluginDoc
-                },
-                {
-                    id: 'theming',
-                    label: 'Theming',
-                    description: 'PrimeVue has two theming modes; styled or unstyled.',
+                    component: PluginDoc,
+                    description: `PrimeVue plugin is required to be installed as an application plugin to set up the default configuration. The plugin is lightweight, only sets up the configuration object without affecting your application. PrimeVue has two plugins; Styled and Unstyled. If you are
+                        just getting started, we suggest to using the styled mode.`,
                     children: [
                         {
                             id: 'styled',
@@ -64,11 +60,6 @@ export default {
                     id: 'examples',
                     label: 'Examples',
                     component: ExamplesDoc
-                },
-                {
-                    id: 'videos',
-                    label: 'Video Tutorial',
-                    component: CreateVueDoc
                 }
             ]
         };