diff --git a/vue-client/src/App.vue b/vue-client/src/App.vue
index 68b579bbd2..3bd32d71b5 100644
--- a/vue-client/src/App.vue
+++ b/vue-client/src/App.vue
@@ -1138,4 +1138,34 @@ h1 {
   }
 }
 
+// ------------ HISTORY --------------
+
+.is-diff-added {
+  @base-color: @form-add;
+  background-color: @base-color !important;
+}
+
+.is-diff-removed {
+  @base-color: @remove;
+  border: 1px dashed !important;
+  border-color: @base-color !important;
+  background-color: @form-remove !important;
+}
+
+.is-diff-modified {
+  @base-color: @brand-primary-orange;
+  border: 1px dashed !important;
+  border-color: @base-color !important;
+  background-color: @form-modified !important;
+}
+
+.icon-removed {
+  transform: translateY(-5%);
+  color: @remove;
+}
+
+.icon-added {
+  position: relative;
+  color: #428BCAFF; // @brand-primary base.
+}
 </style>
diff --git a/vue-client/src/components/inspector/copy-attributes.vue b/vue-client/src/components/inspector/copy-attributes.vue
new file mode 100644
index 0000000000..a65a2b2397
--- /dev/null
+++ b/vue-client/src/components/inspector/copy-attributes.vue
@@ -0,0 +1,71 @@
+<script>
+import ReverseRelations from '@/components/inspector/reverse-relations.vue';
+import IdLabel from '@/components/shared/id-label.vue';
+
+export default {
+  name: 'copy-attributes',
+  props: {
+    uri: {
+      type: String,
+      default: '',
+    },
+    focusData: {
+      type: Object,
+      default: null,
+    },
+    isLibrisResource: {
+      type: Boolean,
+      default: false,
+    },
+    diffIdAdded: {
+      type: Boolean,
+      default: false,
+    },
+    diffIdRemoved: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  components: {
+    'id-label': IdLabel,
+    'reverse-relations': ReverseRelations,
+  },
+  data() {
+    return {
+      totalReverseCount: -1,
+    };
+  },
+  methods: {
+    allCount(value) {
+      this.totalReverseCount = value;
+    },
+  },
+};
+
+</script>
+
+<template>
+  <div class="Attributes">
+    <id-label
+      :uri="this.uri"
+      :is-libris-resource="this.isLibrisResource"
+      :diff-added="this.diffIdAdded"
+      :diff-removed="this.diffIdRemoved"
+    />
+    <div class="Attributes-relationsContainer">
+      <!--TODO: Make this work when it is possible to link to copies from the cat. client.-->
+      <reverse-relations
+        @numberOfRelations="allCount"
+        :main-entity="focusData"
+        :compact="false" />
+    </div>
+  </div>
+</template>
+<style lang="less">
+  .Attributes {
+    display: flex;
+    &-relationsContainer {
+      justify-content: flex-end;
+    }
+  }
+</style>
diff --git a/vue-client/src/components/inspector/field.vue b/vue-client/src/components/inspector/field.vue
index a84b28e0a1..aacf768243 100644
--- a/vue-client/src/components/inspector/field.vue
+++ b/vue-client/src/components/inspector/field.vue
@@ -1130,37 +1130,6 @@ export default {
     background-color: hsl(hue(@base-color), 50%, 95%);
   }
 
-  &.is-diff-added {
-    @base-color: @form-add;
-    border: 1px solid;
-    border-color: @brand-primary;
-    background-color: @base-color;
-  }
-
-  &.is-diff-removed {
-    @base-color: @remove;
-    border: 1px dashed;
-    border-color: @base-color;
-    background-color: @form-remove;
-  }
-
-  &.is-diff-modified {
-    @base-color: @brand-primary-orange;
-    border: 1px dashed;
-    border-color: @base-color;
-    background-color: @form-modified;
-  }
-
-  .icon-removed {
-    transform: translateY(-5%);
-    color: @remove;
-  }
-
-  .icon-added {
-    position: relative;
-    color: #428BCAFF; // @brand-primary base.
-  }
-
   &.is-highlighted { // replace 'is-lastadded' & 'is-marked' with this class
     background-color: @form-highlight;
   }
diff --git a/vue-client/src/components/inspector/item-entity.vue b/vue-client/src/components/inspector/item-entity.vue
index 419cdc5d6d..60c4ae33f1 100644
--- a/vue-client/src/components/inspector/item-entity.vue
+++ b/vue-client/src/components/inspector/item-entity.vue
@@ -211,8 +211,8 @@ export default {
             'is-cache': recordType === 'CacheRecord',
             'is-placeholder': recordType === 'PlaceholderRecord',
             'is-ext-link': !isLibrisResource,
-            'is-removed': diffRemoved,
-            'is-added': diffAdded,
+            'is-diff-removed': diffRemoved,
+            'is-diff-added': diffAdded,
           }">
           <span class="ItemEntity-history-icon" v-if="diffRemoved">
             <i class="fa fa-trash-o icon--sm icon-removed" />
@@ -346,18 +346,6 @@ export default {
     animation-name: pulse;
   }
 
-  &.is-removed {
-    @base-color: @remove;
-    border: 1px dashed;
-    border-color: @base-color;
-    background-color: @form-remove;
-  }
-
-  &.is-added {
-    @base-color: @form-add;
-    background-color: @base-color;
-  }
-
   &.expanded {
     margin: 0 0 2em 0;
   }
diff --git a/vue-client/src/components/inspector/item-local.vue b/vue-client/src/components/inspector/item-local.vue
index 687af16bea..61422e808d 100644
--- a/vue-client/src/components/inspector/item-local.vue
+++ b/vue-client/src/components/inspector/item-local.vue
@@ -9,6 +9,8 @@ import * as LayoutUtil from '@/utils/layout';
 import { translatePhrase, labelByLang, capitalize } from '@/utils/filters';
 import PropertyAdder from '@/components/inspector/property-adder.vue';
 import EntityAction from '@/components/inspector/entity-action.vue';
+import IdLabel from '@/components/shared/id-label.vue';
+import CopyAttributes from '@/components/inspector/copy-attributes.vue';
 import SearchWindow from './search-window.vue';
 import ItemMixin from '../mixins/item-mixin.vue';
 import LensMixin from '../mixins/lens-mixin.vue';
@@ -150,6 +152,15 @@ export default {
       }
       return false;
     },
+    canAddId() {
+      if (this.fieldKey === 'hasComponent' && this.isHolding && !this.hasId) {
+        return true;
+      }
+      return false;
+    },
+    hasId() {
+      return this.item.hasOwnProperty('@id');
+    },
     getPath() {
       if (this.inArray) {
         return `${this.parentPath}[${this.index}]`;
@@ -181,6 +192,14 @@ export default {
       }
       return false;
     },
+    diffIdAdded() {
+      if (this.diff == null) return false;
+      return this.diff.added.includes(`${this.getPath}.@id`);
+    },
+    diffIdRemoved() {
+      if (this.diff == null) return false;
+      return this.diff.removed.includes(`${this.getPath}.@id`);
+    },
   },
   methods: {
     translatePhrase,
@@ -352,6 +371,23 @@ export default {
         }
       });
     },
+    addId() {
+      if (this.canAddId) {
+        this.$store.dispatch('updateInspectorData', {
+          changeList: [
+            {
+              path: `${this.path}.@id`,
+              value: 'https://libris.kb.se/TEMPID',
+            },
+          ],
+          addToHistory: true,
+        });
+        this.$store.dispatch('setInspectorStatusValue', {
+          property: 'lastAdded',
+          value: `${this.path}.@id`,
+        });
+      }
+    },
   },
   watch: {
     'inspector.status.editing'(val) {
@@ -452,6 +488,7 @@ export default {
   },
 
   components: {
+    'copy-attributes': CopyAttributes,
     'property-adder': PropertyAdder,
     'search-window': SearchWindow,
     'entity-action': EntityAction,
@@ -520,7 +557,14 @@ export default {
           <i class="fa fa-plus-circle icon--sm icon-added" />
         </div>
       </div>
-
+      <copy-attributes
+        v-if="this.hasId"
+        :uri="this.recordId"
+        :focus-data="this.focusData"
+        :is-libris-resource="this.isLibrisResource"
+        :diff-id-added="this.diffIdAdded"
+        :diff-id-removed="this.diffIdRemoved"
+      />
       <div class="ItemLocal-actions">
         <entity-action
           v-if="isExtracting"
@@ -608,6 +652,16 @@ export default {
                 {{ translatePhrase("Duplicate entity") }}
               </a>
             </li>
+            <li class="ManagerMenu-menuItem" v-if="canAddId">
+              <a
+                tabindex="0"
+                class="ManagerMenu-menuLink"
+                @keyup.enter="addId(), closeManagerMenu()"
+                @click="addId(), closeManagerMenu()">
+                <i class="fa fa-fw fa-plus" aria-hidden="true" />
+                {{ translatePhrase("Create id for entity") }}
+              </a>
+            </li>
           </ul>
         </div>
       </div>
@@ -843,17 +897,6 @@ export default {
     box-shadow: 0 2px 5px rgba(0,0,0,.16);
     margin: 1rem 0 1rem 0;
   }
-  &.is-diff-removed {
-    @base-color: @remove;
-    border: 1px dashed;
-    border-color: @base-color;
-    background-color: @form-remove;
-  }
-
-  &.is-diff-added {
-    @base-color: @form-add;
-    background-color: @base-color;
-  }
 
   &.is-expanded >
   .ItemLocal-heading >
@@ -870,7 +913,7 @@ export default {
   &.is-extracting {
     background-color: @form-extracting !important;
     border: 1px dashed @brand-primary;
-    
+
     &.highlight-mark {
       border-color: @brand-primary !important;
     }
diff --git a/vue-client/src/components/inspector/item-value.vue b/vue-client/src/components/inspector/item-value.vue
index 896d952d50..877fc9c168 100644
--- a/vue-client/src/components/inspector/item-value.vue
+++ b/vue-client/src/components/inspector/item-value.vue
@@ -267,27 +267,7 @@ export default {
     overflow: hidden;
   }
 
-  &.is-diff-removed {
-    @base-color: @remove;
-    border: 1px dashed;
-    border-color: @base-color;
-    background-color: @form-remove;
-    margin-bottom: 2px;
-  }
-
-  &.is-diff-added {
-    @base-color: @form-add;
-    border: 1px solid;
-    border-color: @brand-primary;
-    background-color: @base-color;
-    margin-bottom: 2px
-  }
-
-  &.is-diff-modified {
-    @base-color: @brand-primary-orange;
-    border: 1px dashed;
-    border-color: @base-color;
-    background-color: @form-modified;
+  &.is-diff-removed, &.is-diff-added, &.is-diff-modified {
     margin-bottom: 2px;
   }
 
diff --git a/vue-client/src/components/inspector/language-entry.vue b/vue-client/src/components/inspector/language-entry.vue
index 63725b0764..64457a29b8 100644
--- a/vue-client/src/components/inspector/language-entry.vue
+++ b/vue-client/src/components/inspector/language-entry.vue
@@ -284,51 +284,51 @@ export default {
     </div>
 
     <div
+      class="LanguageEntry-textcontainer"
       v-if="isLocked"
       v-bind:class="{
-        'LanguageEntry-is-diff-removed': diffRemoved && !diffAdded,
-        'LanguageEntry-is-diff-added': diffAdded && !diffRemoved,
-        'LanguageEntry-is-diff-modified': diffModified,
-      }">
-      <div class="LanguageEntry-textcontainer">
-        <div class="LanguageEntry-key">
-          <div class="LanguageEntry-text">
-            {{ modelValue }}
-          </div>
+        'is-diff-removed': diffRemoved && !diffAdded,
+        'is-diff-added': diffAdded && !diffRemoved,
+        'is-diff-modified': diffModified,
+      }"
+    >
+      <div class="LanguageEntry-key">
+        <div class="LanguageEntry-text">
+          {{ modelValue }}
         </div>
+      </div>
 
-        <span class="LanguageEntry-tags">
-          <span class="LanguageEntry-pill" v-if="tag !== 'none'">
-            <Menu
-              v-if="this.isLinked"
-              class="LanguageEntry-popover"
-              placement="bottom-start"
-              :delay="{ show: 200, hide: 0 }"
-              :popperHideTriggers="['hover']"
-              @apply-show="$refs.previewCard.populateData()">
-              <span class="LanguageEntry-pill-label LanguageEntry-pill-link">
-                <router-link :to="routerPath">{{ this.label }}</router-link>
-              </span>
-
-              <template #popper>
-                <PreviewCard ref="previewCard" :focus-data="data" :record-id="this.recordId" />
-              </template>
-            </Menu>
-
-            <span v-if="!this.isLinked" class="LanguageEntry-pill-label">
-              {{ this.label }}
+      <span class="LanguageEntry-tags">
+        <span class="LanguageEntry-pill" v-if="tag !== 'none'">
+          <Menu
+            v-if="this.isLinked"
+            class="LanguageEntry-popover"
+            placement="bottom-start"
+            :delay="{ show: 200, hide: 0 }"
+            :popperHideTriggers="['hover']"
+            @apply-show="$refs.previewCard.populateData()">
+            <span class="LanguageEntry-pill-label LanguageEntry-pill-link">
+              <router-link :to="routerPath">{{ this.label }}</router-link>
             </span>
-          </span>
 
-          <span class="LanguageEntry-tags-history-icon" v-if="diffRemoved && !diffAdded">
-            <i class="fa fa-trash-o icon--sm icon-removed" />
-          </span>
+            <template #popper>
+              <PreviewCard ref="previewCard" :focus-data="data" :record-id="this.recordId" />
+            </template>
+          </Menu>
 
-          <span class="LanguageEntry-tags-history-icon" v-if="diffAdded && !diffRemoved">
-            <i class="fa fa-plus-circle icon--sm icon-added" />
+          <span v-if="!this.isLinked" class="LanguageEntry-pill-label">
+            {{ this.label }}
           </span>
         </span>
-      </div>
+
+        <span class="LanguageEntry-tags-history-icon" v-if="diffRemoved && !diffAdded">
+          <i class="fa fa-trash-o icon--sm icon-removed" />
+        </span>
+
+        <span class="LanguageEntry-tags-history-icon" v-if="diffAdded && !diffRemoved">
+          <i class="fa fa-plus-circle icon--sm icon-added" />
+        </span>
+      </span>
     </div>
   </div>
 </template>
@@ -369,36 +369,6 @@ export default {
     margin-bottom: 7px;
   }
 
-  &-is-diff-added {
-    @base-color: @form-add;
-    border: 1px solid;
-    border-radius: 4px;
-    padding: 0px 5px 0 5px;
-    border-color: @brand-primary;
-    background-color: @base-color;
-    margin-bottom: 3px;
-  }
-
-  &-is-diff-removed {
-    @base-color: @remove;
-    border: 1px dashed;
-    border-radius: 4px;
-    padding: 0px 5px 0 5px;
-    border-color: @base-color;
-    background-color: @form-remove;
-    margin-bottom: 3px;
-  }
-
-  &-is-diff-modified {
-    @base-color: @brand-primary-orange;
-    border: 1px dashed;
-    border-radius: 4px;
-    padding: 0px 5px 0 5px;
-    border-color: @base-color;
-    background-color: @form-modified;
-    margin-bottom: 3px;
-  }
-
   &-text {
     position: relative;
   }
diff --git a/vue-client/src/components/shared/entity-summary.vue b/vue-client/src/components/shared/entity-summary.vue
index dffc8da374..398aea6d33 100644
--- a/vue-client/src/components/shared/entity-summary.vue
+++ b/vue-client/src/components/shared/entity-summary.vue
@@ -9,12 +9,14 @@ import OverflowMixin from '@/components/mixins/overflow-mixin.vue';
 import EncodingLevelIcon from '@/components/shared/encoding-level-icon.vue';
 import TypeIcon from '@/components/shared/type-icon.vue';
 import SummaryNode from '@/components/shared/summary-node.vue';
+import IdLabel from '@/components/shared/id-label.vue';
 import LensMixin from '../mixins/lens-mixin.vue';
 
 export default {
   mixins: [LensMixin, OverflowMixin],
   name: 'entity-summary',
   components: {
+    IdLabel,
     EncodingLevelIcon,
     SummaryNode,
     TypeIcon,
@@ -109,9 +111,6 @@ export default {
   },
   data() {
     return {
-      idHover: false,
-      recentlyCopiedId: false,
-      failedCopyId: false,
       defaultSettings: {
         show: false,
         styling: 'grey',
@@ -145,24 +144,9 @@ export default {
       }
       return false;
     },
-    idAsFnurgel() {
-      if (this.uri) {
-        const id = this.uri;
-        const fnurgel = RecordUtil.extractFnurgel(id);
-        if (fnurgel && this.isLibrisResource) {
-          return fnurgel;
-        }
-        const cleaned = id.replace('https://', '').replace('http://', '');
-        return cleaned;
-      }
-      return null;
-    },
     hiddenDetailsNumber() {
       return this.getSummary.info.length - this.keyDisplayLimit;
     },
-    idTooltipText() {
-      return StringUtil.getUiPhraseByLang('Copy ID', this.user.settings.language, this.resources.i18n);
-    },
     isReplacedBy() {
       const info = this.getSummary.info;
       const infoObj = {};
@@ -285,18 +269,6 @@ export default {
     labelByLang,
     convertResourceLink,
     capitalize,
-    copyFnurgel() {
-      const self = this;
-      this.$copyText(this.uri).then(() => {
-        self.recentlyCopiedId = true;
-        setTimeout(() => {
-          self.recentlyCopiedId = false;
-        }, 1000);
-      }, (e) => {
-        self.failedCopyId = true;
-        console.warn(e);
-      });
-    },
     importThis() {
       this.$emit('import-this');
     },
@@ -332,18 +304,11 @@ export default {
         {{ topBarInformation }} {{ isLocal ? '{lokal entitet}' : '' }}
         <span class="EntitySummary-sourceLabel" v-if="database">{{ database }}</span>
       </div>
-      <div
-        v-if="idAsFnurgel && excludeComponents.indexOf('id') < 0"
-        class="EntitySummary-id"
-        :class="{ 'recently-copied': recentlyCopiedId }"
-        @mouseover="idHover = true"
-        @mouseout="idHover = false">
-        <i
-          v-tooltip.top="idTooltipText"
-          class="fa fa-copy EntitySummary-idCopyIcon"
-          :class="{ collapsedIcon: !idHover || recentlyCopiedId }"
-          @click.stop="copyFnurgel" />{{ idAsFnurgel }}
-      </div>
+      <id-label
+        v-if="!excludeComponents.includes('id')"
+        :uri="this.recordId"
+        :isLibrisResource="this.isLibrisResource"
+      />
     </div>
 
     <div class="EntitySummary-info">
@@ -442,7 +407,7 @@ export default {
     display: flex;
   }
 
-  &-type, &-id {
+  &-type {
     display: block;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -461,37 +426,6 @@ export default {
     flex-grow: 2;
     flex-basis: 50%;
   }
-  &-id {
-    flex-grow: 0;
-    text-align: right;
-    text-transform: none;
-    color: @grey-very-dark-transparent;
-    background-color: @badge-color-transparent;
-    transition: background-color 0.5s ease;
-    letter-spacing: 0.5px;
-    font-size: 1.2rem;
-    font-weight: 400;
-    padding: 0 0.75em;
-    border-radius: 1em;
-
-    &.recently-copied {
-      background-color: @brand-success;
-      color: @white;
-    }
-  }
-  &-idCopyIcon {
-    transition: all 0.25s ease;
-    margin: 0 0.25em 0 -0.25em;
-    overflow: hidden;
-    width: 1.2em;
-    opacity: 1;
-    cursor: pointer;
-    &.collapsedIcon {
-      margin: 0 0 0 0;
-      width: 0;
-      opacity: 0;
-    }
-  }
 
   &-sourceLabel {
     border: 1px solid;
diff --git a/vue-client/src/components/shared/id-label.vue b/vue-client/src/components/shared/id-label.vue
new file mode 100644
index 0000000000..b46f97a0a3
--- /dev/null
+++ b/vue-client/src/components/shared/id-label.vue
@@ -0,0 +1,131 @@
+<script>
+import * as StringUtil from 'lxljs/string';
+import * as RecordUtil from '@/utils/record';
+import { mapGetters } from 'vuex';
+
+export default {
+  name: 'id-label',
+  props: {
+    uri: {
+      type: String,
+      default: '',
+    },
+    isLibrisResource: {
+      type: Boolean,
+      default: false,
+    },
+    diffAdded: {
+      type: Boolean,
+      default: false,
+    },
+    diffRemoved: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      idHover: false,
+      recentlyCopiedId: false,
+      failedCopyId: false,
+    };
+  },
+  methods: {
+    copyFnurgel() {
+      const self = this;
+      this.$copyText(this.uri).then(() => {
+        self.recentlyCopiedId = true;
+        setTimeout(() => {
+          self.recentlyCopiedId = false;
+        }, 1000);
+      }, (e) => {
+        self.failedCopyId = true;
+        console.warn(e);
+      });
+    },
+  },
+  computed: {
+    ...mapGetters([
+      'user',
+      'resources',
+    ]),
+    idAsFnurgel() {
+      if (this.uri) {
+        const id = this.uri;
+        const fnurgel = RecordUtil.extractFnurgel(id);
+        if (fnurgel && this.isLibrisResource) {
+          return fnurgel;
+        }
+        const cleaned = id.replace('https://', '').replace('http://', '');
+        return cleaned;
+      }
+      return null;
+    },
+    idTooltipText() {
+      return StringUtil.getUiPhraseByLang('Copy ID', this.user.settings.language, this.resources.i18n);
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    v-if="idAsFnurgel"
+    class="IdPill"
+    v-bind:class="{
+      'recently-copied': recentlyCopiedId,
+      'is-diff-added': diffAdded,
+      'is-diff-removed': diffRemoved,
+    }"
+    @mouseover="idHover = true"
+    @mouseout="idHover = false">
+    <i
+      v-tooltip.top="idTooltipText"
+      class="fa fa-copy IdPill-idCopyIcon"
+      :class="{ collapsedIcon: !idHover || recentlyCopiedId }"
+      @click.stop="copyFnurgel" />{{ idAsFnurgel }}
+    <span v-if="diffRemoved">
+      <i class="fa fa-trash-o icon--sm icon-removed historyIcon" />
+    </span>
+    <span v-if="diffAdded">
+      <i class="fa fa-plus-circle icon--sm icon-added historyIcon" />
+    </span>
+  </div>
+</template>
+
+<style lang="less">
+.IdPill {
+  flex-grow: 0;
+  text-align: right;
+  text-transform: none;
+  color: @grey-very-dark-transparent;
+  background-color: @badge-color-transparent;
+  transition: background-color 0.5s ease;
+  letter-spacing: 0.5px;
+  font-size: 1.2rem;
+  font-weight: 400;
+  padding: 0 0.75em;
+  border-radius: 1em;
+
+  &.recently-copied {
+    background-color: @brand-success;
+    color: @white;
+  }
+  &-idCopyIcon {
+    transition: all 0.25s ease;
+    margin: 0 0.25em 0 -0.25em;
+    overflow: hidden;
+    width: 1.2em;
+    opacity: 1;
+    cursor: pointer;
+    &.collapsedIcon {
+      margin: 0 0 0 0;
+      width: 0;
+      opacity: 0;
+    }
+  }
+}
+.historyIcon {
+  padding-top: 4px;
+}
+</style>
diff --git a/vue-client/src/resources/json/i18n.json b/vue-client/src/resources/json/i18n.json
index 5b7ef7cd4a..254e7a43e5 100644
--- a/vue-client/src/resources/json/i18n.json
+++ b/vue-client/src/resources/json/i18n.json
@@ -426,6 +426,7 @@
     "Activate change message feature": "Aktivera funktion för ändringsmeddelanden",
     "Hide handled:": "Dölj hanterade:",
     "links": "länkningar",
-    "link": "länkning"
+    "link": "länkning",
+    "Create id for entity": "Skapa id för entitet"
   }
 }