diff --git a/src/AppConfigurator.vue b/src/AppConfigurator.vue
index bd091d06f..2a9a36023 100755
--- a/src/AppConfigurator.vue
+++ b/src/AppConfigurator.vue
@@ -42,18 +42,59 @@
                     <div class="p-grid free-themes">
                          <div class="p-col-3">
                             <button class="p-link">
-                                <img src="./assets/images/themes/material-light.png" alt="Material Light" @click="changeTheme($event, 'material-light')"/>
+                                <img src="./assets/images/themes/md-light-indigo-pink.svg" alt="Material Light Indigo Pink" @click="changeTheme($event, 'md-light-indigo-pink')"/>
                             </button>
-                            <span>Light</span>
+                            <span>Indigo - Pink</span>
                         </div>
                         <div class="p-col-3">
                             <button class="p-link">
-                                <img src="./assets/images/themes/material-dark.png" alt="Material Dark" @click="changeTheme($event, 'material-dark', true)"/>
+                                <img src="./assets/images/themes/md-light-deeppurple-green.svg" alt="Material Light Deep Purple Green" @click="changeTheme($event, 'md-light-deeppurple-green')"/>
                             </button>
-                            <span>Dark</span>
+                            <span>Purple - Green</span>
+                        </div>
+                        <div class="p-col-3">
+                            <button class="p-link">
+                                <img src="./assets/images/themes/md-dark-indigo-pink.svg" alt="Material Dark Indigo Pink" @click="changeTheme($event, 'md-dark-indigo-pink')"/>
+                            </button>
+                            <span>Indigo - Pink</span>
+                        </div>
+                        <div class="p-col-3">
+                            <button class="p-link">
+                                <img src="./assets/images/themes/md-dark-deeppurple-green.svg" alt="Material Dark Deep Purple Green" @click="changeTheme($event, 'md-dark-deeppurple-green')"/>
+                            </button>
+                            <span>Purple - Green</span>
                         </div>
                     </div>
 
+                    <h5>Material Compact</h5>
+                    <div class="p-grid free-themes">
+                         <div class="p-col-3">
+                            <button class="p-link">
+                                <img src="./assets/images/themes/md-light-indigo-pink.svg" alt="Material Compact Light Indigo Pink" @click="changeTheme($event, 'mdc-light-indigo-pink')"/>
+                            </button>
+                            <span>Indigo - Pink</span>
+                        </div>
+                        <div class="p-col-3">
+                            <button class="p-link">
+                                <img src="./assets/images/themes/md-light-deeppurple-green.svg" alt="Material Compact Deep Purple Green" @click="changeTheme($event, 'mdc-light-deeppurple-green')"/>
+                            </button>
+                            <span>Purple - Green</span>
+                        </div>
+                        <div class="p-col-3">
+                            <button class="p-link">
+                                <img src="./assets/images/themes/md-dark-indigo-pink.svg" alt="Material Compact Dark Indigo Pink" @click="changeTheme($event, 'mdc-dark-indigo-pink')"/>
+                            </button>
+                            <span>Indigo - Pink</span>
+                        </div>
+                        <div class="p-col-3">
+                            <button class="p-link">
+                                <img src="./assets/images/themes/md-dark-deeppurple-green.svg" alt="Material Compact Dark Deep Purple Green" @click="changeTheme($event, 'mdc-dark-deeppurple-green')"/>
+                            </button>
+                            <span>Purple - Green</span>
+                        </div>
+                    </div>
+                    
+
                     <h5>PrimeOne Design</h5>
                     <div class="p-grid free-themes">
                         <div class="p-col-3">
diff --git a/src/assets/images/themes/material-dark.png b/src/assets/images/themes/material-dark.png
deleted file mode 100644
index 32ad21f3c..000000000
Binary files a/src/assets/images/themes/material-dark.png and /dev/null differ
diff --git a/src/assets/images/themes/material-light.png b/src/assets/images/themes/material-light.png
deleted file mode 100644
index 3a3747de9..000000000
Binary files a/src/assets/images/themes/material-light.png and /dev/null differ
diff --git a/src/assets/images/themes/md-dark-deeppurple-green.svg b/src/assets/images/themes/md-dark-deeppurple-green.svg
new file mode 100644
index 000000000..9c7a7f3b0
--- /dev/null
+++ b/src/assets/images/themes/md-dark-deeppurple-green.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="1024px" height="1024px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>1</title>
+    <g id="1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <circle id="circle" fill="#6734BA" cx="512" cy="512" r="512"></circle>
+        <rect id="rectangle" fill="#4caf50" x="154" y="155" width="715" height="716"></rect>
+        <polygon id="triangle" fill="#121212" points="154 154.5 868.5 154.5 512 870.5"></polygon>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/themes/md-dark-indigo-pink.svg b/src/assets/images/themes/md-dark-indigo-pink.svg
new file mode 100644
index 000000000..60ddb6af8
--- /dev/null
+++ b/src/assets/images/themes/md-dark-indigo-pink.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="1024px" height="1024px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>2</title>
+    <g id="2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <circle id="circle" fill="#3D4DB7" cx="512" cy="512" r="512"></circle>
+        <rect id="rectangle" fill="#EB085B" x="154" y="155" width="715" height="716"></rect>
+        <polygon id="triangle" fill="#121212" points="154 154.5 868.5 154.5 512 870.5"></polygon>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/themes/md-light-deeppurple-green.svg b/src/assets/images/themes/md-light-deeppurple-green.svg
new file mode 100644
index 000000000..7147d9b8d
--- /dev/null
+++ b/src/assets/images/themes/md-light-deeppurple-green.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="1024px" height="1024px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>1</title>
+    <g id="1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <circle id="circle" fill="#6734BA" cx="512" cy="512" r="512"></circle>
+        <rect id="rectangle" fill="#4caf50" x="154" y="155" width="715" height="716"></rect>
+        <polygon id="triangle" fill="#FFFFFF" points="154 154.5 868.5 154.5 512 870.5"></polygon>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/themes/md-light-indigo-pink.svg b/src/assets/images/themes/md-light-indigo-pink.svg
new file mode 100644
index 000000000..1418554a1
--- /dev/null
+++ b/src/assets/images/themes/md-light-indigo-pink.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="1024px" height="1024px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>2</title>
+    <g id="2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <circle id="circle" fill="#3D4DB7" cx="512" cy="512" r="512"></circle>
+        <rect id="rectangle" fill="#EB085B" x="154" y="155" width="715" height="716"></rect>
+        <polygon id="triangle" fill="#FFFFFF" points="154 154.5 868.5 154.5 512 870.5"></polygon>
+    </g>
+</svg>
\ No newline at end of file