diff --git a/components/bpmn-q/modeler-component/QuantumWorkflowModeler.js b/components/bpmn-q/modeler-component/QuantumWorkflowModeler.js
index ce9da905..26908445 100644
--- a/components/bpmn-q/modeler-component/QuantumWorkflowModeler.js
+++ b/components/bpmn-q/modeler-component/QuantumWorkflowModeler.js
@@ -12,7 +12,7 @@ import './modeler.css';
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import ButtonToolbar from "./editor/ui/ButtonToolbar";
-import { createNewDiagram, loadDiagram } from "./editor/util/IoUtilities";
+import { createNewDiagram, loadDiagram, setAutoSaveInterval } from "./editor/util/IoUtilities";
 import NotificationHandler from "./editor/ui/notifications/NotificationHandler";
 import { createModeler, getModeler } from "./editor/ModelerHandler";
 import { getPluginButtons, getTransformationButtons } from "./editor/plugin/PluginHandler";
@@ -335,6 +335,7 @@ export class QuantumWorkflowModeler extends HTMLElement {
         // restart modeler to apply plugin config when shadow dom is rendered
         requestAnimationFrame(() => {
             this.startModeler();
+            setAutoSaveInterval();
         });
     }
 }
diff --git a/components/bpmn-q/modeler-component/editor/config/GeneralTab.js b/components/bpmn-q/modeler-component/editor/config/GeneralTab.js
index b2e13ff5..4f6f822a 100644
--- a/components/bpmn-q/modeler-component/editor/config/GeneralTab.js
+++ b/components/bpmn-q/modeler-component/editor/config/GeneralTab.js
@@ -49,6 +49,7 @@ export default function EditorTab() {
         editorConfig.setCamundaEndpoint(camundaEndpoint);
         editorConfig.setTransformedWorkflowHandler(workflowHandler);
         editorConfig.setAutoSaveFileOption(autoSaveFileOption);
+        modeler.get('eventBus').fire('autoSaveOptionChanged', { autoSaveFileOption });
         editorConfig.setFileName(fileName);
         editorConfig.setFileFormat(fileFormat);
         editorConfig.setAutoSaveIntervalSize(autoSaveIntervalSize);
diff --git a/components/bpmn-q/modeler-component/editor/util/IoUtilities.js b/components/bpmn-q/modeler-component/editor/util/IoUtilities.js
index abcfe116..9529645d 100644
--- a/components/bpmn-q/modeler-component/editor/util/IoUtilities.js
+++ b/components/bpmn-q/modeler-component/editor/util/IoUtilities.js
@@ -232,32 +232,24 @@ export function openInNewTab(workflowXml, fileName) {
     };
 }
 
-export function resetAutosaveTimeout(autosaveTimeout, hasChanges, autoSaveFileOption = editorConfig.getAutoSaveFileOption()) {
-    clearTimeout(autosaveTimeout);
-
+export function setAutoSaveInterval(autoSaveFileOption = editorConfig.getAutoSaveFileOption()) {
     if (autoSaveFileOption === autoSaveFile.INTERVAL) {
-        setTimeout(() => autosave(hasChanges), editorConfig.getAutoSaveIntervalSize());
+        getModeler().autosaveIntervalId = setInterval(() => { saveFile(); }, editorConfig.getAutoSaveIntervalSize());
     } else {
-        const timestamp = getTimestamp();
-        saveModelerAsLocalFile(getModeler(), `autosave_${timestamp}_${editorConfig.getFileName()}`, saveFileFormats.BPMN, false);
+       saveFile();
     }
 }
 
-function autosave(hasChanges) {
-    if (hasChanges) {
-        // extract the xml and save it to a file
-        getModeler().saveXML({ format: true }, function (err, xml) {
-            if (!err) {
-                // Save the XML
-                console.log('Autosaved:', xml);
-                const timestamp = getTimestamp();
-                saveXmlAsLocalFile(xml, `autosave_${timestamp}_${editorConfig.getFileName()}`);
-            }
-        });
-    }
-
-    // Reset the timer after the autosave is completed
-    resetAutosaveTimeout();
+export function saveFile() {
+    // extract the xml and save it to a file
+    getModeler().saveXML({ format: true }, function (err, xml) {
+        if (!err) {
+            // Save the XML
+            console.log('Autosaved:', xml);
+            const timestamp = getTimestamp();
+            saveXmlAsLocalFile(xml, `autosave_${timestamp}_${editorConfig.getFileName()}`);
+        }
+    });
 }
 
 function getTimestamp() {
diff --git a/components/bpmn-q/modeler-component/extensions/data-extension/rules/DataFlowRulesProvider.js b/components/bpmn-q/modeler-component/extensions/data-extension/rules/DataFlowRulesProvider.js
index 7f2560de..24fbeffb 100644
--- a/components/bpmn-q/modeler-component/extensions/data-extension/rules/DataFlowRulesProvider.js
+++ b/components/bpmn-q/modeler-component/extensions/data-extension/rules/DataFlowRulesProvider.js
@@ -5,9 +5,11 @@ import {
 } from 'bpmn-js/lib/features/modeling/util/ModelingUtil';
 import * as consts from '../Constants';
 import { isConnectedWith } from '../../../editor/util/ModellingUtilities';
-import { resetAutosaveTimeout } from '../../../editor/util/IoUtilities';
+import { saveFile, setAutoSaveInterval } from '../../../editor/util/IoUtilities';
 import { getModeler } from '../../../editor/ModelerHandler';
 import ace from 'ace-builds';
+import * as editorConfig from "../../../editor/config/EditorConfigManager";
+import { autoSaveFile } from '../../../editor/EditorConstants';
 
 /**
  * Custom rules provider for the DataFlow elements. Extends the BpmnRules.
@@ -20,7 +22,6 @@ export default class CustomRulesProvider extends BpmnRules {
         const canConnectDataExtension = this.canConnectDataExtension;
         const canConnect = this.canConnect.bind(this);
         const canCreate = this.canCreate.bind(this);
-        let autosaveTimeout = 0;
 
         // persist into local storage whenever copy took place
         eventBus.on('copyPaste.elementsCopied', event => {
@@ -69,10 +70,20 @@ export default class CustomRulesProvider extends BpmnRules {
             );
         });
 
-        eventBus.on("commandStack.changed", function() {
-            
-            // Reset the timeout on any change event
-            resetAutosaveTimeout(autosaveTimeout, true);
+        // save every change when the autosave option is on action
+        eventBus.on("commandStack.changed", function () {
+            if (editorConfig.getAutoSaveFileOption() === autoSaveFile.ON_ACTION) {
+                saveFile();
+            }
+        });
+
+        // remove interval when autosave option is on action
+        eventBus.on("autoSaveOptionChanged", function (context) {
+            if (context.autoSaveFileOption === autoSaveFile.ON_ACTION) {
+                clearInterval(getModeler().autosaveIntervalId);
+            } else {
+                setAutoSaveInterval();
+            }
         });
 
         // update xml viewer on diagram change