diff --git a/src/AppConfigurator.vue b/src/AppConfigurator.vue
index 98ff5771a..5e4402459 100644
--- a/src/AppConfigurator.vue
+++ b/src/AppConfigurator.vue
@@ -98,6 +98,11 @@
                                 <img alt="Avalon" src="./assets/images/layouts/avalon.jpg">
                             </a>
                         </div>
+                        <div class="p-col-12">
+                            <a href="https://www.primefaces.org/layouts/apollo-vue">
+                                <img alt="Apollo" src="./assets/images/layouts/apollo.jpg">
+                            </a>
+                        </div>
                     </div>
                 </div>
 
diff --git a/src/AppTopBar.vue b/src/AppTopBar.vue
index 52f9d7ecd..2bfeebaf1 100644
--- a/src/AppTopBar.vue
+++ b/src/AppTopBar.vue
@@ -39,6 +39,7 @@
                         <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/avalon-vue"><img src="./assets/images/layouts/themeswitcher-avalon.png" alt="Avalon" /><span>Avalon</span><span class="theme-badge bootstrap">bootstrap</span></a></li>
                         <li><a href="https://www.primefaces.org/babylon-vue"><img src="./assets/images/layouts/themeswitcher-babylon.png" alt="Babylon" /><span>Babylon</span></a></li>
+                        <li><a href="https://www.primefaces.org/apollo-vue"><img src="./assets/images/layouts/themeswitcher-apollo.png" alt="Apollo" /><span>Apollo</span><span class="theme-badge darkmode">dark mode</span></a></li>
                     </ul>
                 </transition>
             </li>
diff --git a/src/assets/images/layouts/apollo.jpg b/src/assets/images/layouts/apollo.jpg
new file mode 100644
index 000000000..cbe87916d
Binary files /dev/null and b/src/assets/images/layouts/apollo.jpg differ
diff --git a/src/assets/images/layouts/themeswitcher-apollo.png b/src/assets/images/layouts/themeswitcher-apollo.png
new file mode 100644
index 000000000..018772aab
Binary files /dev/null and b/src/assets/images/layouts/themeswitcher-apollo.png differ
diff --git a/src/assets/styles/app.scss b/src/assets/styles/app.scss
index 04c8bbb41..4890d9d46 100644
--- a/src/assets/styles/app.scss
+++ b/src/assets/styles/app.scss
@@ -293,6 +293,12 @@ body {
             background: -webkit-linear-gradient(to bottom, #563D7C, #966BD8);  /* Chrome 10-25, Safari 5.1-6 */
             background: linear-gradient(to bottom, #563D7C, #966BD8); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */  
         }
+
+        .theme-badge.darkmode {
+            background-color: #141d26;
+            background: -webkit-linear-gradient(to bottom, #141d26, #5a6067);  /* Chrome 10-25, Safari 5.1-6 */
+            background: linear-gradient(to bottom, #141d26, #5a6067); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ 
+        }
     }
 }
 
@@ -745,12 +751,14 @@ body {
     width: 550px;
     z-index: 996;
     height: calc(100% - 70px);
-    @include transition(transform .2s);
-    transform: translateX(550px);
+    @include transition(transform .3s);
+    transform: translate3d(550px,0,0);
     background-color: #ffffff;
+    backface-visibility: hidden;
+    -webkit-backface-visibility: hidden;
     
     &.layout-config-active {
-        transform: translateX(0);
+        transform: translate3d(0,0,0);
         
         .layout-config-content {
             .layout-config-button {
@@ -914,7 +922,7 @@ body {
     .layout-config {
         top: 110px;
         height: calc(100% - 110px);
-        transform: translateX(100%);
+        transform: translate3d(100%,0,0);
         
         .layout-config-button {
             left: auto;
@@ -923,7 +931,7 @@ body {
 
         &.layout-config-active {
             width: 100%;
-            transform: translateX(0);
+            transform: translate3d(0,0,0);
         }
     }
 }
@@ -1238,7 +1246,7 @@ body {
         top: 70px;
         left: -300px;
         z-index: 999;
-        @include transition(left .2s);
+        @include transition(left .3s);
 
         &.active {
             left: 0;
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 724559376..f84529af0 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -124,21 +124,26 @@
             <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-4">
+                <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-4">
+                <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">
                     </a>
                 </div>
-                <div class="p-col-12 p-md-4">
+                <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 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">
+                    </a>
+                </div>
             </div>
         </div>
         <div class="templates">