diff --git a/README.md b/README.md
index c579b3f..afa89f1 100644
--- a/README.md
+++ b/README.md
@@ -149,6 +149,20 @@ Edit `~/.config/quickshell/overview/common/Appearance.qml` to customize:
 - Font families and sizes  
 - Animation curves and durations
 - Border radius values
+##### Use matugen generated colors 
+  - add the below config to `config.toml` in matugen config 
+```toml
+  [templates.quickshell_overview]
+  input_path  = "~/.config/matugen/templates/quickshell-overview.qml"
+  output_path = "~/.config/quickshell/overview/common/Appearance.colors.qml"
+```
+  - paste this [matugen overview template](./quickshell-overview.qml) into your `matugen/templates/` folder
+  - Now set the below show property to `true` in `common/Appearance.qml`
+```qml
+ property QtObject appearance: QtObject {
+            property bool useMatugenColors: false   // change to true to use matugen colors 
+        }
+```
 
 ---
 
diff --git a/common/Appearance.qml b/common/Appearance.qml
index 79a30b4..e8c6c2a 100644
--- a/common/Appearance.qml
+++ b/common/Appearance.qml
@@ -4,10 +4,13 @@ pragma ComponentBehavior: Bound
 import QtQuick
 import Quickshell
 import "functions"
+import "." as Common
 
 Singleton {
     id: root
-    property QtObject m3colors
+    property QtObject m3colors: Common.Config.options.appearance.useMatugenColors && matugenLoader.item 
+                                 ? matugenLoader.item 
+                                 : defaultColors
     property QtObject animation
     property QtObject animationCurves
     property QtObject colors
@@ -15,7 +18,13 @@ Singleton {
     property QtObject font
     property QtObject sizes
 
-    m3colors: QtObject {
+    Loader {
+        id: matugenLoader
+        active: Common.Config.options.appearance.useMatugenColors
+        source: "Appearance.colors.qml"
+    }
+
+    property QtObject defaultColors: QtObject {
         property bool darkmode: true
         property color m3primary: "#E5B6F2"
         property color m3onPrimary: "#452152"
diff --git a/common/Config.qml b/common/Config.qml
index 48601dd..2e01668 100644
--- a/common/Config.qml
+++ b/common/Config.qml
@@ -8,6 +8,10 @@ Singleton {
     id: root
     
     property QtObject options: QtObject {
+        property QtObject appearance: QtObject {
+            property bool useMatugenColors: false
+        }
+
         property QtObject overview: QtObject {
             property int rows: 2
             property int columns: 5
diff --git a/quickshell-overview.qml b/quickshell-overview.qml
new file mode 100644
index 0000000..95176b4
--- /dev/null
+++ b/quickshell-overview.qml
@@ -0,0 +1,41 @@
+
+import QtQuick
+
+QtObject {
+    id: m3
+
+    property color m3primary: "{{colors.primary.default.hex}}"
+    property color m3onPrimary: "{{colors.on_primary.default.hex}}"
+
+    property color m3primaryContainer: "{{colors.primary_container.default.hex}}"
+    property color m3onPrimaryContainer: "{{colors.on_primary_container.default.hex}}"
+
+    property color m3secondary: "{{colors.secondary.default.hex}}"
+    property color m3onSecondary: "{{colors.on_secondary.default.hex}}"
+
+    property color m3secondaryContainer: "{{colors.secondary_container.default.hex}}"
+    property color m3onSecondaryContainer: "{{colors.on_secondary_container.default.hex}}"
+
+    property color m3background: "{{colors.background.default.hex}}"
+    property color m3onBackground: "{{colors.on_background.default.hex}}"
+
+    property color m3surface: "{{colors.surface.default.hex}}"
+
+    property color m3surfaceContainerLow: "{{colors.surface_container_low.default.hex}}"
+    property color m3surfaceContainer: "{{colors.surface_container.default.hex}}"
+    property color m3surfaceContainerHigh: "{{colors.surface_container_high.default.hex}}"
+    property color m3surfaceContainerHighest: "{{colors.surface_container_highest.default.hex}}"
+
+    property color m3onSurface: "{{colors.on_surface.default.hex}}"
+
+    property color m3surfaceVariant: "{{colors.surface_variant.default.hex}}"
+    property color m3onSurfaceVariant: "{{colors.on_surface_variant.default.hex}}"
+
+    property color m3inverseSurface: "{{colors.inverse_surface.default.hex}}"
+    property color m3inverseOnSurface: "{{colors.inverse_on_surface.default.hex}}"
+
+    property color m3outline: "{{colors.outline.default.hex}}"
+    property color m3outlineVariant: "{{colors.outline_variant.default.hex}}"
+
+    property color m3shadow: "#000000"
+}