diff --git a/resources/js/components/AttributeList.vue b/resources/js/components/AttributeList.vue
index 81ffaa7b7..9ff187e53 100644
--- a/resources/js/components/AttributeList.vue
+++ b/resources/js/components/AttributeList.vue
@@ -441,8 +441,9 @@
                 if(state.attributeValues[e.attribute_id].moderation_edit_state == 'active') {
                     return;
                 }
-
-                context.emit('dirty', e);
+                const dirtyValues = getDirtyValues();
+                const isDirty = Object.keys(dirtyValues).length > 0;
+                context.emit('dirty', e, isDirty);
             };
             const resetListValues = _ => {
                 for(let k in attrRefs.value) {
diff --git a/resources/js/components/EntityDetail.vue b/resources/js/components/EntityDetail.vue
index 3eacad7e3..3d2cdf627 100644
--- a/resources/js/components/EntityDetail.vue
+++ b/resources/js/components/EntityDetail.vue
@@ -306,7 +306,7 @@
                         :metadata-addon="hasReferenceGroup"
                         :selections="state.entityTypeSelections"
                         :values="state.entity.data"
-                        @dirty="e => setFormState(e, tg.id)"
+                        @dirty="(e, isDirty) => setFormState(e, isDirty, tg.id)"
                         @metadata="showMetadata"
                     />
                 </form>
@@ -788,8 +788,8 @@
             const showTabActions = (grp, status) => {
                 state.attributeGrpHovered = status ? grp : null;
             };
-            const setFormState = (e, grp) => {
-                state.dirtyStates[grp] = e.dirty && e.valid;
+            const setFormState = (e, isDirty, grp) => {
+                state.dirtyStates[grp] = isDirty;
                 updateDependencyState(e.attribute_id, e.value);
             };
             const getDirtyValues = grp => {
diff --git a/resources/js/components/forms/indicators/DirtyStateIndicator.vue b/resources/js/components/forms/indicators/DirtyStateIndicator.vue
new file mode 100644
index 000000000..15ed45e62
--- /dev/null
+++ b/resources/js/components/forms/indicators/DirtyStateIndicator.vue
@@ -0,0 +1,44 @@
+<template>
+    <div
+        class="dity-state-indicator"
+        :style="style"
+    />
+</template>
+
+<script>
+    import { computed } from 'vue';
+
+    export default {
+        props: {
+            value: {
+                type: Object,
+                required: true,
+            },
+        }, setup(props) {
+
+            const isDirty = computed(() => {
+                return props?.value?.meta?.dirty;
+            });
+
+
+            const isUnset = computed(() => {
+                return props?.value?.meta?.dirty == null;
+            });
+
+
+            const size = 10;
+            const style = computed(() => {
+                return {
+                    width: `${size}px`,
+                    height: `${size}px`,
+                    borderRadius: '50%',
+                    backgroundColor: isUnset.value ? 'red' : isDirty.value ? 'orange' : 'green',
+                };
+            });
+
+            return {
+                style
+            };
+        },
+    };
+</script>
\ No newline at end of file