diff --git a/public/demo/images/themes/lara-dark-indigo.svg b/public/demo/images/themes/lara-dark-indigo.svg
new file mode 100644
index 000000000..0789f4777
--- /dev/null
+++ b/public/demo/images/themes/lara-dark-indigo.svg
@@ -0,0 +1,10 @@
+<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.svg b/public/demo/images/themes/lara-dark-purple.svg
new file mode 100644
index 000000000..b7fbf701a
--- /dev/null
+++ b/public/demo/images/themes/lara-dark-purple.svg
@@ -0,0 +1,10 @@
+<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-light-indigo.svg b/public/demo/images/themes/lara-light-indigo.svg
new file mode 100644
index 000000000..d442f7994
--- /dev/null
+++ b/public/demo/images/themes/lara-light-indigo.svg
@@ -0,0 +1,10 @@
+<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.svg b/public/demo/images/themes/lara-light-purple.svg
new file mode 100644
index 000000000..8ad2ca4e5
--- /dev/null
+++ b/public/demo/images/themes/lara-light-purple.svg
@@ -0,0 +1,10 @@
+<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/src/AppConfigurator.vue b/src/AppConfigurator.vue
index d85ff8b7e..3a9e37d7e 100755
--- a/src/AppConfigurator.vue
+++ b/src/AppConfigurator.vue
@@ -133,25 +133,25 @@
                     <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/saga-blue.png" alt="Lara Light Indigo" />
+                                <img src="demo/images/themes/lara-light-indigo.svg" 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')">
-                                <img src="demo/images/themes/saga-green.png" alt="Lara Dark Indigo" />
+                                <img src="demo/images/themes/lara-dark-indigo.svg" 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/saga-orange.png" alt="Lara Light Purple" />
+                                <img src="demo/images/themes/lara-light-purple.svg" 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')">
-                                <img src="demo/images/themes/saga-purple.png" alt="Lara Dark Purple" />
+                                <img src="demo/images/themes/lara-dark-purple.svg" alt="Lara Dark Purple" />
                             </button>
                             <span>Lara Dark Purple</span>
                         </div>