diff --git a/package-lock.json b/package-lock.json
index b4996e91f..63233c5fa 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -97,8 +97,8 @@
         "jest-localstorage-mock": "^2.4.26",
         "jest-react-hooks-shallow": "^1.5.1",
         "jest-watch-typeahead": "^0.6.5",
-        "prettier": "3.3.3",
-        "pretty-quick": "^4.0.0",
+        "prettier": "2.8.8",
+        "pretty-quick": "^3.3.1",
         "raw.macro": "0.6.2",
         "redux-mock-store": "^1.5.4",
         "sass": "^1.63.3",
@@ -7111,6 +7111,15 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/end-of-stream": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
+      "integrity": "sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==",
+      "dev": true,
+      "dependencies": {
+        "once": "^1.4.0"
+      }
+    },
     "node_modules/enhanced-resolve": {
       "version": "5.17.1",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.17.1.tgz",
@@ -13256,14 +13265,14 @@
       }
     },
     "node_modules/prettier": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz",
-      "integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==",
+      "version": "2.8.8",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
+      "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
       "bin": {
-        "prettier": "bin/prettier.cjs"
+        "prettier": "bin-prettier.js"
       },
       "engines": {
-        "node": ">=14"
+        "node": ">=10.13.0"
       },
       "funding": {
         "url": "https://github.com/prettier/prettier?sponsor=1"
@@ -13330,13 +13339,13 @@
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
     "node_modules/pretty-quick": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/pretty-quick/-/pretty-quick-4.0.0.tgz",
-      "integrity": "sha512-M+2MmeufXb/M7Xw3Afh1gxcYpj+sK0AxEfnfF958ktFeAyi5MsKY5brymVURQLgPLV1QaF5P4pb2oFJ54H3yzQ==",
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/pretty-quick/-/pretty-quick-3.3.1.tgz",
+      "integrity": "sha512-3b36UXfYQ+IXXqex6mCca89jC8u0mYLqFAN5eTQKoXO6oCQYcIVYZEB/5AlBHI7JPYygReM2Vv6Vom/Gln7fBg==",
       "dev": true,
       "dependencies": {
-        "execa": "^5.1.1",
-        "find-up": "^5.0.0",
+        "execa": "^4.1.0",
+        "find-up": "^4.1.0",
         "ignore": "^5.3.0",
         "mri": "^1.2.0",
         "picocolors": "^1.0.0",
@@ -13344,74 +13353,97 @@
         "tslib": "^2.6.2"
       },
       "bin": {
-        "pretty-quick": "lib/cli.mjs"
+        "pretty-quick": "dist/cli.js"
       },
       "engines": {
-        "node": ">=14"
+        "node": ">=10.13"
       },
       "peerDependencies": {
-        "prettier": "^3.0.0"
+        "prettier": "^2.0.0"
       }
     },
-    "node_modules/pretty-quick/node_modules/find-up": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
-      "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+    "node_modules/pretty-quick/node_modules/execa": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/execa/-/execa-4.1.0.tgz",
+      "integrity": "sha512-j5W0//W7f8UxAn8hXVnwG8tLwdiUy4FJLcSupCg6maBYZDpyBvTApK7KyuI4bKj8KOh1r2YH+6ucuYtJv1bTZA==",
       "dev": true,
       "dependencies": {
-        "locate-path": "^6.0.0",
-        "path-exists": "^4.0.0"
+        "cross-spawn": "^7.0.0",
+        "get-stream": "^5.0.0",
+        "human-signals": "^1.1.1",
+        "is-stream": "^2.0.0",
+        "merge-stream": "^2.0.0",
+        "npm-run-path": "^4.0.0",
+        "onetime": "^5.1.0",
+        "signal-exit": "^3.0.2",
+        "strip-final-newline": "^2.0.0"
       },
       "engines": {
         "node": ">=10"
       },
       "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "url": "https://github.com/sindresorhus/execa?sponsor=1"
       }
     },
-    "node_modules/pretty-quick/node_modules/locate-path": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
-      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+    "node_modules/pretty-quick/node_modules/find-up": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
       "dev": true,
       "dependencies": {
-        "p-locate": "^5.0.0"
+        "locate-path": "^5.0.0",
+        "path-exists": "^4.0.0"
       },
       "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "node": ">=8"
       }
     },
-    "node_modules/pretty-quick/node_modules/p-limit": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
-      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+    "node_modules/pretty-quick/node_modules/get-stream": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz",
+      "integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==",
       "dev": true,
       "dependencies": {
-        "yocto-queue": "^0.1.0"
+        "pump": "^3.0.0"
       },
       "engines": {
-        "node": ">=10"
+        "node": ">=8"
       },
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/pretty-quick/node_modules/p-locate": {
+    "node_modules/pretty-quick/node_modules/human-signals": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-1.1.1.tgz",
+      "integrity": "sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==",
+      "dev": true,
+      "engines": {
+        "node": ">=8.12.0"
+      }
+    },
+    "node_modules/pretty-quick/node_modules/locate-path": {
       "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
-      "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
       "dev": true,
       "dependencies": {
-        "p-limit": "^3.0.2"
+        "p-locate": "^4.1.0"
       },
       "engines": {
-        "node": ">=10"
+        "node": ">=8"
+      }
+    },
+    "node_modules/pretty-quick/node_modules/p-locate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+      "dev": true,
+      "dependencies": {
+        "p-limit": "^2.2.0"
       },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+      "engines": {
+        "node": ">=8"
       }
     },
     "node_modules/pretty-quick/node_modules/path-exists": {
@@ -13512,6 +13544,16 @@
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.8.0.tgz",
       "integrity": "sha512-RIdOzyoavK+hA18OGGWDqUTsCLhtA7IcZ/6NCs4fFJaHBDab+pDDmDIByWFRQJq2Cd7r1OoQxBGKOaztq+hjIQ=="
     },
+    "node_modules/pump": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.2.tgz",
+      "integrity": "sha512-tUPXtzlGM8FE3P0ZL6DVs/3P58k9nk8/jZeQCurTJylQA8qFYzHFfhBJkuqyE0FifOsQ0uKWekiZ5g8wtr28cw==",
+      "dev": true,
+      "dependencies": {
+        "end-of-stream": "^1.1.0",
+        "once": "^1.3.1"
+      }
+    },
     "node_modules/punycode": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
@@ -23128,6 +23170,15 @@
       "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
       "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg=="
     },
+    "end-of-stream": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
+      "integrity": "sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==",
+      "dev": true,
+      "requires": {
+        "once": "^1.4.0"
+      }
+    },
     "enhanced-resolve": {
       "version": "5.17.1",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.17.1.tgz",
@@ -27436,9 +27487,9 @@
       "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g=="
     },
     "prettier": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz",
-      "integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew=="
+      "version": "2.8.8",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
+      "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q=="
     },
     "prettier-plugin-tailwindcss": {
       "version": "0.1.7",
@@ -27483,13 +27534,13 @@
       }
     },
     "pretty-quick": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/pretty-quick/-/pretty-quick-4.0.0.tgz",
-      "integrity": "sha512-M+2MmeufXb/M7Xw3Afh1gxcYpj+sK0AxEfnfF958ktFeAyi5MsKY5brymVURQLgPLV1QaF5P4pb2oFJ54H3yzQ==",
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/pretty-quick/-/pretty-quick-3.3.1.tgz",
+      "integrity": "sha512-3b36UXfYQ+IXXqex6mCca89jC8u0mYLqFAN5eTQKoXO6oCQYcIVYZEB/5AlBHI7JPYygReM2Vv6Vom/Gln7fBg==",
       "dev": true,
       "requires": {
-        "execa": "^5.1.1",
-        "find-up": "^5.0.0",
+        "execa": "^4.1.0",
+        "find-up": "^4.1.0",
         "ignore": "^5.3.0",
         "mri": "^1.2.0",
         "picocolors": "^1.0.0",
@@ -27497,41 +27548,64 @@
         "tslib": "^2.6.2"
       },
       "dependencies": {
+        "execa": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/execa/-/execa-4.1.0.tgz",
+          "integrity": "sha512-j5W0//W7f8UxAn8hXVnwG8tLwdiUy4FJLcSupCg6maBYZDpyBvTApK7KyuI4bKj8KOh1r2YH+6ucuYtJv1bTZA==",
+          "dev": true,
+          "requires": {
+            "cross-spawn": "^7.0.0",
+            "get-stream": "^5.0.0",
+            "human-signals": "^1.1.1",
+            "is-stream": "^2.0.0",
+            "merge-stream": "^2.0.0",
+            "npm-run-path": "^4.0.0",
+            "onetime": "^5.1.0",
+            "signal-exit": "^3.0.2",
+            "strip-final-newline": "^2.0.0"
+          }
+        },
         "find-up": {
-          "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
-          "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+          "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
           "dev": true,
           "requires": {
-            "locate-path": "^6.0.0",
+            "locate-path": "^5.0.0",
             "path-exists": "^4.0.0"
           }
         },
-        "locate-path": {
-          "version": "6.0.0",
-          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
-          "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+        "get-stream": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz",
+          "integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==",
           "dev": true,
           "requires": {
-            "p-locate": "^5.0.0"
+            "pump": "^3.0.0"
           }
         },
-        "p-limit": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
-          "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+        "human-signals": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-1.1.1.tgz",
+          "integrity": "sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==",
+          "dev": true
+        },
+        "locate-path": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+          "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
           "dev": true,
           "requires": {
-            "yocto-queue": "^0.1.0"
+            "p-locate": "^4.1.0"
           }
         },
         "p-locate": {
-          "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
-          "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+          "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
           "dev": true,
           "requires": {
-            "p-limit": "^3.0.2"
+            "p-limit": "^2.2.0"
           }
         },
         "path-exists": {
@@ -27614,6 +27688,16 @@
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.8.0.tgz",
       "integrity": "sha512-RIdOzyoavK+hA18OGGWDqUTsCLhtA7IcZ/6NCs4fFJaHBDab+pDDmDIByWFRQJq2Cd7r1OoQxBGKOaztq+hjIQ=="
     },
+    "pump": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.2.tgz",
+      "integrity": "sha512-tUPXtzlGM8FE3P0ZL6DVs/3P58k9nk8/jZeQCurTJylQA8qFYzHFfhBJkuqyE0FifOsQ0uKWekiZ5g8wtr28cw==",
+      "dev": true,
+      "requires": {
+        "end-of-stream": "^1.1.0",
+        "once": "^1.3.1"
+      }
+    },
     "punycode": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
diff --git a/package.json b/package.json
index 599824a93..0c700ef8e 100644
--- a/package.json
+++ b/package.json
@@ -107,8 +107,8 @@
     "jest-localstorage-mock": "^2.4.26",
     "jest-react-hooks-shallow": "^1.5.1",
     "jest-watch-typeahead": "^0.6.5",
-    "prettier": "3.3.3",
-    "pretty-quick": "^4.0.0",
+    "prettier": "2.8.8",
+    "pretty-quick": "^3.3.1",
     "raw.macro": "0.6.2",
     "redux-mock-store": "^1.5.4",
     "sass": "^1.63.3",
diff --git a/src/component/administration/group/UserGroups.tsx b/src/component/administration/group/UserGroups.tsx
index 7c3fa0f18..ce05ee5d7 100644
--- a/src/component/administration/group/UserGroups.tsx
+++ b/src/component/administration/group/UserGroups.tsx
@@ -20,8 +20,9 @@ const UserGroups: React.FC = () => {
   const { i18n } = useI18n();
   const dispatch: ThunkDispatch = useDispatch();
   const [groups, setGroups] = React.useState<UserGroup[]>([]);
-  const [groupToDelete, setGroupToDelete] =
-    React.useState<UserGroup | null>(null);
+  const [groupToDelete, setGroupToDelete] = React.useState<UserGroup | null>(
+    null
+  );
   React.useEffect(() => {
     trackPromise(dispatch(loadUserGroups()), "groups").then((data) =>
       setGroups(data)
diff --git a/src/component/annotator/HighlightTermOccurrencesButton.tsx b/src/component/annotator/HighlightTermOccurrencesButton.tsx
index 37b5ed01c..c6e774799 100644
--- a/src/component/annotator/HighlightTermOccurrencesButton.tsx
+++ b/src/component/annotator/HighlightTermOccurrencesButton.tsx
@@ -22,92 +22,93 @@ interface HighlightTermOccurrencesButtonProps {
   onHighlightIndexChange: (change: number) => void;
 }
 
-const HighlightTermOccurrencesButton: React.FC<HighlightTermOccurrencesButtonProps> =
-  ({ term, highlightIndex, onChange, onHighlightIndexChange }) => {
-    const { i18n, formatMessage, locale } = useI18n();
-    const [showPopup, setShowPopup] = React.useState(false);
-    const onSelect = (t: TermData | null) => {
-      onChange(t);
-    };
-    const count = term !== null ? getTermOccurrences(term.iri!).length : -1;
+const HighlightTermOccurrencesButton: React.FC<
+  HighlightTermOccurrencesButtonProps
+> = ({ term, highlightIndex, onChange, onHighlightIndexChange }) => {
+  const { i18n, formatMessage, locale } = useI18n();
+  const [showPopup, setShowPopup] = React.useState(false);
+  const onSelect = (t: TermData | null) => {
+    onChange(t);
+  };
+  const count = term !== null ? getTermOccurrences(term.iri!).length : -1;
 
-    return (
-      <>
-        <Popover
-          target="annotator-highlight-occurrences-selector"
-          placement="left"
-          isOpen={showPopup}
-          onClose={() => setShowPopup(false)}
-          fade={false}
-          className="annotator-highlight-occurrences-popup"
-        >
-          <PopoverHeader>
-            {i18n("annotator.highlight.selector.title")}
-            <button className="close" onClick={() => setShowPopup(false)}>
-              ×
-            </button>
-          </PopoverHeader>
-          <PopoverBody>
-            <FormGroup className="mb-2">
-              <div className="align-items-center d-flex mb-2">
-                <div className="flex-grow-1">
-                  <Label className="attribute-label mb-0">
-                    {i18n("annotator.highlight.selector.label")}
-                  </Label>
-                </div>
+  return (
+    <>
+      <Popover
+        target="annotator-highlight-occurrences-selector"
+        placement="left"
+        isOpen={showPopup}
+        onClose={() => setShowPopup(false)}
+        fade={false}
+        className="annotator-highlight-occurrences-popup"
+      >
+        <PopoverHeader>
+          {i18n("annotator.highlight.selector.title")}
+          <button className="close" onClick={() => setShowPopup(false)}>
+            ×
+          </button>
+        </PopoverHeader>
+        <PopoverBody>
+          <FormGroup className="mb-2">
+            <div className="align-items-center d-flex mb-2">
+              <div className="flex-grow-1">
+                <Label className="attribute-label mb-0">
+                  {i18n("annotator.highlight.selector.label")}
+                </Label>
               </div>
-              <AnnotatorTermsSelector
-                onChange={onSelect}
-                term={term}
-                autoFocus={true}
-              />
-            </FormGroup>
-            {term !== null && (
-              <>
-                <ButtonToolbar className="w-100 justify-content-between mb-2 align-middle">
-                  <Button
-                    size="sm"
-                    onClick={() => onHighlightIndexChange(-1)}
-                    disabled={highlightIndex < 0}
-                  >
-                    <FaChevronLeft />
-                  </Button>
-                  <div className="align-content-center">
-                    {highlightIndex + 1} / {count}
-                  </div>
-                  <Button
-                    size="sm"
-                    onClick={() => onHighlightIndexChange(1)}
-                    disabled={highlightIndex >= count - 1}
-                  >
-                    <FaChevronRight />
-                  </Button>
-                </ButtonToolbar>
-              </>
-            )}
-          </PopoverBody>
-        </Popover>
-        <Button
-          id="annotator-highlight-occurrences-selector"
-          key="annotator-highlight-occurrences-selector"
-          color="primary"
-          size="sm"
-          onClick={() => setShowPopup(!showPopup)}
-          className="annotator-action-button"
-          active={term !== null}
-          title={
-            term != null
-              ? formatMessage("annotator.highlight.button.active.tooltip", {
-                  term: getLocalized(term.label, locale),
-                })
-              : i18n("annotator.highlight.button.inactive.tooltip")
-          }
-        >
-          <FaSearchengin className="mr-1" />
-          {i18n("annotator.highlight.button.label")}
-        </Button>
-      </>
-    );
-  };
+            </div>
+            <AnnotatorTermsSelector
+              onChange={onSelect}
+              term={term}
+              autoFocus={true}
+            />
+          </FormGroup>
+          {term !== null && (
+            <>
+              <ButtonToolbar className="w-100 justify-content-between mb-2 align-middle">
+                <Button
+                  size="sm"
+                  onClick={() => onHighlightIndexChange(-1)}
+                  disabled={highlightIndex < 0}
+                >
+                  <FaChevronLeft />
+                </Button>
+                <div className="align-content-center">
+                  {highlightIndex + 1} / {count}
+                </div>
+                <Button
+                  size="sm"
+                  onClick={() => onHighlightIndexChange(1)}
+                  disabled={highlightIndex >= count - 1}
+                >
+                  <FaChevronRight />
+                </Button>
+              </ButtonToolbar>
+            </>
+          )}
+        </PopoverBody>
+      </Popover>
+      <Button
+        id="annotator-highlight-occurrences-selector"
+        key="annotator-highlight-occurrences-selector"
+        color="primary"
+        size="sm"
+        onClick={() => setShowPopup(!showPopup)}
+        className="annotator-action-button"
+        active={term !== null}
+        title={
+          term != null
+            ? formatMessage("annotator.highlight.button.active.tooltip", {
+                term: getLocalized(term.label, locale),
+              })
+            : i18n("annotator.highlight.button.inactive.tooltip")
+        }
+      >
+        <FaSearchengin className="mr-1" />
+        {i18n("annotator.highlight.button.label")}
+      </Button>
+    </>
+  );
+};
 
 export default HighlightTermOccurrencesButton;
diff --git a/src/component/annotator/TermDefinitionAnnotation.tsx b/src/component/annotator/TermDefinitionAnnotation.tsx
index a4bd69470..4a175f201 100644
--- a/src/component/annotator/TermDefinitionAnnotation.tsx
+++ b/src/component/annotator/TermDefinitionAnnotation.tsx
@@ -89,56 +89,57 @@ function createActionButtons(
   return actions;
 }
 
-export const TermDefinitionAnnotation: React.FC<TermDefinitionAnnotationProps> =
-  (props) => {
-    const { i18n } = useI18n();
-    const term = props.term !== undefined ? props.term : null;
-    const [editing, setEditing] = React.useState(term === null);
-    React.useEffect(() => {
-      if (term) {
-        setEditing(false);
-      }
-    }, [term]);
-    const dispatch: ThunkDispatch = useDispatch();
-    const onRemove = () => {
-      props.onRemove();
-      if (term) {
-        dispatch(removeTermDefinitionSource(term));
-      }
-    };
-    const bodyContent = editing ? (
-      <AnnotationTerms
-        onChange={props.onSelectTerm}
-        canCreateTerm={false}
-        selectedTerm={term}
-      />
-    ) : (
-      <TermDefinitionAnnotationView
-        term={term}
-        resource={props.resource}
-        textContent={props.text}
-      />
-    );
-
-    return (
-      <SimplePopupWithActions
-        isOpen={props.isOpen}
-        target={props.target}
-        toggle={props.onToggleDetailOpen}
-        component={bodyContent}
-        actions={createActionButtons(
-          i18n,
-          editing,
-          {
-            onClose: props.onClose,
-            onEdit: () => setEditing(!editing),
-            onRemove,
-          },
-          props.accessLevel
-        )}
-        title={i18n("annotation.definition.title")}
-      />
-    );
+export const TermDefinitionAnnotation: React.FC<
+  TermDefinitionAnnotationProps
+> = (props) => {
+  const { i18n } = useI18n();
+  const term = props.term !== undefined ? props.term : null;
+  const [editing, setEditing] = React.useState(term === null);
+  React.useEffect(() => {
+    if (term) {
+      setEditing(false);
+    }
+  }, [term]);
+  const dispatch: ThunkDispatch = useDispatch();
+  const onRemove = () => {
+    props.onRemove();
+    if (term) {
+      dispatch(removeTermDefinitionSource(term));
+    }
   };
+  const bodyContent = editing ? (
+    <AnnotationTerms
+      onChange={props.onSelectTerm}
+      canCreateTerm={false}
+      selectedTerm={term}
+    />
+  ) : (
+    <TermDefinitionAnnotationView
+      term={term}
+      resource={props.resource}
+      textContent={props.text}
+    />
+  );
+
+  return (
+    <SimplePopupWithActions
+      isOpen={props.isOpen}
+      target={props.target}
+      toggle={props.onToggleDetailOpen}
+      component={bodyContent}
+      actions={createActionButtons(
+        i18n,
+        editing,
+        {
+          onClose: props.onClose,
+          onEdit: () => setEditing(!editing),
+          onRemove,
+        },
+        props.accessLevel
+      )}
+      title={i18n("annotation.definition.title")}
+    />
+  );
+};
 
 export default TermDefinitionAnnotation;
diff --git a/src/component/annotator/TermDefinitionAnnotationView.tsx b/src/component/annotator/TermDefinitionAnnotationView.tsx
index b8ffd9b27..67347f74f 100644
--- a/src/component/annotator/TermDefinitionAnnotationView.tsx
+++ b/src/component/annotator/TermDefinitionAnnotationView.tsx
@@ -9,36 +9,37 @@ interface TermDefinitionAnnotationViewProps {
   textContent: string;
 }
 
-const TermDefinitionAnnotationView: React.FC<TermDefinitionAnnotationViewProps> =
-  (props) => {
-    const { i18n } = useI18n();
-    if (props.term) {
-      return (
-        <table>
-          <tbody>
-            <tr>
-              <td className="label">{i18n("annotation.definition.term")}</td>
-              <td>
-                <TermLink term={props.term} />
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      );
-    } else {
-      return (
-        <table>
-          <tbody>
-            <tr>
-              <td className="label">
-                {i18n("annotation.definition.definition")}
-              </td>
-              <td>{props.textContent}</td>
-            </tr>
-          </tbody>
-        </table>
-      );
-    }
-  };
+const TermDefinitionAnnotationView: React.FC<
+  TermDefinitionAnnotationViewProps
+> = (props) => {
+  const { i18n } = useI18n();
+  if (props.term) {
+    return (
+      <table>
+        <tbody>
+          <tr>
+            <td className="label">{i18n("annotation.definition.term")}</td>
+            <td>
+              <TermLink term={props.term} />
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    );
+  } else {
+    return (
+      <table>
+        <tbody>
+          <tr>
+            <td className="label">
+              {i18n("annotation.definition.definition")}
+            </td>
+            <td>{props.textContent}</td>
+          </tr>
+        </tbody>
+      </table>
+    );
+  }
+};
 
 export default TermDefinitionAnnotationView;
diff --git a/src/component/annotator/TermOccurrenceAnnotation.tsx b/src/component/annotator/TermOccurrenceAnnotation.tsx
index 3e31f807e..e95594d22 100644
--- a/src/component/annotator/TermOccurrenceAnnotation.tsx
+++ b/src/component/annotator/TermOccurrenceAnnotation.tsx
@@ -102,54 +102,55 @@ function createActionButtons(
   return actions;
 }
 
-export const TermOccurrenceAnnotation: React.FC<TermOccurrenceAnnotationProps> =
-  (props) => {
-    const { i18n } = useI18n();
-    const term = props.term !== undefined ? props.term : null;
-    const [editing, setEditing] = React.useState(term === null);
-    React.useEffect(() => {
-      if (term) {
-        setEditing(false);
-      }
-    }, [term]);
-    const onClose = () => {
+export const TermOccurrenceAnnotation: React.FC<
+  TermOccurrenceAnnotationProps
+> = (props) => {
+  const { i18n } = useI18n();
+  const term = props.term !== undefined ? props.term : null;
+  const [editing, setEditing] = React.useState(term === null);
+  React.useEffect(() => {
+    if (term) {
       setEditing(false);
-      props.onClose();
-    };
-    const popupBody = editing ? (
-      <AnnotationTerms
-        selectedTerm={term}
-        onChange={props.onSelectTerm}
-        onCreateTerm={props.onCreateTerm}
-      />
-    ) : (
-      <TermOccurrenceAnnotationView
-        term={term}
-        score={props.score}
-        resource={props.resource}
-        annotationClass={props.annotationClass}
-      />
-    );
-
-    return (
-      <SimplePopupWithActions
-        isOpen={props.isOpen}
-        target={props.target}
-        toggle={props.onToggleDetailOpen}
-        component={popupBody}
-        actions={createActionButtons(
-          Object.assign({}, props, {
-            onSelectTerm: props.onSelectTerm,
-            onClose,
-          }),
-          i18n,
-          editing,
-          () => setEditing(!editing),
-          props.accessLevel
-        )}
-        title={i18n("annotation.occurrence.title")}
-      />
-    );
+    }
+  }, [term]);
+  const onClose = () => {
+    setEditing(false);
+    props.onClose();
   };
+  const popupBody = editing ? (
+    <AnnotationTerms
+      selectedTerm={term}
+      onChange={props.onSelectTerm}
+      onCreateTerm={props.onCreateTerm}
+    />
+  ) : (
+    <TermOccurrenceAnnotationView
+      term={term}
+      score={props.score}
+      resource={props.resource}
+      annotationClass={props.annotationClass}
+    />
+  );
+
+  return (
+    <SimplePopupWithActions
+      isOpen={props.isOpen}
+      target={props.target}
+      toggle={props.onToggleDetailOpen}
+      component={popupBody}
+      actions={createActionButtons(
+        Object.assign({}, props, {
+          onSelectTerm: props.onSelectTerm,
+          onClose,
+        }),
+        i18n,
+        editing,
+        () => setEditing(!editing),
+        props.accessLevel
+      )}
+      title={i18n("annotation.occurrence.title")}
+    />
+  );
+};
 
 export default TermOccurrenceAnnotation;
diff --git a/src/component/annotator/TermOccurrenceAnnotationView.tsx b/src/component/annotator/TermOccurrenceAnnotationView.tsx
index e4a7a07e4..235c31d28 100644
--- a/src/component/annotator/TermOccurrenceAnnotationView.tsx
+++ b/src/component/annotator/TermOccurrenceAnnotationView.tsx
@@ -11,41 +11,42 @@ interface TermOccurrenceAnnotationViewProps {
   annotationClass: string;
 }
 
-const TermOccurrenceAnnotationView: React.FC<TermOccurrenceAnnotationViewProps> =
-  (props) => {
-    const { i18n, formatMessage } = useI18n();
-    switch (props.annotationClass) {
-      case AnnotationClass.ASSIGNED_OCCURRENCE:
-        return (
-          <table>
-            <tbody>
-              <tr>
-                <td className={"label"}>
-                  {i18n("annotation.term.assigned-occurrence.termLabel")}
-                </td>
-                <td>
-                  <TermLink term={props.term!} />
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        );
-      case AnnotationClass.SUGGESTED_OCCURRENCE:
-        return (
-          <span className="an-warning">
-            {i18n("annotation.form.suggested-occurrence.message")}
-          </span>
-        );
-      case AnnotationClass.INVALID:
-        return (
-          <span className="an-error">
-            {formatMessage("annotation.form.invalid-occurrence.message", {
-              term: props.term ? props.term.iri : props.resource,
-            })}
-          </span>
-        );
-    }
-    return <div />;
-  };
+const TermOccurrenceAnnotationView: React.FC<
+  TermOccurrenceAnnotationViewProps
+> = (props) => {
+  const { i18n, formatMessage } = useI18n();
+  switch (props.annotationClass) {
+    case AnnotationClass.ASSIGNED_OCCURRENCE:
+      return (
+        <table>
+          <tbody>
+            <tr>
+              <td className={"label"}>
+                {i18n("annotation.term.assigned-occurrence.termLabel")}
+              </td>
+              <td>
+                <TermLink term={props.term!} />
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      );
+    case AnnotationClass.SUGGESTED_OCCURRENCE:
+      return (
+        <span className="an-warning">
+          {i18n("annotation.form.suggested-occurrence.message")}
+        </span>
+      );
+    case AnnotationClass.INVALID:
+      return (
+        <span className="an-error">
+          {formatMessage("annotation.form.invalid-occurrence.message", {
+            term: props.term ? props.term.iri : props.resource,
+          })}
+        </span>
+      );
+  }
+  return <div />;
+};
 
 export default TermOccurrenceAnnotationView;
diff --git a/src/component/comment/CommentList.tsx b/src/component/comment/CommentList.tsx
index 820a70cb1..7b595387a 100644
--- a/src/component/comment/CommentList.tsx
+++ b/src/component/comment/CommentList.tsx
@@ -22,8 +22,9 @@ const CommentList: React.FC<CommentListProps> = (props) => {
     removeComment,
   } = props;
 
-  const [editedComment, setEditedComment] =
-    React.useState<Comment | null>(null);
+  const [editedComment, setEditedComment] = React.useState<Comment | null>(
+    null
+  );
   if (comments.length === 0) {
     return <span className="italics">{props.i18n("comments.list.empty")}</span>;
   }
diff --git a/src/component/dashboard/widget/lastcommented/CommonLastCommentedAssets.tsx b/src/component/dashboard/widget/lastcommented/CommonLastCommentedAssets.tsx
index c81b3f254..9b7dc6f42 100644
--- a/src/component/dashboard/widget/lastcommented/CommonLastCommentedAssets.tsx
+++ b/src/component/dashboard/widget/lastcommented/CommonLastCommentedAssets.tsx
@@ -21,8 +21,9 @@ const CommonLastCommentedAssets: React.FC<CommonLastCommentedAssetsProps> = (
 ) => {
   const { loadAssets } = props;
   const [page, setPage] = useState(0);
-  const [lastCommentedAssets, setLastCommentedAssets] =
-    React.useState<RecentlyCommentedAsset[] | null>(null);
+  const [lastCommentedAssets, setLastCommentedAssets] = React.useState<
+    RecentlyCommentedAsset[] | null
+  >(null);
   const dispatch: ThunkDispatch = useDispatch();
   React.useEffect(() => {
     trackPromise(
diff --git a/src/component/dashboard/widget/lastedited/AssetList.tsx b/src/component/dashboard/widget/lastedited/AssetList.tsx
index d6eae03bd..69002fb95 100644
--- a/src/component/dashboard/widget/lastedited/AssetList.tsx
+++ b/src/component/dashboard/widget/lastedited/AssetList.tsx
@@ -30,85 +30,86 @@ function renderLink(
   return AssetLinkFactory.createAssetLink(AssetFactory.createAsset(item));
 }
 
-export const AssetList: React.FC<{ assets: RecentlyModifiedAsset[] | null }> =
-  ({ assets }) => {
-    const user = useSelector((state: TermItState) => state.user);
-    const lastSeen = user.lastSeen ? Date.parse(user.lastSeen) : Date.now();
-    const { i18n, formatMessage, locale } = useI18n();
+export const AssetList: React.FC<{
+  assets: RecentlyModifiedAsset[] | null;
+}> = ({ assets }) => {
+  const user = useSelector((state: TermItState) => state.user);
+  const lastSeen = user.lastSeen ? Date.parse(user.lastSeen) : Date.now();
+  const { i18n, formatMessage, locale } = useI18n();
 
-    if (!assets) {
-      return null;
-    }
-
-    const renderNonEmptyContent = () => {
-      const formatter = new TimeAgo(locale);
-      return (
-        <Table className="widget" borderless={true}>
-          <tbody>
-            {assets.map((asset) => {
-              const modifiedTimestamp = Date.parse(asset.modified!);
-              return (
-                <tr key={asset.iri}>
-                  <td className="col-xs-12 px-0">
-                    <div>
-                      {shouldHighlight(lastSeen, user.iri, asset) && (
-                        <FaRegBell
-                          className="asset-list-highlight-icon mr-1"
-                          title={i18n("dashboard.widget.assetList.new.tooltip")}
-                        />
-                      )}
-                      <span className="pr-2">
-                        <AssetBadge asset={asset} />
-                      </span>
-                      {renderLink(asset, i18n)}
-                    </div>
-                    <Row>
-                      <Col xs={12}>
-                        <Label
-                          className="italics asset-list-title-message"
-                          title={new Date(modifiedTimestamp).toLocaleString(
-                            locale
-                          )}
-                        >
-                          {user.iri === asset.editor!.iri
-                            ? formatMessage(
-                                "dashboard.widget.assetList.lastEditMessageByYou",
-                                {
-                                  when: formatter.format(modifiedTimestamp),
-                                  operation: asset.editor ? "edit" : "create",
-                                }
-                              )
-                            : formatMessage(
-                                "dashboard.widget.assetList.lastEditMessage",
-                                {
-                                  user: asset.editor!.fullName,
-                                  when: formatter.format(modifiedTimestamp),
-                                  operation: asset.editor ? "edit" : "create",
-                                }
-                              )}
-                        </Label>
-                      </Col>
-                    </Row>
-                  </td>
-                </tr>
-              );
-            })}
-          </tbody>
-        </Table>
-      );
-    };
+  if (!assets) {
+    return null;
+  }
 
+  const renderNonEmptyContent = () => {
+    const formatter = new TimeAgo(locale);
     return (
-      <>
-        {assets.length > 0 ? (
-          renderNonEmptyContent()
-        ) : (
-          <div className="italics py-2">
-            {i18n("dashboard.widget.assetList.empty")}
-          </div>
-        )}
-      </>
+      <Table className="widget" borderless={true}>
+        <tbody>
+          {assets.map((asset) => {
+            const modifiedTimestamp = Date.parse(asset.modified!);
+            return (
+              <tr key={asset.iri}>
+                <td className="col-xs-12 px-0">
+                  <div>
+                    {shouldHighlight(lastSeen, user.iri, asset) && (
+                      <FaRegBell
+                        className="asset-list-highlight-icon mr-1"
+                        title={i18n("dashboard.widget.assetList.new.tooltip")}
+                      />
+                    )}
+                    <span className="pr-2">
+                      <AssetBadge asset={asset} />
+                    </span>
+                    {renderLink(asset, i18n)}
+                  </div>
+                  <Row>
+                    <Col xs={12}>
+                      <Label
+                        className="italics asset-list-title-message"
+                        title={new Date(modifiedTimestamp).toLocaleString(
+                          locale
+                        )}
+                      >
+                        {user.iri === asset.editor!.iri
+                          ? formatMessage(
+                              "dashboard.widget.assetList.lastEditMessageByYou",
+                              {
+                                when: formatter.format(modifiedTimestamp),
+                                operation: asset.editor ? "edit" : "create",
+                              }
+                            )
+                          : formatMessage(
+                              "dashboard.widget.assetList.lastEditMessage",
+                              {
+                                user: asset.editor!.fullName,
+                                when: formatter.format(modifiedTimestamp),
+                                operation: asset.editor ? "edit" : "create",
+                              }
+                            )}
+                      </Label>
+                    </Col>
+                  </Row>
+                </td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </Table>
     );
   };
 
+  return (
+    <>
+      {assets.length > 0 ? (
+        renderNonEmptyContent()
+      ) : (
+        <div className="italics py-2">
+          {i18n("dashboard.widget.assetList.empty")}
+        </div>
+      )}
+    </>
+  );
+};
+
 export default AssetList;
diff --git a/src/component/dashboard/widget/lastedited/CommonLastEditedAssets.tsx b/src/component/dashboard/widget/lastedited/CommonLastEditedAssets.tsx
index 358c25846..5f35f4ded 100644
--- a/src/component/dashboard/widget/lastedited/CommonLastEditedAssets.tsx
+++ b/src/component/dashboard/widget/lastedited/CommonLastEditedAssets.tsx
@@ -20,8 +20,9 @@ const CommonLastEditedAssets: React.FC<CommonLastEditedAssetsProps> = (
 ) => {
   const { loadAssets } = props;
   const [page, setPage] = useState(0);
-  const [lastEditedAssets, setLastEditedAssets] =
-    React.useState<RecentlyModifiedAsset[] | null>(null);
+  const [lastEditedAssets, setLastEditedAssets] = React.useState<
+    RecentlyModifiedAsset[] | null
+  >(null);
   const dispatch: ThunkDispatch = useDispatch();
   React.useEffect(() => {
     trackPromise(
diff --git a/src/component/layout/AttributeSectionContainer.tsx b/src/component/layout/AttributeSectionContainer.tsx
index 89620740b..bc8ac8037 100644
--- a/src/component/layout/AttributeSectionContainer.tsx
+++ b/src/component/layout/AttributeSectionContainer.tsx
@@ -8,16 +8,17 @@ interface AttributeSectionContainerProps {
 /**
  * Visual container for grouping asset attributes.
  */
-export const AttributeSectionContainer: React.FC<AttributeSectionContainerProps> =
-  (props) => {
-    const { label, children } = props;
-    return (
-      <div className="form-section">
-        <h3>{label}</h3>
-        <hr className="form-section-separator" />
-        {children}
-      </div>
-    );
-  };
+export const AttributeSectionContainer: React.FC<
+  AttributeSectionContainerProps
+> = (props) => {
+  const { label, children } = props;
+  return (
+    <div className="form-section">
+      <h3>{label}</h3>
+      <hr className="form-section-separator" />
+      {children}
+    </div>
+  );
+};
 
 export default AttributeSectionContainer;
diff --git a/src/component/misc/MarkdownEditor.tsx b/src/component/misc/MarkdownEditor.tsx
index 4a1f0eb79..312cfe670 100644
--- a/src/component/misc/MarkdownEditor.tsx
+++ b/src/component/misc/MarkdownEditor.tsx
@@ -188,8 +188,9 @@ const MarkdownEditor: React.FC<MarkdownEditorProps> = (props) => {
     setMdeInstance(easyMde);
   }, []);
 
-  const [codemirrorInstance, setCodemirrorInstance] =
-    useState<Editor | null>(null);
+  const [codemirrorInstance, setCodemirrorInstance] = useState<Editor | null>(
+    null
+  );
   const getCmInstanceCallback = useCallback((editor: Editor) => {
     setCodemirrorInstance(editor);
   }, []);
diff --git a/src/component/search/facet/FacetedSearch.tsx b/src/component/search/facet/FacetedSearch.tsx
index fe6dfee97..6c29aaa9f 100644
--- a/src/component/search/facet/FacetedSearch.tsx
+++ b/src/component/search/facet/FacetedSearch.tsx
@@ -63,8 +63,9 @@ const FacetedSearch: React.FC = () => {
   const dispatch: ThunkDispatch = useDispatch();
   const [page, setPage] = useState(0);
   const [params, setParams] = useState(INITIAL_STATE);
-  const [results, setResults] =
-    React.useState<FacetedSearchResult[] | null>(null);
+  const [results, setResults] = React.useState<FacetedSearchResult[] | null>(
+    null
+  );
 
   const onChange = (value: SearchParam) => {
     const change = {};
diff --git a/src/component/term/DefinitionRelatedTermsEdit.tsx b/src/component/term/DefinitionRelatedTermsEdit.tsx
index 1e607b6ce..56bd82541 100644
--- a/src/component/term/DefinitionRelatedTermsEdit.tsx
+++ b/src/component/term/DefinitionRelatedTermsEdit.tsx
@@ -227,67 +227,68 @@ interface DefinitionalTermOccurrenceProps {
   isSuggested: boolean;
 }
 
-export const DefinitionalTermOccurrence: React.FC<DefinitionalTermOccurrenceProps> =
-  (props) => {
-    const {
-      occurrence,
-      term,
-      language,
-      onApprove,
-      onRemove,
-      canApprove,
-      canRemove,
-      isSuggested,
-    } = props;
-    const { i18n } = useI18n();
-    return (
-      <>
-        <td
-          className={classNames("pl-0 align-middle", {
-            italics: isSuggested,
-          })}
-        >
-          {isSuggested && (
-            <InfoIcon
-              className="mr-1"
-              text={i18n("term.metadata.related.definitionally.suggested")}
-              id={`term-metadata-definition-suggested-${Utils.hashCode(
-                occurrence.iri!
-              )}`}
-            />
+export const DefinitionalTermOccurrence: React.FC<
+  DefinitionalTermOccurrenceProps
+> = (props) => {
+  const {
+    occurrence,
+    term,
+    language,
+    onApprove,
+    onRemove,
+    canApprove,
+    canRemove,
+    isSuggested,
+  } = props;
+  const { i18n } = useI18n();
+  return (
+    <>
+      <td
+        className={classNames("pl-0 align-middle", {
+          italics: isSuggested,
+        })}
+      >
+        {isSuggested && (
+          <InfoIcon
+            className="mr-1"
+            text={i18n("term.metadata.related.definitionally.suggested")}
+            id={`term-metadata-definition-suggested-${Utils.hashCode(
+              occurrence.iri!
+            )}`}
+          />
+        )}
+        {term && <TermLink term={term} language={language} />}
+      </td>
+      <td className="pr-0">
+        <ButtonToolbar className="d-inline float-right ml-1">
+          {canApprove && (
+            <BadgeButton
+              color="primary"
+              size="sm"
+              title={i18n("annotation.confirm")}
+              onClick={() => onApprove(occurrence)}
+            >
+              <FaCheck className="mr-1" />
+              {i18n("approve")}
+            </BadgeButton>
           )}
-          {term && <TermLink term={term} language={language} />}
-        </td>
-        <td className="pr-0">
-          <ButtonToolbar className="d-inline float-right ml-1">
-            {canApprove && (
-              <BadgeButton
-                color="primary"
-                size="sm"
-                title={i18n("annotation.confirm")}
-                onClick={() => onApprove(occurrence)}
-              >
-                <FaCheck className="mr-1" />
-                {i18n("approve")}
-              </BadgeButton>
-            )}
-            {canRemove && (
-              <BadgeButton
-                color="danger"
-                size="sm"
-                outline={true}
-                title={i18n("annotation.remove")}
-                onClick={() => onRemove(occurrence)}
-              >
-                <FaTrashAlt className="mr-1" />
-                {i18n("remove")}
-              </BadgeButton>
-            )}
-          </ButtonToolbar>
-        </td>
-      </>
-    );
-  };
+          {canRemove && (
+            <BadgeButton
+              color="danger"
+              size="sm"
+              outline={true}
+              title={i18n("annotation.remove")}
+              onClick={() => onRemove(occurrence)}
+            >
+              <FaTrashAlt className="mr-1" />
+              {i18n("remove")}
+            </BadgeButton>
+          )}
+        </ButtonToolbar>
+      </td>
+    </>
+  );
+};
 
 export default connect(
   (state: TermItState) => ({
diff --git a/src/component/term/TermDefinitionSourceLink.tsx b/src/component/term/TermDefinitionSourceLink.tsx
index c3e4be48b..bc6d048c2 100644
--- a/src/component/term/TermDefinitionSourceLink.tsx
+++ b/src/component/term/TermDefinitionSourceLink.tsx
@@ -17,63 +17,62 @@ interface TermDefinitionSourceLinkProps {
   term: Term;
 }
 
-export const TermDefinitionSourceLink: React.FC<TermDefinitionSourceLinkProps> =
-  (props) => {
-    const defSource = props.term.definitionSource;
-    const { i18n } = useI18n();
-    const dispatch: ThunkDispatch = useDispatch();
-    const [file, setFile] = React.useState<File>();
-    const target = defSource!.target;
-    const targetIri = VocabularyUtils.create(target.source.iri!);
-    React.useEffect(() => {
-      if (defSource) {
-        dispatch(
-          loadFileMetadata(
-            VocabularyUtils.create(defSource.target!.source!.iri!)
-          )
-        ).then((file?: File) => setFile(file));
-      }
-    }, [defSource, dispatch]);
-    const navigateToDefinitionSource = () => {
-      if (!file || !file.owner) {
-        return;
-      }
-      // assert target.selectors.length === 1
+export const TermDefinitionSourceLink: React.FC<
+  TermDefinitionSourceLinkProps
+> = (props) => {
+  const defSource = props.term.definitionSource;
+  const { i18n } = useI18n();
+  const dispatch: ThunkDispatch = useDispatch();
+  const [file, setFile] = React.useState<File>();
+  const target = defSource!.target;
+  const targetIri = VocabularyUtils.create(target.source.iri!);
+  React.useEffect(() => {
+    if (defSource) {
       dispatch(
-        pushRoutingPayload(Routes.annotateFile, {
-          selector: Utils.sanitizeArray(target.selectors)[0],
-        })
-      );
-      const ownerIri = VocabularyUtils.create(file.owner.iri!);
-      Routing.transitionTo(Routes.annotateFile, {
-        params: new Map([
-          ["name", ownerIri.fragment],
-          ["fileName", targetIri.fragment],
-        ]),
-        query: new Map([
-          ["namespace", ownerIri.namespace!],
-          ["fileNamespace", targetIri.namespace!],
-        ]),
-      });
-    };
-
-    return (
-      <>
-        <Button
-          id="term-metadata-definitionSource-goto"
-          color="primary"
-          outline={true}
-          disabled={!file}
-          size="sm"
-          className="ml-2"
-          onClick={navigateToDefinitionSource}
-          title={i18n("term.metadata.definitionSource.goto.tooltip")}
-        >
-          <GoFileSymlinkFile className="mr-1" />
-          {i18n("term.metadata.definitionSource.goto")}
-        </Button>
-      </>
+        loadFileMetadata(VocabularyUtils.create(defSource.target!.source!.iri!))
+      ).then((file?: File) => setFile(file));
+    }
+  }, [defSource, dispatch]);
+  const navigateToDefinitionSource = () => {
+    if (!file || !file.owner) {
+      return;
+    }
+    // assert target.selectors.length === 1
+    dispatch(
+      pushRoutingPayload(Routes.annotateFile, {
+        selector: Utils.sanitizeArray(target.selectors)[0],
+      })
     );
+    const ownerIri = VocabularyUtils.create(file.owner.iri!);
+    Routing.transitionTo(Routes.annotateFile, {
+      params: new Map([
+        ["name", ownerIri.fragment],
+        ["fileName", targetIri.fragment],
+      ]),
+      query: new Map([
+        ["namespace", ownerIri.namespace!],
+        ["fileNamespace", targetIri.namespace!],
+      ]),
+    });
   };
 
+  return (
+    <>
+      <Button
+        id="term-metadata-definitionSource-goto"
+        color="primary"
+        outline={true}
+        disabled={!file}
+        size="sm"
+        className="ml-2"
+        onClick={navigateToDefinitionSource}
+        title={i18n("term.metadata.definitionSource.goto.tooltip")}
+      >
+        <GoFileSymlinkFile className="mr-1" />
+        {i18n("term.metadata.definitionSource.goto")}
+      </Button>
+    </>
+  );
+};
+
 export default TermDefinitionSourceLink;
diff --git a/src/component/vocabulary/ImportedVocabulariesList.tsx b/src/component/vocabulary/ImportedVocabulariesList.tsx
index df956d846..8d8845a6c 100644
--- a/src/component/vocabulary/ImportedVocabulariesList.tsx
+++ b/src/component/vocabulary/ImportedVocabulariesList.tsx
@@ -10,32 +10,33 @@ interface ImportedVocabulariesListProps {
   vocabularies?: AssetData[];
 }
 
-export const ImportedVocabulariesList: React.FC<ImportedVocabulariesListProps> =
-  (props: ImportedVocabulariesListProps) => {
-    const { i18n } = useI18n();
-    const vocabs = Utils.sanitizeArray(props.vocabularies);
-    vocabs.sort((a: AssetData, b: AssetData) => a.iri!.localeCompare(b.iri!));
-    return (
-      <Row>
-        <Col xl={2} md={4}>
-          <Label className="attribute-label">
-            {i18n("vocabulary.detail.imports")}
-          </Label>
-        </Col>
-        <Col xl={10} md={8}>
-          <ul
-            id="vocabulary-metadata-importedVocabularies"
-            className="ul-padding"
-          >
-            {vocabs.map((v) => (
-              <li key={v.iri}>
-                <VocabularyIriLink iri={v.iri!} />
-              </li>
-            ))}
-          </ul>
-        </Col>
-      </Row>
-    );
-  };
+export const ImportedVocabulariesList: React.FC<
+  ImportedVocabulariesListProps
+> = (props: ImportedVocabulariesListProps) => {
+  const { i18n } = useI18n();
+  const vocabs = Utils.sanitizeArray(props.vocabularies);
+  vocabs.sort((a: AssetData, b: AssetData) => a.iri!.localeCompare(b.iri!));
+  return (
+    <Row>
+      <Col xl={2} md={4}>
+        <Label className="attribute-label">
+          {i18n("vocabulary.detail.imports")}
+        </Label>
+      </Col>
+      <Col xl={10} md={8}>
+        <ul
+          id="vocabulary-metadata-importedVocabularies"
+          className="ul-padding"
+        >
+          {vocabs.map((v) => (
+            <li key={v.iri}>
+              <VocabularyIriLink iri={v.iri!} />
+            </li>
+          ))}
+        </ul>
+      </Col>
+    </Row>
+  );
+};
 
 export default ImportedVocabulariesList;
diff --git a/src/component/vocabulary/ImportedVocabulariesListEdit.tsx b/src/component/vocabulary/ImportedVocabulariesListEdit.tsx
index 38c296a31..bdc70f614 100644
--- a/src/component/vocabulary/ImportedVocabulariesListEdit.tsx
+++ b/src/component/vocabulary/ImportedVocabulariesListEdit.tsx
@@ -21,61 +21,58 @@ interface ImportedVocabulariesListEditProps {
   onChange: (change: object) => void;
 }
 
-const ImportedVocabulariesListEdit: React.FC<ImportedVocabulariesListEditProps> =
-  ({ vocabulary, importedVocabularies, onChange }) => {
-    const { i18n, locale } = useI18n();
-    const vocabularies = useSelector(
-      (state: TermItState) => state.vocabularies
-    );
-    const dispatch: ThunkDispatch = useDispatch();
-    React.useEffect(() => {
-      if (Object.getOwnPropertyNames(vocabularies).length === 0) {
-        dispatch(loadVocabularies());
-      }
-    }, [dispatch, vocabularies]);
+const ImportedVocabulariesListEdit: React.FC<
+  ImportedVocabulariesListEditProps
+> = ({ vocabulary, importedVocabularies, onChange }) => {
+  const { i18n, locale } = useI18n();
+  const vocabularies = useSelector((state: TermItState) => state.vocabularies);
+  const dispatch: ThunkDispatch = useDispatch();
+  React.useEffect(() => {
+    if (Object.getOwnPropertyNames(vocabularies).length === 0) {
+      dispatch(loadVocabularies());
+    }
+  }, [dispatch, vocabularies]);
 
-    const onSelect = (selected: Vocabulary[]) => {
-      const selectedVocabs = selected.map((v) => ({ iri: v.iri }));
-      onChange({ importedVocabularies: selectedVocabs });
-    };
-
-    const options = Object.keys(vocabularies)
-      .map((v) => vocabularies[v])
-      .filter((v) => v.iri !== vocabulary.iri);
-    const selected = Utils.sanitizeArray(importedVocabularies).map(
-      (v) => v.iri!
-    );
-    return (
-      <Row>
-        <Col xs={12}>
-          <FormGroup>
-            <Label className="attribute-label">
-              {i18n("vocabulary.detail.imports.edit")}
-            </Label>
-            <IntelligentTreeSelect
-              className="p-0"
-              onChange={onSelect}
-              value={selected}
-              options={options}
-              valueKey="iri"
-              getOptionLabel={(option: Term | TermData) =>
-                getLocalized(option.label, getShortLocale(locale))
-              }
-              childrenKey="children"
-              placeholder={i18n("select.placeholder")}
-              classNamePrefix="react-select"
-              isMenuOpen={false}
-              multi={true}
-              showSettings={false}
-              displayInfoOnHover={false}
-              renderAsTree={false}
-              simpleTreeData={true}
-              valueRenderer={createVocabularyValueRenderer()}
-            />
-          </FormGroup>
-        </Col>
-      </Row>
-    );
+  const onSelect = (selected: Vocabulary[]) => {
+    const selectedVocabs = selected.map((v) => ({ iri: v.iri }));
+    onChange({ importedVocabularies: selectedVocabs });
   };
 
+  const options = Object.keys(vocabularies)
+    .map((v) => vocabularies[v])
+    .filter((v) => v.iri !== vocabulary.iri);
+  const selected = Utils.sanitizeArray(importedVocabularies).map((v) => v.iri!);
+  return (
+    <Row>
+      <Col xs={12}>
+        <FormGroup>
+          <Label className="attribute-label">
+            {i18n("vocabulary.detail.imports.edit")}
+          </Label>
+          <IntelligentTreeSelect
+            className="p-0"
+            onChange={onSelect}
+            value={selected}
+            options={options}
+            valueKey="iri"
+            getOptionLabel={(option: Term | TermData) =>
+              getLocalized(option.label, getShortLocale(locale))
+            }
+            childrenKey="children"
+            placeholder={i18n("select.placeholder")}
+            classNamePrefix="react-select"
+            isMenuOpen={false}
+            multi={true}
+            showSettings={false}
+            displayInfoOnHover={false}
+            renderAsTree={false}
+            simpleTreeData={true}
+            valueRenderer={createVocabularyValueRenderer()}
+          />
+        </FormGroup>
+      </Col>
+    </Row>
+  );
+};
+
 export default ImportedVocabulariesListEdit;
diff --git a/src/component/vocabulary/TermChangeFrequency.tsx b/src/component/vocabulary/TermChangeFrequency.tsx
index d7fb18e25..3732dad53 100644
--- a/src/component/vocabulary/TermChangeFrequency.tsx
+++ b/src/component/vocabulary/TermChangeFrequency.tsx
@@ -20,10 +20,12 @@ interface TermChangeFrequencyProps {
 }
 
 const TermChangeFrequency: React.FC<TermChangeFrequencyProps> = (props) => {
-  const [aggregatedRecords, setAggregatedRecords] =
-    React.useState<null | AggregatedChangeInfo[]>(null);
-  const [changeRecords, setChangeRecords] =
-    React.useState<null | ChangeRecord[]>(null);
+  const [aggregatedRecords, setAggregatedRecords] = React.useState<
+    null | AggregatedChangeInfo[]
+  >(null);
+  const [changeRecords, setChangeRecords] = React.useState<
+    null | ChangeRecord[]
+  >(null);
   const { vocabulary } = props;
   const { i18n } = useI18n();
   const dispatch: ThunkDispatch = useDispatch();
diff --git a/src/component/vocabulary/acl/AccessControlHolderSelector.tsx b/src/component/vocabulary/acl/AccessControlHolderSelector.tsx
index e83ca0449..20598ff7f 100644
--- a/src/component/vocabulary/acl/AccessControlHolderSelector.tsx
+++ b/src/component/vocabulary/acl/AccessControlHolderSelector.tsx
@@ -27,86 +27,83 @@ interface SelectOption {
   label: string;
 }
 
-const AccessControlHolderSelector: React.FC<AccessControlHolderSelectorProps> =
-  ({ holderType, holder, onChange, disabled = false, existingHolders }) => {
-    const { i18n, locale } = useI18n();
-    const users = useSelector((state: TermItState) => state.users);
-    const roles = useSelector(
-      (state: TermItState) => state.configuration.roles
-    );
-    const [groups, setGroups] = React.useState<UserGroup[]>([]);
-    const dispatch: ThunkDispatch = useDispatch();
-    React.useEffect(() => {
-      dispatch(loadUsers());
-      dispatch(loadUserGroups()).then((data) => setGroups(data));
-    }, [dispatch, setGroups]);
-    const onSelect = (option: { value: string; label: string }) => {
-      switch (holderType) {
-        case VocabularyUtils.USER:
-          onChange(users.find((u) => u.iri === option.value));
-          break;
-        case VocabularyUtils.USER_GROUP:
-          onChange(groups.find((u) => u.iri === option.value));
-          break;
-        case VocabularyUtils.USER_ROLE:
-          onChange(roles.find((r) => r.iri === option.value));
-          break;
-      }
-    };
+const AccessControlHolderSelector: React.FC<
+  AccessControlHolderSelectorProps
+> = ({ holderType, holder, onChange, disabled = false, existingHolders }) => {
+  const { i18n, locale } = useI18n();
+  const users = useSelector((state: TermItState) => state.users);
+  const roles = useSelector((state: TermItState) => state.configuration.roles);
+  const [groups, setGroups] = React.useState<UserGroup[]>([]);
+  const dispatch: ThunkDispatch = useDispatch();
+  React.useEffect(() => {
+    dispatch(loadUsers());
+    dispatch(loadUserGroups()).then((data) => setGroups(data));
+  }, [dispatch, setGroups]);
+  const onSelect = (option: { value: string; label: string }) => {
+    switch (holderType) {
+      case VocabularyUtils.USER:
+        onChange(users.find((u) => u.iri === option.value));
+        break;
+      case VocabularyUtils.USER_GROUP:
+        onChange(groups.find((u) => u.iri === option.value));
+        break;
+      case VocabularyUtils.USER_ROLE:
+        onChange(roles.find((r) => r.iri === option.value));
+        break;
+    }
+  };
 
-    const options = React.useMemo(() => {
-      let optionArr: SelectOption[] = [];
-      switch (holderType) {
-        case VocabularyUtils.USER:
-          optionArr = users.map((u) => ({
-            value: u.iri,
-            label: `${u.fullName} (${u.username})`,
+  const options = React.useMemo(() => {
+    let optionArr: SelectOption[] = [];
+    switch (holderType) {
+      case VocabularyUtils.USER:
+        optionArr = users.map((u) => ({
+          value: u.iri,
+          label: `${u.fullName} (${u.username})`,
+        }));
+        break;
+      case VocabularyUtils.USER_GROUP:
+        optionArr = groups.map((g) => ({ value: g.iri!, label: g.label }));
+        break;
+      case VocabularyUtils.USER_ROLE:
+        // Admin has always Security access, no point in setting access rights to them
+        optionArr = roles
+          .filter((r) => r.iri !== VocabularyUtils.USER_ADMIN)
+          .map((r) => ({
+            value: r.iri,
+            label: getLocalized(r.label, locale),
           }));
-          break;
-        case VocabularyUtils.USER_GROUP:
-          optionArr = groups.map((g) => ({ value: g.iri!, label: g.label }));
-          break;
-        case VocabularyUtils.USER_ROLE:
-          // Admin has always Security access, no point in setting access rights to them
-          optionArr = roles
-            .filter((r) => r.iri !== VocabularyUtils.USER_ADMIN)
-            .map((r) => ({
-              value: r.iri,
-              label: getLocalized(r.label, locale),
-            }));
-          break;
-        default:
-          break;
-      }
-      if (!disabled) {
-        optionArr = optionArr.filter(
-          (o) => existingHolders.indexOf(o.value) === -1
-        );
-      }
-      return optionArr;
-    }, [users, roles, groups, locale, holderType, disabled, existingHolders]);
+        break;
+      default:
+        break;
+    }
+    if (!disabled) {
+      optionArr = optionArr.filter(
+        (o) => existingHolders.indexOf(o.value) === -1
+      );
+    }
+    return optionArr;
+  }, [users, roles, groups, locale, holderType, disabled, existingHolders]);
 
-    return (
-      <>
-        <IntelligentTreeSelect
-          options={options}
-          onChange={onSelect}
-          value={
-            holder ? options.find((o) => o.value === holder.iri) : undefined
-          }
-          renderAsTree={false}
-          showSettings={false}
-          multi={false}
-          displayInfoOnHover={false}
-          expanded={false}
-          placeholder=""
-          isClearable={false}
-          valueRenderer={Utils.simpleValueRenderer}
-          isDisabled={disabled}
-        />
-        <FormText>{i18n("required")}</FormText>
-      </>
-    );
-  };
+  return (
+    <>
+      <IntelligentTreeSelect
+        options={options}
+        onChange={onSelect}
+        value={holder ? options.find((o) => o.value === holder.iri) : undefined}
+        renderAsTree={false}
+        showSettings={false}
+        multi={false}
+        displayInfoOnHover={false}
+        expanded={false}
+        placeholder=""
+        isClearable={false}
+        valueRenderer={Utils.simpleValueRenderer}
+        isDisabled={disabled}
+      />
+      <FormText>{i18n("required")}</FormText>
+    </>
+  );
+};
 
 export default AccessControlHolderSelector;
diff --git a/src/component/vocabulary/acl/AccessControlList.tsx b/src/component/vocabulary/acl/AccessControlList.tsx
index 4f50ea861..499c1b143 100644
--- a/src/component/vocabulary/acl/AccessControlList.tsx
+++ b/src/component/vocabulary/acl/AccessControlList.tsx
@@ -73,17 +73,20 @@ const AccessControlList: React.FC<{ vocabularyIri: string }> = ({
   vocabularyIri,
 }) => {
   const { i18n } = useI18n();
-  const [acl, setAcl] =
-    React.useState<AccessControlListModel | undefined>(undefined);
+  const [acl, setAcl] = React.useState<AccessControlListModel | undefined>(
+    undefined
+  );
   const existingHolders = React.useMemo(
     () => (acl ? acl.records.map((r) => r.holder.iri) : []),
     [acl]
   );
   const [showCreateDialog, setShowCreateDialog] = React.useState(false);
-  const [recordToRemove, setRecordToRemove] =
-    React.useState<AccessControlRecordData | undefined>();
-  const [recordToUpdate, setRecordToUpdate] =
-    React.useState<AbstractAccessControlRecord<any> | undefined>();
+  const [recordToRemove, setRecordToRemove] = React.useState<
+    AccessControlRecordData | undefined
+  >();
+  const [recordToUpdate, setRecordToUpdate] = React.useState<
+    AbstractAccessControlRecord<any> | undefined
+  >();
   const accessLevels = useSelector((state: TermItState) => state.accessLevels);
   const dispatch: ThunkDispatch = useDispatch();
   React.useEffect(() => {
diff --git a/src/component/vocabulary/acl/EditAccessControlRecordDialog.tsx b/src/component/vocabulary/acl/EditAccessControlRecordDialog.tsx
index e4f4dd56d..c6e449277 100644
--- a/src/component/vocabulary/acl/EditAccessControlRecordDialog.tsx
+++ b/src/component/vocabulary/acl/EditAccessControlRecordDialog.tsx
@@ -13,29 +13,30 @@ interface EditAccessControlRecordDialogProps {
   existingHolders?: string[];
 }
 
-const EditAccessControlRecordDialog: React.FC<EditAccessControlRecordDialogProps> =
-  ({ show, record, onChange, onSubmit, onCancel, existingHolders }) => {
-    const { i18n } = useI18n();
-    return (
-      <ConfirmCancelDialog
-        show={show}
-        id="create-acr"
-        confirmKey="save"
-        onClose={onCancel}
-        onConfirm={onSubmit}
-        confirmDisabled={!record || !record.holder || !record.accessLevel}
-        title={i18n("vocabulary.acl.record.update.dialog.title")}
-      >
-        {record && (
-          <AccessControlRecordForm
-            record={record}
-            onChange={onChange}
-            holderReadOnly={true}
-            existingHolders={existingHolders}
-          />
-        )}
-      </ConfirmCancelDialog>
-    );
-  };
+const EditAccessControlRecordDialog: React.FC<
+  EditAccessControlRecordDialogProps
+> = ({ show, record, onChange, onSubmit, onCancel, existingHolders }) => {
+  const { i18n } = useI18n();
+  return (
+    <ConfirmCancelDialog
+      show={show}
+      id="create-acr"
+      confirmKey="save"
+      onClose={onCancel}
+      onConfirm={onSubmit}
+      confirmDisabled={!record || !record.holder || !record.accessLevel}
+      title={i18n("vocabulary.acl.record.update.dialog.title")}
+    >
+      {record && (
+        <AccessControlRecordForm
+          record={record}
+          onChange={onChange}
+          holderReadOnly={true}
+          existingHolders={existingHolders}
+        />
+      )}
+    </ConfirmCancelDialog>
+  );
+};
 
 export default EditAccessControlRecordDialog;
diff --git a/src/component/vocabulary/acl/RemoveAccessControlRecordDialog.tsx b/src/component/vocabulary/acl/RemoveAccessControlRecordDialog.tsx
index b97e07ccf..4dfd488f5 100644
--- a/src/component/vocabulary/acl/RemoveAccessControlRecordDialog.tsx
+++ b/src/component/vocabulary/acl/RemoveAccessControlRecordDialog.tsx
@@ -12,29 +12,30 @@ interface RemoveAccessControlRecordDialogProps {
   onCancel: () => void;
 }
 
-const RemoveAccessControlRecordDialog: React.FC<RemoveAccessControlRecordDialogProps> =
-  ({ record, show, onSubmit, onCancel }) => {
-    const { i18n, formatMessage, locale } = useI18n();
-    if (!record) {
-      return null;
-    }
+const RemoveAccessControlRecordDialog: React.FC<
+  RemoveAccessControlRecordDialogProps
+> = ({ record, show, onSubmit, onCancel }) => {
+  const { i18n, formatMessage, locale } = useI18n();
+  if (!record) {
+    return null;
+  }
 
-    return (
-      <ConfirmCancelDialog
-        show={show}
-        id="remove-acr"
-        confirmKey="remove"
-        onClose={onCancel}
-        onConfirm={onSubmit}
-        title={i18n("vocabulary.acl.record.remove.dialog.title")}
-      >
-        <Label>
-          {formatMessage("vocabulary.acl.record.remove.dialog.text", {
-            holder: getLocalized(record.holder.label, locale),
-          })}
-        </Label>
-      </ConfirmCancelDialog>
-    );
-  };
+  return (
+    <ConfirmCancelDialog
+      show={show}
+      id="remove-acr"
+      confirmKey="remove"
+      onClose={onCancel}
+      onConfirm={onSubmit}
+      title={i18n("vocabulary.acl.record.remove.dialog.title")}
+    >
+      <Label>
+        {formatMessage("vocabulary.acl.record.remove.dialog.text", {
+          holder: getLocalized(record.holder.label, locale),
+        })}
+      </Label>
+    </ConfirmCancelDialog>
+  );
+};
 
 export default RemoveAccessControlRecordDialog;