diff --git a/apps/showcase/components/landing/FeaturesSection.vue b/apps/showcase/components/landing/FeaturesSection.vue
index 81461781f..ce0a448d6 100644
--- a/apps/showcase/components/landing/FeaturesSection.vue
+++ b/apps/showcase/components/landing/FeaturesSection.vue
@@ -6,56 +6,56 @@
             <div class="features-container">
                 <div class="grid grid-cols-12 gap-4">
                     <div class="col-span-12 md:col-span-6 xl:col-span-3 flex justify-center">
-                        <div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-6 w-full animate-duration-500">
+                        <div v-animateonscroll.once="{ enterClass: 'animate-fadein' }" class="box p-6 w-full animate-duration-500">
                             <img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-components.svg" alt="components icon" class="block mb-4" />
                             <div class="font-semibold mb-4 text-lg">80+ UI Components</div>
                             <p class="m-0 text-surface-500 dark:text-surface-400 font-medium">The ultimate set of UI Components to assist you with 80+ impressive Vue Components.</p>
                         </div>
                     </div>
                     <div class="col-span-12 md:col-span-6 xl:col-span-3 flex justify-center">
-                        <div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-6 w-full animate-duration-500">
+                        <div v-animateonscroll.once="{ enterClass: 'animate-fadein' }" class="box p-6 w-full animate-duration-500">
                             <img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-theme.svg" alt="components icon" class="block mb-4" />
                             <div class="font-semibold mb-4 text-lg">Styled or Unstyled</div>
                             <p class="m-0 text-surface-500 dark:text-surface-400 font-medium">Choose from a variety of pre-built themes or implement your design systems with the CSS library of your choice like TailwindCSS.</p>
                         </div>
                     </div>
                     <div class="col-span-12 md:col-span-6 xl:col-span-3 flex justify-center">
-                        <div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-6 w-full animate-duration-500">
+                        <div v-animateonscroll.once="{ enterClass: 'animate-fadein' }" class="box p-6 w-full animate-duration-500">
                             <img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-community.svg" alt="components icon" class="block mb-4" />
                             <div class="font-semibold mb-4 text-lg">Community</div>
                             <p class="m-0 text-surface-500 dark:text-surface-400 font-medium">Connect with the other open source community members, collaborate and have a voice in the project roadmap.</p>
                         </div>
                     </div>
                     <div class="col-span-12 md:col-span-6 xl:col-span-3 flex justify-center">
-                        <div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-6 w-full animate-duration-500">
+                        <div v-animateonscroll.once="{ enterClass: 'animate-fadein' }" class="box p-6 w-full animate-duration-500">
                             <img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-accessibility.svg" alt="components icon" class="block mb-4" />
                             <div class="font-semibold mb-4 text-lg">Accessibility</div>
                             <p class="m-0 text-surface-500 dark:text-surface-400 font-medium">Compliant with the Web Content Accessibility Guidelines (WCAG 2.0).</p>
                         </div>
                     </div>
                     <div class="col-span-12 md:col-span-6 xl:col-span-3 flex justify-center">
-                        <div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-6 w-full animate-duration-500">
+                        <div v-animateonscroll.once="{ enterClass: 'animate-fadein' }" class="box p-6 w-full animate-duration-500">
                             <img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-support.svg" alt="components icon" class="block mb-4" />
                             <div class="font-semibold mb-4 text-lg">Enterprise Support</div>
                             <p class="m-0 text-surface-500 dark:text-surface-400 font-medium">Exceptional support service featuring response within 1 business day and option to request enhancements and new features for the library.</p>
                         </div>
                     </div>
                     <div class="col-span-12 md:col-span-6 xl:col-span-3 flex justify-center">
-                        <div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-6 w-full animate-duration-500">
+                        <div v-animateonscroll.once="{ enterClass: 'animate-fadein' }" class="box p-6 w-full animate-duration-500">
                             <img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-mobile.svg" alt="components icon" class="block mb-4" />
                             <div class="font-semibold mb-4 text-lg">Mobile</div>
                             <p class="m-0 text-surface-500 dark:text-surface-400 font-medium">First class support for responsive design led by touch optimized elements.</p>
                         </div>
                     </div>
                     <div class="col-span-12 md:col-span-6 xl:col-span-3 flex justify-center">
-                        <div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-6 w-full animate-duration-500">
+                        <div v-animateonscroll.once="{ enterClass: 'animate-fadein' }" class="box p-6 w-full animate-duration-500">
                             <img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-productivity.svg" alt="components icon" class="block mb-4" />
                             <div class="font-semibold mb-4 text-lg">Blocks</div>
                             <p class="m-0 text-surface-500 dark:text-surface-400 font-medium">400+ pre-designed copy paste ready UI blocks to build spectacular apps in no time.</p>
                         </div>
                     </div>
                     <div class="col-span-12 md:col-span-6 xl:col-span-3 flex justify-center">
-                        <div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-6 w-full animate-duration-500">
+                        <div v-animateonscroll.once="{ enterClass: 'animate-fadein' }" class="box p-6 w-full animate-duration-500">
                             <img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-ts.svg" alt="components icon" class="block mb-4" />
                             <div class="font-semibold mb-4 text-lg">Typescript</div>
                             <p class="m-0 text-surface-500 dark:text-surface-400 font-medium">Top-notch support for Typescript with types and tooling assistance.</p>
diff --git a/apps/showcase/components/template/TemplateConfiguration.vue b/apps/showcase/components/template/TemplateConfiguration.vue
index 6eb88cb03..8dd0739a4 100644
--- a/apps/showcase/components/template/TemplateConfiguration.vue
+++ b/apps/showcase/components/template/TemplateConfiguration.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="px-6 py-6 sm:px-10 sm:py-5 lg:py-20 lg:px-8 rounded-3xl bg-surface-0 dark:bg-surface-900">
-        <div class="p-6 md:p-8 rounded-2xl lg:rounded-3xl border border-surface max-w-3xl w-full mx-auto">
+        <div v-animateonscroll.once="{ enterClass: 'animate-fadein' }" class="p-6 md:p-8 rounded-2xl lg:rounded-3xl border border-surface max-w-3xl w-full mx-auto animate-duration-500">
             <div class="rounded-lg lg:rounded-xl border border-surface overflow-hidden">
                 <div class="py-1 px-6 h-14 flex items-center gap-2">
                     <div v-for="(c, i) of ['#ED6B5D', '#F4BE50', '#61C554']" :key="i" class="w-3 h-3 rounded-full" :style="{ background: c }" />
diff --git a/apps/showcase/components/template/TemplateFeatures.vue b/apps/showcase/components/template/TemplateFeatures.vue
index 7d23d38af..d8ee2cdaa 100644
--- a/apps/showcase/components/template/TemplateFeatures.vue
+++ b/apps/showcase/components/template/TemplateFeatures.vue
@@ -1,5 +1,4 @@
 <template>
-    <!-- (0 ?featuresData.slice(i===0?(0, Math.ceil(featuresData.length / 2)):(featuresData.length / 2)):featuresData.slice(i===0?(0, Math.ceil(featuresData.length / 2)):(featuresData.length / 2))) -->
     <div>
         <div v-if="displayType === 'vertical'" class="px-6 py-6 sm:px-10 sm:py-10 lg:py-20 rounded-3xl bg-surface-0 dark:bg-surface-900">
             <div class="mx-auto max-w-3xl flex sm:flex-row flex-col items-start gap-6">
@@ -12,7 +11,7 @@
                     }"
                 >
                     <template v-for="(data, j) of i === 0 ? featuresData.slice(0, Math.ceil(featuresData.length / 2)) : featuresData.slice(featuresData.length / 2)" :key="j">
-                        <div class="w-full p-4 md:p-5 rounded-2xl border border-surface">
+                        <div v-animateonscroll.once="{ enterClass: 'animate-fadein' }" class="w-full p-4 md:p-5 rounded-2xl border border-surface animate-duration-500">
                             <div class="w-full bg-surface-100 dark:bg-surface-800 rounded-lg overflow-hidden flex">
                                 <img class="w-full h-auto rounded-lg" :src="$appState.darkTheme ? data.darkSrc || data.src : data.src" :alt="data.title" />
                             </div>
@@ -26,7 +25,7 @@
         <div v-else class="px-6 py-6 sm:px-10 sm:py-10 lg:py-20 rounded-3xl bg-surface-0 dark:bg-surface-900">
             <div class="flex flex-wrap justify-center gap-6 mx-auto w-full max-w-5xl">
                 <template v-for="(data, index) in featuresData" :key="index">
-                    <div class="p-5 rounded-2xl border border-surface flex-1 min-w-80 max-w-96">
+                    <div v-animateonscroll.once="{ enterClass: 'animate-fadein' }" class="p-5 rounded-2xl border border-surface flex-1 min-w-80 max-w-96 animate-duration-500">
                         <div class="flex w-full mb-5 bg-surface-100 dark:bg-surface-800 overflow-hidden rounded-lg">
                             <img class="w-full" :src="$appState.darkTheme ? data.darkSrc || data.src : data.src" :alt="data.title" />
                         </div>
diff --git a/apps/showcase/components/template/TemplateFeaturesAnimation.vue b/apps/showcase/components/template/TemplateFeaturesAnimation.vue
index bc09c8aec..4cdf699d0 100644
--- a/apps/showcase/components/template/TemplateFeaturesAnimation.vue
+++ b/apps/showcase/components/template/TemplateFeaturesAnimation.vue
@@ -1,7 +1,11 @@
 <template>
     <div class="px-6 py-6 sm:px-10 sm:py-5 lg:py-20 lg:px-8 rounded-2xl lg:rounded-3xl bg-surface-0 dark:bg-surface-900">
         <h2 v-if="title" class="text-center text-surface-900 dark:text-surface-0 text-3xl lg:text-5xl font-semibold lg:pt-0 pt-6 mb-12">{{ title }}</h2>
-        <div ref="animationRef" class="flex flex-col-reverse lg:flex-row items-start gap-10 w-full max-w-2xl lg:max-w-6xl mx-auto p-4 lg:p-7 rounded-3xl border border-surface">
+        <div
+            ref="animationRef"
+            v-animateonscroll.once="{ enterClass: 'animate-fadein' }"
+            class="flex flex-col-reverse lg:flex-row items-start gap-10 w-full max-w-2xl lg:max-w-6xl mx-auto p-4 lg:p-7 rounded-3xl border border-surface animate-duration-500"
+        >
             <div class="flex flex-col gap-4 flex-1">
                 <template v-for="(data, index) in featuresData" :key="index">
                     <div
diff --git a/apps/showcase/components/template/TemplateRelated.vue b/apps/showcase/components/template/TemplateRelated.vue
deleted file mode 100644
index 0da6d4d7f..000000000
--- a/apps/showcase/components/template/TemplateRelated.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<template>
-    <div class="px-6 py-6 sm:px-10 sm:py-5 lg:py-20 lg:px-8 rounded-2xl lg:rounded-3xl bg-surface-0 dark:bg-surface-900">
-        <h2 class="text-center text-surface-900 dark:text-surface-0 text-3xl lg:text-5xl font-semibold lg:pt-0 pt-6">Related Layouts</h2>
-        <div class="flex flex-wrap items-center justify-center w-fit mt-12 mx-auto gap-6 max-w-screen-lg">
-            <template v-for="(data, index) in relatedData" :key="index">
-                <a :href="data.href" target="_blank" class="flex-1 min-w-60 rounded-2xl border border-surface p-4 xl:p-5 flex ring-0 hover:ring-8 ring-surface-100 dark:ring-surface-800 transition-all">
-                    <img class="w-full h-auto rounded-lg" :src="data.src" :alt="'Related Image ' + index" />
-                </a>
-            </template>
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    props: {
-        relatedData: {
-            type: null,
-            default: null
-        }
-    }
-};
-</script>
diff --git a/apps/showcase/doc/templates/ApolloSeparator.vue b/apps/showcase/components/template/separator/ApolloSeparator.vue
similarity index 100%
rename from apps/showcase/doc/templates/ApolloSeparator.vue
rename to apps/showcase/components/template/separator/ApolloSeparator.vue
diff --git a/apps/showcase/doc/templates/AtlantisSeparator.vue b/apps/showcase/components/template/separator/AtlantisSeparator.vue
similarity index 100%
rename from apps/showcase/doc/templates/AtlantisSeparator.vue
rename to apps/showcase/components/template/separator/AtlantisSeparator.vue
diff --git a/apps/showcase/doc/templates/AvalonSeparator.vue b/apps/showcase/components/template/separator/AvalonSeparator.vue
similarity index 100%
rename from apps/showcase/doc/templates/AvalonSeparator.vue
rename to apps/showcase/components/template/separator/AvalonSeparator.vue
diff --git a/apps/showcase/doc/templates/DiamondSeparator.vue b/apps/showcase/components/template/separator/DiamondSeparator.vue
similarity index 100%
rename from apps/showcase/doc/templates/DiamondSeparator.vue
rename to apps/showcase/components/template/separator/DiamondSeparator.vue
diff --git a/apps/showcase/doc/templates/FreyaSeparator.vue b/apps/showcase/components/template/separator/FreyaSeparator.vue
similarity index 100%
rename from apps/showcase/doc/templates/FreyaSeparator.vue
rename to apps/showcase/components/template/separator/FreyaSeparator.vue
diff --git a/apps/showcase/doc/templates/PoseidonSeparator.vue b/apps/showcase/components/template/separator/PoseidonSeparator.vue
similarity index 100%
rename from apps/showcase/doc/templates/PoseidonSeparator.vue
rename to apps/showcase/components/template/separator/PoseidonSeparator.vue
diff --git a/apps/showcase/doc/templates/SakaiSeparator.vue b/apps/showcase/components/template/separator/SakaiSeparator.vue
similarity index 100%
rename from apps/showcase/doc/templates/SakaiSeparator.vue
rename to apps/showcase/components/template/separator/SakaiSeparator.vue
diff --git a/apps/showcase/doc/templates/UltimaSeparator.vue b/apps/showcase/components/template/separator/UltimaSeparator.vue
similarity index 100%
rename from apps/showcase/doc/templates/UltimaSeparator.vue
rename to apps/showcase/components/template/separator/UltimaSeparator.vue
diff --git a/apps/showcase/doc/templates/VeronaSeparator.vue b/apps/showcase/components/template/separator/VeronaSeparator.vue
similarity index 100%
rename from apps/showcase/doc/templates/VeronaSeparator.vue
rename to apps/showcase/components/template/separator/VeronaSeparator.vue
diff --git a/apps/showcase/pages/templates/apollo/index.vue b/apps/showcase/pages/templates/apollo/index.vue
index e55c458ed..636c8891d 100644
--- a/apps/showcase/pages/templates/apollo/index.vue
+++ b/apps/showcase/pages/templates/apollo/index.vue
@@ -53,14 +53,10 @@
         </TemplateFeaturesAnimation>
         <ApolloSeparator />
         <TemplateFeatures :featuresData="apolloFeatures2Data" displayType="vertical" />
-        <ApolloSeparator />
-        <TemplateRelated :relatedData="apolloRelatedData" />
     </div>
 </template>
 
 <script>
-import ApolloSeparator from '@/doc/templates/ApolloSeparator.vue';
-
 export default {
     data() {
         return {
@@ -253,9 +249,6 @@ export default {
         fillColor() {
             return this.$appState.darkTheme ? 'var(--p-surface-900)' : 'var(--p-surface-0)';
         }
-    },
-    components: {
-        ApolloSeparator
     }
 };
 </script>
diff --git a/apps/showcase/pages/templates/atlantis/index.vue b/apps/showcase/pages/templates/atlantis/index.vue
index 0bff69d68..cbc3b3a5e 100644
--- a/apps/showcase/pages/templates/atlantis/index.vue
+++ b/apps/showcase/pages/templates/atlantis/index.vue
@@ -69,14 +69,10 @@
         </TemplateFeaturesAnimation>
         <AtlantisSeparator />
         <TemplateFeatures :featuresData="features2Data" displayType="vertical" />
-        <AtlantisSeparator />
-        <TemplateRelated :relatedData="relatedData" />
     </div>
 </template>
 
 <script>
-import AtlantisSeparator from '@/doc/templates/ApolloSeparator.vue';
-
 export default {
     data() {
         return {
@@ -245,9 +241,6 @@ export default {
         fillColor() {
             return this.$appState.darkTheme ? 'var(--p-surface-900)' : 'var(--p-surface-0)';
         }
-    },
-    components: {
-        AtlantisSeparator
     }
 };
 </script>
diff --git a/apps/showcase/pages/templates/avalon/index.vue b/apps/showcase/pages/templates/avalon/index.vue
index eabcc3194..5277a27f3 100644
--- a/apps/showcase/pages/templates/avalon/index.vue
+++ b/apps/showcase/pages/templates/avalon/index.vue
@@ -44,14 +44,10 @@
         </TemplateFeaturesAnimation>
         <AvalonSeparator />
         <TemplateFeatures :featuresData="features2Data" displayType="vertical" />
-        <AvalonSeparator />
-        <TemplateRelated :relatedData="relatedData" />
     </div>
 </template>
 
 <script>
-import AvalonSeparator from '@/doc/templates/AvalonSeparator.vue';
-
 export default {
     data() {
         return {
@@ -245,9 +241,6 @@ export default {
         fillColor() {
             return this.$appState.darkTheme ? 'var(--p-surface-900)' : 'var(--p-surface-0)';
         }
-    },
-    components: {
-        AvalonSeparator
     }
 };
 </script>
diff --git a/apps/showcase/pages/templates/diamond/index.vue b/apps/showcase/pages/templates/diamond/index.vue
index 49d901573..ac27e78d3 100644
--- a/apps/showcase/pages/templates/diamond/index.vue
+++ b/apps/showcase/pages/templates/diamond/index.vue
@@ -48,14 +48,10 @@
         </TemplateFeaturesAnimation>
         <DiamondSeparator />
         <TemplateFeatures :featuresData="features2Data" displayType="vertical" />
-        <DiamondSeparator />
-        <TemplateRelated :relatedData="relatedData" />
     </div>
 </template>
 
 <script>
-import DiamondSeparator from '@/doc/templates/DiamondSeparator.vue';
-
 export default {
     data() {
         return {
@@ -230,9 +226,6 @@ export default {
         fillColor() {
             return this.$appState.darkTheme ? 'var(--p-surface-900)' : 'var(--p-surface-0)';
         }
-    },
-    components: {
-        DiamondSeparator
     }
 };
 </script>
diff --git a/apps/showcase/pages/templates/freya/index.vue b/apps/showcase/pages/templates/freya/index.vue
index e1fcdaff1..4729d2a40 100644
--- a/apps/showcase/pages/templates/freya/index.vue
+++ b/apps/showcase/pages/templates/freya/index.vue
@@ -55,14 +55,10 @@
                 file as they are available in <PrimeVueNuxtLink to="/uikit">PrimeOne for Figma</PrimeVueNuxtLink> only.
             </template>
         </TemplateFeaturesAnimation>
-        <FreyaSeparator />
-        <TemplateRelated :relatedData="relatedData" />
     </div>
 </template>
 
 <script>
-import FreyaSeparator from '@/doc/templates/FreyaSeparator.vue';
-
 export default {
     data() {
         return {
@@ -231,9 +227,6 @@ export default {
         fillColor() {
             return this.$appState.darkTheme ? 'var(--p-surface-900)' : 'var(--p-surface-0)';
         }
-    },
-    components: {
-        FreyaSeparator
     }
 };
 </script>
diff --git a/apps/showcase/pages/templates/poseidon/index.vue b/apps/showcase/pages/templates/poseidon/index.vue
index 109df1912..da9f8bed4 100644
--- a/apps/showcase/pages/templates/poseidon/index.vue
+++ b/apps/showcase/pages/templates/poseidon/index.vue
@@ -50,14 +50,10 @@
         <TemplateFeaturesAnimation :featuresData="animationFeaturesData1"></TemplateFeaturesAnimation>
         <PoseidonSeparator />
         <TemplateFeatures :featuresData="features2Data" displayType="vertical"></TemplateFeatures>
-        <PoseidonSeparator />
-        <TemplateRelated :relatedData="relatedData" />
     </div>
 </template>
 
 <script>
-import PoseidonSeparator from '@/doc/templates/PoseidonSeparator.vue';
-
 export default {
     data() {
         return {
@@ -201,9 +197,6 @@ export default {
         fillColor() {
             return this.$appState.darkTheme ? 'var(--p-surface-900)' : 'var(--p-surface-0)';
         }
-    },
-    components: {
-        PoseidonSeparator
     }
 };
 </script>
diff --git a/apps/showcase/pages/templates/sakai/index.vue b/apps/showcase/pages/templates/sakai/index.vue
index 327ff1d40..b3fc5f0d8 100644
--- a/apps/showcase/pages/templates/sakai/index.vue
+++ b/apps/showcase/pages/templates/sakai/index.vue
@@ -49,14 +49,10 @@
                 template and requires a separate purchase.
             </template>
         </TemplateFeaturesAnimation>
-        <SakaiSeparator />
-        <TemplateFeatures :featuresData="features2Data" displayType="vertical" />
     </div>
 </template>
 
 <script>
-import SakaiSeparator from '@/doc/templates/SakaiSeparator.vue';
-
 export default {
     data() {
         return {
@@ -160,9 +156,6 @@ export default {
         fillColor() {
             return this.$appState.darkTheme ? 'var(--p-surface-900)' : 'var(--p-surface-0)';
         }
-    },
-    components: {
-        SakaiSeparator
     }
 };
 </script>
diff --git a/apps/showcase/pages/templates/ultima/index.vue b/apps/showcase/pages/templates/ultima/index.vue
index 7abb948c5..a13b8ac59 100644
--- a/apps/showcase/pages/templates/ultima/index.vue
+++ b/apps/showcase/pages/templates/ultima/index.vue
@@ -59,14 +59,10 @@
         </TemplateFeaturesAnimation>
         <UltimaSeparator />
         <TemplateFeatures :featuresData="features2Data" displayType="vertical" />
-        <UltimaSeparator />
-        <TemplateRelated :relatedData="relatedData" />
     </div>
 </template>
 
 <script>
-import UltimaSeparator from '@/doc/templates/UltimaSeparator.vue';
-
 export default {
     data() {
         return {
@@ -235,9 +231,6 @@ export default {
         fillColor() {
             return this.$appState.darkTheme ? 'var(--p-surface-900)' : 'var(--p-surface-0)';
         }
-    },
-    components: {
-        UltimaSeparator
     }
 };
 </script>
diff --git a/apps/showcase/pages/templates/verona/index.vue b/apps/showcase/pages/templates/verona/index.vue
index 219f854d2..480506ab4 100644
--- a/apps/showcase/pages/templates/verona/index.vue
+++ b/apps/showcase/pages/templates/verona/index.vue
@@ -67,8 +67,6 @@
 </template>
 
 <script>
-import VeronaSeparator from '@/doc/templates/VeronaSeparator.vue';
-
 export default {
     data() {
         return {
@@ -228,9 +226,6 @@ export default {
         fillColor() {
             return this.$appState.darkTheme ? 'var(--p-surface-900)' : 'var(--p-surface-0)';
         }
-    },
-    components: {
-        VeronaSeparator
     }
 };
 </script>