diff --git a/public/showcase/resources/images/layouts/avalon-react-sqr.png b/public/showcase/resources/images/layouts/avalon-react-sqr.png
new file mode 100644
index 0000000000..f67002ac13
Binary files /dev/null and b/public/showcase/resources/images/layouts/avalon-react-sqr.png differ
diff --git a/public/showcase/resources/images/layouts/avalon-react.png b/public/showcase/resources/images/layouts/avalon-react.png
deleted file mode 100644
index 92558d3c1d..0000000000
Binary files a/public/showcase/resources/images/layouts/avalon-react.png and /dev/null differ
diff --git a/public/showcase/resources/images/layouts/serenity-react-sqr.png b/public/showcase/resources/images/layouts/serenity-react-sqr.png
new file mode 100644
index 0000000000..61ab783923
Binary files /dev/null and b/public/showcase/resources/images/layouts/serenity-react-sqr.png differ
diff --git a/public/showcase/resources/images/layouts/themeswitcher-serenity.png b/public/showcase/resources/images/layouts/themeswitcher-serenity.png
new file mode 100644
index 0000000000..7b85c580b6
Binary files /dev/null and b/public/showcase/resources/images/layouts/themeswitcher-serenity.png differ
diff --git a/public/showcase/resources/images/layouts/ultima-react-sqr.png b/public/showcase/resources/images/layouts/ultima-react-sqr.png
new file mode 100644
index 0000000000..ee6d0ba714
Binary files /dev/null and b/public/showcase/resources/images/layouts/ultima-react-sqr.png differ
diff --git a/public/showcase/resources/images/layouts/ultima-react.png b/public/showcase/resources/images/layouts/ultima-react.png
deleted file mode 100644
index 2968c9769f..0000000000
Binary files a/public/showcase/resources/images/layouts/ultima-react.png and /dev/null differ
diff --git a/src/App.js b/src/App.js
index a8a940c076..5175ba8d1f 100644
--- a/src/App.js
+++ b/src/App.js
@@ -390,9 +390,10 @@ class App extends Component {
                                 <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/serenity-react"><img src="showcase/resources/images/layouts/themeswitcher-serenity.png" alt="Serenity (Material)" /><span className="ui-text">Serenity</span></a></li>
                                 <li><a href="https://www.primefaces.org/layouts/ultima-react"><img src="showcase/resources/images/layouts/themeswitcher-ultima.png" alt="Ultima (Material)" /><span className="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 className="ui-text">Avalon</span></a></li>
-                                <li className="topbar-submenu-header">THEMES</li>
+                                <li className="topbar-submenu-header">FREE</li>
                                 <li><a data-theme="omega" onClick={this.changeTheme}><span className="ui-text">Omega</span></a></li>
                                 <li><a data-theme="cruze" onClick={this.changeTheme}><span className="ui-text">Cruze</span></a></li>
                                 <li><a data-theme="cupertino" onClick={this.changeTheme}><span className="ui-text">Cupertino</span></a></li>
diff --git a/src/showcase/home/HomeComponent.js b/src/showcase/home/HomeComponent.js
index 35910c5dfb..1b014a4f08 100644
--- a/src/showcase/home/HomeComponent.js
+++ b/src/showcase/home/HomeComponent.js
@@ -84,16 +84,22 @@ export class HomeComponent extends Component {
                         of PrimeReact and impress your users.</p>
 
                     <div className="ui-g">
-                        <div className="ui-g-12 ui-md-6">
+                        <div className="ui-g-12 ui-md-4">
+                            <h4>Serenity with Material Design</h4>
+                            <a href="https://www.primefaces.org/layouts/serenity-react">
+                                <img alt="Serenity" src="showcase/resources/images/layouts/serenity-react-sqr.png" />
+                            </a>
+                        </div>
+                        <div className="ui-g-12 ui-md-4">
                             <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" />
+                                <img alt="Ultima" src="showcase/resources/images/layouts/ultima-react-sqr.png" />
                             </a>
                         </div>
-                        <div className="ui-g-12 ui-md-6">
+                        <div className="ui-g-12 ui-md-4">
                             <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" />
+                                <img alt="Avalon" src="showcase/resources/images/layouts/avalon-react-sqr.png" />
                             </a>
                         </div>
                     </div>