diff --git a/src/AppConfigurator.vue b/src/AppConfigurator.vue
index 6030fdaae..9cffb9f36 100755
--- a/src/AppConfigurator.vue
+++ b/src/AppConfigurator.vue
@@ -31,25 +31,25 @@
                             <button class="p-link">
                                 <img src="./assets/images/themes/bootstrap4-light-blue.svg" alt="Bootstrap Light Blue" @click="changeTheme($event, 'bootstrap4-light-blue')"/>
                             </button>
-                            <span>Light</span>
+                            <span>Blue</span>
                         </div>
                         <div class="p-col-3">
                             <button class="p-link">
                                 <img src="./assets/images/themes/bootstrap4-light-purple.svg" alt="Bootstrap Light Blue" @click="changeTheme($event, 'bootstrap4-light-purple')"/>
                             </button>
-                            <span>Light</span>
+                            <span>Purple</span>
                         </div>
                         <div class="p-col-3">
                             <button class="p-link">
                                 <img src="./assets/images/themes/bootstrap4-dark-blue.svg" alt="Bootstrap Dark Blue" @click="changeTheme($event, 'bootstrap4-dark-blue', true)"/>
                             </button>
-                            <span>Light</span>
+                            <span>Blue</span>
                         </div>
                         <div class="p-col-3">
                             <button class="p-link">
                                 <img src="./assets/images/themes/bootstrap4-dark-purple.svg" alt="Bootstrap Dark Blue" @click="changeTheme($event, 'bootstrap4-dark-purple', true)"/>
                             </button>
-                            <span>Light</span>
+                            <span>Purple</span>
                         </div>
                     </div>
 
diff --git a/src/AppTopBar.vue b/src/AppTopBar.vue
index ee2e35cc0..d5339ef09 100755
--- a/src/AppTopBar.vue
+++ b/src/AppTopBar.vue
@@ -16,7 +16,25 @@
                         <li><router-link to="/theming"><i class="pi pi-fw pi-file"/><span>Guide</span></router-link></li>
                         <li><a href="https://www.primefaces.org/designer/primevue"><i class="pi pi-fw pi-palette" /><span>Designer</span></a></li>
                         <li><router-link to="/icons"><i class="pi pi-fw pi-info-circle"/><span>Icons</span></router-link></li>
-                        <li class="topbar-submenu-header">FREE COMPONENT THEMES</li>
+                        <li class="topbar-submenu-header">BOOTSTRAP</li>
+                        <li><a @click="changeTheme($event, 'bootstrap4-light-blue')"><img src="./assets/images/themes/bootstrap4-light-blue.svg" alt="Blue Light" /><span>Blue Light</span></a></li>
+                        <li><a @click="changeTheme($event, 'bootstrap4-light-purple')"><img src="./assets/images/themes/bootstrap4-light-purple.svg" alt="Purple Light" /><span>Purple Light</span></a></li>
+                        <li><a @click="changeTheme($event, 'bootstrap4-dark-blue')"><img src="./assets/images/themes/bootstrap4-dark-blue.svg" alt="Blue Dark" /><span>Blue Dark</span></a></li>
+                        <li><a @click="changeTheme($event, 'bootstrap4-dark-purple')"><img src="./assets/images/themes/bootstrap4-dark-purple.svg" alt="Purple Dark" /><span>Purple Dark</span></a></li>
+                        
+                        <li class="topbar-submenu-header">MATERIAL DESIGN</li>
+                        <li><a @click="changeTheme($event, 'md-light-indigo')"><img src="./assets/images/themes/md-light-indigo.svg" alt="Indigo Light" /><span>Indigo Light</span></a></li>
+                        <li><a @click="changeTheme($event, 'md-light-deeppurple')"><img src="./assets/images/themes/md-light-deeppurple.svg" alt="Deep Purple Light" /><span>Deep Purple Light</span></a></li>
+                        <li><a @click="changeTheme($event, 'md-dark-indigo')"><img src="./assets/images/themes/md-dark-indigo.svg" alt="Indigo Dark" /><span>Indigo Dark</span></a></li>
+                        <li><a @click="changeTheme($event, 'md-dark-deeppurple')"><img src="./assets/images/themes/md-dark-deeppurple.svg" alt="Deep Purple Dark" /><span>Deep Purple Dark</span></a></li>
+
+                        <li class="topbar-submenu-header">MATERIAL DESIGN COMPACT</li>
+                        <li><a @click="changeTheme($event, 'mdc-light-indigo')"><img src="./assets/images/themes/md-light-indigo.svg" alt="Indigo Light" /><span>Indigo Light</span></a></li>
+                        <li><a @click="changeTheme($event, 'mdc-light-deeppurple')"><img src="./assets/images/themes/md-light-deeppurple.svg" alt="Deep Purple Light" /><span>Deep Purple Light</span></a></li>
+                        <li><a @click="changeTheme($event, 'mdc-dark-indigo')"><img src="./assets/images/themes/md-dark-indigo.svg" alt="Indigo Dark" /><span>Indigo Dark</span></a></li>
+                        <li><a @click="changeTheme($event, 'mdc-dark-deeppurple')"><img src="./assets/images/themes/md-dark-deeppurple.svg" alt="Deep Purple Dark" /><span>Deep Purple Dark</span></a></li>
+                        
+                        <li class="topbar-submenu-header">PRIMEONE</li>
                         <li><a @click="changeTheme($event, 'saga-blue')"><img src="./assets/images/themes/saga-blue.png" alt="Saga Blue" /><span>Saga Blue</span></a></li>
                         <li><a @click="changeTheme($event, 'saga-green')"><img src="./assets/images/themes/saga-green.png" alt="Saga Green" /><span>Saga Green</span></a></li>
                         <li><a @click="changeTheme($event, 'saga-orange')"><img src="./assets/images/themes/saga-orange.png" alt="Saga Orange" /><span>Saga Orange</span></a></li>
@@ -25,10 +43,12 @@
                         <li><a @click="changeTheme($event, 'vela-green', true)"><img src="./assets/images/themes/vela-green.png" alt="Vela Green" /><span>Vela Green</span></a></li>
                         <li><a @click="changeTheme($event, 'vela-orange', true)"><img src="./assets/images/themes/vela-orange.png" alt="Vela Orange" /><span>Vela Orange</span></a></li>
                         <li><a @click="changeTheme($event, 'vela-purple', true)"><img src="./assets/images/themes/vela-purple.png" alt="Vela Purple" /><span>Vela Purple</span></a></li>
-                        <li><a @click="changeTheme($event, 'arya-blue', true)"><img src="./assets/images/themes/vela-blue.png" alt="Arya Blue" /><span>Arya Blue</span></a></li>
-                        <li><a @click="changeTheme($event, 'arya-green', true)"><img src="./assets/images/themes/vela-green.png" alt="Arya Green" /><span>Arya Green</span></a></li>
-                        <li><a @click="changeTheme($event, 'arya-orange', true)"><img src="./assets/images/themes/vela-orange.png" alt="Arya Orange" /><span>Arya Orange</span></a></li>
-                        <li><a @click="changeTheme($event, 'arya-purple', true)"><img src="./assets/images/themes/vela-purple.png" alt="Arya Purple" /><span>Arya Purple</span></a></li>
+                        <li><a @click="changeTheme($event, 'arya-blue', true)"><img src="./assets/images/themes/arya-blue.png" alt="Arya Blue" /><span>Arya Blue</span></a></li>
+                        <li><a @click="changeTheme($event, 'arya-green', true)"><img src="./assets/images/themes/arya-green.png" alt="Arya Green" /><span>Arya Green</span></a></li>
+                        <li><a @click="changeTheme($event, 'arya-orange', true)"><img src="./assets/images/themes/arya-orange.png" alt="Arya Orange" /><span>Arya Orange</span></a></li>
+                        <li><a @click="changeTheme($event, 'arya-purple', true)"><img src="./assets/images/themes/arya-purple.png" alt="Arya Purple" /><span>Arya Purple</span></a></li>
+
+                        <li class="topbar-submenu-header">LEGACY</li>
                         <li><a @click="changeTheme($event, 'nova')"><img src="./assets/images/layouts/themeswitcher-nova.png" alt="Nova" /><span>Nova</span></a></li>
                         <li><a @click="changeTheme($event, 'nova-alt')"><img src="./assets/images/layouts/themeswitcher-nova-alt.png" alt="Nova Alt" /><span>Nova Alt</span></a></li>
                         <li><a @click="changeTheme($event, 'nova-accent')"><img src="./assets/images/layouts/themeswitcher-nova-accent.png" alt="Nova Accent" /><span>Nova Accent</span></a></li>
diff --git a/src/views/setup/Setup.vue b/src/views/setup/Setup.vue
index 48c1392a4..da6ec7daa 100755
--- a/src/views/setup/Setup.vue
+++ b/src/views/setup/Setup.vue
@@ -108,23 +108,32 @@ primeicons/primeicons.css                           //icons
 </CodeHighlight>
 
             <h5>Free Themes</h5>
-            <p>PrimeVue ships with 25 free themes to choose from, import paths are as follows.</p>
+            <p>PrimeVue ships with 32 free themes to choose from, import paths are as follows.</p>
 <CodeHighlight lang="css">
+primevue/resources/themes/bootstrap4-light-blue/theme.css
+primevue/resources/themes/bootstrap4-light-purple/theme.css
+primevue/resources/themes/bootstrap4-dark-blue/theme.css
+primevue/resources/themes/bootstrap4-dark-purple/theme.css
+primevue/resources/themes/md-light-indigo/theme.css
+primevue/resources/themes/md-light-deeppurple/theme.css
+primevue/resources/themes/md-dark-indigo/theme.css
+primevue/resources/themes/md-dark-deeppurple/theme.css
+primevue/resources/themes/mdc-light-indigo/theme.css
+primevue/resources/themes/mdc-light-deeppurple/theme.css
+primevue/resources/themes/mdc-dark-indigo/theme.css
+primevue/resources/themes/mdc-dark-deeppurple/theme.css
 primevue/resources/themes/saga-blue/theme.css
-primevue/resources/themes/saga-cyan/theme.css
-primevue/resources/themes/saga-deeppurple/theme.css
 primevue/resources/themes/saga-green/theme.css
-primevue/resources/themes/saga-indigo/theme.css
 primevue/resources/themes/saga-orange/theme.css
 primevue/resources/themes/saga-purple/theme.css
 primevue/resources/themes/vela-blue/theme.css
-primevue/resources/themes/vela-cyan/theme.css
-primevue/resources/themes/vela-deeppurple/theme.css
 primevue/resources/themes/vela-green/theme.css
-primevue/resources/themes/vela-indigo/theme.css
 primevue/resources/themes/vela-orange/theme.css
 primevue/resources/themes/vela-purple/theme.css
-primevue/resources/themes/vela-teal/theme.css
+primevue/resources/themes/arya-blue/theme.css
+primevue/resources/themes/arya-green/theme.css
+primevue/resources/themes/arya-orange/theme.css
+primevue/resources/themes/arya-purple/theme.css
 primevue/resources/themes/nova/theme.css
 primevue/resources/themes/nova-alt/theme.css
 primevue/resources/themes/nova-accent/theme.css