diff --git a/doc/ripple/CustomDoc.vue b/doc/ripple/CustomDoc.vue
index 0955541d6..1d17ed582 100644
--- a/doc/ripple/CustomDoc.vue
+++ b/doc/ripple/CustomDoc.vue
@@ -10,6 +10,7 @@
                 }
             }"
             class="p-ripple box"
+            style="border: 1px solid rgba(75, 175, 80, 0.3)"
         >
             Green
         </div>
@@ -20,6 +21,7 @@
                 }
             }"
             class="p-ripple box"
+            style="border: 1px solid rgba(255, 193, 6, 0.3)"
         >
             Orange
         </div>
@@ -30,6 +32,7 @@
                 }
             }"
             class="p-ripple box"
+            style="border: 1px solid rgba(156, 39, 176, 0.3)"
         >
             Purple
         </div>
@@ -50,6 +53,7 @@ export default {
         }
     }"
     class="p-ripple box"
+    style="border: 1px solid rgba(75, 175, 80, 0.3)"
 >
     Green
 </div>
@@ -60,6 +64,7 @@ export default {
         }
     }"
     class="p-ripple box"
+    style="border: 1px solid rgba(255, 193, 6, 0.3)"
 >
     Orange
 </div>
@@ -70,6 +75,7 @@ export default {
         }
     }"
     class="p-ripple box"
+    style="border: 1px solid rgba(156, 39, 176, 0.3)"
 >
     Purple
 </div>
@@ -84,6 +90,7 @@ export default {
                 }
             }"
             class="p-ripple box"
+            style="border: 1px solid rgba(75, 175, 80, 0.3)"
         >
             Green
         </div>
@@ -94,6 +101,7 @@ export default {
                 }
             }"
             class="p-ripple box"
+            style="border: 1px solid rgba(255, 193, 6, 0.3)"
         >
             Orange
         </div>
@@ -104,6 +112,7 @@ export default {
                 }
             }"
             class="p-ripple box"
+            style="border: 1px solid rgba(156, 39, 176, 0.3)"
         >
             Purple
         </div>
@@ -130,6 +139,7 @@ export default {
                 }
             }"
             class="p-ripple box"
+            style="border: 1px solid rgba(75, 175, 80, 0.3)"
         >
             Green
         </div>
@@ -140,6 +150,7 @@ export default {
                 }
             }"
             class="p-ripple box"
+            style="border: 1px solid rgba(255, 193, 6, 0.3)"
         >
             Orange
         </div>
@@ -150,6 +161,7 @@ export default {
                 }
             }"
             class="p-ripple box"
+            style="border: 1px solid rgba(156, 39, 176, 0.3)"
         >
             Purple
         </div>
diff --git a/layouts/default.vue b/layouts/default.vue
index 29719346b..cc1312595 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -31,23 +31,35 @@ export default {
     data() {
         return {
             sidebarActive: false,
-            appConfigActive: false
+            appConfigActive: false,
+            defaultRipple: false
         };
     },
     watch: {
         $route: {
             immediate: true,
-            handler(to) {
+            handler(to, from) {
                 if (!process.client || typeof window === 'undefined') {
                     return;
                 }
 
+                if (!this.defaultRipple) {
+                    if (to.name === 'ripple') {
+                        this.$appState.ripple = true;
+                    } else if (from?.name === 'ripple') {
+                        this.$appState.ripple = this.defaultRipple;
+                    }
+                }
+
                 this.sidebarActive = false;
                 DomHandler.unblockBodyScroll('blocked-scroll');
                 this.$toast.removeAllGroups();
             }
         }
     },
+    beforeCreate() {
+        this.defaultRipple = this.$appState.ripple;
+    },
     mounted() {
         if (this.isOutdatedIE()) {
             this.$toast.add({