diff --git a/.gitignore b/.gitignore
index 74fb461f0..e6a282d3f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -34,6 +34,8 @@ yarn-error.log*
 # Themes
 public/themes/soho-light/
 public/themes/soho-dark/
+public/themes/viva-light/
+public/themes/viva-dark/
 public/themes/mira/
 public/themes/nano/
 
diff --git a/gulpfile.js b/gulpfile.js
index b0efcf73a..8928c950f 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -20,7 +20,7 @@ gulp.task('build-css', function() {
 
 gulp.task('build-themes', function() {
     return gulp.src([
-        'public/themes/**/*','!public/themes/soho-*/**/*',
+        'public/themes/**/*','!public/themes/soho-*/**/*', '!public/themes/viva-*/**/*',
                         '!public/themes/mira/**/*', '!public/themes/nano/**/*'
     ])
     .pipe(gulp.dest('dist/resources/themes'));
diff --git a/public/demo/images/themes/viva-dark.svg b/public/demo/images/themes/viva-dark.svg
new file mode 100644
index 000000000..43b77067e
--- /dev/null
+++ b/public/demo/images/themes/viva-dark.svg
@@ -0,0 +1,4 @@
+<svg width="600" height="600" viewBox="0 0 600 600" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="600" height="600" fill="#0E1315"/>
+<path d="M299.5 456L154 145H226.75L299.5 415.5L372.25 145H445L299.5 456Z" stroke="#9EADE6" stroke-width="21"/>
+</svg>
diff --git a/public/demo/images/themes/viva-light.svg b/public/demo/images/themes/viva-light.svg
new file mode 100644
index 000000000..1904eb460
--- /dev/null
+++ b/public/demo/images/themes/viva-light.svg
@@ -0,0 +1,4 @@
+<svg width="600" height="600" viewBox="0 0 600 600" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="600" height="600" fill="#5472D4"/>
+<path d="M299.5 456L154 145H226.75L299.5 415.5L372.25 145H445L299.5 456Z" stroke="white" stroke-width="21"/>
+</svg>
diff --git a/src/AppConfigurator.vue b/src/AppConfigurator.vue
index 100d53e30..e5fe847a9 100755
--- a/src/AppConfigurator.vue
+++ b/src/AppConfigurator.vue
@@ -210,6 +210,18 @@
                             </button>
                             <span>Soho Dark</span>
                         </div>
+                        <div class="p-col-3">
+                            <button class="p-link" type="button" @click="changeTheme($event, 'viva-light')">
+                                <img src="demo/images/themes/viva-light.svg" alt="Viva Light" />
+                            </button>
+                            <span>Viva Light</span>
+                        </div>
+                        <div class="p-col-3">
+                            <button class="p-link" type="button" @click="changeTheme($event, 'viva-dark', true)">
+                                <img src="demo/images/themes/viva-dark.svg" alt="Viva Dark" />
+                            </button>
+                            <span>Viva Dark</span>
+                        </div>
                         <div class="p-col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'mira')">
                                 <img src="demo/images/themes/mira.jpg" alt="Mira" />
diff --git a/src/AppTopBar.vue b/src/AppTopBar.vue
index ff01143d2..8585e7468 100755
--- a/src/AppTopBar.vue
+++ b/src/AppTopBar.vue
@@ -60,6 +60,8 @@
                         <li class="topbar-submenu-header">PREMIUM</li>
                         <li><a @click="changeTheme($event, 'soho-light')"><img src="demo/images/themes/soho-light.png" alt="Soho Light" /><span>Soho Light</span></a></li>
                         <li><a @click="changeTheme($event, 'soho-dark', true)"><img src="demo/images/themes/soho-dark.png" alt="Soho Dark" /><span>Soho Dark</span></a></li>
+                        <li><a @click="changeTheme($event, 'viva-light')"><img src="demo/images/themes/viva-light.svg" alt="Viva Light" /><span>Viva Light</span></a></li>
+                        <li><a @click="changeTheme($event, 'viva-dark', true)"><img src="demo/images/themes/viva-dark.svg" alt="Viva Dark" /><span>Viva Dark</span></a></li>
                         <li><a @click="changeTheme($event, 'mira')"><img src="demo/images/themes/mira.jpg" alt="Mira" /><span>Mira</span></a></li>
                         <li><a @click="changeTheme($event, 'nano')"><img src="demo/images/themes/nano.jpg" alt="Nano" /><span>Nano</span></a></li>
 
@@ -168,6 +170,8 @@ export default {
                 'fluent-light': 'fluent-light.png',
                 'soho-light': 'soho-light.png',
                 'soho-dark': 'soho-dark.png',
+                'viva-light': 'viva-light.svg',
+                'viva-dark': 'viva-dark.svg',
                 'mira': 'mira.jpg',
                 'nano': 'nano.jpg',
             }
diff --git a/src/views/theming/Theming.vue b/src/views/theming/Theming.vue
index 3e8ae2a63..1bba583ff 100755
--- a/src/views/theming/Theming.vue
+++ b/src/views/theming/Theming.vue
@@ -22,7 +22,7 @@
 
             <p><a href="https://www.primefaces.org/designer/primevue">Designer</a> is the ultimate tool to create your own PrimeVue experience powered by a SASS based theme engine
                 with 500+ variables and a Visual Designer. PrimeVue only ships the generated CSS of <b>Material</b>, <b>Bootstrap</b>, <b>Saga</b>, <b>Vela</b>, <b>Arya</b> and legacy themes whereas Designer provides
-                full access to the whole SASS structure and the variables of these pre-built themes for easier customization.</p>
+                full access to the whole SASS structure and the variables of these pre-built themes for easier customization. In addition, designer provides exclusive premium themes to subscribers including Soho, Viva, Mira and Nano that are not available in core PrimeVue distribution.</p>
 
             <p>Whether you have your own style guide or just need a custom theme, Designer API is the right tool to design and bring them to existence.</p>