diff --git a/public/demo/images/themes/lara-dark-blue.png b/public/demo/images/themes/lara-dark-blue.png
new file mode 100644
index 000000000..0a999085e
Binary files /dev/null and b/public/demo/images/themes/lara-dark-blue.png differ
diff --git a/public/demo/images/themes/lara-dark-blue.svg b/public/demo/images/themes/lara-dark-blue.svg
deleted file mode 100644
index 56c737d36..000000000
--- a/public/demo/images/themes/lara-dark-blue.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-<svg width="600" height="600" viewBox="0 0 600 600" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M600 0H0V600H600V0Z" fill="#1D2126"/>
-<path d="M157 492H386.403L399 417.844H261.756L305.515 153H213.356L157 492Z" fill="#9C9EE8"/>
-<path d="M259.031 108H351L305.969 153H214L259.031 108Z" fill="#9C9EE8"/>
-<path d="M351 108L307.183 372.924L262 418L305.817 153.076L351 108Z" fill="#9C9EE8"/>
-<path d="M307.033 373H444L398.967 418H262L307.033 373Z" fill="#9C9EE8"/>
-<path d="M202.355 446.945L259 108L213.645 153.055L157 492L202.355 446.945Z" fill="#678ab1"/>
-<path d="M432 447H202.202L157 492H386.798L432 447Z" fill="#678ab1"/>
-<path d="M202 447H431.403L444 372.844H306.756L350.515 108H258.356L202 447Z" fill="#93C5FD"/>
-</svg>
diff --git a/public/demo/images/themes/lara-dark-indigo.png b/public/demo/images/themes/lara-dark-indigo.png
new file mode 100644
index 000000000..b435d9804
Binary files /dev/null and b/public/demo/images/themes/lara-dark-indigo.png differ
diff --git a/public/demo/images/themes/lara-dark-indigo.svg b/public/demo/images/themes/lara-dark-indigo.svg
deleted file mode 100644
index 0789f4777..000000000
--- a/public/demo/images/themes/lara-dark-indigo.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-<svg width="600" height="600" viewBox="0 0 600 600" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M600 0H0V600H600V0Z" fill="#1D2126"/>
-<path d="M157 492H386.403L399 417.844H261.756L305.515 153H213.356L157 492Z" fill="#9C9EE8"/>
-<path d="M259.031 108H351L305.969 153H214L259.031 108Z" fill="#9C9EE8"/>
-<path d="M351 108L307.183 372.924L262 418L305.817 153.076L351 108Z" fill="#9C9EE8"/>
-<path d="M307.033 373H444L398.967 418H262L307.033 373Z" fill="#9C9EE8"/>
-<path d="M202.355 446.945L259 108L213.645 153.055L157 492L202.355 446.945Z" fill="#636AE9"/>
-<path d="M432 447H202.202L157 492H386.798L432 447Z" fill="#636AE9"/>
-<path d="M202 447H431.403L444 372.844H306.756L350.515 108H258.356L202 447Z" fill="#A7B5F6"/>
-</svg>
diff --git a/public/demo/images/themes/lara-dark-purple.png b/public/demo/images/themes/lara-dark-purple.png
new file mode 100644
index 000000000..e0d5bf41d
Binary files /dev/null and b/public/demo/images/themes/lara-dark-purple.png differ
diff --git a/public/demo/images/themes/lara-dark-purple.svg b/public/demo/images/themes/lara-dark-purple.svg
deleted file mode 100644
index b7fbf701a..000000000
--- a/public/demo/images/themes/lara-dark-purple.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-<svg width="600" height="600" viewBox="0 0 600 600" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M600 0H0V600H600V0Z" fill="#1D2126"/>
-<path d="M157 492H386.403L399 417.844H261.756L305.515 153H213.356L157 492Z" fill="#9C9EE8"/>
-<path d="M259.031 108H351L305.969 153H214L259.031 108Z" fill="#9C9EE8"/>
-<path d="M351 108L307.183 372.924L262 418L305.817 153.076L351 108Z" fill="#9C9EE8"/>
-<path d="M307.033 373H444L398.967 418H262L307.033 373Z" fill="#9C9EE8"/>
-<path d="M202.355 446.945L259 108L213.645 153.055L157 492L202.355 446.945Z" fill="#8362ED"/>
-<path d="M432 447H202.202L157 492H386.798L432 447Z" fill="#8362ED"/>
-<path d="M202 447H431.403L444 372.844H306.756L350.515 108H258.356L202 447Z" fill="#C1B7F8"/>
-</svg>
diff --git a/public/demo/images/themes/lara-dark-teal.png b/public/demo/images/themes/lara-dark-teal.png
new file mode 100644
index 000000000..2ae219440
Binary files /dev/null and b/public/demo/images/themes/lara-dark-teal.png differ
diff --git a/public/demo/images/themes/lara-dark-teal.svg b/public/demo/images/themes/lara-dark-teal.svg
deleted file mode 100644
index f6cb32301..000000000
--- a/public/demo/images/themes/lara-dark-teal.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-<svg width="600" height="600" viewBox="0 0 600 600" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M600 0H0V600H600V0Z" fill="#1D2126"/>
-<path d="M157 492H386.403L399 417.844H261.756L305.515 153H213.356L157 492Z" fill="#9C9EE8"/>
-<path d="M259.031 108H351L305.969 153H214L259.031 108Z" fill="#9C9EE8"/>
-<path d="M351 108L307.183 372.924L262 418L305.817 153.076L351 108Z" fill="#9C9EE8"/>
-<path d="M307.033 373H444L398.967 418H262L307.033 373Z" fill="#9C9EE8"/>
-<path d="M202.355 446.945L259 108L213.645 153.055L157 492L202.355 446.945Z" fill="#388c7f"/>
-<path d="M432 447H202.202L157 492H386.798L432 447Z" fill="#388c7f"/>
-<path d="M202 447H431.403L444 372.844H306.756L350.515 108H258.356L202 447Z" fill="#5EEAD4"/>
-</svg>
diff --git a/public/demo/images/themes/lara-light-blue.png b/public/demo/images/themes/lara-light-blue.png
new file mode 100644
index 000000000..0278849dd
Binary files /dev/null and b/public/demo/images/themes/lara-light-blue.png differ
diff --git a/public/demo/images/themes/lara-light-blue.svg b/public/demo/images/themes/lara-light-blue.svg
deleted file mode 100644
index 87eed20fa..000000000
--- a/public/demo/images/themes/lara-light-blue.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-<svg width="600" height="600" viewBox="0 0 600 600" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M600 0H0V600H600V0Z" fill="#3B82F6"/>
-<path d="M157 492H386.403L399 417.844H261.756L305.515 153H213.356L157 492Z" fill="#9C9EE8"/>
-<path d="M259.031 108H351L305.969 153H214L259.031 108Z" fill="#9C9EE8"/>
-<path d="M351 108L307.183 372.924L262 418L305.817 153.076L351 108Z" fill="#9C9EE8"/>
-<path d="M307.033 373H444L398.967 418H262L307.033 373Z" fill="#9C9EE8"/>
-<path d="M202.355 446.945L259 108L213.645 153.055L157 492L202.355 446.945Z" fill="#93C5FD"/>
-<path d="M432 447H202.202L157 492H386.798L432 447Z" fill="#93C5FD"/>
-<path d="M202 447H431.403L444 372.844H306.756L350.515 108H258.356L202 447Z" fill="white"/>
-</svg>
diff --git a/public/demo/images/themes/lara-light-indigo.png b/public/demo/images/themes/lara-light-indigo.png
new file mode 100644
index 000000000..80bee5833
Binary files /dev/null and b/public/demo/images/themes/lara-light-indigo.png differ
diff --git a/public/demo/images/themes/lara-light-indigo.svg b/public/demo/images/themes/lara-light-indigo.svg
deleted file mode 100644
index d442f7994..000000000
--- a/public/demo/images/themes/lara-light-indigo.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-<svg width="600" height="600" viewBox="0 0 600 600" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M600 0H0V600H600V0Z" fill="#636AE9"/>
-<path d="M157 492H386.403L399 417.844H261.756L305.515 153H213.356L157 492Z" fill="#9C9EE8"/>
-<path d="M259.031 108H351L305.969 153H214L259.031 108Z" fill="#9C9EE8"/>
-<path d="M351 108L307.183 372.924L262 418L305.817 153.076L351 108Z" fill="#9C9EE8"/>
-<path d="M307.033 373H444L398.967 418H262L307.033 373Z" fill="#9C9EE8"/>
-<path d="M202.355 446.945L259 108L213.645 153.055L157 492L202.355 446.945Z" fill="#A7B5F6"/>
-<path d="M432 447H202.202L157 492H386.798L432 447Z" fill="#A7B5F6"/>
-<path d="M202 447H431.403L444 372.844H306.756L350.515 108H258.356L202 447Z" fill="white"/>
-</svg>
diff --git a/public/demo/images/themes/lara-light-purple.png b/public/demo/images/themes/lara-light-purple.png
new file mode 100644
index 000000000..7745c13a1
Binary files /dev/null and b/public/demo/images/themes/lara-light-purple.png differ
diff --git a/public/demo/images/themes/lara-light-purple.svg b/public/demo/images/themes/lara-light-purple.svg
deleted file mode 100644
index 8ad2ca4e5..000000000
--- a/public/demo/images/themes/lara-light-purple.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-<svg width="600" height="600" viewBox="0 0 600 600" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M600 0H0V600H600V0Z" fill="#8362ED"/>
-<path d="M157 492H386.403L399 417.844H261.756L305.515 153H213.356L157 492Z" fill="#9C9EE8"/>
-<path d="M259.031 108H351L305.969 153H214L259.031 108Z" fill="#9C9EE8"/>
-<path d="M351 108L307.183 372.924L262 418L305.817 153.076L351 108Z" fill="#9C9EE8"/>
-<path d="M307.033 373H444L398.967 418H262L307.033 373Z" fill="#9C9EE8"/>
-<path d="M202.355 446.945L259 108L213.645 153.055L157 492L202.355 446.945Z" fill="#C1B7F8"/>
-<path d="M432 447H202.202L157 492H386.798L432 447Z" fill="#C1B7F8"/>
-<path d="M202 447H431.403L444 372.844H306.756L350.515 108H258.356L202 447Z" fill="white"/>
-</svg>
diff --git a/public/demo/images/themes/lara-light-teal.png b/public/demo/images/themes/lara-light-teal.png
new file mode 100644
index 000000000..f8fb07fe9
Binary files /dev/null and b/public/demo/images/themes/lara-light-teal.png differ
diff --git a/public/demo/images/themes/lara-light-teal.svg b/public/demo/images/themes/lara-light-teal.svg
deleted file mode 100644
index 595e5de7c..000000000
--- a/public/demo/images/themes/lara-light-teal.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-<svg width="600" height="600" viewBox="0 0 600 600" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M600 0H0V600H600V0Z" fill="#14B8A6"/>
-<path d="M157 492H386.403L399 417.844H261.756L305.515 153H213.356L157 492Z" fill="#9C9EE8"/>
-<path d="M259.031 108H351L305.969 153H214L259.031 108Z" fill="#9C9EE8"/>
-<path d="M351 108L307.183 372.924L262 418L305.817 153.076L351 108Z" fill="#9C9EE8"/>
-<path d="M307.033 373H444L398.967 418H262L307.033 373Z" fill="#9C9EE8"/>
-<path d="M202.355 446.945L259 108L213.645 153.055L157 492L202.355 446.945Z" fill="#8adcd3"/>
-<path d="M432 447H202.202L157 492H386.798L432 447Z" fill="#8adcd3"/>
-<path d="M202 447H431.403L444 372.844H306.756L350.515 108H258.356L202 447Z" fill="white"/>
-</svg>
diff --git a/src/AppConfigurator.vue b/src/AppConfigurator.vue
index 310f2d66b..6c19d4b97 100755
--- a/src/AppConfigurator.vue
+++ b/src/AppConfigurator.vue
@@ -133,49 +133,49 @@
                     <div class="p-grid free-themes">
                         <div class="p-col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'lara-light-indigo')">
-                                <img src="demo/images/themes/lara-light-indigo.svg" alt="Lara Light Indigo" />
+                                <img src="demo/images/themes/lara-light-indigo.png" alt="Lara Light Indigo" />
                             </button>
                             <span>Lara Light Indigo</span>
                         </div>
                         <div class="p-col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'lara-dark-indigo', true)">
-                                <img src="demo/images/themes/lara-dark-indigo.svg" alt="Lara Dark Indigo" />
+                                <img src="demo/images/themes/lara-dark-indigo.png" alt="Lara Dark Indigo" />
                             </button>
                             <span>Lara Dark Indigo</span>
                         </div>
                         <div class="p-col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'lara-light-purple')">
-                                <img src="demo/images/themes/lara-light-purple.svg" alt="Lara Light Purple" />
+                                <img src="demo/images/themes/lara-light-purple.png" alt="Lara Light Purple" />
                             </button>
                             <span>Lara Light Purple</span>
                         </div>
                         <div class="p-col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'lara-dark-purple', true)">
-                                <img src="demo/images/themes/lara-dark-purple.svg" alt="Lara Dark Purple" />
+                                <img src="demo/images/themes/lara-dark-purple.png" alt="Lara Dark Purple" />
                             </button>
                             <span>Lara Dark Purple</span>
                         </div>
                         <div class="p-col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'lara-light-blue')">
-                                <img src="demo/images/themes/lara-light-blue.svg" alt="Lara Light Blue" />
+                                <img src="demo/images/themes/lara-light-blue.png" alt="Lara Light Blue" />
                             </button>
                             <span>Lara Light Blue</span>
                         </div>
                         <div class="p-col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'lara-dark-blue', true)">
-                                <img src="demo/images/themes/lara-dark-blue.svg" alt="Lara Dark Blue" />
+                                <img src="demo/images/themes/lara-dark-blue.png" alt="Lara Dark Blue" />
                             </button>
                             <span>Lara Dark Blue</span>
                         </div>
                         <div class="p-col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'lara-light-teal')">
-                                <img src="demo/images/themes/lara-light-teal.svg" alt="Lara Light Teal" />
+                                <img src="demo/images/themes/lara-light-teal.png" alt="Lara Light Teal" />
                             </button>
                             <span>Lara Light Teal</span>
                         </div>
                         <div class="p-col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'lara-dark-teal', true)">
-                                <img src="demo/images/themes/lara-dark-teal.svg" alt="Lara Dark Teal" />
+                                <img src="demo/images/themes/lara-dark-teal.png" alt="Lara Dark Teal" />
                             </button>
                             <span>Lara Dark Teal</span>
                         </div>
diff --git a/src/AppTopBar.vue b/src/AppTopBar.vue
index 93b974d89..4c38c497b 100755
--- a/src/AppTopBar.vue
+++ b/src/AppTopBar.vue
@@ -49,14 +49,14 @@
                         <li><a @click="changeTheme($event, 'fluent-light')"><img src="demo/images/themes/fluent-light.png" alt="Fluent Light" /><span>Fluent Light</span></a></li>
 
                         <li class="topbar-submenu-header">PRIMEONE 2022</li>
-                        <li><a @click="changeTheme($event, 'lara-light-indigo')"><img src="demo/images/themes/lara-light-indigo.svg" alt="Lara Light Indigo" /><span>Lara Light Indigo</span></a></li>
-                        <li><a @click="changeTheme($event, 'lara-dark-indigo')"><img src="demo/images/themes/lara-dark-indigo.svg" alt="Lara Dark Indigo" /><span>Lara Dark Indigo</span></a></li>
-                        <li><a @click="changeTheme($event, 'lara-light-purple')"><img src="demo/images/themes/lara-light-purple.svg" alt="Lara Light Purple" /><span>Lara Light Purple</span></a></li>
-                        <li><a @click="changeTheme($event, 'lara-dark-purple')"><img src="demo/images/themes/lara-dark-purple.svg" alt="Lara Dark Purple" /><span>Lara Dark Purple</span></a></li>
-                        <li><a @click="changeTheme($event, 'lara-light-blue')"><img src="demo/images/themes/lara-light-blue.svg" alt="Lara Light Blue" /><span>Lara Light Blue</span></a></li>
-                        <li><a @click="changeTheme($event, 'lara-dark-blue')"><img src="demo/images/themes/lara-dark-blue.svg" alt="Lara Dark Blue" /><span>Lara Dark Blue</span></a></li>
-                        <li><a @click="changeTheme($event, 'lara-light-teal')"><img src="demo/images/themes/lara-light-teal.svg" alt="Lara Light Teal" /><span>Lara Light Teal</span></a></li>
-                        <li><a @click="changeTheme($event, 'lara-dark-teal')"><img src="demo/images/themes/lara-dark-teal.svg" alt="Lara Dark Teal" /><span>Lara Dark Teal</span></a></li>
+                        <li><a @click="changeTheme($event, 'lara-light-indigo')"><img src="demo/images/themes/lara-light-indigo.png" alt="Lara Light Indigo" /><span>Lara Light Indigo</span></a></li>
+                        <li><a @click="changeTheme($event, 'lara-dark-indigo')"><img src="demo/images/themes/lara-dark-indigo.png" alt="Lara Dark Indigo" /><span>Lara Dark Indigo</span></a></li>
+                        <li><a @click="changeTheme($event, 'lara-light-purple')"><img src="demo/images/themes/lara-light-purple.png" alt="Lara Light Purple" /><span>Lara Light Purple</span></a></li>
+                        <li><a @click="changeTheme($event, 'lara-dark-purple')"><img src="demo/images/themes/lara-dark-purple.png" alt="Lara Dark Purple" /><span>Lara Dark Purple</span></a></li>
+                        <li><a @click="changeTheme($event, 'lara-light-blue')"><img src="demo/images/themes/lara-light-blue.png" alt="Lara Light Blue" /><span>Lara Light Blue</span></a></li>
+                        <li><a @click="changeTheme($event, 'lara-dark-blue')"><img src="demo/images/themes/lara-dark-blue.png" alt="Lara Dark Blue" /><span>Lara Dark Blue</span></a></li>
+                        <li><a @click="changeTheme($event, 'lara-light-teal')"><img src="demo/images/themes/lara-light-teal.png" alt="Lara Light Teal" /><span>Lara Light Teal</span></a></li>
+                        <li><a @click="changeTheme($event, 'lara-dark-teal')"><img src="demo/images/themes/lara-dark-teal.png" alt="Lara Dark Teal" /><span>Lara Dark Teal</span></a></li>
 
                         <li class="topbar-submenu-header">PRIMEONE 2021</li>
                         <li><a @click="changeTheme($event, 'saga-blue')"><img src="demo/images/themes/saga-blue.png" alt="Saga Blue" /><span>Saga Blue</span></a></li>
@@ -183,14 +183,14 @@ export default {
                 'mira': 'mira.jpg',
                 'nano': 'nano.jpg',
                 'tailwind-light': 'tailwind-light.png',
-                'lara-dark-indigo': 'lara-dark-indigo.svg',
-                'lara-dark-purple': 'lara-dark-purple.svg',
-                'lara-light-indigo': 'lara-light-indigo.svg',
-                'lara-light-purple': 'lara-light-purple.svg',
-                'lara-dark-teal': 'lara-dark-indigo.svg',
-                'lara-dark-blue': 'lara-dark-blue.svg',
-                'lara-light-teal': 'lara-light-teal.svg',
-                'lara-light-blue': 'lara-light-blue.svg'
+                'lara-dark-indigo': 'lara-dark-indigo.png',
+                'lara-dark-purple': 'lara-dark-purple.png',
+                'lara-light-indigo': 'lara-light-indigo.png',
+                'lara-light-purple': 'lara-light-purple.png',
+                'lara-dark-teal': 'lara-dark-indigo.png',
+                'lara-dark-blue': 'lara-dark-blue.png',
+                'lara-light-teal': 'lara-light-teal.png',
+                'lara-light-blue': 'lara-light-blue.png'
             }
         }
     },