diff --git a/src/AppTopBar.vue b/src/AppTopBar.vue
index df0e42680..2780ae068 100644
--- a/src/AppTopBar.vue
+++ b/src/AppTopBar.vue
@@ -18,6 +18,7 @@
                         <li><router-link to="/icons" @click.native="hideThemesMenu()"><i class="pi pi-fw pi-search"/><span>Icons</span></router-link></li>
                         <li class="topbar-submenu-header">PREMIUM TEMPLATES</li>
                         <li><a href="https://www.primefaces.org/sapphire-vue"><img src="./assets/images/layouts/themeswitcher-sapphire.png" alt="Sapphire" /><span>Sapphire</span><span class="theme-badge material">material</span></a></li>
+                        <li><a href="https://www.primefaces.org/sapphire-vue"><img src="./assets/images/layouts/themeswitcher-avalon.png" alt="Avalon" /><span>Avalon</span><span class="theme-badge bootstrap">bootstrap</span></a></li>
                         <li class="topbar-submenu-header">FREE TEMPLATES</li>
                         <li><a href="https://www.primefaces.org/sigma-vue"><img src="./assets/images/layouts/themeswitcher-sigma.png" alt="Sigma" /><span>Sigma</span></a></li>
                         <li class="topbar-submenu-header">FREE THEMES</li>
diff --git a/src/assets/images/layouts/avalon.jpg b/src/assets/images/layouts/avalon.jpg
new file mode 100644
index 000000000..6f88252c0
Binary files /dev/null and b/src/assets/images/layouts/avalon.jpg differ
diff --git a/src/assets/images/layouts/themeswitcher-avalon.png b/src/assets/images/layouts/themeswitcher-avalon.png
new file mode 100644
index 000000000..4122cf21a
Binary files /dev/null and b/src/assets/images/layouts/themeswitcher-avalon.png differ
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 9924439ca..115fc47ff 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -83,11 +83,16 @@
             <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">
+                <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">
                     </a>
                 </div>
+                <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">
+                    </a>
+                </div>
             </div>
         </div>
         <div class="templates">