diff --git a/partials/navbar.html b/partials/navbar.html
index c76b231..c100e24 100644
--- a/partials/navbar.html
+++ b/partials/navbar.html
@@ -74,7 +74,7 @@ <h4>Color Scheme</h4>
       <label>Primary Color</label>
       <input type="color" id="color-picker" value="#0000ff" />
     </div>
-    <button type="button" class="btn" onclick="downloadCss()">Download css style</button>
+    <button id="downloadCss" type="button" class="btn">Download css style</button>
   </div>
   <div class="modal-footer">
     <a href="#!" class="modal-close waves-effect btn-flat">Close</a>
diff --git a/src/main.ts b/src/main.ts
index e7e1183..b5f2ae4 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -207,6 +207,10 @@ document.addEventListener("DOMContentLoaded", async function () {
   toggleColorsButton?.addEventListener("change", () => {
     themes.setThemePrimaryColor(toggleColorsButton.value);
   });
+  const downloadCssButton = document.querySelector("#downloadCss");
+  downloadCssButton.addEventListener("click", (e) => {   
+      themes.downloadCss();    
+  });
 
   //---------------------------------------------------------------