diff --git a/src/views/landing/FooterSection.vue b/src/views/landing/FooterSection.vue
index 557ba504b..340e9accf 100644
--- a/src/views/landing/FooterSection.vue
+++ b/src/views/landing/FooterSection.vue
@@ -5,7 +5,7 @@
                 <ul class="list-none p-0 m-0">
                     <li class="font-bold mb-5">General</li>
                     <li class="mb-4">
-                        <a href="/setup" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Get Started</a>
+                        <router-link to="/setup" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Get Started</router-link>
                     </li>
                     <li class="mb-4">
                         <a href="https://github.com/primefaces/primevue-examples" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Examples</a>
@@ -22,7 +22,7 @@
                         <a href="https://discord.gg/gzKFYnpmCY" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Discord</a>
                     </li>
                     <li class="mb-4">
-                        <a href="/support" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">PRO Support</a>
+                        <router-link to="/support" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">PRO Support</router-link>
                     </li>
                 </ul>
             </div>
@@ -56,13 +56,13 @@
                 <ul class="list-none p-0 m-0">
                     <li class="font-bold mt-5 lg:mt-0 mb-5">Theming</li>
                     <li class="mb-4">
-                        <a href="/theming" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Guide</a>
+                        <router-link to="/theming" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Guide</router-link>
                     </li>
                     <li class="mb-4">
                         <a href="https://www.primefaces.org/designer/primevue" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Designer</a>
                     </li>
                     <li class="mb-4">
-                        <a href="/colors" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Colors</a>
+                        <router-link to="/colors" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Colors</router-link>
                     </li>
                 </ul>
             </div>
diff --git a/src/views/landing/TemplateSection.vue b/src/views/landing/TemplateSection.vue
index 62fa819b5..0d6cb1568 100644
--- a/src/views/landing/TemplateSection.vue
+++ b/src/views/landing/TemplateSection.vue
@@ -12,76 +12,37 @@
             <div class="flex">
                 <div class="template-block block-1 mr-2 flex justify-content-center align-items-center"
                     :style="{backgroundImage: imageBg('diamond')}">
-                <a
-                    class="templates-btn"
-                    target="_blank"
-                    href="https://www.primefaces.org/diamond-vue/"
-                    >
-                Diamond Preview
-                </a>
-            </div>
+                    <a class="templates-btn" target="_blank" href="https://www.primefaces.org/diamond-vue/" >Diamond Preview</a>
+                </div>
             <div
             class="template-block block-2 ml-2 flex justify-content-center align-items-center"
                 :style="{backgroundImage: imageBg('freya')}">
-            <a
-                class="templates-btn"
-                target="_blank"
-                href="https://www.primefaces.org/freya-vue/"
-                >
-            Freya Preview
-            </a>
-            </div>
+                <a class="templates-btn" target="_blank" href="https://www.primefaces.org/freya-vue/" >Freya Preview</a>
+                </div>
             </div>
             <div class="flex my-4">
-                <div
-                class="template-block block-3 mr-2 flex justify-content-center align-items-center"
+                <div class="template-block block-3 mr-2 flex justify-content-center align-items-center"
                     :style="{backgroundImage: imageBg('atlantis')}">
-                <a
-                    class="templates-btn"
-                    target="_blank"
-                    href="https://www.primefaces.org/atlantis-vue/"
-                    >
-                Atlantis Preview
-                </a>
-            </div>
-            <div class="template-block block-middle border-none box-shadow-none mr-2 flex justify-content-center align-items-center flex-column">
-                <img class="img-1"
-                :src="templateImg()" height="110">
-            </div>
-            <div class="template-block block-4 ml-2 flex justify-content-center align-items-center"
-                :style="{backgroundImage: imageBg('apollo')}">
-            <a
-                class="templates-btn"
-                target="_blank"
-                href="https://www.primefaces.org/apollo-vue/"
-                >
-            Apollo Preview
-            </a>
-            </div>
+                    <a class="templates-btn" target="_blank" href="https://www.primefaces.org/atlantis-vue/" >Atlantis Preview</a>
+                </div>
+                <div class="template-block block-middle border-none box-shadow-none mr-2 flex justify-content-center align-items-center flex-column">
+                    <img class="img-1"
+                    :src="templateImg()" height="110">
+                </div>
+                <div class="template-block block-4 ml-2 flex justify-content-center align-items-center"
+                    :style="{backgroundImage: imageBg('apollo')}">
+                    <a class="templates-btn" target="_blank" href="https://www.primefaces.org/apollo-vue/" >Apollo Preview</a>
+                </div>
             </div>
             <div class="flex">
-                <div
-                class="template-block block-5 mr-2 flex justify-content-center align-items-center"
+                <div class="template-block block-5 mr-2 flex justify-content-center align-items-center"
                     :style="{backgroundImage: imageBg('serenity')}">
-                <a
-                    class="templates-btn"
-                    target="_blank"
-                    href="https://www.primefaces.org/serenity-vue/"
-                    >
-                Serenity Preview
-                </a>
-            </div>
-            <div
-            class="template-block block-6 ml-2 flex justify-content-center align-items-center"
-                :style="{backgroundImage: imageBg('ultima')}">
-            <a
-                class="templates-btn"
-                target="_blank"
-                href="https://www.primefaces.org/ultima-vue/"
-                >
-            Ultima Preview
-            </a>
-            </div>
+                    <a class="templates-btn" target="_blank" href="https://www.primefaces.org/serenity-vue/" >Serenity Preview</a>
+                </div>
+                <div class="template-block block-6 ml-2 flex justify-content-center align-items-center"
+                    :style="{backgroundImage: imageBg('ultima')}">
+                    <a class="templates-btn" target="_blank" href="https://www.primefaces.org/ultima-vue/" >Ultima Preview</a>
+                </div>
             </div>
             <div class="lines">
                 <div class="top">