diff --git a/doc/cdn/ExampleDoc.vue b/doc/cdn/ExampleDoc.vue
index 0e8199269..a3f7bc290 100644
--- a/doc/cdn/ExampleDoc.vue
+++ b/doc/cdn/ExampleDoc.vue
@@ -20,8 +20,8 @@ export default {
   </head>
   <body>
     <script src="https://unpkg.com/vue@3/dist/vue.global.js"><\/script>
-    <script src="https://unpkg.com/primevue/umd/primevue.min.js"><\/script>
-    <script src="https://unpkg.com/primevue/umd/themes/aura.min.js"><\/script>
+    <script src="https://unpkg.com/primevue@4.0.0-rc.1/umd/primevue.min.js"><\/script>
+    <script src="https://unpkg.com/primevue@4.0.0-rc.1/umd/themes/aura.min.js"><\/script>
 
     <div id="app">
       <p-datepicker v-model="date"></p-datepicker>
diff --git a/doc/cdn/PluginDoc.vue b/doc/cdn/PluginDoc.vue
index 0a24bc585..a4a6b0037 100644
--- a/doc/cdn/PluginDoc.vue
+++ b/doc/cdn/PluginDoc.vue
@@ -1,9 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>
-            PrimeVue plugin is required to be installed as an application plugin to set up the default <NuxtLink to="/configuration">configuration</NuxtLink>. The plugin is lightweight, only sets up the configuration object without affecting your
-            application.
-        </p>
+        <p>PrimeVue plugin is required to be installed as an application plugin to set up the default <NuxtLink to="/configuration">configuration</NuxtLink>.</p>
     </DocSectionText>
     <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
diff --git a/doc/cdn/ScriptDoc.vue b/doc/cdn/ScriptDoc.vue
index 88fba9b8e..b840c3938 100644
--- a/doc/cdn/ScriptDoc.vue
+++ b/doc/cdn/ScriptDoc.vue
@@ -16,8 +16,8 @@ export default {
             code: {
                 basic: `
 https://unpkg.com/vue@3/dist/vue.global.js
-https://unpkg.com/primevue/umd/primevue.min.js
-https://unpkg.com/primevue/umd/themes/{preset}.min.js  // Optional, see theming section.
+https://unpkg.com/primevue@4.0.0-rc.1/umd/primevue.min.js
+https://unpkg.com/primevue@4.0.0-rc.1/umd/themes/aura.min.js  // see theming for alternatives
 `
             }
         };
diff --git a/doc/cdn/ThemingDoc.vue b/doc/cdn/ThemingDoc.vue
index 137295779..28c1b00c2 100644
--- a/doc/cdn/ThemingDoc.vue
+++ b/doc/cdn/ThemingDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Include the theme preset via a script element after adding PrimeVue, see <NuxtLink to="/theming/styled/#presets">preset</NuxtLink> section for the complete list of available presets to choose from.</p>
+        <p>Include the theme preset via a script element after adding PrimeVue, valid options are Aura, Lara and Nora.</p>
     </DocSectionText>
     <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
 </template>
@@ -11,9 +11,11 @@ export default {
         return {
             code: {
                 basic: `
-<!-- <script src="https://unpkg.com/primevue/umd/themes/{preset}.min.js"><\/script> -->
+<!-- <script src="https://unpkg.com/primevue@4.0.0-rc.1/umd/themes/{preset}.min.js"><\/script> -->
 
-<script src="https://unpkg.com/primevue/umd/themes/aura.min.js"><\/script>
+<script src="https://unpkg.com/primevue@4.0.0-rc.1/umd/themes/aura.min.js"><\/script>
+<script src="https://unpkg.com/primevue@4.0.0-rc.1/umd/themes/lara.min.js"><\/script>
+<script src="https://unpkg.com/primevue@4.0.0-rc.1/umd/themes/nora.min.js"><\/script>
 `
             }
         };
diff --git a/doc/configuration/PTOptionsDoc.vue b/doc/configuration/PTOptionsDoc.vue
index fa51559fd..4c520f93c 100644
--- a/doc/configuration/PTOptionsDoc.vue
+++ b/doc/configuration/PTOptionsDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>
             Used to configure the <i>ptOptions</i> properties of components and the <i>usePassThrough</i> method. The <i>mergeSections</i> defines whether the sections from the main configuration gets added and the <i>mergeProps</i> controls whether
-            to override or merge the defined props. Defaults are <i>true</i> for <i>mergeSections</i> and <i>false</i> for <i>mergeProps</i>. Visit the <NuxtLink to="/passthrough">Pass Through Props</NuxtLink> documentation for more information.
+            to override or merge the defined props. Defaults are <i>true</i> for <i>mergeSections</i> and <i>false</i> for <i>mergeProps</i>.
         </p>
     </DocSectionText>
     <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
diff --git a/doc/configuration/ThemeDoc.vue b/doc/configuration/ThemeDoc.vue
new file mode 100644
index 000000000..8dabf8028
--- /dev/null
+++ b/doc/configuration/ThemeDoc.vue
@@ -0,0 +1,35 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Style mode offers theming based on a design token based architecture. See the <NuxtLink to="/theming/styled">styled mode</NuxtLink> documentation for details such as building your own theme.</p>
+
+        <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import PrimeVue from 'primevue/config';
+import Aura from 'primevue/themes/aura';
+
+const app = createApp(App);
+
+app.use(PrimeVue, {
+    theme: {
+        preset: Aura,
+        options: {
+            prefix: 'p',
+            darkModeSelector: 'system',
+            cssLayer: false
+        }
+    }
+ });
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/vite/DownloadDoc.vue b/doc/vite/DownloadDoc.vue
index d9fb3b453..160bb94a3 100644
--- a/doc/vite/DownloadDoc.vue
+++ b/doc/vite/DownloadDoc.vue
@@ -12,13 +12,13 @@ export default {
             code: {
                 basic: `
 # Using npm
-npm install primevue
+npm install primevue@4.0.0-rc.1
 
 # Using yarn
-yarn add primevue
+yarn add primevue@4.0.0-rc.1
 
 # Using pnpm
-pnpm add primevue
+pnpm add primevue@4.0.0-rc.1
 `
             }
         };
diff --git a/doc/vite/StyledModeDoc.vue b/doc/vite/StyledModeDoc.vue
new file mode 100644
index 000000000..8dee603ab
--- /dev/null
+++ b/doc/vite/StyledModeDoc.vue
@@ -0,0 +1,29 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Styled mode provides pre-skinned components, default theme is Aura with emerald as the primary color. See the <NuxtLink to="/theming/styled">styled mode</NuxtLink> documentation for details.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import { createApp } from 'vue';
+import PrimeVue from 'primevue/config';
+import Aura from 'primevue/themes/aura';
+
+const app = createApp(App);
+app.use(PrimeVue, {
+    theme: {
+        preset: Aura
+    }
+});
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/vite/UnstyledModeDoc.vue b/doc/vite/UnstyledModeDoc.vue
new file mode 100644
index 000000000..1432de212
--- /dev/null
+++ b/doc/vite/UnstyledModeDoc.vue
@@ -0,0 +1,33 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            In unstyled mode, the components do not include any CSS so you'd need to style the components on your end, this is especially useful when building your own UI library on top of PrimeVue. Visit the
+            <NuxtLink to="/theming/unstyled">Unstyled mode</NuxtLink> documentation for more information and examples.
+        </p>
+        <p>
+            If you are using Tailwind CSS and prefer to have full control over the component styling, visit 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="code1" hideToggleCode importCode hideStackBlitz />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+import { createApp } from "vue";
+import PrimeVue from "primevue/config";
+const app = createApp(App);
+
+app.use(PrimeVue, {
+    unstyled: true
+});
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/vite/UsageDoc.vue b/doc/vite/UsageDoc.vue
index e4024da13..571c29702 100644
--- a/doc/vite/UsageDoc.vue
+++ b/doc/vite/UsageDoc.vue
@@ -1,8 +1,8 @@
 <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. You may also use
-            <NuxtLink to="/autoimport">auto imports</NuxtLink> via the unplugin-vue-components plugin.
+            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. In a future update with a vite plugin, components would be
+            imported automatically and optimized with tree shaking at build time.
         </p>
     </DocSectionText>
     <div class="card flex justify-center">
diff --git a/pages/configuration/index.vue b/pages/configuration/index.vue
index 0d33fa60c..69c8110f5 100644
--- a/pages/configuration/index.vue
+++ b/pages/configuration/index.vue
@@ -7,7 +7,7 @@
         <div class="doc-main">
             <div class="doc-intro">
                 <h1>Configuration</h1>
-                <p>Global configuration options of the components.</p>
+                <p>Application widge configuration for PrimeVue.</p>
             </div>
             <DocSections :docs="docs" />
         </div>
@@ -21,6 +21,7 @@ import InputStyleDoc from '@/doc/configuration/InputStyleDoc.vue';
 import PTDoc from '@/doc/configuration/PTDoc.vue';
 import PTOptionsDoc from '@/doc/configuration/PTOptionsDoc.vue';
 import RippleDoc from '@/doc/configuration/RippleDoc.vue';
+import ThemeDoc from '@/doc/configuration/ThemeDoc.vue';
 import UnstyledDoc from '@/doc/configuration/UnstyledDoc.vue';
 import ZIndexDoc from '@/doc/configuration/ZIndexDoc.vue';
 import NonceDoc from '@/doc/configuration/csp/NonceDoc.vue';
@@ -37,6 +38,11 @@ export default {
                     label: 'Import',
                     component: ImportDoc
                 },
+                {
+                    id: 'theme',
+                    label: 'Theme',
+                    component: ThemeDoc
+                },
                 {
                     id: 'unstyled',
                     label: 'Unstyled',
diff --git a/pages/vite/index.vue b/pages/vite/index.vue
index 47e096c57..55801b50a 100644
--- a/pages/vite/index.vue
+++ b/pages/vite/index.vue
@@ -18,7 +18,8 @@
 <script>
 import DownloadDoc from '@/doc/vite/DownloadDoc.vue';
 import ExamplesDoc from '@/doc/vite/ExamplesDoc.vue';
-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';
 
 export default {
@@ -33,7 +34,20 @@ export default {
                 {
                     id: 'plugin',
                     label: 'Plugin',
-                    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 styling modes; Styled and Unstyled. If you are just getting started, begin with the styled mode.',
+                    children: [
+                        {
+                            id: 'styled',
+                            label: 'Styled Mode',
+                            component: StyledModeDoc
+                        },
+                        {
+                            id: 'unstyled',
+                            label: 'Unstyled Mode',
+                            component: UnstyledModeDoc
+                        }
+                    ]
                 },
                 {
                     id: 'usage',
