diff --git a/src/components/Form/Form.vue b/src/components/Form/Form.vue
index 386c2db7..102a6ecc 100644
--- a/src/components/Form/Form.vue
+++ b/src/components/Form/Form.vue
@@ -5,6 +5,7 @@
           :doctype="doctype"
           :name="name"
           :title="formTitle"
+          :isDirty="isDirty"
           @save="save"
         />
         <div class="p-3">
@@ -37,6 +38,7 @@ export default {
       docLoaded: false,
       notFound: false,
       invalid: false,
+      isDirty: false,
       invalidFields: []
     }
   },
@@ -58,6 +60,9 @@ export default {
     if (!this.name) return;
     try {
       this.doc = await frappe.getDoc(this.doctype, this.name);
+      this.doc.on('change', () => {
+        this.isDirty = this.doc._dirty;
+      });
       this.docLoaded = true;
     } catch(e) {
       this.notFound = true;
diff --git a/src/components/Form/FormActions.vue b/src/components/Form/FormActions.vue
index 90e70ee5..46b963fc 100644
--- a/src/components/Form/FormActions.vue
+++ b/src/components/Form/FormActions.vue
@@ -1,11 +1,11 @@
 <template>
-    <div class="frappe-form-actions d-flex justify-content-between align-items-center p-3 border-bottom">
-        <h5 class="m-0">{{ title || name }}</h5>
-        <button class="btn btn-primary btn-sm" @click="$emit('save')">Save</button>
-    </div>
+  <div class="frappe-form-actions d-flex justify-content-between align-items-center p-3 border-bottom">
+    <h5 class="m-0">{{ title || name }}</h5>
+    <f-button primary :disabled="!isDirty" @click="$emit('save')">{{ _('Save') }}</f-button>
+  </div>
 </template>
 <script>
 export default {
-    props: ['doctype', 'name', 'title']
+  props: ['doctype', 'name', 'title', 'isDirty']
 }
 </script>
diff --git a/src/components/Form/FormLayout.vue b/src/components/Form/FormLayout.vue
index 7ee279e2..b7e57414 100644
--- a/src/components/Form/FormLayout.vue
+++ b/src/components/Form/FormLayout.vue
@@ -1,29 +1,29 @@
 <template>
-    <form :class="['frappe-form-layout', { 'was-validated': invalid }]">
-        <div class="row" v-if="layoutConfig"
-          v-for="(section, i) in layoutConfig.sections" :key="i"
-          v-show="showSection(i)"
-        >
-            <div class="col" v-for="(column, j) in section.columns" :key="j">
-                <frappe-control
-                    v-for="fieldname in column.fields"
-                    :key="fieldname"
-                    :docfield="getDocField(fieldname)"
-                    :value="$data[fieldname]"
-                    @change="value => updateDoc(fieldname, value)"
-                />
-            </div>
-        </div>
-        <div v-if="!layout">
-            <frappe-control
-                v-for="docfield in fields"
-                :key="docfield.fieldname"
-                :docfield="docfield"
-                :value="$data[docfield.fieldname]"
-                @change="value => updateDoc(docfield.fieldname, value)"
-            />
-        </div>
-    </form>
+  <form :class="['frappe-form-layout', { 'was-validated': invalid }]">
+    <div class="row" v-if="layoutConfig"
+      v-for="(section, i) in layoutConfig.sections" :key="i"
+      v-show="showSection(i)"
+    >
+      <div class="col" v-for="(column, j) in section.columns" :key="j">
+        <frappe-control
+          v-for="fieldname in column.fields"
+          :key="fieldname"
+          :docfield="getDocField(fieldname)"
+          :value="$data[fieldname]"
+          @change="value => updateDoc(fieldname, value)"
+        />
+      </div>
+    </div>
+    <div v-if="!layout">
+      <frappe-control
+        v-for="docfield in fields"
+        :key="docfield.fieldname"
+        :docfield="docfield"
+        :value="$data[docfield.fieldname]"
+        @change="value => updateDoc(docfield.fieldname, value)"
+      />
+    </div>
+  </form>
 </template>
 <script>
 export default {