diff --git a/src/views/ripple/RippleDoc.vue b/src/views/ripple/RippleDoc.vue
index 571374620..2a6723b7a 100644
--- a/src/views/ripple/RippleDoc.vue
+++ b/src/views/ripple/RippleDoc.vue
@@ -3,12 +3,16 @@
 		<TabView>
 			<TabPanel header="Documentation">
 				<h5>Getting Started</h5>
+                <h5>Ripple</h5>
                 <p>Ripple is an optional animation for the supported components such as buttons. It is disabled by default and needs to be enabled at
-                your app's entry file (e.g. main.js) using the <i>$primevue</i> instance variable.
-            </p>
+                    your app's entry file (e.g. main.js) during the PrimeVue setup.</p>
 <pre v-code.script>
 <code>
-Vue.prototype.$primevue = {ripple: true};
+import {createApp} from 'vue';
+import PrimeVue from 'primevue/config';
+const app = createApp(App);
+
+app.use(PrimeVue, {ripple: true});
 
 </code></pre>
 
diff --git a/src/views/setup/Setup.vue b/src/views/setup/Setup.vue
index 49c314e63..c07b460ca 100755
--- a/src/views/setup/Setup.vue
+++ b/src/views/setup/Setup.vue
@@ -22,14 +22,10 @@ npm install primeicons --save
 
 </code></pre>
 
-            <h5>PrimeFlex</h5>
-            <p>PrimeFlex is a CSS utility library featuring various helpers such as a grid system, flexbox, spacing, elevation and more. Although it is not required, it is highly
-                recommended to add PrimeFlex as it is likely to need such utilities when developing applications. View the <router-link to="/primeflex">PrimeFlex</router-link> section for the installation.</p>
-
             <h5>Module Loader</h5>
             <p>This is the recommended way if your application uses <a href="https://cli.vuejs.org/">vue-cli</a> or has a webpack based build with <a href="https://github.com/vuejs/vue-loader">vue-loader</a> configured.</p>
 
-            <p>Begin with installing PrimeVue with the <i>use</i> function.</p>
+            <p>Begin with installing PrimeVue. This command only sets up the core configuration like locale and does not register any component.</p>
 <pre v-code.script>
 <code>
 import {createApp} from 'vue';
@@ -40,7 +36,7 @@ app.use(PrimeVue);
 
 </code></pre>
 
-            <p>Then import the component you need and registering it so that you'll be able to utilize the component in your application.</p>
+            <p>Then import and register a component from the library. Import path is available in the documentation of the corresponding component.</p>
 <pre v-code.script>
 <code>
 import {createApp} from 'vue';
@@ -54,6 +50,7 @@ app.component('Dialog', Dialog);
 
 </code></pre>
 
+            <p>Finally you'll be able to utilize the component in your application.</p>
 <pre v-code>
 <code>
 &lt;Dialog&gt;&lt;/Dialog&gt;
@@ -188,6 +185,10 @@ primevue/resources/themes/rhea/theme.css
 
 </code></pre>
 
+            <h5>PrimeFlex</h5>
+            <p>PrimeFlex is a CSS utility library featuring various helpers such as a grid system, flexbox, spacing, elevation and more. Although it is not required, it is highly
+                recommended to add PrimeFlex as it is likely to need such utilities when developing applications. View the <router-link to="/primeflex">PrimeFlex</router-link> section for the installation.</p>
+
             <h5>Ripple</h5>
             <p>Ripple is an optional animation for the supported components such as buttons. It is disabled by default and needs to be enabled at
                 your app's entry file (e.g. main.js) during the PrimeVue setup.