diff --git a/bundles/org.openhab.ui/web/src/pages/settings/items/item-edit.vue b/bundles/org.openhab.ui/web/src/pages/settings/items/item-edit.vue
index 38d1191d6c..f261947a63 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/items/item-edit.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/items/item-edit.vue
@@ -60,6 +60,9 @@
 </style>
 
 <script>
+import cloneDeep from 'lodash/cloneDeep'
+import fastDeepEqual from 'fast-deep-equal/es6'
+
 import * as Types from '@/assets/item-types.js'
 import YAML from 'yaml'
 
@@ -67,8 +70,6 @@ import ItemForm from '@/components/item/item-form.vue'
 
 import DirtyMixin from '../dirty-mixin'
 import ItemMixin from '@/components/item/item-mixin'
-import cloneDeep from 'lodash/cloneDeep'
-import fastDeepEqual from 'fast-deep-equal/es6'
 
 export default {
   mixins: [DirtyMixin, ItemMixin],
@@ -101,11 +102,8 @@ export default {
   watch: {
     item: {
       handler: function () {
-        if (this.ready) {
-          // create rule object clone in order to be able to delete status part
-          // which can change from eventsource but doesn't mean a rule modification
-          let itemClone = cloneDeep(this.item)
-          this.dirty = !fastDeepEqual(itemClone, this.savedItem)
+        if (this.ready) { // ignore changes during loading
+          this.dirty = !fastDeepEqual(this.item, this.savedItem)
         }
       },
       deep: true
@@ -124,16 +122,16 @@ export default {
           created: false
         }
         this.$set(this, 'item', newItem)
-        this.$set(this, 'savedItem', cloneDeep(this.item))
+        this.savedItem = cloneDeep(this.item)
         this.$oh.api.get('/rest/items?staticDataOnly=true').then((items) => {
           this.items = items
           this.ready = true
         })
       } else {
-        this.$set(this, 'savedItem', cloneDeep(this.item))
         const loadItem = this.$oh.api.get('/rest/items/' + this.itemName + '?metadata=.*')
         loadItem.then((data) => {
           this.item = data
+          this.savedItem = cloneDeep(this.item)
           this.$nextTick(() => {
             this.ready = true
           })
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/persistence/persistence-edit.vue b/bundles/org.openhab.ui/web/src/pages/settings/persistence/persistence-edit.vue
index 9c5b8b0fe5..7f152e208e 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/persistence/persistence-edit.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/persistence/persistence-edit.vue
@@ -277,7 +277,7 @@ export default {
   watch: {
     persistence: {
       handler: function () {
-        if (!this.loading) { // ignore initial rule assignment
+        if (!this.loading) { // ignore changes during loading
           this.dirty = !fastDeepEqual(this.persistence, this.savedPersistence)
         }
       },
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/rules/rule-edit.vue b/bundles/org.openhab.ui/web/src/pages/settings/rules/rule-edit.vue
index e8087b7d03..1714e877ac 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/rules/rule-edit.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/rules/rule-edit.vue
@@ -100,7 +100,7 @@
             </div>
             <div v-for="section in ['triggers', 'actions', 'conditions']" :key="section">
               <f7-block-title medium style="margin-bottom: var(--f7-list-margin-vertical)" v-if="isEditable || rule[section].length > 0">
-                {{ sectionLabels[section][0] }}
+                {{ SECTION_LABELS[section][0] }}
               </f7-block-title>
               <f7-list sortable swipeout media-list @sortable:sort="(ev) => reorderModule(ev, section)">
                 <f7-list-item media
@@ -118,7 +118,7 @@
                 </f7-list-item>
               </f7-list>
               <f7-list v-if="isEditable">
-                <f7-list-item link no-chevron media-item :color="($theme.dark) ? 'black' : 'white'" :subtitle="sectionLabels[section][1]" @click="addModule(section)">
+                <f7-list-item link no-chevron media-item :color="($theme.dark) ? 'black' : 'white'" :subtitle="SECTION_LABELS[section][1]" @click="addModule(section)">
                   <f7-icon slot="media" color="green" aurora="f7:plus_circle_fill" ios="f7:plus_circle_fill" md="material:control_point" />
                 </f7-list-item>
                 <!-- <f7-list-button :color="(showModuleControls) ? 'gray' : 'blue'" :title="sectionLabels[section][1]"></f7-list-button> -->
@@ -201,8 +201,15 @@ export default {
   props: ['ruleId', 'createMode', 'copyMode', 'ruleCopy', 'schedule'],
   data () {
     return {
+      SECTION_LABELS: {
+        triggers: ['When', 'Add Trigger'],
+        actions: ['Then', 'Add Action'],
+        conditions: ['But only if', 'Add Condition']
+      },
+
       ready: false,
       loading: false,
+
       rule: {},
       savedRule: {},
       ruleYaml: '',
@@ -212,16 +219,11 @@ export default {
         triggers: []
       },
       currentSection: 'actions',
-      currentTab: 'design',
       currentModuleType: null,
       currentModule: null,
       currentModuleConfig: {},
-      sectionLabels: {
-        triggers: ['When', 'Add Trigger'],
-        actions: ['Then', 'Add Action'],
-        conditions: ['But only if', 'Add Condition']
-      },
 
+      currentTab: 'design',
       codeEditorOpened: false,
       cronPopupOpened: false,
       scriptCode: '',
@@ -232,8 +234,8 @@ export default {
   },
   watch: {
     rule: {
-      handler: function (newRule, oldRule) {
-        if (!this.loading) { // ignore initial rule assignment
+      handler: function () {
+        if (!this.loading) { // ignore changes during loading
           // create rule object clone in order to be able to delete status part
           // which can change from eventsource but doesn't mean a rule modification
           let ruleClone = cloneDeep(this.rule)
@@ -439,6 +441,8 @@ export default {
 
       this.currentSection = section
       this.currentModule = Object.assign({}, mod)
+      if (!this.currentModule.label) this.currentModule.label = ''
+      if (!this.currentModule.description) this.currentModule.description = ''
       this.currentModuleType = this.moduleTypes[section].find((m) => m.uid === mod.type)
 
       const popup = {
@@ -487,6 +491,8 @@ export default {
       const newModule = {
         id: moduleId.toString(),
         configuration: {},
+        description: '',
+        label: '',
         type: '',
         new: true
       }
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/rules/script/script-edit.vue b/bundles/org.openhab.ui/web/src/pages/settings/rules/script/script-edit.vue
index 07524965f0..ee988bbc13 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/rules/script/script-edit.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/rules/script/script-edit.vue
@@ -1,105 +1,109 @@
 <template>
   <f7-page @page:afterin="onPageAfterIn" @page:beforeout="onPageBeforeOut">
-    <f7-navbar :title="pageTitle" :subtitle="(!newScript) ? mode : undefined" back-link="Back">
+    <f7-navbar :title="pageTitle" :subtitle="(!createMode) ? mode : undefined" back-link="Back">
       <f7-nav-right>
         <developer-dock-icon />
-        <template v-if="isEditable && !newScript">
+        <template v-if="editable && !createMode">
           <f7-link @click="onSave()" v-if="$theme.md" icon-md="material:save" icon-only />
           <f7-link @click="onSave()" v-if="!$theme.md">
             Save<span v-if="$device.desktop">&nbsp;(Ctrl-S)</span>
           </f7-link>
         </template>
-        <template v-else-if="isEditable && newScript">
-          <f7-link @click="createScript" v-if="$theme.md && newScript" icon-md="material:save" icon-only />
-          <f7-link @click="createScript" v-if="$theme.ios && newScript">
+        <template v-else-if="editable && createMode">
+          <f7-link @click="createScript" v-if="$theme.md && createMode" icon-md="material:save" icon-only />
+          <f7-link @click="createScript" v-if="$theme.ios && createMode">
             Create
           </f7-link>
         </template>
       </f7-nav-right>
     </f7-navbar>
-    <f7-toolbar v-if="!newScript && ready" position="bottom">
-      <span class="display-flex flex-direction-row align-items-center">
-        <f7-link :icon-color="(rule.status.statusDetail === 'DISABLED') ? 'orange' : 'gray'" :tooltip="((rule.status.statusDetail === 'DISABLED') ? 'Enable' : 'Disable') + (($device.desktop) ? ' (Ctrl-D)' : '')" icon-ios="f7:pause_circle" icon-md="f7:pause_circle" icon-aurora="f7:pause_circle" color="orange" @click="toggleDisabled" />
-        <f7-link v-if="!$theme.aurora" :tooltip="'Run Now' + (($device.desktop) ? ' (Ctrl-R)' : '')" icon-ios="f7:play_round" icon-md="f7:play_round" icon-aurora="f7:play_round" color="blue" @click="runNow" />
-        <f7-link v-else class="margin-left" :text="($device.desktop) ? 'Run Now (Ctrl-R)' : ''" icon-ios="f7:play_round" icon-md="f7:play_round" icon-aurora="f7:play_round" color="blue" @click="runNow" />
-        <f7-chip class="margin-left" v-if="currentModule && currentModule.configuration.script"
-                 :text="ruleStatusBadgeText(rule.status)"
-                 :color="ruleStatusBadgeColor(rule.status)"
-                 :tooltip="rule.status.description" />
-      </span>
-      <span class="display-flex flex-direction-row align-items-center">
-        <f7-button v-if="!newScript && isBlockly && !blocklyCodePreview" outline small :active="blocklyShowLabels" icon-f7="square_on_circle" :icon-size="($theme.aurora) ? 20 : 22" class="no-ripple" style="margin-right: 5px" @click="toggleBlocklyItemLabelId" tooltip="Toggle to show either Item labels or IDs" />
-        <f7-segmented v-if="!newScript && isBlockly" class="margin-right">
-          <f7-button outline small :active="!blocklyCodePreview" icon-f7="ticket" :icon-size="($theme.aurora) ? 20 : 22" class="no-ripple" @click="blocklyCodePreview = false" tooltip="Show blocks" />
-          <f7-button outline small :active="blocklyCodePreview" icon-f7="doc_text" :icon-size="($theme.aurora) ? 20 : 22" class="no-ripple" @click="showBlocklyCode" tooltip="Show generated code" />
-        </f7-segmented>
-        <f7-link class="right details-link padding-right" ref="detailsLink" @click="detailsOpened = true" icon-f7="chevron_up" />
-      </span>
-    </f7-toolbar>
-    <f7-icon v-if="ready && !newScript && (!isBlockly && !isEditable) || (blocklyCodePreview && isBlockly)" f7="lock" class="float-right margin" style="opacity:0.5; z-index: 4000; user-select: none;" size="50" color="gray"
-             :tooltip="(isBlockly) ? 'Cannot edit the code generated by Blockly' : 'This rule is not editable because it has been provisioned from a file'" />
-    <editor v-if="ready && !newScript && (!isBlockly || blocklyCodePreview)" class="rule-script-editor" :mode="mode" :value="script" @input="onEditorInput" :read-only="isBlockly || !isEditable" :tern-autocompletion-hook="true" />
-    <blockly-editor ref="blocklyEditor" v-else-if="ready && !newScript && isBlockly" :blocks="currentModule.configuration.blockSource" :isGraalJs="mode === GRAALJS_MIME_TYPE" @change="dirty = true" />
-    <script-general-settings v-else-if="createMode" :createMode="true" :rule="rule" />
-    <f7-block class="block-narrow" v-if="newScript">
-      <f7-col>
-        <f7-block-title medium class="margin-left margin-bottom">
-          Scripting Method
-        </f7-block-title>
-        <f7-list media-list>
-          <f7-list-item media-item radio radio-icon="start"
-                        title="Design with Blockly"
-                        footer="A beginner-friendly way to build scripts visually by assembling blocks"
-                        :value="'application/javascript+blockly'" :checked="mode === 'application/javascript+blockly'"
-                        @change="mode = 'application/javascript+blockly'">
-            <img src="@/images/blockly.svg" height="32" width="32" slot="media">
-          </f7-list-item>
-        </f7-list>
-        <f7-block-footer class="margin-vertical margin-left">
-          or choose the scripting language:
-        </f7-block-footer>
-        <f7-list media-list>
-          <f7-list-item media-item radio radio-icon="start"
-                        :value="mode" :checked="mode === language.contentType" @change="mode = language.contentType"
-                        v-for="language in languages" :key="language.contentType"
-                        :title="language.name" :after="language.version" :footer="language.contentType" />
-        </f7-list>
-      </f7-col>
-    </f7-block>
-    <div v-if="ready && newScript" class="if-aurora display-flex justify-content-center margin padding">
-      <div class="flex-shrink-0">
-        <f7-button class="padding-left padding-right" style="width: 150px" color="blue" large raised fill @click="createScript">
-          Create Script
-        </f7-button>
+
+    <template v-if="ready">
+      <f7-toolbar v-if="!createMode" position="bottom">
+        <span class="display-flex flex-direction-row align-items-center">
+          <f7-link :icon-color="(rule.status.statusDetail === 'DISABLED') ? 'orange' : 'gray'" :tooltip="((rule.status.statusDetail === 'DISABLED') ? 'Enable' : 'Disable') + (($device.desktop) ? ' (Ctrl-D)' : '')" icon-ios="f7:pause_circle" icon-md="f7:pause_circle" icon-aurora="f7:pause_circle" color="orange" @click="toggleDisabled" />
+          <f7-link v-if="!$theme.aurora" :tooltip="'Run Now' + (($device.desktop) ? ' (Ctrl-R)' : '')" icon-ios="f7:play_round" icon-md="f7:play_round" icon-aurora="f7:play_round" color="blue" @click="runNow" />
+          <f7-link v-else class="margin-left" :text="($device.desktop) ? 'Run Now (Ctrl-R)' : ''" icon-ios="f7:play_round" icon-md="f7:play_round" icon-aurora="f7:play_round" color="blue" @click="runNow" />
+          <f7-chip class="margin-left" v-if="currentModule && currentModule.configuration.script"
+                   :text="ruleStatusBadgeText(rule.status)"
+                   :color="ruleStatusBadgeColor(rule.status)"
+                   :tooltip="rule.status.description" />
+        </span>
+        <span class="display-flex flex-direction-row align-items-center">
+          <f7-button v-if="!createMode && isBlockly && !blocklyCodePreview" outline small :active="blocklyShowLabels" icon-f7="square_on_circle" :icon-size="($theme.aurora) ? 20 : 22" class="no-ripple" style="margin-right: 5px" @click="toggleBlocklyItemLabelId" tooltip="Toggle to show either Item labels or IDs" />
+          <f7-segmented v-if="!createMode && isBlockly" class="margin-right">
+            <f7-button outline small :active="!blocklyCodePreview" icon-f7="ticket" :icon-size="($theme.aurora) ? 20 : 22" class="no-ripple" @click="blocklyCodePreview = false" tooltip="Show blocks" />
+            <f7-button outline small :active="blocklyCodePreview" icon-f7="doc_text" :icon-size="($theme.aurora) ? 20 : 22" class="no-ripple" @click="showBlocklyCode" tooltip="Show generated code" />
+          </f7-segmented>
+          <f7-link class="right details-link padding-right" ref="detailsLink" @click="detailsOpened = true" icon-f7="chevron_up" />
+        </span>
+      </f7-toolbar>
+
+      <f7-icon v-if="!createMode && (!isBlockly && !editable) || (blocklyCodePreview && isBlockly)" f7="lock" class="float-right margin" style="opacity:0.5; z-index: 4000; user-select: none;" size="50" color="gray"
+               :tooltip="(isBlockly) ? 'Cannot edit the code generated by Blockly' : 'This rule is not editable because it has been provisioned from a file'" />
+      <editor v-if="!createMode && (!isBlockly || blocklyCodePreview)" class="rule-script-editor" :mode="mode" :value="script" @input="onEditorInput" :read-only="isBlockly || !editable" :tern-autocompletion-hook="true" />
+      <blockly-editor ref="blocklyEditor" v-else-if="!createMode && isBlockly" :blocks="currentModule.configuration.blockSource" :isGraalJs="mode === GRAALJS_MIME_TYPE" @change="scriptDirty = true" />
+      <script-general-settings v-else-if="createMode" :createMode="true" :rule="rule" />
+      <f7-block class="block-narrow" v-if="createMode">
+        <f7-col>
+          <f7-block-title medium class="margin-left margin-bottom">
+            Scripting Method
+          </f7-block-title>
+          <f7-list media-list>
+            <f7-list-item media-item radio radio-icon="start"
+                          title="Design with Blockly"
+                          footer="A beginner-friendly way to build scripts visually by assembling blocks"
+                          :value="'application/javascript+blockly'" :checked="mode === 'application/javascript+blockly'"
+                          @change="mode = 'application/javascript+blockly'">
+              <img src="@/images/blockly.svg" height="32" width="32" slot="media">
+            </f7-list-item>
+          </f7-list>
+          <f7-block-footer class="margin-vertical margin-left">
+            or choose the scripting language:
+          </f7-block-footer>
+          <f7-list media-list>
+            <f7-list-item media-item radio radio-icon="start"
+                          :value="mode" :checked="mode === language.contentType" @change="mode = language.contentType"
+                          v-for="language in languages" :key="language.contentType"
+                          :title="language.name" :after="language.version" :footer="language.contentType" />
+          </f7-list>
+        </f7-col>
+      </f7-block>
+      <div v-if="createMode" class="if-aurora display-flex justify-content-center margin padding">
+        <div class="flex-shrink-0">
+          <f7-button class="padding-left padding-right" style="width: 150px" color="blue" large raised fill @click="createScript">
+            Create Script
+          </f7-button>
+        </div>
       </div>
-    </div>
 
-    <f7-fab v-show="!newScript && !script && mode === 'application/javascript' && !isBlockly" position="center-bottom" slot="fixed" color="blue" @click="convertToBlockly" text="Design with Blockly">
-      <f7-icon f7="ticket_fill" />
-    </f7-fab>
+      <f7-fab v-show="!createMode && !script && mode === 'application/javascript' && !isBlockly" position="center-bottom" slot="fixed" color="blue" @click="convertToBlockly" text="Design with Blockly">
+        <f7-icon f7="ticket_fill" />
+      </f7-fab>
 
-    <f7-sheet ref="detailsSheet" class="script-details-sheet" :backdrop="false" :close-on-escape="true" :opened="detailsOpened" @sheet:closed="detailsOpened = false">
-      <f7-page>
-        <f7-toolbar tabbar bottom>
-          <span class="margin-left">Script details</span>
-          <div class="right">
-            <f7-link sheet-close class="padding-right">
-              <f7-icon f7="chevron_down" />
-            </f7-link>
-          </div>
-        </f7-toolbar>
-        <f7-block class="block-narrow">
-          <script-general-settings :createMode="newScript" :rule="rule" :module="currentModule" :module-type="scriptModuleType" :module-types="moduleTypes" :isScriptRule="isScriptRule" :mode="mode" :languages="languages" @newLanguage="changeLanguage" />
-          <f7-col v-if="isEditable && isScriptRule">
-            <f7-list>
-              <f7-list-button color="red" @click="deleteRule">
-                Remove Script
-              </f7-list-button>
-            </f7-list>
-          </f7-col>
-        </f7-block>
-      </f7-page>
-    </f7-sheet>
+      <f7-sheet ref="detailsSheet" class="script-details-sheet" :backdrop="false" :close-on-escape="true" :opened="detailsOpened" @sheet:closed="detailsOpened = false">
+        <f7-page>
+          <f7-toolbar tabbar bottom>
+            <span class="margin-left">Script details</span>
+            <div class="right">
+              <f7-link sheet-close class="padding-right">
+                <f7-icon f7="chevron_down" />
+              </f7-link>
+            </div>
+          </f7-toolbar>
+          <f7-block class="block-narrow">
+            <script-general-settings :createMode="createMode" :rule="rule" :module="currentModule" :module-type="scriptModuleType" :module-types="moduleTypes" :isScriptRule="isScriptRule" :mode="mode" :languages="languages" @newLanguage="changeLanguage" />
+            <f7-col v-if="editable && isScriptRule">
+              <f7-list>
+                <f7-list-button color="red" @click="deleteRule">
+                  Remove Script
+                </f7-list-button>
+              </f7-list>
+            </f7-col>
+          </f7-block>
+        </f7-page>
+      </f7-sheet>
+    </template>
   </f7-page>
 </template>
 
@@ -112,6 +116,9 @@
 </style>
 
 <script>
+import cloneDeep from 'lodash/cloneDeep'
+import fastDeepEqual from 'fast-deep-equal/es6'
+
 import RuleStatus from '@/components/rule/rule-status-mixin'
 import ScriptGeneralSettings from './script-general-settings.vue'
 import ModuleDescriptionSuggestions from '../module-description-suggestions'
@@ -127,24 +134,34 @@ export default {
   props: ['ruleId', 'moduleId', 'createMode'],
   data () {
     return {
-      GRAALJS_MIME_TYPE: 'application/javascript',
-      NASHORNJS_MIME_TYPE: 'application/javascript;version=ECMAScript-5.1',
-      newScript: this.createMode,
       ready: false,
       loading: false,
-      rule: {},
       isScriptRule: false,
+
+      scriptDirty: false,
+      modeDirty: false,
+      ruleDirty: false,
+      currentModuleDirty: false,
+
+      rule: {},
+      savedRule: {},
+      currentModule: {},
+      savedCurrentModule: {},
+      script: '',
+      savedScript: '',
+      mode: '',
+      savedMode: '',
+
       moduleTypes: {
         actions: [],
         conditions: [],
         triggers: []
       },
-      currentModule: null,
+
       currentModuleConfig: {},
       scriptModuleType: null,
       languages: null,
-      script: '',
-      mode: '',
+
       eventSource: null,
       keyHandler: null,
       detailsOpened: false,
@@ -154,7 +171,7 @@ export default {
   },
   computed: {
     pageTitle () {
-      if (this.newScript) return 'Create Script'
+      if (this.createMode) return 'Create Script'
       if (this.isScriptRule) return this.rule.name
       if (this.currentModule) {
         let title = 'Edit'
@@ -172,14 +189,78 @@ export default {
       }
       return 'Edit Script'
     },
-    isEditable () {
+    editable () {
       return this.rule && this.rule.editable !== false
     },
     isBlockly () {
-      return this.currentModule && this.currentModule.configuration.blockSource
+      return this.currentModule && this.currentModule.configuration && this.currentModule.configuration.blockSource
+    }
+  },
+  watch: {
+    // handle the script if not in Blockly
+    script: {
+      handler: function () {
+        if (!this.isBlockly && !this.loading) { // ignore changes during loading
+          this.scriptDirty = (this.script !== this.savedScript)
+        }
+      }
+    },
+    // handle mode change
+    mode: {
+      handler: function () {
+        if (!this.loading) { // ignore changes during loading
+          this.modeDirty = (this.mode !== this.savedMode)
+        }
+      }
+    },
+    // handle script rule title, description etc.
+    rule: {
+      handler: function () {
+        if (this.isScriptRule && !this.loading) { // ignore changes during loading
+          // create rule object clone in order to be able to delete status part
+          // which can change from eventsource but doesn't mean a rule modification
+          let ruleClone = cloneDeep(this.rule)
+          delete ruleClone.status
+          delete this.savedRule.status
+
+          this.ruleDirty = !fastDeepEqual(ruleClone, this.savedRule)
+        }
+      },
+      deep: true
+    },
+    // handle script action module type, label, description ect.
+    currentModule: {
+      handler: function () {
+        console.log('Running')
+
+        if (this.savedCurrentModule && !this.loading) { // ignore changes during loading
+          this.currentModuleDirty = !fastDeepEqual(this.currentModule, this.savedCurrentModule)
+        }
+      },
+      deep: true
+    },
+    // watch dirty vars
+    scriptDirty () {
+      this.calculateDirty()
+    },
+    modeDirty () {
+      this.calculateDirty()
+    },
+    ruleDirty () {
+      this.calculateDirty()
+    },
+    currentModuleDirty () {
+      this.calculateDirty()
     }
   },
   methods: {
+    calculateDirty () {
+      this.dirty = this.scriptDirty || this.modeDirty || this.ruleDirty || this.currentModuleDirty
+    },
+    resetDirty () {
+      this.scriptDirty = this.modeDirty = this.ruleDirty = this.currentModuleDirty = false
+      this.calculateDirty()
+    },
     onPageAfterIn () {
       if (this.ready) return
       if (this.createMode) {
@@ -208,9 +289,11 @@ export default {
         actions: [],
         tags: ['Script']
       }
-      this.mode = 'application/javascript+blockly'
-      this.loadScriptModules()
-      this.ready = true
+      this.savedRule = cloneDeep(this.rule)
+      this.savedMode = this.mode = 'application/javascript+blockly'
+      this.loadScriptModuleTypes().then(() => {
+        this.ready = true
+      })
     },
     createScript () {
       if (!this.rule.uid) {
@@ -241,25 +324,24 @@ export default {
       this.rule.actions.push(actionModule)
 
       this.$oh.api.postPlain('/rest/rules', JSON.stringify(this.rule), 'text/plain', 'application/json').then(() => {
+        this.resetDirty()
         this.$f7.toast.create({
           text: 'Script created',
           destroyOnClose: true,
           closeTimeout: 2000
         }).open()
         this.$f7router.navigate(this.$f7route.url.replace('/add', '/' + this.rule.uid), { reloadCurrent: true })
-        this.newScript = false
-        this.ready = false
-        if (window) {
-          window.addEventListener('keydown', this.keyDown)
-        }
-        this.load()
       })
     },
     isMimeTypeAvailable (mimeType) {
       return this.languages.map(l => l.contentType).includes(mimeType)
     },
-    loadScriptModules () {
-      this.$oh.api.get('/rest/module-types/script.ScriptAction').then((data) => {
+    /**
+     * Load the script module type, i.e. the available script languages
+     * @returns {Promise}
+     */
+    loadScriptModuleTypes () {
+      return this.$oh.api.get('/rest/module-types/script.ScriptAction').then((data) => {
         this.$set(this, 'scriptModuleType', data)
         let languages = this.scriptModuleType.configDescriptions
           .find((c) => c.name === 'type').options
@@ -272,6 +354,7 @@ export default {
           })
         if (this.isBlockly) languages = languages.filter((l) => l.contentType.startsWith('application/javascript'))
         this.$set(this, 'languages', languages)
+        return Promise.resolve()
       })
     },
     load () {
@@ -281,21 +364,23 @@ export default {
       Promise.all([this.$oh.api.get('/rest/module-types?type=trigger'), this.$oh.api.get('/rest/rules/' + this.ruleId)]).then((data) => {
         this.$set(this.moduleTypes, 'triggers', data[0])
         this.$set(this, 'rule', data[1])
-        this.loading = false
+        this.savedRule = cloneDeep(this.rule)
 
         if (this.moduleId) {
-          this.currentModule = this.rule.actions.concat(this.rule.conditions).find((m) => m.id === this.moduleId)
+          this.$set(this, 'currentModule', this.rule.actions.concat(this.rule.conditions).find((m) => m.id === this.moduleId))
         } else {
-          this.currentModule = this.rule.actions.find((m) => m.id === 'script')
+          let mod = this.rule.actions.find((m) => m.id === 'script')
           if (!this.currentModule) {
-            this.currentModule = this.rule.actions.find((m) => m.configuration.script)
+            mod = this.rule.actions.find((m) => m.configuration.script)
           }
+          this.$set(this, 'currentModule', mod)
           this.isScriptRule = true
         }
 
         if (this.currentModule) {
-          this.mode = this.currentModule.configuration.type
-          this.script = this.currentModule.configuration.script
+          this.savedCurrentModule = cloneDeep(this.currentModule)
+          this.savedMode = this.mode = this.currentModule.configuration.type
+          this.savedScript = this.script = this.currentModule.configuration.script || ''
         }
 
         if (!this.rule.editable) {
@@ -314,14 +399,15 @@ export default {
           this.script = triggerDescriptionComments + '\n' + this.script
         }
 
-        this.loadScriptModules()
-
-        this.ready = true
-        if (!this.eventSource) this.startEventSource()
+        this.loadScriptModuleTypes().then(() => {
+          this.loading = false
+          this.ready = true
+          if (!this.eventSource) this.startEventSource()
+        })
       })
     },
     save (noToast) {
-      if (!this.isEditable) return
+      if (!this.editable) return
       if (this.rule.status.status === 'RUNNING') {
         this.$f7.toast.create({
           text: `${this.isScriptRule ? 'Script' : 'Rule'} cannot be updated while running, please wait!`,
@@ -353,7 +439,7 @@ export default {
       this.currentModule.configuration.script = this.script
       this.currentModule.configuration.type = this.mode
       return this.$oh.api.put('/rest/rules/' + this.rule.uid, this.rule).then((data) => {
-        this.dirty = false
+        this.resetDirty()
         if (!noToast) {
           this.$f7.toast.create({
             text: (this.isScriptRule ? 'Script' : 'Rule') + ' updated',
@@ -402,24 +488,36 @@ export default {
           closeTimeout: 2000
         }).open()
       }
-      this.$f7.toast.create({
-        text: 'Running ' + (this.isScriptRule ? 'script' : 'rule'),
-        destroyOnClose: true,
-        closeTimeout: 2000
-      }).open()
 
-      const savePromise = (this.isEditable && (this.dirty || this.isBlockly)) ? this.save(true) : Promise.resolve()
+      const run = (saveBefore) => {
+        const savePromise = saveBefore ? this.save(true) : Promise.resolve()
+        savePromise.then(() => {
+          this.$oh.api.postPlain('/rest/rules/' + this.rule.uid + '/runnow', '').then(
+            this.$f7.toast.create({
+              text: 'Running ' + (this.isScriptRule ? 'script' : 'rule'),
+              destroyOnClose: true,
+              closeTimeout: 2000
+            }).open()
+          ).catch((err) => {
+            this.$f7.toast.create({
+              text: 'Error while running: ' + err,
+              destroyOnClose: true,
+              closeTimeout: 2000
+            }).open()
+          })
+        }).catch((e) => { if (e !== 'saveOnCodePreviewRejected') { throw (e) } })
+      }
 
-      savePromise.then(() => {
-        this.$oh.api.postPlain('/rest/rules/' + this.rule.uid + '/runnow', '').catch((err) => {
-          this.$f7.toast.create({
-            text: 'Error while running: ' + err,
-            destroyOnClose: true,
-            closeTimeout: 2000
-          }).open()
-        })
-      })
-        .catch((e) => { if (e !== 'saveOnCodePreviewRejected') { throw (e) } })
+      if (this.editable && this.dirty) {
+        this.$f7.dialog.confirm(
+          'Do you want to save the changes before running the script?',
+          'Changes have not been saved',
+          () => run(this),
+          () => {}
+        )
+      } else {
+        run(false)
+      }
     },
     deleteRule () {
       this.$f7.dialog.confirm(
@@ -454,7 +552,6 @@ export default {
     },
     onEditorInput (value) {
       this.script = value
-      this.dirty = true
     },
     startEventSource () {
       this.eventSource = this.$oh.sse.connect('/rest/events?topics=openhab/rules/' + this.ruleId + '/*', null, (event) => {
@@ -504,6 +601,10 @@ export default {
         }
       }
     }
+  },
+  created () {
+    this.GRAALJS_MIME_TYPE = 'application/javascript'
+    this.NASHORNJS_MIME_TYPE = 'application/javascript;version=ECMAScript-5.1'
   }
 }
 </script>
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/rules/script/script-general-settings.vue b/bundles/org.openhab.ui/web/src/pages/settings/rules/script/script-general-settings.vue
index d3f71230e1..547da7f64d 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/rules/script/script-general-settings.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/rules/script/script-general-settings.vue
@@ -1,12 +1,12 @@
 <template>
   <div>
-    <rule-general-settings v-if="createMode || isScriptRule" :ready="true" :rule="rule" :createMode="createMode" :inScriptEditor="true" />
-    <f7-block class="block-narrow">
+    <rule-general-settings v-if="createMode || isScriptRule" :ready="true" :rule="rule" :createMode="createMode" :inScriptEditor="true" style="margin-bottom: -15px" />
+    <f7-block class="block-narrow" style="margin-top: 0">
       <f7-col v-if="!createMode && languages">
-        <f7-list inline-labels>
+        <f7-list inline-labels style="margin-top: 0">
           <template v-if="module && !isScriptRule">
-            <f7-list-input :label="scriptType + ' Title'" type="text" :value="module.label" :placeholder="suggestedModuleTitle(module, moduleType)" @input="module.label = $event.target.value" :disabled="!editable" :clear-button="editable" />
-            <f7-list-input label="Description" type="text" :value="module.description" :placeholder="suggestedModuleDescription(module, moduleType)" @input="module.description = $event.target.value" :disabled="!editable" :clear-button="editable" />
+            <f7-list-input :label="scriptType + ' Title'" type="text" :value="module.label" :placeholder="suggestedModuleTitle(module, moduleType)" @input="$set(module, 'label', $event.target.value)" :disabled="!editable" :clear-button="editable" />
+            <f7-list-input label="Description" type="text" :value="module.description" :placeholder="suggestedModuleDescription(module, moduleType)" @input="$set(module, 'description', $event.target.value)" :disabled="!editable" :clear-button="editable" />
           </template>
           <f7-list-item title="Scripting Language" class="aligned-smart-select" :disabled="!editable" :key="mode" smart-select :smart-select-params="{openIn: 'sheet', closeOnSelect: true}">
             <select @change="$emit('newLanguage', $event.target.value)">
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/things/thing-details.vue b/bundles/org.openhab.ui/web/src/pages/settings/things/thing-details.vue
index a387d31fd2..a1eb2b1489 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/things/thing-details.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/things/thing-details.vue
@@ -246,6 +246,8 @@ p.action-description
 
 <script>
 import YAML from 'yaml'
+import cloneDeep from 'lodash/cloneDeep'
+import fastDeepEqual from 'fast-deep-equal/es6'
 import groupBy from 'lodash/groupBy'
 import map from 'lodash/map'
 
@@ -264,8 +266,6 @@ import buildTextualDefinition from './thing-textual-definition'
 import ThingStatus from '@/components/thing/thing-status-mixin'
 
 import DirtyMixin from '../dirty-mixin'
-import cloneDeep from 'lodash/cloneDeep'
-import fastDeepEqual from 'fast-deep-equal/es6'
 
 let copyToast = null
 
@@ -338,7 +338,7 @@ export default {
     thingDirty: function () { this.dirty = this.configDirty || this.thingDirty },
     thing: {
       handler () {
-        if (!this.loading) { // ignore initial rule assignment
+        if (!this.loading) { // ignore changes during loading
           // create rule object clone in order to be able to delete status part
           // which can change from eventsource but doesn't mean a rule modification
           let thingClone = cloneDeep(this.thing)