diff --git a/src/AppConfigurator.vue b/src/AppConfigurator.vue
index 5af7c09c3..e7e9937cc 100644
--- a/src/AppConfigurator.vue
+++ b/src/AppConfigurator.vue
@@ -83,34 +83,34 @@
                     <h1>PREMIUM VUE-CLI TEMPLATES</h1>
                     <p>Beautifully crafted premium <a href="https://cli.vuejs.org">Vue CLI</a> application templates by the PrimeTek design team.</p>
                     <div class="p-grid">
-                        <div class="p-col-12">
+                        <div class="p-col-12 p-md-6">
                             <a href="https://www.primefaces.org/layouts/sapphire-vue">
-                                <img alt="Sapphire" src="./assets/images/layouts/sapphire.jpg">
+                                <img alt="Sapphire" src="./assets/images/layouts/sapphire-vue.jpg">
                             </a>
                         </div>
-                        <div class="p-col-12">
+                        <div class="p-col-12 p-md-6">
                             <a href="https://www.primefaces.org/layouts/serenity-vue">
-                                <img alt="Serenity" src="./assets/images/layouts/serenity.jpg">
+                                <img alt="Serenity" src="./assets/images/layouts/serenity-vue.jpg">
                             </a>
                         </div>
-                        <div class="p-col-12">
+                        <div class="p-col-12 p-md-6">
                             <a href="https://www.primefaces.org/layouts/babylon-vue">
-                                <img alt="Babylon" src="./assets/images/layouts/babylon.jpg">
+                                <img alt="Babylon" src="./assets/images/layouts/babylon-vue.jpg">
                             </a>
                         </div>
-                        <div class="p-col-12">
+                        <div class="p-col-12 p-md-6">
                             <a href="https://www.primefaces.org/layouts/avalon-vue">
-                                <img alt="Avalon" src="./assets/images/layouts/avalon.jpg">
+                                <img alt="Avalon" src="./assets/images/layouts/avalon-vue.jpg">
                             </a>
                         </div>
-                        <div class="p-col-12">
+                        <div class="p-col-12 p-md-6">
                             <a href="https://www.primefaces.org/layouts/apollo-vue">
-                                <img alt="Apollo" src="./assets/images/layouts/apollo.jpg">
+                                <img alt="Apollo" src="./assets/images/layouts/apollo-vue.jpg">
                             </a>
                         </div>
-                        <div class="p-col-12">
+                        <div class="p-col-12 p-md-6">
                             <a href="https://www.primefaces.org/layouts/roma-vue">
-                                <img alt="Roma" src="./assets/images/layouts/roma.jpg">
+                                <img alt="Roma" src="./assets/images/layouts/roma-vue.jpg">
                             </a>
                         </div>
                     </div>
diff --git a/src/assets/images/layouts/apollo-vue.jpg b/src/assets/images/layouts/apollo-vue.jpg
new file mode 100644
index 000000000..21df606f0
Binary files /dev/null and b/src/assets/images/layouts/apollo-vue.jpg differ
diff --git a/src/assets/images/layouts/apollo.jpg b/src/assets/images/layouts/apollo.jpg
deleted file mode 100644
index cbe87916d..000000000
Binary files a/src/assets/images/layouts/apollo.jpg and /dev/null differ
diff --git a/src/assets/images/layouts/avalon-vue.jpg b/src/assets/images/layouts/avalon-vue.jpg
new file mode 100644
index 000000000..3f98c394f
Binary files /dev/null and b/src/assets/images/layouts/avalon-vue.jpg differ
diff --git a/src/assets/images/layouts/avalon.jpg b/src/assets/images/layouts/avalon.jpg
deleted file mode 100644
index d68805064..000000000
Binary files a/src/assets/images/layouts/avalon.jpg and /dev/null differ
diff --git a/src/assets/images/layouts/babylon-vue.jpg b/src/assets/images/layouts/babylon-vue.jpg
new file mode 100644
index 000000000..2634c59a4
Binary files /dev/null and b/src/assets/images/layouts/babylon-vue.jpg differ
diff --git a/src/assets/images/layouts/babylon.jpg b/src/assets/images/layouts/babylon.jpg
deleted file mode 100644
index fd11c16d7..000000000
Binary files a/src/assets/images/layouts/babylon.jpg and /dev/null differ
diff --git a/src/assets/images/layouts/roma-vue.jpg b/src/assets/images/layouts/roma-vue.jpg
new file mode 100644
index 000000000..b617a2b78
Binary files /dev/null and b/src/assets/images/layouts/roma-vue.jpg differ
diff --git a/src/assets/images/layouts/roma.jpg b/src/assets/images/layouts/roma.jpg
deleted file mode 100644
index 357413cb1..000000000
Binary files a/src/assets/images/layouts/roma.jpg and /dev/null differ
diff --git a/src/assets/images/layouts/sapphire-vue.jpg b/src/assets/images/layouts/sapphire-vue.jpg
new file mode 100644
index 000000000..2b1b74d74
Binary files /dev/null and b/src/assets/images/layouts/sapphire-vue.jpg differ
diff --git a/src/assets/images/layouts/sapphire.jpg b/src/assets/images/layouts/sapphire.jpg
deleted file mode 100644
index 2c3138022..000000000
Binary files a/src/assets/images/layouts/sapphire.jpg and /dev/null differ
diff --git a/src/assets/images/layouts/serenity-vue.jpg b/src/assets/images/layouts/serenity-vue.jpg
new file mode 100644
index 000000000..e9f7713b4
Binary files /dev/null and b/src/assets/images/layouts/serenity-vue.jpg differ
diff --git a/src/assets/images/layouts/serenity.jpg b/src/assets/images/layouts/serenity.jpg
deleted file mode 100644
index 26d4f5f15..000000000
Binary files a/src/assets/images/layouts/serenity.jpg and /dev/null differ
diff --git a/src/views/Home.vue b/src/views/Home.vue
index c03b91450..3276acb2e 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -126,34 +126,34 @@
             <p>Powered by <a href="https://cli.vuejs.org">Vue-CLI</a>, create awesome applications in no time using the premium templates of PrimeVue and impress your users.</p>
 
             <div class="p-grid">
-                <div class="p-col-12 p-md-6">
+                <div class="p-col-12 p-md-4">
                     <a href="https://www.primefaces.org/layouts/sapphire-vue">
-                        <img alt="Sapphire" src="../assets/images/layouts/sapphire.jpg">
+                        <img alt="Sapphire" src="../assets/images/layouts/sapphire-vue.jpg">
                     </a>
                 </div>
-                <div class="p-col-12 p-md-6">
+                <div class="p-col-12 p-md-4">
                     <a href="https://www.primefaces.org/layouts/serenity-vue">
-                        <img alt="Serenity" src="../assets/images/layouts/serenity.jpg">
+                        <img alt="Serenity" src="../assets/images/layouts/serenity-vue.jpg">
                     </a>
                 </div>
-                <div class="p-col-12 p-md-6">
+                <div class="p-col-12 p-md-4">
                     <a href="https://www.primefaces.org/layouts/avalon-vue">
-                        <img alt="Avalon" src="../assets/images/layouts/avalon.jpg">
+                        <img alt="Avalon" src="../assets/images/layouts/avalon-vue.jpg">
                     </a>
                 </div>
-                <div class="p-col-12 p-md-6">
+                <div class="p-col-12 p-md-4">
                     <a href="https://www.primefaces.org/layouts/babylon-vue">
-                        <img alt="Babylon" src="../assets/images/layouts/babylon.jpg">
+                        <img alt="Babylon" src="../assets/images/layouts/babylon-vue.jpg">
                     </a>
                 </div>
-                <div class="p-col-12 p-md-6">
+                <div class="p-col-12 p-md-4">
                     <a href="https://www.primefaces.org/layouts/apollo-vue">
-                        <img alt="Apollo" src="../assets/images/layouts/apollo.jpg">
+                        <img alt="Apollo" src="../assets/images/layouts/apollo-vue.jpg">
                     </a>
                 </div>
-                <div class="p-col-12 p-md-6">
+                <div class="p-col-12 p-md-4">
                     <a href="https://www.primefaces.org/layouts/roma-vue">
-                        <img alt="Roma" src="../assets/images/layouts/roma.jpg">
+                        <img alt="Roma" src="../assets/images/layouts/roma-vue.jpg">
                     </a>
                 </div>
             </div>