diff --git a/public/showcase/resources/images/layouts/avalon-react.png b/public/showcase/resources/images/layouts/avalon-react.png
new file mode 100644
index 0000000000..92558d3c1d
Binary files /dev/null and b/public/showcase/resources/images/layouts/avalon-react.png differ
diff --git a/public/showcase/resources/images/layouts/themeswitcher-avalon.png b/public/showcase/resources/images/layouts/themeswitcher-avalon.png
new file mode 100644
index 0000000000..029a23554d
Binary files /dev/null and b/public/showcase/resources/images/layouts/themeswitcher-avalon.png differ
diff --git a/public/showcase/resources/images/layouts/themeswitcher-ultima.png b/public/showcase/resources/images/layouts/themeswitcher-ultima.png
new file mode 100644
index 0000000000..6cd6e90129
Binary files /dev/null and b/public/showcase/resources/images/layouts/themeswitcher-ultima.png differ
diff --git a/public/showcase/resources/images/layouts/ultima-react.png b/public/showcase/resources/images/layouts/ultima-react.png
new file mode 100644
index 0000000000..2968c9769f
Binary files /dev/null and b/public/showcase/resources/images/layouts/ultima-react.png differ
diff --git a/public/showcase/resources/images/primereact-logo.png b/public/showcase/resources/images/primereact-logo.png
index f06677cc01..a356078755 100644
Binary files a/public/showcase/resources/images/primereact-logo.png and b/public/showcase/resources/images/primereact-logo.png differ
diff --git a/src/App.js b/src/App.js
index 2d09c1cd46..8c99906137 100644
--- a/src/App.js
+++ b/src/App.js
@@ -85,6 +85,26 @@ class Home extends Component {
                         <div className="ui-g-3 ui-md-2"><img alt="users" src="showcase/resources/images/home/viacom.svg"></img></div>
                     </div>
                 </div>
+                <div className="templates">
+                    <h3>Premium Application Templates for PrimeReact</h3>
+                    <p>Based on <a href="https://github.com/facebookincubator/create-react-app">create-react-app</a>, develop awesome applications in no time using the premium templates 
+                        of PrimeReact and impress your users.</p>
+                    
+                    <div className="ui-g">
+                        <div className="ui-g-12 ui-md-6">
+                            <h4>Ultima with Material Design</h4>
+                            <a href="https://www.primefaces.org/layouts/ultima-react">
+                                <img alt="Avalon" src="showcase/resources/images/layouts/ultima-react.png" /> 
+                            </a>
+                        </div>
+                        <div className="ui-g-12 ui-md-6">
+                            <h4>Avalon with Bootstrap Styling</h4>
+                            <a href="https://www.primefaces.org/layouts/avalon-react">
+                                <img alt="Avalon" src="showcase/resources/images/layouts/avalon-react.png" /> 
+                            </a>
+                        </div>
+                    </div>
+                </div>
                 <div className="prosupport">
                     <div className="ui-g">
                         <div className="ui-g-12 ui-md-6">
@@ -384,6 +404,9 @@ class App extends Component {
                             <ul>
                                 <li className="topbar-submenu-header">THEMING</li>
                                 <li><Link to="/theming"><span className="ui-text">Guide</span></Link></li>
+                                <li className="topbar-submenu-header">PREMIUM</li>
+                                <li><a href="https://www.primefaces.org/layouts/ultima-react"><img src="showcase/resources/images/layouts/themeswitcher-ultima.png" alt="Ultima (Material)" /><span class="ui-text">Ultima</span></a></li>
+                                <li><a href="https://www.primefaces.org/layouts/avalon-react"><img src="showcase/resources/images/layouts/themeswitcher-avalon.png" alt="Avalon (Bootstrap)" /><span class="ui-text">Avalon</span></a></li>
                                 <li className="topbar-submenu-header">THEMES</li>
                                 <li><a href="#" data-theme="omega" onClick={this.changeTheme}><span className="ui-text">Omega</span></a></li>
                                 <li><a href="#" data-theme="cruze" onClick={this.changeTheme}><span className="ui-text">Cruze</span></a></li>
diff --git a/src/sass/App.scss b/src/sass/App.scss
index 8f41abe125..c4fdbed8c4 100644
--- a/src/sass/App.scss
+++ b/src/sass/App.scss
@@ -169,6 +169,7 @@ body {
                         img {
                             width: 32px;
                             vertical-align: middle;
+                            margin-right: 4px;
                         }
 
                         .ui-text {
@@ -727,6 +728,23 @@ body {
             }
         }
     }
+    
+    .templates {
+        background-color: #f5f7f8;
+        text-align: center;
+        padding: 30px;
+        border-bottom: 1px solid #c4c5c6;
+        
+        h3 {
+             font-size:24px;
+             color: #484848;
+             margin-bottom: 25px;
+        }
+        
+        img {
+            width: 100%;
+        }
+    }
 
     /* PRO */
     .prosupport {